:root {
    /* Brand colors */
    --color-primary: #b31217;
    --color-secondary: #d4af37;
    --color-accent: #000000;

    /* Neutral palette */
    --color-white: #ffffff;
    --color-black: #000000;
    --color-gray-light: #f5f5f5;
    --color-gray-dark: #333333;

    --color-hero-bg: #d4af37;
    /* Section backgrounds */
    /* --color-hero-bg: var(--color-white); */
    --color-about-bg: orange;
    --color-styles-bg: yellow;
    --color-lessons-bg: green;
    --color-location-bg: blue;
    --color-contact-bg: purple;

    --brand:     #b31217;
    --brand-dk:    #8f0e13;
    --brand-wash:    #fde9da;
    --accent:       #d4af37;
    --accent-dk: #b8951f;
    --accent-dk-dk: #b8941fd1;
    --accent-wash: #fbf4d8;

    --bluetint: #f0f3f8;

    --ink: #111111;
    --charcoal: #2a2a2a;
    --snow: #f8f8f8;
    --white: #ffffff;

    --bg: var(--white);
    --surface: var(--snow);
    --surface-alt: var(--white);
    --text: var(--ink);
    --text-muted: #666;
    --rule: rgba(0,0,0,0.1);

    --focus: var(--gold-500, #d4af37);
    --ring: color-mix(in oklab, var(--accent) 30%, transparent);

    --nav-h: 65px;
    --nav-h-and-padd: calc(65px + 32px);

    --wobble: 1;
}
:root { --brand-yellow: #FFD100; } /* your yellow */

.navbar .navbar-toggler {
  border-color: var(--accent);
}

.navbar .navbar-toggler:focus {
  box-shadow: 0 0 0 .2rem rgba(255, 209, 0, .35);
}

/* Make the hamburger lines yellow */
.navbar .navbar-toggler .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,\
%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e\
%3cpath stroke='rgba(255,209,0,1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e\
%3c/svg%3e");
}

html {
    scroll-behavior: smooth;          
    /* scroll-padding-top: var(--nav-h);  */
    /* scroll-snap-type: y proximity; */
    overflow-x: clip;
    scroll-padding-top: var(--nav-h);
    background-color: var(--ink);
  }
  
  body {
    scroll-snap-type: y proximity;
    background-color: var(--ink) !important;
    overflow-x:clip;
  }


  .playfair-display-normal {
    font-family: "Playfair Display", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
  }



  .cormorant-garamond-normal {
    font-family: "Cormorant Garamond", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
  }

  .lato-regular {
    font-family: "Lato", sans-serif;
    font-weight: 400;
    font-style: normal;
  }

  /* or per section */
  section { scroll-snap-align: start; scroll-margin-top: var(--nav-h); }

  h1, h2, h3, h4, h5, h6 {
    font-family: "Playfair Display", serif;
    /* font-family: "Cormorant Garamond", serif; */
  }

h1 { font-size: clamp(3rem, 2rem + 3.5vw, 4rem) !important; line-height: 1.05; letter-spacing: 0.05em !important; }
h2 { font-size: clamp(1.75rem, 2.5rem + 2.2vw, 3rem) !important; line-height: 1.12 !important; letter-spacing: 0.01em !important; }
h3 { font-size: clamp(1.5rem, 1.0rem + 1.5vw, 2.25rem); line-height: 1.15; }
h4 { font-size: clamp(1.25rem, 0.95rem + 1vw, 1.75rem); line-height: 1.2; }
h5 { font-size: clamp(1.125rem, 0.95rem + 0.6vw, 1.5rem); line-height: 1.3; }
h6 { font-size: clamp(1rem, 0.95rem + 0.3vw, 1.125rem); line-height: 1.35; }
/* p { font-size: clamp(0.6rem, 1.0rem + 0.3vw, 2rem) !important; line-height: 2rem !important; } */

.section-sep{display:flex;align-items:center;gap:.75rem;padding:3rem 20vw; background-color: var(--ink);}
.section-sep span{flex:1;height:1px;background:var(--snow, #333);opacity:.2}
.section-sep i{width:10px;height:10px;border-radius:50%;background:var(--color-secondary)}

.section--angled{position:relative;isolation:isolate}
.section--angled::after{
  content:"";position:absolute;left:0;right:0;bottom:-32px;height:64px;
  background:linear-gradient(to right,transparent 0 15%,var(--color-styles-bg) 15% 85%,transparent 85% 100%);
  clip-path:polygon(0 0,100% 64%,100% 100%,0 100%);
  opacity:.6
}

.wave{display:block;width:100%;height:80px;color:var(--color-about-bg)}

.bg-noise{position:relative}
.bg-noise::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='.5'/></svg>");
}

.bg-wash{
    background:
      radial-gradient(1200px 600px at 10% -10%, rgba(212,175,55,.12), transparent 60%),
      radial-gradient(1000px 500px at 100% 10%, rgba(179,18,23,.10), transparent 55%),
      var(--color-hero-bg);
  }

  .section::before{
    content:"";display:block;height:8px;
    background:linear-gradient(to bottom, rgba(0,0,0,.06), transparent)
  }

  .section{padding-block: clamp(48px, 8vw, 112px); max-height: 1000px;}
.section--dark{background: var(--color-gray-dark); color: var(--color-white)}
.section--contrast .section-rule{background: var(--color-secondary)}
.section-rule{height:2px;width:72px;margin:.75rem auto;border-radius:2px;background:currentColor;opacity:.3}

.section-title::after {
    content:"";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -6px;
    width: 64px;
    height: 3px;
    background: var(--color-secondary);
    border-radius: 2px;
  }

  .section-title-start::after {
    content:"";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -6px;
    width: 64px;
    height: 3px;
    background: var(--color-secondary);
    border-radius: 2px;
  }

.navbar {
    background: transparent;
    transition: background 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  }
  
  .navbar.scrolled {
    background: #0d0d0d; /* deep charcoal */
    border-bottom: 1px solid var(--color-secondary); /* gold underline */
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  }


  .navbar .nav-link {
    color: var(--white);
    letter-spacing: 0.12em;
    transition: color 0.3s ease;
  }
  
  .navbar .nav-link:hover {
    color: var(--color-secondary);
  }
  
  .navbar.scrolled .nav-link, .navbar.scrolled .navbar-brand {
    color: var(--color-secondary);
  }
  
  .navbar.scrolled .nav-link:hover {
    color: #ffffff;
  }

  .style-card {
    display:block; border-radius: 1rem; overflow:hidden; position:relative;
    background: #0f0f0f; text-decoration:none; color: var(--color-white);
    box-shadow: 0 8px 24px rgba(0,0,0,.35); transition: transform .25s ease, box-shadow .25s ease;
    scale: 0.75;
    opacity: 0.8;
  }
  .style-card:hover { transform: translateY(-4px); box-shadow: 0 12px 30px rgba(0,0,0,.5); }
  .style-body { padding: 1rem 1rem 1.25rem; border-top: 1px solid rgba(255,255,255,.08); }
  .style-body h5 { margin: .5rem 0; letter-spacing: .04em; }

  .style-card:hover { outline: 1px solid var(--color-secondary); outline-offset: 0; }


  .card.pricing { border: 1px solid rgba(0,0,0,.08); border-radius: 1.25rem; }
.card.pricing:hover { box-shadow: 0 12px 30px rgba(0,0,0,.12); transition: box-shadow .25s ease; }
section {
    min-height: 100vh;
    /* display: flex; */
    /* justify-content: center; */
    /* align-items: center; */
    /* padding: 2rem; */
    box-sizing: border-box;
    /* background-color: var(--color-white); */
    background-color: transparent;

}



/* Optional: add to your variables */
:root {
    --color-stats-bg: var(--color-gray-dark);   /* use your palette */
    --color-stats-fg: var(--color-white);
    --color-stats-accent: var(--color-secondary); /* your gold */
  }
  
  /* Full-width, half-page feel */
  .stats-strip {
    background: var(--color-stats-bg);
    color: var(--color-stats-fg);
    min-height: 50vh;               /* half page */
    display: flex;
    align-items: center;            /* vertical centering */
    padding: 3rem 0;                /* mobile breathing room */
  }
  
  /* Tighten on large screens to feel balanced */
  @media (min-width: 992px) {
    .stats-strip { padding: 4.5rem 0; }
  }
  
  /* Stat card style (no real card borders for a premium look) */
  .stats-strip .stat {
    display: grid;
    place-items: center;
    gap: .25rem;
  }
  
  .stats-strip .stat i {
    font-size: 2rem;
    line-height: 1;
    margin-bottom: .25rem;
    /* If your background is dark, a soft glow helps legibility */
    text-shadow: 0 1px 4px rgba(0,0,0,.35);
  }
  
  .stats-strip .value {
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-weight: 800;
    letter-spacing: .3px;
  }
  
  .stats-strip .label {
    font-size: .95rem;
    opacity: .9;
  }
  
  /* Accent underline on the heading */
  .stats-strip h2 {
    position: relative;
    display: inline-block;
    padding-bottom: .25rem;
  }
  .stats-strip h2::after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -6px;
    width: 64px;
    height: 3px;
    background: var(--color-stats-accent);
    border-radius: 2px;
  }

.hero {
    min-height: calc(100vh - var(--nav-h)) !important;
    margin-top: var(--nav-h);
    color: var(--accent-wash);
    background-color: var(--ink);
    /* position: absolute; */
    /* top: var(--nav-h); */
}

.hero h1 {
  color: var(--accent);
}

.hero hr {
  background-color: var(--accent-wash);
}

.about-preview {
/* background-color: var(--ink); */
color: var(--accent-wash);
opacity: 1;
}

.about-preview h2 {
  color: var(--accent);
}


.styles-preview {
  min-height: 70vh;
  /* padding-block: clamp(48px, 12vw, 96px); */
  background-color: var(--snow);
  padding-top: 3rem;
}


.lessons-preview {
  min-height: 50vh;
  background-color: var(--snow);

}

#viewScheduleButton {
  background-color: transparent;
  border: 1px solid var(--accent);
  margin-top: auto;
}
#viewScheduleButton:hover {
  background-color: var(--brand-wash);
}

