/* ===========================================================
   Heartville Dance — stylesheet
   Brand: Cyan #4CC1C8 · Cream #FAF7EA · Dark Brown #553924
   =========================================================== */

:root {
  --cyan: #4cc1c8;
  --cyan-pale: #a8e6ea;
  --cyan-dark: #2f979e;
  --cyan-deep: #1f6f75;
  --cream: #faf7ea;
  --cream-2: #f2ecd8;
  --brown: #553924;
  --brown-soft: #7a5a3e;
  --white: #ffffff;

  --font-display: "Bitter", "Clarendon", Georgia, serif;
  --font-body: "Poppins", "Helvetica Neue", Arial, sans-serif;
  --font-script: "Kaushan Script", "Baystar Script", cursive;

  --maxw: 1140px;
  --radius: 14px;
  --shadow: 0 10px 30px rgba(85, 57, 36, 0.13);
  --shadow-lg: 0 18px 50px rgba(85, 57, 36, 0.2);
  --nav-h: 74px;
}

/* ---------- reset ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--nav-h);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--brown);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.7;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; height: auto; }
a { color: var(--cyan-deep); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.15;
  margin: 0 0 0.5em;
  letter-spacing: -0.01em;
}

.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: 24px;
}

.script {
  font-family: var(--font-script);
  font-weight: 400;
  color: var(--cyan-dark);
  letter-spacing: 0.01em;
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--brown); color: var(--cream);
  padding: 10px 18px; border-radius: 0 0 8px 8px;
  transition: top .2s;
}
.skip-link:focus { top: 0; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.98rem;
  letter-spacing: 0.02em;
  padding: 14px 30px;
  border-radius: 999px;
  border: 2px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease,
              background-color .18s ease, color .18s ease;
}
.btn:hover { transform: translateY(-2px); }

.btn-primary {
  background: var(--cyan);
  color: var(--white);
  box-shadow: 0 6px 20px rgba(76, 193, 200, 0.4);
}
.btn-primary:hover { background: var(--cyan-dark); box-shadow: 0 10px 26px rgba(76,193,200,.5); }

.btn-outline {
  background: transparent;
  border-color: var(--white);
  color: var(--white);
}
.btn-outline:hover { background: var(--white); color: var(--brown); }

.btn-brown {
  background: var(--brown);
  color: var(--cream);
}
.btn-brown:hover { background: var(--brown-soft); }

/* Script-face call to action (hero). Bigger and looser than the body-font
   buttons because the display face reads small at the same size. */
.btn-script {
  font-family: var(--font-script);
  font-weight: 400;
  font-size: clamp(1.2rem, 3.2vw, 1.6rem);
  letter-spacing: 0.01em;
  padding: 15px 40px 18px;
  line-height: 1.35;
}

/* ---------- nav ---------- */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--nav-h);
  z-index: 100;
  display: flex;
  align-items: center;
  background: rgba(250, 247, 234, 0);
  transition: background-color .3s ease, box-shadow .3s ease;
}
/* Over the hero the bar is transparent, but the photo is bright in places and
   white links wash out. This scrim guarantees contrast, and fades out once the
   solid cream background takes over on scroll. */
.nav::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: calc(var(--nav-h) + 34px);
  background: linear-gradient(180deg, rgba(38, 25, 15, 0.68) 0%, rgba(38, 25, 15, 0.42) 55%, rgba(38, 25, 15, 0) 100%);
  pointer-events: none;
  z-index: -1;
  transition: opacity .3s ease;
}
.nav.scrolled::before { opacity: 0; }

.nav.scrolled {
  background: rgba(250, 247, 234, 0.96);
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 18px rgba(85, 57, 36, 0.12);
}
.nav .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.nav-logo { display: flex; align-items: center; text-decoration: none; }
/* Transparent PNG wordmark — no rounded tile, no background. */
.nav-logo img { width: auto; height: 46px; }

.nav-links { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.nav-links > li { position: relative; }
.nav-links a {
  display: block;
  padding: 9px 14px;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--white);
  text-decoration: none;
  border-radius: 999px;
  text-shadow: 0 1px 3px rgba(0,0,0,.6);
  transition: color .25s, background-color .25s, text-shadow .25s;
}
.nav.scrolled .nav-links a { color: var(--brown); text-shadow: none; }
.nav-links a:hover,
.nav-links a.active { background: var(--cyan); color: var(--white); text-shadow: none; }

/* ---------- nav dropdown ---------- */
.has-sub > a { display: flex; align-items: center; gap: 6px; }
.chev { transition: transform .25s ease; }
.has-sub:hover > a .chev,
.has-sub:focus-within > a .chev { transform: rotate(180deg); }

