/* ============================================
   MODERN DESIGN ENHANCEMENTS
   Applying top design principles for the cleanest, most beautiful webpage
   ============================================ */

/* ============================================
   1. TYPOGRAPHY & HIERARCHY
   ============================================ */
:root {
    /* Tight spacing scale */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 2.5rem;
    --space-3xl: 3rem;
    
    /* Refined color palette */
    --color-primary: #6461df;
    --color-primary-dark: #4f4cc7;
    --color-primary-light: #7d7ae8;
    --color-text: #1a1a1a;
    --color-text-light: #4a4a4a;
    --color-text-lighter: #6a6a6a;
    --color-bg: #ffffff;
    --color-bg-light: #fafafa;
    
    /* Smooth transitions */
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 300ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Enhanced body typography */
body {
    font-feature-settings: "kern" 1, "liga" 1;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: var(--color-text);
    line-height: 1.7;
}

/* Improved heading hierarchy */
h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.2;
    color: var(--color-text);
}

h1 {
    font-size: clamp(2rem, 5vw, 4.5rem);
    margin-bottom: var(--space-sm);
    font-weight: 800;
}

h2 {
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    margin-bottom: var(--space-xs);
}

/* Tight paragraph spacing */
p {
    margin-bottom: var(--space-sm);
    line-height: 1.7;
    color: var(--color-text-light);
}

/* ============================================
   2. WHITESPACE & LAYOUT - TIGHT SPACING
   ============================================ */
.section {
    padding: var(--space-xl) 0;
}

@media (max-width: 768px) {
    .section {
        padding: var(--space-lg) 0;
    }
}

.section__container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 var(--space-md);
}

@media (min-width: 768px) {
    .section__container {
        padding: 0 var(--space-lg);
    }
}

/* Tight spacing between elements */
.section > * + * {
    margin-top: var(--space-lg);
}

/* ============================================
   3. HERO SECTION ENHANCEMENTS
   ============================================ */
.section.bg-white:first-of-type {
    min-height: 100vh;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #ffffff 0%, #fafafa 100%);
}

.section.bg-white:first-of-type::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 20% 50%, rgba(100, 97, 223, 0.05) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(100, 97, 223, 0.03) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
}

.section.bg-white:first-of-type::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, transparent 0%, rgba(255, 255, 255, 0.8) 100%);
    pointer-events: none;
    z-index: 0;
}

.section.bg-white:first-of-type > * {
    position: relative;
    z-index: 1;
}

/* Hero heading improvements */
.section.bg-white:first-of-type h1 {
    font-size: clamp(2.5rem, 7vw, 6.5rem);
    line-height: 1.05;
    margin-bottom: var(--space-lg);
    font-weight: 800;
    letter-spacing: -0.03em;
    color: #1a1a1a;
    animation: fadeInUp 0.8s ease-out;
}

/* Hero section animation */
.section.bg-white:first-of-type > div > div > div {
    animation: fadeInUp 0.6s ease-out;
    animation-fill-mode: both;
}

.section.bg-white:first-of-type > div > div > div:nth-child(1) {
    animation-delay: 0.1s;
}

.section.bg-white:first-of-type > div > div > div:nth-child(2) {
    animation-delay: 0.2s;
}

.section.bg-white:first-of-type > div > div > div:nth-child(3) {
    animation-delay: 0.3s;
}

/* Hero description */
.section.bg-white:first-of-type .text-base,
.section.bg-white:first-of-type .text-lg,
.section.bg-white:first-of-type .text-xl {
    font-size: clamp(1rem, 2vw, 1.25rem);
    line-height: 1.7;
    color: var(--color-text-light);
    max-width: 600px;
    margin-bottom: var(--space-lg);
}

/* ============================================
   4. BUTTON ENHANCEMENTS
   ============================================ */
.button {
    position: relative;
    overflow: hidden;
    transition: all var(--transition-base);
    font-weight: 600;
    letter-spacing: 0.01em;
    box-shadow: 0 2px 8px rgba(100, 97, 223, 0.15);
}

.button::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.button:hover::before {
    width: 300px;
    height: 300px;
}

.button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(100, 97, 223, 0.25);
}

.button:active {
    transform: translateY(0);
}

