/* ==============================================
Adhere Studio LLC - Main Stylesheet
==============================================
*/

/* ----------------------------------------------
Root Variables & Global Settings
----------------------------------------------
- Defines color palette and font families for consistency.
- Sets up the custom cursor behavior.
*/
:root {
    /* Primary palette */
    --charcoal: #212529;            /* primary text for light mode */
    --off-white: #F8F9FA;          /* primary light background / text for dark mode */
    --bold-teal: #20c997;          /* brand accent */
    --walls-accent: #3b82f6;       /* category: Walls & Murals */
    --windows-accent: #F97316;     /* category: Window Graphics (Orange) */
    --brand-accent: #a855f7;       /* category: Branding & Identity (purple) */

    /* Dark mode surfaces */
    --dark-bg: #0b0b0b;            /* page background in dark mode (not pure black) */
    --dark-card: #111315;          /* card / panel background in dark mode */

    /* Accessible semantic tokens */
    --text-muted: #6B7280;         /* muted text for light mode */
    --text-muted-dark: #D1D5DB;    /* muted text for dark mode */

    --font-primary: 'Poppins', sans-serif;
    --font-secondary: 'Lato', sans-serif;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 110px; /* prevent anchor targets from hiding under fixed nav */
}

::selection {
    background: rgba(32,201,151,0.35);
    color: #0b0b0b;
}

body {
    min-height: 100vh;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid rgba(32,201,151,0.55);
    outline-offset: 3px;
}

@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;
    }
}

/* Compatibility utilities for legacy class names used in templates */
/* Apply global fonts and basic text/background utilities so pages that use
   classes like `text-charcoal` or `font-poppins` render correctly even when
   Tailwind or other builds are not present. */
