:root {
    --ls-blue: #00b4d8;
    --ls-blue-deep: #0077b6;
    --ls-blue-ink: #023e58;
    --ls-sand: #f4a261;
    --ls-ink: #2b3138;
    --ls-muted: #5d6874;
    --ls-surface: #f6fafc;
    --ls-radius: 14px;
    --ls-shadow-sm: 0 2px 10px rgba(2, 62, 88, 0.07);
    --ls-shadow: 0 10px 30px rgba(2, 62, 88, 0.10);
    --ls-shadow-lg: 0 22px 48px rgba(0, 119, 182, 0.20);
}

body {
    font-family: 'Roboto', sans-serif;
    color: var(--ls-ink);
    font-weight: 500;
    line-height: 1.65;
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
}

/* <picture> is a wrapper only - keep it out of the box tree so images lay out
   exactly as a bare <img> did. */
picture {
    display: contents;
}

/* Every responsive image gets this. It guarantees CSS declares a width, which
   is what stops the `sizes` attribute from being able to drive layout.
   `display:block` avoids the inline baseline gap, but a block-level image no
   longer responds to `text-center` on its parent - which silently pushed the
   header logos (and any image narrower than its column) to the left. The auto
   inline margins restore centring; they are a no-op at width:100%. */
.ls-img {
    width: 100%;
    height: auto;
    display: block;
    margin-inline: auto;
}

.skip-link {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    z-index: 3000;
    background: #fff;
    color: var(--ls-blue-deep);
    padding: 0.6rem 1rem;
    border-radius: 8px;
    font-weight: 700;
    box-shadow: var(--ls-shadow);
}

/* ====================== HEADER ====================== */
.header {
    border-bottom: 4px solid #00b4d8;
    padding: 8px 0;
    background: white;
}

.logo-row img {
    max-height: 72px;
    width: auto;
    transition: transform 0.3s;
}

.logo-row img:hover {
    transform: scale(1.06);
}

/* ====================== NAVIGATION ====================== */
.nav-link {
    padding: 12px 20px !important;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-size: 1.05rem;
}

.nav-link:hover,
.nav-link.active {
    color: #00b4d8 !important;
    transform: translateY(-2px);
}

/* ====================== HERO ====================== */
.hero {
    height: 65vh;
    min-height: 420px;
    background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
                url('assets/Homepage-Gallery/NoahAidenGroup-1400.jpg') center/cover no-repeat;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    text-align: center;
    position: relative;
}

/* ====================== PHILOSOPHY BANNER ====================== */
.philosophy-banner {
    background: linear-gradient(135deg, #0077b6, #00b4d8);
    color: white;
    padding: 20px 0;
    text-align: center;
    font-weight: 700;
    letter-spacing: 1px;
}

/* ====================== BUTTONS ====================== */
.btn-shark {
    background: linear-gradient(135deg, #00b4d8, #0077b6);
    color: white;
    font-weight: 800;
    letter-spacing: 1.5px;
    padding: 16px 36px;
    font-size: 1.1rem;
    border: none;
    border-radius: 50px;
    box-shadow: 0 6px 15px rgba(0, 180, 216, 0.4);
    transition: transform 0.25s, box-shadow 0.25s;
}

.btn-shark:hover {
    color: white;
    transform: translateY(-4px);
    box-shadow: 0 12px 25px rgba(0, 180, 216, 0.5);
}

/* ====================== CARDS & IMAGES ====================== */
.card {
    transition: transform 0.4s, box-shadow 0.4s;
}

.card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 30px rgba(0,180,216,0.25);
}

/* The card heading carries the link so the card image itself stays clickable
   for enlargement. */
.program-card__link {
    color: inherit;
    text-decoration: none;
}

.program-card__link:hover,
.program-card__link:focus-visible {
    color: var(--ls-blue-deep);
    text-decoration: underline;
}

.program-card img, .hero-img, .action-img {
    max-height: 240px;
    object-fit: cover;
    width: 100%;
    border-radius: 12px;
}

.instructor-img {
    max-height: 380px;
    object-fit: cover;
}

/* ====================== SCHEDULE ====================== */
.schedule-table th, .schedule-table td {
    padding: 12px 10px;
    vertical-align: middle;
}

.schedule-table th {
    background-color: #00b4d8;
    color: white;
    font-weight: 700;
}

/* ====================== SECTION TITLES ====================== */
.section-title {
    font-family: 'Playfair Display', serif;
    color: #0077b6;
    position: relative;
    display: inline-block;
}

.section-title:after {
    content: '';
    width: 90px;
    height: 4px;
    background: #f4a261;
    display: block;
    margin: 12px auto;
}

/* ====================== FOOTER ====================== */
.footer {
    background: linear-gradient(#0077b6, #00b4d8);
    color: white;
}

/* ====================== GALLERY LIGHTBOX ====================== */
/* The gallery grid had 27 modal triggers but no modal markup, so clicking a
   photo did nothing. This is a single lightweight lightbox instead. */
.gallery-item,
.zoomable {
    cursor: zoom-in;
}

/* Any content image can be opened full-size. Kept subtle - a slight lift on
   hover so it reads as interactive without turning the page into a carnival. */
.zoomable {
    transition: filter 0.25s, transform 0.25s;
}

.zoomable:hover {
    filter: brightness(1.04);
}

.zoomable:focus-visible,
.gallery-item:focus-visible {
    outline: 3px solid var(--ls-blue);
    outline-offset: 3px;
}

.lightbox {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(0, 0, 0, 0.92);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 2vmin;
}

.lightbox.is-open {
    display: flex;
}

.lightbox img {
    max-width: 100%;
    max-height: 92vh;
    width: auto;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}

.lightbox-close,
.lightbox-prev,
.lightbox-next {
    position: absolute;
    background: rgba(0, 180, 216, 0.85);
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 52px;
    height: 52px;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: background 0.2s, transform 0.2s;
}

.lightbox-close:hover,
.lightbox-prev:hover,
.lightbox-next:hover {
    background: #0077b6;
    transform: scale(1.08);
}

.lightbox-close { top: 18px; right: 18px; }
.lightbox-prev  { left: 18px;  top: 50%; transform: translateY(-50%); }
.lightbox-next  { right: 18px; top: 50%; transform: translateY(-50%); }

.lightbox-prev:hover { transform: translateY(-50%) scale(1.08); }
.lightbox-next:hover { transform: translateY(-50%) scale(1.08); }

.lightbox-counter {
    position: absolute;
    bottom: 18px;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    font-weight: 700;
    letter-spacing: 1px;
    background: rgba(0, 0, 0, 0.5);
    padding: 6px 16px;
    border-radius: 50px;
}

body.lightbox-open {
    overflow: hidden;
}

/* ====================== VIDEO FACADE ====================== */
/* Videos are only fetched once the visitor actually clicks play. */
.video-facade {
    position: relative;
    width: 100%;
    height: 100%;
    border: none;
    padding: 0;
    background: #000;
    cursor: pointer;
    overflow: hidden;
}

.video-facade img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s, opacity 0.3s;
}

.video-facade:hover img {
    transform: scale(1.04);
    opacity: 0.85;
}

.video-facade::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 74px;
    height: 74px;
    border-radius: 50%;
    background: rgba(0, 180, 216, 0.92) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E") no-repeat center / 34px 34px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
    transition: transform 0.25s, background-color 0.25s;
    pointer-events: none;
}

