/* ===== RESET & VARS ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --navy:#3d5280;--navy-dark:#2a3a5c;--lime:#c8e63a;--lime-dark:#a8c420;
  --white:#ffffff;--off-white:#f4f6f8;--dark:#111111;--mid-gray:#555555;--border:#e2e8f0;
  --font-heading:'Oswald',sans-serif;--font-body:'Open Sans',sans-serif;
}
html{scroll-behavior:smooth}
body{font-family:var(--font-body);color:var(--dark);line-height:1.6;overflow-x:hidden;background:var(--white)}
img{max-width:100%;height:auto;display:block}
a{text-decoration:none;color:inherit}
ul{list-style:none}

/* ===== UTILITIES ===== */
.container{max-width:1200px;margin:0 auto;padding:0 24px}
.section-label{font-family:var(--font-heading);font-size:0.74rem;text-transform:uppercase;letter-spacing:0.2em;color:var(--navy);margin-bottom:8px;font-weight:600}
.section-title{font-family:var(--font-heading);font-size:clamp(1.7rem,3vw,2.4rem);text-transform:uppercase;color:var(--dark);margin-bottom:16px;line-height:1.15}
.lime-bar{width:3rem;height:4px;background:var(--lime);margin-bottom:24px}
.section-text{color:var(--mid-gray);max-width:640px;line-height:1.7}

/* ===== BUTTONS ===== */
.btn{display:inline-block;font-family:var(--font-heading);font-size:0.9rem;text-transform:uppercase;letter-spacing:0.08em;padding:14px 32px;border:none;cursor:pointer;transition:all 0.3s;font-weight:600}
.btn-lime{background:var(--lime);color:var(--dark)}.btn-lime:hover{background:var(--lime-dark)}
.btn-dark{background:var(--dark);color:var(--white)}.btn-dark:hover{background:var(--navy)}
.btn-outline-white{background:transparent;color:var(--white);border:2px solid var(--white)}.btn-outline-white:hover{background:var(--white);color:var(--dark)}
.btn-outline-navy{background:transparent;color:var(--navy);border:2px solid var(--navy)}.btn-outline-navy:hover{background:var(--navy);color:var(--white)}

/* ===== NAV ===== */
.site-nav{position:fixed;top:0;left:0;right:0;z-index:1000;background:rgba(17,17,17,0.95);backdrop-filter:blur(8px);padding:0 24px;transition:background 0.3s}
.nav-inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;height:72px}
.nav-logo{display:flex;align-items:center;gap:12px;cursor:pointer}
.nav-logo img{height:48px;width:48px;object-fit:contain;border-radius:4px}
.nav-logo-text{font-family:var(--font-heading);color:var(--white);font-size:0.85rem;text-transform:uppercase;letter-spacing:0.05em;line-height:1.2}
.nav-logo-text span{color:var(--lime);font-weight:600}
.nav-links{display:flex;align-items:center;gap:32px}
.nav-links a{font-family:var(--font-heading);color:var(--white);font-size:0.85rem;text-transform:uppercase;letter-spacing:0.08em;transition:color 0.3s;font-weight:500}
.nav-links a:hover,.nav-links a.active{color:var(--lime)}
.nav-links .nav-cta{background:var(--lime);color:var(--dark);padding:10px 24px;font-weight:600}
.nav-links .nav-cta:hover{background:var(--lime-dark)}
.hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:8px}
.hamburger span{display:block;width:24px;height:2px;background:var(--white);transition:all 0.3s}
.mobile-menu{display:none;position:fixed;top:72px;left:0;right:0;background:rgba(17,17,17,0.98);padding:24px;flex-direction:column;gap:16px;z-index:999}
.mobile-menu a{font-family:var(--font-heading);color:var(--white);font-size:1rem;text-transform:uppercase;letter-spacing:0.08em;padding:12px 0;border-bottom:1px solid rgba(255,255,255,0.1)}
.mobile-menu a:hover{color:var(--lime)}
.mobile-menu.open{display:flex}

@media(max-width:768px){
  .nav-links{display:none}
  .hamburger{display:flex}
}

