/* ═══════════════════════════════════════════════════════════

   Complete Pilates — Base Styles

   Brand: #1db1db (teal), #545f68 (gray), white/black

   Font: Inter (replacing Geogrotesque for web performance)

   ═══════════════════════════════════════════════════════════ */



/* ─── CSS Custom Properties ────────────────────────────────── */

:root {

    /* Brand colors */

    --color-primary: #10b5db;

    --color-primary-dark: #0e9ec1;

    --color-primary-light: #e6f6fb;

    --color-secondary: #112337;

    --color-dark: #112337;

    --color-white: #ffffff;

    --color-black: #000000;



    /* Neutrals */

    --color-gray-50: #f9fafb;

    --color-gray-100: #f3f4f6;

    --color-gray-200: #e5e7eb;

    --color-gray-300: #d1d5db;

    --color-gray-400: #9ca3af;

    --color-gray-500: #6b7280;

    --color-gray-600: #4b5563;

    --color-gray-700: #374151;

    --color-gray-800: #1f2937;

    --color-gray-900: #111827;



    /* Semantic */

    --color-success: #22c55e;

    --color-warning: #eab308;

    --color-error: #dc2626;



    /* Typography */

    --font-heading: 'Work Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

    --font-sans: 'DM Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

    --font-label: 'Questrial', 'Inter', sans-serif;

    --font-mono: 'SF Mono', 'Roboto Mono', monospace;



    /* Spacing */

    --space-xs: 4px;

    --space-sm: 8px;

    --space-md: 16px;

    --space-lg: 24px;

    --space-xl: 32px;

    --space-2xl: 48px;

    --space-3xl: 64px;

    --space-4xl: 96px;



    /* Layout */

    --container-max: 1200px;

    --container-narrow: 800px;

    --header-height: 80px;



    /* Border radius */

    --radius-sm: 4px;

    --radius-md: 8px;

    --radius-lg: 12px;

    --radius-xl: 16px;

    --radius-full: 9999px;



    /* Shadows */

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);

    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);

    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);

    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);



    /* Transitions */

    --transition: 0.2s ease;

    --transition-slow: 0.3s ease;

}



/* ─── Reset ────────────────────────────────────────────────── */

*, *::before, *::after {

    box-sizing: border-box;

    margin: 0;

    padding: 0;

}



html {

    font-size: 16px;

    scroll-behavior: smooth;

    -webkit-font-smoothing: antialiased;

    -moz-osx-font-smoothing: grayscale;

}



body {

    font-family: var(--font-sans);

    font-size: 1rem;

    line-height: 1.7;

    color: var(--color-gray-700);

    background: var(--color-white);

    overflow-x: hidden;

}


/* Safety net: ensure animated elements visible if GSAP fails to load.
   GSAP's gsap.set() overrides this inline when JS works. */
[data-animate] { opacity: 1; }



img {

    max-width: 100%;

    height: auto;

    display: block;

}



a {

    color: var(--color-primary);

    text-decoration: none;

    transition: color var(--transition);

}



a:hover {

    color: var(--color-primary-dark);

}



/* Focus-visible for keyboard accessibility */

:focus-visible {

    outline: 2px solid var(--color-primary);

    outline-offset: 2px;

    border-radius: var(--radius-sm);

}



:focus:not(:focus-visible) {

    outline: none;

}



ul, ol {

    list-style: none;

}



/* ─── Typography ───────────────────────────────────────────── */

h1, h2, h3, h4, h5, h6 {

    font-family: var(--font-heading);

    font-weight: 600;

    line-height: 1.25;

    color: var(--color-dark);

    letter-spacing: -0.02em;

}



h1 {

    font-size: clamp(2rem, 4vw, 3rem);

    font-weight: 700;

}



h2 {

    font-size: clamp(1.5rem, 3vw, 2.25rem);

}



h3 {

    font-size: clamp(1.25rem, 2.5vw, 1.75rem);

}



h4 {

    font-size: 1.125rem;

}



p {

    margin-bottom: 1rem;

}



.text-primary { color: var(--color-primary); }

.text-secondary { color: var(--color-secondary); }

.text-white { color: var(--color-white); }

.text-muted { color: var(--color-gray-500); }

.text-center { text-align: center; }

.text-small { font-size: 0.875rem; }

.text-xs { font-size: 0.75rem; }