/* Primary button styling */
.button-primary,
.button#button-231783,
.button#button-site-header {
    background: var(--color-primary);
    color: #ffffff !important;
    border: 2px solid var(--color-primary);
    padding: 0.875rem 2rem;
    border-radius: 8px;
    font-size: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 160px;
}

.button-primary:hover,
.button#button-231783:hover,
.button#button-site-header:hover {
    background: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
    color: #ffffff !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(100, 97, 223, 0.3);
}

/* Secondary button styling */
.button-secondary,
.button#button-contact-hero {
    background: transparent;
    color: var(--color-text) !important;
    border: 2px solid var(--color-text);
    padding: 0.875rem 2rem;
    border-radius: 8px;
    font-size: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 160px;
    box-shadow: none;
}

.button-secondary:hover,
.button#button-contact-hero:hover {
    background: var(--color-text);
    color: #ffffff !important;
    border-color: var(--color-text);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

/* ============================================
   5. NAVIGATION ENHANCEMENTS
   ============================================ */
header {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    background: rgba(255, 255, 255, 0.95);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    transition: all var(--transition-base);
}

header.bg-white {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

/* Navigation links */
nav a.link {
    position: relative;
    padding: var(--space-xs) 0;
    transition: color var(--transition-fast);
}

nav a.link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--color-primary);
    transition: width var(--transition-base);
}

nav a.link:hover::after,
nav a.link.is-active::after {
    width: 100%;
}

/* ============================================
   6. CARD & CONTENT ENHANCEMENTS
   ============================================ */
/* Service cards */
.group.block {
    transition: all var(--transition-base);
    border-radius: 12px;
    overflow: hidden;
}

.group.block:hover {
    transform: translateY(-4px);
}

.group.block img {
    transition: transform var(--transition-slow);
}

.group.block:hover img {
    transform: scale(1.05);
}

/* Image containers */
.relative.overflow-hidden {
    border-radius: 8px;
    overflow: hidden;
}

/* ============================================
   7. TEXT CONTENT IMPROVEMENTS
   ============================================ */
.rich-text--standard h2 {
    margin-bottom: var(--space-sm);
    color: var(--color-text);
}

.rich-text--standard p {
    font-size: 1.125rem;
    line-height: 1.7;
    color: var(--color-text-light);
    margin-bottom: var(--space-sm);
}

/* Section headings */
.text-xl.font-bold,
.text-2xl.font-bold {
    margin-bottom: var(--space-sm);
    color: var(--color-text);
}

/* Reduce all excessive padding */
.px-4 { padding-left: var(--space-sm) !important; padding-right: var(--space-sm) !important; }
.px-8 { padding-left: var(--space-md) !important; padding-right: var(--space-md) !important; }
.px-10 { padding-left: var(--space-lg) !important; padding-right: var(--space-lg) !important; }
.px-20 { padding-left: var(--space-xl) !important; padding-right: var(--space-xl) !important; }
.pl-20 { padding-left: var(--space-xl) !important; }
.pr-10 { padding-right: var(--space-lg) !important; }
.pr-24 { padding-right: var(--space-xl) !important; }
.pl-24 { padding-left: var(--space-xl) !important; }
.pl-32 { padding-left: var(--space-2xl) !important; }

/* ============================================
   8. TIGHT SPACING IMPROVEMENTS
   ============================================ */
.mb-8, .mb-10, .mb-12, .mb-16, .mb-20 {
    margin-bottom: var(--space-md) !important;
}

@media (min-width: 768px) {
    .mb-8 { margin-bottom: var(--space-md) !important; }
    .mb-10 { margin-bottom: var(--space-lg) !important; }
    .mb-12 { margin-bottom: var(--space-lg) !important; }
    .mb-16 { margin-bottom: var(--space-xl) !important; }
    .mb-20 { margin-bottom: var(--space-xl) !important; }
}

/* Reduce excessive padding */
.py-12 { padding-top: var(--space-lg) !important; padding-bottom: var(--space-lg) !important; }
.py-20 { padding-top: var(--space-xl) !important; padding-bottom: var(--space-xl) !important; }
.py-32 { padding-top: var(--space-2xl) !important; padding-bottom: var(--space-2xl) !important; }
.pb-8 { padding-bottom: var(--space-md) !important; }
.pb-12 { padding-bottom: var(--space-lg) !important; }
.pb-16 { padding-bottom: var(--space-lg) !important; }
.pb-20 { padding-bottom: var(--space-xl) !important; }
.pb-32 { padding-bottom: var(--space-xl) !important; }
.pt-12 { padding-top: var(--space-lg) !important; }
.pt-20 { padding-top: var(--space-xl) !important; }
.pt-32 { padding-top: var(--space-xl) !important; }