.location-preview {
  background-color: #333;
  padding-top: 3rem;
  min-height: 60vh;
  /* margin-bottom: 3rem; */
  padding-bottom: 3rem;
  color: #f8f9fa;
}

.contact-preview {
  min-height: 50vh;
  padding-top: 3rem;
  background-color: var(--snow);
}
.navbar-brand {
  color: var(--white);
}

.footer {
  padding-bottom: 3rem;
  background-color: var(--snow);
}

.footer a {
  position: relative;
  text-decoration: none;
  color: #333;
}
.footer-links a::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0;
  width: 0;
  height: 1px;
  background: currentColor;
  transition: width 0.3s ease;
}
.footer-bottom {
  margin-inline: auto;
  display: absolute;
}
.footer a:hover::after { width: 100%; }

.footer a.active {
  color: var(--color-secondary); /* your highlight color */
  font-weight: 600;
}

.form-control {
  background-color: #2a3c60;
  border-color: #333F55;
  color: #333 !important;
}
.form-control:focus {
  background-color: #2a3c60;
  color: #333;
}


.form-item {
  margin-block: 30px;

  height:45px;
  width: 150px;
  background-color: var(--snow) !important;
}

.my-card {
  border-radius: 20px;
  background: var(--snow);
  backdrop-filter: blur(10px);
  padding: 30px;
  border: 1px solid var(--snow);
  box-shadow: 0px 4px 12px rgba(0,0,0,0.3);

  
}


