*{box-sizing:border-box}html{scroll-behavior:smooth}
:root{
  --bg:#0b0b0c; --text:#e8e9ea; --muted:#a6a8ab; --card:#15161a;
  --brand:#ff3d00; --brand-2:#ffb703; --border:#24262b;
}
body{margin:0;background:linear-gradient(180deg,#0b0b0c 0%,#0f1115 100%);color:var(--text);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;line-height:1.6}
.container{max-width:1100px;margin:0 auto;padding:0 20px}
.site-header{position:sticky;top:0;z-index:50;background:rgba(11,11,12,.8);backdrop-filter:saturate(140%) blur(8px);border-bottom:1px solid var(--border)}
.nav{display:flex;align-items:center;justify-content:space-between;height:64px}
.logo{font-weight:800;letter-spacing:.5px;text-decoration:none;color:var(--text)}
.nav-links{display:flex;gap:18px;align-items:center}
.nav-links a{color:var(--text);text-decoration:none;font-weight:500;opacity:.9}
.nav-links a:hover{opacity:1}
.menu-toggle{display:none;background:none;border:none;color:var(--text);font-size:22px}
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:32px;align-items:center;padding:48px 0}
.hero h1{font-size:44px;line-height:1.1;margin:.2em 0}
.hero p{font-size:18px;color:var(--muted)}
.hero-media img{width:100%;height:auto;border-radius:18px;box-shadow:0 10px 40px rgba(0,0,0,.35)}
.actions{display:flex;gap:12px;margin:18px 0 8px}
.badges{display:flex;gap:12px;flex-wrap:wrap;padding:0;margin:10px 0;list-style:none}
.badges li{background:linear-gradient(90deg,var(--card),#1b1d22);border:1px solid var(--border);padding:6px 10px;border-radius:999px;color:var(--muted);font-size:13px}
.section{padding:56px 0}
h2{font-size:28px;margin:0 0 18px}
.grid{display:grid;gap:18px}
.grid.two{grid-template-columns:repeat(2,1fr)}
.grid.three{grid-template-columns:repeat(3,1fr)}
.card{background:linear-gradient(180deg,var(--card),#1a1b1f);border:1px solid var(--border);border-radius:16px;padding:18px}
.coach img{
  width: 100%;
  height: 220px;           /* Fixed height keeps card stable */
  object-fit: cover;       /* Fill box */
  object-position: 50% 25%; /* Move crop upward */
  border-radius: 12px;
  margin-bottom: 10px;
}
/* .gallery text added to cointrol gallery image crop */
.gallery img { height:180px; object-fit:cover; object-position:center; }
.gallery img[data-pos="top"]       { object-position: top; }
.gallery img[data-pos="upper"]     { object-position: 50% 25%; }
.gallery img[data-pos="high"]      { object-position: 50% 15%; }
.gallery img[data-pos="left"]      { object-position: 20% 50%; }
.gallery img[data-pos="right"]     { object-position: 80% 50%; }
.contact-card a,
.socials a {
  color: #f17400;        /* bright orange */
  text-decoration: none; /* optional: remove underline */
  font-weight: 600;      /* optional: make it stand out */
}
.contact-card a:hover,
.socials a {
  text-decoration: underline;  /* add underline on hover */
  color: #ff8c33;              /* lighter hover shade */
}
/* Form layout */
#contactForm {
  display: grid;
  gap: 12px;
}

#contactForm label {
  display: block;            /* label on its own line */
  font-weight: 600;
  margin-bottom: 4px;        /* spacing above each input */
  color: var(--text);
}

/* Make inputs appear on the next line, full width */
#contactForm input,
#contactForm textarea {
  display: block;
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: #121317;
  color: var(--text);
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

/* Focus states for accessibility */
#contactForm input:focus,
#contactForm textarea:focus {
  border-color: #f17400;
  box-shadow: 0 0 0 3px rgba(241, 116, 0, 0.2);
  background: #101115;
}

/* Placeholder style (optional, subtle) */
#contactForm ::placeholder {
  color: var(--muted);
}

/* Make the submit button span full width and match brand */
#contactForm .btn {
  width: 100%;
  text-align: center;
}