.subnav {
  position: absolute;
  top: 100%; left: 0;
  min-width: 210px;
  margin: 4px 0 0;
  padding: 8px;
  list-style: none;
  background: var(--cream);
  border-radius: 14px;
  box-shadow: 0 16px 34px rgba(85, 57, 36, 0.22);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity .22s ease, transform .22s ease, visibility 0s linear .22s;
}
.has-sub:hover > .subnav,
.has-sub:focus-within > .subnav {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity .22s ease, transform .22s ease, visibility 0s;
}
/* keeps the pointer from falling through the gap between trigger and panel */
.subnav::before { content: ""; position: absolute; left: 0; right: 0; top: -8px; height: 8px; }
.subnav a {
  color: var(--brown);
  text-shadow: none;
  white-space: nowrap;
  border-radius: 9px;
  padding: 10px 14px;
  font-size: 0.9rem;
}

.nav-toggle {
  display: none;
  background: none; border: 0; cursor: pointer;
  padding: 8px; width: 44px; height: 44px;
}
.nav-toggle span {
  display: block; height: 2px; width: 26px; margin: 5px auto;
  background: var(--white); border-radius: 2px;
  box-shadow: 0 0 6px rgba(0,0,0,.4);
  transition: transform .3s, opacity .3s, background-color .3s;
}
.nav.scrolled .nav-toggle span { background: var(--brown); box-shadow: none; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- hero ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  text-align: center;
  color: var(--white);
  overflow: hidden;
  padding: calc(var(--nav-h) + 40px) 0 70px;
}
.hero-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
}
.hero::after {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg, rgba(85,57,36,.62) 0%, rgba(31,111,117,.55) 55%, rgba(85,57,36,.78) 100%);
}
.hero .container { position: relative; z-index: 2; }

.hero h1 {
  font-size: clamp(1.9rem, 5vw, 3.1rem);
  font-weight: 600;
  color: var(--white);
  text-shadow: 0 3px 24px rgba(0,0,0,.45);
  margin: 0 0 0.35em;
}
/* Transparent wordmark sits directly on the photo — no tile or shadow. */
.hero-logo {
  width: min(440px, 78vw);
  height: auto;
  margin: 0 auto 22px;
  filter: drop-shadow(0 6px 24px rgba(0, 0, 0, 0.4));
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 6px; }

/* ---------- sections ---------- */
.section { padding: clamp(70px, 9vw, 118px) 0; position: relative; }
.section-cream  { background: var(--cream); }
.section-cream2 { background: var(--cream-2); }
.section-white  { background: var(--white); }

.section-head { text-align: center; max-width: 740px; margin: 0 auto clamp(40px, 6vw, 64px); }
.eyebrow {
  display: inline-block;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--cyan-dark);
  margin-bottom: 14px;
}
.section-head h2 { font-size: clamp(2rem, 4.6vw, 3rem); }
.section-head p { color: var(--brown-soft); font-size: 1.05rem; margin: 0; }

.divider-hearts {
  display: flex; align-items: center; justify-content: center;
  gap: 14px; margin: 20px auto 0; color: var(--cyan);
}
.divider-hearts::before,
.divider-hearts::after {
  content: ""; height: 2px; width: 56px; background: currentColor; opacity: .4; border-radius: 2px;
}
/* the heart itself */
.divider-hearts > i {
  display: block;
  width: 13px; height: 13px;
  background: currentColor;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
}

