/* =====================================================================
   KEYNOTES CHOIR — DESIGN SYSTEM OVERRIDES
   A unified design token system to fix inconsistencies across the site.
   ===================================================================== */

/* ===========================================
   1. DESIGN TOKENS (CSS Custom Properties)
   =========================================== */
:root {
  /* — Brand Palette — */
  --kn-orange: #FE6B00;
  --kn-orange-hover: #e55f00;
  --kn-orange-light: rgba(254, 107, 0, 0.10);
  --kn-orange-glow: rgba(254, 107, 0, 0.25);
  --kn-navy: #001145;
  --kn-navy-light: #0a1f5e;
  --kn-dark: #1b1b1b;
  --kn-dark-card: #232323;
  --kn-white: #ffffff;
  --kn-off-white: #fffaf4;
  --kn-body-text: #4a5568;
  --kn-muted: rgba(0, 17, 69, 0.6);

  /* — Radius Scale (4 tokens only) — */
  --kn-radius-sm: 8px;
  --kn-radius-md: 12px;
  --kn-radius-lg: 16px;
  --kn-radius-full: 9999px;

  /* — Spacing Scale — */
  --kn-space-xs: 4px;
  --kn-space-sm: 8px;
  --kn-space-md: 16px;
  --kn-space-lg: 24px;
  --kn-space-xl: 40px;
  --kn-space-2xl: 64px;
  --kn-space-section: clamp(64px, 8vw, 100px);

  /* — Typography — */
  --kn-font: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --kn-leading-tight: 1.15;
  --kn-leading-normal: 1.5;
  --kn-leading-relaxed: 1.65;

  /* — Shadows — */
  --kn-shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
  --kn-shadow-md: 0 4px 16px rgba(0,0,0,0.10);
  --kn-shadow-lg: 0 8px 32px rgba(0,0,0,0.12);
  --kn-shadow-btn: 0 4px 14px rgba(254,107,0,0.30);
  --kn-shadow-btn-hover: 0 6px 24px rgba(254,107,0,0.40);

  /* — Transitions — */
  --kn-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --kn-duration: 0.25s;
  --kn-duration-slow: 0.4s;
}


/* ===========================================
   2. BASE RESETS & GLOBAL REFINEMENTS
   =========================================== */
html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

*,
*::before,
*::after {
  scroll-margin-top: 80px;
}

body {
  overflow-x: hidden;
}

::selection {
  background: var(--kn-orange-glow);
  color: var(--kn-white);
}

/* Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(0,17,69,0.18); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(0,17,69,0.32); }
* { scrollbar-width: thin; scrollbar-color: rgba(0,17,69,0.18) transparent; }


/* ===========================================
   3. TYPOGRAPHY NORMALIZATION
   =========================================== */

/* Unified heading rhythm inside the app */
#root h1,
#root h2,
#root h3,
#root h4 {
  font-family: var(--kn-font);
  letter-spacing: -0.02em;
  line-height: var(--kn-leading-tight);
}

/* Body text */
#root p {
  line-height: var(--kn-leading-relaxed);
  word-break: break-word;
  overflow-wrap: break-word;
}


/* ===========================================
   4. BUTTON COMPONENT — UNIFIED
   All buttons get the same interaction model.
   =========================================== */

/* Base transition for every interactive element */
#root button,
#root a {
  transition: all var(--kn-duration) var(--kn-ease);
}

/* --- Primary buttons (orange bg) --- */
#root button[class*="bg-[#FE6B00]"],
#root button[class*="bg-[#fe6b00]"],
#root a[class*="bg-[#FE6B00]"],
#root a[class*="bg-[#fe6b00]"] {
  border-radius: var(--kn-radius-full) !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em;
  box-shadow: var(--kn-shadow-btn);
  background-color: var(--kn-orange) !important;
  border-color: var(--kn-orange) !important;
  position: relative;
  overflow: hidden;
}

#root button[class*="bg-[#FE6B00]"]:hover,
#root button[class*="bg-[#fe6b00]"]:hover,
#root a[class*="bg-[#FE6B00]"]:hover,
#root a[class*="bg-[#fe6b00]"]:hover {
  background-color: var(--kn-orange-hover) !important;
  border-color: var(--kn-orange-hover) !important;
  box-shadow: var(--kn-shadow-btn-hover);
  transform: translateY(-1px);
}