.form-control {
  padding-top: 12px;
  padding-left: 8px;

  height: 45px;
  width: 190px;
  border: 1px solid rgba(0,0,0,0.1);
  color: var(--ink);
  border-radius: 7px;
  background-color: var(--bluetint) !important;

  /* box-shadow: 0px 0px 5px rgba(0,0,0,0.3); */
}




/* .form-control:-webkit-autofill {
background-color: #1e3050 !important;
color: #fdf8f1 !important;
-webkit-box-shadow: 0 0 0 30px #1e3050 inset !important;
-webkit-text-fill-color: #fff !important;
} */

.no-bullet {
  list-style: none;
  padding: 0;
  color: #333;
  /* display: inline-block; */
}
.no-bullet li {
  color: #333;
  /* text-align: start; */
}

.magnetic-wrapper {
    display: inline-block;
    position: relative;
    padding: 38px; 
    margin: -40px; /* cancel out the space */
  }
  
  .magnetic-btn {
    display: inline-block;
    transition: transform 0.2s ease-out;
    will-change: transform;
    position: relative;
    z-index: 2;
    background-color: gold;
    padding: 0.10rem;
    padding-inline: 0.40rem;
    border-radius: 999px;
  }
  
  .magnetic-btn:hover {
    box-shadow: 0 0px 5px rgba(252, 136, 3, 0.4);
    transform: scale(1.05);
  }

  .cta-btn {
    border-radius: 9999px;
    padding: 0.5rem;
    padding-inline: 0.75rem;
    
  }

  .cta-btn-primary {
    border: 2px solid var(--color-primary);
    background-color: var(--accent);
    color: var(--color-white);
  }
  