/* ---------- about ---------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}
.split-media img { border-radius: var(--radius); box-shadow: var(--shadow-lg); }
.split-body h2 { font-size: clamp(1.9rem, 4vw, 2.7rem); }
.split-body p { color: var(--brown-soft); }
.split-body p strong { color: var(--brown); }

.pill-list { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 12px; }
.pill-list li {
  display: flex; align-items: flex-start; gap: 12px;
  font-size: 0.98rem;
}
.pill-list li::before {
  content: "";
  flex: 0 0 auto;
  width: 12px; height: 12px; margin-top: 8px;
  background: var(--cyan);
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
}

/* ---------- value cards ---------- */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 26px;
}
.card {
  background: var(--white);
  border-radius: var(--radius);
  padding: 34px 30px;
  box-shadow: var(--shadow);
  border-top: 5px solid var(--cyan);
  transition: transform .25s ease, box-shadow .25s ease;
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.card-icon {
  width: 54px; height: 54px;
  display: grid; place-items: center;
  border-radius: 14px;
  background: rgba(76,193,200,.15);
  color: var(--cyan-dark);
  margin-bottom: 18px;
}
.card-icon-img { background: var(--cream); overflow: hidden; padding: 3px; }
.card-icon-img img { width: 100%; height: 100%; object-fit: contain; border-radius: 10px; }
.card h3 { font-size: 1.25rem; margin-bottom: 0.4em; }
.card p { margin: 0 0 14px; color: var(--brown-soft); font-size: 0.97rem; }
.card p:last-child { margin-bottom: 0; }
.card-cta a {
  font-weight: 600;
  font-size: 0.94rem;
  color: var(--cyan-deep);
  text-decoration: none;
  border-bottom: 2px solid rgba(76,193,200,.35);
  padding-bottom: 2px;
  transition: border-color .2s, color .2s;
}
.card-cta a:hover { color: var(--cyan-dark); border-bottom-color: var(--cyan); }

/* ---------- signup ---------- */
.signup {
  margin: clamp(38px, 6vw, 60px) auto 0;
  max-width: 720px;
  text-align: center;
  background: var(--white);
  border-radius: var(--radius);
  border-top: 5px solid var(--cyan);
  padding: clamp(30px, 5vw, 46px) clamp(24px, 5vw, 46px);
  box-shadow: var(--shadow);
}
.signup h3 { font-size: clamp(1.4rem, 3vw, 1.8rem); margin-bottom: 0.4em; }
.signup p { color: var(--brown-soft); margin: 0 auto 26px; max-width: 520px; font-size: 0.99rem; }

/* ---------- gallery ---------- */
/* Masonry via CSS columns: every photo keeps its own aspect ratio,
   nothing gets cropped, and there are no gaps inside the grid. */
.gallery {
  column-count: 4;
  column-gap: 14px;
}
.gallery figure {
  margin: 0 0 14px;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  overflow: hidden;
  border-radius: 12px;
  position: relative;
  background: var(--cream-2);
  cursor: zoom-in;
  display: block;
}
.gallery img {
  width: 100%; height: auto;
  display: block;
  transition: transform .55s cubic-bezier(.2,.7,.3,1);
}
.gallery figure:hover img { transform: scale(1.07); }
.gallery figure::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(31,111,117,.45));
  opacity: 0; transition: opacity .35s;
}
.gallery figure:hover::after { opacity: 1; }

/* lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(40, 26, 16, .94);
  display: none; place-items: center;
  padding: 24px;
}
.lightbox.open { display: grid; }
.lightbox img {
  max-width: min(94vw, 1200px);
  max-height: 88vh;
  width: auto; height: auto;
  border-radius: 10px;
  box-shadow: 0 24px 70px rgba(0,0,0,.6);
}
.lightbox-close, .lightbox-nav {
  position: absolute;
  background: rgba(255,255,255,.14);
  border: 0; color: var(--white);
  width: 48px; height: 48px; border-radius: 50%;
  font-size: 1.5rem; line-height: 1; cursor: pointer;
  display: grid; place-items: center;
  transition: background-color .2s;
}
.lightbox-close:hover, .lightbox-nav:hover { background: var(--cyan); }
.lightbox-close { top: 20px; right: 20px; }
.lightbox-prev { left: 20px; top: 50%; transform: translateY(-50%); }
.lightbox-next { right: 20px; top: 50%; transform: translateY(-50%); }

/* ---------- LDYHO feature ---------- */
.feature {
  display: grid;
  grid-template-columns: minmax(260px, 390px) 1fr;
  gap: clamp(30px, 5vw, 56px);
  align-items: center;
  background: var(--white);
  border-radius: 20px;
  padding: clamp(28px, 4vw, 48px);
  box-shadow: var(--shadow-lg);
}
.feature-logo img { border-radius: 16px; width: 100%; box-shadow: var(--shadow); }
.feature h2 { font-size: clamp(1.7rem, 3.6vw, 2.4rem); }
.feature p { color: var(--brown-soft); }

/* ---------- connect ---------- */
/* Flex + centered wrapping so an odd card count (currently 5) breaks into a
   centred 3 + 2 rather than leaving one stranded at the left of a new row. */