#root button[class*="bg-[#FE6B00]"]:active,
#root button[class*="bg-[#fe6b00]"]:active,
#root a[class*="bg-[#FE6B00]"]:active,
#root a[class*="bg-[#fe6b00]"]:active {
  transform: translateY(0) scale(0.98);
  box-shadow: var(--kn-shadow-sm);
}

/* --- Secondary / outline buttons --- */
#root button[class*="border-2"][class*="border-white"],
#root a[class*="border-2"][class*="border-white"] {
  border-radius: var(--kn-radius-full) !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em;
  backdrop-filter: blur(4px);
}

#root button[class*="border-2"][class*="border-white"]:hover,
#root a[class*="border-2"][class*="border-white"]:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 20px rgba(255,255,255,0.15);
}

/* --- Navy buttons --- */
#root button[class*="bg-[#001145]"],
#root a[class*="bg-[#001145]"] {
  border-radius: var(--kn-radius-full) !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em;
}

#root button[class*="bg-[#001145]"]:hover,
#root a[class*="bg-[#001145]"]:hover {
  transform: translateY(-1px);
  box-shadow: var(--kn-shadow-md);
}

/* Disabled state */
#root button:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
  transform: none !important;
  box-shadow: none !important;
}

/* Active press for all buttons */
#root button:active:not(:disabled) {
  transition-duration: 0.08s;
}


/* ===========================================
   5. FORM ELEMENTS — UNIFIED COMPONENT
   =========================================== */

/* Inputs, Selects, Textareas inside form area */
#root input[class*="border-2"],
#root select[class*="border-2"],
#root textarea[class*="border-2"] {
  border-radius: var(--kn-radius-md) !important;
  transition: all var(--kn-duration) var(--kn-ease) !important;
  font-size: 15px !important;
}

#root input[class*="border-2"]:hover,
#root select[class*="border-2"]:hover,
#root textarea[class*="border-2"]:hover {
  border-color: rgba(255,255,255,0.3) !important;
  background-color: rgba(255,255,255,0.08) !important;
}

#root input[class*="border-2"]:focus,
#root select[class*="border-2"]:focus,
#root textarea[class*="border-2"]:focus {
  border-color: var(--kn-orange) !important;
  background-color: rgba(255,255,255,0.08) !important;
  box-shadow: 0 0 0 3px var(--kn-orange-light) !important;
  outline: none !important;
}

/* Error state */
#root input[class*="border-red"],
#root select[class*="border-red"],
#root textarea[class*="border-red"] {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 3px rgba(239,68,68,0.12) !important;
}

/* Placeholder fade on focus */
#root input::placeholder,
#root textarea::placeholder {
  transition: opacity var(--kn-duration) var(--kn-ease);
}
#root input:focus::placeholder,
#root textarea:focus::placeholder {
  opacity: 0.4;
}

/* Select dropdown arrow */
#root select {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.5)' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  padding-right: 40px !important;
}

/* Autofill override for dark inputs */
#root input:-webkit-autofill,
#root input:-webkit-autofill:hover,
#root input:-webkit-autofill:focus {
  -webkit-text-fill-color: white !important;
  -webkit-box-shadow: 0 0 0 1000px rgba(255,255,255,0.06) inset !important;
  transition: background-color 5000s ease-in-out 0s;
}

/* Labels */
#root label {
  font-weight: 500;
  letter-spacing: -0.01em;
}


/* ===========================================
   6. FOCUS STATES (Accessibility)
   =========================================== */
*:focus-visible {
  outline: 2px solid var(--kn-orange);
  outline-offset: 2px;
}

#root button:focus-visible,
#root a:focus-visible {
  outline: 2px solid var(--kn-orange);
  outline-offset: 3px;
  box-shadow: 0 0 0 5px var(--kn-orange-light);
}


/* ===========================================
   7. CARD & SURFACE CONSISTENCY
   =========================================== */

/* White surface cards */
#root div[class*="bg-white"][class*="rounded"],
#root div[class*="bg-[#fff"][class*="rounded"] {
  border-radius: var(--kn-radius-lg) !important;
  transition: transform var(--kn-duration) var(--kn-ease),
              box-shadow var(--kn-duration) var(--kn-ease);
}