/* ============================================
   9. VISUAL POLISH
   ============================================ */
/* Subtle shadows for depth */
img {
    border-radius: 4px;
    transition: transform var(--transition-base);
}

/* Smooth scroll */
html {
    scroll-behavior: smooth;
}

/* Focus states for accessibility */
a:focus,
button:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* ============================================
   10. FOOTER ENHANCEMENTS
   ============================================ */
footer,
.section:last-of-type {
    background: var(--color-bg-light);
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

/* Social media icons */
.w-12.h-12 {
    transition: all var(--transition-base);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.w-12.h-12:hover {
    transform: translateY(-3px) scale(1.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* ============================================
   11. COMPREHENSIVE RESPONSIVE IMPROVEMENTS
   ============================================ */

/* Mobile First - Base styles for mobile (320px+) */
@media (max-width: 639px) {
    /* Typography */
    h1 {
        font-size: 1.75rem !important;
        line-height: 1.2 !important;
        margin-bottom: var(--space-sm) !important;
    }
    
    h2 {
        font-size: 1.5rem !important;
    }
    
    /* Hero section */
    .section.bg-white:first-of-type h1 {
        font-size: 1.75rem !important;
        line-height: 1.2 !important;
    }
    
    .section.bg-white:first-of-type .lg\:pl-12,
    .section.bg-white:first-of-type .lg\:px-0 {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    
    /* Buttons */
    .button {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0.75rem 1.5rem !important;
        font-size: 0.9rem !important;
    }
    
    .flex.flex-col.sm\:flex-row {
        flex-direction: column !important;
        gap: 0.75rem !important;
    }
    
    /* Navigation */
    nav ul {
        flex-direction: column !important;
        gap: 0.5rem !important;
    }
    
    /* Email Us - hide on mobile */
    div.fixed.top-0.left-0.z-20[style*="margin-left"] {
        display: none !important;
    }
    
    /* Section padding */
    .section {
        padding: var(--space-lg) 0 !important;
    }
    
    .section__container {
        padding: 0 var(--space-md) !important;
    }
    
    /* Images */
    img {
        max-width: 100% !important;
        height: auto !important;
    }
    
    /* Footer */
    footer .flex {
        flex-direction: column !important;
        gap: var(--space-lg) !important;
    }
}

/* Tablet - Small (640px - 767px) */
@media (min-width: 640px) and (max-width: 767px) {
    h1 {
        font-size: 2.25rem !important;
    }
    
    .section.bg-white:first-of-type h1 {
        font-size: 2.25rem !important;
    }
    
    .button {
        width: auto !important;
        min-width: 200px !important;
    }
    
    .flex.flex-col.sm\:flex-row {
        flex-direction: row !important;
        gap: 1rem !important;
    }
    
    .section.bg-white:first-of-type .lg\:pl-12 {
        padding-left: 1.5rem !important;
    }
}

/* Tablet - Medium (768px - 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
    h1 {
        font-size: 2.5rem !important;
    }
    
    .section.bg-white:first-of-type h1 {
        font-size: 2.5rem !important;
    }
    
    .section.bg-white:first-of-type .lg\:pl-12 {
        padding-left: 2rem !important;
    }
    
    .section__container {
        padding: 0 var(--space-lg) !important;
    }
    
    /* Email Us - show on tablet but adjust */
    div.fixed.top-0.left-0.z-20[style*="margin-left"] {
        display: block !important;
    }
    
    div.fixed.top-0.left-0.z-20[style*="margin-left"] > div {
        padding: 1rem 1.5rem !important;
        font-size: 0.875rem !important;
    }
}

/* Desktop - Small (1024px - 1279px) */
@media (min-width: 1024px) and (max-width: 1279px) {
    h1 {
        font-size: 3rem !important;
    }
    
    .section.bg-white:first-of-type h1 {
        font-size: 3rem !important;
    }
    
    .section.bg-white:first-of-type .lg\:pl-12 {
        padding-left: 3rem !important;
    }
    
    .section__container {
        padding: 0 var(--space-xl) !important;
    }
}

/* Desktop - Medium (1280px - 1535px) */
@media (min-width: 1280px) and (max-width: 1535px) {
    h1 {
        font-size: 4rem !important;
    }
    
    .section.bg-white:first-of-type h1 {
        font-size: 4rem !important;
    }
    
    .section.bg-white:first-of-type .lg\:pl-12 {
        padding-left: 4rem !important;
    }
    
    .section.bg-white:first-of-type .xl\:pl-screen-4 {
        padding-left: 5rem !important;
    }
}

/* Desktop - Large (1536px+) */
@media (min-width: 1536px) {
    h1 {
        font-size: 5rem !important;
    }
    
    .section.bg-white:first-of-type h1 {
        font-size: 5rem !important;
    }
    
    .section.bg-white:first-of-type .2xl\:pl-16 {
        padding-left: 6rem !important;
    }
    
    .section.bg-white:first-of-type .3xl\:pl-20 {
        padding-left: 7rem !important;
    }
}

/* Ensure Email Us is visible and properly positioned on larger screens */
@media (min-width: 1024px) {
    div.fixed.top-0.left-0.z-20[style*="margin-left"],
    div.hidden.lg\:block.fixed.top-0.left-0 {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        z-index: 20 !important;
    }
    
    div.fixed.top-0.left-0.z-20[style*="margin-left"] > div,
    div.hidden.lg\:block.fixed.top-0.left-0 > div {
        color: #ffffff !important;
        pointer-events: auto !important;
    }
    
    /* Make sure blend-difference works */
    .blend-difference {
        mix-blend-mode: difference !important;
    }
}

/* Fix hero content padding to prevent Email Us overlap */
@media (min-width: 1024px) {
    .section.bg-white:first-of-type .lg\:pl-12 {
        padding-left: 3rem !important;
    }
}

@media (min-width: 1280px) {
    .section.bg-white:first-of-type .lg\:pl-12 {
        padding-left: 5rem !important;
    }
    
    .section.bg-white:first-of-type .xl\:pl-screen-4 {
        padding-left: 6rem !important;
    }
}

@media (min-width: 1536px) {
    .section.bg-white:first-of-type .2xl\:pl-16 {
        padding-left: 7rem !important;
    }
    
    .section.bg-white:first-of-type .3xl\:pl-20 {
        padding-left: 8rem !important;
    }
}

/* Responsive images */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Responsive containers */
.container,
.section__container {
    width: 100%;
    margin: 0 auto;
    padding-left: var(--space-md);
    padding-right: var(--space-md);
}

@media (min-width: 640px) {
    .container,
    .section__container {
        padding-left: var(--space-lg);
        padding-right: var(--space-lg);
    }
}

@media (min-width: 1024px) {
    .container,
    .section__container {
        padding-left: var(--space-xl);
        padding-right: var(--space-xl);
    }
}

/* Responsive navigation */
@media (max-width: 1023px) {
    nav.hidden.xl\:block {
        display: none !important;
    }
    
    /* Mobile menu button */
    .block.xl\:hidden.ml-auto {
        display: block !important;
    }
    
    /* Header adjustments */
    header {
        padding: var(--space-sm) var(--space-md) !important;
    }
}

@media (min-width: 1280px) {
    nav.hidden.xl\:block {
        display: block !important;
    }
    
    .block.xl\:hidden.ml-auto {
        display: none !important;
    }
}

/* Off-canvas menu responsive */
@media (max-width: 1023px) {
    /* Mobile menu overlay */
    [x-show*="offCanvas"][x-cloak] {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        z-index: 9998 !important;
        background: rgba(0, 0, 0, 0.95) !important;
        overflow-y: auto !important;
    }
    
    /* Mobile menu content */
    .flex.flex-col[x-show*="offCanvas"] {
        padding: var(--space-xl) var(--space-md) !important;
    }
    
    /* Mobile menu links */
    .flex.flex-col[x-show*="offCanvas"] a {
        font-size: 1.25rem !important;
        padding: var(--space-md) 0 !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    }
    
    /* Hide desktop navigation on mobile */
    nav.hidden.xl\:block {
        display: none !important;
    }
}

/* Tablet menu adjustments */
@media (min-width: 768px) and (max-width: 1023px) {
    [x-show*="offCanvas"][x-cloak] {
        background: rgba(0, 0, 0, 0.98) !important;
    }
}

/* Responsive footer */
@media (max-width: 767px) {
    footer .flex {
        flex-direction: column !important;
        text-align: center !important;
    }
    
    footer .w-full.xs\:w-1\/2 {
        width: 100% !important;
    }
}

/* Responsive buttons */
@media (max-width: 639px) {
    .button {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
    }
}

/* Prevent horizontal scroll */
body {
    overflow-x: hidden;
    max-width: 100vw;
}

* {
    box-sizing: border-box;
}

/* Responsive text */
@media (max-width: 639px) {
    .text-base {
        font-size: 0.875rem !important;
    }
    
    .text-lg {
        font-size: 1rem !important;
    }
    
    .text-xl {
        font-size: 1.125rem !important;
    }
}

/* ============================================
   12. ANIMATIONS & TRANSITIONS
   ============================================ */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.section > * {
    animation: fadeInUp 0.6s ease-out;
}

/* Smooth entrance animations */
.section.bg-white:first-of-type img {
    animation: fadeIn 1s ease-out 0.4s both;
    opacity: 0;
}

/* ============================================
   13. ACCESSIBILITY IMPROVEMENTS
   ============================================ */
/* Better contrast for text */
.text-gray-700 {
    color: var(--color-text-light) !important;
}

.text-gray-600 {
    color: var(--color-text-lighter) !important;
}

/* Improved link visibility */
a {
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--color-primary);
}

/* ============================================
   14. MODERN UI ELEMENTS
   ============================================ */
/* Subtle gradient overlays */
.bg-white::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.1), transparent);
    pointer-events: none;
}