.text-uppercase { text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.75rem; font-weight: 600; }



.small {

    display: block;

    font-size: 0.75rem;

    color: var(--color-gray-500);

    margin-top: 2px;

}



/* ─── Layout ───────────────────────────────────────────────── */

.container {

    max-width: var(--container-max);

    margin: 0 auto;

    padding: 0 var(--space-lg);

}



.container-narrow {

    max-width: var(--container-narrow);

    margin: 0 auto;

    padding: 0 var(--space-lg);

}



.section {

    padding: var(--space-4xl) 0;

}



.section-sm {

    padding: var(--space-2xl) 0;

}



.section-header {

    text-align: center;

    margin-bottom: var(--space-2xl);

}



.section-header h2 {

    margin-bottom: var(--space-sm);

}



.section-header p {

    color: var(--color-gray-500);

    max-width: 600px;

    margin: 0 auto;

}



.section-label {

    display: block;

    font-family: var(--font-label);

    text-transform: uppercase;

    letter-spacing: 0.15em;

    font-size: 0.75rem;

    font-weight: 600;

    color: var(--color-primary);

    margin-bottom: var(--space-sm);

}



/* Background variants */

.bg-white { background: var(--color-white); }

.bg-light { background: var(--color-gray-50); }

.bg-dark { background: var(--color-dark); color: var(--color-white); }

.bg-dark h2, .bg-dark h3, .bg-dark h4 { color: var(--color-white); }

.bg-dark p { color: var(--color-gray-300); }

.bg-primary { background: var(--color-primary); color: var(--color-white); }

.bg-primary h2, .bg-primary h3 { color: var(--color-white); }

.bg-primary-light { background: var(--color-primary-light); }



/* ─── Grid System ──────────────────────────────────────────── */

.grid {

    display: grid;

    gap: var(--space-lg);

}



.grid-2 { grid-template-columns: repeat(2, 1fr); }

.grid-3 { grid-template-columns: repeat(3, 1fr); }

.grid-4 { grid-template-columns: repeat(4, 1fr); }



@media (max-width: 1024px) {

    .grid-4 { grid-template-columns: repeat(2, 1fr); }

    .grid-3 { grid-template-columns: repeat(2, 1fr); }

}



@media (max-width: 640px) {

    .grid-4, .grid-3, .grid-2 { grid-template-columns: 1fr; }

    .section { padding: var(--space-2xl) 0; }

    .grid { gap: var(--space-md); }

}



/* ─── Header ───────────────────────────────────────────────── */

.site-header {

    position: fixed;

    top: var(--space-md);

    left: 50%;

    transform: translateX(-50%);

    z-index: 1000;

    width: calc(100% - var(--space-2xl));

    max-width: var(--container-max);

    background: rgba(17, 35, 55, 0.75);

    backdrop-filter: blur(20px);

    -webkit-backdrop-filter: blur(20px);

    border: 1px solid rgba(255, 255, 255, 0.08);

    border-radius: var(--radius-xl);

    height: var(--header-height);

    transition: background var(--transition-slow), box-shadow var(--transition-slow);

    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);

}



.site-header.scrolled {

    background: rgba(17, 35, 55, 0.85);

    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2);

}



.site-header .site-logo .logo-text,

.site-header .main-nav-desktop .nav-list a,

.site-header .header-phone {

    color: rgba(255, 255, 255, 0.9);

}



.site-header .main-nav-desktop .nav-list a:hover {

    color: var(--color-white);

    background: rgba(255, 255, 255, 0.1);

}



.site-header .mobile-toggle span {

    background: var(--color-white);

}



.site-header .site-logo img {

    filter: brightness(10);

}



.header-inner {

    max-width: 100%;

    margin: 0 auto;

    padding: 0 var(--space-xl);

    display: flex;

    align-items: center;

    justify-content: space-between;

    height: 100%;

    gap: var(--space-xl);

}



.site-logo {

    flex-shrink: 0;

}



.site-logo img {

    height: 36px;

    width: auto;

}



.site-logo .logo-text {

    font-size: 1.25rem;

    font-weight: 700;

    color: var(--color-dark);

}



/* Hide text when logo image exists */

.site-logo img + .logo-text {

    position: absolute;

    left: -9999px;

    width: 1px;

    height: 1px;

    overflow: hidden;

}