/* Status text */
#contactForm #formStatus {
  margin-top: 6px;
  color: var(--muted);
}

/* Optional: error/success helpers you can set from JS */
#contactForm .is-error {
  border-color: #ff4d4f;
  box-shadow: 0 0 0 3px rgba(255,77,79,.15);
}
#contactForm .is-success {
  border-color: #28a745;
  box-shadow: 0 0 0 3px rgba(40,167,69,.15);
}

.price-tag{font-size:28px;font-weight:800;margin:.2em 0}
.price.highlight{border-color:var(--brand)}
.gallery img{width:100%;height:180px;object-fit:cover;border-radius:12px}
.btn{display:inline-block;background:linear-gradient(90deg,var(--brand),var(--brand-2));color:#111;padding:10px 14px;border-radius:999px;text-decoration:none;font-weight:700;border:none;cursor:pointer}
.btn:hover{filter:brightness(1.05)}
.btn-outline{background:transparent;border:1px solid var(--border);color:var(--text)}
.btn-sm{padding:8px 12px;font-size:14px}
.muted{color:var(--muted)}
.small{font-size:12px}
.scroll-x{overflow:auto}
.schedule{width:100%;border-collapse:collapse;font-size:14px}
.schedule th,.schedule td{border:1px solid var(--border);padding:10px;text-align:center;background:#14161a}
.contact-card .map{width:100%;height:220px;border:0;border-radius:12px;margin:8px 0}
.socials{display:flex;gap:12px;flex-wrap:wrap}
.socials a{color:var(--muted);text-decoration:none}
.site-footer{border-top:1px solid var(--border);padding:24px 0;margin-top:40px}
/* Responsive */
@media (max-width: 900px){
  .hero{grid-template-columns:1fr}
  .grid.two{grid-template-columns:1fr}
  .grid.three{grid-template-columns:1fr 1fr}
  .menu-toggle{display:block}
}
@media (max-width: 600px){
  .grid.three{grid-template-columns:1fr}
  .hero h1{font-size:34px}
}

/* Header update for reaperance on scroll */
/* Header show/hide animation */
.site-header{
  position: fixed;     /* changed from sticky */
  top: 0; left: 0; right: 0;
  z-index: 1000;
  transform: translateY(0);
  opacity: 1;
  transition: transform .35s ease, opacity .35s ease;
  will-change: transform;
}
.site-header.hide{
  transform: translateY(-100%);
  opacity: .98;        /* or 0 */
}

/* add space below a fixed 64px header */
main { padding-top: 64px; }

.site-header:not(.hide) {
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

/* end header update */

/* menu-nav update placed to override previous */
/* Prevent sideways scroll */
html, body { overflow-x: hidden; }

/* Mobile dropdown with animation */
@media (max-width: 900px){
  .nav { position: relative; }

  .nav-links{
    /* existing dropdown styles */
    position: absolute;
    top: 64px; left: 0; right: 0;
    flex-direction: column;
    gap: 8px;
    padding: 12px 16px;
    background: rgba(11,11,12,.95);
    backdrop-filter: saturate(140%) blur(8px);
    border-bottom: 1px solid var(--border);
    max-height: 0;            /* collapsed */
    overflow: hidden;         /* hide while collapsing */
    opacity: 0;               /* fade */
    transform: translateY(-8px); /* slight slide up */
    pointer-events: none;     /* not clickable while closed */
    z-index: 60;

    /* animation */
    transition:
      max-height 1s ease,
      opacity 1s ease,
      transform 1s ease;
  }

  .nav-links.open{
    display: flex;            /* ensure flex when open */
    max-height: 80vh;         /* expanded height limit */
    opacity: 1;               /* fade in */
    transform: translateY(0); /* slide down */
    pointer-events: auto;     /* clickable */
  }

  .nav-links a{
    padding: 10px 8px;
    width: 100%;
  }

  /* Respect users who prefer reduced motion */
  @media (prefers-reduced-motion: reduce){
    .nav-links{
      transition: none;
    }
  }
}

/* Optional: lock body scroll when menu open (from earlier) */
.body-lock { overflow: hidden; }

/* End menu-nav update */