/* Clean separators */
hr {
    border: none;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.1), transparent);
    margin: var(--space-xl) 0;
}

/* ============================================
   15. FIX EMAIL US OVERLAP
   ============================================ */
/* Fix Email Us vertical text positioning - keep visible but prevent overlap */
div.fixed.top-0.left-0.z-20[style*="margin-left"] {
    left: 0 !important;
    margin-left: 0 !important;
    z-index: 20 !important;
    width: auto !important;
}

div.fixed.top-0.left-0.z-20[style*="margin-left"] > div {
    transform: rotate(-90deg) !important;
    transform-origin: bottom left !important;
    white-space: nowrap !important;
    left: 0 !important;
    position: relative !important;
}

/* Adjust hero content padding to prevent overlap with Email Us */
.section.bg-white:first-of-type .xl\:pl-screen-4 {
    padding-left: 0;
}

@media (min-width: 1280px) {
    .section.bg-white:first-of-type .xl\:pl-screen-4 {
        padding-left: 10rem; /* Add padding to prevent overlap with Email Us */
    }
}

/* Ensure hero text content has proper left padding to avoid Email Us overlap */
.section.bg-white:first-of-type .lg\:pl-12,
.section.bg-white:first-of-type .lg\:px-0 {
    padding-left: 3rem !important;
}