/* Mobile CTA — hidden on desktop, shown inside mobile nav */

.mobile-cta {

    display: none;

}



/* Navigation — desktop inline nav */

/* Mobile drawer (.main-nav) is hidden on desktop */
.main-nav { display: none; }

.main-nav-desktop .nav-list {

    display: flex;

    align-items: center;

    gap: var(--space-xs);

}



.main-nav-desktop .nav-list li {

    position: relative;

}



.main-nav-desktop .nav-list a {

    display: block;

    padding: var(--space-sm) var(--space-md);

    color: var(--color-gray-700);

    font-size: 0.875rem;

    font-weight: 500;

    white-space: nowrap;

    border-radius: var(--radius-sm);

    transition: all var(--transition);

}



.main-nav-desktop .nav-list a:hover,

.main-nav-desktop .nav-list .current-menu-item > a,

.main-nav-desktop .nav-list .current-menu-parent > a {

    color: var(--color-primary);

    background: var(--color-primary-light);

}



/* Dropdown */

.main-nav-desktop .nav-list .sub-menu {

    position: absolute;

    top: 100%;

    left: 0;

    min-width: 240px;

    background: var(--color-white);

    border-radius: var(--radius-md);

    box-shadow: var(--shadow-xl);

    padding: var(--space-sm);

    opacity: 0;

    visibility: hidden;

    transform: translateY(8px);

    transition: all var(--transition);

    z-index: 100;

}



.main-nav-desktop .nav-list li:hover > .sub-menu {

    opacity: 1;

    visibility: visible;

    transform: translateY(0);

}



.main-nav-desktop .sub-menu a,

.site-header .main-nav-desktop .nav-list .sub-menu a {

    padding: var(--space-sm) var(--space-md);

    font-size: 0.8125rem;

    border-radius: var(--radius-sm);

    color: var(--color-dark);

}

.main-nav-desktop .sub-menu a:hover,

.site-header .main-nav-desktop .nav-list .sub-menu a:hover {

    color: var(--color-primary);

    background: var(--color-primary-light);

}



/* Header CTA */

.header-cta {

    display: flex;

    align-items: center;

    gap: var(--space-md);

    flex-shrink: 0;

}



.header-phone {

    display: flex;

    align-items: center;

    gap: var(--space-xs);

    color: var(--color-gray-600);

    font-size: 0.875rem;

    font-weight: 500;

}



.header-phone:hover {

    color: var(--color-primary);

}



/* Mobile toggle */

.mobile-toggle {

    display: none;

    flex-direction: column;

    gap: 5px;

    background: none;

    border: none;

    cursor: pointer;

    padding: var(--space-sm);

}



.mobile-toggle span {

    display: block;

    width: 24px;

    height: 2px;

    background: var(--color-dark);

    transition: all var(--transition);

    transform-origin: center;

}



.mobile-toggle.is-active span:nth-child(1) {

    transform: translateY(7px) rotate(45deg);

}



.mobile-toggle.is-active span:nth-child(2) {

    opacity: 0;

}



.mobile-toggle.is-active span:nth-child(3) {

    transform: translateY(-7px) rotate(-45deg);

}



/* ─── Mobile Navigation ────────────────────────────────────── */