/* ===== HERO ===== */
.hero{position:relative;min-height:100vh;display:flex;align-items:center;background:linear-gradient(135deg,var(--navy-dark),var(--navy));overflow:hidden}
.hero-bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0.35}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(17,17,17,0.7) 0%,rgba(42,58,92,0.85) 100%)}
.hero-content{position:relative;z-index:2;padding:120px 0 80px}
.hero h1{font-family:var(--font-heading);font-size:clamp(2rem,5vw,3.6rem);text-transform:uppercase;color:var(--white);line-height:1.1;margin-bottom:20px;max-width:800px}
.hero h1 .lime{color:var(--lime)}
.hero p{color:rgba(255,255,255,0.85);font-size:clamp(1rem,1.8vw,1.15rem);max-width:600px;margin-bottom:32px;line-height:1.7}
.hero-btns{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:48px}
.hero-stats{display:flex;gap:40px;flex-wrap:wrap}
.hero-stat{border-left:3px solid var(--lime);padding-left:16px}
.hero-stat .num{font-family:var(--font-heading);font-size:2.5rem;font-weight:700;color:var(--lime);line-height:1}
.hero-stat .label{font-family:var(--font-heading);color:rgba(255,255,255,0.8);font-size:0.8rem;text-transform:uppercase;letter-spacing:0.1em;margin-top:4px}

/* ===== SPLIT SECTION ===== */
.split{display:grid;grid-template-columns:1fr 1fr;gap:0;align-items:stretch}
.split-img{min-height:400px;background-size:cover;background-position:center}
.split-text{padding:60px 48px;display:flex;flex-direction:column;justify-content:center}
@media(max-width:768px){
  .split{grid-template-columns:1fr}
  .split-img{min-height:280px}
  .split-text{padding:40px 24px}
}

/* ===== SERVICE CARDS ===== */
.cards-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:24px}
.service-card{background:var(--white);border:1px solid var(--border);border-top:4px solid var(--navy);padding:32px;transition:all 0.3s}
.service-card:hover{transform:translateY(-4px);box-shadow:0 12px 32px rgba(0,0,0,0.1);border-top-color:var(--lime-dark)}
.service-card .icon{font-size:2rem;margin-bottom:16px}
.service-card h3{font-family:var(--font-heading);font-size:1.15rem;text-transform:uppercase;margin-bottom:8px;color:var(--dark)}
.service-card p{color:var(--mid-gray);font-size:0.9rem;line-height:1.6}

/* ===== COURT TYPE CARDS ===== */
.court-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px}
.court-card{position:relative;height:320px;overflow:hidden;cursor:pointer}
.court-card img{width:100%;height:100%;object-fit:cover;transition:transform 0.5s}
.court-card:hover img{transform:scale(1.05)}
.court-card .overlay{position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,0.8) 0%,transparent 60%);display:flex;flex-direction:column;justify-content:flex-end;padding:24px}
.court-card h3{font-family:var(--font-heading);color:var(--white);font-size:1.3rem;text-transform:uppercase}
.court-card p{color:rgba(255,255,255,0.8);font-size:0.85rem;margin-top:4px}

/* ===== AREA PILLS ===== */
.area-pills{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.area-pill{font-family:var(--font-heading);font-size:0.8rem;text-transform:uppercase;letter-spacing:0.08em;padding:10px 24px;border:1px solid var(--lime);color:var(--white);background:rgba(200,230,58,0.1);transition:all 0.3s}
.area-pill:hover{background:var(--lime);color:var(--dark)}

/* ===== STATS STRIP ===== */
.stats-strip{background:var(--navy-dark);padding:48px 0}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;text-align:center}
.stat-item .num{font-family:var(--font-heading);font-size:2.5rem;font-weight:700;color:var(--lime);line-height:1}
.stat-item .label{font-family:var(--font-heading);color:rgba(255,255,255,0.8);font-size:0.75rem;text-transform:uppercase;letter-spacing:0.1em;margin-top:6px}
@media(max-width:768px){.stats-grid{grid-template-columns:repeat(2,1fr)}}

/* ===== GALLERY ===== */
.gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.gallery-item{overflow:hidden;cursor:pointer;aspect-ratio:4/3;position:relative}
.gallery-item img{width:100%;height:100%;object-fit:cover;transition:transform 0.4s}
.gallery-item:hover img{transform:scale(1.08)}
.gallery-cat{position:absolute;top:12px;left:12px;font-family:var(--font-heading);font-size:0.65rem;text-transform:uppercase;letter-spacing:0.1em;background:var(--navy);color:var(--white);padding:4px 12px}