.video-facade:hover::after {
    transform: translate(-50%, -50%) scale(1.12);
}

.video-facade .video-size {
    position: absolute;
    bottom: 8px;
    right: 10px;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    background: rgba(0, 0, 0, 0.6);
    padding: 3px 9px;
    border-radius: 4px;
    pointer-events: none;
}

/* ====================== GALLERY FILTERS ====================== */
.gallery-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    justify-content: center;
}

.gallery-filter {
    border: 2px solid rgba(0, 119, 182, 0.25);
    background: #fff;
    color: var(--ls-blue-deep);
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 0.4px;
    padding: 0.5rem 1.05rem;
    border-radius: 50px;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.2s;
}

.gallery-filter:hover {
    border-color: var(--ls-blue);
    transform: translateY(-2px);
}

.gallery-filter.is-active {
    background: linear-gradient(135deg, var(--ls-blue), var(--ls-blue-deep));
    border-color: transparent;
    color: #fff;
}

.gallery-filter__count {
    display: inline-block;
    min-width: 1.6em;
    margin-left: 0.35rem;
    padding: 0.05rem 0.4rem;
    border-radius: 50px;
    background: rgba(0, 119, 182, 0.12);
    font-size: 0.78em;
}

.gallery-filter.is-active .gallery-filter__count {
    background: rgba(255, 255, 255, 0.28);
}

.gallery-cell.is-hidden {
    display: none;
}

.gallery-section.is-filtered-out {
    display: none;
}

.gallery-grid .ls-img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
    transition: transform 0.35s, box-shadow 0.35s;
}

.gallery-grid .ls-img:hover {
    transform: scale(1.03);
    box-shadow: var(--ls-shadow-lg) !important;
}

/* ====================== TRIAL CTA STRIP ====================== */
.trial-strip {
    background:
        linear-gradient(135deg, rgba(0, 119, 182, 0.95), rgba(0, 180, 216, 0.95));
    position: relative;
    overflow: hidden;
}

.trial-strip::after {
    /* faint wave, keeps the band from reading as a flat block */
    content: '';
    position: absolute;
    inset: auto 0 -1px 0;
    height: 46px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 46' preserveAspectRatio='none'%3E%3Cpath d='M0 46V22c140 18 280 18 420 4S840 0 1200 20v26z' fill='rgba(255,255,255,0.10)'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
    pointer-events: none;
}

.trial-strip__title {
    font-family: 'Playfair Display', serif;
    font-weight: 900;
    font-size: clamp(1.9rem, 4vw, 2.9rem);
}

.trial-strip .btn-outline-light:hover {
    background: rgba(255, 255, 255, 0.16);
}

