/* ==========================================================
     EDIT ME: Brand colors, fonts, and copy live here + inline.
     Search "PLACEHOLDER" to find easy items to swap out later.
     ========================================================== */
  :root{
    --cream:#FFFFFF;
    --cream-soft:#F2F2F2;
    --ink:#0D0D0D;
    --walnut:#1A1A1A;
    --walnut-deep:#000000;
    --amber:#C8102E;
    --amber-deep:#C8102E;
    --amber-soft:#FF6B6F;
    --skyblue:#C8102E;
    --skyblue-soft:#FF9195;
    --line:#DADADA;
    --serif: 'Playfair Display', Georgia, serif;
    --sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  }

  body{
    font-family: var(--sans);
    color: var(--ink);
    background-color: var(--cream);
    font-weight: 400;
  }

  h1,h2,h3,h4, .display-font{
    font-family: var(--serif);
  }

  .eyebrow{
    letter-spacing: .18em;
    text-transform: uppercase;
    font-size: .78rem;
    font-weight: 600;
    color: var(--amber-deep);
  }

  a{ color: var(--amber-deep); }
  a:hover{ color: var(--ink); }

  /* ---------- Buttons ---------- */
  .btn-amber{
    background-color: var(--amber-deep);
    border-color: var(--amber-deep);
    color: #fff;
    letter-spacing: .05em;
    text-transform: uppercase;
    font-size: .82rem;
    font-weight: 600;
    padding: .85rem 1.9rem;
    border-radius: 2px;
  }
  .btn-amber:hover{
    background-color: var(--ink);
    border-color: var(--ink);
    color: #fff;
  }
  .btn-outline-cream{
    border: 1px solid rgba(255,255,255,.6);
    color: #fff;
    letter-spacing: .05em;
    text-transform: uppercase;
    font-size: .82rem;
    font-weight: 600;
    padding: .85rem 1.9rem;
    border-radius: 2px;
    background: transparent;
  }
  .btn-outline-cream:hover{
    background: #fff;
    color: var(--walnut-deep);
  }
  .btn-outline-ink{
    border: 1px solid var(--ink);
    color: var(--ink);
    letter-spacing: .05em;
    text-transform: uppercase;
    font-size: .82rem;
    font-weight: 600;
    padding: .85rem 1.9rem;
    border-radius: 2px;
    background: transparent;
  }
  .btn-outline-ink:hover{
    background: var(--ink);
    color: #fff;
  }

  /* ---------- Navbar ---------- */
  .navbar{
    background-color: rgba(255,255,255,.96);
    backdrop-filter: blur(6px);
    border-bottom: 1px solid var(--line);
  }
  .navbar .nav-link{
    font-size: .82rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--ink);
    margin: 0 .6rem;
  }
  .navbar .nav-link:hover{ color: var(--amber-deep); }

  .brand-mark{
    width: 42px;
    height: 42px;
    object-fit: contain;
    display:block;
  }
  .brand-mark-footer{
    width: 42px;
    height: 42px;
    background: #fff;
    border-radius: 50%;
    display:flex;
    align-items:center;
    justify-content:center;
    padding: 6px;
    flex-shrink: 0;
  }
  .brand-mark-footer img{
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  .brand-word{
    font-family: var(--serif);
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--ink);
    font-size: 1.05rem;
    line-height:1;
  }
  .brand-word small{
    display:block;
    font-family: var(--sans);
    font-size: .6rem;
    letter-spacing: .22em;
    color: var(--amber-deep);
    font-weight: 600;
    margin-top: 2px;
  }

  /* ---------- Hero ---------- */
  .hero{
    position: relative;
    min-height: 92vh;
    display: flex;
    align-items: center;
    background:
      linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.78) 55%, rgba(0,0,0,.92) 100%),
      url('hero-group.jpg') center/cover no-repeat;
    /* PLACEHOLDER: swap hero-group.jpg for real club photography once available (1800x1200+ recommended) */
    color: #fff;
  }
  .hero .eyebrow{ color: var(--skyblue-soft); }
  .hero h1{
    font-size: clamp(2.6rem, 6vw, 5rem);
    font-weight: 800;
    letter-spacing: .02em;
    line-height: 1.05;
  }
  .hero .lead{
    font-size: 1.15rem;
    max-width: 620px;
    color: rgba(255,255,255,.88);
    font-weight: 300;
  }
  .hero-tagline{
    font-family: var(--serif);
    font-style: italic;
    font-size: 1.3rem;
    color: var(--amber-soft);
  }

  /* ---------- Sections ---------- */
  section{ padding: 6rem 0; }
  .section-tight{ padding: 4.5rem 0; }
  .section-dark{
    background-color: var(--walnut-deep);
    color: #F2F2F2;
  }
  .section-dark .eyebrow{ color: var(--amber-soft); }
  .section-soft{ background-color: var(--cream-soft); }

  .divider{
    width: 56px;
    height: 2px;
    background: var(--amber-deep);
    margin: 1rem 0 1.5rem;
  }
  .divider-center{ margin-left:auto; margin-right:auto; }

  .ph-block{
    background-color: #EDEDED;
    border: 1px solid var(--line);
    color: var(--amber-deep);
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    font-size:.72rem;
    letter-spacing:.1em;
    text-transform:uppercase;
    font-weight:600;
    min-height: 260px;
  }
  .ph-block i{ font-size:1.6rem; display:block; margin-bottom:.5rem; }

  .photo-frame{ overflow:hidden; }
  .photo-frame img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
  }

  /* ---------- Stats ---------- */
  .stat-num{
    font-family: var(--serif);
    font-size: 2.75rem;
    font-weight: 700;
    color: var(--amber-soft);
    line-height:1;
  }
  .stat-label{
    font-size: .78rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(242,242,242,.75);
    margin-top: .5rem;
  }

  /* ---------- Pillars ---------- */
  .pillar-card{
    background:#fff;
    border: 1px solid var(--line);
    padding: 2.5rem 2rem;
    height:100%;
  }
  .pillar-icon{
    width:54px;height:54px;
    border-radius:50%;
    background: var(--cream-soft);
    border: 1px solid var(--skyblue);
    display:flex;align-items:center;justify-content:center;
    color: var(--skyblue);
    font-size:1.35rem;
    margin-bottom:1.25rem;
  }

  /* ---------- Experience ---------- */
  .exp-item{ padding: 1.5rem 0; border-top: 1px solid var(--line); }
  .exp-num{
    font-family: var(--serif);
    font-size: 1rem;
    color: var(--amber-deep);
    font-weight:700;
  }

  /* ---------- Gallery ---------- */
  .gallery-item{
    aspect-ratio: 1/1;
    overflow:hidden;
  }
  .gallery-item .ph-block{ min-height: 100%; height:100%; }
  .gallery-item img{
    width:100%;
    height:100%;
    object-fit: cover;
    display:block;
    transition: transform .4s ease;
  }
  .gallery-item:hover img{ transform: scale(1.06); }

  /* ---------- Testimonial / quote strip ---------- */
  .quote-strip{
    background: var(--walnut-deep);
    color: var(--amber-soft);
  }
  .quote-strip blockquote{
    font-family: var(--serif);
    font-style: italic;
    font-size: clamp(1.3rem, 2.4vw, 1.9rem);
    max-width: 900px;
    margin: 0 auto;
    line-height:1.4;
  }

  /* ---------- Footer ---------- */
  footer{
    background: var(--walnut-deep);
    color: rgba(242,242,242,.7);
    padding: 3.5rem 0 1.5rem;
  }
  footer a{ color: #F2F2F2; }
  footer a:hover{ color: var(--amber-soft); }
  .social-circle{
    width:38px;height:38px;
    border:1px solid rgba(242,242,242,.35);
    border-radius:50%;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    color:#F2F2F2;
    margin-right:.5rem;
  }
  .social-circle:hover{ border-color: var(--amber-soft); color: var(--amber-soft); }

  /* ---------- Membership form ---------- */
  .membership-form-card{
    background: var(--cream-soft);
    border: 1px solid var(--line);
    padding: 3rem;
  }
  .form-label{
    font-size: .78rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--ink);
  }
  .form-control, .form-select{
    border: 1px solid var(--line);
    border-radius: 2px;
    padding: .7rem .9rem;
    background: #fff;
  }
  .form-control:focus, .form-select:focus{
    border-color: var(--amber-deep);
    box-shadow: 0 0 0 .2rem rgba(200,16,46,.15);
  }
  #mf-status.success{ color: var(--amber-deep); }
  #mf-status.error{ color: var(--amber-deep); }

  @media (max-width: 991.98px){
    section{ padding: 4rem 0; }
    .membership-form-card{ padding: 2rem; }
  }