@media (min-width: 1024px) {
    .section.bg-white:first-of-type .lg\:pl-12 {
        padding-left: 7rem !important;
    }
}

@media (min-width: 1280px) {
    .section.bg-white:first-of-type .lg\:pl-12 {
        padding-left: 9rem !important;
    }
    
    .section.bg-white:first-of-type .2xl\:pl-16 {
        padding-left: 10rem !important;
    }
    
    .section.bg-white:first-of-type .3xl\:pl-20 {
        padding-left: 11rem !important;
    }
}

/* Ensure Email Us link is clickable */
div.fixed.top-0.left-0.z-20 a {
    pointer-events: auto;
    cursor: pointer;
}

/* ============================================
   16. PREMIUM ENHANCEMENTS - BETTER THAN VANTIKLABS
   ============================================ */
/* Enhanced hero image styling */
.section.bg-white:first-of-type img {
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.1));
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.section.bg-white:first-of-type:hover img {
    transform: scale(1.02);
}

/* Premium card hover effects */
.group.block {
    border-radius: 16px;
    overflow: hidden;
    background: #ffffff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.group.block:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}

/* Enhanced section spacing */
.section {
    position: relative;
}

.section:not(:first-of-type)::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.05), transparent);
}

/* Premium typography refinements */
h2.text-xl,
h2.text-2xl {
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

/* Enhanced button group spacing */
.flex.flex-col.sm\:flex-row.gap-4,
.flex.flex-col.sm\:flex-row.gap-6 {
    margin-top: var(--space-lg);
}

/* Improved image quality and presentation */
img {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

/* Premium scroll behavior */
@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
    
    * {
        scroll-margin-top: 2rem;
    }
}

/* Enhanced focus states for better accessibility */
*:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 3px;
    border-radius: 4px;
}