.dance-grid {
  max-width: 1200px;
  margin-inline: auto;
}



#contactUsButton {
  border: 2px solid var(--accent);
  background-color: transparent;
  /* border-radius: 999px; */
  color: var(--white);
  font-weight: 600;
  font-size: 1.0rem;
  letter-spacing: 1px;
  transition: transform 0.2s ease-out, background-color 1.0s ease-out, border-color 1.0s ease-out, color 0.2s ease-out;

}

#contactUsButton:hover {
  background-color: rgba(17, 17, 17,0.8);
  border-color: var(--accent-dk);
  transform: scale(1.05);
  color: var(--white);
}

#startJourney {
  background-color: var(--accent);
  color: var(--ink);
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: 1px;
  border: 2px solid var(--accent);
  transition: transform 0.2s ease-out, background-color 1.0s ease-out, border-color 1.0s ease-out, color 0.2s ease-out;
    will-change: transform;

}

#startJourney:hover {
  background-color: var(--accent-dk);
  border-color: var(--accent-dk);
  transform: scale(1.05);
  color: var(--ink);
}

#stepInsideBtn {
  background-color: var(--accent); 
  color: var(--ink);
  border: 2px solid var(--accent);
  transition: transform 0.2s ease-out, background-color 1.0s ease-out, border-color 1.0s ease-out;
  will-change: transform;  
}
#stepInsideBtn:hover {
  background-color: var(--accent-dk);
  border-color: var(--accent-dk);
  transform: scale(1.1);
  
}

.cta-primary {
  font-size: 1.125rem !important; /* 18px */
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.5px !important;
}

.cta-small {
  font-size: 0.875rem; /* 14px */
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.accent-wash-text {
  color: var(--accent-wash);
}

.newCta-btn {
  border-radius: 9999px;
  padding: 0.5rem;
  padding-inline: 0.75rem;
  background-color: var(--accent); 
  text-decoration: none;

  color: var(--ink);
  border: 2px solid var(--accent);
  transition: transform 0.2s ease-out, background-color 1.0s ease-out, border-color 1.0s ease-out;
  will-change: transform;  
}
.newCta-btn:hover {
  background-color: var(--accent-dk);
  border-color: var(--accent-dk);
  transform: scale(1.05);
  
}

@media (max-width: 992px) {
  .footer-top {
    text-align: center;
    margin-bottom: 1rem;
  }

}

@media (max-width: 768px) {
  #nav {
    background-color: var(--ink);
  }
}