/* ===== LIGHTBOX ===== */
.lightbox{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.92);z-index:2000;align-items:center;justify-content:center;padding:24px}
.lightbox.open{display:flex}
.lightbox img{max-width:90vw;max-height:85vh;object-fit:contain}
.lightbox-close{position:absolute;top:20px;right:24px;font-size:2rem;color:var(--white);cursor:pointer;font-family:var(--font-heading);z-index:2001}

/* ===== CONTACT FORM ===== */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.form-group{margin-bottom:20px}
.form-group label{display:block;font-family:var(--font-heading);font-size:0.75rem;text-transform:uppercase;letter-spacing:0.1em;color:var(--navy);margin-bottom:6px;font-weight:600}
.form-group input,.form-group select,.form-group textarea{width:100%;padding:12px 16px;border:1px solid var(--border);font-family:var(--font-body);font-size:0.95rem;transition:border 0.3s;background:var(--white)}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{outline:none;border-color:var(--navy)}
.form-group textarea{resize:vertical;min-height:120px}
.contact-info-block{background:var(--navy-dark);color:var(--white);padding:40px;height:100%}
.contact-info-block h3{font-family:var(--font-heading);font-size:1.3rem;text-transform:uppercase;margin-bottom:24px}
.contact-info-block .info-row{display:flex;align-items:flex-start;gap:12px;margin-bottom:20px;font-size:0.95rem}
.contact-info-block .info-row .icon{font-size:1.2rem;color:var(--lime);flex-shrink:0;margin-top:2px}
.contact-info-block a{color:var(--lime)}
.form-success{display:none;text-align:center;padding:40px;background:var(--off-white);border:2px solid var(--lime)}
.form-success h3{font-family:var(--font-heading);color:var(--navy);margin-bottom:8px}

/* ===== FOOTER ===== */
.site-footer{background:#0d1b2a;color:rgba(255,255,255,0.7);padding:60px 0 24px}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:48px;margin-bottom:40px}
.footer-logo{font-family:var(--font-heading);color:var(--white);font-size:1.1rem;text-transform:uppercase;margin-bottom:12px}
.footer-logo span{color:var(--lime)}
.footer h4{font-family:var(--font-heading);color:var(--white);font-size:0.85rem;text-transform:uppercase;letter-spacing:0.1em;margin-bottom:16px}
.footer-links a{display:block;padding:4px 0;font-size:0.9rem;transition:color 0.3s}
.footer-links a:hover{color:var(--lime)}
.footer-bottom{border-top:1px solid rgba(255,255,255,0.1);padding-top:24px;display:flex;justify-content:space-between;font-size:0.8rem;flex-wrap:wrap;gap:12px}
@media(max-width:768px){
  .footer-grid{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
}

/* ===== SECTIONS ===== */
.page-section{display:none}
.page-section.active{display:block}
.section-pad{padding:80px 0}
@media(max-width:768px){.section-pad{padding:48px 0}}
.bg-off-white{background:var(--off-white)}
.text-center{text-align:center}

/* ===== PICKLEBALL SPOTLIGHT ===== */
.spotlight{background:var(--navy);color:var(--white);padding:64px 0;position:relative;overflow:hidden}
.spotlight::before{content:'';position:absolute;right:-100px;top:-100px;width:400px;height:400px;background:var(--lime);opacity:0.05;border-radius:50%}
.spotlight .section-label{color:var(--lime)}
.spotlight .section-title{color:var(--white)}

/* ===== SERVICE AREA SECTION ===== */
.service-area{background:var(--navy-dark);padding:64px 0;text-align:center}
.service-area .section-label{color:var(--lime)}
.service-area .section-title{color:var(--white);margin-bottom:32px}

/* ===== IMG FALLBACK ===== */
.img-placeholder{background:linear-gradient(135deg,var(--navy) 0%,var(--lime-dark) 100%);width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:var(--white);font-family:var(--font-heading);font-size:0.8rem;text-transform:uppercase;letter-spacing:0.1em}