/* Premium loading states */
.button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none !important;
}

/* Micro-interactions for better UX */
a, button {
    cursor: pointer;
    user-select: none;
}

/* Enhanced contrast for better readability */
.text-black {
    color: #0a0a0a !important;
}

/* Premium spacing for hero buttons */
@media (min-width: 640px) {
    .flex.flex-col.sm\:flex-row.gap-4 {
        gap: 1rem;
    }
}

@media (min-width: 1024px) {
    .flex.flex-col.sm\:flex-row.gap-6 {
        gap: 1.5rem;
    }
}

/* ============================================
   16. COMPREHENSIVE RESPONSIVE FIXES FOR ALL ELEMENTS
   ============================================ */

/* ============================================
   FLICKITY CAROUSELS/SLIDERS
   ============================================ */
.flickity-viewport {
    width: 100% !important;
    overflow: hidden !important;
}

.flickity-slider {
    width: 100% !important;
}

/* Carousel cells responsive */
.flickity-slider > * {
    width: 100% !important;
    min-width: 100% !important;
}

@media (min-width: 640px) {
    .flickity-slider > * {
        width: 50% !important;
        min-width: 50% !important;
    }
}

@media (min-width: 768px) {
    .flickity-slider > * {
        width: 33.333% !important;
        min-width: 33.333% !important;
    }
}

@media (min-width: 1024px) {
    .flickity-slider > * {
        width: 25% !important;
        min-width: 25% !important;
    }
}

@media (min-width: 1280px) {
    .flickity-slider > * {
        width: 20% !important;
        min-width: 20% !important;
    }
}

/* Flickity buttons responsive */
.flickity-prev-next-button {
    width: 36px !important;
    height: 36px !important;
}

@media (min-width: 768px) {
    .flickity-prev-next-button {
        width: 44px !important;
        height: 44px !important;
    }
}

/* ============================================
   FORM ELEMENTS
   ============================================ */
.form__field,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
textarea,
select {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0.75rem 1rem !important;
    font-size: 1rem !important;
    border-radius: 4px !important;
    border: 1px solid #ddd !important;
    box-sizing: border-box !important;
}

@media (min-width: 640px) {
    .form__field,
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    textarea,
    select {
        padding: 0.875rem 1.25rem !important;
        font-size: 1rem !important;
    }
}

@media (min-width: 1024px) {
    .form__field,
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    textarea,
    select {
        padding: 1rem 1.5rem !important;
    }
}

/* Form labels */
.form__label {
    font-size: 0.875rem !important;
    margin-bottom: 0.5rem !important;
    display: block !important;
}

@media (min-width: 640px) {
    .form__label {
        font-size: 1rem !important;
    }
}

/* Form field containers */
.form__field-container {
    width: 100% !important;
    margin-bottom: 1rem !important;
}

@media (min-width: 1280px) {
    .form__field-container.w-full.xl\:w-6\/12 {
        width: 48% !important;
        margin-right: 2% !important;
    }
    
    .form__field-container.w-full.xl\:w-6\/12:nth-child(even) {
        margin-right: 0 !important;
    }
}

/* Form submit buttons */
.form__field--submit button,
button[type="submit"] {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0.875rem 2rem !important;
    font-size: 1rem !important;
}

@media (min-width: 640px) {
    .form__field--submit button,
    button[type="submit"] {
        width: auto !important;
        min-width: 200px !important;
    }
}

/* ============================================
   DROPDOWN MENUS
   ============================================ */
/* Dropdown container */
.block.absolute.bottom-0.left-0.z-20.w-screen {
    width: 100vw !important;
    max-width: 100vw !important;
    left: 0 !important;
    right: 0 !important;
}

/* Dropdown content */
.w-5\/12,
.w-7\/12 {
    width: 100% !important;
}

@media (min-width: 768px) {
    .w-5\/12 {
        width: 40% !important;
    }
    
    .w-7\/12 {
        width: 60% !important;
    }
}