/* Cards on dark background */
#root div[class*="bg-[rgba(255,255,255,0.0"][class*="rounded"],
#root div[class*="bg-[rgba(255,255,255,0.1"][class*="rounded"] {
  border-radius: var(--kn-radius-lg) !important;
}

/* Light cream cards */
#root div[class*="bg-[#fffaf4]"] {
  border-radius: var(--kn-radius-lg) !important;
}


/* ===========================================
   8. IMAGE HANDLING
   =========================================== */
#root img {
  transition: opacity var(--kn-duration-slow) var(--kn-ease);
  content-visibility: auto;
}

#root img[class*="rounded"] {
  border-radius: var(--kn-radius-lg) !important;
}

#root img[class*="rounded-full"] {
  border-radius: var(--kn-radius-full) !important;
}


/* ===========================================
   9. NAVIGATION POLISH
   =========================================== */
#root nav,
#root header {
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* Nav links hover */
#root nav a {
  position: relative;
  transition: color var(--kn-duration) var(--kn-ease),
              opacity var(--kn-duration) var(--kn-ease);
}


/* ===========================================
   10. SECTION VERTICAL RHYTHM
   Normalize section padding so every section
   breathes evenly.
   =========================================== */
#root > div > div > div[class*="py-"],
#root > div > div > section[class*="py-"] {
  transition: padding var(--kn-duration-slow) var(--kn-ease);
}


/* ===========================================
   11. TOAST NOTIFICATIONS — OVERRIDE SONNER
   =========================================== */
[data-sonner-toaster] {
  z-index: 999999 !important;
  font-family: var(--kn-font) !important;
}

[data-sonner-toast] {
  border-radius: var(--kn-radius-md) !important;
  font-family: var(--kn-font) !important;
  box-shadow: var(--kn-shadow-lg) !important;
}

[data-sonner-toast][data-type="success"] {
  border-left: 4px solid #10b981 !important;
}

[data-sonner-toast][data-type="error"] {
  border-left: 4px solid #ef4444 !important;
}


/* ===========================================
   12. DIALOG / MODAL POLISH
   =========================================== */
[role="dialog"] {
  border-radius: var(--kn-radius-lg) !important;
}

[role="dialog"][data-state="open"] {
  animation: kn-dialog-in 0.3s var(--kn-ease);
}

