/* Keep this css code to improve the font quality */
  * {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -o-font-smoothing: antialiased;
}

/* Remove tap highlight color for better UX on touch devices */
* {
  -webkit-tap-highlight-color: transparent;
  -moz-tap-highlight-color: transparent;
  -ms-tap-highlight-color: transparent;
  tap-highlight-color: transparent;
}

/* 3) @font-face declarations — weight range = variable */
@font-face {
  font-family: 'Inter';
  src: url('https://cdn.jsdelivr.net/gh/jakubvd/kan-cza/fonts/Inter-VF.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: block; /* block text until font loads (briefly, due to preload) */
}
@font-face {
  font-family: 'FrankRuhlLibre';
  src: url('https://cdn.jsdelivr.net/gh/jakubvd/kan-cza/fonts/FrankRuhlLibre-VF.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: block;
}

/* 4) Font mapping: body = Inter, heading = FrankRuhlLibre */
:root {
  --font-base: 'Inter', sans-serif;
  --font-heading: 'FrankRuhlLibre', serif;
}
body { font-family: var(--font-base); }
h1,h2,h3,h4,h5,h6 { font-family: var(--font-heading); }

/* 4.1) Optional override: force body font for selected headings via data attribute */
[data-font="base"] {
  font-family: var(--font-base) !important;
}

/* 5) FOIT guard: hide only hero section until both fonts are loaded */
[data-font-guard] {
  opacity: 0;
  transition: opacity 200ms ease;
}
.fonts-ready [data-font-guard] {
  opacity: 1;
}


/* Minimal modal animation: reveal-up effect only */
.modal-content {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.modal-content.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Button secondary styles */

/* Static state look (premium base appearance) */
.button.is-secondary {
  filter: brightness(1.05) saturate(1.05); /* subtle enhancement */
  transition: filter 0.5s cubic-bezier(0.445, 0.05, 0.55, 0.95), box-shadow 0.4s ease-in-out;
  /* easeInOutSine */
  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.12),
              0px 1px 3px rgba(0, 0, 0, 0.08);
  will-change: filter, box-shadow;
  transform: translateZ(0);
}

/* hover */
.button.is-secondary:hover {
  filter: brightness(1.4) saturate(1.75);
  box-shadow: 0px 6px 18px rgba(37, 37, 37, 0.25),
              0px 3px 8px rgba(0, 0, 0, 0.15);
}

/* Focus – keyboard accessibility */
  .button.is-secondary:focus {
    outline: none; /* reset default focus */
  }
  .button.is-secondary:focus-visible {
    filter: brightness(1.4) saturate(1.8);
    outline: 2px solid #0047ff;   /* visible focus indicator */
    outline-offset: 3px;
  }

/* Active (mouse down / pressed) */
.button.is-secondary:active {
  filter: brightness(1.2) saturate(1.5);
  transform: scale(0.98); /* subtle press effect */
}

/* Disabled (if <button disabled>) */
.button.is-secondary:disabled,
.button.is-secondary[disabled] {
  filter: brightness(0.9) saturate(0.8);
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}

/* Main button (gold) styles */

/* Static state look (premium base appearance) */
.button.is-primary {
  filter: brightness(1) saturate(1.2);
  transition: filter 0.5s cubic-bezier(0.445, 0.05, 0.55, 0.95), box-shadow 0.4s ease-in-out;
  box-shadow: 
    0px 2px 6px rgba(0, 0, 0, 0.12),
    0px 1px 3px rgba(0, 0, 0, 0.06),
    0px 0px 6px rgba(104, 89, 1, 0.18),
    0px 4px 8px rgba(111, 94, 1, 0.18); /* softer golden bottom shadow */
  position: relative; /* needed for shimmer */
  overflow: hidden;   /* hide overflow of shimmer line */
  will-change: filter, box-shadow;
  transform: translateZ(0);
}

.button.is-primary::after {
  content: "";
  position: absolute;
  top: 0;
  left: -20%;
  width: 40%;
  height: 100%;
  background: radial-gradient(circle at center, rgba(255, 255, 255, 0.6) 0%, transparent 60%);
  opacity: 0;
  pointer-events: none;
  transform: skewX(-20deg) translateX(-50%);
}

.button.is-primary:hover::after {
  opacity: 1;
  animation: gold-outline-shimmer 4s linear forwards;
}

/* Hover */
.button.is-primary:hover {
  filter: brightness(1.04) saturate(1.6);
  box-shadow: 
    0px 4px 10px rgba(0, 0, 0, 0.12),
    0px 2px 4px rgba(0, 0, 0, 0.07),
    0px 0px 8px rgba(255, 215, 0, 0.22),
    0px 4px 10px rgba(255, 215, 0, 0.18); /* subtle gold shine */
}

/* Focus – keyboard accessibility */
  .button.is-primary:focus {
    outline: none; /* reset default focus */
  }
  .button.is-primary:focus-visible {
    filter: brightness(1.04) saturate(1.8);
    outline: 2px solid #ffd700;   /* gold outline */
    outline-offset: 3px;
  }

/* Active (mouse down / pressed) */
.button.is-primary:active {
  filter: brightness(0.95) saturate(1.5);
  transform: scale(0.98);
  box-shadow: 0px 2px 8px rgba(255, 215, 0, 0.3);
}

/* Disabled */
.button.is-primary:disabled,
.button.is-primary[disabled] {
  filter: brightness(0.9) saturate(0.8);
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
  box-shadow: none;
} 

/* 
@keyframes gold-shimmer {
  0% {
    box-shadow: 
      0px 4px 10px rgba(0, 0, 0, 0.12),
      0px 2px 4px rgba(0, 0, 0, 0.07),
      0px 0px 8px rgba(255, 215, 0, 0.22),
      0px 4px 10px rgba(255, 215, 0, 0.18);
  }
  50% {
    box-shadow: 
      0px 4px 12px rgba(0, 0, 0, 0.12),
      0px 2px 5px rgba(0, 0, 0, 0.08),
      0px 0px 12px rgba(255, 223, 100, 0.35),
      0px 6px 12px rgba(255, 215, 0, 0.28);
  }
  100% {
    box-shadow: 
      0px 4px 10px rgba(0, 0, 0, 0.12),
      0px 2px 4px rgba(0, 0, 0, 0.07),
      0px 0px 8px rgba(255, 215, 0, 0.22),
      0px 4px 10px rgba(255, 215, 0, 0.18);
  }
}
*/

@keyframes gold-outline-shimmer {
  0%   { transform: skewX(-20deg) translateX(-100%); opacity: 1; }
  50%  { transform: skewX(-20deg) translateX(225%); opacity: 1; }
  100% { transform: skewX(-20deg) translateX(250%); opacity: 0; }
}

/* Testimonial marquee animation */
.home-testimonial_component {
  animation: testimonial-scroll 240s linear infinite;
}

/* Reduced motion accessibility */
@media (prefers-reduced-motion: reduce) {
  .home-testimonial_component {
    animation: testimonial-scroll 1000s linear infinite; /* slower animation */
  }
}

@keyframes testimonial-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); } /* half width for duplicated track */
}

