:root {
  --navy:      #0a1f3c;
  --navy-2:    #102e54;
  --gold:      #c9a86a;
  --gold-soft: #e3d2ab;
  --cream:     #faf8f3;
  --ink:       #1b2435;
  --muted:     #6c7689;
  --line:      #e7e2d6;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 400;
  color: var(--ink);
  line-height: 1.7;
  background: #fff;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
.container { max-width: 1180px; margin: 0 auto; padding: 0 1.6rem; }
section { padding: 7rem 0; }
h1, h2, h3 { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 600; line-height: 1.15; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--gold);
  margin-bottom: 1.1rem;
}
.eyebrow::before { content: ""; width: 28px; height: 1px; background: var(--gold); display: inline-block; }
.eyebrow.center { justify-content: center; }

.btn {
  display: inline-block;
  padding: 0.95rem 2rem;
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.btn-gold { background: var(--gold); color: var(--navy); }
.btn-gold:hover { background: var(--gold-soft); }
.btn-outline { border: 1px solid rgba(255,255,255,0.55); color: #fff; }
.btn-outline:hover { background: #fff; color: var(--navy); border-color: #fff; }
.btn-dark { border: 1px solid var(--navy); color: var(--navy); }
.btn-dark:hover { background: var(--navy); color: #fff; }

/* ===== Header ===== */
header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  background: transparent;
  transition: background 0.35s ease,
              backdrop-filter 0.35s ease, -webkit-backdrop-filter 0.35s ease;
}
/* soft scrim so nav stays legible over the photo while transparent */
header::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(10,31,60,0.55), rgba(10,31,60,0));
  transition: opacity 0.35s ease;
}
header.scrolled {
  background: rgba(10,31,60,0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
header.scrolled::before { opacity: 0; }
.nav {
  display: flex; align-items: center; justify-content: space-between;
  height: 84px; transition: height 0.35s ease;
}
header.scrolled .nav { height: 72px; }
.logo {
  display: flex; align-items: center; gap: 0.65rem;
  font-family: "Cormorant Garamond", serif;
  font-weight: 700; font-size: 1.7rem; letter-spacing: 0.02em;
  color: #fff;
}
.logo .gold { color: #fff; }
.logo-text { display: inline-block; line-height: 1.02; }
.logo-sub {
  display: block;
  font-family: "Inter", sans-serif;
  font-size: 0.52rem; font-weight: 500;
  letter-spacing: 0.32em; text-transform: uppercase;
  text-indent: 0.32em; color: #fff; margin-top: 3px;
}
.logo-mark { width: auto; height: 62px; display: block; transition: height 0.35s ease; filter: brightness(0) invert(1); }
header.scrolled .logo-mark { height: 52px; }
.nav-links {
  display: flex; gap: 2.1rem; list-style: none;
  font-size: 0.78rem; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
}
.nav-links a { color: rgba(255,255,255,0.82); transition: color 0.2s ease; }
.nav-links a:hover { color: var(--gold); }
.nav .btn { padding: 0.7rem 1.5rem; }

/* ===== Classes dropdown ===== */
.has-dropdown { position: relative; }
.has-dropdown > a .caret {
  font-size: 0.6rem; margin-left: 0.34rem;
  display: inline-block; transition: transform 0.32s ease;
}
.has-dropdown:hover > a .caret,
.has-dropdown:focus-within > a .caret { transform: rotate(180deg); }
.dropdown {
  position: absolute; top: 100%; left: 50%;
  margin: 0; padding: 0.5rem 0;
  list-style: none; min-width: 226px;
  background: rgba(10,31,60,0.97);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(201,168,106,0.28);
  box-shadow: 0 22px 48px rgba(5,16,32,0.45);
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translate(-50%, 12px);
  transition: opacity 0.34s cubic-bezier(0.22,0.61,0.36,1),
              transform 0.34s cubic-bezier(0.22,0.61,0.36,1),
              visibility 0.34s;
}
/* invisible bridge keeps hover alive across the header gap */
.dropdown::before {
  content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px;
}
.has-dropdown:hover .dropdown,
.has-dropdown:focus-within .dropdown {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translate(-50%, 0);
}
.dropdown li {
  width: 100%;
  opacity: 0; transform: translateY(7px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.has-dropdown:hover .dropdown li,
.has-dropdown:focus-within .dropdown li { opacity: 1; transform: translateY(0); }
.dropdown li:nth-child(1) { transition-delay: 0.04s; }
.dropdown li:nth-child(2) { transition-delay: 0.08s; }
.dropdown li:nth-child(3) { transition-delay: 0.12s; }
.dropdown li:nth-child(4) { transition-delay: 0.16s; }
.dropdown li:nth-child(5) { transition-delay: 0.20s; }
.dropdown li:nth-child(6) { transition-delay: 0.24s; }
.dropdown a {
  display: block; padding: 0.62rem 1.5rem;
  font-size: 0.72rem; letter-spacing: 0.13em; white-space: nowrap;
  color: rgba(255,255,255,0.78);
  transition: color 0.2s ease, background 0.2s ease, padding-left 0.2s ease;
}
.dropdown a:hover {
  color: var(--gold); background: rgba(201,168,106,0.09);
  padding-left: 1.78rem;
}

/* hamburger toggle (mobile only) */
.nav-toggle {
  display: none; width: 44px; height: 44px;
  background: transparent; border: 0; cursor: pointer; padding: 11px 9px;
}
.nav-toggle span {
  display: block; height: 2px; width: 100%;
  background: #fff; border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.nav-toggle span + span { margin-top: 6px; }
header.nav-open .nav-toggle span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
header.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
header.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
.nav-cta-mobile { display: none; }

/* ===== Hero ===== */
.hero {
  position: relative; overflow: hidden;
  color: #fff; text-align: center;
  min-height: 92vh;
  display: flex; align-items: center;
  padding: 6rem 0;
  background: var(--navy);
}
.hero-bg {
  position: absolute; inset: 0;
  z-index: 0;
}
.hero-slide {
  position: absolute; inset: 0;
  background: center center / cover no-repeat;
  background-color: var(--navy);
  opacity: 0;
  animation: heroFade 21s linear infinite;
}
.hero-slide.s2 { background-image: url('hero-2.jpg'); animation-delay:  0s; }
.hero-slide.s3 { background-image: url('hero-3.jpg'); animation-delay:  7s; }
.hero-slide.s4 { background-image: url('hero-4.jpg'); animation-delay: 14s; }
@keyframes heroFade {
  0%   { opacity: 0; }
  8%   { opacity: 1; }
  30%  { opacity: 1; }
  38%  { opacity: 0; }
  100% { opacity: 0; }
}
.hero-overlay {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(10,31,60,0.55) 0%, rgba(10,31,60,0.62) 50%, rgba(10,31,60,0.95) 100%),
    radial-gradient(ellipse at 50% 35%, rgba(10,31,60,0) 35%, rgba(10,31,60,0.45) 100%);
}
.hero-content { position: relative; z-index: 3; width: 100%; }
.hero .eyebrow { color: var(--gold-soft); }
.hero .eyebrow::before { background: var(--gold-soft); }
.hero h1 {
  font-size: clamp(2.6rem, 5.6vw, 4.6rem);
  font-weight: 600;
  max-width: 920px; margin: 0 auto 1.4rem;
  text-shadow: 0 2px 30px rgba(0,0,0,0.45);
}
.hero p {
  font-size: 1.08rem; font-weight: 300;
  max-width: 600px; margin: 0 auto 2.4rem;
  color: rgba(255,255,255,0.88);
  text-shadow: 0 1px 16px rgba(0,0,0,0.5);
}
.hero-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* Animated water surface waves */
.hero-waves { position: absolute; left: 0; right: 0; bottom: -2px; z-index: 2; line-height: 0; }
.hero-waves svg { width: 200%; height: 210px; display: block; }
.hero-waves .wave-layer { animation: waveSlide linear infinite; }
.hero-waves .w1 { animation-duration: 13s; opacity: 0.35; }
.hero-waves .w2 { animation-duration: 8s;  opacity: 0.5;  }
.hero-waves .w3 { animation-duration: 5s;  opacity: 1;    }
@keyframes waveSlide { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .hero-waves .wave-layer { animation: none; }
  .hero-slide { animation: none; }
  .hero-slide.s2 { opacity: 1; }
  .dropdown, .dropdown li, .has-dropdown > a .caret { transition: none; }
}

/* ===== Sub-page banner ===== */
.page-banner {
  position: relative; overflow: hidden;
  background: var(--navy); color: #fff; text-align: center;
  padding: 11rem 0 4.5rem;
}
.page-banner::before {
  content: ""; position: absolute; inset: 0;
  background: url('swimming.jpg') center 40% / cover no-repeat;
  opacity: 0.16;
}
.page-banner .container { position: relative; }
.page-banner .eyebrow { color: var(--gold-soft); }
.page-banner .eyebrow::before { background: var(--gold-soft); }
.page-banner h1 { font-size: clamp(2.4rem, 5vw, 4rem); }
.page-banner p {
  color: rgba(255,255,255,0.8); font-weight: 300;
  margin: 0.7rem auto 0; max-width: 560px;
}
/* Per-page banner photos — fill full banner width like the index hero */
.page-banner.banner-photo { padding: 19rem 0 9rem; }
.page-banner.banner-photo::before {
  background-size: cover;
  background-position: center;
  opacity: 0.38;
}
.page-banner.banner-infant::before   { background-image: url('infant.jpg'); }
.page-banner.banner-adult::before    { background-image: url('adult.jpg'); }
.page-banner.banner-children::before { background-image: url('children.jpg'); }
.page-banner.banner-toddler::before  { background-image: url('toddler.jpg'); }
.page-banner.banner-ladies::before   { background-image: url('ladies.jpg'); }

/* ===== Section heads ===== */
.section-head { text-align: center; max-width: 640px; margin: 0 auto 4rem; }
.section-head h2 { font-size: clamp(2rem, 3.8vw, 3rem); }
.section-head p { color: var(--muted); margin-top: 0.9rem; font-weight: 300; }

/* ===== Philosophy ===== */
.bg-cream { background: var(--cream); }
.philosophy { background: var(--cream); text-align: center; }
.philosophy h2 {
  font-size: clamp(1.9rem, 3.4vw, 2.9rem);
  max-width: 860px; margin: 0 auto 1.5rem;
  font-style: italic; font-weight: 500;
}
.philosophy p { color: var(--muted); max-width: 680px; margin: 0 auto; font-weight: 300; }
.rule { width: 56px; height: 2px; background: var(--gold); margin: 2.4rem auto 0; }

/* intro split — portrait photo + text */
.intro-split {
  display: grid; grid-template-columns: 0.95fr 1.05fr;
  gap: 3.5rem; align-items: stretch; text-align: left;
}
.intro-photo img {
  width: 100%; height: 100%; max-height: 520px;
  object-fit: cover; display: block;
  border: 1px solid var(--line);
  box-shadow: 0 24px 60px rgba(10,31,60,0.14);
}
.intro-text h2 { margin: 0 0 1.2rem; }
.intro-text p { margin: 0; max-width: 62ch; }
.intro-text .rule { margin: 1.8rem 0 0; }

/* ===== Founders ===== */
.founder-split {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 3.5rem; align-items: center;
}
.founder-photo img {
  width: 100%; aspect-ratio: 1 / 1;
  object-fit: cover; display: block;
  border: 1px solid var(--line);
  box-shadow: 0 24px 60px rgba(10,31,60,0.14);
}
.founder-text .eyebrow { margin-bottom: 1.1rem; }
.founder-text h2 { font-size: clamp(2rem, 3.4vw, 2.8rem); margin-bottom: 1.2rem; }
.founder-text p { color: var(--muted); font-weight: 300; max-width: 62ch; }
.founder-text p + p { margin-top: 1rem; }

/* ===== Icon cards (features / locations) ===== */
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.6rem; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.6rem; }
.icard {
  background: #fff; border: 1px solid var(--line);
  padding: 2.6rem 1.8rem; text-align: center;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.icard:hover { transform: translateY(-6px); box-shadow: 0 22px 48px rgba(10,31,60,0.1); }
.icard .ico {
  width: 64px; height: 64px; margin: 0 auto 1.4rem;
  border: 1px solid var(--gold); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.icard .ico svg { width: 28px; height: 28px; stroke: var(--gold); fill: none; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.icard h3 { font-size: 1.5rem; margin-bottom: 0.4rem; }
.icard p { color: var(--muted); font-size: 0.92rem; font-weight: 300; }

/* ===== Classes ===== */
.classes { background: var(--cream); }
.class-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.class-card {
  display: block;
  background: #fff; border: 1px solid var(--line);
  padding: 2rem 1.6rem;
  transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.class-card:hover { border-color: var(--gold); transform: translateY(-4px); box-shadow: 0 18px 40px rgba(10,31,60,0.1); }
.class-card .num {
  font-family: "Cormorant Garamond", serif;
  font-size: 1.5rem; font-weight: 600; color: var(--gold);
  letter-spacing: 0.05em;
}
.class-card .divider { width: 26px; height: 1px; background: var(--gold); margin: 0.8rem 0 1rem; }
.class-card h3 { font-size: 1.45rem; margin-bottom: 0.3rem; }
.class-card p { color: var(--muted); font-size: 0.88rem; font-weight: 300; }
.class-toggle { display: none; }

/* ===== Pricing ===== */
.pricing { background: var(--cream); }
.price-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; }
.price-card {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--line);
  padding: 2.4rem 1.7rem;
  transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.price-card:hover {
  border-color: var(--gold); transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(10,31,60,0.1);
}
.price-card .tier {
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--gold); margin-bottom: 0.9rem;
}
.price-card .price { font-family: "Cormorant Garamond", serif; line-height: 1; margin-bottom: 1.3rem; }
.price-card .amount { font-size: 2.8rem; font-weight: 600; color: var(--ink); }
.price-card .per {
  font-family: "Inter", sans-serif; font-size: 0.84rem;
  color: var(--muted); margin-left: 0.25rem;
}
.price-card .price-meta { list-style: none; margin-bottom: 1.4rem; }
.price-card .price-meta li {
  position: relative; padding: 0.45rem 0 0.45rem 1.5rem;
  font-size: 0.9rem; font-weight: 300; color: var(--muted);
  border-top: 1px solid var(--line);
}
.price-card .price-meta li:first-child { border-top: none; }
.price-card .price-meta li::before {
  content: ""; position: absolute; left: 0; top: 1.05rem;
  width: 6px; height: 6px; border: 1px solid var(--gold); transform: rotate(45deg);
}
.price-card .trial {
  margin-top: auto; padding-top: 1.1rem;
  border-top: 1px solid var(--line);
  font-size: 0.82rem; font-weight: 500; color: var(--ink);
}
.price-card .trial span { color: var(--gold); }

/* ===== Certification ===== */
.cert-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.8rem; }
.cert-card {
  border: 1px solid var(--line); padding: 3rem 2.6rem;
  background: var(--cream);
}
.cert-card .eyebrow { margin-bottom: 0.6rem; }
.cert-card h3 { font-size: 2rem; margin-bottom: 0.6rem; }
.cert-card > p { color: var(--muted); font-weight: 300; margin-bottom: 1.4rem; }
.cert-card ul { list-style: none; }
.cert-card li {
  padding: 0.5rem 0 0.5rem 1.6rem; position: relative;
  font-size: 0.94rem; border-top: 1px solid var(--line);
}
.cert-card li:first-child { border-top: none; }
.cert-card li::before {
  content: ""; position: absolute; left: 0; top: 1.15rem;
  width: 7px; height: 7px; border: 1px solid var(--gold); transform: rotate(45deg);
}
/* on a white sub-page section the cards read better outlined on white */
.cert-card.on-white { background: #fff; }

/* ===== FAQ ===== */
.faq { background: var(--cream); }
.faq-list { max-width: 800px; margin: 0 auto; }
details {
  background: #fff; border: 1px solid var(--line);
  padding: 1.3rem 1.7rem; margin-bottom: 0.9rem;
}
summary {
  font-family: "Cormorant Garamond", serif; font-size: 1.3rem; font-weight: 600;
  cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 1rem;
}
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; color: var(--gold); font-size: 1.5rem; line-height: 1; font-family: "Inter", sans-serif; }
details[open] summary::after { content: "\2013"; }
details p { color: var(--muted); margin-top: 0.8rem; font-size: 0.95rem; font-weight: 300; }

/* ===== CTA ===== */
.cta {
  position: relative; text-align: center; color: #fff;
  background: var(--navy);
}
.cta::before {
  content: ""; position: absolute; inset: 0;
  background: url('swimming.jpg') center 40% / cover no-repeat;
  opacity: 0.18;
}
.cta .container { position: relative; }
.cta .eyebrow { color: var(--gold-soft); }
.cta .eyebrow::before { background: var(--gold-soft); }
.cta h2 { font-size: clamp(2rem, 4vw, 3.1rem); margin-bottom: 0.8rem; }
.cta p { color: rgba(255,255,255,0.82); font-weight: 300; margin-bottom: 2rem; }

/* ===== Footer ===== */
footer { background: var(--navy); color: rgba(255,255,255,0.6); padding: 4.5rem 0 2rem; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 2.5rem; }
.footer-grid h4 {
  color: var(--gold); font-size: 0.74rem; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase; margin-bottom: 1.1rem;
}
.footer-grid ul { list-style: none; }
.footer-grid li { padding: 0.3rem 0; font-size: 0.9rem; font-weight: 300; }
.footer-grid a:hover { color: var(--gold); }
.footer-brand .logo { margin-bottom: 0.9rem; }
.footer-brand p { font-size: 0.9rem; font-weight: 300; max-width: 290px; }
.socials { display: flex; gap: 0.6rem; margin-top: 1.3rem; }
.socials a {
  width: 56px; height: 56px; border: 1px solid rgba(255,255,255,0.2);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem; transition: border-color 0.2s ease, color 0.2s ease;
}
.socials a:hover { border-color: var(--gold); color: var(--gold); }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.12);
  margin-top: 3rem; padding-top: 1.6rem;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem;
  font-size: 0.8rem; font-weight: 300;
}

/* Floating WhatsApp */
.wa-float {
  position: fixed; bottom: 26px; right: 26px; z-index: 60;
  width: 54px; height: 54px; border-radius: 50%;
  background: #25d366; color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; box-shadow: 0 10px 26px rgba(0,0,0,0.28);
  transition: transform 0.2s ease;
}
.wa-float:hover { transform: scale(1.08); }

@media (max-width: 920px) {
  .nav-toggle { display: block; }
  .nav > .btn-gold { display: none; }
  .logo { font-size: 1.32rem; }
  .logo-mark { height: 50px; }
  header.scrolled .logo-mark { height: 44px; }
  .nav-links {
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; gap: 0;
    background: rgba(10,31,60,0.98);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(201,168,106,0.28);
    padding: 0 1.6rem;
    max-height: 0; overflow: hidden;
    transition: max-height 0.4s ease, padding 0.4s ease;
  }
  header.nav-open .nav-links { max-height: 90vh; padding: 0.5rem 1.6rem 1.7rem; }
  .nav-links li { width: 100%; }
  .nav-links a {
    display: block; padding: 1rem 0;
    border-bottom: 1px solid rgba(255,255,255,0.09);
  }
  .nav-cta-mobile { display: block; }
  .nav-cta-mobile a { border-bottom: 0; padding: 0; }
  .nav-cta-mobile .btn { display: block; text-align: center; margin-top: 1.2rem; }
  /* dropdown collapses into the mobile accordion — tap "Classes" to expand */
  .has-dropdown { width: 100%; }
  .dropdown {
    position: static; transform: none; min-width: 0;
    opacity: 1; visibility: visible; pointer-events: auto;
    background: rgba(0,0,0,0.22); border: 0; box-shadow: none; padding: 0;
    max-height: 0; overflow: hidden;
    transition: max-height 0.35s ease;
  }
  .has-dropdown.open .dropdown { max-height: 60vh; }
  /* kill the desktop hover/focus transforms — they win on specificity
     and shove the menu off-screen on touch */
  .has-dropdown:hover .dropdown,
  .has-dropdown:focus-within .dropdown { transform: none; }
  .has-dropdown:hover .dropdown li,
  .has-dropdown:focus-within .dropdown li { transform: none; }
  .dropdown::before { display: none; }
  .dropdown li { opacity: 1; transform: none; transition: none; }
  .dropdown a {
    padding: 0.85rem 0 0.85rem 1.5rem; font-size: 0.72rem;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    transition: color 0.2s ease;
  }
  .dropdown a:hover { background: transparent; }
  /* swap the ▾ triangle for a +/- expand icon on mobile */
  .has-dropdown > a .caret { font-size: 0; margin-left: 0.5rem; }
  .has-dropdown > a .caret::before {
    content: "+"; font-size: 1.05rem; line-height: 1;
    color: var(--gold);
  }
  .has-dropdown.open > a .caret::before { content: "\2212"; }
  .grid-4, .grid-3, .grid-2, .class-grid, .price-grid { grid-template-columns: repeat(2, 1fr); }
  .cert-grid, .footer-grid { grid-template-columns: 1fr; }
  /* keep photo + text side by side on phone */
  .founder-split { grid-template-columns: 1.15fr 0.85fr; gap: 1.2rem; }
  .intro-split { grid-template-columns: 1.15fr 0.85fr; gap: 1.2rem; text-align: left; }
  section { padding: 4.5rem 0; }
  .hero { padding: 7rem 0; }
  .page-banner { padding: 8rem 0 3.5rem; }
  .page-banner.banner-photo { padding: 10rem 0 5rem; }
}
@media (max-width: 560px) {
  .grid-4, .grid-3, .grid-2, .class-grid, .price-grid { grid-template-columns: 1fr; }
  .cert-card { padding: 2.2rem 1.6rem; }
  .footer-bottom { flex-direction: column; }

  /* stack photo + text on phone — each gets full width, no squashing */
  .intro-split, .founder-split { grid-template-columns: 1fr; gap: 1.8rem; }
  .intro-photo img { height: auto; max-height: 380px; }

  /* Class cards collapsed by default on phone — tap + to expand */
  .class-card { position: relative; padding: 1.4rem 1.6rem; }
  .class-toggle {
    display: flex; align-items: center; justify-content: center;
    position: absolute; top: 1.1rem; right: 1.1rem;
    width: 30px; height: 30px;
    border: 1px solid var(--line); border-radius: 50%;
    color: var(--gold); font-size: 1.4rem; line-height: 1;
    cursor: pointer; transition: border-color 0.2s ease, color 0.2s ease;
  }
  .class-toggle::before { content: "+"; }
  .class-card .divider, .class-card p { display: none; }
  .class-card.open .divider, .class-card.open p { display: block; }
  .class-card.open .class-toggle { color: var(--ink); border-color: var(--gold); }
  .class-card.open .class-toggle::before { content: "\2212"; }
}