@keyframes kn-dialog-in {
  from { opacity: 0; transform: translate(-50%, -48%) scale(0.96); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}


/* ===========================================
   13. FORM SUBMISSION STATES
   =========================================== */

/* Loading spinner keyframe */
@keyframes kn-spin {
  to { transform: rotate(360deg); }
}

@keyframes kn-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

@keyframes kn-slide-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes kn-check-draw {
  to { stroke-dashoffset: 0; }
}

@keyframes kn-scale-in {
  from { transform: scale(0); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

@keyframes kn-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Submit button loading state */
.kn-btn-loading {
  position: relative !important;
  color: transparent !important;
  pointer-events: none !important;
}

.kn-btn-loading * {
  visibility: hidden;
}

.kn-btn-loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 22px;
  height: 22px;
  margin: -11px 0 0 -11px;
  border: 3px solid rgba(255,255,255,0.25);
  border-top-color: #fff;
  border-radius: 50%;
  animation: kn-spin 0.6s linear infinite;
  visibility: visible;
}

/* Success overlay */
.kn-success-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: kn-fade-in 0.3s var(--kn-ease);
  padding: 20px;
}

.kn-success-card {
  background: var(--kn-white);
  border-radius: var(--kn-radius-lg);
  padding: 48px 40px;
  max-width: 480px;
  width: 100%;
  text-align: center;
  animation: kn-slide-up 0.4s var(--kn-ease) 0.1s both;
  box-shadow: 0 24px 64px rgba(0,0,0,0.2);
}

.kn-success-icon {
  width: 72px;
  height: 72px;
  margin: 0 auto 24px;
  background: linear-gradient(135deg, #10b981, #059669);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: kn-scale-in 0.4s var(--kn-ease) 0.3s both;
  box-shadow: 0 8px 24px rgba(16,185,129,0.3);
}

.kn-success-icon svg {
  width: 36px;
  height: 36px;
  stroke: white;
  stroke-width: 3;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 50;
  stroke-dashoffset: 50;
  animation: kn-check-draw 0.4s var(--kn-ease) 0.6s forwards;
}

.kn-success-card h3 {
  font-size: 22px;
  font-weight: 700;
  color: var(--kn-navy);
  margin: 0 0 8px;
  letter-spacing: -0.02em;
}

.kn-success-card p {
  font-size: 15px;
  color: var(--kn-body-text);
  line-height: 1.6;
  margin: 0 0 28px;
}

.kn-success-card button {
  background: var(--kn-orange);
  color: white;
  border: none;
  border-radius: var(--kn-radius-full);
  padding: 12px 32px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--kn-shadow-btn);
  transition: all var(--kn-duration) var(--kn-ease);
}

.kn-success-card button:hover {
  background: var(--kn-orange-hover);
  box-shadow: var(--kn-shadow-btn-hover);
  transform: translateY(-1px);
}

/* Error inline message */
.kn-field-error {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #ef4444;
  font-size: 13px;
  font-weight: 500;
  margin-top: 6px;
  animation: kn-slide-up 0.2s var(--kn-ease);
}

.kn-field-error svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* Error toast */
.kn-error-toast {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 999999;
  background: #fff;
  border: 1px solid #fecaca;
  border-left: 4px solid #ef4444;
  border-radius: var(--kn-radius-md);
  padding: 16px 20px;
  max-width: 400px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.12);
  animation: kn-slide-in-right 0.35s var(--kn-ease);
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

@keyframes kn-slide-in-right {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}

.kn-error-toast strong {
  display: block;
  color: #991b1b;
  font-size: 14px;
  margin-bottom: 2px;
}

.kn-error-toast span {
  color: #6b7280;
  font-size: 13px;
  line-height: 1.4;
}

.kn-error-toast button {
  background: none;
  border: none;
  color: #9ca3af;
  cursor: pointer;
  padding: 2px;
  margin-left: auto;
  flex-shrink: 0;
}


/* ===========================================
   14. MOBILE-SPECIFIC REFINEMENTS
   =========================================== */
@media (max-width: 640px) {
  /* Touch targets */
  #root button,
  #root a[role="button"] {
    min-height: 44px;
  }

  /* Responsive iframes */
  iframe, video {
    max-width: 100%;
    height: auto;
  }

  /* Success card mobile */
  .kn-success-card {
    padding: 36px 24px;
  }

  .kn-error-toast {
    left: 12px;
    right: 12px;
    max-width: none;
  }
}


/* ===========================================
   15. REDUCED MOTION
   =========================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ===========================================
   18. BACK-TO-TOP BUTTON — FIX COLOR
   #FF4B00 → unified brand orange
   =========================================== */
#root button[class*="bg-[#FF4B00]"],
#root button[class*="bg-\\[\\#FF4B00\\]"] {
  background-color: var(--kn-orange) !important;
}

#root button[class*="bg-[#FF4B00]"]:hover {
  background-color: var(--kn-orange-hover) !important;
  box-shadow: var(--kn-shadow-btn-hover) !important;
}

/* Back-to-top fixed position button */
#root button[class*="fixed"][class*="bottom-"] {
  background-color: var(--kn-orange) !important;
  box-shadow: var(--kn-shadow-btn) !important;
  width: 48px !important;
  height: 48px !important;
  transition: all var(--kn-duration) var(--kn-ease) !important;
}

#root button[class*="fixed"][class*="bottom-"]:hover {
  background-color: var(--kn-orange-hover) !important;
  box-shadow: var(--kn-shadow-btn-hover) !important;
  transform: scale(1.08) !important;
}

#root button[class*="fixed"][class*="bottom-"]:active {
  transform: scale(0.95) !important;
}


/* ===========================================
   19. GALLERY CARDS — UNIFIED RADIUS & HOVER
   Normalizes rounded-[10px], rounded-[20px],
   rounded-[24px] all to 16px with consistent
   hover lift and shadow.
   =========================================== */
#root div[class*="rounded-[10px]"][class*="shadow"],
#root div[class*="rounded-[20px]"][class*="shadow"],
#root div[class*="rounded-[24px]"][class*="shadow"] {
  border-radius: var(--kn-radius-lg) !important;
  transition: transform 0.35s var(--kn-ease),
              box-shadow 0.35s var(--kn-ease) !important;
  overflow: hidden;
}