.connect-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  max-width: 800px;
  margin-inline: auto;
}
.connect-card {
  flex: 1 1 210px;
  max-width: 250px;
  background: var(--white);
  border-radius: var(--radius);
  padding: 32px 26px;
  text-align: center;
  box-shadow: var(--shadow);
  text-decoration: none;
  color: var(--brown);
  transition: transform .25s, box-shadow .25s, background-color .25s;
  display: block;
}
.connect-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  background: var(--cyan);
  color: var(--white);
}
.connect-card:hover .connect-icon { background: rgba(255,255,255,.22); color: var(--white); }
.connect-card:hover .connect-value { color: var(--white); }
.connect-icon {
  width: 60px; height: 60px; margin: 0 auto 16px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(76,193,200,.16);
  color: var(--cyan-dark);
  transition: background-color .25s, color .25s;
}
.connect-card h3 { font-size: 1.15rem; margin-bottom: 0.25em; }
.connect-value { font-size: 0.88rem; color: var(--brown-soft); overflow-wrap: break-word; transition: color .25s; }

/* ---------- footer ---------- */
.footer {
  background: var(--brown);
  color: rgba(250,247,234,.8);
  padding: 56px 0 30px;
  text-align: center;
}
.footer-contact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 16px;
  margin: 0 0 26px;
  font-size: 1rem;
}
.footer-contact a {
  color: var(--cream);
  text-decoration: none;
  border-bottom: 1px solid rgba(250, 247, 234, 0.3);
  padding-bottom: 2px;
  transition: color .2s, border-color .2s;
}
.footer-contact a:hover { color: var(--cyan); border-bottom-color: var(--cyan); }
.footer-sep {
  width: 5px; height: 5px; border-radius: 50%;
  background: rgba(250, 247, 234, 0.4);
}

.footer-social {
  display: flex; gap: 14px; justify-content: center;
  margin: 0 0 28px;
}
.footer-social a {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(250, 247, 234, 0.1);
  color: var(--cream);
  transition: background-color .22s ease, color .22s ease, transform .22s ease;
}
.footer-social a:hover {
  background: var(--cyan);
  color: var(--white);
  transform: translateY(-3px);
}
.footer-bottom {
  border-top: 1px solid rgba(250,247,234,.16);
  padding-top: 22px;
  font-size: 0.82rem;
  color: rgba(250,247,234,.55);
}

/* ---------- reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s ease; }
.reveal.visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  * { transition-duration: .01ms !important; }
}

/* ---------- responsive ---------- */
@media (max-width: 980px) {
  .feature { grid-template-columns: 1fr; text-align: center; }
  .feature-logo img { max-width: 240px; margin-inline: auto; }
  .gallery { column-count: 3; }
}

@media (max-width: 860px) {
  .nav-toggle { display: block; }

  /* The <nav> wrapper is a zero-width third flex child. With space-between
     that strands the hamburger mid-bar, so drop its box and let the logo and
     toggle be the only two items. The menu inside is absolutely positioned
     against .nav, so it is unaffected. */
  .nav-menu { display: contents; }
  .nav-links {
    position: absolute;
    top: var(--nav-h); left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--cream);
    box-shadow: 0 14px 28px rgba(85,57,36,.18);
    /* Closed: no vertical padding. border-box can't shrink padding below its
       own size, so leaving it here paints a stray bar under the nav. */
    padding: 0 16px;
    max-height: 0;
    overflow: hidden;
    visibility: hidden;
    transition: max-height .35s ease, padding .35s ease, visibility 0s linear .35s;
  }
  .nav-links.open {
    max-height: 560px;
    padding: 10px 16px 18px;
    visibility: visible;
    transition: max-height .35s ease, padding .35s ease, visibility 0s;
  }
  .nav-links a { color: var(--brown); text-shadow: none; padding: 13px 16px; border-radius: 10px; }

  /* On mobile the submenu is always expanded and indented, LDYHO-style. */
  .subnav {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    min-width: 0;
    margin: 0 0 4px 16px;
    padding: 0 0 0 12px;
    border-left: 2px solid rgba(76, 193, 200, 0.45);
    transition: none;
  }
  .subnav::before { display: none; }
  .subnav a { font-size: 0.88rem; padding: 10px 14px; }
  .has-sub > a .chev { display: none; }

  .split { grid-template-columns: 1fr; }
  .split-reverse .split-media { order: -1; }

  .gallery { column-count: 2; }
}

@media (max-width: 560px) {
  body { font-size: 16px; }
  .container { padding-inline: 20px; }
  .hero-actions .btn { width: 100%; justify-content: center; }
  .gallery { column-gap: 10px; }
  .gallery figure { margin-bottom: 10px; }

  /* Stack email and phone rather than wrapping and stranding the dot. */
  .footer-contact { flex-direction: column; gap: 12px; font-size: 0.95rem; }
  .footer-sep { display: none; }
  .lightbox-prev { left: 8px; }
  .lightbox-next { right: 8px; }
}