/* Fallback: if JS is disabled, allow hover to pause marquee */
body:not(.js-enabled) .home-testimonial_component:hover {
  animation-play-state: paused;
}

/* set contact form checkbox styles */
.form_checkbox-icon-main.w--redirected-checked {
  background-color: var(--main--green-medium) !important;
  border-color: white !important;
}

/* === Modal Overlay Fade + Blur Animation and Scroll Handling === */
.modal-overlay {
  opacity: 0;
  backdrop-filter: blur(0px);
  transition: opacity 0.1s cubic-bezier(0.445, 0.05, 0.55, 0.95), backdrop-filter 0.1s cubic-bezier(0.445, 0.05, 0.55, 0.95);
  overflow-y: hidden;
}

.modal-overlay.is-centered {
  opacity: 1;
  backdrop-filter: blur(8px);
  overflow-y: auto; /* allow scrolling inside modal overlay if content exceeds viewport */
  overscroll-behavior: contain;
}

/* === Modal Content Reveal-Up Animation with Delay === */
.modal-content {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.25s 0.15s cubic-bezier(0.445, 0.05, 0.55, 0.95), transform 0.25s 0.15s cubic-bezier(0.445, 0.05, 0.55, 0.95);
  max-height: calc(100vh - 4rem);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.25) transparent;
}

.modal-content.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* === Premium Scrollbar Styling === */
.modal-content::-webkit-scrollbar {
  width: 6px;
}
.modal-content::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.25);
  border-radius: 4px;
}
.modal-content::-webkit-scrollbar-track {
  background: transparent;
}

/* === Subtle visual hint for scrollability === */
.modal-content::before,
.modal-content::after {
  content: "";
  position: sticky;
  left: 0;
  right: 0;
  height: 12px;
  pointer-events: none;
  z-index: 2;
}
.modal-content::before {
  top: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.08), transparent);
}
.modal-content::after {
  bottom: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.08), transparent);
}


/* =========================================================
   CONTACT FORM ACCESSIBILITY + MODAL BUTTON STYLES
   ========================================================= */

/* Reset browser outlines (mouse click and touch) */
input:focus,
textarea:focus,
select:focus,
.modal-close:focus,
.form_checkbox-icon-main:focus,
.form-pp-link:focus {
  outline: none !important; /* remove mouse/touch outline */
  box-shadow: none !important;
}

/* Show focus only for keyboard navigation (Tab / Shift+Tab) */
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.w-checkbox-input.w-checkbox-input--inputType-custom.form_checkbox-icon-main:focus-visible,
.form-pp-link:focus-visible {
  outline: 2px solid #ffd700 !important; /* force visible outline on keyboard nav */
  outline-offset: 0;
}

/* Keyboard-only focus state for modal close control */
.modal-close:focus-visible {
  outline: 2px solid #ffd700 !important; /* force visible outline on keyboard nav */
  outline-offset: 2px;
}


/* ===== Checkbox keyboard focus fix for Webflow custom checkboxes ===== */

/* Remove default outline on hidden input */
.w-checkbox-input:focus {
  outline: none !important;
}

/* When keyboard focus is on the hidden input inside a .w-checkbox,
   style its visible fake div (the custom checkbox icon) */
.w-checkbox:focus-within .w-checkbox-input.w-checkbox-input--inputType-custom.form_checkbox-icon-main {
  outline: 2px solid #ffd700 !important; /* yellow focus border */
  outline-offset: 2px;
}