#root div[class*="rounded-[10px]"][class*="shadow"]:hover,
#root div[class*="rounded-[20px]"][class*="shadow"]:hover,
#root div[class*="rounded-[24px]"][class*="shadow"]:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 40px rgba(0,0,0,0.15) !important;
}

/* Col-span gallery items */
#root div[class*="col-span"][class*="rounded-[10px]"] {
  border-radius: var(--kn-radius-lg) !important;
}


/* ===========================================
   20. SERVICE / FEATURE CARDS — HOVER POLISH
   White cards with border and group hover.
   =========================================== */
#root div[class*="bg-white"][class*="rounded-2xl"][class*="border"][class*="shadow"] {
  border-radius: var(--kn-radius-lg) !important;
  border-color: rgba(0, 17, 69, 0.08) !important;
  transition: transform 0.3s var(--kn-ease),
              box-shadow 0.3s var(--kn-ease),
              border-color 0.3s var(--kn-ease) !important;
}

#root div[class*="bg-white"][class*="rounded-2xl"][class*="border"][class*="shadow"]:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 36px rgba(0,17,69,0.10) !important;
  border-color: rgba(254, 107, 0, 0.25) !important;
}

/* Icon containers inside service cards */
#root div[class*="bg-white"][class*="rounded-2xl"] div[class*="bg-[#FE6B00]/10"] {
  transition: background-color 0.3s var(--kn-ease),
              transform 0.3s var(--kn-ease) !important;
}

#root div[class*="bg-white"][class*="rounded-2xl"]:hover div[class*="bg-[#FE6B00]/10"] {
  background-color: rgba(254, 107, 0, 0.18) !important;
  transform: scale(1.08);
}

/* Card title hover color */
#root .group:hover .group-hover\:text-\[\#FE6B00\],
#root .group:hover .group-hover\:text-\[\#fa9971\] {
  color: var(--kn-orange) !important;
}


/* ===========================================
   21. TESTIMONIAL CARDS
   Normalize the orange border testimonials.
   =========================================== */
#root div[class*="bg-white"][class*="rounded-2xl"][class*="border-2"][class*="border-[#fa9971]"] {
  border-color: var(--kn-orange) !important;
  border-width: 1.5px !important;
  border-radius: var(--kn-radius-lg) !important;
  transition: transform 0.3s var(--kn-ease),
              box-shadow 0.3s var(--kn-ease) !important;
}

#root div[class*="bg-white"][class*="rounded-2xl"][class*="border-2"][class*="border-[#fa9971]"]:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 36px rgba(254,107,0,0.10) !important;
}

/* Testimonial nav arrows */
#root button[class*="border-2"][class*="border-[#fe6b00]"][class*="rounded-full"] {
  border-color: var(--kn-orange) !important;
  transition: all var(--kn-duration) var(--kn-ease) !important;
}

#root button[class*="border-2"][class*="border-[#fe6b00]"][class*="rounded-full"]:hover {
  background-color: var(--kn-orange) !important;
  color: white !important;
  border-color: var(--kn-orange) !important;
  transform: scale(1.05);
  box-shadow: var(--kn-shadow-btn);
}


/* ===========================================
   22. ACCORDION / FAQ
   Smooth expand/collapse, consistent styling.
   =========================================== */
#root [data-state="open"] > [role="region"],
#root [data-state="open"][class*="animate-accordion-down"] {
  transition: max-height 0.35s var(--kn-ease),
              opacity 0.25s ease !important;
}

#root button[data-state] {
  transition: background-color var(--kn-duration) var(--kn-ease) !important;
}

#root button[data-state]:hover {
  background-color: rgba(0, 17, 69, 0.03) !important;
}

#root button[data-state="open"] {
  background-color: rgba(254, 107, 0, 0.04) !important;
}

/* Rotate chevron in accordion */
#root button[data-state] svg {
  transition: transform 0.3s var(--kn-ease) !important;
}

#root button[data-state="open"] svg {
  transform: rotate(180deg);
}


/* ===========================================
   23. VIDEO SECTION — PLAY BUTTON & ASPECT
   =========================================== */

/* Video container */
#root div[class*="aspect-video"] {
  border-radius: var(--kn-radius-lg) !important;
  overflow: hidden !important;
}

/* Play button — fix #FF4B00 → brand orange */
#root button[class*="bg-[#FF4B00]"],
#root div[class*="bg-[#ff4b00]"] {
  background-color: var(--kn-orange) !important;
}

