/* ===================================================================
   MEGA GYM - Premium Fitness Website
   Color Scheme: White (#fff) / Black (#0a0a0a) / Yellow (#F5C518)
   Typography: Inter (body) + Oswald (display)
   =================================================================== */

/* --- Reset & Base --- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
    --white: #ffffff;
    --black: #0a0a0a;
    --yellow: #F5C518;
    --yellow-dark: #d4a80e;
    --gray-100: #f5f5f5;
    --gray-200: #e5e5e5;
    --gray-300: #d4d4d4;
    --gray-400: #a3a3a3;
    --gray-500: #737373;
    --gray-600: #525252;
    --gray-700: #404040;
    --gray-800: #262626;
    --gray-900: #171717;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-display: 'Montserrat', 'Helvetica Neue', sans-serif;
    --nav-height: 96px;
    --radius: 12px;
    --radius-sm: 8px;
    --radius-pill: 50px;
    --shadow-sm: 0 1px 3px rgba(0,0,0,.08);
    --shadow-md: 0 4px 20px rgba(0,0,0,.1);
    --shadow-lg: 0 8px 40px rgba(0,0,0,.12);
    --shadow-xl: 0 20px 60px rgba(0,0,0,.15);
    --transition: .3s cubic-bezier(.4,0,.2,1);
}

/* ===================================================================
   DARK MODE
   =================================================================== */
body.dark-mode {
    background: #0e0e0e;
    color: #e8e8e8;
}