/* ====================== TRIAL FORM ====================== */
.trial-form .form-label {
    font-weight: 700;
    color: var(--ls-blue-ink);
    margin-bottom: 0.3rem;
}

.trial-form .req {
    color: #c1121f;
}

.trial-form .form-control,
.trial-form .form-select {
    border: 2px solid #dfe8ee;
    border-radius: 10px;
    padding: 0.7rem 0.9rem;
    font-weight: 500;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.trial-form .form-control:focus,
.trial-form .form-select:focus {
    border-color: var(--ls-blue);
    box-shadow: 0 0 0 0.22rem rgba(0, 180, 216, 0.18);
}

.trial-form .form-control.is-invalid,
.trial-form .form-select.is-invalid {
    border-color: #c1121f;
}

.trial-form .form-text {
    color: var(--ls-muted);
}

/* the honeypot must be unreachable for people but present for bots, so it is
   hidden off-canvas rather than display:none (some bots skip display:none) */
.trial-form__trap {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.trial-aside {
    background: var(--ls-surface);
    border: 1px solid #e3edf3;
}

.trial-steps {
    padding-left: 1.15rem;
    margin: 1rem 0 0;
}

.trial-steps li {
    margin-bottom: 0.85rem;
}

.trial-success {
    background: var(--ls-surface);
    border: 1px solid #d8e9f2;
}

.trial-success__mark {
    width: 74px;
    height: 74px;
    margin: 0 auto 1.25rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 2.4rem;
    color: #fff;
    background: linear-gradient(135deg, var(--ls-blue), var(--ls-blue-deep));
    box-shadow: 0 10px 24px rgba(0, 180, 216, 0.4);
}

/* ====================== CLASS FINDER ====================== */
.class-finder {
    background: var(--ls-surface);
    border: 1px solid #e3edf3;
    border-radius: var(--ls-radius);
}

.class-finder__ages {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.age-chip {
    border: 2px solid rgba(0, 119, 182, 0.25);
    background: #fff;
    color: var(--ls-blue-deep);
    font-weight: 700;
    padding: 0.45rem 1rem;
    border-radius: 50px;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, transform 0.2s;
}

.age-chip:hover {
    transform: translateY(-2px);
}

.age-chip.is-active {
    background: linear-gradient(135deg, var(--ls-blue), var(--ls-blue-deep));
    border-color: transparent;
    color: #fff;
}

.day-card.is-empty {
    display: none;
}

.class-row.is-dim {
    opacity: 0.32;
}

.class-row.is-match {
    background: rgba(0, 180, 216, 0.10);
    border-radius: 8px;
}

.finder-empty {
    display: none;
}

.finder-empty.is-shown {
    display: block;
}

/* ====================== STICKY MOBILE CTA ====================== */
.mobile-cta {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1500;
    display: flex;
    gap: 1px;
    box-shadow: 0 -6px 22px rgba(2, 62, 88, 0.25);
}

.mobile-cta__btn {
    flex: 1 1 auto;
    text-align: center;
    padding: 0.95rem 0.5rem;
    font-weight: 800;
    letter-spacing: 0.6px;
    text-decoration: none;
    color: #fff;
    font-size: 0.98rem;
}

.mobile-cta__btn--call {
    flex: 0 0 34%;
    background: var(--ls-blue-ink);
}

.mobile-cta__btn--trial {
    background: linear-gradient(135deg, var(--ls-blue), var(--ls-blue-deep));
}

.mobile-cta__btn:active {
    filter: brightness(0.92);
}

@media (max-width: 991.98px) {
    /* keep the fixed bar from covering the end of the footer */
    body {
        padding-bottom: 3.5rem;
    }
}

/* ====================== FOOTER EXTRAS ====================== */
.footer-map-link {
    color: #fff;
    font-weight: 700;
    text-decoration: none;
    border-bottom: 2px solid rgba(255, 255, 255, 0.45);
}

.footer-map-link:hover {
    color: #fff;
    border-bottom-color: #fff;
}

.footer-fb {
    height: 55px;
    width: auto !important;
    display: inline-block;
    transition: transform 0.25s;
}

.footer-fb:hover {
    transform: scale(1.08);
}

/* ====================== SCROLL REVEAL ====================== */
.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.7s ease-out, transform 0.7s ease-out;
    will-change: opacity, transform;
}

.reveal.is-visible {
    opacity: 1;
    transform: none;
    will-change: auto;
}

/* ====================== MOBILE RESPONSIVE ====================== */
@media (max-width: 768px) {
    .hero {
        height: 55vh;
        min-height: 380px;
    }

    .program-card img, .hero-img, .action-img {
        max-height: 200px;
    }

    .instructor-img {
        max-height: 280px;
    }

    .lightbox-close,
    .lightbox-prev,
    .lightbox-next {
        width: 42px;
        height: 42px;
        font-size: 1.2rem;
    }
}

/* Respect users who ask for less motion. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }

    .reveal {
        opacity: 1;
        transform: none;
    }
}