@media (max-width: 1024px) {

    .site-header {

        top: var(--space-sm);

        width: calc(100% - var(--space-lg));

        border-radius: var(--radius-lg);

    }



    .mobile-toggle { display: flex; }

    .main-nav-desktop { display: none; }



    .main-nav {

        display: flex;

        position: fixed;

        top: 0;

        left: 0;

        right: 0;

        bottom: 0;

        display: flex;

        flex-direction: column;

        background: rgba(17, 35, 55, 0.98);

        backdrop-filter: blur(20px);

        -webkit-backdrop-filter: blur(20px);

        padding: calc(var(--header-height) + var(--space-2xl)) var(--space-lg) var(--space-lg);

        transform: translateX(100%);

        transition: transform var(--transition-slow);

        overflow-y: auto;

        z-index: 998;

    }



    .main-nav.is-open {

        transform: translateX(0);

    }



    .main-nav .nav-list {

        flex-direction: column;

        gap: 0;

    }



    .main-nav .nav-list > li {

        border-bottom: 1px solid rgba(255, 255, 255, 0.08);

    }

    .main-nav .nav-list a {

        padding: var(--space-md);

        font-size: 1.125rem;

        color: rgba(255, 255, 255, 0.9);

    }



    .main-nav .nav-list .sub-menu {

        position: static;

        opacity: 0;

        visibility: hidden;

        max-height: 0;

        overflow: hidden;

        transform: none;

        box-shadow: none;

        padding: 0 0 0 var(--space-lg);

        transition: opacity 0.25s ease, max-height 0.3s ease;

    }

    .main-nav .nav-list .menu-item-has-children.sub-open > .sub-menu {

        opacity: 1;

        visibility: visible;

        max-height: 500px;

    }

    /* Chevron icon — CSS only, no SVG */
    .sub-menu-chevron {

        display: inline-block;

        width: 8px;

        height: 8px;

        border-right: 2px solid rgba(255, 255, 255, 0.7);

        border-bottom: 2px solid rgba(255, 255, 255, 0.7);

        transform: rotate(45deg);

        transition: transform 0.25s ease;

        flex-shrink: 0;

        margin-bottom: 3px;

    }

    .menu-item-has-children.sub-open > a .sub-menu-chevron {

        transform: rotate(-135deg);

        margin-bottom: -3px;

    }

    /* Parent link — flex to align chevron */
    .main-nav .nav-list .menu-item-has-children > a {

        display: flex;

        align-items: center;

        justify-content: space-between;

    }



    .header-cta { display: none; }



    .mobile-cta {

        display: block;

        margin-top: auto;

        padding-top: var(--space-xl);

    }

}



/* ─── Main Content ─────────────────────────────────────────── */

.site-main {

    padding-top: calc(var(--header-height) + var(--space-2xl));

    min-height: 60vh;

}



/* Homepage: hero extends behind the fixed navbar (main override is in components.css) */



/* ─── Footer ───────────────────────────────────────────────── */

.site-footer {

    background: var(--color-gray-900);

    color: var(--color-gray-400);

    padding: var(--space-3xl) 0 0;

}



.footer-inner {

    max-width: var(--container-max);

    margin: 0 auto;

    padding: 0 var(--space-lg);

}



.footer-grid {

    display: grid;

    grid-template-columns: 1.5fr 1fr 1fr 1.2fr;

    gap: var(--space-2xl);

    padding-bottom: var(--space-2xl);

}



@media (max-width: 768px) {

    .footer-grid {

        grid-template-columns: 1fr 1fr;

    }

}



@media (max-width: 480px) {

    .footer-grid {

        grid-template-columns: 1fr;

    }

}



.footer-logo img {

    height: 32px;

    width: auto;

    margin-bottom: var(--space-md);

    filter: brightness(10);

}



.footer-tagline {

    font-size: 0.875rem;

    margin-bottom: var(--space-md);

    color: var(--color-gray-400);

}



.footer-social {

    display: flex;

    gap: var(--space-md);

}



.footer-social a {

    color: var(--color-gray-500);

    font-size: 0.75rem;

    text-transform: uppercase;

    letter-spacing: 0.05em;

}



.footer-social a:hover {

    color: var(--color-white);

}



.footer-heading {

    color: var(--color-white);

    font-size: 0.875rem;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 0.1em;

    margin-bottom: var(--space-md);

}



.footer-links li {

    margin-bottom: var(--space-sm);

}



.footer-links a {

    color: var(--color-gray-400);

    font-size: 0.875rem;

}



.footer-links a:hover {

    color: var(--color-white);

}



.footer-insurance {

    margin-top: var(--space-lg);

}



.insurance-list {

    display: flex;

    flex-wrap: wrap;

    gap: var(--space-xs);

    margin-top: var(--space-sm);

}



.insurance-badge {

    font-size: 0.625rem;

    text-transform: uppercase;

    letter-spacing: 0.05em;

    padding: 3px 8px;

    background: var(--color-gray-800);

    border-radius: var(--radius-sm);

    color: var(--color-gray-400);

}



.footer-bottom {

    border-top: 1px solid var(--color-gray-800);

    padding: var(--space-lg) 0;

    display: flex;

    justify-content: space-between;

    align-items: center;

    font-size: 0.8125rem;

}



.footer-legal {

    display: flex;

    gap: var(--space-lg);

}



.footer-legal a {

    color: var(--color-gray-500);

    font-size: 0.8125rem;

}