body {
    font-family: var(--font-secondary);
    color: var(--charcoal);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
h1,h2,h3,h4,h5,h6 {
    font-family: var(--font-primary);
}
.font-poppins { font-family: var(--font-primary); }
.font-lato { font-family: var(--font-secondary); }
.text-charcoal { color: var(--charcoal) !important; }
.text-off-white { color: var(--off-white) !important; }
.text-bold-teal { color: var(--bold-teal) !important; }
.bg-dark-bg { background-color: var(--dark-bg) !important; }
.bg-off-white { background-color: var(--off-white) !important; }
.dark .text-charcoal { color: var(--off-white) !important; }
.dark .text-off-white { color: var(--off-white) !important; }

/* Catch mixed utility-like classes (e.g. hover:text-bold-teal, dark:hover:text-bold-teal)
   some templates include these tokens literally; use attribute selectors to handle them */
a[class*="hover:text-bold-teal"]:hover,
a[class*="dark:hover:text-bold-teal"]:hover {
    color: var(--bold-teal) !important;
}

a[class*="hover:text-black"]:hover {
    color: #000000 !important;
}

/* ----------------------------------------------
Legacy/Tailwind-like utility fallbacks for contrast
These map commonly-used utility tokens (text-gray-600, bg-gray-100, etc.)
to explicit colors so pages remain legible even when Tailwind runtime isn't available.
----------------------------------------------*/
.text-gray-50 { color: #F9FAFB; }
.text-gray-100 { color: #F3F4F6; }
.text-gray-200 { color: #E5E7EB; }
.text-gray-300 { color: #D1D5DB; }
.text-gray-400 { color: #9CA3AF; }
.text-gray-500 { color: #6B7280; }
.text-gray-600 { color: #4B5563; }
.text-gray-700 { color: #374151; }
.text-gray-800 { color: #1F2937; }
.text-gray-900 { color: #111827; }

.dark .text-gray-50 { color: #F9FAFB; }
.dark .text-gray-100 { color: #F3F4F6; }
.dark .text-gray-200 { color: #E5E7EB; }
.dark .text-gray-300 { color: #D1D5DB; }
.dark .text-gray-400 { color: #9CA3AF; }
.dark .text-gray-500 { color: #6B7280; }
.dark .text-gray-600 { color: var(--text-muted-dark); }
.dark .text-gray-700 { color: #9CA3AF; }
.dark .text-gray-800 { color: #6B7280; }
.dark .text-gray-900 { color: #374151; }

/* Background utilities */
.bg-white { background-color: #ffffff !important; }
.bg-off-white { background-color: var(--off-white) !important; }
.bg-gray-50 { background-color: #F9FAFB !important; }
.bg-gray-100 { background-color: #F3F4F6 !important; }
.bg-gray-200 { background-color: #E5E7EB !important; }
.bg-gray-300 { background-color: #D1D5DB !important; }
.bg-gray-700 { background-color: #374151 !important; }

/* Common missing utilities used throughout templates */
.bg-charcoal { background-color: var(--charcoal) !important; }
.bg-black { background-color: #000000 !important; }
.text-white { color: #ffffff !important; }
.text-offwhite { color: var(--off-white) !important; }

.dark .text-white { color: #ffffff !important; }
.dark .text-offwhite { color: var(--off-white) !important; }
.bg-darkbg { background-color: var(--dark-bg) !important; }
.dark .bg-darkbg { background-color: var(--dark-bg) !important; }

/* Standardize CTA / Schedule button appearance when authors forget to apply full classes */
.open-modal-btn {
    display: inline-block;
    background-color: var(--charcoal);
    color: #ffffff !important;
    font-family: var(--font-primary);
    font-weight: 600;
    padding: 0.5rem 1.25rem; /* py-2 px-5 */
    border-radius: 9999px;
    font-size: 0.875rem;
    text-decoration: none;
    transition: background-color 200ms ease, color 200ms ease, transform 120ms ease;
}
.dark .open-modal-btn { background-color: var(--off-white); color: var(--charcoal) !important; }
.open-modal-btn:hover { background-color: #4b5563; }
.dark .open-modal-btn:hover { background-color: #e5e7eb; }
.open-modal-btn:focus { outline: 3px solid rgba(32,201,151,0.16); outline-offset: 2px; }

/* Kits link visibility: ensure Kits is not hidden */
/* Previously hidden site-wide; now explicitly shown. */
/* If you need to hide temporarily, scope to a specific page/body class. */
/* example: body.hide-kits a[href="kits.html"], body.hide-kits .nav-link-fleet { display:none !important; } */

/* Navbar link defaults to ensure contrast in both modes */
nav a { color: var(--charcoal); }
.dark nav a { color: var(--text-muted-dark); }
.dark nav a:hover, nav a:hover { color: var(--bold-teal); }

/* Pastel green hues for top-level nav links */
nav a[href$="about.html"] { color: rgba(32,201,151,0.80); }
.dark nav a[href$="about.html"] { color: rgba(32,201,151,0.80); }
nav a[href$="faq.html"] { color: rgba(32,201,151,0.68); }
.dark nav a[href$="faq.html"] { color: rgba(32,201,151,0.68); }
nav a[href$="contact.html"] { color: rgba(32,201,151,0.60); }
.dark nav a[href$="contact.html"] { color: rgba(32,201,151,0.60); }
nav a[href$="index.html"] { color: rgba(32,201,151,0.50); }
.dark nav a[href$="index.html"] { color: rgba(32,201,151,0.50); }

/* Active page state applied via aria-current="page" */
nav a[aria-current="page"] {
    color: var(--bold-teal) !important;
    text-decoration: none;
}
.dark nav a[aria-current="page"] { color: var(--bold-teal) !important; }

/* Mobile menu defaults */
#mobile-menu a { color: rgba(248, 250, 252, 0.92) !important; }
#mobile-menu a[aria-current="page"] { color: var(--bold-teal) !important; }

/* Keep fixed header/nav above all other content layers across pages */
header[class*="fixed"], header {
    z-index: 999999 !important; /* High z-index but safe from overflow */
}

/* Ensure the inner nav bar also sits high if it creates a stacking context */
#nav-bar {
    z-index: 999999 !important;
    position: relative;
}

/* Keep custom cursor above all UI layers, including services page visuals */
/* Merged into main definition below */


/* Ensure glassmorphism panels never create a stacking context above cursor */
.glassmorphism,
.glass-panel,
.dark-card,
.bg-dark-card {
    position: relative;
    z-index: 1;
    background-color: var(--dark-card) !important;
}

/* Force specific utility overrides */
.bg-bold-teal { background-color: var(--bold-teal) !important; }
.border-bold-teal { border-color: var(--bold-teal) !important; }
.text-bold-teal { color: var(--bold-teal) !important; }
.hover\:bg-transparent:hover { background-color: transparent !important; }

/* Custom Hazard Strip for Fleet Card */
.hazard-strip {
    background: repeating-linear-gradient(
        45deg,
        #EAB308,
        #EAB308 10px,
        #111a19 10px,
        #111a19 20px
    );
}

/* Gradient Border for Fleet Card */
.gradient-border-fleet {
    border: 2px solid transparent;
    border-radius: 1rem; /* Matches rounded-2xl */
    background-image: linear-gradient(var(--dark-card), var(--dark-card)), 
                      linear-gradient(to bottom, var(--bold-teal), #EAB308);
    background-origin: border-box;
    background-clip: padding-box, border-box;
}

/* Shared float animation for hero imagery */
@keyframes float-soft {
    0% { transform: translateY(0); }
    50% { transform: translateY(-12px); }
    100% { transform: translateY(0); }
}
.animate-float {
    animation: float-soft 6s ease-in-out infinite;
}

/* Global hero background shells */
.hero-shell-fixed {
    position: relative;
    min-height: 100vh;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
}
.hero-shell-fleet {
    background-image:
        radial-gradient(circle at 12% 0%, rgba(32,201,151,0.22), transparent 55%),
        radial-gradient(circle at 88% 100%, rgba(251,191,36,0.17), transparent 60%),
        linear-gradient(to bottom, #020617, #020617, #020617);
}
.hero-shell-purple {
    background-image:
        radial-gradient(circle at 0% 0%, rgba(32,201,151,0.38), transparent 55%),
        radial-gradient(circle at 90% 90%, rgba(34,197,94,0.25), transparent 60%),
        linear-gradient(to bottom, #020617, #020617, #020617);
}

/* Themed CTA buttons */
/* Base pill CTA look, reused by themed buttons */
.btn-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    font-family: var(--font-primary);
    font-weight: 600;
    padding: 0.75rem 1.75rem;
    font-size: 0.95rem;
    border: 1px solid transparent;
    text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}
.btn-pill:hover {
    transform: translateY(-1px);
    box-shadow: 0 18px 45px rgba(15,23,42,0.35);
}

.btn-fleet,
.btn-walls,
.btn-windows,
.btn-brand {
    border-radius: 9999px;
    font-family: var(--font-primary);
    font-weight: 600;
    padding: 0.75rem 1.75rem;
    font-size: 0.95rem;
    border: 1px solid transparent;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}
.btn-fleet:hover,
.btn-walls:hover,
.btn-windows:hover,
.btn-brand:hover {
    transform: translateY(-1px);
    box-shadow: 0 18px 45px rgba(15,23,42,0.35);
}

.btn-fleet {
    background-color: var(--bold-teal);
    color: #0b0b0b;
}

.btn-walls {
    background-color: var(--walls-accent);
    color: #0b0b0b;
}

.btn-windows {
    background-color: var(--windows-accent);
    color: #0b0b0b;
}

.btn-brand {
    background-color: var(--brand-accent);
    color: #f9fafb;
}

/* Ensure Blog button text turns white on hover across all pages */
header nav a[href*="blog.adherestudio.com"]:hover {
    color: #ffffff !important;
}

/* Ensure submenu links meet contrast in dark mode */
.nav-submenu a { color: var(--charcoal); }
.dark .nav-submenu a { color: var(--text-muted-dark); }
.nav-submenu a:hover { background-color: rgba(32,201,151,0.06); }

/* Fleet Kits nav chip */
.nav-link-fleet {
    color: var(--bold-teal) !important;
    background-color: rgba(32,201,151,0.12);
    border-radius: 9999px;
    padding: 0.35rem 1rem;
    border: 1px solid rgba(32,201,151,0.35);
    box-shadow: 0 16px 32px rgba(32,201,151,0.15);
    transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.dark .nav-link-fleet {
    background-color: rgba(32,201,151,0.2);
    border-color: rgba(32,201,151,0.45);
}
.nav-link-fleet:hover,
.nav-link-fleet:focus,
.nav-link-fleet:focus-visible {
    background-color: var(--bold-teal);
    color: var(--charcoal) !important;
    box-shadow: 0 20px 35px rgba(32,201,151,0.28);
    transform: translateY(-1px);
}

.nav-link-fleet-mobile {
    display: block;
    text-align: left;
    background-color: var(--bold-teal) !important;
    color: #ffffff !important;
    border-radius: 0.375rem;
    box-shadow: 0 12px 24px rgba(32,201,151,0.24);
    transition: filter 0.2s ease;
}
.nav-link-fleet-mobile:hover { filter: brightness(0.95); }

/* Dark-mode fix: utility class bg-gray-50 is used with dark:bg-dark-card in templates
   but our legacy utilities didn't map the dark state; ensure the gray-50 surface
   flips to a dark card in dark mode so roll-open (details) blocks remain legible. */
.dark .bg-gray-50 { background-color: var(--dark-card) !important; }
.dark .bg-gray-100 { background-color: #111827 !important; }

/* Improve contrast and spacing for accordion / roll-open items (details + summary)
   so they are readable in both light and dark themes. */
details { background-color: var(--off-white); color: var(--charcoal); }
.dark details { background-color: var(--dark-card); color: var(--off-white); }
details summary { cursor: pointer; padding: 0.25rem 0; font-weight: 600; }
details[open] { box-shadow: 0 6px 18px rgba(0,0,0,0.06); }
details .p-4 { padding: 1rem; }

.dark .bg-white { background-color: #0b0b0b !important; }
.dark .bg-off-white { background-color: var(--dark-card) !important; }

/* Hover background helper used by many pages */
.hover\:bg-gray-100:hover { background-color: #F3F4F6 !important; }
.dark .hover\:bg-gray-100:hover { background-color: #111827 !important; }

/* Ensure base typography is legible */
body, p, li, dd, dt {
    color: var(--charcoal);
    line-height: 1.7;
    font-size: 1rem;
}
.dark body, .dark p, .dark li, .dark dd, .dark dt { color: var(--off-white); }

/* Stronger heading contrast */
h1,h2,h3,h4 { color: var(--charcoal); line-height: 1.15; }
.dark h1,h2,h3,h4 { color: var(--off-white); }

/* ----------------------------------------------
   Form controls: force dark-theme appearance and high-contrast text
   Applied globally so inputs are legible even if .dark class is missing
   ----------------------------------------------*/
input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
input[type="search"], input[type="password"], textarea, select {
    /* Dark surface for fields */
    background-color: var(--dark-card);
    color: var(--off-white) !important; /* typed text should always be legible */
    border: 1px solid rgba(255,255,255,0.06);
    caret-color: var(--off-white);
}

/* Placeholder contrast must be readable on dark fields */
input::placeholder, textarea::placeholder {
    color: var(--text-muted-dark);
    opacity: 1; /* browsers differ; keep it explicit */
}

/* Selects and options inherit the dark surface and readable text */
select { background-color: var(--dark-card); color: var(--off-white); }
select option { background-color: var(--dark-card); color: var(--off-white); }

/* Autofill handling (Chrome) to ensure autofilled text is readable */
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px var(--dark-card) inset !important;
    -webkit-text-fill-color: var(--off-white) !important;
}

/* Removed quote-form-container light override so inputs use unified navy styling */




/* Embedded intake forms */
.hs-form-frame {
    width: 100%;
}
.hs-form-frame iframe {
    width: 100% !important;
    border: none;
}
.hs-form fieldset {
    max-width: none !important;
    margin: 0;
    padding: 0;
    border: 0;
}
.hs-form .hs-form-field {
    margin-bottom: 1.25rem;
}
.hs-form label,
.hs-form legend {
    font-family: var(--font-primary);
    font-weight: 600;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    margin-bottom: 0.4rem;
    color: var(--charcoal);
}
.dark .hs-form label,
.dark .hs-form legend { color: var(--off-white); }
.hs-form .hs-form-required {
    color: var(--bold-teal);
    margin-left: 0.25rem;
}
.hs-form .hs-input,
.hs-form textarea,
.hs-form select {
    width: 100% !important;
    background-color: rgba(17,19,21,0.9) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    color: var(--off-white) !important;
    border-radius: 1rem !important;
    padding: 0.9rem 1.1rem !important;
    font-family: var(--font-secondary) !important;
    font-size: 1rem !important;
    transition: border-color 200ms ease, box-shadow 200ms ease;
}
.hs-form .hs-input:focus,
.hs-form textarea:focus,
.hs-form select:focus {
    border-color: rgba(32,201,151,0.65) !important;
    box-shadow: 0 0 0 3px rgba(32,201,151,0.18);
    outline: none;
}
.hs-form .hs_error_rollup .hs-error-msg,
.hs-form .hs-error-msg {
    color: #f87171;
    font-size: 0.85rem;
    margin-top: 0.35rem;
}
.hs-form .hs-submit .actions {
    margin-top: 1.5rem;
}
.hs-form .hs_submit .hs-button,
.hs-form .hs-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    border-radius: 9999px;
    background-color: var(--bold-teal);
    color: var(--charcoal);
    font-family: var(--font-primary);
    font-weight: 600;
    font-size: 1rem;
    padding: 0.85rem 2.5rem;
    border: none;
    cursor: pointer;
    transition: transform 120ms ease, box-shadow 200ms ease, background-color 200ms ease;
    box-shadow: 0 12px 30px rgba(32,201,151,0.25);
}
.hs-form .hs-button:hover {
    background-color: #14b8a6;
    color: #ffffff;
    transform: translateY(-1px);
}
.hs-form .hs-richtext,
.hs-form .hs-dependent-field {
    color: var(--text-muted-dark);
    font-size: 0.95rem;
}
.dark .hs-form .hs-richtext,
.dark .hs-form .hs-dependent-field { color: var(--text-muted-dark); }
.hs-form input[type="checkbox"],
.hs-form input[type="radio"] {
    accent-color: var(--bold-teal);
}
.hs-form ul.inputs-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.hs-form ul.inputs-list > li {
    margin-bottom: 0.35rem;
}
.hs-form .legal-consent-container,
.hs-form .hs_recaptcha,
.hs-form .hs-dependent-field > div {
    margin-top: 0.5rem;
}

.fillout-embed {
    position: relative;
    width: 100%;
}
.fillout-embed iframe {
    width: 100% !important;
    min-height: 640px;
    border: none;
    border-radius: 1rem;
}

/* Hides the theme switcher script from rendering */
.theme-script {
    display: none;
}

/* Only hide the native cursor when the custom cursor is active.
   This keeps the system cursor visible on pages that don't include
   a #custom-cursor element so they don't appear broken. The JS
   will add `custom-cursor-active` to the <html> element when the
   custom cursor is initialized. */
#custom-cursor { display: none; }
html.custom-cursor-active, html.custom-cursor-active body, html.custom-cursor-active a, html.custom-cursor-active button, html.custom-cursor-active input, html.custom-cursor-active select, html.custom-cursor-active textarea {
    cursor: none;
}

/* ----------------------------------------------
Custom Cursor Styles
----------------------------------------------
- Creates a circular cursor that follows the mouse.
- Provides a visual 'grow' effect on hover over interactive elements.
*/
#custom-cursor {
    position: fixed;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    /* revert to filled circle so mix-blend-mode: difference produces the inverted look */
    background-color: #ffffff;
    border: 2px solid rgba(255,255,255,0.08);
    mix-blend-mode: difference; /* keeps interactive inversion with background */
    pointer-events: none; /* Allows clicking through the cursor */
    transform: translate(-50%, -50%);
    transition: width 150ms ease, height 150ms ease;
    /* sit above most site elements but below the close button */
    z-index: 2147483647 !important;
}

#custom-cursor.grow {
    width: 48px;
    height: 48px;
    box-shadow: 0 0 18px rgba(32,201,151,0.12);
}

/* ----------------------------------------------
Buttons
----------------------------------------------
- Reusable classes for primary, secondary, and navigation buttons.
*/
.btn-primary {
    display: inline-block;
    background-color: var(--bold-teal);
    color: var(--charcoal);
    font-family: var(--font-primary);
    font-weight: 600; /* semibold */
    padding: 0.75rem 2rem; /* py-3 px-8 */
    border-radius: 9999px; /* pill */
    font-size: 1.125rem; /* text-lg */
    transition: background-color 300ms, color 300ms;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-lg */
}

.dark .btn-primary {
    color: var(--charcoal); /* Keeps text dark for contrast on teal */
}

.btn-primary:hover {
    background-color: #14b8a6; /* A slightly darker teal */
    color: white;
}

.dark .btn-primary:hover {
    color: white;
}

.btn-secondary {
    display: inline-block;
    background-color: var(--charcoal);
    color: white;
    font-family: var(--font-primary);
    font-weight: 600; /* semibold */
    padding: 0.75rem 2rem;
    border-radius: 9999px; /* pill */
    font-size: 1.125rem; /* text-lg */
    transition: background-color 300ms, color 300ms;
}

.dark .btn-secondary {
    background-color: var(--off-white);
    color: var(--charcoal);
}

.btn-secondary:hover {
    background-color: #4b5563; /* A slightly lighter charcoal */
}

.dark .btn-secondary:hover {
    background-color: #e5e7eb; /* A slightly darker off-white */
}

.btn-compact {
    padding: 0.5rem 1.5rem !important;
    font-size: 0.95rem !important;
    box-shadow: 0 5px 12px rgba(0, 0, 0, 0.15);
    min-width: auto;
}

.btn-nav {
    display: inline-block;
    background-color: var(--charcoal);
    color: white;
    font-family: var(--font-primary);
    font-weight: 600; /* semibold */
    padding: 0.5rem 1.25rem; /* py-2 px-5 */
    border-radius: 9999px; /* rounded-full */
    font-size: 0.875rem; /* text-sm */
    transition: background-color 300ms, color 300ms;
}

.dark .btn-nav {
    background-color: var(--off-white);
    color: var(--charcoal);
}

.btn-nav:hover {
    background-color: #4b5563;
}

.dark .btn-nav:hover {
    background-color: #e5e7eb;
}

/* Hover/focus styles for Calendly modal trigger buttons */
.open-modal-btn {
    /* inherit base button styles via existing btn-* classes */
    text-decoration: none;
    border-radius: 9999px !important; /* ensure pill */
}
.open-modal-btn:hover, .open-modal-btn:focus {
    outline: none;
    box-shadow: 0 6px 18px rgba(32, 201, 151, 0.18);
    transform: translateY(-2px);
}

/* Pill + size modifiers for consistent CTAs */
.btn-pill { border-radius: 9999px !important; }
.btn-md { padding: 0.625rem 1.25rem !important; font-size: 1rem !important; }

/* Compact button modifier (for smaller CTAs) */
.btn-sm {
    padding: 0.5rem 1rem; /* py-2 px-4 */
    font-size: 0.9375rem; /* ~15px, smaller than text-lg */
    border-radius: 9999px; /* pill */
}
.btn-primary.btn-sm { box-shadow: 0 6px 12px rgba(0,0,0,0.08); }
.btn-secondary.btn-sm { box-shadow: 0 6px 12px rgba(0,0,0,0.06); }


/* ----------------------------------------------
Component Styles
----------------------------------------------
- Defines styles for reusable components like navigation, cards, etc.
*/

/* Glassmorphism effect for the navigation bar on scroll */
.glassmorphism {
    background: rgba(255, 255, 255, 0.15);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.dark .glassmorphism {
    background: rgba(17, 17, 17, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Ensure blur works across browsers when attached to fixed header */
header#nav-bar.glassmorphism,
#nav-bar.glassmorphism {
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
}

/* Category accent utility classes for Walls (blue) & Windows (yellow) */
.text-walls { color: var(--walls-accent); }
.text-windows { color: var(--windows-accent); }
.text-brand { color: var(--brand-accent); }

.bg-walls-soft { background-color: rgba(59, 130, 246, 0.12); }
.bg-windows-soft { background-color: rgba(249, 115, 22, 0.18); }
.bg-brand-soft { background-color: rgba(168, 85, 247, 0.16); }
.bg-walls-pill { background-color: rgba(59, 130, 246, 0.18); }
.bg-windows-pill { background-color: rgba(249, 115, 22, 0.22); }
.bg-brand-pill { background-color: rgba(168, 85, 247, 0.22); }

.border-walls { border-color: rgba(59, 130, 246, 0.45); }
.border-windows { border-color: rgba(249, 115, 22, 0.45); }
.border-brand { border-color: rgba(168, 85, 247, 0.48); }
.hover\:border-walls:hover { border-color: rgba(59, 130, 246, 0.58); }
.hover\:border-windows:hover { border-color: rgba(249, 115, 22, 0.6); }
.hover\:border-brand:hover { border-color: rgba(168, 85, 247, 0.6); }

.hover\:text-walls:hover { color: var(--walls-accent); }
.hover\:text-windows:hover { color: var(--windows-accent); }
.hover\:text-brand:hover { color: var(--brand-accent); }

.hover\:bg-walls-soft:hover { background-color: rgba(59, 130, 246, 0.14); }
.hover\:bg-windows-soft:hover { background-color: rgba(249, 115, 22, 0.24); }
.hover\:bg-brand-soft:hover { background-color: rgba(168, 85, 247, 0.2); }

.shadow-walls-soft { box-shadow: 0 16px 32px rgba(59, 130, 246, 0.16); }
.shadow-windows-soft { box-shadow: 0 16px 32px rgba(249, 115, 22, 0.18); }
.shadow-brand-soft { box-shadow: 0 16px 32px rgba(168, 85, 247, 0.18); }
.hover\:shadow-walls-soft:hover { box-shadow: 0 22px 40px rgba(59, 130, 246, 0.2); }
.hover\:shadow-windows-soft:hover { box-shadow: 0 22px 40px rgba(249, 115, 22, 0.22); }
.hover\:shadow-brand-soft:hover { box-shadow: 0 22px 40px rgba(168, 85, 247, 0.22); }

.badge-walls {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: transparent;
    color: var(--walls-accent);
    border: none;
    font-family: var(--font-primary);
    font-weight: 600;
    font-size: 0.8rem;
    letter-spacing: 0.02em;
}

.badge-fleet {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: transparent;
    color: var(--bold-teal);
    border: none;
    font-family: var(--font-primary);
    font-weight: 600;
    font-size: 0.8rem;
    letter-spacing: 0.02em;
}

.badge-windows {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: transparent;
    color: var(--windows-accent);
    border: none;
    font-family: var(--font-primary);
    font-weight: 600;
    font-size: 0.8rem;
    letter-spacing: 0.02em;
}

.badge-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: transparent;
    color: var(--brand-accent);
    border: none;
    font-family: var(--font-primary);
    font-weight: 600;
    font-size: 0.8rem;
    letter-spacing: 0.02em;
}

/* Global content padding to prevent edge bleed on interior pages */
.page-content,
.content,
.prose {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}
@media (min-width: 1024px) {
    .page-content,
    .content,
    .prose {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

/* Gradient for page headers on interior pages */
.page-header-gradient {
    background-image: linear-gradient(135deg, #e9fbf8 0%, #f8f9fa 100%);
}

.dark .page-header-gradient {
    background-image: linear-gradient(135deg, #111827 0%, #000000 100%);
}

/* Adds a small 'bridge' to prevent the services submenu from disappearing too quickly */
.group:hover .nav-submenu {
    padding-top: 1rem;
}

/* ----------------------------------------------
Homepage Specific Styles
----------------------------------------------
*/

/* Hero Section */
.hero-section {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.hero-section video {
    filter: blur(0px);
    transform: scale(1.00);
}

/* Hero image card sweep */
.hero-card { overflow: hidden; }
.hero-sweep {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(120deg, transparent 35%, rgba(255,255,255,0.28) 50%, transparent 65%);
    transform: translateX(-120%);
}
.hero-card:hover .hero-sweep {
    transition: transform 1400ms cubic-bezier(.2,.9,.28,1);
    transform: translateX(120%);
}

/* Service & Blog Card Hover Effects */
.service-card:hover, .blog-card:hover {
    transform: translateY(-0.5rem);
}

.blog-card-image {
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

/* Image Gallery Hover Effect */
.group img {
    transition: transform 0.3s ease;
}

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

/* Visually rich homepage flourishes */
.gradient-text {
    background: linear-gradient(90deg, #20c997 0%, #8be8d6 40%, #20c997 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.btn-shine {
    position: relative;
    overflow: hidden;
}
.btn-shine::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.35) 45%, transparent 60%);
    transform: translateX(-120%);
}
.btn-shine:hover::after {
    transition: transform 700ms cubic-bezier(.2,.9,.28,1);
    transform: translateX(120%);
}

.divider-glow {
    height: 1px;
    margin: 2rem auto;
    max-width: 1100px;
    background: radial-gradient(closest-side, rgba(32,201,151,0.6), transparent 70%);
    filter: blur(0.3px);
}

/* Futuristic hero grid overlay */
.hero-grid {
    background-image: linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px);
    background-size: 40px 40px;
    animation: gridFloat 18s linear infinite;
}

@keyframes gridFloat {
    0% { background-position: 0 0, 0 0; }
    50% { background-position: 20px 20px, 20px 20px; }
    100% { background-position: 0 0, 0 0; }
}

/* Corner light sweep for sticky CTA */
.corner-sweep {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 120px;
    height: 120px;
    background: radial-gradient(ellipse at bottom right, rgba(32,201,151,0.25) 0%, rgba(32,201,151,0) 65%);
    pointer-events: none;
}

/* Subtle glow on shiny buttons */
.btn-shine { box-shadow: 0 0 20px rgba(32,201,151,0.18); }

.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
@media (max-width: 768px) { .stat-grid { grid-template-columns: repeat(2, 1fr); } }
.stat-card { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.08); border-radius: 1rem; padding: 1.25rem; text-align: center; }
.dark .stat-card { background: rgba(0,0,0,0.35); }
.stat-number { font-size: 2rem; font-weight: 800; letter-spacing: -0.02em; }
.stat-label { font-size: 0.9rem; opacity: 0.8; }

/* Sticky mobile CTA bar */
.sticky-cta {
    position: fixed;
    left: 0; right: 0; bottom: 12px;
    display: none;
    justify-content: center;
    z-index: 2147483646; /* ensure above tidio and content */
}
.sticky-cta .bar {
    display: flex; gap: 0.5rem; align-items: center;
    background: rgba(17,19,21,0.85);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 9999px;
    padding: 0.5rem;
    box-shadow: 0 20px 40px rgba(0,0,0,0.35);
    backdrop-filter: blur(10px);
}
@media (max-width: 700px) { .sticky-cta { display: flex; } }

.logo-pill {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0.5rem 0.9rem; border-radius: 9999px; font-weight: 600; font-family: var(--font-primary);
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.06);
    color: var(--off-white);
}
.dark .logo-pill { background: rgba(255,255,255,0.08); }

/* Trust badge hover pulse */
.logo-pill:hover {
        box-shadow: 0 0 0 0 rgba(32,201,151,0.35);
        animation: pulseGlow 900ms ease-out;
}

@keyframes pulseGlow {
    0% { box-shadow: 0 0 0 0 rgba(32,201,151,0.35); transform: translateY(0); }
    50% { box-shadow: 0 0 0 12px rgba(32,201,151,0.0); transform: translateY(-1px); }
    100% { box-shadow: 0 0 0 0 rgba(32,201,151,0.0); transform: translateY(0); }
}


/* ----------------------------------------------
Portfolio Page Specific Styles
----------------------------------------------
*/

/* Style for the active filter button */
.filter-btn.is-checked {
    background-color: var(--bold-teal);
    color: white !important;
}

/* ----------------------------------------------
Modal (Calendly) Styles
----------------------------------------------
*/
.modal-overlay {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.6);
    z-index: 99990;
    padding: 1.5rem;
}
.modal-overlay.active {
    display: flex;
}
.modal-content {
    width: 100%;
    max-width: 980px;
    background: white;
    border-radius: 0.75rem;
    /* allow the close button to sit outside the rounded corner without being clipped */
    overflow: visible;
    position: relative;
    box-shadow: 0 30px 60px rgba(0,0,0,0.4);
}
.dark .modal-content { background: #0b0b0b; }
.modal-content iframe {
    width: 100%;
    height: 70vh;
    border: 0;
    display: block;
    /* keep rounded corners even when modal-content overflow is visible */
    border-radius: 0.75rem;
}
.modal-content .calendly-container {
    width: 100%;
    height: 70vh; /* ensure Calendly inline widget has a canvas height */
    min-height: 640px; /* Calendly looks best with a generous minimum */
    display: block;
    border-radius: 0.75rem;
}
.modal-close-btn {
    position: absolute;
    /* place the button visually outside the rounded corner */
    top: -12px;
    right: -12px;
    width: 36px;
    height: 36px;
    background: var(--charcoal);
    color: white;
    border-radius: 50%;
    border: 3px solid white;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    /* high z-index to ensure the close button is visible above modal and third-party widgets */
    z-index: 100005;
}
.modal-close-btn svg { width: 1rem; height: 1rem; }

/* Ensure mobile menu and button sit above non-active overlays and accept pointer events */
#mobile-menu-button, #mobile-menu {
    position: relative;
    /* push well above other overlays to ensure taps reach the controls across the site */
    z-index: 2147483647 !important;
    /* On touch devices ensure taps are delivered and default gestures don't interfere */
    touch-action: manipulation;
    -ms-touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    pointer-events: auto !important;
}

#mobile-menu {
    background: rgba(10, 16, 23, 0.94);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(248, 250, 252, 0.92);
}

#mobile-menu a {
    color: rgba(248, 250, 252, 0.92) !important;
    font-weight: 500;
}

#mobile-menu a:hover {
    color: var(--bold-teal) !important;
}

#mobile-menu a[aria-current="page"] {
    color: var(--bold-teal) !important;
}

/* Make decorative particle canvases and generated trail canvases non-interactive so they don't
   intercept touch/click events intended for UI controls (applies broadly across pages). */
#particles-js, #particles-js canvas, .trail-canvas, canvas.trail-canvas {
    pointer-events: none !important;
}

/* Tidio chat z-index: above content, below nav/menu */
#tidio-chat, .tidio-chat, .tidio-chat-iframe, iframe[src*="tidio"], div[id*="tidio"] {
    z-index: 2147483646 !important; /* below header, above all other content */
}

/* Ensure modal overlays only intercept pointer events when active. Use !important to
   override inline styles from third-party widgets that may force pointer-events. */
.modal-overlay { pointer-events: none !important; }
.modal-overlay.active { pointer-events: auto !important; }

/* Create a stacking context for the site header container and center wrapper so
    the mobile menu and nav are guaranteed above chat/calendly overlays on small screens. */
header#nav-bar, header .max-w-6xl.mx-auto {
     position: relative;
    z-index: 2147483647 !important; /* sit above CTAs and chat on mobile */
}

/* Only apply the above aggressive stacking on smaller viewports so desktop layering
    is unaffected by this emergency fix. Adjust breakpoint as needed. */
@media (min-width: 992px) {
    header#nav-bar, header .max-w-6xl.mx-auto { z-index: 2147483647 !important; }
}

/* When mobile menu is hidden, ensure it doesn't block pointer events from underlying elements */
#mobile-menu.hidden { pointer-events: none; }

/* Some pages used .modal-overlay with pointer-events even when hidden; make hidden overlays non-interactive */
.modal-overlay { pointer-events: none; }
.modal-overlay.active { pointer-events: auto; }

/* Animated mobile menu: default hidden via transform/opacity; when body.mobile-open or data-open=true it slides/fades in */
#mobile-menu {
    transition: transform 300ms cubic-bezier(.2,.9,.28,1), opacity 220ms ease, visibility 300ms ease;
    transform-origin: top center;
    transform: translateY(-10px) scaleY(0.98);
    opacity: 0;
    visibility: hidden;
}

/* When menu is visible (we set data-open='true' for animation) */
#mobile-menu[data-open='true'] {
    transform: translateY(0) scaleY(1);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Make sure Tailwind's `hidden` (display:none) doesn't keep the menu invisible when JS opens it.
     Apply only on small screens to avoid affecting desktop nav. */
@media (max-width: 991px) {
    #mobile-menu[data-open='true'],
    body.mobile-open #mobile-menu,
    #mobile-menu:not(.hidden) {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        transform: translateY(0) scaleY(1) !important;
        pointer-events: auto !important;
        z-index: 2147483647 !important; /* above chat and sticky CTA */
    }

    /* Defensive: if JS toggles a `show` class instead of data-open, handle it too */
    #mobile-menu.show, #mobile-menu.open {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        transform: translateY(0) scaleY(1) !important;
        pointer-events: auto !important;
    }
}

/* When body has mobile-open state but JS hasn't toggled data-open yet, ensure menu is visible for transition start */
body.mobile-open #mobile-menu {
    /* keep class-based visibility if JS is not available */
    transform: translateY(0) scaleY(1);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Slight elevation and shadow for open mobile menu */
#mobile-menu[data-open='true'], body.mobile-open #mobile-menu {
    box-shadow: 0 20px 40px rgba(2,6,23,0.2);
}


/* Transitions for grid items when filtering */
.grid-item {
    transition: transform 0.4s ease, opacity 0.4s ease;
}

.grid-item img {
    transition: transform 0.3s ease;
}

.grid-item:hover img {
    transform: scale(1.05);
}

/* Lightbox styles for viewing images */
#lightbox-overlay {
    transition: opacity 300ms ease-in-out;
}

#lightbox-overlay img {
    transition: transform 300ms ease-in-out;
}


/* ----------------------------------------------
Fleet Page Specific Styles
----------------------------------------------
*/

/* Carousel container styles */
.carousel-container {
    position: relative;
    width: 100%;
    height: 400px; /* Fixed height for consistency */
    overflow: hidden;
    border-radius: 0.5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    display: flex;
    justify-content: center;
    align-items: center;
    border: none;
}

.carousel-slide {
    display: none; /* Hide slides by default */
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; /* Ensures whole image is visible */
}

.carousel-slide.active {
    display: block; /* Show the active slide */
}

/* Carousel navigation dots */
.carousel-dots {
    text-align: center;
    padding-top: 1rem;
}

.dot {
    height: 12px;
    width: 12px;
    margin: 0 4px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
    cursor: pointer;
}

.dot.active, .dot:hover {
    background-color: var(--bold-teal);
}

/* ----------------------------------------------
Team Section (About Page)
----------------------------------------------
*/
.team-card-details {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-in-out;
}

.team-card.active .team-card-details {
    /* The max-height is set by JS */
    will-change: max-height;
}

.team-card .expand-icon {
    transition: transform 0.3s ease-in-out;
}

.team-card.active .expand-icon {
    transform: rotate(45deg);
}

/* ----------------------------------------------
FAQ Section
----------------------------------------------
*/
.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 360ms cubic-bezier(.2,.9,.28,1), opacity 240ms ease;
    opacity: 0.0;
}
.faq-item.open .faq-answer { opacity: 1; }
.faq-question svg {
    transition: transform 300ms ease, color 200ms ease;
    flex-shrink: 0;
}
.faq-item.open .faq-question svg {
    transform: rotate(180deg);
}

/* FAQ visual polish to match site surfaces */
.faq-item {
    border: none !important; /* override tailwind border-b */
    background: rgba(255,255,255,0.06);
    border-radius: 1.25rem; /* softer, less round corners */
    padding: 0.25rem; /* subtle outer ring */
    transition: background-color 240ms ease, box-shadow 240ms ease, transform 120ms ease, color 200ms ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    will-change: background-color, box-shadow, transform;
}
.faq-item:hover { box-shadow: 0 10px 24px rgba(0,0,0,0.14); transform: translateY(-2px); }
.dark .faq-item { background: rgba(255,255,255,0.04); }
.faq-question { background: transparent; border-radius: 1rem; padding: 1rem 1.25rem; }
.faq-question span { transition: color 200ms ease; }
.faq-question { min-height: 3.25rem; line-height: 1.3; box-sizing: border-box; }
.faq-answer { margin: 0; }
.faq-item.open { background: var(--bold-teal); box-shadow: 0 16px 40px rgba(32,201,151,0.25); color: var(--charcoal); }
.faq-item.open .faq-question span { color: var(--charcoal) !important; }
.faq-item.open .faq-question svg { color: var(--charcoal); }
.faq-item.open .faq-answer p { color: var(--charcoal) !important; }
.faq-answer { padding: 0 1.25rem; }
.faq-item.open .faq-answer { padding-bottom: 1.25rem; }

/* FAQ category filter pills */
.filter-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
}
.filter-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.875rem; /* sm, compact */
    border-radius: 9999px;
    font-family: var(--font-primary);
    font-weight: 600;
    font-size: 0.875rem;
    color: #ffffff;
    background-color: var(--charcoal);
    border: 1px solid rgba(255,255,255,0.08);
    transition: background-color 200ms ease, color 200ms ease, box-shadow 200ms ease, transform 120ms ease;
}
.dark .filter-pill { background-color: #1f2937; border-color: rgba(255,255,255,0.06); }
.filter-pill:hover { transform: translateY(-1px); box-shadow: 0 6px 12px rgba(0,0,0,0.12); }
.filter-pill:focus { outline: 3px solid rgba(32,201,151,0.18); outline-offset: 2px; }
.filter-pill.active,
.filter-pill[aria-pressed="true"] {
    background-color: var(--bold-teal);
    color: var(--charcoal);
    box-shadow: 0 10px 24px rgba(32,201,151,0.22);
}

/* ----------------------------------------------
Contact Form
----------------------------------------------
*/
.form-input {
    width: 100%;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    background-color: #f3f4f6; /* gray-100 */
    border: 1px solid transparent;
    transition: border-color 300ms, box-shadow 300ms;
}
.dark .form-input {
    background-color: #1f2937; /* gray-800 */
}
.form-input:focus {
    outline: none;
    border-color: var(--bold-teal);
    box-shadow: 0 0 0 2px rgba(32, 201, 151, 0.3);
}

/* File input: style the "Choose Files" button to match site */
input[type="file"].form-input {
    padding: 0.5rem; /* space around button and filename */
    color: var(--off-white);
}
input[type="file"].form-input::file-selector-button,
input[type="file"].form-input::-webkit-file-upload-button {
    background-color: var(--bold-teal);
    color: var(--charcoal);
    font-family: var(--font-primary);
    font-weight: 600;
    border: none;
    border-radius: 0.5rem;
    padding: 0.5rem 1rem; /* py-2 px-4 */
    margin-right: 0.75rem;
    cursor: pointer;
    transition: background-color 200ms ease, transform 120ms ease, box-shadow 200ms ease;
}
input[type="file"].form-input::file-selector-button:hover,
input[type="file"].form-input::-webkit-file-upload-button:hover {
    background-color: #14b8a6; /* slightly darker teal */
    color: #ffffff;
    box-shadow: 0 6px 14px rgba(32,201,151,0.18);
}
input[type="file"].form-input::file-selector-button:active,
input[type="file"].form-input::-webkit-file-upload-button:active {
    transform: translateY(1px);
}

/* Pillify all form submit buttons site-wide */
form button[type="submit"],
form input[type="submit"] {
    border-radius: 9999px !important;
}

/* ----------------------------------------------
Modal Styles (Calendly Popup)
----------------------------------------------
*/
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(5px);
    display: flex;
    justify-content: center;
    align-items: center;
    /* keep overlay below the custom cursor but above page content when active */
    z-index: 100000;
    opacity: 0;
    /* when hidden, ensure it doesn't intercept pointer events so custom cursor continues to function */
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.modal-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.modal-content {
    position: relative;
    width: 90%;
    height: 80%;
    max-width: 1000px;
    background: white;
    border-radius: 1rem;
    /* allow close button to escape rounded corner */
    overflow: visible;
    transform: scale(0.95);
    transition: transform 0.3s ease;
}

.modal-overlay.active .modal-content {
    transform: scale(1);
}

.modal-content iframe {
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 1rem;
}
.modal-content .calendly-container {
    width: 100%;
    height: 100%;
    min-height: 640px;
    border-radius: 1rem;
}

.modal-close-btn {
    position: absolute;
    top: -15px;
    right: -15px;
    width: 36px;
    height: 36px;
    background: var(--charcoal);
    color: white;
    border-radius: 50%;
    border: 3px solid white;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 100001;
}

@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-15px); }
    100% { transform: translateY(0px); }
}
.animate-float {
    animation: float 6s ease-in-out infinite;
}

/* Global Container Padding Override */
.container {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
}

@media (min-width: 768px) {
    .container {
        padding-left: 4rem !important;
        padding-right: 4rem !important;
    }
}

@media (min-width: 1024px) {
    .container {
        padding-left: 6rem !important;
        padding-right: 6rem !important;
    }
}


/* Shine Animation */
@keyframes shine {
    0% { left: -100%; }
    20% { left: 100%; }
    100% { left: 100%; }
}
.animate-shine {
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0) 100%);
    transform: skewX(-25deg);
    animation: shine 3s infinite;
    pointer-events: none;
}