#root button[class*="bg-[#FF4B00]"]:hover {
  background-color: var(--kn-orange-hover) !important;
}

/* Play icon circle */
#root div[class*="bg-[#ff4b00]"][class*="rounded-full"] {
  background-color: var(--kn-orange) !important;
  box-shadow: 0 4px 20px rgba(254, 107, 0, 0.35);
  transition: transform 0.3s var(--kn-ease),
              box-shadow 0.3s var(--kn-ease) !important;
}

#root div[class*="bg-[#ff4b00]"][class*="rounded-full"]:hover {
  transform: scale(1.08);
  box-shadow: 0 6px 28px rgba(254, 107, 0, 0.45);
}

/* Video iframes */
#root iframe {
  border-radius: var(--kn-radius-md) !important;
}


/* ===========================================
   24. SOCIAL MEDIA ICONS — FOOTER
   Normalize rounded-[18px] to consistent radius.
   =========================================== */
#root a[class*="rounded-[18px]"],
#root button[class*="rounded-[18px]"] {
  border-radius: 50% !important;
  transition: all var(--kn-duration) var(--kn-ease) !important;
}

#root a[class*="rounded-[18px]"]:hover,
#root button[class*="rounded-[18px]"]:hover {
  border-color: var(--kn-orange) !important;
  color: var(--kn-orange) !important;
  transform: scale(1.12) translateY(-1px);
}

/* Footer social circles (white border) */
#root div[class*="border"][class*="border-white"][class*="rounded-full"][class*="w-10"] {
  transition: all var(--kn-duration) var(--kn-ease) !important;
}

#root div[class*="border"][class*="border-white"][class*="rounded-full"][class*="w-10"]:hover,
#root a[class*="border"][class*="border-white"][class*="rounded-full"]:hover {
  border-color: var(--kn-orange) !important;
  background-color: rgba(254, 107, 0, 0.1) !important;
  transform: scale(1.1);
}


/* ===========================================
   25. MOBILE MENU OVERLAY & PANEL
   =========================================== */

/* Backdrop */
#root div[class*="fixed"][class*="inset-0"][class*="bg-black/60"] {
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
}

/* Slide-in panel */
#root div[class*="animate-slide-in-left"][class*="bg-white"] {
  box-shadow: 16px 0 48px rgba(0,0,0,0.15) !important;
}

/* Mobile menu links */
#root div[class*="animate-slide-in-left"] a {
  transition: all var(--kn-duration) var(--kn-ease) !important;
  border-radius: var(--kn-radius-sm) !important;
}

#root div[class*="animate-slide-in-left"] a:hover {
  background-color: rgba(254, 107, 0, 0.06) !important;
  color: var(--kn-orange) !important;
}


/* ===========================================
   26. FORM STEP INDICATORS
   Multi-step form progress dots/numbers.
   =========================================== */

/* Step number circles */
#root button[class*="rounded-full"][class*="font-bold"][class*="w-11"],
#root button[class*="rounded-full"][class*="font-bold"][class*="w-12"] {
  transition: all 0.35s var(--kn-ease) !important;
  box-shadow: none;
}

/* Active step */
#root button[class*="rounded-full"][class*="font-bold"][class*="bg-[#fe6b00]"][class*="scale-110"] {
  box-shadow: 0 0 0 4px rgba(254,107,0,0.2),
              var(--kn-shadow-btn) !important;
}

/* Completed step */
#root button[class*="rounded-full"][class*="font-bold"][class*="bg-[#fe6b00]"]:not([class*="scale-110"]) {
  box-shadow: 0 2px 8px rgba(254,107,0,0.2) !important;
}

/* Step connector line animation */
#root div[class*="flex-1"][class*="h-[2px]"],
#root div[class*="flex-1"][class*="h-0.5"] {
  transition: background-color 0.4s var(--kn-ease) !important;
}


/* ===========================================
   27. CLIENT / PARTNER LOGOS
   =========================================== */
#root img[class*="opacity-70"][class*="hover:opacity-100"] {
  filter: grayscale(30%);
  transition: all 0.35s var(--kn-ease) !important;
}

#root img[class*="opacity-70"][class*="hover:opacity-100"]:hover {
  filter: grayscale(0%);
  opacity: 1 !important;
}