.footer-legal a:hover {

    color: var(--color-white);

}



@media (max-width: 640px) {

    .footer-bottom {

        flex-direction: column;

        gap: var(--space-md);

        text-align: center;

    }

}



/* ─── Breadcrumbs ──────────────────────────────────────────── */

.breadcrumbs {

    padding: var(--space-md) 0;

}



.breadcrumbs ol {

    display: flex;

    flex-wrap: wrap;

    gap: var(--space-xs);

    font-size: 0.8125rem;

    color: var(--color-gray-500);

}



.breadcrumbs li::after {

    content: '/';

    margin-left: var(--space-xs);

    color: var(--color-gray-300);

}



.breadcrumbs li:last-child::after {

    display: none;

}



.breadcrumbs a {

    color: var(--color-gray-500);

}



.breadcrumbs a:hover {

    color: var(--color-primary);

}



.breadcrumbs [aria-current] {

    color: var(--color-gray-700);

    font-weight: 500;

}



/* ─── Norfolk Strip ─────────────────────────────────────────── */

.norfolk-strip {

    margin-top: var(--space-xl);

    background: #fff;

    border: 1px solid var(--color-border, #e5e7eb);

    border-radius: var(--radius, 8px);

    overflow: hidden;

    display: flex;

    align-items: stretch;

}

.norfolk-strip__img {

    width: 260px;

    flex-shrink: 0;

    overflow: hidden;

}

.norfolk-strip__img img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;

}

.norfolk-strip__body {

    padding: var(--space-lg) var(--space-xl);

    display: flex;

    align-items: center;

    gap: var(--space-xl);

    flex: 1;

    flex-wrap: wrap;

}

.norfolk-strip__text {

    flex: 1;

    min-width: 0;

}

.norfolk-strip__eyebrow {

    font-size: 0.75rem;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 0.08em;

    color: var(--color-primary, #10b5db);

    margin-bottom: var(--space-xs);

}

.norfolk-strip__title {

    font-size: 1.125rem;

    font-weight: 700;

    margin-bottom: var(--space-xs);

    color: var(--color-heading, #0f172a);

}

.norfolk-strip__desc {

    font-size: 0.875rem;

    color: var(--color-gray-500, #6b7280);

    margin: 0;

}

.norfolk-strip__cta {

    flex-shrink: 0;

    white-space: nowrap;

}

@media (max-width: 640px) {

    .norfolk-strip {

        flex-direction: column;

    }

    .norfolk-strip__img {

        width: 100%;

        height: 180px;

    }

    .norfolk-strip__body {

        padding: var(--space-md);

        gap: var(--space-md);

    }

    .norfolk-strip__cta {

        width: 100%;

        text-align: center;

    }

}

/* ─── Booking Modals ────────────────────────────────────────── */
.cpl-modal { display: none; position: fixed; inset: 0; z-index: 10000; align-items: center; justify-content: center; }
.cpl-modal.is-open { display: flex; }
.cpl-modal__overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.6); }
.cpl-modal__box { position: relative; background: #f6f6f6; border-radius: var(--radius-md); width: 90%; max-height: 90vh; overflow-y: auto; z-index: 1; }
.cpl-modal__box--sm { max-width: 420px; }
.cpl-modal__box--lg { max-width: 860px; }
.cpl-modal__close { position: absolute; top: 12px; right: 16px; font-size: 1.5rem; background: none; border: none; cursor: pointer; color: var(--color-gray-600); }
.cpl-modal__body { padding: var(--space-xl); }
.cpl-modal__body h2 { font-size: 1rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-gray-500); margin: var(--space-md) 0 var(--space-sm); }
.cpl-modal__body h2:first-child { margin-top: 0; }
.cpl-modal__body .btn { display: block; width: 100%; margin-bottom: var(--space-sm); }


/* Popup/slider plugin markup prints raw in the footer once its CSS is stripped — hide the containers outright on our routes. */
.hustle-ui,[id^="hustle-"],[class*="hustle_"],.pum,.pum-overlay,.pum-container,[id^="popmake-"],.rev_slider_wrapper,[id^="rev_slider"]{display:none !important}

/* Island CTA in Pilates blue (matches the brand teal gradient; replaces the navy). */
.cta-block{background:linear-gradient(120deg,#0d96b8,#10b5db) !important}
.cta-block::before{display:none !important}