:root{
    --charcoal: #14120F;
    --iron: #211D18;
    --ember: #FF5A1F;
    --gold: #E8B04B;
    --bone: #F2EDE4;
    --bone-dim: #C9C2B4;
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
  }

  *{margin:0;padding:0;box-sizing:border-box;}
  html{scroll-behavior:auto;}
  body{
    background: var(--charcoal);
    color: var(--bone);
    font-family: 'Space Grotesk', sans-serif;
    overflow-x: hidden;
    line-height: 1.5;
  }
  ::selection{ background: var(--ember); color: var(--charcoal); }

  a{color:inherit; text-decoration:none;}
  img{display:block; max-width:100%;}
  button{font-family:inherit; cursor:pointer; border:none; background:none;}

  h1,h2,h3,.display{
    font-family:'Anton', sans-serif;
    text-transform:uppercase;
    letter-spacing: 0.01em;
    line-height:0.95;
    font-weight:400;
  }

  .eyebrow{
    font-size:0.78rem;
    letter-spacing:0.28em;
    text-transform:uppercase;
    color: var(--ember);
    font-weight:600;
    display:flex;
    align-items:center;
    gap:0.6rem;
  }
  .eyebrow::before{
    content:'';
    width:28px;
    height:2px;
    background: var(--ember);
    display:inline-block;
  }

  .container{
    width:100%;
    max-width:1240px;
    margin:0 auto;
    padding:0 6vw;
  }

  section{ position:relative; }

  /* -------- Preloader -------- */
  #preloader{
    position:fixed; inset:0; z-index:9999;
    background:var(--charcoal);
    display:flex; align-items:center; justify-content:center;
    flex-direction:column;
    gap: 1.2rem;
  }
  #preloader .pl-word{
    font-family:'Anton', sans-serif;
    font-size: clamp(2.5rem, 8vw, 5rem);
    color: var(--bone);
    letter-spacing:0.03em;
    overflow:hidden;
    display:flex;
  }
  #preloader .pl-word span{ display:inline-block; transform: translateY(110%); }
  #preloader .pl-bar-track{
    width: min(280px, 60vw);
    height:2px;
    background: rgba(242,237,228,0.15);
    position:relative;
    overflow:hidden;
  }
  #preloader .pl-bar{
    position:absolute; left:0; top:0; bottom:0; width:0%;
    background: linear-gradient(90deg, var(--ember), var(--gold));
  }
  #preloader .pl-pct{
    font-size:0.75rem; letter-spacing:0.3em; color:var(--bone-dim);
  }

  /* -------- Navbar -------- */
  header{
    position:fixed; top:0; left:0; right:0; z-index:500;
    padding: 1.6rem 0;
    transition: padding 0.4s var(--ease), background 0.4s var(--ease), border-color 0.4s var(--ease);
    border-bottom: 1px solid transparent;
  }
  header.scrolled{
    padding: 0.9rem 0;
    background: rgba(20,18,15,0.86);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(242,237,228,0.08);
  }
  nav.container{
    display:flex; align-items:center; justify-content:space-between;
  }
  .logo{
    font-family:'Anton', sans-serif;
    font-size:1.4rem;
    letter-spacing:0.04em;
    display:flex; align-items:center; gap:0.5rem;
  }
  .logo .dot{ color: var(--ember); }
  .nav-links{
    display:flex; align-items:center; gap:2.4rem;
    list-style:none;
  }
  .nav-links a{
    font-size:0.85rem;
    letter-spacing:0.06em;
    text-transform:uppercase;
    font-weight:600;
    color: var(--bone-dim);
    position:relative;
    padding-bottom:4px;
  }
  .nav-links a::after{
    content:''; position:absolute; left:0; bottom:0; width:0; height:1px;
    background:var(--ember); transition:width 0.35s var(--ease);
  }
  .nav-links a:hover{ color: var(--bone); }
  .nav-links a:hover::after{ width:100%; }

  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:0.5rem;
    padding: 0.9rem 1.8rem;
    font-size:0.82rem;
    font-weight:700;
    letter-spacing:0.08em;
    text-transform:uppercase;
    border-radius: 2px;
    transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease), background 0.4s var(--ease), color 0.4s var(--ease);
    white-space:nowrap;
  }
  .btn-primary{
    background: var(--ember);
    color: var(--charcoal);
  }
  .btn-primary:hover{
    transform: translateY(-3px);
    box-shadow: 0 14px 30px -10px rgba(255,90,31,0.55);
  }
  .btn-outline{
    border:1px solid rgba(242,237,228,0.35);
    color:var(--bone);
  }
  .btn-outline:hover{
    border-color: var(--gold);
    color: var(--gold);
    transform: translateY(-3px);
  }
  .nav-cta{ display:flex; align-items:center; gap:1rem; }

  .hamburger{
    display:none;
    flex-direction:column;
    gap:5px;
    width:28px;
    z-index:600;
  }
  .hamburger span{
    display:block; height:2px; width:100%; background:var(--bone);
    transition: transform 0.4s var(--ease), opacity 0.3s var(--ease);
  }
  .hamburger.active span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
  .hamburger.active span:nth-child(2){ opacity:0; }
  .hamburger.active span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

  .mobile-menu{
    position:fixed; inset:0; background: var(--charcoal); z-index:400;
    display:flex; align-items:center; justify-content:center;
    transform: translateY(-100%);
    transition: transform 0.6s var(--ease);
  }
  .mobile-menu.open{ transform: translateY(0); }
  .mobile-menu ul{ list-style:none; text-align:center; }
  .mobile-menu li{ margin: 1.4rem 0; }
  .mobile-menu a{
    font-family:'Anton', sans-serif;
    font-size: 2.2rem;
    text-transform:uppercase;
  }

  /* -------- Hero -------- */
  .hero{
    min-height:100svh;
    display:flex; align-items:flex-end;
    padding-top: 8rem;
    padding-bottom: 4rem;
    position:relative;
    overflow:hidden;
  }
  .hero-bg{
    position:absolute; inset:0; z-index:0;
  }
  .hero-bg img{
    width:100%; height:100%; object-fit:cover;
    position:absolute; inset:0;
    transform: scale(1.15);
  }
  .hero-bg::after{
    content:'';
    position:absolute; inset:0;
    background: linear-gradient(180deg, rgba(20,18,15,0.55) 0%, rgba(20,18,15,0.55) 40%, rgba(20,18,15,0.96) 92%),
                linear-gradient(90deg, rgba(20,18,15,0.9) 0%, rgba(20,18,15,0.35) 55%);
  }
  .hero-content{ position:relative; z-index:2; width:100%; }
  .hero h1{
    font-size: clamp(3rem, 9vw, 7.2rem);
    color: var(--bone);
    margin: 1.2rem 0 1.6rem;
    max-width: 14ch;
  }
  .hero h1 .line{ overflow:hidden; }
  .hero h1 .line span{ display:block; transform: translateY(115%); }
  .hero h1 em{ font-style:normal; color: var(--ember); }
  .hero-sub{
    max-width:46ch;
    color: var(--bone-dim);
    font-size:1.05rem;
    margin-bottom:2.2rem;
    opacity:0;
  }
  .hero-ctas{ display:flex; gap:1rem; flex-wrap:wrap; opacity:0; }

  .hero-meta{
    position:absolute; right:6vw; bottom:4rem; z-index:2;
    text-align:right;
    display:flex; flex-direction:column; gap:0.6rem;
    color:var(--bone-dim);
    font-size:0.85rem;
  }
  .hero-scroll{
    position:absolute; left:6vw; bottom:2rem; z-index:2;
    display:flex; align-items:center; gap:0.7rem;
    font-size:0.75rem; letter-spacing:0.25em; text-transform:uppercase;
    color:var(--bone-dim);
  }
  .hero-scroll .line-scroll{
    width:40px; height:1px; background:var(--bone-dim); position:relative; overflow:hidden;
  }
  .hero-scroll .line-scroll::after{
    content:''; position:absolute; top:0; left:-100%; width:100%; height:100%;
    background:var(--ember);
    animation: scrollline 1.8s ease-in-out infinite;
  }
  @keyframes scrollline{
    0%{ left:-100%; } 50%{ left:0; } 100%{ left:100%; }
  }

  /* -------- Stats -------- */
  .stats{
    background: var(--iron);
    padding: 4rem 0;
    border-top:1px solid rgba(242,237,228,0.06);
    border-bottom:1px solid rgba(242,237,228,0.06);
  }
  .stats-grid{
    display:grid;
    grid-template-columns: repeat(4, 1fr);
    gap:2rem;
    text-align:center;
  }
  .stat-num{
    font-family:'Anton', sans-serif;
    font-size: clamp(2.4rem, 5vw, 3.6rem);
    color: var(--gold);
    display:flex; align-items:baseline; justify-content:center; gap:0.15rem;
  }
  .stat-label{
    font-size:0.78rem; letter-spacing:0.14em; text-transform:uppercase;
    color:var(--bone-dim); margin-top:0.4rem;
  }

  /* -------- Section headers -------- */
  .sec-head{ max-width:640px; margin-bottom:3.5rem; }
  .sec-head h2{
    font-size: clamp(2.2rem, 5vw, 3.6rem);
    color:var(--bone);
    margin-top:0.8rem;
  }
  .sec-head p{ color:var(--bone-dim); margin-top:1.1rem; font-size:1.02rem; max-width:52ch; }

  /* -------- About / Forge -------- */
  .about{ padding: 9rem 0; }
  .about-grid{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:5rem;
    align-items:center;
  }
  .about-img-wrap{
    position:relative;
    aspect-ratio: 4/5;
    overflow:hidden;
    border-radius:4px;
  }
  .about-img-wrap img{
    width:100%; height:120%; object-fit:cover; position:absolute; top:-10%; left:0;
  }
  .about-text p{ color:var(--bone-dim); margin-bottom:1.2rem; font-size:1.02rem; }
  .about-text p strong{ color:var(--bone); font-weight:600; }
  .about-badge{
    position:absolute; bottom:-1.5rem; left:-1.5rem;
    background: var(--ember); color:var(--charcoal);
    padding:1.3rem 1.6rem; border-radius:4px;
    max-width:210px;
    font-size:0.85rem; font-weight:700; line-height:1.3;
    box-shadow: 0 20px 40px -14px rgba(0,0,0,0.6);
  }

  /* -------- Programs -------- */
  .programs{ padding: 7rem 0 9rem; }
  .program-grid{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap:1.6rem;
  }
  .program-card{
    background: var(--iron);
    border: 1px solid rgba(242,237,228,0.07);
    padding: 2.4rem 2rem;
    border-radius:6px;
    transition: transform 0.5s var(--ease), border-color 0.5s var(--ease), background 0.5s var(--ease);
    position:relative;
    overflow:hidden;
  }
  .program-card:hover{
    transform: translateY(-8px);
    border-color: rgba(255,90,31,0.4);
    background: #26211B;
  }
  .program-num{
    font-family:'Anton', sans-serif;
    font-size:0.85rem;
    color: var(--ember);
    letter-spacing:0.1em;
  }
  .program-card h3{
    font-size:1.5rem; color:var(--bone); margin: 1rem 0 0.9rem; text-transform:none;
    font-family:'Space Grotesk', sans-serif; font-weight:700;
  }
  .program-card p{ color:var(--bone-dim); font-size:0.94rem; }

  /* -------- Gallery / Facilities -------- */
  .facilities{ padding: 2rem 0 9rem; }
  .gallery-grid{
    display:grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 160px;
    gap:1rem;
  }
  .gallery-grid figure{
    overflow:hidden; border-radius:6px; position:relative; margin:0;
  }
  .gallery-grid img{
    width:100%; height:100%; object-fit:cover;
    transition: transform 1.2s var(--ease);
  }
  .gallery-grid figure:hover img{ transform: scale(1.08); }
  .g1{ grid-column: span 2; grid-row: span 2; }
  .g2{ grid-column: span 2; grid-row: span 1; }
  .g3{ grid-column: span 1; grid-row: span 1; }
  .g4{ grid-column: span 1; grid-row: span 1; }
  .g5{ grid-column: span 2; grid-row: span 1; }

  /* -------- Trainers -------- */
  .trainers{
    padding: 7rem 0 9rem;
    background: var(--iron);
    border-top:1px solid rgba(242,237,228,0.06);
    border-bottom:1px solid rgba(242,237,228,0.06);
  }
  .trainer-grid{
    display:grid;
    grid-template-columns: repeat(4, 1fr);
    gap:1.6rem;
  }
  .trainer-card{ text-align:left; }
  .trainer-img{
    aspect-ratio: 3/4; overflow:hidden; border-radius:6px; margin-bottom:1.1rem;
    position:relative;
  }
  .trainer-img img{ width:100%; height:100%; object-fit:cover; filter:grayscale(0.35); transition: filter 0.5s var(--ease); }
  .trainer-card:hover .trainer-img img{ filter:grayscale(0); }
  .trainer-card h3{
    font-family:'Space Grotesk', sans-serif; font-weight:700; text-transform:none;
    font-size:1.15rem; color:var(--bone);
  }
  .trainer-role{ color:var(--ember); font-size:0.8rem; letter-spacing:0.06em; text-transform:uppercase; margin-top:0.25rem; font-weight:600; }
  .trainer-card p.bio{ color:var(--bone-dim); font-size:0.88rem; margin-top:0.6rem; }

  /* -------- Membership -------- */
  .membership{ padding: 7rem 0 9rem; }
  .plan-grid{
    display:grid; grid-template-columns: repeat(3,1fr); gap:1.6rem;
  }
  .plan-card{
    background: var(--iron);
    border:1px solid rgba(242,237,228,0.08);
    border-radius:8px;
    padding: 2.6rem 2.2rem;
    display:flex; flex-direction:column;
    transition: transform 0.5s var(--ease), border-color 0.4s var(--ease);
  }
  .plan-card:hover{ transform: translateY(-6px); }
  .plan-card.featured{
    background: linear-gradient(160deg, #2A2019, var(--iron) 60%);
    border-color: var(--ember);
    position:relative;
  }
  .plan-tag{
    position:absolute; top:-14px; right:2rem;
    background: var(--ember); color:var(--charcoal);
    font-size:0.7rem; font-weight:700; letter-spacing:0.08em;
    padding:0.35rem 0.8rem; border-radius:20px; text-transform:uppercase;
  }
  .plan-name{ font-size:0.85rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--bone-dim); font-weight:700; }
  .plan-price{
    font-family:'Anton', sans-serif; font-size:2.8rem; color:var(--bone); margin:0.8rem 0 0.2rem;
  }
  .plan-price span{ font-size:1rem; color:var(--bone-dim); font-family:'Space Grotesk',sans-serif; }
  .plan-desc{ color:var(--bone-dim); font-size:0.88rem; margin-bottom:1.6rem; }
  .plan-list{ list-style:none; margin-bottom:2rem; flex-grow:1; }
  .plan-list li{
    color:var(--bone-dim); font-size:0.9rem; padding:0.55rem 0;
    border-top:1px solid rgba(242,237,228,0.07);
    display:flex; gap:0.6rem; align-items:flex-start;
  }
  .plan-list li::before{ content:'✓'; color:var(--gold); font-weight:700; }

  /* -------- Testimonials -------- */
  .testimonials{
    padding:7rem 0 9rem;
    background: var(--iron);
    border-top:1px solid rgba(242,237,228,0.06);
    border-bottom:1px solid rgba(242,237,228,0.06);
  }
  .testi-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:1.6rem; }
  .testi-card{
    background: var(--charcoal);
    border:1px solid rgba(242,237,228,0.07);
    border-radius:8px;
    padding:2.2rem;
  }
  .testi-stars{ color:var(--gold); font-size:0.9rem; letter-spacing:0.2em; margin-bottom:1rem; }
  .testi-card p.quote{ color:var(--bone-dim); font-size:0.96rem; margin-bottom:1.4rem; }
  .testi-person{ display:flex; align-items:center; gap:0.8rem; }
  .testi-person img{ width:44px; height:44px; border-radius:50%; object-fit:cover; }
  .testi-person .name{ color:var(--bone); font-weight:700; font-size:0.92rem; }
  .testi-person .loc{ color:var(--bone-dim); font-size:0.78rem; }

  /* -------- FAQ -------- */
  .faq{ padding:7rem 0 9rem; }
  .faq-list{ max-width:820px; }
  .faq-item{
    border-bottom:1px solid rgba(242,237,228,0.1);
    padding: 1.6rem 0;
    cursor:pointer;
  }
  .faq-q{
    display:flex; justify-content:space-between; align-items:center;
    font-size:1.1rem; font-weight:600; color:var(--bone);
  }
  .faq-q .icon{
    font-family:'Anton', sans-serif; font-size:1.4rem; color:var(--ember);
    transition: transform 0.4s var(--ease);
    flex-shrink:0; margin-left:1rem;
  }
  .faq-item.open .faq-q .icon{ transform: rotate(45deg); }
  .faq-a{
    max-height:0; overflow:hidden;
    transition: max-height 0.5s var(--ease), margin-top 0.5s var(--ease);
    color:var(--bone-dim); font-size:0.95rem; max-width:70ch;
  }
  .faq-item.open .faq-a{ margin-top:1rem; }

  /* -------- Contact / Footer -------- */
  .contact{
    padding: 8rem 0 3rem;
    background: var(--iron);
    border-top:1px solid rgba(242,237,228,0.07);
  }
  .contact-grid{
    display:grid; grid-template-columns: 1fr 1fr; gap:4rem;
    margin-bottom:5rem;
  }
  .contact-info .item{ margin-bottom:1.8rem; }
  .contact-info .label{ font-size:0.75rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--ember); font-weight:700; margin-bottom:0.4rem;}
  .contact-info .value{ font-size:1.15rem; color:var(--bone); }
  .contact-quicklinks{ display:flex; gap:1rem; margin-top:2rem; flex-wrap:wrap; }
  .map-embed{ border-radius:8px; overflow:hidden; border:1px solid rgba(242,237,228,0.1); }
  .map-embed iframe{ width:100%; height:100%; min-height:280px; border:0; filter: grayscale(0.3) invert(0.92) contrast(0.9); }

  form.contact-form{ display:flex; flex-direction:column; gap:1.1rem; }
  .form-row{ display:flex; gap:1rem; }
  .form-row > div{ flex:1; }
  label{ display:block; font-size:0.78rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--bone-dim); margin-bottom:0.5rem; }
  input, textarea{
    width:100%; background: var(--charcoal); border:1px solid rgba(242,237,228,0.14);
    border-radius:4px; padding:0.9rem 1rem; color:var(--bone); font-family:inherit; font-size:0.95rem;
    transition: border-color 0.3s var(--ease);
  }
  input:focus, textarea:focus{ outline:none; border-color:var(--ember); }
  textarea{ resize:vertical; min-height:110px; }
  .field-error{ color:var(--ember); font-size:0.78rem; margin-top:0.35rem; display:none; }
  .field-error.show{ display:block; }
  .form-status{ font-size:0.9rem; margin-top:0.4rem; color:var(--gold); display:none; }
  .form-status.show{ display:block; }

  footer.foot-bottom{
    border-top:1px solid rgba(242,237,228,0.08);
    padding-top:2rem;
    display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem;
    color:var(--bone-dim); font-size:0.82rem;
  }
  footer.foot-bottom a:hover{ color:var(--ember); }

  .whatsapp-float{
    position:fixed; bottom:1.8rem; right:1.8rem; z-index:300;
    width:58px; height:58px; border-radius:50%;
    background:#25D366; display:flex; align-items:center; justify-content:center;
    box-shadow: 0 10px 26px -8px rgba(0,0,0,0.6);
    transition: transform 0.4s var(--ease);
  }
  .whatsapp-float:hover{ transform: scale(1.1); }

  [data-animate]{ opacity:0; }

  /* -------- Responsive -------- */
  @media (max-width:1024px){
    .about-grid{ grid-template-columns:1fr; gap:3rem; }
    .program-grid{ grid-template-columns: repeat(2,1fr); }
    .trainer-grid{ grid-template-columns: repeat(2,1fr); }
    .plan-grid{ grid-template-columns: 1fr; max-width:420px; margin:0 auto; }
    .testi-grid{ grid-template-columns:1fr; max-width:520px; margin:0 auto; }
    .stats-grid{ grid-template-columns: repeat(2,1fr); row-gap:2.5rem; }
    .gallery-grid{ grid-template-columns: repeat(2,1fr); }
    .g1,.g2,.g5{ grid-column:span 2; }
    .contact-grid{ grid-template-columns:1fr; gap:3rem; }
  }
  @media (max-width:760px){
    .nav-links, .nav-cta .btn-outline{ display:none; }
    .hamburger{ display:flex; }
    .hero{ align-items:flex-end; padding-bottom:3rem; }
    .hero-meta{ display:none; }
    .program-grid{ grid-template-columns:1fr; }
    .trainer-grid{ grid-template-columns: 1fr 1fr; }
    .form-row{ flex-direction:column; }
    .about-badge{ position:static; margin-top:1.5rem; max-width:none; }
  }
  @media (max-width:420px){
    .container{ padding:0 5vw; }
    .trainer-grid{ grid-template-columns:1fr; }
  }

  @media (prefers-reduced-motion: reduce){
    *{ animation-duration:0.01ms !important; transition-duration:0.01ms !important; }
  }