/* ===========================================
   28. MARQUEE / AUTO-SCROLL BANNER
   Smoother animation for scrolling elements.
   =========================================== */
#root div[class*="animate-scroll-left"] {
  will-change: transform;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}


/* ===========================================
   29. GRADIENT OVERLAY REFINEMENT
   Softer gradient fades on hero & sections.
   =========================================== */
#root div[class*="bg-gradient-to-r"][class*="from-[#FF6B00]"] {
  background: linear-gradient(135deg, var(--kn-orange), var(--kn-orange-hover)) !important;
}


/* ===========================================
   30. NAV SCROLL SHADOW
   Adds a subtle bottom shadow when scrolled.
   Applied via JS class .kn-nav-scrolled
   =========================================== */
.kn-nav-scrolled {
  box-shadow: 0 1px 12px rgba(0,0,0,0.06) !important;
}


/* ===========================================
   31. FORM PANEL — DARK SECTION POLISH
   The contact/booking form area on dark bg.
   =========================================== */

/* Form container on dark background */
#root div[class*="bg-[#1b1b1b]"] {
  position: relative;
}

/* Inner form card */
#root div[class*="bg-[rgba(255,255,255,0.03)]"][class*="rounded"] {
  border-radius: var(--kn-radius-lg) !important;
  border-color: rgba(255,255,255,0.06) !important;
  backdrop-filter: blur(2px);
}

/* Step labels below indicators */
#root div[class*="bg-[#1b1b1b]"] span[class*="text-xs"],
#root div[class*="bg-[#1b1b1b]"] span[class*="text-sm"] {
  letter-spacing: 0.01em;
}

/* Form section title */
#root div[class*="bg-[#1b1b1b]"] h3 {
  letter-spacing: -0.02em;
}

/* Radio/checkbox option cards in form */
#root div[class*="bg-[rgba(255,255,255,0.05)]"][class*="border"][class*="rounded-lg"],
#root div[class*="bg-[rgba(255,255,255,0.05)]"][class*="border"][class*="rounded"] {
  border-radius: var(--kn-radius-md) !important;
  transition: all var(--kn-duration) var(--kn-ease) !important;
}

#root div[class*="bg-[rgba(255,255,255,0.05)]"][class*="border"]:hover {
  background-color: rgba(255,255,255,0.08) !important;
  border-color: rgba(254, 107, 0, 0.3) !important;
}


/* ===========================================
   32. IMAGE GALLERY LIGHTBOX
   When an image is opened in a dialog/modal.
   =========================================== */
#root [role="dialog"] img {
  border-radius: var(--kn-radius-md) !important;
  max-height: 85vh;
  object-fit: contain;
}

#root [role="dialog"] button[class*="rounded"] {
  border-radius: 50% !important;
  transition: all var(--kn-duration) var(--kn-ease) !important;
}

#root [role="dialog"] button[class*="rounded"]:hover {
  transform: scale(1.1);
}


/* ===========================================
   33. CURSOR / INTERACTIVE HINTS
   =========================================== */
#root div[class*="cursor-pointer"] {
  transition: transform var(--kn-duration) var(--kn-ease);
}

#root div[class*="cursor-pointer"]:active {
  transform: scale(0.98);
}

/* Gallery cursor for images that open lightbox */
#root div[class*="group"][class*="cursor-pointer"][class*="overflow-hidden"] img {
  transition: transform 0.5s var(--kn-ease) !important;
}

#root div[class*="group"][class*="cursor-pointer"][class*="overflow-hidden"]:hover img {
  transform: scale(1.04);
}


/* ===========================================
   34. SECTION DIVIDERS & SPACING POLISH
   =========================================== */

/* Horizontal lines used as dividers */
#root hr,
#root div[class*="h-px"][class*="bg-"] {
  opacity: 0.6;
}

/* Section background transition for anchor scrolling */
#root > div > div > div {
  scroll-snap-align: start;
}


/* ===========================================
   16. PRINT
   =========================================== */
@media print {
  nav, header, footer, button,
  [data-sonner-toaster],
  .kn-success-overlay,
  .kn-error-toast { display: none !important; }
  body { background: #fff; color: #000; }
}


/* ===========================================
   17. HIGH CONTRAST
   =========================================== */
@media (prefers-contrast: high) {
  #root button { border: 2px solid currentColor; }
  #root input, #root select, #root textarea { border-width: 2px; }
}