/* Navbar */
body.dark-mode .navbar.scrolled {
    background: rgba(14, 14, 14, .92);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    box-shadow: 0 1px 0 rgba(255,255,255,.06);
}
body.dark-mode .navbar.scrolled .nav-links > li > a { color: #e8e8e8; }
body.dark-mode .navbar.scrolled .nav-toggle span { background: #e8e8e8; }
body.dark-mode .navbar.scrolled .lang-toggle { color: #999; border-color: #333; }
body.dark-mode .navbar.scrolled .lang-active { color: #e8e8e8; }
body.dark-mode .navbar.scrolled .theme-toggle { color: #e8e8e8; border-color: #333; }
body.dark-mode .navbar.scrolled .nav-cta { background: var(--yellow); color: #0e0e0e; }
body.dark-mode .nav-dropdown-menu { background: #1a1a1a; border: 1px solid #2a2a2a; }
body.dark-mode .nav-dropdown-menu a { color: #ccc !important; }
body.dark-mode .nav-dropdown-menu a:hover { background: #252525; color: var(--yellow) !important; }
@media (max-width: 768px) {
    body.dark-mode .nav-links { background: #0e0e0e; }
    body.dark-mode .nav-links a { color: #e8e8e8 !important; }
}

/* Sections & backgrounds */
body.dark-mode .section,
body.dark-mode .section-white,
body.dark-mode .section--white { background: #0e0e0e; color: #e8e8e8; }
body.dark-mode .section-gray,
body.dark-mode .section--gray,
body.dark-mode .social-proof { background: #141414; color: #e8e8e8; }
body.dark-mode .section-dark { background: #080808; }
body.dark-mode .marquee-banner { background: #141414; }
body.dark-mode .comparison-strip { background: #080808; }
body.dark-mode .video-section { background: #080808; }

/* Section text */
body.dark-mode .section-title { color: #f0f0f0; }
body.dark-mode .section-subtitle { color: #999; }
body.dark-mode .section-tag { color: var(--yellow); }
body.dark-mode .about-lead { color: #bbb; }
body.dark-mode .about-text p { color: #999; }

/* Cards */
body.dark-mode .service-card,
body.dark-mode .pricing-card,
body.dark-mode .transform-card,
body.dark-mode .location-card,
body.dark-mode .trainer-card,
body.dark-mode .directory-card,
body.dark-mode .why-card,
body.dark-mode .gym-type-card {
    background: #181818;
    border-color: #2a2a2a;
    color: #e8e8e8;
}
body.dark-mode .service-card h3,
body.dark-mode .location-card h3,
body.dark-mode .trainer-name,
body.dark-mode .transform-info h4,
body.dark-mode .directory-card h3,
body.dark-mode .gym-type-card h3,
body.dark-mode .gym-type-header h3 { color: #f0f0f0; }
body.dark-mode .service-card p,
body.dark-mode .location-address,
body.dark-mode .transform-info p,
body.dark-mode .trainer-role { color: #999; }
body.dark-mode .service-programs li { background: #252525; color: #ccc; }
body.dark-mode .pricing-card-featured { border-color: var(--yellow); box-shadow: 0 0 0 2px var(--yellow); }
body.dark-mode .pricing-card-price { color: #f0f0f0; }
body.dark-mode .pricing-card-title { color: #999; }
body.dark-mode .pricing-card-period { color: #777; }
body.dark-mode .pricing-card-features li { color: #bbb; border-color: #2a2a2a; }

/* Trainer section - FIX CONTRAST */
body.dark-mode .trainer-avatar { background: #252525; border-color: var(--yellow); }
body.dark-mode .trainer-specialty { color: var(--yellow); }

/* Gym type features */
body.dark-mode .gym-type-features li { color: #bbb; border-color: #2a2a2a; }

/* Location tags */
body.dark-mode .tag-fc { background: #252525; color: #ccc; }
body.dark-mode .tag-ex, body.dark-mode .loc-tags span.loc-exclusive {
    background: rgba(184,134,11,0.12);
    color: #c9a227;
    border-color: rgba(184,134,11,0.4);
}
body.dark-mode .tag-pl, body.dark-mode .loc-tags span.loc-pilates {
    background: rgba(216,128,192,0.1);
    color: #e8a0d0;
    border-color: rgba(216,128,192,0.3);
}
body.dark-mode .location-hours { color: #888; }

/* About section */
body.dark-mode .about-image img { border-radius: var(--radius); }
body.dark-mode .about-accent-card { background: var(--yellow); color: #0e0e0e; }
body.dark-mode .about-metric-number { color: var(--yellow); }
body.dark-mode .about-metric-unit { color: #e8e8e8; }
body.dark-mode .about-metric-desc { color: #888; }

/* Image strip */
body.dark-mode .image-strip-item img { filter: brightness(.9); }
body.dark-mode .image-strip-item:hover img { filter: brightness(1.05); }

/* Transforms */
body.dark-mode .transform-image-placeholder { background: linear-gradient(135deg, #1a1a1a, #252525); }
body.dark-mode .transform-tv { background: #141414; }

/* Social proof */
body.dark-mode .social-proof-icon { background: #252525; }
body.dark-mode .social-proof-num { color: #f0f0f0; }
body.dark-mode .social-proof-label { color: #888; }

/* Trial CTA - stays yellow */
body.dark-mode .trial-cta { background: var(--yellow); color: #0e0e0e; }
body.dark-mode .trial-cta h2,
body.dark-mode .trial-cta p { color: #0e0e0e; }
body.dark-mode .trial-cta .btn-dark { background: #0e0e0e; color: #f0f0f0; }
body.dark-mode .trial-cta .btn-dark-outline { border-color: #0e0e0e; color: #0e0e0e; }

/* Buttons */
body.dark-mode .btn-dark { background: var(--yellow); color: #0e0e0e; }
body.dark-mode .btn-dark:hover { background: #d4a80e; }
body.dark-mode .btn-primary { background: var(--yellow); color: #0e0e0e; }
body.dark-mode .btn-dark-outline,
body.dark-mode .btn-outline-dark { border-color: var(--yellow); color: var(--yellow); }
body.dark-mode .btn-dark-outline:hover,
body.dark-mode .btn-outline-dark:hover { background: var(--yellow); color: #0e0e0e; }
body.dark-mode .btn-outline { border-color: rgba(255,255,255,.3); color: #e8e8e8; }
body.dark-mode .btn-outline:hover { border-color: var(--yellow); color: var(--yellow); }
body.dark-mode .btn-yellow { background: var(--yellow); color: #0e0e0e; }
body.dark-mode .gym-type-card .btn-outline { border-color: var(--yellow); color: var(--yellow); }
body.dark-mode .gym-type-card .btn-outline:hover { background: var(--yellow); color: #0e0e0e; }
body.dark-mode .gym-type-card .btn-yellow { background: var(--yellow); color: #0e0e0e; }

/* FAQ */
body.dark-mode .faq-item { border-color: #2a2a2a; }
body.dark-mode .faq-question { color: #e8e8e8; }
body.dark-mode .faq-answer p { color: #999; }

/* Contact section */
body.dark-mode .contact-form-wrap { background: #141414 !important; border-color: #2a2a2a !important; }
body.dark-mode .contact-form label { color: #999 !important; }
body.dark-mode .contact-form input,
body.dark-mode .contact-form textarea { background: #1a1a1a; border-color: #2a2a2a; color: #e8e8e8; }
body.dark-mode .contact-item { color: #ccc; }
body.dark-mode .contact-item a { color: #ccc; }

/* Social buttons */
body.dark-mode .social-btn { color: #888; }
body.dark-mode .social-btn svg { fill: #888; }
body.dark-mode .social-btn:hover { color: var(--yellow); }
body.dark-mode .social-btn:hover svg { fill: var(--yellow); }

/* Footer */
body.dark-mode .footer { background: #080808; color: #999; }
body.dark-mode .footer h4 { color: #e8e8e8; }
body.dark-mode .footer a { color: #999; }
body.dark-mode .footer a:hover { color: var(--yellow); }
body.dark-mode .footer-bottom { border-color: #1a1a1a; }

/* Cookie banner */
body.dark-mode .cookie-banner { background: #1a1a1a; color: #ccc; }

/* FAB */
body.dark-mode .fab-toggle { background: var(--yellow); color: #0e0e0e; }

/* Comparison strip text */
body.dark-mode .comparison-other { color: #888; }
body.dark-mode .comparison-other-val { color: #666; }
body.dark-mode .comparison-vs { color: #555; }
body.dark-mode .comparison-mega-sub { color: #888; }

/* Breadcrumb */
body.dark-mode .breadcrumb { color: #888; }

/* Page hero variants */
body.dark-mode .page-hero { background: #080808; }
body.dark-mode .page-hero--dark { background: #080808; }
body.dark-mode .page-hero--yellow { background: var(--yellow); color: #0e0e0e; }
body.dark-mode .page-hero--yellow .page-hero__title,
body.dark-mode .page-hero--yellow .page-hero__subtitle { color: #0e0e0e; }
body.dark-mode .page-hero-title { color: #f0f0f0; }
body.dark-mode .page-hero-sub { color: #999; }

/* Preloader */
body.dark-mode .preloader { background: #0e0e0e; }

/* Pilates page: equipment cards */
body.dark-mode .equipment-card {
    background: #181818;
    border-color: #2a2a2a;
}
body.dark-mode .equipment-card__title,
body.dark-mode .equipment-card h3 { color: #f0f0f0; }
body.dark-mode .equipment-card__text,
body.dark-mode .equipment-card p { color: #999; }

/* Pilates page: benefit cards */
body.dark-mode .benefit-card {
    background: #181818;
    border-color: #2a2a2a;
}
body.dark-mode .benefit-card__title,
body.dark-mode .benefit-card h3 { color: #f0f0f0; }
body.dark-mode .benefit-card__text,
body.dark-mode .benefit-card p { color: #999; }

/* Pilates page: accessory items */
body.dark-mode .accessory-item {
    background: #181818;
    color: #e8e8e8;
    border-color: #2a2a2a;
}

/* Pilates page: intro split layout */
.pilates-intro-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: stretch;       /* both columns same height */
}
.pilates-intro-image {
    align-self: stretch;
    display: flex;
}
.section-header--left {
    text-align: left;
    margin-bottom: 20px;
}
.section-header--left .section-title {
    text-align: left;
    margin-bottom: 0;
}
.pilates-intro-text .intro-content {
    text-align: left;
}
.pilates-intro-text .intro-text {
    text-align: left;
    border-left: 3px solid var(--yellow);
    padding-left: 16px;
    margin-bottom: 28px;
    color: var(--gray-600);
}
.pilates-intro-image img {
    width: 100%;
    height: 100%;
    min-height: 460px;
    object-fit: cover;
    border-radius: var(--radius);
    display: block;
}

/* Pilates page: equipment slideshow */
.equipment-slideshow {
    position: relative;
    height: 520px;
    overflow: hidden;
}
/* Edge gradient masks — peek cards fade into darkness on the sides
   instead of showing awkward content/image cutoffs. */
.equipment-slideshow::before,
.equipment-slideshow::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 22%;
    z-index: 4;
    pointer-events: none;
}
.equipment-slideshow::before {
    left: 0;
    background: linear-gradient(to right,
        rgba(10, 10, 10, 0.7) 0%,
        rgba(10, 10, 10, 0.4) 50%,
        transparent 100%);
}
.equipment-slideshow::after {
    right: 0;
    background: linear-gradient(to left,
        rgba(10, 10, 10, 0.7) 0%,
        rgba(10, 10, 10, 0.4) 50%,
        transparent 100%);
}
.equip-slide {
    position: absolute;
    top: 0;
    left: 50%;
    width: 78%;
    height: 100%;
    display: flex;
    transform: translateX(-50%) scale(0.78);
    opacity: 0;
    pointer-events: none;
    border-radius: var(--radius);
    overflow: hidden;
    transition: transform 0.55s cubic-bezier(.4, 0, .2, 1),
                opacity 0.55s ease,
                box-shadow 0.55s ease;
    z-index: 1;
}
.equip-slide.active {
    transform: translateX(-50%) scale(1);
    opacity: 1;
    pointer-events: auto;
    z-index: 5;                      /* above edge gradients (z=4) */
    box-shadow: 0 24px 60px rgba(0, 0, 0, .55);
}
/* Peek cards: heavy blur + darken so content is unreadable but the
   card SHAPE (rounded corners, position, drop shadow) remains visible
   on both sides. Symmetric atmospheric "shadow cards" hinting that
   more slides exist. */
.equip-slide.is-prev,
.equip-slide.is-next {
    opacity: 0.65;
    pointer-events: auto;
    cursor: pointer;
    z-index: 2;
    filter: blur(14px) brightness(0.55) saturate(0.85);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .5);
    transition: transform 0.55s cubic-bezier(.4, 0, .2, 1),
                opacity 0.55s ease,
                filter 0.55s ease,
                box-shadow 0.55s ease;
}
/* Flip prev card horizontally so its image side faces the center —
   makes the left peek symmetric with the right peek (both show the
   image side, not the dark content stripe). The mirrored image is
   imperceptible under the heavy blur. */
.equip-slide.is-prev { transform: translateX(calc(-50% - 92%)) scale(0.82) scaleX(-1); }
.equip-slide.is-next { transform: translateX(calc(-50% + 92%)) scale(0.82); }
.equip-slide.is-prev:hover,
.equip-slide.is-next:hover {
    opacity: 0.95;
    filter: blur(8px) brightness(0.75) saturate(1);
}

/* Peek cards: hide text content so only the image is recognizable.
   The dark .equip-slide__content background stays visible (it's the
   element itself) but its children are invisible until the slide
   becomes active, then fade in. */
.equip-slide:not(.active) .equip-slide__content > * {
    opacity: 0;
    transition: opacity 0.3s ease;
}
.equip-slide.active .equip-slide__content > * {
    opacity: 1;
    transition: opacity 0.4s ease 0.25s;  /* fade in slightly after slide settles */
}
.equip-slide__img {
    width: 60%;
    flex-shrink: 0;
}
.equip-slide__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.equip-slide__content {
    width: 40%;
    background: #111;
    padding: 48px 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 16px;
}
.equip-slide__icon { line-height: 0; }
.equip-slide__title {
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #fff;
    letter-spacing: .04em;
}
.equip-slide__text {
    font-size: .95rem;
    color: #aaa;
    line-height: 1.7;
}
.equip-slide__counter {
    font-family: var(--font-display);
    font-size: .8rem;
    letter-spacing: .12em;
    color: var(--yellow);
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid #333;
}
.equip-prev, .equip-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: rgba(0,0,0,0.55);
    color: #fff;
    font-size: 1.1rem;
    cursor: pointer;
    z-index: 10;
    transition: background 0.2s, color 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.equip-prev { left: 14px; }
.equip-next { right: 14px; }
.equip-prev:hover, .equip-next:hover {
    background: var(--yellow);
    color: var(--black);
}
.equip-dots {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 10;
}
.equip-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,0.35);
    cursor: pointer;
    padding: 0;
    transition: background 0.2s, transform 0.2s;
}
.equip-dot.active {
    background: var(--yellow);
    transform: scale(1.25);
}

/* Pilates page: accessories showcase */
.accessories-showcase {
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    margin-top: 40px;
}
.accessories-showcase__img {
    width: 100%;
    height: 440px;
    object-fit: cover;
    object-position: bottom;
    display: block;
}
.accessories-showcase__overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.2) 60%, transparent 100%);
    padding: 48px 32px 28px;
}
.accessories-pills {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    overflow: hidden;
    justify-content: center;
}
.acc-pill {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(245,197,24,0.4);
    color: #fff;
    padding: 5px 13px;
    border-radius: 100px;
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: .02em;
    backdrop-filter: blur(6px);
    transition: background 0.2s, border-color 0.2s;
}
.acc-pill:hover {
    background: rgba(245,197,24,0.15);
    border-color: var(--yellow);
}

/* Pilates page: intro highlights */
body.dark-mode .intro-highlight-item {
    background: #181818;
}
body.dark-mode .intro-highlight-item:hover {
    box-shadow: 0 12px 32px rgba(0,0,0,0.4);
}
body.dark-mode .intro-highlight-item h3 { color: #f0f0f0; }
body.dark-mode .intro-highlight-item p { color: #999; }

/* Pilates page: group pilates (dark section) */
body.dark-mode .section--dark { background: #080808; color: #e8e8e8; }
body.dark-mode .group-pilates-lead { color: #f0f0f0; }
body.dark-mode .group-pilates-text { color: #999; }

/* Pilates page: experience badge */
body.dark-mode .experience-badge { background: #181818; border-color: #2a2a2a; }
body.dark-mode .experience-badge__text p { color: #999; }

/* Dokimastiki: trust signals */
body.dark-mode .trust-signal {
    background: #181818;
    color: #e8e8e8;
}
body.dark-mode .trust-signal__number { color: #f0f0f0; }
body.dark-mode .trust-signal__label { color: #999; }

/* Dokimastiki: trial form */
body.dark-mode .trial-form {
    background: #141414 !important;
    border-color: #2a2a2a !important;
    color: #e8e8e8;
}
body.dark-mode .trial-form__title,
body.dark-mode .trial-form h2 { color: #f0f0f0; }
body.dark-mode .trial-form__subtitle,
body.dark-mode .trial-form p { color: #999; }

/* ALL forms: inputs, selects, textareas */
body.dark-mode .form-group input,
body.dark-mode .form-group select,
body.dark-mode .form-group textarea,
body.dark-mode input[type="text"],
body.dark-mode input[type="email"],
body.dark-mode input[type="tel"],
body.dark-mode select,
body.dark-mode textarea {
    background: #1a1a1a !important;
    border-color: #2a2a2a !important;
    color: #e8e8e8 !important;
}
body.dark-mode .form-group label,
body.dark-mode label { color: #999 !important; }
body.dark-mode select option { background: #1a1a1a; color: #e8e8e8; }
body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder { color: #666 !important; }

/* Why card text (dokimastiki) */
body.dark-mode .why-card__title { color: #f0f0f0; }
body.dark-mode .why-card__text { color: #999; }
body.dark-mode .why-card__icon svg { stroke: var(--yellow); }

/* Directory cards (gymnastiria, epikoinonia) */
body.dark-mode .dir-address { color: #999; }
body.dark-mode .dir-phone a { color: var(--yellow); }
body.dark-mode .loc-badge { background: var(--yellow); color: #0e0e0e; }
body.dark-mode .loc-tags span { background: #252525; color: #ccc; }
body.dark-mode .directory-featured { border-color: var(--yellow); }

/* Section yellow (gymnastiria CTA, pilates CTA) */
body.dark-mode .section-yellow,
body.dark-mode .section--yellow {
    background: var(--yellow);
    color: #0e0e0e;
}
body.dark-mode .section-yellow h2,
body.dark-mode .section--yellow h2,
body.dark-mode .section-yellow p,
body.dark-mode .section--yellow p { color: #0e0e0e; }

/* Proponisi: program cards */
body.dark-mode .program-card {
    background: #181818;
    border-color: #2a2a2a;
}
body.dark-mode .program-card h3 { color: #f0f0f0; }
body.dark-mode .program-card p { color: #999; }
body.dark-mode .program-num { color: #333; }
body.dark-mode .program-list li { color: #bbb; border-color: #2a2a2a; }
body.dark-mode .program-price-tag { background: rgba(245,197,24,.15); color: var(--yellow); }

/* Proponisi: intro section */
body.dark-mode .lead { color: #bbb; }
body.dark-mode .body-text { color: #999; }
body.dark-mode .intro-wrap { color: #e8e8e8; }

/* Proponisi: CTA section */
body.dark-mode .cta-desc { color: #999; }

/* Proponisi: service link cards */
body.dark-mode .service-link-card {
    background: #181818;
    border-color: #2a2a2a;
}
body.dark-mode .service-link-card h3 { color: #f0f0f0; }
body.dark-mode .service-link-card p { color: #999; }

/* Personal training: all PT-specific cards */
body.dark-mode .pt-option { background: #181818; border-color: #2a2a2a; }
body.dark-mode .pt-option-title { color: #f0f0f0; }
body.dark-mode .pt-desc { color: #999; }
body.dark-mode .pt-feature-card { background: #141414; border-color: #2a2a2a; }
body.dark-mode .pt-feature-title { color: #f0f0f0; }
body.dark-mode .pt-feature-desc { color: #999; }
body.dark-mode .pt-result-card { background: #181818; border-color: #2a2a2a; }
body.dark-mode .pt-result-card:hover { border-color: var(--yellow); }
body.dark-mode .pt-result-card--dark { background: #141414; }
body.dark-mode .pt-card-name { color: #f0f0f0; }
body.dark-mode .pt-card-sub { color: #999; }
body.dark-mode .pt-card-text { color: #888; }
body.dark-mode .pt-callout { background: linear-gradient(135deg, #2a2200, #1a1500); }
body.dark-mode .pt-callout-title { color: #f0f0f0; }
body.dark-mode .pt-callout-desc { color: #999; }
body.dark-mode .pt-celeb-card { background: #181818; border-color: #2a2a2a; }
body.dark-mode .pt-section-desc { color: #999; }
body.dark-mode .pt-stat-text { color: #bbb; }
body.dark-mode .pt-location-tag { background: #252525; color: #ccc; }
body.dark-mode .pt-program-tag { background: rgba(245,197,24,.15); color: var(--yellow); }

/* Epikoinonia: contact form */
body.dark-mode .contact-section { background: #0e0e0e; }
body.dark-mode .contact-section .section-desc { color: #999; }

/* Epikoinonia: career section */
body.dark-mode .career-section { background: #0e0e0e; }
body.dark-mode .career-section .section-desc { color: #999; }

/* Epikoinonia: CTA section */
body.dark-mode .cta-section { background: #0e0e0e; }

/* Map popup text (inline styles in JS) - override with attribute selectors */
body.dark-mode .leaflet-popup-content-wrapper { background: #1a1a1a !important; color: #e8e8e8 !important; }
body.dark-mode .leaflet-popup-tip { background: #1a1a1a !important; }

/* Theme toggle button */
.theme-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.2);
    color: rgba(255,255,255,.7);
    cursor: pointer;
    transition: all var(--transition);
    background: none;
}
.theme-toggle:hover { border-color: var(--yellow); color: var(--yellow); }
.navbar.scrolled .theme-toggle { color: var(--gray-600); border-color: var(--gray-300); }
.navbar.scrolled .theme-toggle:hover { color: var(--yellow); border-color: var(--yellow); }

html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-y: scroll; /* always reserves scrollbar space — prevents layout shift on mode/lang toggle */
}

/* Hide scrollbar visually while keeping overflow-y:scroll to prevent layout shift */
html::-webkit-scrollbar { width: 0; background: transparent; }
html { scrollbar-width: none; }

body {
    font-family: var(--font-body);
    color: var(--black);
    line-height: 1.6;
    overflow-x: hidden;
    background: var(--white);
}

a { text-decoration: none; color: inherit; transition: color var(--transition); }
ul { list-style: none; }
img { max-width: 100%; display: block; }
button, input, select, textarea {
    font-family: inherit; font-size: inherit;
    border: none; outline: none; background: none;
}

/* Focus & keyboard accessibility */
:focus-visible {
    outline: 2px solid var(--yellow);
    outline-offset: 3px;
    border-radius: 2px;
}
a:focus-visible, button:focus-visible {
    outline: 2px solid var(--yellow);
    outline-offset: 3px;
}
input:focus-visible, textarea:focus-visible, select:focus-visible {
    outline: 2px solid var(--yellow);
    outline-offset: 0;
    border-color: var(--yellow) !important;
}
/* Skip-to-content (screen reader utility) */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.text-white { color: var(--white) !important; }
.text-gray { color: var(--gray-500); }


/* ===================================================================
   PRELOADER
   =================================================================== */
.preloader {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity .6s ease, visibility .6s ease;
}

.preloader.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* Track — the logo travels left→right and pulls the yellow fill behind it */
.preloader-track {
    position: relative;
    width: 280px;
    height: 48px;
    margin: 0 auto;
}
.preloader-track::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 2px;
    background: var(--gray-200);
    border-radius: 2px;
    transform: translateY(-50%);
}

.preloader-fill {
    position: absolute;
    left: 0;
    top: 50%;
    height: 2px;
    width: 0;
    background: var(--yellow);
    border-radius: 2px;
    transform: translateY(-50%);
    animation: preloaderFill 1.8s cubic-bezier(.45, 0, .25, 1) forwards;
}

.preloader-logo-img {
    position: absolute;
    top: 50%;
    left: 0;
    height: 44px;
    width: auto;
    object-fit: contain;
    transform: translateY(-50%);
    animation: preloaderLogoTravel 1.8s cubic-bezier(.45, 0, .25, 1) forwards;
}

@keyframes preloaderFill {
    0%   { width: 0; }
    100% { width: calc(100% - 44px); }
}
@keyframes preloaderLogoTravel {
    0%   { left: 0; }
    100% { left: calc(100% - 44px); }
}


/* ===================================================================
   NAVBAR
   =================================================================== */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    height: var(--nav-height);
    display: flex;
    align-items: center;
    transition: background var(--transition), box-shadow var(--transition),
                backdrop-filter var(--transition);
}

.navbar.scrolled {
    background: rgba(255, 255, 255, .95);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    box-shadow: 0 1px 0 rgba(0, 0, 0, .06);
}

.nav-container {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.nav-logo {
    display: flex;
    align-items: center;
    z-index: 1001;
}

.nav-logo-img {
    height: 56px;
    width: auto;
    object-fit: contain;
    border-radius: 8px;
}

/* Nav Links */
.nav-links {
    display: flex;
    align-items: center;
    gap: 32px;
}

.nav-links a {
    font-size: .85rem;
    font-weight: 500;
    color: var(--white);
    position: relative;
    letter-spacing: .01em;
    transition: color var(--transition);
}

.navbar.scrolled .nav-links a { color: var(--black); }

/* Nav Dropdown */
.nav-dropdown {
    position: relative;
}
.nav-dropdown-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
}
.nav-dropdown-toggle svg {
    transition: transform var(--transition);
}
.nav-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    min-width: 200px;
    background: var(--white);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg);
    padding: 8px 0;
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition);
    z-index: 1002;
}
/* Hover-trigger ONLY on mouse-driven devices. Touch devices get sticky
   :hover after a tap (the menu would float over the page until tapped
   elsewhere), so they go through the JS click toggle instead. */
@media (hover: hover) and (pointer: fine) {
    .nav-dropdown:hover .nav-dropdown-toggle svg {
        transform: rotate(180deg);
    }
    .nav-dropdown:hover .nav-dropdown-menu {
        opacity: 1;
        visibility: visible;
        transform: translateX(-50%) translateY(0);
    }
}
/* Click-toggle state — works on every device, used by touch UIs. */
.nav-dropdown.is-open .nav-dropdown-toggle svg {
    transform: rotate(180deg);
}
.nav-dropdown.is-open .nav-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}
.nav-dropdown-menu li {
    list-style: none;
}
.nav-dropdown-menu a {
    display: block;
    padding: 10px 20px;
    font-size: .85rem !important;
    font-weight: 500;
    color: var(--black) !important;
    transition: background var(--transition);
    white-space: nowrap;
}
.nav-dropdown-menu a::after {
    display: none !important;
}
.nav-dropdown-menu a:hover {
    background: var(--gray-100);
    color: var(--yellow-dark) !important;
}

.nav-links a::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--yellow);
    transition: width var(--transition);
}

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

.nav-links a.active { color: var(--yellow) !important; }

/* Nav Right */
.nav-right {
    display: flex;
    align-items: center;
    gap: 16px;
}

.lang-toggle {
    font-size: .78rem;
    font-weight: 500;
    color: rgba(255, 255, 255, .7);
    cursor: pointer;
    padding: 6px 14px;
    border-radius: var(--radius-pill);
    border: 1px solid rgba(255, 255, 255, .2);
    transition: all var(--transition);
    letter-spacing: .03em;
    white-space: nowrap;
}

.navbar.scrolled .lang-toggle {
    color: var(--gray-600);
    border-color: var(--gray-300);
}

.lang-toggle:hover { border-color: var(--yellow); }

.lang-active {
    color: var(--white);
    font-weight: 700;
}

.navbar.scrolled .lang-active { color: var(--black); }

.nav-cta {
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .04em;
    padding: 10px 24px;
    border-radius: var(--radius-pill);
    background: var(--yellow);
    color: var(--black);
    transition: all var(--transition);
    text-transform: uppercase;
    white-space: nowrap;
    min-width: 190px;
    text-align: center;
}

.nav-cta:hover {
    background: var(--yellow-dark);
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(245, 197, 24, .35);
}

/* Hamburger */
.nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    width: 28px;
    height: 28px;
    cursor: pointer;
    gap: 5px;
    z-index: 1001;
}

.nav-toggle span {
    display: block;
    height: 2px;
    width: 100%;
    background: var(--white);
    border-radius: 2px;
    transition: all var(--transition);
    transform-origin: center;
}

.navbar.scrolled .nav-toggle span { background: var(--black); }

.nav-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.nav-toggle.active span:nth-child(2) { opacity: 0; }

.nav-toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
}


/* ===================================================================
   HERO SECTION
   =================================================================== */
.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--black);
    overflow: hidden;
}

/* Hero slideshow */
.hero-slideshow {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.hero-slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
    image-rendering: auto;
    -webkit-image-rendering: auto;
    transform: scale(1.02);
    filter: contrast(1.05) brightness(0.95);
}
.hero-slide.active {
    opacity: 1;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at center, transparent 40%, rgba(10, 10, 10, .4) 100%),
        linear-gradient(180deg, rgba(10, 10, 10, .55) 0%, rgba(10, 10, 10, .75) 50%, rgba(10, 10, 10, .92) 100%);
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 820px;
    padding: 48px 48px 56px;
    background: rgba(10, 10, 10, .45);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-radius: var(--radius);
    border: 1px solid rgba(255, 255, 255, .06);
}

/* Hero Badge */
.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 22px;
    border-radius: var(--radius-pill);
    background: rgba(245, 197, 24, .1);
    border: 1px solid rgba(245, 197, 24, .25);
    font-size: .78rem;
    font-weight: 500;
    color: var(--yellow);
    letter-spacing: .05em;
    text-transform: uppercase;
    margin-bottom: 28px;
}

.badge-pulse {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--yellow);
    animation: badgePulse 2s ease-in-out infinite;
}

@keyframes badgePulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: .4; transform: scale(1.5); }
}

/* Hero Title */
.hero-title {
    font-family: var(--font-display);
    text-transform: uppercase;
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 24px;
    color: var(--white);
    font-size: clamp(1.8rem, 4vw, 3rem);
    letter-spacing: .04em;
}

.hero-line-1 {
    display: block;
    font-size: clamp(2.8rem, 7vw, 5.2rem);
    color: var(--white);
    letter-spacing: .04em;
}

.hero-line-2 {
    display: block;
    font-size: clamp(2.8rem, 7vw, 5.2rem);
    color: var(--yellow);
    letter-spacing: .04em;
}

.hero-subtitle {
    font-size: clamp(.95rem, 1.2vw, 1.1rem);
    color: rgba(255, 255, 255, .6);
    max-width: 600px;
    margin: 0 auto 40px;
    line-height: 1.75;
    font-weight: 300;
}

/* Hero Actions */
.hero-actions {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 60px;
}

/* Hero Stats */
.hero-stats {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 44px;
}

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

.stat-num {
    display: inline-block;
    font-family: var(--font-display);
    text-transform: uppercase;
    font-weight: 600;
    font-size: 2.8rem;
    color: var(--white);
    line-height: 1;
}

.stat-plus {
    font-family: var(--font-display);
    text-transform: uppercase;
    font-weight: 600;
    font-size: 2rem;
    color: var(--yellow);
    vertical-align: top;
}

.stat-text {
    display: block;
    font-size: .72rem;
    color: rgba(255, 255, 255, .45);
    text-transform: uppercase;
    letter-spacing: .1em;
    margin-top: 6px;
}

.stat-sep {
    width: 1px;
    height: 40px;
    background: rgba(255, 255, 255, .12);
}

/* Scroll Indicator */
.hero-scroll-indicator {
    position: absolute;
    bottom: 36px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.hero-scroll-indicator span {
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .18em;
    color: rgba(255, 255, 255, .35);
}

.scroll-line {
    width: 1px;
    height: 44px;
    background: rgba(255, 255, 255, .12);
    position: relative;
    overflow: hidden;
}

.scroll-line::after {
    content: '';
    position: absolute;
    top: -100%;
    left: 0;
    width: 100%;
    height: 50%;
    background: var(--yellow);
    animation: scrollLine 2s ease-in-out infinite;
}

@keyframes scrollLine {
    0%   { top: -50%; }
    100% { top: 150%; }
}


/* ===================================================================
   MARQUEE BANNER
   =================================================================== */
.marquee-banner {
    background: var(--yellow);
    overflow: hidden;
    padding: 14px 0;
    position: relative;
}

.marquee-track {
    display: flex;
    align-items: center;
    gap: 0;
    animation: marqueeScroll 25s linear infinite;
    white-space: nowrap;
    width: max-content;
}

.marquee-track span {
    font-family: var(--font-display);
    text-transform: uppercase;
    font-weight: 600;
    font-size: 1.1rem;
    letter-spacing: .14em;
    color: var(--black);
    padding: 0 22px;
}

.marquee-dot {
    width: 6px !important;
    height: 6px;
    border-radius: 50%;
    background: var(--black);
    display: inline-block;
    flex-shrink: 0;
    padding: 0 !important;
}

@keyframes marqueeScroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}


/* ===================================================================
   SECTIONS - General
   =================================================================== */
.section { padding: 100px 0; }
.section-white { background: var(--white); color: var(--black); }
.section-black { background: var(--black); color: var(--white); }
.section-yellow { background: var(--yellow); color: var(--black); }

.section-header { margin-bottom: 56px; text-align: center; }
.section-header.center { text-align: center; }

.section-title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4vw, 3.2rem);
    font-weight: 700;
    letter-spacing: .04em;
    line-height: 1.1;
    margin-top: 10px;
    text-transform: uppercase;
}

.section-desc {
    color: var(--gray-500);
    max-width: 520px;
    margin: 12px auto 0;
    font-size: .95rem;
    line-height: 1.6;
}

.tag {
    display: inline-block;
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--yellow);
}

.tag-light { color: var(--yellow); }


/* ===================================================================
   ABOUT SECTION
   =================================================================== */
.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 72px;
    align-items: center;
}

.about-left .section-title { margin-bottom: 24px; }

.lead {
    font-size: 1.05rem;
    font-weight: 500;
    color: var(--gray-700);
    margin-bottom: 16px;
    line-height: 1.75;
}

.body-text {
    font-size: .95rem;
    color: var(--gray-500);
    line-height: 1.8;
    margin-bottom: 36px;
}

.about-metrics { display: flex; gap: 48px; }

.metric { display: flex; flex-direction: column; }

.metric-num {
    font-family: var(--font-display);
    text-transform: uppercase;
    font-weight: 600;
    font-size: 3.2rem;
    color: var(--yellow);
    line-height: 1;
}

.metric-unit {
    font-size: .85rem;
    font-weight: 700;
    color: var(--black);
    text-transform: uppercase;
    letter-spacing: .06em;
}

.metric-label {
    font-size: .8rem;
    color: var(--gray-500);
    margin-top: 2px;
}

/* About Right - Image */
.about-right { position: relative; }

.about-img-wrapper {
    position: relative;
    border-radius: var(--radius);
    overflow: visible;
}

.about-img {
    width: 100%;
    height: 520px;
    object-fit: cover;
    border-radius: var(--radius);
}

.about-accent-card {
    position: absolute;
    bottom: -28px;
    left: -28px;
    background: var(--yellow);
    padding: 28px 32px;
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    z-index: 2;
}

.accent-number {
    display: block;
    font-family: var(--font-display);
    text-transform: uppercase;
    font-weight: 600;
    font-size: 2.8rem;
    line-height: 1;
    color: var(--black);
}

.accent-text {
    font-size: .78rem;
    font-weight: 600;
    color: var(--black);
    text-transform: uppercase;
    letter-spacing: .05em;
    line-height: 1.3;
}


/* ===================================================================
   GYM TYPES SECTION
   =================================================================== */
.gym-types-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
}

.gym-type-card {
    background: var(--white);
    border-radius: var(--radius);
    padding: 44px 40px;
    transition: transform var(--transition), box-shadow var(--transition);
    position: relative;
    overflow: hidden;
    /* Flex column so we can equalize rows + push button to bottom */
    display: flex;
    flex-direction: column;
}
/* Symmetric row alignment between Fitness Club and EXCLUSIVE cards */
.gym-type-card .gym-type-badge { align-self: flex-start; }
.gym-type-card h3 { min-height: 2.4em; }                /* matches 1- and 2-line titles */
.gym-type-card .exclusive-sub { min-height: 1.6em; }     /* present on both via placeholder on card 1 */
.gym-type-card > p:not(.exclusive-sub) {
    min-height: 7em;                                     /* equal description block */
    flex: 1 1 auto;
}
.gym-type-card .gym-features { margin-bottom: 24px; }
.gym-type-card > .btn,
.gym-type-card > a.btn { margin-top: auto; align-self: flex-start; }
/* Invisible placeholder mirrors .exclusive-sub height on the FC card */
.exclusive-sub--placeholder { visibility: hidden; }

.gym-type-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-xl);
}

.gym-type-badge {
    display: inline-block;
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    padding: 6px 16px;
    border-radius: var(--radius-pill);
    background: var(--gray-100);
    color: var(--gray-700);
    margin-bottom: 22px;
}

/* EXCLUSIVE big badge — match the gold-tint chip style used on the
   directory cards above (.loc-tags span.loc-exclusive) */
.badge-exclusive {
    background: rgba(184, 134, 11, 0.08) !important;
    color: #9a6c00 !important;
    border: 1px solid rgba(184, 134, 11, 0.35);
}
body.dark-mode .badge-exclusive {
    background: rgba(184, 134, 11, 0.12) !important;
    color: #c9a227 !important;
    border-color: rgba(184, 134, 11, 0.4);
}

.gym-type-card h3 {
    font-family: var(--font-display);
    text-transform: uppercase;
    font-weight: 600;
    font-size: 1.9rem;
    letter-spacing: .04em;
    margin-bottom: 8px;
    color: var(--black);
}

.exclusive-sub {
    font-size: .85rem;
    color: var(--gray-500);
    margin-bottom: 14px;
    font-weight: 500;
}

.gym-type-card > p:not(.exclusive-sub) {
    font-size: .9rem;
    color: var(--gray-600);
    line-height: 1.7;
    margin-bottom: 28px;
}

.gym-features {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 36px;
}

.gym-features li {
    font-size: .9rem;
    color: var(--gray-700);
    padding-left: 26px;
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
}

.gym-features li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--yellow);
}

.free-badge {
    font-size: .58rem;
    font-weight: 700;
    text-transform: uppercase;
    padding: 2px 9px;
    border-radius: var(--radius-pill);
    background: rgba(245, 197, 24, .15);
    color: var(--yellow-dark);
    letter-spacing: .06em;
}

/* Exclusive card border + glow */
.gym-type-exclusive {
    border: 2px solid var(--yellow);
}

.gym-type-exclusive::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 160px;
    height: 160px;
    background: radial-gradient(
        circle at top right,
        rgba(245, 197, 24, .1) 0%,
        transparent 70%
    );
    pointer-events: none;
}


/* ===================================================================
   PROGRAMS SECTION
   =================================================================== */
.programs-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

.program-card {
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    padding: 40px 34px;
    transition: transform var(--transition), box-shadow var(--transition),
                border-color var(--transition);
}

.program-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
    border-color: var(--yellow);
}

.program-num {
    font-family: var(--font-display);
    text-transform: uppercase;
    font-weight: 600;
    font-size: 3.2rem;
    color: var(--gray-200);
    line-height: 1;
    margin-bottom: 18px;
}

.program-card:hover .program-num { color: var(--yellow); }

.program-card h3 {
    font-family: var(--font-display);
    text-transform: uppercase;
    font-weight: 600;
    font-size: 1.5rem;
    letter-spacing: .04em;
    margin-bottom: 14px;
}

.program-price-tag {
    display: inline-block;
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    padding: 6px 18px;
    border-radius: var(--radius-pill);
    background: var(--yellow);
    color: var(--black);
    margin-bottom: 18px;
}

.program-price-tag.tag-exclusive {
    background: var(--black);
    color: var(--yellow);
}

.program-price-tag.tag-pilates {
    background: rgba(245,197,24,.12);
    color: var(--yellow-dark);
}

.program-card p {
    font-size: .9rem;
    color: var(--gray-600);
    line-height: 1.7;
    margin-bottom: 24px;
}

.program-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.program-list span {
    font-size: .68rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: 5px 13px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--gray-200);
    color: var(--gray-600);
    transition: all var(--transition);
}

.program-card:hover .program-list span {
    border-color: rgba(245, 197, 24, .4);
    color: var(--gray-700);
}


/* ===================================================================
   IMAGE STRIP
   =================================================================== */
.image-strip {
    display: block;
    overflow: hidden;
}

.strip-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: filter var(--transition);
}

.strip-img:hover {
    filter: brightness(1.1);
}


/* ===================================================================
   TRANSFORMATIONS
   =================================================================== */
.trans-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    margin-bottom: 48px;
}

.trans-card {
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    overflow: hidden;
    transition: transform var(--transition), box-shadow var(--transition);
    background: var(--white);
}

.trans-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
}

.trans-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
    background: var(--gray-100);
}

.trans-duration {
    font-family: var(--font-display);
    text-transform: uppercase;
    font-weight: 600;
    font-size: 1.6rem;
    letter-spacing: .04em;
    color: var(--black);
}

.trans-type {
    font-size: .62rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--gray-500);
    text-align: right;
}

.trans-body {
    padding: 36px 24px;
    text-align: center;
}

.trans-placeholder {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: var(--gray-100);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 18px;
    color: var(--gray-400);
}

.trans-body p {
    font-size: .9rem;
    color: var(--gray-600);
    line-height: 1.6;
}

/* TV Badge */
.trans-tv {
    text-align: center;
    padding: 36px;
    background: var(--gray-100);
    border-radius: var(--radius);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.tv-badge {
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--yellow-dark);
    padding: 5px 16px;
    border: 1.5px solid var(--yellow);
    border-radius: var(--radius-pill);
}

.trans-tv p {
    font-size: .85rem;
    color: var(--gray-500);
}


/* ===================================================================
   TRIAL CTA
   =================================================================== */
.trial { text-align: center; }

.trial-content h2 {
    font-family: var(--font-display);
    text-transform: uppercase;
    font-weight: 600;
    font-size: clamp(2.5rem, 5vw, 3.8rem);
    letter-spacing: .04em;
    margin-bottom: 16px;
}

.trial-content p {
    font-size: 1.05rem;
    max-width: 560px;
    margin: 0 auto 36px;
    color: rgba(0, 0, 0, .65);
    line-height: 1.75;
}

.trial-actions {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}


/* ===================================================================
   LOCATIONS
   =================================================================== */
.locations-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.loc-card {
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    padding: 30px 26px;
    transition: transform var(--transition), box-shadow var(--transition),
                border-color var(--transition);
    position: relative;
}

.loc-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: var(--yellow);
}

.loc-featured {
    grid-column: span 2;
    border-color: var(--yellow);
    background: linear-gradient(
        135deg,
        rgba(245, 197, 24, .04) 0%,
        transparent 60%
    );
}

.loc-badge {
    position: absolute;
    top: 18px;
    right: 18px;
    font-size: .62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    padding: 5px 14px;
    border-radius: var(--radius-pill);
    background: var(--yellow);
    color: var(--black);
}

.loc-card h3 {
    font-family: var(--font-display);
    text-transform: uppercase;
    font-weight: 600;
    font-size: 1.3rem;
    letter-spacing: .04em;
    margin-bottom: 18px;
}

.loc-info {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 18px;
}

.loc-row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: .85rem;
    color: var(--gray-600);
}

.loc-row svg {
    flex-shrink: 0;
    color: var(--gray-400);
}

.loc-row a {
    color: var(--gray-600);
    transition: color var(--transition);
}

.loc-row a:hover { color: var(--yellow); }

.loc-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.dir-card-body .loc-tags {
    margin-top: auto;
    padding-top: 12px;
}

.loc-tags span {
    font-size: .62rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: 5px 12px;
    border-radius: var(--radius-pill);
    background: var(--gray-100);
    color: var(--gray-600);
    transition: all var(--transition);
}

.loc-card:hover .loc-tags span {
    background: rgba(245, 197, 24, .1);
    color: var(--yellow-dark);
}


/* ===================================================================
   CONTACT
   =================================================================== */
.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 72px;
    align-items: start;
}

.contact-info .section-title { margin-bottom: 18px; }
.contact-info .text-gray { margin-bottom: 36px; line-height: 1.75; }

.contact-items {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-bottom: 36px;
}

.contact-row {
    display: flex;
    align-items: center;
    gap: 14px;
}

.contact-row a,
.contact-row span { font-size: .95rem; }
.contact-row a:hover { color: var(--yellow) !important; }

.social-row { display: flex; gap: 12px; margin-top: 24px; }

.social-btn {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--gray-800);
    color: rgba(255, 255, 255, .55);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition);
}

.social-btn:hover {
    background: var(--yellow);
    color: var(--black);
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(245, 197, 24, .3);
}

/* Contact Form */
.contact-form .form-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.contact-form label {
    font-size: .82rem;
    font-weight: 500;
    color: var(--white);
}
.contact-form-wrap {
    background: var(--gray-900);
    border-radius: var(--radius);
    padding: 44px;
    border: 1px solid var(--gray-800);
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.form-row input,
.form-row select,
.form-row textarea {
    width: 100%;
    padding: 15px 18px;
    border-radius: var(--radius-sm);
    background: var(--gray-800);
    color: var(--white);
    font-size: .9rem;
    border: 1px solid transparent;
    transition: border-color var(--transition), background var(--transition);
}

.form-row input::placeholder,
.form-row textarea::placeholder {
    color: var(--gray-500);
}

.form-row select { color: var(--gray-500); }
.form-row select option { background: var(--gray-800); color: var(--white); }

.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus {
    border-color: var(--yellow);
    background: rgba(38, 38, 38, .8);
}

.form-row textarea {
    resize: vertical;
    min-height: 88px;
}


/* ===================================================================
   BUTTONS
   =================================================================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .83rem;
    font-weight: 600;
    letter-spacing: .04em;
    padding: 14px 34px;
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: all var(--transition);
    text-transform: uppercase;
    white-space: nowrap;
    position: relative;
    overflow: hidden;
}

.btn-primary {
    background: var(--yellow);
    color: var(--black);
}

.btn-primary:hover {
    background: var(--yellow-dark);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(245, 197, 24, .35);
}

.btn-outline-light {
    background: transparent;
    color: var(--white);
    border: 1px solid rgba(255, 255, 255, .3);
}

.btn-outline-light:hover {
    border-color: var(--white);
    background: rgba(255, 255, 255, .08);
    transform: translateY(-2px);
}

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

.btn-dark:hover {
    background: var(--gray-800);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.btn-outline-dark {
    background: transparent;
    color: var(--black);
    border: 1px solid rgba(0, 0, 0, .3);
}

.btn-outline-dark:hover {
    border-color: var(--black);
    background: rgba(0, 0, 0, .06);
    transform: translateY(-2px);
}

.btn-full { width: 100%; }


/* ===================================================================
   FOOTER
   =================================================================== */
.footer {
    background: var(--black);
    color: var(--white);
    padding: 80px 0 0;
}

.footer-top {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1fr;
    gap: 48px;
    padding-bottom: 56px;
    border-bottom: 1px solid var(--gray-800);
}

.footer-logo-img {
    height: 36px;
    width: auto;
    object-fit: contain;
    margin-bottom: 18px;
    border-radius: 8px;
}

.footer-brand p {
    font-size: .85rem;
    color: var(--gray-500);
    line-height: 1.75;
    max-width: 280px;
}

.footer-col h4 {
    font-family: var(--font-display);
    text-transform: uppercase;
    font-weight: 600;
    font-size: 1.15rem;
    letter-spacing: .06em;
    margin-bottom: 22px;
    color: var(--white);
}

.footer-col ul {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.footer-col a,
.footer-col span {
    font-size: .85rem;
    color: var(--gray-500);
    transition: color var(--transition);
}

.footer-col a:hover { color: var(--yellow); }

.footer-bottom {
    padding: 28px 0;
    text-align: center;
}

.footer-bottom p {
    font-size: .78rem;
    color: var(--gray-600);
}


/* ===================================================================
   SCROLL ANIMATIONS
   =================================================================== */
[data-animate] {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity .7s cubic-bezier(.4, 0, .2, 1),
                transform .7s cubic-bezier(.4, 0, .2, 1);
}

[data-animate="fade-left"] {
    transform: translateX(50px);
}

[data-animate].animated {
    opacity: 1;
    transform: translate(0, 0);
}


/* ===================================================================
   FORM SUCCESS MESSAGE
   =================================================================== */
.form-success {
    text-align: center;
    padding: 44px 24px;
}

.form-success svg { margin-bottom: 18px; }

.form-success h3 {
    font-family: var(--font-display);
    text-transform: uppercase;
    font-weight: 600;
    font-size: 1.6rem;
    letter-spacing: .04em;
    color: var(--yellow);
    margin-bottom: 8px;
}

.form-success p {
    font-size: .9rem;
    color: var(--gray-500);
}


/* ===================================================================
   RESPONSIVE - 1200px
   =================================================================== */
@media (max-width: 1200px) {
    .about-grid { gap: 48px; }
    .contact-grid { gap: 48px; }
}

/* ===================================================================
   RESPONSIVE - 1024px
   =================================================================== */
@media (max-width: 1024px) {
    .about-grid { gap: 48px; }
    .contact-grid { gap: 48px; }
    .footer-top { grid-template-columns: 1fr 1fr; gap: 36px; }
    .locations-grid { grid-template-columns: repeat(2, 1fr); }
    .loc-featured { grid-column: span 2; }
    .gym-type-card { padding: 36px 32px; }
    .program-card { padding: 32px 28px; }
}


/* ===================================================================
   RESPONSIVE - 768px (Tablet)
   =================================================================== */
@media (max-width: 768px) {
    :root { --nav-height: 64px; }

    /* Mobile Nav Overlay */
    .nav-links {
        position: fixed;
        inset: 0;
        z-index: 999;
        background: var(--white);
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 28px;
        opacity: 0;
        visibility: hidden;
        transition: opacity .3s ease, visibility .3s ease;
    }

    .nav-links.active {
        opacity: 1;
        visibility: visible;
    }

    .nav-links a {
        color: var(--black) !important;
        font-size: 1.3rem;
        font-weight: 600;
    }

    .nav-links a::after { display: none; }

    /* Mobile dropdown */
    .nav-dropdown-menu {
        position: static;
        transform: none;
        background: var(--gray-100);
        box-shadow: none;
        border-radius: var(--radius-sm);
        padding: 8px 0;
        opacity: 1;
        visibility: visible;
        margin-top: 12px;
        min-width: auto;
    }
    .nav-dropdown-menu a {
        font-size: 1.1rem !important;
        padding: 10px 24px;
    }
    .nav-dropdown-toggle svg { display: none; }

    .nav-cta { display: none; }
    .nav-toggle { display: flex; }

    .nav-toggle.active span {
        background: var(--black) !important;
    }

    /* Sections */
    .section { padding: 72px 0; }

    .about-grid { grid-template-columns: 1fr; }
    .about-right { order: -1; }
    .about-img { height: 300px; }
    .about-accent-card {
        bottom: -16px;
        left: -8px;
        padding: 20px 24px;
    }
    .accent-number { font-size: 2.2rem; }

    .gym-types-grid { grid-template-columns: 1fr; }
    .programs-grid { grid-template-columns: 1fr; }
    .trans-grid { grid-template-columns: 1fr; }

    .image-strip { height: 220px; }

    .locations-grid { grid-template-columns: 1fr; }
    .loc-featured { grid-column: span 1; }

    .contact-grid { grid-template-columns: 1fr; gap: 40px; }

    .footer-top { grid-template-columns: 1fr 1fr; gap: 28px; }

    /* Hero Adjustments */
    .hero-stats { gap: 24px; }
    .stat-num { font-size: 2.2rem; }
    .stat-plus { font-size: 1.6rem; }
    .hero-scroll-indicator { display: none; }
}


/* ===================================================================
   RESPONSIVE - 480px (Phone)
   =================================================================== */
@media (max-width: 480px) {
    .section { padding: 56px 0; }
    .container { padding: 0 16px; }

    .hero-stats {
        flex-direction: column;
        gap: 20px;
    }

    .stat-sep {
        width: 40px;
        height: 1px;
    }

    .about-metrics {
        flex-direction: column;
        gap: 24px;
    }

    .image-strip {
        grid-template-columns: 1fr;
        height: auto;
    }

    .strip-img { height: 200px; }

    .footer-top { grid-template-columns: 1fr; }

    .hero-actions {
        flex-direction: column;
        align-items: center;
    }

    .trial-actions {
        flex-direction: column;
        align-items: center;
    }

    .contact-form-wrap { padding: 28px 20px; }
    .gym-type-card { padding: 28px 24px; }
    .program-card { padding: 28px 20px; }

    .nav-right { gap: 10px; }
    .lang-toggle { padding: 5px 10px; font-size: .72rem; }

    .section-title { font-size: clamp(1.7rem, 6vw, 2.4rem); }
}


/* ===================================================================
   SUBPAGE STYLES - Pilates & Dokimastiki
   =================================================================== */

/* --- Section Variants (BEM aliases) --- */
.section--white { background: var(--white); color: var(--black); }
.section--dark  { background: var(--black); color: var(--white); }
.section--gray  { background: var(--gray-100); color: var(--black); }
.section--yellow { background: var(--yellow); color: var(--black); }
/* Phone CTA on dokimastiki — tighter vertical padding than the default 100px */
.phone-cta-section.section { padding: 56px 0; }
.phone-cta-section .cta-container { padding: 0; }

/* --- Button Variants (BEM aliases) --- */
.btn-yellow {
    background: var(--yellow);
    color: var(--black);
}
.btn-yellow:hover {
    background: var(--yellow-dark);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(245, 197, 24, .35);
}
.btn-dark {
    background: var(--black);
    color: var(--white);
}
.btn-dark:hover {
    background: var(--gray-800);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}
.btn-dark-outline {
    background: transparent;
    color: var(--black);
    border: 2px solid var(--black);
}
.btn-dark-outline:hover {
    background: var(--black);
    color: var(--white);
    transform: translateY(-2px);
}
.btn-full { width: 100%; }

/* --- Section Tag --- */
.section-tag {
    display: inline-block;
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--yellow);
}
.section-tag--yellow { color: var(--yellow); }
.section-header--light .section-title { color: var(--white); }

/* --- Breadcrumb --- */
.breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .85rem;
    margin-bottom: 24px;
    color: var(--gray-400);
}
.breadcrumb a {
    color: var(--yellow);
}
.breadcrumb a:hover {
    text-decoration: underline;
}
/* --- Page Hero --- */
.page-hero {
    min-height: 50vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: calc(var(--nav-height) + 40px);
    padding-bottom: 60px;
    position: relative;
    overflow: hidden;
    background: var(--black);
    color: var(--white);
}
.page-hero-title {
    font-family: var(--font-display);
    font-size: clamp(3rem, 8vw, 5.5rem);
    font-weight: 700;
    letter-spacing: .06em;
    line-height: 1;
    margin-bottom: 16px;
    color: var(--white);
    text-transform: uppercase;
}
.page-hero-sub {
    font-size: clamp(1rem, 2.5vw, 1.3rem);
    color: var(--gray-300);
    max-width: 600px;
    margin: 20px auto 0;
    line-height: 1.6;
}
.page-hero--dark {
    background: var(--black);
    color: var(--white);
}
.page-hero--yellow {
    background: var(--yellow);
    color: var(--black);
}
.page-hero__title {
    font-family: var(--font-display);
    font-size: clamp(3rem, 8vw, 5.5rem);
    font-weight: 700;
    letter-spacing: .06em;
    line-height: 1;
    margin-bottom: 16px;
    text-transform: uppercase;
}
.page-hero--yellow .page-hero__title {
    color: var(--black);
}
.page-hero__subtitle {
    font-size: clamp(1rem, 2.5vw, 1.3rem);
    max-width: 600px;
    line-height: 1.6;
    opacity: .85;
}
.page-hero--dark .page-hero__subtitle { color: var(--gray-300); }
.page-hero--yellow .page-hero__subtitle { color: var(--gray-800); }

/* --- Intro Highlights --- */
.intro-content { text-align: center; }
.intro-text {
    font-size: 1.05rem;
    color: var(--gray-600);
    max-width: 700px;
    margin: 0 auto 48px;
    line-height: 1.8;
}
.intro-highlights {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}
.intro-highlight-item {
    text-align: center;
    padding: 32px 20px;
    border-radius: var(--radius);
    background: var(--yellow);
    color: var(--black);
    transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
    cursor: default;
}
.intro-highlight-item:hover {
    transform: translateY(-6px);
    background: var(--yellow-dark);
    box-shadow: 0 14px 36px rgba(245, 197, 24, 0.4);
}
.intro-highlight-icon {
    font-size: 2rem;
    display: block;
    margin: 0 auto 16px;
    width: 48px;
    height: 48px;
    transition: transform 0.3s ease;
    /* Force the SVG icons to render in solid black for max contrast on yellow */
    filter: brightness(0);
}
.intro-highlight-item:hover .intro-highlight-icon {
    transform: scale(1.15);
}
.intro-highlight-item h3 {
    font-family: var(--font-display);
    text-transform: uppercase;
    font-weight: 700;
    font-size: 1.3rem;
    letter-spacing: .04em;
    margin-bottom: 8px;
    color: var(--black);
}
.intro-highlight-item p {
    font-size: .9rem;
    color: rgba(0, 0, 0, 0.72);
    line-height: 1.6;
}
/* Dark-mode override: keep yellow as the brand pop, no inversion */
body.dark-mode .intro-highlight-item {
    background: var(--yellow);
    color: var(--black);
}
body.dark-mode .intro-highlight-item h3 { color: var(--black); }
body.dark-mode .intro-highlight-item p { color: rgba(0, 0, 0, 0.72); }

/* --- Equipment Grid --- */
.equipment-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
}
.equipment-card {
    background: var(--gray-100);
    border-radius: var(--radius);
    padding: 40px 32px;
    transition: transform var(--transition), box-shadow var(--transition);
}
.equipment-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}
.equipment-card__icon {
    margin-bottom: 20px;
}
.equipment-card__icon svg {
    width: 56px;
    height: 56px;
}
.equipment-card__title {
    font-family: var(--font-display);
    text-transform: uppercase;
    font-weight: 600;
    font-size: 1.5rem;
    letter-spacing: .04em;
    margin-bottom: 12px;
}
.equipment-card__text {
    font-size: .93rem;
    color: var(--gray-500);
    line-height: 1.7;
}

/* --- Accessories Grid --- */
.accessories-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
}
.accessory-item {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--white);
    padding: 20px 24px;
    border-radius: var(--radius-sm);
    font-size: .93rem;
    font-weight: 500;
    transition: transform var(--transition);
}
.accessory-item:hover {
    transform: translateY(-2px);
}
.accessory-icon {
    font-size: 1.3rem;
    flex-shrink: 0;
    color: var(--yellow);
}

/* --- Benefits Grid --- */
.benefits-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
}
.benefit-card {
    padding: 36px 32px;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    transition: transform var(--transition), box-shadow var(--transition);
}
.benefit-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}
.benefit-card__number {
    font-family: var(--font-display);
    text-transform: uppercase;
    font-weight: 600;
    font-size: 2.5rem;
    color: var(--yellow);
    line-height: 1;
    margin-bottom: 12px;
}
.benefit-card__title {
    font-family: var(--font-display);
    text-transform: uppercase;
    font-weight: 600;
    font-size: 1.3rem;
    letter-spacing: .04em;
    margin-bottom: 10px;
}
.benefit-card__text {
    font-size: .9rem;
    color: var(--gray-500);
    line-height: 1.7;
}

/* --- Group Pilates --- */
.group-pilates-content {
    text-align: center;
    max-width: 700px;
    margin: 0 auto;
}
.group-pilates-lead {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--white);
    margin-bottom: 20px;
    line-height: 1.6;
}
.group-pilates-text {
    font-size: .95rem;
    color: var(--gray-400);
    line-height: 1.7;
    margin-bottom: 32px;
}

/* --- CTA Section --- */
.cta-container {
    text-align: center;
    padding: 20px 0;
}
.cta-title {
    font-family: var(--font-display);
    text-transform: uppercase;
    font-weight: 600;
    font-size: clamp(2rem, 4vw, 3rem);
    letter-spacing: .04em;
    margin-bottom: 16px;
}
.cta-title--light { color: var(--white); }
.cta-text {
    font-size: 1rem;
    color: var(--gray-600);
    margin-bottom: 28px;
}
.section--yellow .cta-text { color: var(--gray-800); }
.cta-buttons {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

/* Gymnastiria: trial CTA section */
.trial-content {
    text-align: center;
}
.trial-content h2 {
    font-family: var(--font-display);
    text-transform: uppercase;
    font-weight: 600;
    font-size: clamp(2rem, 4vw, 3rem);
    letter-spacing: .04em;
    margin-bottom: 16px;
}
.trial-content p {
    font-size: 1rem;
    color: var(--gray-800);
    margin-bottom: 28px;
}
.trial-actions {
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}

/* --- Experience Badge --- */
.experience-badge-section { padding: 60px 0; }
.experience-badge {
    display: flex;
    align-items: center;
    gap: 32px;
    justify-content: center;
    text-align: left;
}
.experience-badge__number {
    font-family: var(--font-display);
    text-transform: uppercase;
    font-weight: 600;
    font-size: 6rem;
    color: var(--yellow);
    line-height: 1;
}
.experience-badge__text h3 {
    font-family: var(--font-display);
    text-transform: uppercase;
    font-weight: 600;
    font-size: 1.8rem;
    letter-spacing: .04em;
    margin-bottom: 8px;
}
.experience-badge__text p {
    font-size: .93rem;
    color: var(--gray-500);
    line-height: 1.6;
    max-width: 400px;
}

/* ===================================================================
   DOKIMASTIKI (TRIAL) PAGE STYLES
   =================================================================== */

/* --- Trust Signals --- */
.trial-layout {
    max-width: 720px;
    margin: 0 auto;
}
.trust-signals {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-bottom: 48px;
}
.trust-signal {
    text-align: center;
    padding: 28px 16px;
    background: var(--gray-100);
    border-radius: var(--radius);
}
.trust-signal__number {
    font-family: var(--font-display);
    text-transform: uppercase;
    font-weight: 600;
    font-size: 2.8rem;
    color: var(--yellow);
    display: block;
    line-height: 1;
    margin-bottom: 8px;
}
.trust-signal__number sup {
    font-size: .5em;
}
.trust-signal__label {
    font-size: .85rem;
    font-weight: 600;
    color: var(--gray-600);
    text-transform: uppercase;
    letter-spacing: .06em;
}

/* --- Trial Form --- */
.trial-form {
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    padding: 48px 40px;
    box-shadow: var(--shadow-md);
}
.trial-form__title {
    font-family: var(--font-display);
    text-transform: uppercase;
    font-weight: 600;
    font-size: 2rem;
    letter-spacing: .04em;
    margin-bottom: 8px;
    text-align: center;
}
.trial-form__subtitle {
    text-align: center;
    color: var(--gray-500);
    font-size: .93rem;
    margin-bottom: 32px;
}
.form-group {
    margin-bottom: 20px;
    flex: 1;
}
.form-group label {
    display: block;
    font-size: .85rem;
    font-weight: 600;
    margin-bottom: 6px;
    color: var(--gray-700);
}
.form-group .required { color: #e53e3e; }
.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-sm);
    font-size: .93rem;
    transition: border-color var(--transition), box-shadow var(--transition);
    background: var(--white);
    color: var(--black);
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: var(--yellow);
    box-shadow: 0 0 0 3px rgba(245, 197, 24, .15);
}
.form-group textarea { resize: vertical; }
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

/* --- Why Cards --- */
.why-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}
.why-card {
    text-align: center;
    padding: 40px 28px;
    background: var(--white);
    border-radius: var(--radius);
    transition: transform var(--transition), box-shadow var(--transition);
}
.why-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}
.why-card__icon {
    margin-bottom: 20px;
}
.why-card__icon svg {
    width: 48px;
    height: 48px;
    display: inline-block;
}
.why-card__title {
    font-family: var(--font-display);
    text-transform: uppercase;
    font-weight: 600;
    font-size: 1.3rem;
    letter-spacing: .04em;
    margin-bottom: 12px;
}
.why-card__text {
    font-size: .9rem;
    color: var(--gray-500);
    line-height: 1.7;
}

/* --- Location Cards --- */
.locations-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}
.location-card {
    text-align: center;
    padding: 28px 20px;
    background: var(--gray-100);
    border-radius: var(--radius-sm);
    transition: transform var(--transition);
}
.location-card:hover { transform: translateY(-2px); }
.location-card__name {
    font-family: var(--font-display);
    text-transform: uppercase;
    font-weight: 600;
    font-size: 1.2rem;
    letter-spacing: .04em;
    margin-bottom: 8px;
}
.location-card__phone {
    color: var(--yellow);
    font-weight: 600;
    font-size: .95rem;
}
.location-card__phone:hover { color: var(--yellow-dark); }

/* --- Phone CTA --- */
.phone-cta-number {
    display: block;
    font-family: var(--font-display);
    text-transform: uppercase;
    font-weight: 600;
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    color: var(--yellow);
    letter-spacing: .04em;
    margin-bottom: 40px;
    transition: color var(--transition);
}
.phone-cta-number:hover { color: var(--yellow-dark); }
.phone-cta-locations {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    column-gap: 16px;
    row-gap: 24px;
    max-width: 800px;
    margin: 0 auto;
}
.phone-cta-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-align: center;
    min-width: 180px;
}
.phone-cta-item span {
    font-size: .85rem;
    color: var(--gray-400);
}
.phone-cta-item a {
    color: var(--white);
    font-weight: 600;
    font-size: .95rem;
}
.phone-cta-item a:hover { color: var(--yellow); }
.section--yellow .phone-cta-item span { color: rgba(0,0,0,0.55); }
.section--yellow .phone-cta-item a { color: var(--black); }
.section--yellow .phone-cta-item a:hover { color: rgba(0,0,0,0.6); }


/* --- Page Hero Overlay & Accent --- */
.page-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(10,10,10,.95) 0%, rgba(10,10,10,.8) 100%);
}
.page-hero-accent {
    position: absolute;
    top: -30%;
    right: -10%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(245,197,24,.08) 0%, transparent 70%);
    pointer-events: none;
}

/* --- Page Hero Container --- */
.page-hero__container {
    position: relative;
    z-index: 2;
    text-align: center;
    padding-top: 80px;
}

/* --- Breadcrumb Items --- */
.breadcrumb-link {
    color: var(--gray-400);
    font-size: .82rem;
    transition: color .3s;
}
.breadcrumb-sep {
    color: var(--gray-600);
    margin: 0 10px;
    font-size: .82rem;
}
.breadcrumb-current {
    color: var(--yellow);
    font-size: .82rem;
    font-weight: 500;
}

/* --- Intro Wrapper --- */
.intro-wrap {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}
.intro-wrap .lead {
    margin-top: 20px;
}
.intro-wrap .body-text {
    max-width: 700px;
    margin: 16px auto 0;
    color: var(--gray-600);
    line-height: 1.75;
}

/* --- Why Card Icon Circle --- */
.why-card__icon-circle {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--yellow);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
    font-size: 1.6rem;
}

/* --- CTA Section Compact --- */
.section--compact {
    padding: 72px 0;
}
.cta-desc {
    font-size: 1.05rem;
    max-width: 520px;
    margin: 16px auto 0;
    line-height: 1.7;
    color: var(--gray-800);
}
.cta-actions {
    display: flex;
    gap: 16px;
    justify-content: center;
    margin-top: 32px;
    flex-wrap: wrap;
}

/* --- Service Link Card --- */
.service-link-card {
    text-decoration: none;
    transition: all .3s cubic-bezier(.4,0,.2,1);
}

/* --- Other Services Grid --- */
.services-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
    max-width: 800px;
    margin: 0 auto;
}

/* ===================================================================
   SUBPAGE RESPONSIVE
   =================================================================== */
@media (max-width: 900px) {
    .services-grid { grid-template-columns: 1fr; }
    .equipment-grid { grid-template-columns: 1fr; }
    .benefits-grid { grid-template-columns: 1fr; }
    .why-grid { grid-template-columns: 1fr; }
    .intro-highlights { grid-template-columns: 1fr; }
    .trust-signals { grid-template-columns: 1fr; gap: 16px; }
    .form-row { grid-template-columns: 1fr; }
    .pilates-intro-split { grid-template-columns: 1fr; gap: 32px; }
    .pilates-intro-image img { height: 280px; }
    .equipment-slideshow { height: auto; min-height: 560px; }
    .equip-slide { flex-direction: column; position: relative; display: none; }
    .equip-slide.active { display: flex; }
    .equip-slide__img { width: 100%; height: 260px; }
    .equip-slide__content { width: 100%; padding: 28px 24px; }
    .equip-prev { left: 8px; }
    .equip-next { right: 8px; }
}

@media (max-width: 600px) {
    .page-hero { min-height: 40vh; padding-top: calc(var(--nav-height) + 24px); padding-bottom: 40px; text-align: center; }
    .page-hero__title, .page-hero-title { font-size: clamp(2.2rem, 10vw, 3.5rem); }
    .trial-form { padding: 28px 20px; }
    .experience-badge { flex-direction: column; text-align: center; }
    .experience-badge__text p { margin: 0 auto; }
    .phone-cta-locations { grid-template-columns: 1fr 1fr; }
    .cta-buttons { flex-direction: column; align-items: center; }
}


/* ===================================================================
   DIRECTORY / GYMNASTIRIA PAGE
   =================================================================== */
.section-gray { background: var(--gray-100); }

.directory-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 24px;
}

.directory-card {
    display: flex;
    flex-direction: column;
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    padding: 0;
    position: relative;
    overflow: hidden;
    transition: transform var(--transition), box-shadow var(--transition);
}
.dir-img-wrap {
    position: relative;
    overflow: hidden;
}
.dir-img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}
.directory-card:hover .dir-img {
    transform: scale(1.04);
}
.directory-featured .dir-img {
    height: 280px;
    object-position: center 70%;  /* shift focal point slightly down so more of the building + foreground shows */
}
.dir-card-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 24px 28px 28px;
}
.dir-card-body h3 {
    min-height: 2.8em;
}

.directory-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.directory-featured {
    grid-column: 1 / -1;
    border: 2px solid var(--yellow);
}

.directory-card h3 {
    font-family: var(--font-display);
    text-transform: uppercase;
    font-size: 1.4rem;
    font-weight: 600;
    letter-spacing: .04em;
    margin-bottom: 12px;
}
.directory-card h3 span {
    display: block;
}

.dir-address {
    font-size: .93rem;
    color: var(--gray-500);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.dir-phone {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 16px;
}

.dir-phone a {
    color: var(--yellow-dark);
}

.dir-phone a:hover {
    color: var(--yellow);
}

/* Active nav link */
.nav-links a.active {
    color: var(--yellow) !important;
}

.nav-links a.active::after {
    width: 100% !important;
}

@media (max-width: 600px) {
    .directory-grid { grid-template-columns: 1fr; }
    .directory-featured { grid-column: auto; }
}


/* ===================================================================
   NEW INDEX.HTML STYLES (user rewrite)
   =================================================================== */

/* Text utility */
.text-yellow { color: var(--yellow) !important; }

/* Hero - new structure (no .hero-bg wrapper, inline overlay) */
.hero .hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,rgba(10,10,10,.6) 0%,rgba(10,10,10,.85) 100%);
    z-index: 1;
}

/* Hero CTA row */
.hero-ctas {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 60px;
}

/* Hero stat items (new class names) */
.hero-stat { text-align: center; }
.hero-stat-number {
    display: block;
    font-family: var(--font-display);
    text-transform: uppercase;
    font-weight: 600;
    font-size: 2.8rem;
    color: var(--white);
    line-height: 1;
}
.hero-stat-label {
    display: block;
    font-size: .72rem;
    color: rgba(255,255,255,.45);
    text-transform: uppercase;
    letter-spacing: .1em;
    margin-top: 6px;
}

/* Scroll indicator (new structure) */
.scroll-indicator {
    position: absolute;
    bottom: 36px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    z-index: 2;
}
.scroll-indicator span {
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .18em;
    color: rgba(255,255,255,.35);
}
.scroll-arrow {
    width: 1px;
    height: 44px;
    background: rgba(255,255,255,.12);
    position: relative;
    overflow: hidden;
}
.scroll-arrow::after {
    content: '';
    position: absolute;
    top: -100%;
    left: 0;
    width: 100%;
    height: 50%;
    background: var(--yellow);
    animation: scrollLine 2s ease-in-out infinite;
}

/* Section tag & subtitle (new aliases) */
.section-tag {
    display: inline-block;
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--yellow);
    margin-bottom: 4px;
}
.section-subtitle {
    color: var(--gray-500);
    max-width: 560px;
    margin: 8px auto 0;
    font-size: .95rem;
    line-height: 1.65;
}
.section-header { margin-bottom: 56px; text-align: center; }
.section-cta { text-align: center; margin-top: 48px; }

/* Section with positioned children (glows, overlays) */
.section--positioned {
    position: relative;
    overflow: hidden;
}

/* Section dark variant */
.section-dark, .section.section-dark {
    background: var(--black);
    color: var(--white);
}
.section-dark .section-title { color: var(--white); }
.section-dark .section-tag { color: var(--yellow); }
.section-dark .section-subtitle { color: var(--gray-400); }

/* About preview */
.about-preview .about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 72px;
    align-items: center;
}
.about-text .section-title { margin-bottom: 20px; }
.about-lead {
    font-size: 1.05rem;
    color: var(--gray-700);
    line-height: 1.75;
    margin-bottom: 16px;
}
.about-text p {
    font-size: .95rem;
    color: var(--gray-500);
    line-height: 1.8;
    margin-bottom: 20px;
}
.about-metric {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.about-metric-number {
    font-family: var(--font-display);
    text-transform: uppercase;
    font-weight: 600;
    font-size: 3.2rem;
    color: var(--yellow);
    line-height: 1;
}
.about-metric-unit {
    font-size: .85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--black);
    margin-top: 4px;
}
.about-metric-desc {
    font-size: .78rem;
    color: var(--gray-500);
}
.about-image {
    position: relative;
}
.about-image img {
    border-radius: var(--radius);
    width: 100%;
    height: 400px;
    object-fit: cover;
}
.about-accent-card {
    position: absolute;
    bottom: -20px;
    left: -20px;
    background: var(--yellow);
    color: var(--black);
    padding: 20px 24px;
    border-radius: var(--radius);
    text-align: center;
    box-shadow: var(--shadow-lg);
}
.accent-number {
    display: block;
    font-family: var(--font-display);
    text-transform: uppercase;
    font-weight: 600;
    font-size: 2.2rem;
    line-height: 1;
}
.accent-label {
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* Services overview */
.services-overview .services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto auto auto auto auto;
    column-gap: 28px;
    row-gap: 16px;
    max-width: none;
}
.services-overview .service-card {
    display: grid;
    grid-row: span 5;
    grid-template-rows: subgrid;
    justify-items: center;
    align-items: start;
}
.services-overview .service-card > .btn {
    margin-top: 0;
    align-self: end;
}
.services-overview .service-programs {
    align-self: center;
    justify-content: center;
}
.services-overview .service-card:nth-child(3) .service-programs {
    flex-direction: column;
    align-items: center;
}
.services-overview .service-card:nth-child(1) .service-programs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-items: center;
}
.services-overview .service-card:nth-child(1) .service-programs li:first-child,
.services-overview .service-card:nth-child(1) .service-programs li:last-child {
    grid-column: 1 / -1;
}
.service-card {
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    padding: 36px 28px 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: transform var(--transition), box-shadow var(--transition);
    min-width: 0;
    position: relative;
    overflow: hidden;
}
.service-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
}
.service-card-featured {
    border-color: var(--yellow);
    box-shadow: 0 0 0 1px var(--yellow);
}
.service-icon {
    margin-bottom: 12px;
}
/* Badge — top-right corner ribbon, out of normal flow so it doesn't
   shift any of the card content. Brand yellow on black for premium feel. */
.service-badge {
    position: absolute;
    top: 14px;
    right: 14px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: .62rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--yellow);
    background: transparent;
    border: 1px solid rgba(245, 197, 24, 0.5);
    padding: 3px 8px;
    border-radius: var(--radius-pill);
    box-shadow: 0 2px 10px rgba(245, 197, 24, .35);
    z-index: 1;
}
.service-badge::before {
    content: '✓';
    font-size: .7rem;
    font-weight: 900;
    line-height: 1;
}
.service-card h3 {
    font-family: var(--font-display);
    text-transform: uppercase;
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: .04em;
    margin-bottom: 12px;
    min-height: 2.4em;       /* reserve 2 lines so 1- and 2-line titles align */
    display: flex;
    align-items: center;
    justify-content: center;
}
.service-card p {
    font-size: .9rem;
    color: var(--gray-500);
    line-height: 1.7;
    margin-bottom: 16px;
    min-height: 4.5em;       /* reserve ~3 lines so descriptions align */
}
.service-programs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 24px;
    justify-content: center;
}
/* Push the "Learn More" button to the bottom so it aligns across all 3 cards */
.service-card > .btn { margin-top: auto; }
.service-programs li {
    font-size: .75rem;
    font-weight: 600;
    padding: 6px 14px;
    background: var(--gray-100);
    border: none;
    border-radius: var(--radius-sm);
    color: var(--gray-700);
    letter-spacing: .02em;
}

/* Gym types (dark section) */
.gym-types .gym-types-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
}
.gym-type-header h3 {
    font-family: var(--font-display);
    text-transform: uppercase;
    font-size: 1.8rem;
    font-weight: 700;
    letter-spacing: .04em;
    line-height: 1.2;
    margin-bottom: 20px;
}
.gym-type-features {
    margin-bottom: 0;
}
.gym-type-features li {
    font-size: .9rem;
    color: var(--gray-600);
    padding: 8px 0;
    border-bottom: 1px solid var(--gray-200);
    position: relative;
    padding-left: 20px;
}
.gym-type-features li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--yellow);
    font-weight: 700;
}

/* Image strip (new structure) */
.image-strip-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    height: 340px;
}
.image-strip-item {
    overflow: hidden;
}
.image-strip-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s ease;
}
.image-strip-item:hover img {
    transform: scale(1.05);
}

/* Transformation cards */
.transform-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    margin-bottom: 48px;
}
.transform-card {
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    overflow: hidden;
    transition: transform var(--transition), box-shadow var(--transition);
}
.transform-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}
.transform-image-placeholder {
    height: 200px;
    background: linear-gradient(135deg, var(--gray-100), var(--gray-200));
    display: flex;
    align-items: center;
    justify-content: center;
}
/* Real photo card — image fills the frame, duration sits as a corner badge */
.transform-image {
    position: relative;
    height: 280px;
    overflow: hidden;
    background: var(--gray-200);
}
.transform-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform .4s ease;
}
.transform-card:hover .transform-image img {
    transform: scale(1.04);
}
.transform-image .transform-duration {
    position: absolute;
    bottom: 12px;
    right: 12px;
    background: rgba(10, 10, 10, .82);
    padding: 8px 14px;
    border-radius: var(--radius-sm);
    font-size: 1.1rem;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.transform-duration {
    font-family: var(--font-display);
    text-transform: uppercase;
    font-weight: 600;
    font-size: 3rem;
    color: var(--yellow);
    letter-spacing: .04em;
}
.transform-info {
    padding: 24px;
}
.transform-info h4 {
    font-family: var(--font-display);
    text-transform: uppercase;
    font-size: 1.3rem;
    font-weight: 600;
    letter-spacing: .04em;
    margin-bottom: 8px;
}
.transform-info p {
    font-size: .88rem;
    color: var(--gray-500);
    line-height: 1.6;
    margin-bottom: 12px;
}
.transform-program {
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--yellow);
}

/* Transform TV */
.transform-tv {
    text-align: center;
    padding: 32px;
    background: var(--gray-100);
    border-radius: var(--radius);
}
.tv-logos {
    display: flex;
    gap: 18px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 16px;
}
.tv-logo {
    height: 38px;
    width: auto;
    object-fit: contain;
    background: var(--white);
    padding: 8px 14px;
    border-radius: 8px;
    border: 1px solid var(--gray-200);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
    opacity: .92;
    transition: opacity .25s ease, transform .25s ease;
}
.tv-logo:hover {
    opacity: 1;
    transform: translateY(-2px);
}
/* ANT1 logo is white-on-transparent — it disappears on white. Give it
   a black chip so the white wordmark + colorful + plus stay visible. */
.tv-logo--dark {
    background: #0a0a0a;
    border-color: #1a1a1a;
}
@media (max-width: 600px) {
    .tv-logos { gap: 12px; margin-top: 12px; }
    .tv-logo { height: 26px; padding: 6px 10px; }
}

/* Trial CTA (yellow banner) */
.trial-cta {
    background: var(--yellow);
    padding: 80px 0;
}
.trial-cta-content {
    text-align: center;
}
.trial-cta-content h2 {
    font-family: var(--font-display);
    text-transform: uppercase;
    font-weight: 600;
    font-size: clamp(2rem, 4vw, 3.2rem);
    letter-spacing: .04em;
    margin-bottom: 12px;
    color: var(--black);
}
.trial-cta-content p {
    font-size: 1rem;
    color: var(--gray-800);
    margin-bottom: 28px;
}
.trial-cta-actions {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

/* Locations preview */
/* Yellow accent line marks the section break from FAQ above */
.locations-preview {
    border-top: 4px solid var(--yellow);
}
.locations-preview .locations-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
}
.location-card {
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    padding: 28px 24px;
    position: relative;
    transition: transform var(--transition), box-shadow var(--transition);
}
.location-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}
.location-card-featured {
    border-color: var(--yellow);
    box-shadow: 0 0 0 1px var(--yellow);
}
/* Make room for the absolute-positioned "Κεντρικό" badge so it never overlaps the title */
.location-card-featured > h3 { padding-right: 90px; }
.location-badge {
    position: absolute;
    top: 16px;
    right: 16px;
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    background: var(--yellow);
    color: var(--black);
    padding: 4px 12px;
    border-radius: var(--radius-pill);
}
.location-card h3 {
    font-family: var(--font-display);
    text-transform: uppercase;
    font-size: 1.3rem;
    font-weight: 600;
    letter-spacing: .04em;
    margin-bottom: 8px;
}
.location-address {
    font-size: .88rem;
    color: var(--gray-500);
    margin-bottom: 8px;
}
.location-phone {
    font-size: .95rem;
    font-weight: 600;
    color: var(--yellow-dark);
    display: block;
    margin-bottom: 16px;
}
.location-phone:hover { color: var(--yellow); }
.location-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.location-tags .tag {
    font-size: .65rem;
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    letter-spacing: .04em;
}
.tag-fc { background: var(--gray-100); color: var(--gray-600); }
.tag-ex, .loc-tags span.loc-exclusive {
    background: rgba(184,134,11,0.08);
    color: #9a6c00;
    border: 1px solid rgba(184,134,11,0.35);
}
.tag-pl, .loc-tags span.loc-pilates {
    background: rgba(192,132,168,0.08);
    color: #8b4f7b;
    border: 1px solid rgba(192,132,168,0.35);
}

/* Contact quick (dark) */
.contact-quick .contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 72px;
    align-items: start;
}
.contact-quick .section-title { color: var(--white); }
.contact-details {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 24px 0;
}
.contact-item {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: .95rem;
    color: var(--white);
}
.contact-item a {
    color: var(--white);
}
.contact-item a:hover { color: var(--yellow); }
.contact-social {
    display: flex;
    gap: 12px;
    margin-top: 24px;
}

/* Contact form wrap (dark bg) */
.contact-quick .contact-form-wrap {
    background: var(--gray-900);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: var(--radius);
    padding: 36px 32px;
}
.contact-quick .contact-form .form-group {
    margin-bottom: 18px;
}
.contact-quick .contact-form label {
    display: block;
    font-size: .82rem;
    font-weight: 600;
    color: var(--gray-400);
    margin-bottom: 6px;
}
.contact-quick .contact-form input,
.contact-quick .contact-form textarea {
    width: 100%;
    padding: 12px 16px;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: var(--radius-sm);
    color: var(--white);
    font-size: .93rem;
}
.contact-quick .contact-form input:focus,
.contact-quick .contact-form textarea:focus {
    border-color: var(--yellow);
    box-shadow: 0 0 0 3px rgba(245,197,24,.15);
}
.contact-quick .contact-form input::placeholder,
.contact-quick .contact-form textarea::placeholder {
    color: var(--gray-600);
}
.contact-quick .contact-form textarea { resize: vertical; }

/* Button variants used in new index */
.btn-yellow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 32px;
    font-family: var(--font-body);
    font-size: .9rem;
    font-weight: 600;
    border-radius: var(--radius-pill);
    background: var(--yellow);
    color: var(--black);
    cursor: pointer;
    transition: all var(--transition);
    letter-spacing: .02em;
    border: none;
}
.btn-yellow:hover {
    background: var(--yellow-dark);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(245,197,24,.35);
}
.btn-outline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 32px;
    font-family: var(--font-body);
    font-size: .9rem;
    font-weight: 600;
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--white);
    border: 2px solid rgba(255,255,255,.3);
    cursor: pointer;
    transition: all var(--transition);
    letter-spacing: .02em;
}
.btn-outline:hover {
    border-color: var(--yellow);
    color: var(--yellow);
    transform: translateY(-2px);
}
.btn-dark {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 32px;
    font-family: var(--font-body);
    font-size: .9rem;
    font-weight: 600;
    border-radius: var(--radius-pill);
    background: var(--black);
    color: var(--white);
    cursor: pointer;
    transition: all var(--transition);
    letter-spacing: .02em;
    border: none;
}
.btn-dark:hover {
    background: var(--gray-800);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}
.btn-dark-outline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 32px;
    font-family: var(--font-body);
    font-size: .9rem;
    font-weight: 600;
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--black);
    border: 2px solid var(--black);
    cursor: pointer;
    transition: all var(--transition);
    letter-spacing: .02em;
}
.btn-dark-outline:hover {
    background: var(--black);
    color: var(--white);
    transform: translateY(-2px);
}
.btn-full { width: 100%; justify-content: center; }

/* Form success */
.form-success {
    text-align: center;
    padding: 48px 24px;
}
.form-success h3 {
    font-family: var(--font-display);
    text-transform: uppercase;
    font-weight: 600;
    font-size: 1.8rem;
    margin: 16px 0 8px;
    color: var(--white);
}
.form-success p {
    color: var(--gray-400);
}

/* ===================================================================
   RESPONSIVE - NEW INDEX CLASSES
   =================================================================== */
@media (max-width: 1024px) {
    .about-preview .about-grid { grid-template-columns: 1fr; gap: 48px; }
    .services-overview .services-grid { grid-template-columns: 1fr 1fr; }
    .gym-types .gym-types-grid { grid-template-columns: 1fr; }
    .transform-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
    /* 3 cards in 2 cols → make the third one span both columns */
    .transform-grid > .transform-card:nth-child(3) { grid-column: 1 / -1; max-width: 50%; margin: 0 auto; }
    .contact-quick .contact-grid { grid-template-columns: 1fr; gap: 48px; }
}
@media (max-width: 768px) {
    .services-overview .services-grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    .image-strip-grid { grid-template-columns: 1fr; height: auto; }
    .image-strip-item img { height: 220px; }
    .hero-ctas { flex-direction: column; align-items: center; }
    .trial-cta-actions { flex-direction: column; align-items: center; }
    .tv-logos { flex-wrap: wrap; }
    .about-accent-card { bottom: -10px; left: 10px; }
    .locations-preview .locations-grid { grid-template-columns: 1fr; }

    /* Mobile centering */
    .section-header { text-align: center; }
    .about-text { text-align: center; }
    .about-metrics { justify-content: center; }
    .about-metric { align-items: center; }
    .gym-type-card { text-align: center; }
    .gym-type-features { text-align: left; }
    .service-card { text-align: center; align-items: center; }
    .service-programs { justify-content: center; }
    .transform-card { text-align: center; }
    .trial-cta-content { text-align: center; }
    .location-card { text-align: center; }
    .location-tags { justify-content: center; }
    .location-badge { position: static; margin-bottom: 12px; display: inline-block; }
    .contact-info { text-align: center; }
    .contact-details { align-items: center; }
    .contact-social { justify-content: center; }
    .page-hero { text-align: center; }
    .page-hero-sub { margin: 0 auto; }
    .breadcrumb { justify-content: center; }
    .section-cta { text-align: center; }
    .hero-content { text-align: center; padding: 32px 24px 36px; }
    .hero-badge { margin-left: auto; margin-right: auto; }

    /* Missing grid breakpoints */
    .programs-grid { grid-template-columns: 1fr; }
    .intro-highlights { grid-template-columns: 1fr; }
    .trust-signals { grid-template-columns: 1fr; gap: 16px; }
    .equipment-grid { grid-template-columns: 1fr; }
    .benefits-grid { grid-template-columns: 1fr; }
    .form-row { grid-template-columns: 1fr; }
    .pt-features-grid { grid-template-columns: 1fr; }
    .pt-results-grid { grid-template-columns: 1fr; }

    /* Touch targets */
    .btn, .btn-yellow, .btn-dark, .btn-outline, .btn-dark-outline { min-height: 48px; padding: 14px 28px; }
    .lang-toggle { min-height: 40px; display: flex; align-items: center; }
    .nav-toggle { width: 44px; height: 44px; }

    /* Cookie banner mobile — compact, never clips, respects iOS safe-area */
    .cookie-banner {
        flex-direction: column;
        gap: 8px;
        /* extra bottom padding for iPhone home-indicator / URL bar */
        padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
        text-align: center;
        box-sizing: border-box;
        font-size: .72rem;
        line-height: 1.35;
    }
    .cookie-banner p {
        font-size: .72rem;
        max-width: none;
        margin: 0;
        line-height: 1.35;
    }
    .cookie-banner-btn {
        padding: 8px 24px;
        font-size: .76rem;
        white-space: nowrap;
        flex-shrink: 0;
        min-height: 36px;
    }
}

@media (max-width: 480px) {
    .hero-stats { flex-direction: column; gap: 20px; }
    .about-metrics { flex-direction: column; gap: 20px; }
    .contact-quick .contact-form-wrap { padding: 24px 16px; }
    .page-hero-title { font-size: clamp(2rem, 8vw, 3rem); }
    .hero-content { padding: 24px 16px 28px; }
    .accessories-grid { grid-template-columns: 1fr; }
    .about-image img { height: 240px; }
    .transform-image-placeholder,
    .transform-image { height: 200px; }
}

/* --- Transformations grid: compact 2-card-per-row layout on phones --- */
@media (max-width: 768px) {
    .transform-grid { gap: 14px; }
    .transform-image-placeholder,
    .transform-image { height: 180px; }
    .transform-info { padding: 14px 14px 16px; }
    .transform-info h4 { font-size: .95rem; margin-bottom: 4px; }
    .transform-info .transform-card-sub,
    .transform-card-sub { font-size: .72rem; }
    .transform-card .transform-info p,
    .transform-info p { font-size: .76rem; line-height: 1.4; }
    .transform-program,
    .transform-card .transform-program { font-size: .62rem; padding: 4px 9px; margin-top: 8px; }
    .transform-image .transform-duration {
        font-size: .85rem;
        padding: 4px 10px;
        bottom: 8px;
        right: 8px;
    }
    .transform-grid > .transform-card:nth-child(3) { max-width: 65%; }
}
@media (max-width: 480px) {
    .transform-image-placeholder,
    .transform-image { height: 150px; }
    .transform-info { padding: 12px 12px 14px; }
    .transform-info h4 { font-size: .88rem; }
    .transform-info p { font-size: .72rem; }
    .transform-grid > .transform-card:nth-child(3) { max-width: 80%; }
}


/* ===================================================================
   PERSONAL TRAINING PAGE
   =================================================================== */

/* Hero accent glows */
.page-hero-glow-bl {
    position: absolute;
    bottom: -20%;
    left: -10%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(245,197,24,.06) 0%, transparent 70%);
    pointer-events: none;
}
.page-hero-glow-tr {
    position: absolute;
    top: -20%;
    right: -5%;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(245,197,24,.04) 0%, transparent 70%);
    pointer-events: none;
}

/* Numbered option row (01 / 02 / 03 layout) */
.pt-option {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 32px;
    align-items: start;
}
.pt-option--bordered {
    margin-bottom: 56px;
    padding-bottom: 56px;
    border-bottom: 1px solid var(--gray-200);
}

/* Large step number */
.pt-option-num {
    font-family: var(--font-display);
    text-transform: uppercase;
    font-weight: 600;
    font-size: 4rem;
    color: var(--gray-200);
    line-height: 1;
    letter-spacing: .04em;
}
.pt-option-num--yellow {
    color: var(--yellow);
}

/* Inline heading + badge row */
.pt-heading-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

/* Option heading (h3) */
.pt-option-title {
    font-family: var(--font-display);
    text-transform: uppercase;
    font-weight: 600;
    font-size: 1.6rem;
    letter-spacing: .04em;
}

/* Small pill badge (e.g. ΔΩΡΕΑΝ) */
.pt-badge {
    display: inline-block;
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    padding: 4px 14px;
    border-radius: 50px;
}
.pt-badge--free {
    background: rgba(245,197,24,.15);
    color: var(--yellow-dark);
}
.pt-badge--exclusive {
    background: var(--black);
    color: var(--yellow);
}
.pt-badge--pilates {
    background: rgba(245,197,24,.12);
    color: var(--yellow-dark);
}

/* Description text in option blocks */
.pt-desc {
    font-size: .95rem;
    color: var(--gray-600);
    line-height: 1.75;
    max-width: 650px;
}
.pt-desc--mb {
    margin-bottom: 16px;
}

/* Buttons inside option blocks need top margin */
.pt-option .btn {
    margin-top: 20px;
}
.pt-program-tags + .btn {
    margin-top: 24px;
}

/* Location pill tags row */
.pt-location-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}
.pt-location-tag {
    font-size: .78rem;
    font-weight: 500;
    padding: 6px 16px;
    border-radius: 50px;
    background: var(--gray-100);
    color: var(--gray-700);
}

/* Program highlight tags */
.pt-program-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.pt-program-tag {
    font-size: .78rem;
    font-weight: 600;
    padding: 6px 16px;
    border-radius: 50px;
    background: var(--yellow);
    color: var(--black);
}

/* Section glow accents (dark bg sections) */
.pt-glow-tr {
    position: absolute;
    top: -30%;
    right: -15%;
    width: 700px;
    height: 700px;
    background: radial-gradient(circle, rgba(245,197,24,.06) 0%, transparent 70%);
    pointer-events: none;
}
.pt-glow-bl {
    position: absolute;
    bottom: -20%;
    left: -10%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(245,197,24,.04) 0%, transparent 70%);
    pointer-events: none;
}

/* Dark section subtitle */
.pt-section-desc {
    color: var(--gray-400);
    max-width: 600px;
    margin: 16px auto 0;
    font-size: .95rem;
    line-height: 1.7;
}

/* 3-column feature grid */
.pt-features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

/* Dark feature card */
.pt-feature-card {
    background: var(--gray-900);
    border-radius: var(--radius);
    padding: 40px 32px;
    border: 1px solid var(--gray-800);
    transition: all .3s;
    text-align: center;
}

/* Icon circle (yellow bg) */
.pt-icon-circle {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--yellow);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
}

/* Feature card title (white on dark) */
.pt-feature-title {
    font-family: var(--font-display);
    text-transform: uppercase;
    font-weight: 600;
    font-size: 1.2rem;
    letter-spacing: .04em;
    color: var(--white);
    margin-bottom: 12px;
}

/* Feature card description */
.pt-feature-desc {
    font-size: .88rem;
    color: var(--gray-400);
    line-height: 1.75;
}

/* Callout banner (yellow gradient) */
.pt-callout {
    margin-top: 56px;
    background: linear-gradient(135deg, var(--yellow) 0%, #e8b400 100%);
    border-radius: var(--radius);
    padding: 48px 40px;
    text-align: center;
}
.pt-callout-title {
    font-family: var(--font-display);
    text-transform: uppercase;
    font-weight: 600;
    font-size: clamp(1.6rem, 3.5vw, 2.4rem);
    letter-spacing: .04em;
    color: var(--black);
    margin-bottom: 12px;
}
.pt-callout-desc {
    font-size: 1rem;
    color: var(--gray-800);
    max-width: 560px;
    margin: 0 auto;
    line-height: 1.7;
}

/* Headline stat block */
.pt-stat-block {
    text-align: center;
    margin-bottom: 56px;
    padding: 40px;
    background: var(--black);
    border-radius: var(--radius);
}
.pt-stat-text {
    font-family: var(--font-display);
    text-transform: uppercase;
    font-weight: 600;
    font-size: clamp(1.4rem, 3vw, 2rem);
    color: var(--yellow);
    letter-spacing: .04em;
    line-height: 1.3;
}
.pt-stat-text .pt-stat-em {
    font-size: 1.4em;
}

/* Results grid (2-col) */
.pt-results-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
}

/* Light result card */
.pt-result-card {
    background: var(--gray-100);
    border-radius: var(--radius);
    padding: 36px 32px;
    transition: all .3s;
    border: 1px solid transparent;
}
.pt-result-card:hover {
    border-color: var(--yellow);
    transform: translateY(-4px);
    box-shadow: 0 8px 28px rgba(0,0,0,.08);
}

/* Dark result card */
.pt-result-card--dark {
    background: var(--black);
    border-color: var(--gray-800);
}
.pt-result-card--dark:hover {
    border-color: var(--yellow);
    transform: translateY(-4px);
    box-shadow: 0 8px 28px rgba(245,197,24,.15);
}

/* Avatar row */
.pt-avatar-row {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}

/* Avatar circle */
.pt-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    text-transform: uppercase;
    font-weight: 600;
    font-size: 1.3rem;
    flex-shrink: 0;
}
.pt-avatar--yellow {
    background: var(--yellow);
    color: var(--black);
}
.pt-avatar--dark {
    background: var(--black);
    color: var(--yellow);
}

/* Card name heading */
.pt-card-name {
    font-family: var(--font-display);
    text-transform: uppercase;
    font-weight: 600;
    font-size: 1.15rem;
    letter-spacing: .04em;
}

/* Card subtitle */
.pt-card-sub {
    font-size: .78rem;
    color: var(--gray-500);
}

/* Card body text */
.pt-card-text {
    font-size: .9rem;
    color: var(--gray-600);
    line-height: 1.75;
}
.pt-result-card--dark .pt-card-text {
    color: var(--gray-400);
    font-size: .88rem;
}

/* Result type badge */
.pt-result-badge {
    margin-top: 16px;
    display: inline-block;
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .1em;
    padding: 5px 14px;
    border-radius: 50px;
}
.pt-result-badge--free {
    background: rgba(245,197,24,.15);
    color: var(--yellow-dark);
}
.pt-result-badge--dark {
    background: var(--black);
    color: var(--yellow);
}

/* Big number stat in dark card */
.pt-big-num {
    font-family: var(--font-display);
    text-transform: uppercase;
    font-weight: 600;
    font-size: 3.5rem;
    color: var(--yellow);
    letter-spacing: .04em;
    line-height: 1;
}

/* Stats row inside card */
.pt-stats-row {
    display: flex;
    gap: 24px;
    margin: 16px 0;
    flex-wrap: wrap;
}
.pt-stat-label {
    font-size: .72rem;
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: .1em;
    display: block;
}
.pt-stat-value {
    font-family: var(--font-display);
    text-transform: uppercase;
    font-weight: 600;
    font-size: 1.3rem;
    color: var(--white);
    letter-spacing: .04em;
}

/* Celebrity callout card */
.pt-celeb-card {
    margin-top: 40px;
    background: linear-gradient(135deg, var(--gray-100) 0%, var(--gray-200) 100%);
    border-radius: var(--radius);
    padding: 40px 36px;
    display: flex;
    align-items: center;
    gap: 32px;
    flex-wrap: wrap;
}

/* Large avatar circle */
.pt-celeb-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--black);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.pt-celeb-avatar-icon {
    font-family: var(--font-display);
    text-transform: uppercase;
    font-weight: 600;
    font-size: 1.6rem;
    color: var(--yellow);
}

.pt-celeb-body {
    flex: 1;
    min-width: 280px;
}
.pt-celeb-name {
    font-family: var(--font-display);
    text-transform: uppercase;
    font-weight: 600;
    font-size: 1.3rem;
    letter-spacing: .04em;
    margin-bottom: 8px;
}
.pt-celeb-role {
    font-size: .82rem;
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-bottom: 10px;
}
.pt-celeb-desc {
    font-size: .9rem;
    color: var(--gray-600);
    line-height: 1.75;
}

/* CTA section desc */
.pt-cta-desc {
    font-size: 1.05rem;
    max-width: 560px;
    margin: 16px auto 0;
    line-height: 1.7;
    color: var(--gray-800);
}

/* CTA buttons row */
.pt-cta-buttons {
    display: flex;
    gap: 16px;
    justify-content: center;
    margin-top: 32px;
    flex-wrap: wrap;
}

/* --- Personal Training Page Responsive --- */
@media (max-width: 768px) {
    .pt-option {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .pt-features-grid {
        grid-template-columns: 1fr;
    }
    .pt-results-grid {
        grid-template-columns: 1fr;
    }
    .pt-celeb-card {
        flex-direction: column;
        text-align: center;
    }
    .pt-cta-buttons {
        flex-direction: column;
        align-items: center;
    }
}

@media (max-width: 480px) {
    .pt-option-num {
        font-size: 3rem;
    }
    .pt-callout {
        padding: 32px 20px;
    }
    .pt-stat-block {
        padding: 28px 20px;
    }
}


/* ===================================================================
   FLOATING ACTION BUTTON (FAB)
   =================================================================== */
.fab-container {
    position: fixed;
    bottom: 32px;
    right: 32px;
    z-index: 999;
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    gap: 12px;
}
.fab-toggle {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--yellow);
    color: var(--black);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-lg);
    transition: all var(--transition);
    z-index: 2;
}
.fab-toggle:hover {
    background: var(--yellow-dark);
    transform: scale(1.05);
}
.fab-toggle svg {
    transition: transform .3s ease;
}
.fab-container.open .fab-toggle svg {
    transform: rotate(45deg);
}
.fab-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all .25s ease;
}
.fab-container.open .fab-actions {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.fab-action {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all var(--transition);
    position: relative;
    border: none;
    cursor: pointer;
}
.fab-action:hover {
    transform: scale(1.12);
}
.fab-action-whatsapp {
    background: #25D366;
    box-shadow: 0 3px 12px rgba(37, 211, 102, .35);
}
.fab-action-chat {
    background: var(--black);
    border: 2px solid var(--yellow);
    box-shadow: 0 3px 12px rgba(0, 0, 0, .2);
}
.fab-action-top {
    background: var(--white);
    border: 1px solid var(--gray-200);
    box-shadow: var(--shadow-sm);
    color: var(--black);
}
.fab-action-label {
    position: absolute;
    right: 52px;
    white-space: nowrap;
    background: var(--black);
    color: var(--white);
    font-size: .72rem;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: var(--radius-sm);
    pointer-events: none;
    opacity: 0;
    transition: opacity .2s ease;
}
.fab-action:hover .fab-action-label {
    opacity: 1;
}
@media (max-width: 480px) {
    .fab-container { bottom: 20px; right: 20px; }
    .fab-toggle { width: 52px; height: 52px; }
    .fab-action { width: 40px; height: 40px; }
    .fab-action-label { display: none; }
}

/* Hide old individual buttons */
.back-to-top { display: none !important; }
.whatsapp-float { display: none !important; }
.chatbot-bubble { display: none !important; }

/* ===================================================================
   COOKIE CONSENT BANNER
   =================================================================== */
.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    background: var(--gray-900);
    color: var(--gray-300);
    padding: 20px 24px calc(20px + env(safe-area-inset-bottom, 0px));
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
    font-size: .88rem;
    line-height: 1.5;
    box-shadow: 0 -4px 20px rgba(0,0,0,.3);
    transform: translateY(100%);
    transition: transform .4s ease;
}
.cookie-banner.visible {
    transform: translateY(0);
}
.cookie-banner.hidden {
    transform: translateY(100%);
    pointer-events: none;
}
.cookie-banner p { max-width: 600px; margin: 0; }
.cookie-banner-btn {
    padding: 10px 28px;
    border-radius: var(--radius-pill);
    background: var(--yellow);
    color: var(--black);
    font-weight: 600;
    font-size: .85rem;
    cursor: pointer;
    border: none;
    transition: all var(--transition);
    white-space: nowrap;
}
.cookie-banner-btn:hover {
    background: var(--yellow-dark);
}


/* ===================================================================
   SOCIAL PROOF BAR
   =================================================================== */
.social-proof {
    background: var(--gray-100);
    padding: 56px 0;
}
.social-proof-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    text-align: center;
}
.social-proof-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.social-proof-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4px;
    box-shadow: var(--shadow-sm);
}
.social-proof-num {
    font-family: var(--font-display);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 2rem;
    color: var(--black);
    line-height: 1;
}
.social-proof-label {
    font-size: .82rem;
    color: var(--gray-500);
    font-weight: 500;
}
.social-proof-stars {
    display: flex;
    gap: 2px;
    justify-content: center;
    margin-top: 2px;
}
.social-proof-stars svg {
    width: 16px;
    height: 16px;
    fill: var(--yellow);
}
@media (max-width: 768px) {
    .social-proof-grid { grid-template-columns: repeat(2, 1fr); gap: 32px; }
}
@media (max-width: 480px) {
    .social-proof-grid { grid-template-columns: 1fr; gap: 28px; }
}

/* ===================================================================
   GOOGLE MAPS SECTION
   =================================================================== */
.map-section {
    padding: 0;
}
.map-section iframe {
    width: 100%;
    height: 400px;
    border: 0;
    display: block;
}

/* ===================================================================
   OPERATING HOURS BADGE
   =================================================================== */
.location-hours {
    font-size: .78rem;
    color: var(--gray-500);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.location-hours svg {
    flex-shrink: 0;
}


/* ===================================================================
   PRICING TABLE
   =================================================================== */
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    max-width: 960px;
    margin: 0 auto;
}
.pricing-card {
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    padding: 40px 32px;
    text-align: center;
    position: relative;
    transition: transform var(--transition), box-shadow var(--transition);
    /* Flex column so the CTA button anchors at the bottom of every card,
       regardless of how many features each plan lists. All 3 cards now
       align horizontally at the bottom. */
    display: flex;
    flex-direction: column;
}
.pricing-card > .btn { margin-top: auto; }
.pricing-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
}
.pricing-card-featured {
    border-color: var(--yellow);
    box-shadow: 0 0 0 2px var(--yellow);
}
.pricing-card-badge {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--yellow);
    color: var(--black);
    padding: 4px 20px;
    border-radius: var(--radius-pill);
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    white-space: nowrap;
}
.pricing-card-title {
    font-family: var(--font-display);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 1.2rem;
    letter-spacing: .06em;
    color: var(--gray-500);
    margin-bottom: 16px;
}
.pricing-card-price {
    font-family: var(--font-display);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 3.2rem;
    color: var(--black);
    line-height: 1;
    margin-bottom: 4px;
}
.pricing-card-price span {
    font-size: 1.4rem;
    vertical-align: top;
    color: var(--yellow);
}
.pricing-card-period {
    font-size: .82rem;
    color: var(--gray-400);
    margin-bottom: 24px;
}
.pricing-card-features {
    list-style: none;
    margin-bottom: 28px;
    text-align: left;
}
.pricing-card-features li {
    font-size: .88rem;
    color: var(--gray-600);
    padding: 8px 0;
    border-bottom: 1px solid var(--gray-100);
    display: flex;
    align-items: center;
    gap: 10px;
}
.pricing-card-features li::before {
    content: '✓';
    color: var(--yellow);
    font-weight: 700;
    flex-shrink: 0;
}
@media (max-width: 768px) {
    .pricing-grid { grid-template-columns: 1fr; max-width: 400px; }
}


/* ===================================================================
   FAQ ACCORDION
   =================================================================== */
.faq-list {
    max-width: 800px;
    margin: 0 auto;
}
.faq-item {
    border-bottom: 1px solid var(--gray-200);
}
.faq-question {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--black);
    cursor: pointer;
    text-align: left;
    background: none;
    border: none;
    font-family: var(--font-body);
    gap: 16px;
    transition: color var(--transition);
}
.faq-question:hover { color: var(--yellow-dark); }
.faq-question svg {
    flex-shrink: 0;
    transition: transform var(--transition);
}
.faq-item.open .faq-question svg {
    transform: rotate(180deg);
}
.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height .35s ease, padding .35s ease;
}
.faq-item.open .faq-answer {
    max-height: 300px;
}
.faq-answer p {
    padding: 0 0 20px;
    font-size: .93rem;
    color: var(--gray-500);
    line-height: 1.75;
}


/* ===================================================================
   WHATSAPP FLOATING BUTTON
   =================================================================== */
.whatsapp-float {
    position: fixed;
    bottom: 96px;
    right: 32px;
    z-index: 899;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #25D366;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 20px rgba(37, 211, 102, .4);
    transition: all var(--transition);
    text-decoration: none;
}
.whatsapp-float:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 28px rgba(37, 211, 102, .55);
}
@media (max-width: 480px) {
    .whatsapp-float { bottom: 80px; right: 20px; width: 52px; height: 52px; }
    .back-to-top { bottom: 20px; right: 20px; width: 44px; height: 44px; }
    .chatbot-bubble { bottom: 144px; right: 20px; }
    .chatbot-btn { width: 48px; height: 48px; }
}


/* ===================================================================
   VIDEO SECTION
   =================================================================== */
.video-section {
    background: var(--black);
    padding: 80px 0;
}
.video-wrapper {
    overflow: hidden;
    border-radius: var(--radius);
    max-width: 900px;
    margin: 0 auto;
    box-shadow: var(--shadow-xl);
}
.video-wrapper iframe {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
.video-wrapper video {
    display: block;
    width: 100%;
    height: auto;
    border: 0;
}


/* ===================================================================
   COMPARISON STRIP
   =================================================================== */
.comparison-strip {
    background: var(--black);
    padding: 60px 0;
    overflow: hidden;
}
.comparison-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    text-align: center;
}
.comparison-item {
    padding: 32px 20px;
}
.comparison-other {
    font-size: .82rem;
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-bottom: 8px;
}
.comparison-other-val {
    font-family: var(--font-display);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 1.4rem;
    color: var(--gray-500);
    text-decoration: line-through;
    margin-bottom: 16px;
}
.comparison-vs {
    font-size: .72rem;
    color: var(--gray-600);
    text-transform: uppercase;
    letter-spacing: .1em;
    margin-bottom: 16px;
}
.comparison-mega {
    font-family: var(--font-display);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 1.8rem;
    color: var(--yellow);
    line-height: 1.2;
}
.comparison-mega-sub {
    font-size: .82rem;
    color: var(--gray-400);
    margin-top: 6px;
}
@media (max-width: 768px) {
    .comparison-grid { grid-template-columns: 1fr; gap: 8px; }
    .comparison-item { padding: 24px 20px; border-bottom: 1px solid var(--gray-800); }
}


/* ===================================================================
   TRAINERS SECTION
   =================================================================== */
.trainers-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}
.trainer-card {
    text-align: center;
    padding: 32px 20px;
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    transition: transform var(--transition), box-shadow var(--transition);
}
.trainer-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}
.trainer-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--black);
    margin: 0 auto 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-weight: 800;
    text-transform: uppercase;
    font-size: 1.8rem;
    color: var(--yellow);
    border: 3px solid var(--yellow);
    box-shadow: 0 4px 16px rgba(0, 0, 0, .25);
}
.trainer-name {
    font-family: var(--font-display);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 1.1rem;
    letter-spacing: .04em;
    margin-bottom: 6px;
    color: var(--black);
}
.trainer-role {
    font-size: .85rem;
    color: var(--gray-700);
    margin-bottom: 10px;
    line-height: 1.4;
}
.trainer-specialty {
    font-size: .75rem;
    font-weight: 600;
    color: var(--yellow-dark);
    text-transform: uppercase;
    letter-spacing: .06em;
}
@media (max-width: 768px) {
    .trainers-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .trainers-grid { grid-template-columns: 1fr; max-width: 300px; margin: 0 auto; }
}


/* ===================================================================
   AI CHATBOT BUBBLE (Coming Soon)
   =================================================================== */
.chatbot-bubble {
    position: fixed;
    bottom: 168px;
    right: 32px;
    z-index: 999;
    cursor: pointer;
}
.chatbot-btn {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--black);
    border: 2px solid var(--yellow);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: var(--shadow-lg);
    transition: all var(--transition);
    position: relative;
}
.chatbot-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 28px rgba(245, 197, 24, .3);
}
.chatbot-btn .pulse-ring {
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2px solid var(--yellow);
    animation: chatPulse 2s ease-in-out infinite;
}
@keyframes chatPulse {
    0%, 100% { opacity: .6; transform: scale(1); }
    50% { opacity: 0; transform: scale(1.3); }
}
.chatbot-popup {
    position: absolute;
    bottom: 68px;
    right: 0;
    width: 300px;
    background: var(--white);
    border-radius: var(--radius);
    box-shadow: var(--shadow-xl);
    border: 1px solid var(--gray-200);
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px) scale(.95);
    transition: all .25s ease;
}
.chatbot-bubble.open .chatbot-popup {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}
.chatbot-popup-header {
    background: var(--black);
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.chatbot-popup-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--yellow);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.chatbot-popup-name {
    font-weight: 700;
    font-size: .9rem;
    color: var(--white);
}
.chatbot-popup-status {
    font-size: .72rem;
    color: var(--yellow);
}
.chatbot-popup-body {
    padding: 24px 20px;
    text-align: center;
}
.chatbot-popup-body p {
    font-size: .9rem;
    color: var(--gray-600);
    line-height: 1.6;
    margin-bottom: 16px;
}
.chatbot-coming-soon {
    display: inline-block;
    padding: 6px 18px;
    background: rgba(245, 197, 24, .12);
    color: var(--yellow-dark);
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    border-radius: var(--radius-pill);
}
@media (max-width: 480px) {
    .chatbot-popup { width: 260px; right: -8px; }
}


/* ===================================================================
   SCROLL PROGRESS BAR
   =================================================================== */
.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    background: var(--yellow);
    z-index: 10000;
    width: 0%;
    transition: width .05s linear;
}
body.dark-mode .scroll-progress { background: var(--yellow); }


/* ===================================================================
   SMOOTH PAGE TRANSITIONS
   =================================================================== */
.page-transition {
    animation: pageIn .5s ease-out;
}
@keyframes pageIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Enhanced scroll animations */
[data-animate] {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity .7s ease, transform .7s ease;
}
[data-animate].animated {
    opacity: 1;
    transform: translateY(0);
}
[data-animate="fade-left"] {
    transform: translateX(40px);
}
[data-animate="fade-left"].animated {
    transform: translateX(0);
}
[data-animate="fade-right"] {
    transform: translateX(-40px);
}
[data-animate="fade-right"].animated {
    transform: translateX(0);
}

/* Stagger animation for grid children */
.stagger-children > *:nth-child(1) { transition-delay: 0s; }
.stagger-children > *:nth-child(2) { transition-delay: .1s; }
.stagger-children > *:nth-child(3) { transition-delay: .2s; }
.stagger-children > *:nth-child(4) { transition-delay: .3s; }
.stagger-children > *:nth-child(5) { transition-delay: .4s; }
.stagger-children > *:nth-child(6) { transition-delay: .5s; }
.stagger-children > *:nth-child(7) { transition-delay: .6s; }


/* ===================================================================
   STICKY MOBILE CTA
   =================================================================== */
.sticky-cta {
    display: none;
}
@media (max-width: 768px) {
    .sticky-cta {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 998;
        background: var(--yellow);
        padding: 12px 20px;
        justify-content: center;
        align-items: center;
        gap: 12px;
        box-shadow: 0 -4px 20px rgba(0,0,0,.15);
        transform: translateY(100%);
        transition: transform .3s ease;
    }
    .sticky-cta.visible {
        transform: translateY(0);
    }
    .sticky-cta a {
        font-weight: 700;
        font-size: .9rem;
        color: #0a0a0a;
        text-transform: uppercase;
        letter-spacing: .04em;
        display: flex;
        align-items: center;
        gap: 8px;
    }
    .sticky-cta-phone {
        font-weight: 600;
        font-size: .82rem;
        color: rgba(0,0,0,.6);
        border-left: 1px solid rgba(0,0,0,.15);
        padding-left: 12px;
    }
    body.dark-mode .sticky-cta {
        background: var(--yellow);
    }
    body.dark-mode .sticky-cta a { color: #0a0a0a; }
    body.dark-mode .sticky-cta-phone { color: rgba(0,0,0,.6); }

    /* Push FAB up above sticky CTA */
    .fab-container { bottom: 72px; }

    /* When the cookie banner is visible, hide the sticky CTA so they don't
       fight for the bottom of the screen. The cookie banner is short-lived
       (one click to dismiss); the CTA returns immediately after. */
    body.cookie-visible .sticky-cta { transform: translateY(100%) !important; }
}


/* ===================================================================
   EXTRA DARK MODE POLISH
   =================================================================== */
/* Smooth color transitions when toggling */
body {
    transition: background-color .4s ease, color .4s ease;
}
.navbar, .section, .service-card, .pricing-card, .location-card,
.trainer-card, .transform-card, .footer, .contact-form-wrap,
.faq-item, .why-card, .gym-type-card, .directory-card {
    transition: background-color .4s ease, color .4s ease, border-color .4s ease;
}

/* Dark mode: section title yellow accent bar */
body.dark-mode .section-title::after {
    content: '';
    display: block;
    width: 40px;
    height: 3px;
    background: var(--yellow);
    margin-top: 12px;
}
body.dark-mode .section-header { text-align: center; }
body.dark-mode .section-title::after { margin-left: auto; margin-right: auto; }

/* Dark mode: subtle card glow on hover */
body.dark-mode .service-card:hover,
body.dark-mode .pricing-card:hover,
body.dark-mode .location-card:hover,
body.dark-mode .transform-card:hover,
body.dark-mode .trainer-card:hover {
    box-shadow: 0 8px 32px rgba(245, 197, 24, .08);
    border-color: #3a3a3a;
}

/* Dark mode: form focus glow */
body.dark-mode input:focus,
body.dark-mode textarea:focus,
body.dark-mode select:focus {
    border-color: var(--yellow) !important;
    box-shadow: 0 0 0 3px rgba(245, 197, 24, .15) !important;
}

/* Dark mode: scrollbar */
body.dark-mode::-webkit-scrollbar { width: 8px; }
body.dark-mode::-webkit-scrollbar-track { background: #0e0e0e; }
body.dark-mode::-webkit-scrollbar-thumb { background: #333; border-radius: 4px; }
body.dark-mode::-webkit-scrollbar-thumb:hover { background: #555; }

/* Dark mode: text selection */
body.dark-mode ::selection { background: rgba(245, 197, 24, .3); color: #fff; }

/* ===================================================================
   LOCATIONS FINDER (epikoinonia.html) — list ↔ map linked
   Namespaced under .mg-loc-* so it doesn't collide with the home page's
   existing .location-card cards.
   =================================================================== */
.mg-loc-finder {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
    gap: 28px;
    margin-top: 40px;
    align-items: start;
}
.mg-loc-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    height: 600px;            /* match map height */
}
.mg-loc-list .mg-loc-card {
    flex: 1 1 0;              /* equal share — 7 cards fill 600px */
    min-height: 0;
}

.mg-loc-map {
    position: sticky;
    top: 110px;
    height: 600px;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .08);
    box-shadow: 0 12px 40px rgba(0, 0, 0, .4);
}
#megaMap { width: 100%; height: 100%; background: #0a0a0a; }

.mg-loc-card {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: center;
    gap: 14px;
    background: rgba(255, 255, 255, .03);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: var(--radius);
    padding: 16px 22px;
    cursor: pointer;
    overflow: hidden;
    transition: border-color .3s ease, background .3s ease, padding-left .3s ease, transform .3s ease;
}
.mg-loc-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--yellow);
    transform: translateX(-100%);
    transition: transform .3s cubic-bezier(.4, 0, .2, 1);
}
.mg-loc-card:hover::before,
.mg-loc-card.is-active::before {
    transform: translateX(0);
}
.mg-loc-card:hover,
.mg-loc-card.is-active,
.mg-loc-card:focus-visible {
    border-color: rgba(245, 197, 24, .35);
    background: rgba(245, 197, 24, .06);
    padding-left: 28px;
    outline: none;
}
.mg-loc-card.is-active {
    box-shadow: 0 8px 28px rgba(245, 197, 24, .18);
}
.mg-loc-card__num {
    font-family: var(--font-display);
    font-size: .92rem;
    font-weight: 600;
    color: rgba(255, 255, 255, .3);
    letter-spacing: .04em;
    transition: color .3s ease;
    min-width: 22px;
}
.mg-loc-card:hover .mg-loc-card__num,
.mg-loc-card.is-active .mg-loc-card__num,
.mg-loc-card:focus-visible .mg-loc-card__num {
    color: var(--yellow);
}
.mg-loc-card__name {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    color: var(--white);
    text-transform: uppercase;
    letter-spacing: .04em;
    line-height: 1.25;
    margin: 0;
}
.mg-loc-card__hq {
    background: var(--yellow);
    color: var(--black);
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    font-size: .58rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.mg-loc-card__chevron {
    color: rgba(255, 255, 255, .25);
    font-size: 1.05rem;
    line-height: 1;
    transition: color .3s ease, transform .3s ease;
}
.mg-loc-card:hover .mg-loc-card__chevron,
.mg-loc-card.is-active .mg-loc-card__chevron,
.mg-loc-card:focus-visible .mg-loc-card__chevron {
    color: var(--yellow);
    transform: translateX(4px);
}

/* Map pin — classic teardrop shape: black body, yellow border, yellow M logo */
.mg-pin-wrap { background: transparent !important; border: none !important; }
.mg-pin {
    position: relative;
    width: 36px;
    height: 48px;
    transition: transform .25s ease, filter .25s ease;
    transform-origin: 50% 100%;  /* anchor at the point */
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .45));
}
.mg-pin__shape {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
}
.mg-pin__logo {
    position: absolute;
    top: 7px;
    left: 50%;
    transform: translateX(calc(-50% - 1px));  /* very slight visual centering */
    width: 22px;
    height: 22px;
    object-fit: contain;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
}
.mg-pin__halo {
    position: absolute;
    top: 2px;
    left: 50%;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid var(--yellow);
    transform: translateX(-50%);
    opacity: 0;
    pointer-events: none;
}

/* HQ pin — bigger + permanent yellow glow (no pulse) */
.mg-pin.is-hq {
    width: 50px;
    height: 66px;
    filter:
        drop-shadow(0 0 8px rgba(245, 197, 24, .4))
        drop-shadow(0 0 18px rgba(245, 197, 24, .2))
        drop-shadow(0 4px 10px rgba(0, 0, 0, .5));
}
.mg-pin.is-hq .mg-pin__logo {
    top: 10px;
    width: 32px;
    height: 32px;
    transform: translateX(calc(-50% - 2px));
}
/* Hide the halo since we're not pulsing anymore */
.mg-pin.is-hq .mg-pin__halo { display: none; }

/* Hover / active state */
.leaflet-marker-icon.is-active .mg-pin,
.leaflet-marker-icon:hover .mg-pin {
    transform: scale(1.15);
    filter: drop-shadow(0 6px 14px rgba(245, 197, 24, .8));
    z-index: 1000;
}

/* Mobile: scale pins down so they don't dominate a small map.
   transform-origin: 50% 100% keeps the bottom tip pinned at the
   marker's lat/lng (Leaflet's iconAnchor uses original DOM size). */
@media (max-width: 600px) {
    .mg-pin {
        transform: scale(0.78);
        transform-origin: 50% 100%;
    }
    .mg-pin.is-hq {
        transform: scale(0.82);
    }
    .leaflet-marker-icon.is-active .mg-pin,
    .leaflet-marker-icon:hover .mg-pin {
        transform: scale(0.95);
    }
    .leaflet-marker-icon.is-active .mg-pin.is-hq,
    .leaflet-marker-icon:hover .mg-pin.is-hq {
        transform: scale(1);
    }
}

/* Leaflet popup — zero default padding so our .mg-popup layout renders
   edge-to-edge with a full-bleed photo on top. */
.leaflet-popup-content-wrapper {
    background: #fff;
    border-radius: 14px;
    padding: 0;
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .35), 0 4px 12px rgba(0, 0, 0, .15);
}
.leaflet-popup-content {
    margin: 0;
    width: 260px !important;
    line-height: 1.45;
}
.leaflet-popup-tip {
    background: #fff;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .2);
}
.leaflet-popup-close-button {
    color: #fff !important;
    background: rgba(10, 10, 10, .65) !important;
    border-radius: 50%;
    width: 26px !important;
    height: 26px !important;
    line-height: 24px !important;
    text-align: center;
    top: 10px !important;
    right: 10px !important;
    font-size: 18px !important;
    font-weight: 700;
    z-index: 5;
    text-decoration: none;
    transition: background .2s ease, transform .2s ease;
}
.leaflet-popup-close-button:hover {
    background: rgba(10, 10, 10, .9) !important;
    transform: scale(1.08);
}

/* ---- Popup body layout ---- */
.mg-popup { font-family: var(--font-body, Inter, sans-serif); color: var(--black); }
/* Image container locked to symmetric edges — no side padding/margin
   ever, regardless of what other rules try to do. Width inherited from
   the popup-content (260px), so left/right edges always match. */
.mg-popup__media {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    height: 175px;
    margin: 0;
    padding: 0;
    background: var(--gray-100);
    overflow: hidden;
}
.mg-popup__img {
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    object-fit: cover;
    object-position: center center;
    transition: transform .6s ease;
}
.mg-popup:hover .mg-popup__img { transform: scale(1.04); }
.mg-popup__hq-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: var(--yellow);
    color: var(--black);
    padding: 4px 9px;
    border-radius: var(--radius-pill);
    font-size: .6rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .35);
}
.mg-popup__body {
    padding: 12px 14px 14px;
}
.mg-popup__title {
    font-family: var(--font-display, 'Montserrat', sans-serif);
    font-size: .92rem;
    font-weight: 700;
    color: var(--black);
    margin: 0 0 8px 0;
    text-transform: uppercase;
    letter-spacing: .03em;
    line-height: 1.25;
}
.mg-popup__row {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: .74rem;
    color: var(--gray-700);
    margin-bottom: 4px;
}
.mg-popup__icon {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
    color: var(--yellow-dark);
}
.mg-popup__tel {
    color: var(--black);
    font-weight: 700;
    text-decoration: none;
    transition: color .2s ease;
}
.mg-popup__tel:hover { color: var(--yellow-dark); }
.mg-popup__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 9px 0 0;
}
.mg-popup__chip {
    font-size: .56rem;
    font-weight: 700;
    padding: 3px 7px;
    border-radius: var(--radius-pill);
    background: var(--gray-100);
    color: var(--gray-700);
    text-transform: uppercase;
    letter-spacing: .05em;
    line-height: 1.3;
}
.mg-popup__chip--ex {
    background: rgba(245, 197, 24, .15);
    color: var(--yellow-dark);
    border: 1px solid rgba(245, 197, 24, .4);
}
.mg-popup__chip--pl {
    background: rgba(236, 72, 153, .12);
    color: #be185d;
    border: 1px solid rgba(236, 72, 153, .35);
}
.mg-popup__dirs {
    display: block;
    margin-top: 11px;
    padding: 9px 14px;
    background: var(--yellow);
    color: var(--black);
    border-radius: 8px;
    font-size: .74rem;
    font-weight: 800;
    text-decoration: none;
    text-align: center;
    letter-spacing: .04em;
    transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
    box-shadow: 0 2px 0 rgba(0, 0, 0, .08);
}
.mg-popup__dirs:hover {
    background: var(--yellow-dark);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(245, 197, 24, .4);
}

/* ---- Reset / View All button overlay on the map (bottom-left) ---- */
.mg-map-reset {
    position: absolute;
    bottom: 14px;
    left: 14px;
    z-index: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px 8px 10px;
    background: var(--white);
    color: var(--black);
    border: none;
    border-radius: var(--radius-pill);
    font-family: var(--font-body, Inter, sans-serif);
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .35), 0 2px 4px rgba(0, 0, 0, .2);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity .25s ease, visibility .25s ease, transform .25s ease, background .2s ease;
}
.mg-map-reset.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.mg-map-reset:hover {
    background: var(--yellow);
    transform: translateY(-1px);
    box-shadow: 0 8px 22px rgba(245, 197, 24, .5);
}
.mg-map-reset svg { color: var(--black); }
/* .mg-loc-map already uses position:sticky which establishes a containing
   block for our absolute reset button — no extra position rule needed. */

/* Mobile: stack list above map */
@media (max-width: 900px) {
    .mg-loc-finder {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .mg-loc-list {
        height: auto;       /* let cards size naturally on mobile */
    }
    .mg-loc-list .mg-loc-card {
        flex: 0 0 auto;
    }
    .mg-loc-map {
        position: relative;
        top: auto;
        height: 380px;
    }
}
@media (max-width: 600px) {
    .mg-loc-map { height: 320px; }
    .mg-loc-card { padding: 12px 16px; }
    .mg-loc-card__name { font-size: .92rem; }
}

/* ===================================================================
   HERO LOCATIONS MARQUEE — replaces the old 3-stat block
   =================================================================== */
.hero-locations {
    width: 100%;
    text-align: center;
    margin-top: 12px;
}
.hero-locations-label {
    font-family: var(--font-body);
    font-size: .72rem;
    color: rgba(255, 255, 255, .5);
    text-transform: uppercase;
    letter-spacing: .14em;
    margin-bottom: 18px;
    font-weight: 500;
}
.hero-locations-marquee {
    position: relative;
    overflow: hidden;
    width: 100%;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
}
.hero-locations-track {
    display: inline-flex;
    align-items: center;
    gap: 28px;
    white-space: nowrap;
    animation: hero-loc-scroll 42s linear infinite;
    will-change: transform;
}
.hero-locations-marquee:hover .hero-locations-track {
    animation-play-state: paused;
}
.hero-locations-track .loc {
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--white);
    text-transform: uppercase;
    letter-spacing: .08em;
    text-decoration: none;
    transition: color .25s ease, transform .25s ease;
    flex-shrink: 0;
}
.hero-locations-track .loc:hover {
    color: var(--yellow);
    transform: translateY(-2px);
}
.hero-locations-track .loc-dot {
    color: var(--yellow);
    font-size: .55rem;
    line-height: 1;
    flex-shrink: 0;
    opacity: .9;
}
@keyframes hero-loc-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
@media (max-width: 768px) {
    .hero-locations-track { gap: 22px; }
    .hero-locations-track .loc { font-size: 1.05rem; }
    .hero-locations-label { font-size: .68rem; margin-bottom: 14px; }
}
@media (prefers-reduced-motion: reduce) {
    .hero-locations-track {
        animation: none;
        flex-wrap: wrap;
        justify-content: center;
        white-space: normal;
    }
}

/* Tons emphasis in transformations subtitle */
.section-subtitle .emph {
    font-weight: 800;
    color: var(--black);
    white-space: nowrap;
}
.section-dark .section-subtitle .emph,
body.dark-mode .section-subtitle .emph {
    color: var(--yellow);
}

/* ===================================================================
   CUSTOM CURSOR (native, retina-aware)
   =================================================================== */
@media (hover: hover) and (pointer: fine) {
    html, body {
        cursor: url('assets/MegaGymPhotos/mega-gym-m-cursor.png') 8 8, auto;
    }
    a, button, [role="button"], label[for], select,
    input[type=checkbox], input[type=radio],
    input[type=submit], input[type=button], input[type=reset],
    [onclick], [tabindex]:not([tabindex="-1"]) {
        cursor: url('assets/MegaGymPhotos/mega-gym-m-cursor-pointer.png') 8 8, pointer !important;
    }
    /* Keep text I-beam in form fields for usability */
    input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=reset]),
    textarea { cursor: text !important; }
}

/* ===================================================================
   MOBILE / SMALL-DEVICE READABILITY FIXES
   Comprehensive pass to ensure perfect readability on phones and small
   tablets. Targets the issues identified in the mobile audit.
   =================================================================== */

/* --- Hero title — tighter on phones so long Greek lines don't wrap weird ---
   "ΓΙΑΤΙ Η ΠΟΙΟΤΗΤΑ ΣΤΗ ΖΩΗ ΜΟΥ" is ~22 chars and was wrapping to 3 lines
   with an orphaned word at the previous floor. Lower floor + tighter
   letter-spacing keeps it to a clean 2-line layout on iPhone-class widths. */
@media (max-width: 600px) {
    /* Use SMALL viewport height on mobile so the hero stays a fixed size
       as iOS Safari's URL bar collapses. With 100dvh, dvh grows during
       scroll which stretches the hero and re-fits the cover image —
       reads visually as the picture zooming in. svh = smallest viewport
       (URL bar showing), so the hero never resizes mid-scroll. */
    .hero { min-height: 100vh; min-height: 100svh; height: 100svh; }
    /* Push content below the fixed navbar (~64px) without forcing the hero
       taller than the viewport. flex-start + top padding > center because
       center alignment overflows when content is tall. */
    .hero {
        align-items: flex-start;
        padding-top: 84px;
        padding-bottom: 24px;
        box-sizing: border-box;
    }
    .hero-line-1,
    .hero-line-2 {
        font-size: clamp(1.3rem, 6.2vw, 2rem);
        letter-spacing: .02em;
        line-height: 1.08;
    }
    .hero-title { margin-bottom: 12px; word-spacing: -0.04em; }
    .hero-badge { font-size: .64rem; padding: 5px 13px; margin-bottom: 12px; }
    .hero-content {
        padding: 22px 16px 24px;
        max-width: 100%;
        /* Less opaque on mobile so the gym photo behind reads through */
        background: rgba(10, 10, 10, .28);
    }
    /* Tighter CTAs spacing — was wrapping/overflowing on small phones */
    .hero-ctas { gap: 10px; margin-bottom: 18px; }
    .hero-ctas .btn,
    .hero-ctas .btn-yellow,
    .hero-ctas .btn-outline { padding: 10px 18px; font-size: .78rem; }
    /* Hero locations marquee tighter */
    .hero-locations { margin-top: 4px; }
    .hero-locations-label { margin-bottom: 6px; }
}
@media (max-width: 400px) {
    .hero-line-1,
    .hero-line-2 {
        font-size: clamp(1.15rem, 7vw, 1.6rem);
        letter-spacing: 0;
    }
    .hero { padding-top: 76px; padding-bottom: 18px; }
    .hero-content { padding: 16px 14px 18px; }
    .hero-badge { margin-bottom: 10px; }
    .hero-title { margin-bottom: 10px; }
    .hero-ctas { margin-bottom: 14px; }
}
@media (max-width: 340px) {
    .hero-line-1,
    .hero-line-2 { font-size: 1.05rem; }
}

/* --- Hero locations marquee — fit on narrow phones --- */
@media (max-width: 600px) {
    .hero-locations-track { gap: 18px; }
    .hero-locations-track .loc { font-size: .9rem; letter-spacing: .04em; }
    .hero-locations-track .loc-dot { font-size: .5rem; }
    .hero-locations-label { font-size: .62rem; margin-bottom: 12px; }
}
@media (max-width: 400px) {
    .hero-locations-track { gap: 14px; }
    .hero-locations-track .loc { font-size: .8rem; }
}

/* --- Service cards on mobile — override the desktop subgrid layout and
   use plain flex column so the button can't crash into the pills above ---
   The desktop rule .services-overview .service-card uses display: grid
   with subgrid rows, which collapses awkwardly on narrow widths. Higher
   specificity here wins. */
@media (max-width: 600px) {
    .services-overview .service-card,
    .service-card {
        display: flex !important;
        flex-direction: column;
        align-items: center;
        padding: 22px 18px 24px;
        gap: 10px;
        grid-template-rows: none;       /* defeat subgrid */
        grid-row: auto;
    }
    .services-overview .service-card h3,
    .service-card h3 { min-height: auto; font-size: 1.1rem; margin-bottom: 0; }
    .services-overview .service-card p,
    .service-card p { min-height: auto; margin-bottom: 0; font-size: .8rem; line-height: 1.45; }
    /* Service icons smaller on phone */
    .service-icon svg { width: 36px; height: 36px; }
    .service-badge { font-size: .58rem; padding: 4px 10px; letter-spacing: .08em; }
    /* Program pills tighter */
    .services-overview .service-programs li,
    .service-programs li { font-size: .65rem; padding: 4px 10px; }
    /* Section header */
    .services-overview .section-tag,
    .services-overview .section-title,
    .services-overview .section-subtitle { /* ensure section header isn't too large */ }
    .services-overview .section-title { font-size: 1.5rem !important; }
    .services-overview .section-subtitle { font-size: .85rem !important; }
    /* Services grid gap tighter */
    .services-overview .services-grid { gap: 16px; }
    .services-overview .service-card .service-programs,
    .service-card .service-programs {
        gap: 6px;
        margin-bottom: 0;
        padding-bottom: 8px;
        align-self: center;
    }
    /* Force a guaranteed gap between pills and the button — overrides the
       desktop .services-overview rule that zeroes margin-top */
    .services-overview .service-card > .btn,
    .service-card > .btn {
        margin-top: auto !important;
        margin-bottom: 0;
        padding-top: 14px;
        padding-bottom: 14px;
        position: relative;
        z-index: 2;
        flex-shrink: 0;
        align-self: center;
    }
    .service-badge {
        position: static;
        margin: 0 auto;
        align-self: center;
    }
    .service-icon { margin-bottom: 0; }
}

/* --- Phone CTA locations grid (dokimastiki) — switch from flex-wrap with
   min-width to proper responsive grid so 7 items don't overflow --- */
@media (max-width: 900px) {
    .phone-cta-locations {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px 12px;
    }
    .phone-cta-item { min-width: 0; }
}
@media (max-width: 480px) {
    .phone-cta-locations { grid-template-columns: 1fr; gap: 14px; }
}

/* --- Locations finder map — prevent it eating the whole viewport on phones --- */
@media (max-width: 600px) {
    .mg-loc-map { height: 280px; }
    .mg-loc-list { gap: 6px; }
    .mg-loc-finder { gap: 14px; margin-top: 24px; }
    /* Compact popup on phones — image hidden so the popup is small and
       the map stays visible. HQ pill moves up to sit at the very top. */
    .leaflet-popup-content { width: 220px !important; line-height: 1.4; }
    .mg-popup__media { display: none; }
    .mg-popup__body { padding: 12px 14px 12px; position: relative; }
    .mg-popup__title { font-size: .82rem; margin-bottom: 6px; padding-right: 38px; }
    .mg-popup__row { font-size: .68rem; gap: 5px; margin-bottom: 3px; }
    .mg-popup__icon { width: 11px; height: 11px; }
    .mg-popup__chip { font-size: .5rem; padding: 2px 6px; }
    .mg-popup__dirs { padding: 7px 12px; font-size: .68rem; margin-top: 9px; }
    /* HQ badge re-anchored inside body since the image container is gone */
    .mg-popup__hq-badge {
        top: 10px;
        right: 10px;
        left: auto;
        padding: 3px 8px;
        font-size: .54rem;
        box-shadow: none;
    }
}
@media (max-width: 400px) {
    .mg-loc-map { height: 240px; }
    .leaflet-popup-content { width: 200px !important; }
}

/* --- Locations cards — chevron + HQ pill don't get crushed on narrow phones --- */
@media (max-width: 600px) {
    .mg-loc-card {
        padding: 9px 14px;
        gap: 8px;
        border-radius: 6px;
    }
    .mg-loc-card__num { font-size: .78rem; min-width: 18px; }
    .mg-loc-card__name { font-size: .85rem; letter-spacing: .02em; }
    .mg-loc-card__hq { font-size: .52rem; padding: 2px 7px; letter-spacing: .08em; }
    .mg-loc-card__chevron { font-size: .9rem; }
    .mg-loc-card:hover,
    .mg-loc-card.is-active,
    .mg-loc-card:focus-visible { padding-left: 18px; }
}
@media (max-width: 400px) {
    .mg-loc-card { padding: 8px 12px; gap: 6px; }
    .mg-loc-card__name { font-size: .8rem; }
    .mg-loc-card__num { font-size: .72rem; min-width: 16px; }
}
/* Reset/View All button compact on small maps */
@media (max-width: 600px) {
    .mg-map-reset {
        bottom: 10px;
        left: 10px;
        padding: 6px 11px 6px 8px;
        font-size: .68rem;
    }
}

/* --- Trainers grid — 2 cards per row on phones (2x2) instead of 1 column ---
   Cards shrink + content tightens so two fit comfortably on a 375px viewport. */
@media (max-width: 768px) {
    .trainers-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
    .trainer-card { padding: 22px 14px; }
    .trainer-avatar { width: 60px; height: 60px; font-size: 1.4rem; margin-bottom: 12px; border-width: 2px; }
    .trainer-name { font-size: .92rem; }
    .trainer-role { font-size: .75rem; line-height: 1.35; margin-bottom: 8px; }
    .trainer-specialty { font-size: .65rem; }
}
@media (max-width: 380px) {
    .trainer-card { padding: 18px 10px; }
    .trainer-avatar { width: 52px; height: 52px; font-size: 1.2rem; }
    .trainer-name { font-size: .85rem; }
    .trainer-role { font-size: .7rem; }
}

/* --- Nav CTA — the Greek "Κλείσε Ραντεβού" is much wider than English
   "Book Trial". Tighten on mobile so it doesn't crowd the toggle. --- */
@media (max-width: 768px) {
    .nav-cta {
        font-size: .7rem;
        padding: 9px 16px;
        min-width: 0;
        letter-spacing: .03em;
    }
}
@media (max-width: 480px) {
    .nav-cta { font-size: .65rem; padding: 8px 12px; }
}

/* --- Section padding — give phones a bit more breathing room without
   the ~100px desktop padding eating viewport --- */
@media (max-width: 600px) {
    .section { padding: 56px 0; }
    .phone-cta-section.section { padding: 40px 0; }
    .section-header { margin-bottom: 32px; }
}

/* --- Pricing grid — stack to single column on phones, full-width buttons --- */
@media (max-width: 600px) {
    .pricing-grid { grid-template-columns: 1fr; gap: 18px; }
    .pricing-card { padding: 32px 24px; }
}

/* --- Form rows — make sure inputs/selects are full-width and tappable --- */
@media (max-width: 600px) {
    .form-row,
    .form-group { width: 100%; }
    .form-row input,
    .form-row select,
    .form-row textarea,
    .form-group input,
    .form-group select,
    .form-group textarea { font-size: 16px; /* prevents iOS auto-zoom on focus */ }
}

/* --- Footer — proper stacking + alignment on phones --- */
@media (max-width: 600px) {
    .footer-top { gap: 28px; }
    .footer-brand p { max-width: 100%; }
    .social-row { justify-content: flex-start; }
}

/* --- Image strip — single column on phones, no horizontal overflow --- */
@media (max-width: 600px) {
    .image-strip-grid { grid-template-columns: 1fr; gap: 8px; }
}

/* --- Locations finder section header tag spacing --- */
@media (max-width: 600px) {
    .locations-finder-section .section-header.center { margin-bottom: 24px; }
}

/* ===================================================================
   PT OPTION META — clean label + values block (replaces the old
   pill-cluttered .pt-location-tags / .pt-program-tags layout)
   =================================================================== */
.pt-opt-meta {
    margin: 14px 0 22px;
    padding: 14px 18px;
    background: rgba(245, 197, 24, 0.06);
    border-left: 3px solid var(--yellow);
    border-radius: 4px;
}
.pt-opt-meta dt {
    font-family: var(--font-display, 'Montserrat', sans-serif);
    font-size: .72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--yellow-dark);
    margin: 0;
}
.pt-opt-meta dt:not(:first-child) { margin-top: 12px; }
.pt-opt-meta dd {
    margin: 4px 0 0;
    font-size: .92rem;
    color: var(--gray-800);
    line-height: 1.5;
}
.pt-opt-meta dd span {
    font-weight: 600;
    color: var(--black);
}

/* Make the CTA button feel premium on this page */
.pt-opt-cta {
    margin-top: 4px;
    padding: 14px 32px;
    font-size: .92rem;
    font-weight: 700;
    letter-spacing: .04em;
    box-shadow: 0 4px 14px rgba(245, 197, 24, 0.3);
    transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.pt-opt-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(245, 197, 24, 0.45);
}

/* Dark mode variant */
body.dark-mode .pt-opt-meta {
    background: rgba(245, 197, 24, 0.08);
    border-left-color: var(--yellow);
}
body.dark-mode .pt-opt-meta dd { color: #ddd; }
body.dark-mode .pt-opt-meta dd span { color: #fff; }

/* ===================================================================
   MOBILE NAV — premium full-screen overlay redesign
   Replaces the plain white sliding panel. Brand-black bg with subtle
   yellow glow, staggered item entrance, indented dropdown, and
   bottom-anchored extras (theme, lang, CTA).
   =================================================================== */
@media (max-width: 768px) {
    /* Override the prior plain-white .nav-links */
    .navbar .nav-links {
        position: fixed;
        inset: 0;
        z-index: 999;
        /* Frosted-glass feel — hero photos blur through with subtle
           translucency. Lower alpha = more see-through. */
        background: linear-gradient(180deg,
            rgba(5, 5, 5, 0.88) 0%,
            rgba(14, 14, 14, 0.85) 55%,
            rgba(26, 20, 8, 0.85) 100%);
        flex-direction: column;
        justify-content: flex-start;
        align-items: stretch;
        gap: 0;
        padding: 96px 28px 220px;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-12px);
        transition: opacity .35s cubic-bezier(.4, 0, .2, 1),
                    visibility .35s,
                    transform .35s cubic-bezier(.4, 0, .2, 1);
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        backdrop-filter: blur(28px) saturate(1.4);
        -webkit-backdrop-filter: blur(28px) saturate(1.4);
    }
    .navbar .nav-links.active {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }
    /* Soft yellow glow in the top-right corner — adds brand atmosphere */
    .navbar .nav-links::before {
        content: '';
        position: absolute;
        top: -180px;
        right: -180px;
        width: 480px;
        height: 480px;
        background: radial-gradient(circle, rgba(245, 197, 24, .18) 0%, transparent 70%);
        pointer-events: none;
        z-index: 0;
    }
    /* And a subtle bottom-left counter-glow */
    .navbar .nav-links::after {
        content: '';
        position: absolute;
        bottom: -160px;
        left: -160px;
        width: 360px;
        height: 360px;
        background: radial-gradient(circle, rgba(245, 197, 24, .07) 0%, transparent 70%);
        pointer-events: none;
        z-index: 0;
    }

    /* Each <li> staggers in when menu opens */
    .navbar .nav-links > li {
        list-style: none;
        position: relative;
        z-index: 1;
        opacity: 0;
        transform: translateX(-16px);
        transition: opacity .4s ease, transform .4s cubic-bezier(.4, 0, .2, 1);
    }
    .navbar .nav-links.active > li { opacity: 1; transform: translateX(0); }
    .navbar .nav-links.active > li:nth-child(1) { transition-delay: 0.10s; }
    .navbar .nav-links.active > li:nth-child(2) { transition-delay: 0.16s; }
    .navbar .nav-links.active > li:nth-child(3) { transition-delay: 0.22s; }
    .navbar .nav-links.active > li:nth-child(4) { transition-delay: 0.28s; }
    .navbar .nav-links.active > li:nth-child(5) { transition-delay: 0.34s; }
    .navbar .nav-links.active > li:nth-child(6) { transition-delay: 0.40s; }

    /* Top-level nav links — bold, uppercase, large */
    .navbar .nav-links > li > a {
        display: block;
        font-family: var(--font-display, 'Montserrat', sans-serif);
        font-size: 1.45rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .04em;
        color: var(--white) !important;
        padding: 16px 0;
        border-bottom: 1px solid rgba(255, 255, 255, .07);
        position: relative;
        transition: color .25s ease, padding-left .3s ease;
    }
    .navbar .nav-links > li > a::before {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        width: 3px;
        height: 0;
        background: var(--yellow);
        transform: translateY(-50%);
        transition: height .3s ease;
    }
    .navbar .nav-links > li > a:hover,
    .navbar .nav-links > li > a.active {
        color: var(--yellow) !important;
        padding-left: 14px;
    }
    .navbar .nav-links > li > a:hover::before,
    .navbar .nav-links > li > a.active::before {
        height: 60%;
    }
    .navbar .nav-links a::after { display: none; }  /* kill desktop yellow underline */

    /* Mobile dropdown — indented sub-items */
    .navbar .nav-dropdown-menu {
        position: static;
        transform: none;
        background: transparent;
        box-shadow: none;
        border: none;
        border-radius: 0;
        padding: 4px 0 12px;
        margin: 0;
        opacity: 1;
        visibility: visible;
        min-width: 0;
        list-style: none;
    }
    .navbar .nav-dropdown-menu li { list-style: none; }
    .navbar .nav-dropdown-menu a {
        font-family: var(--font-body, 'Inter', sans-serif) !important;
        font-size: 1rem !important;
        font-weight: 500 !important;
        text-transform: none !important;
        letter-spacing: 0 !important;
        color: rgba(255, 255, 255, .55) !important;
        padding: 9px 0 9px 18px !important;
        display: block;
        border-left: 2px solid rgba(255, 255, 255, .1);
        transition: color .25s ease, border-color .25s ease, padding-left .25s ease;
    }
    .navbar .nav-dropdown-menu a:hover,
    .navbar .nav-dropdown-menu a.active {
        color: var(--yellow) !important;
        border-left-color: var(--yellow);
        padding-left: 22px !important;
    }
    .navbar .nav-dropdown-toggle svg { display: none; }

    /* "Services" parent label — non-interactive on mobile. Acts as a
       section heading; the sub-items below are the actual nav targets.
       pointer-events: none on the <a> only — siblings (sub-items) are
       still clickable. */
    .navbar .nav-dropdown > .nav-dropdown-toggle {
        pointer-events: none;
        cursor: default;
        color: rgba(255, 255, 255, .55) !important;
        font-size: .82rem !important;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .12em !important;
        padding: 8px 0 4px !important;
        border-bottom: none !important;
    }
    .navbar .nav-dropdown > .nav-dropdown-toggle::before {
        display: none;             /* no yellow accent bar */
    }
    .navbar .nav-dropdown > .nav-dropdown-toggle:hover {
        color: rgba(255, 255, 255, .55) !important;
        padding-left: 0 !important;
    }

    /* Cancel the desktop :hover transform on the dropdown menu — without
       this, mouse-hovering Services on a mobile viewport would re-apply
       translateX(-50%) and slide the submenu off to the left. */
    .navbar .nav-dropdown:hover .nav-dropdown-menu,
    .navbar .nav-dropdown:focus-within .nav-dropdown-menu {
        transform: none !important;
        position: static !important;
    }

    /* When the mobile menu is open, drop the navbar's backdrop-filter.
       backdrop-filter on .navbar.scrolled creates a new containing block,
       which would trap our fixed-position menu inside the 64px navbar
       instead of letting it cover the full viewport. Removing it while
       the menu is open keeps the menu anchored to the viewport at any
       scroll position. */
    body.nav-open .navbar,
    body.nav-open .navbar.scrolled {
        background: transparent !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        box-shadow: none !important;
    }

    /* Hide the cookie banner + sticky CTA + FAB while the mobile menu
       is open — they were poking through the bottom of the overlay. */
    body.nav-open .cookie-banner,
    body.nav-open .sticky-cta,
    body.nav-open .fab-container {
        display: none !important;
    }

    /* Hamburger / X button — visible above the menu, switches to white spans when open */
    .nav-toggle.active span {
        background: var(--white) !important;
    }

    /* === Bottom-anchored extras when menu is open === */
    /* Hide nav-right in the navbar header (it'll show inside the menu instead) */
    .navbar .nav-right {
        gap: 10px;
    }
    .navbar .nav-right .lang-toggle,
    .navbar .nav-right .theme-toggle {
        font-size: .72rem;
    }
    /* When menu is open, slide nav-right into the bottom of the menu */
    .navbar .nav-links.active ~ .nav-right {
        position: fixed;
        bottom: 28px;
        left: 28px;
        right: 28px;
        z-index: 1000;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        opacity: 0;
        animation: navExtrasIn .5s cubic-bezier(.4, 0, .2, 1) .42s forwards;
    }
    .navbar .nav-links.active ~ .nav-right .theme-toggle,
    .navbar .nav-links.active ~ .nav-right .lang-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        height: 46px;
        font-size: .82rem;
        background: rgba(255, 255, 255, .06);
        border: 1px solid rgba(255, 255, 255, .12);
        color: var(--white);
        border-radius: var(--radius-pill);
    }
    .navbar .nav-links.active ~ .nav-right .lang-toggle .lang-active {
        color: var(--yellow);
    }
    .navbar .nav-links.active ~ .nav-right .nav-cta {
        display: flex !important;
        grid-column: 1 / -1;
        align-items: center;
        justify-content: center;
        height: 52px;
        width: 100%;
        font-size: .95rem;
        font-weight: 800;
        letter-spacing: .04em;
        padding: 0 24px;
        box-shadow: 0 8px 22px rgba(245, 197, 24, .35);
    }
    @keyframes navExtrasIn {
        from { opacity: 0; transform: translateY(12px); }
        to   { opacity: 1; transform: translateY(0); }
    }

    /* Dark-mode override now lands cleanly on the new dark menu (the
       prior fix that injected gray bg is no longer needed). */
    body.dark-mode .navbar .nav-links { background: linear-gradient(180deg, #050505 0%, #0e0e0e 55%, #1a1408 100%); }
    body.dark-mode .navbar .nav-links a { color: var(--white) !important; }
}

/* ===================================================================
   PILATES — mobile compaction
   Both intro-highlights (3 yellow boxes) and benefits-grid (4 numbered
   cards) were taking too much vertical space when stacked single-column.
   Keep them as compact grid layouts instead.
   =================================================================== */

/* 3 yellow highlight boxes — keep 3-across on mobile, just smaller */
@media (max-width: 768px) {
    .intro-highlights {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 8px;
    }
    .intro-highlight-item {
        padding: 16px 8px;
    }
    .intro-highlight-icon {
        width: 32px;
        height: 32px;
        margin-bottom: 8px;
    }
    .intro-highlight-item h3 {
        font-size: .82rem;
        margin-bottom: 4px;
        letter-spacing: .02em;
    }
    .intro-highlight-item p {
        font-size: .66rem;
        line-height: 1.3;
    }
}
@media (max-width: 400px) {
    .intro-highlights { gap: 6px; }
    .intro-highlight-item { padding: 12px 6px; }
    .intro-highlight-icon { width: 26px; height: 26px; margin-bottom: 6px; }
    .intro-highlight-item h3 { font-size: .72rem; }
    .intro-highlight-item p { font-size: .58rem; }
}

/* 4 numbered benefit cards — 2x2 grid on mobile (was stacking 1 per row) */
@media (max-width: 768px) {
    .benefits-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px;
    }
    .benefit-card {
        padding: 16px 14px;
    }
    .benefit-card__number {
        font-size: 1.5rem;
        margin-bottom: 6px;
    }
    .benefit-card__title {
        font-size: .95rem;
        margin-bottom: 6px;
        line-height: 1.25;
    }
    .benefit-card__text {
        font-size: .76rem;
        line-height: 1.4;
    }
}
@media (max-width: 400px) {
    .benefits-grid { gap: 8px; }
    .benefit-card { padding: 12px 10px; }
    .benefit-card__number { font-size: 1.25rem; }
    .benefit-card__title { font-size: .85rem; }
    .benefit-card__text { font-size: .7rem; }
}

/* ===================================================================
   HOME PAGE — bottom-section compaction on mobile
   Pricing, Trainers, FAQ, Footer were all taking too much vertical space.
   =================================================================== */

/* --- Pricing cards: tight padding, smaller numbers --- */
@media (max-width: 600px) {
    .pricing-grid { gap: 14px; }
    .pricing-card { padding: 24px 20px 22px; }
    .pricing-card-title { font-size: 1rem !important; margin-bottom: 8px; letter-spacing: .04em; }
    .pricing-card-price { font-size: 2.2rem !important; line-height: 1; }
    .pricing-card-price span { font-size: 1.2rem; }
    .pricing-card-period { font-size: .72rem !important; margin-bottom: 16px; }
    .pricing-card-features { margin-bottom: 16px; }
    .pricing-card-features li {
        font-size: .78rem !important;
        padding: 6px 0 !important;
    }
    .pricing-card-badge { font-size: .58rem; padding: 3px 12px; top: -10px; }
    .pricing-card > .btn {
        padding: 11px 24px !important;
        font-size: .8rem !important;
    }
}
@media (max-width: 400px) {
    .pricing-card { padding: 20px 16px 18px; }
    .pricing-card-price { font-size: 2rem !important; }
    .pricing-card-features li { font-size: .72rem !important; padding: 5px 0 !important; }
}

/* --- Trainers (Our Team) — even tighter --- */
@media (max-width: 600px) {
    .trainers-grid { gap: 10px; }
    .trainer-card { padding: 16px 10px; }
    .trainer-avatar {
        width: 50px;
        height: 50px;
        font-size: 1.15rem;
        margin-bottom: 10px;
        border-width: 2px;
    }
    .trainer-name { font-size: .82rem; margin-bottom: 4px; }
    .trainer-role { font-size: .68rem; line-height: 1.3; margin-bottom: 6px; }
    .trainer-specialty { font-size: .58rem; letter-spacing: .04em; }
}

/* --- FAQ — compact accordion --- */
@media (max-width: 600px) {
    .faq-item { margin-bottom: 0; }
    .faq-question {
        padding: 14px 0 !important;
        font-size: .9rem !important;
    }
    .faq-answer p {
        font-size: .82rem !important;
        line-height: 1.5;
        padding-bottom: 14px;
    }
}

/* --- Footer — compact on mobile --- */
@media (max-width: 768px) {
    .footer { padding: 36px 0 20px; }
    .footer-top { gap: 24px; }
    .footer-brand p { font-size: .78rem; }
    .footer-col h4 { font-size: .78rem; margin-bottom: 12px; }
    .footer-col ul { gap: 6px; }
    .footer-col a, .footer-col span { font-size: .76rem; }
    .footer-bottom { padding-top: 20px; font-size: .7rem; }
    .footer-logo-img { height: 32px; }
    .social-row { gap: 8px; margin-top: 16px; }
    .social-btn { width: 36px; height: 36px; }
    .social-btn svg { width: 14px; height: 14px; }
}
@media (max-width: 480px) {
    .footer-top {
        grid-template-columns: 1fr 1fr;
        gap: 18px;
    }
    .footer-brand { grid-column: 1 / -1; }
}

/* --- Section spacing on mobile — global tightening --- */
@media (max-width: 600px) {
    .section { padding: 44px 0; }
    .section-header { margin-bottom: 24px; }
    .section-tag { font-size: .68rem; }
    .section-title { font-size: 1.6rem !important; }
    .section-subtitle { font-size: .82rem; }
}

/* --- Social proof (Instagram / Facebook / etc. counters) — 2x2 on mobile --- */
@media (max-width: 768px) {
    .social-proof-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 18px;
    }
    .social-proof { padding: 36px 0; }
    .social-proof-num { font-size: 1.6rem; }
    .social-proof-label { font-size: .72rem; }
    .social-proof-icon svg { width: 28px; height: 28px; }
}
@media (max-width: 400px) {
    .social-proof-grid { gap: 12px; }
    .social-proof-num { font-size: 1.4rem; }
    .social-proof-label { font-size: .66rem; }
}
@media (max-width: 400px) {
    .section { padding: 36px 0; }
    .section-title { font-size: 1.4rem !important; }
}