@media (max-width: 767px) {
    .w-5\/12.px-4,
    .w-7\/12.px-4 {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    
    .w-full.flex.flex-wrap .w-1\/2 {
        width: 100% !important;
        margin-bottom: 0.75rem !important;
    }
}

/* Dropdown links */
.flex.transform.hover\:translate-x-1 {
    padding: 0.75rem 0 !important;
}

@media (min-width: 768px) {
    .flex.transform.hover\:translate-x-1 {
        padding: 1rem 0 !important;
    }
}

/* ============================================
   CARDS AND IMAGE GALLERIES
   ============================================ */
.group.block {
    width: 100% !important;
    margin-bottom: var(--space-lg) !important;
}

@media (min-width: 640px) {
    .group.block {
        width: calc(50% - var(--space-md)) !important;
        margin-right: var(--space-md) !important;
    }
    
    .group.block:nth-child(even) {
        margin-right: 0 !important;
    }
}

@media (min-width: 1024px) {
    .group.block {
        width: calc(33.333% - var(--space-lg)) !important;
        margin-right: var(--space-lg) !important;
    }
    
    .group.block:nth-child(3n) {
        margin-right: 0 !important;
    }
}

/* Card images */
.group.block img,
.relative.overflow-hidden img {
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
}

/* ============================================
   SOCIAL MEDIA ICONS
   ============================================ */
.w-12.h-12 {
    width: 2.5rem !important;
    height: 2.5rem !important;
    font-size: 1rem !important;
}

@media (min-width: 640px) {
    .w-12.h-12 {
        width: 3rem !important;
        height: 3rem !important;
        font-size: 1.125rem !important;
    }
}

/* Social media icon containers */
nav ul.flex {
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
}

@media (min-width: 640px) {
    nav ul.flex {
        gap: 0.75rem !important;
    }
}

/* ============================================
   SERVICE CARDS AND LINKS
   ============================================ */
/* Service dropdown items */
.w-1\/2.mb-4 {
    width: 100% !important;
    margin-bottom: 0.75rem !important;
}

@media (min-width: 640px) {
    .w-1\/2.mb-4 {
        width: 50% !important;
    }
}

/* Service link text */
.text-xl.2xl\:text-2xl {
    font-size: 1.125rem !important;
}

@media (min-width: 640px) {
    .text-xl.2xl\:text-2xl {
        font-size: 1.25rem !important;
    }
}

@media (min-width: 1536px) {
    .text-xl.2xl\:text-2xl {
        font-size: 1.5rem !important;
    }
}

/* ============================================
   IMAGES AND PICTURES
   ============================================ */
picture,
img {
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
}

/* Responsive image containers */
.relative.overflow-hidden {
    width: 100% !important;
    position: relative !important;
}

/* Picture elements */
picture img {
    width: 100% !important;
    height: auto !important;
}

/* Hero images */
.absolute.top-0.right-0.w-1\/2 {
    display: none !important;
}

@media (min-width: 1280px) {
    .absolute.top-0.right-0.w-1\/2 {
        display: flex !important;
        width: 50% !important;
    }
}

/* ============================================
   TEXT BLOCKS AND HEADINGS
   ============================================ */
/* Text blocks */
.text-base {
    font-size: 0.875rem !important;
    line-height: 1.6 !important;
}

@media (min-width: 640px) {
    .text-base {
        font-size: 1rem !important;
    }
}

.text-lg {
    font-size: 1rem !important;
}

@media (min-width: 640px) {
    .text-lg {
        font-size: 1.125rem !important;
    }
}

/* Headings responsive */
h2.text-xl {
    font-size: 1.25rem !important;
}

@media (min-width: 640px) {
    h2.text-xl {
        font-size: 1.5rem !important;
    }
}

h2.text-2xl {
    font-size: 1.5rem !important;
}

@media (min-width: 640px) {
    h2.text-2xl {
        font-size: 1.75rem !important;
    }
}

@media (min-width: 1024px) {
    h2.text-2xl {
        font-size: 2rem !important;
    }
}

/* Paragraph text */
p.text-base {
    font-size: 0.875rem !important;
}

@media (min-width: 640px) {
    p.text-base {
        font-size: 1rem !important;
    }
}

p.text-lg {
    font-size: 1rem !important;
}

@media (min-width: 640px) {
    p.text-lg {
        font-size: 1.125rem !important;
    }
}

/* ============================================
   OFF-CANVAS MENU
   ============================================ */
/* Off-canvas menu links */
.text-2xl.sm\:text-3xl.md\:text-4xl {
    font-size: 1.5rem !important;
}

@media (min-width: 640px) {
    .text-2xl.sm\:text-3xl.md\:text-4xl {
        font-size: 2rem !important;
    }
}

@media (min-width: 768px) {
    .text-2xl.sm\:text-3xl.md\:text-4xl {
        font-size: 2.5rem !important;
    }
}

/* Off-canvas menu container */
.absolute.top-0.left-0.w-screen.h-screen {
    width: 100vw !important;
    height: 100vh !important;
    overflow-y: auto !important;
}

/* ============================================
   NAVIGATION ELEMENTS
   ============================================ */
/* Navigation links */
nav ul li {
    margin-bottom: 0.5rem !important;
}

@media (min-width: 1024px) {
    nav ul li {
        margin-bottom: 0 !important;
        margin-right: 2rem !important;
    }
}

/* Navigation text */
nav a {
    font-size: 0.875rem !important;
}

@media (min-width: 640px) {
    nav a {
        font-size: 1rem !important;
    }
}

/* ============================================
   FOOTER ELEMENTS
   ============================================ */
/* Footer columns */
.w-full.xs\:w-1\/2 {
    width: 100% !important;
    margin-bottom: var(--space-lg) !important;
}

@media (min-width: 480px) {
    .w-full.xs\:w-1\/2 {
        width: 48% !important;
        margin-right: 2% !important;
    }
    
    .w-full.xs\:w-1\/2:nth-child(even) {
        margin-right: 0 !important;
    }
}

@media (min-width: 1024px) {
    .w-full.lg\:w-1\/2 {
        width: 48% !important;
    }
}

/* Footer text */
footer .text-sm {
    font-size: 0.75rem !important;
}

@media (min-width: 640px) {
    footer .text-sm {
        font-size: 0.875rem !important;
    }
}

/* ============================================
   CONTAINER ELEMENTS
   ============================================ */
/* Width utilities responsive */
.w-full {
    width: 100% !important;
}

.w-6\/12 {
    width: 100% !important;
}

@media (min-width: 640px) {
    .w-6\/12 {
        width: 50% !important;
    }
}

.w-10\/12,
.w-11\/12 {
    width: 100% !important;
}

@media (min-width: 640px) {
    .w-10\/12 {
        width: 83.333% !important;
    }
    
    .w-11\/12 {
        width: 91.666% !important;
    }
}

/* Padding utilities responsive */
.px-4 {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}

@media (min-width: 1024px) {
    .px-4.lg\:px-8 {
        padding-left: 2rem !important;
        padding-right: 2rem !important;
    }
}

/* ============================================
   UTILITY CLASSES RESPONSIVE
   ============================================ */
/* Flex utilities */
.flex.flex-wrap {
    flex-wrap: wrap !important;
    gap: var(--space-md) !important;
}

/* Grid-like behavior for cards */
@media (max-width: 639px) {
    .flex.flex-wrap > * {
        width: 100% !important;
        flex: 0 0 100% !important;
    }
}

@media (min-width: 640px) and (max-width: 1023px) {
    .flex.flex-wrap > * {
        width: calc(50% - var(--space-md)) !important;
        flex: 0 0 calc(50% - var(--space-md)) !important;
    }
}

@media (min-width: 1024px) {
    .flex.flex-wrap > * {
        width: calc(33.333% - var(--space-lg)) !important;
        flex: 0 0 calc(33.333% - var(--space-lg)) !important;
    }
}

/* ============================================
   HERO IMAGE RESPONSIVE
   ============================================ */
.absolute.top-0.right-0.w-1\/2.h-full.hidden.justify-end.xl\:flex {
    display: none !important;
}

@media (min-width: 1280px) {
    .absolute.top-0.right-0.w-1\/2.h-full.hidden.justify-end.xl\:flex {
        display: flex !important;
    }
}

/* ============================================
   CONTACT FORM SIDEBAR
   ============================================ */
#form-sidebar {
    display: none !important;
}

@media (min-width: 1024px) {
    #form-sidebar {
        display: block !important;
    }
}