/* =========================================================
   LEARN WAVE — Main stylesheet (mobile-header fix)
========================================================= */

:root {
  --ink: #14123a;
  --ink-soft: #46446b;
  --cream: #fff8ee;
  --white: #ffffff;

  --teal: #009fa9;
  --orange: #ef7d3c;
  --pink: #e83a8c;
  --green: #1aa85a;
  --purple: #86308b;
  --yellow: #f6a12d;
  --blue: #2b5ea8;

  --radius: 28px;
  --radius-sm: 18px;
  --container: 1240px;
  --gutter: max(5vw, calc((100vw - var(--container)) / 2));

  --transition: 0.3s cubic-bezier(.2,.8,.2,1);
}

/* ================= RESET ================= */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 110px;
  -webkit-text-size-adjust: 100%;
}

body {
  min-width: 320px;
  font-family: "Poppins", sans-serif;
  color: var(--ink);
  background: var(--cream);
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.menu-open { overflow: hidden; }

img { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
address { font-style: normal; }

h1, h2, h3 {
  font-family: "Bricolage Grotesque", sans-serif;
  line-height: 1.05;
  letter-spacing: -0.025em;
}
h1, h2, h3, p { overflow-wrap: break-word; }
h2 { font-size: clamp(2.15rem, 4.8vw, 3.8rem); font-weight: 800; }

::selection { background: var(--pink); color: #fff; }
:focus-visible { outline: 3px solid var(--yellow); outline-offset: 4px; }

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

/* ================= GLOBAL ================= */

.section { width: 100%; }

.eyebrow {
  margin-bottom: 1rem;
  color: var(--yellow);
  font-size: .74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .17em;
}
.eyebrow.dark { color: var(--pink); }

em {
  font-style: normal;
  color: transparent;
  background: linear-gradient(90deg, var(--pink), var(--orange));
  -webkit-background-clip: text;
  background-clip: text;
}

mark {
  color: inherit;
  padding: 0 .08em;
  background: linear-gradient(transparent 62%, var(--yellow) 62%);
}

/* ================= BUTTONS ================= */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  min-height: 54px;
  padding: .9rem 1.6rem;
  border: 0;
  border-radius: 999px;
  background: var(--pink);
  color: #fff;
  font-size: .96rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  box-shadow: 0 6px 0 #a8215f;
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition);
}
.btn:hover  { transform: translateY(3px); box-shadow: 0 3px 0 #a8215f; }
.btn:active { transform: translateY(5px); box-shadow: 0 1px 0 #a8215f; }

.btn.ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }
.btn.ghost:hover { background: var(--ink); color: #fff; box-shadow: inset 0 0 0 2px var(--ink); }

.btn.wa { background: var(--green); box-shadow: 0 6px 0 #11763f; }
.btn.wa:hover { box-shadow: 0 3px 0 #11763f; }

/* ================= PROGRESS ================= */

.progress {
  position: fixed; top: 0; left: 0;
  width: 0; height: 4px;
  background: linear-gradient(90deg, var(--teal), var(--pink), var(--yellow));
  z-index: 2000;
}

/* ================= REVEAL ================= */

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1);
}
.reveal.in { opacity: 1; transform: none; }

/* =========================================================
   HEADER
   - centred with auto margins (no transform), so nothing
     shifts the mobile dropdown's containing box
========================================================= */

.nav {
  position: fixed;
  top: calc(18px + env(safe-area-inset-top, 0px));
  left: 0;
  right: 0;
  margin-inline: auto;
  width: min(var(--container), calc(100% - 40px));
  min-height: 68px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;

  padding: 8px 10px 8px 22px;
  background: rgba(255,255,255,.96);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(20,18,58,.08);
  border-radius: 999px;
  box-shadow: 0 14px 45px rgba(20,18,58,.12);
  z-index: 1000;
  transition: box-shadow .3s ease, background .3s ease;
}

.nav.scrolled { background: rgba(255,255,255,.99); box-shadow: 0 12px 35px rgba(20,18,58,.16); }

.brand {
  position: relative;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  min-width: 0;
  z-index: 2;
}

.brand img {
  display: block;
  width: auto;
  height: 48px;
  max-width: 100%;
  object-fit: contain;
}

/* Desktop nav */

.nav nav {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  font-size: .88rem;
  font-weight: 500;
}

.nav nav a {
  position: relative;
  white-space: nowrap;
  transition: color .25s ease;
}

.nav nav a:not(.nav-demo)::after {
  content: "";
  position: absolute;
  left: 0; bottom: -7px;
  width: 0; height: 2px;
  background: var(--pink);
  border-radius: 999px;
  transition: width .25s ease;
}
.nav nav a:not(.nav-demo):hover { color: var(--pink); }
.nav nav a:not(.nav-demo):hover::after { width: 100%; }

.nav-demo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: .65rem 1.1rem;
  background: var(--pink);
  color: #fff !important;
  border-radius: 999px;
  font-weight: 600;
  box-shadow: 0 4px 0 #a8215f;
  transition: transform .2s ease, box-shadow .2s ease;
}
.nav-demo:hover { transform: translateY(2px); box-shadow: 0 2px 0 #a8215f; }

/* Burger */

.burger {
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 6px;
  flex-shrink: 0;
  width: 46px; height: 46px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--ink);
  position: relative;
  z-index: 2;
  -webkit-tap-highlight-color: transparent;
}

.burger span {
  display: block;
  width: 19px; height: 2px;
  background: #fff;
  border-radius: 999px;
  transition: transform .3s ease;
}

.burger.x span:first-child { transform: translateY(4px) rotate(45deg); }
.burger.x span:last-child  { transform: translateY(-4px) rotate(-45deg); }

/* Dim layer behind the mobile menu */

.nav-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(20,18,58,.45);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility .3s ease;
  z-index: 990;
}
.nav-backdrop.show { opacity: 1; visibility: visible; }

/* ================= HERO ================= */

.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(420px, .98fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 5rem);
  padding: 9rem var(--gutter) 8rem;
  background: var(--cream);
  overflow: hidden;
}

.hero-copy { position: relative; z-index: 3; max-width: 680px; }

.hero h1 {
  max-width: 720px;
  font-size: clamp(2.7rem, 5.2vw, 5rem);
  font-weight: 800;
}

.tiles { display: flex; gap: .32rem; margin-bottom: 1rem; }

.tiles b {
  display: grid;
  place-items: center;
  width: clamp(42px, 6vw, 78px);
  aspect-ratio: 1;
  background: var(--c);
  color: #fff;
  font-size: clamp(1.9rem, 4.3vw, 3.6rem);
  line-height: 1;
  border-radius: 14px;
  animation: bob 4s ease-in-out infinite;
}
.tiles b:nth-child(2) { animation-delay: .15s; }
.tiles b:nth-child(3) { animation-delay: .3s; }
.tiles b:nth-child(4) { animation-delay: .45s; }
.tiles b:nth-child(5) { animation-delay: .6s; }

.lead {
  max-width: 600px;
  margin: 1.5rem 0 2rem;
  color: var(--ink-soft);
  font-size: clamp(1rem, 1.5vw, 1.1rem);
}

.cta { display: flex; flex-wrap: wrap; gap: 1rem; }

.mini { display: flex; flex-wrap: wrap; gap: 1.5rem 2.4rem; margin-top: 2.8rem; }

.mini li { display: grid; gap: .35rem; color: #5b5980; font-size: .78rem; }

.mini strong {
  font-family: "Bricolage Grotesque", sans-serif;
  color: var(--ink);
  font-size: clamp(2rem, 3vw, 2.5rem);
  line-height: 1;
}

/* Hero art */

.hero-art {
  position: relative;
  width: 100%;
  height: min(620px, 42vw);
  min-height: 480px;
  z-index: 2;
}

.photo-main {
  position: absolute;
  inset: 2% 0 9% 10%;
  overflow: hidden;
  background: var(--teal);
  border-radius: 62% 38% 55% 45% / 50% 55% 45% 50%;
  box-shadow: 20px 20px 0 var(--yellow);
  animation: morph 12s ease-in-out infinite;
}

.photo-main img, .photo-small img { width: 100%; height: 100%; object-fit: cover; }

.photo-small {
  position: absolute;
  left: 0; bottom: 0;
  width: 35%;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--pink);
  border: 8px solid var(--cream);
  border-radius: 50%;
  animation: floatSmall 8s ease-in-out infinite;
}

.chip {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .65rem .95rem;
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(20,18,58,.05);
  border-radius: 999px;
  color: var(--ink);
  font-size: .76rem;
  font-weight: 600;
  box-shadow: 0 12px 30px rgba(20,18,58,.15);
  animation: bob 5s ease-in-out infinite;
  white-space: nowrap;
}

.c1 { top: 7%; left: 0; }
.c2 { top: 44%; right: -2%; animation-delay: -1s; }
.c3 { right: 12%; bottom: 2%; animation-delay: -2s; }

.spin {
  position: absolute;
  top: -3%; right: 3%;
  width: 108px; height: 108px;
  display: grid;
  place-items: center;
  background: var(--ink);
  border-radius: 50%;
  box-shadow: 0 15px 35px rgba(20,18,58,.18);
}

.spin svg { position: absolute; inset: 0; width: 100%; height: 100%; animation: rotate 16s linear infinite; }
.spin text { fill: #fff; font-size: 10px; font-weight: 600; letter-spacing: 1px; }
.spin span { font-size: 1.8rem; }

.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(65px);
  opacity: .38;
  pointer-events: none;
  animation: float 14s ease-in-out infinite;
}
.b1 { width: 420px; height: 420px; top: -130px; left: -120px; background: var(--teal); }
.b2 { width: 360px; height: 360px; right: 15%; bottom: -100px; background: var(--pink); animation-delay: -5s; }

.wave { position: absolute; left: 0; bottom: -1px; width: 100%; height: 90px; pointer-events: none; }

/* ================= MARQUEE ================= */

.marquee {
  width: 100%;
  overflow: hidden;
  padding: 1.15rem 0;
  background: var(--ink);
  color: #fff;
  white-space: nowrap;
}

.track {
  display: inline-flex;
  align-items: center;
  gap: 1.7rem;
  width: max-content;
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: clamp(1.5rem, 3.2vw, 2.8rem);
  font-weight: 800;
  text-transform: uppercase;
  animation: slide 30s linear infinite;
}
.track i { color: var(--yellow); font-style: normal; }

/* ================= ABOUT ================= */

.about {
  display: grid;
  grid-template-columns: minmax(300px, .9fr) minmax(0, 1.1fr);
  gap: clamp(3rem, 6vw, 6rem);
  align-items: center;
  max-width: var(--container);
  margin-inline: auto;
  padding: 8rem 2rem;
}

.about-photos { position: relative; height: 540px; }
.about-photos img { position: absolute; object-fit: cover; border-radius: var(--radius); }

.ap1 {
  width: 68%; height: 72%;
  top: 0; left: 0;
  border-radius: 200px 200px var(--radius) var(--radius) !important;
}

.ap2 {
  width: 55%; height: 50%;
  right: 0; bottom: 0;
  border: 10px solid var(--cream);
  border-radius: var(--radius);
}

.stamp {
  position: absolute;
  left: -2%; top: 56%;
  width: 120px; height: 120px;
  display: grid;
  place-content: center;
  text-align: center;
  background: var(--yellow);
  border-radius: 50%;
  transform: rotate(-12deg);
  font-family: "Bricolage Grotesque", sans-serif;
  line-height: 1.1;
  box-shadow: 0 10px 25px rgba(20,18,58,.1);
}
.stamp strong { font-size: 1.5rem; }

.about-copy > p:not(.eyebrow) { margin-top: 1.2rem; color: var(--ink-soft); }

.values { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; margin-top: 2.6rem; }
.values > div { padding-top: 1rem; border-top: 3px solid var(--ink); }

.values span {
  display: inline-block;
  padding: .15rem .6rem;
  background: var(--c);
  color: #fff;
  border-radius: 8px;
  font-size: .78rem;
  font-weight: 700;
}

.values h3 { margin: .65rem 0 .25rem; font-size: 1.15rem; }
.values p  { color: var(--ink-soft); font-size: .82rem; }

/* ================= DARK / HEADINGS ================= */

.section-dark { background: var(--ink); color: #fff; }

.sec-head { max-width: 680px; margin-bottom: 3rem; }
.sec-head p:last-child { margin-top: 1rem; color: #c9c7e6; }
.sec-head.center { margin-inline: auto; text-align: center; }

/* ================= SERVICES ================= */

.stairs { padding: 7rem var(--gutter) 0; }

.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: end;
  max-width: var(--container);
  min-height: 480px;
  margin-inline: auto;
}

.step {
  min-height: 300px;
  padding: 2rem 1.5rem;
  color: #fff;
  border-radius: var(--radius) var(--radius) 0 0;
  cursor: pointer;
  outline: none;
  transition: transform .4s ease, filter .3s ease;
}
.step:hover, .step:focus-visible { transform: translateY(-14px); }

.s1 { height: 300px; background: var(--teal); }
.s2 { height: 360px; background: var(--orange); }
.s3 { height: 420px; background: var(--pink); }
.s4 { height: 480px; background: var(--purple); }

.lvl {
  display: inline-flex;
  align-items: center;
  padding: .25rem .85rem;
  background: rgba(255,255,255,.2);
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 700;
}

.step h3 { margin: 1rem 0 .5rem; font-size: clamp(1.4rem, 2vw, 1.8rem); }
.step p  { font-size: .88rem; opacity: .92; }
.step ul { margin-top: 1rem; padding-left: 1rem; font-size: .82rem; list-style: disc; }

/* ================= FOUNDATION ================= */

.found {
  display: grid;
  grid-template-columns: minmax(280px, .8fr) minmax(0, 1.2fr);
  gap: clamp(3rem, 6vw, 6rem);
  align-items: center;
  padding: 8rem var(--gutter);
  background: var(--yellow);
}

.found-left { max-width: 560px; }
.found .eyebrow { color: var(--ink); }
.found-left > p:not(.eyebrow) { margin: 1.2rem 0 2rem; }
.found-left em { color: #fff; background: none; -webkit-text-fill-color: #fff; }

.found-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }

.fc {
  min-height: 190px;
  padding: 1.5rem;
  background: #fff;
  border-radius: var(--radius);
  transition: transform .3s ease, background .3s ease, color .3s ease;
}
.fc:nth-child(even) { transform: translateY(22px); }
.fc:hover { color: #fff; background: var(--ink); transform: translateY(-5px) rotate(-1deg); }
.fc:nth-child(even):hover { transform: translateY(15px) rotate(1deg); }

.fc i {
  display: grid;
  place-items: center;
  width: 50px; height: 50px;
  margin-bottom: 1rem;
  background: var(--cream);
  color: var(--ink);
  border-radius: 15px;
  font-style: normal;
  font-size: 1.3rem;
}

.fc h3 { font-size: 1.1rem; }
.fc p  { margin-top: .4rem; font-size: .82rem; opacity: .8; }

/* ================= TUITION ================= */

.tuition {
  display: grid;
  grid-template-columns: minmax(300px, 1fr) minmax(0, 1fr);
  gap: clamp(3rem, 6vw, 6rem);
  align-items: center;
  max-width: var(--container);
  margin-inline: auto;
  padding: 8rem 2rem;
}

.t-img { position: relative; }

.t-img img {
  width: 100%;
  aspect-ratio: 4 / 4.4;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: -18px 18px 0 var(--teal);
}

.t-badge {
  position: absolute;
  top: 10%; right: -15px;
  padding: 1rem 1.25rem;
  background: var(--pink);
  color: #fff;
  border-radius: 20px;
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 800;
  line-height: 1.1;
  transform: rotate(6deg);
}

.t-copy > p:not(.eyebrow) { margin: 1.2rem 0; }

.ticks { margin-top: 1.5rem; }

.ticks li {
  position: relative;
  padding: .7rem 0 .7rem 2.4rem;
  border-bottom: 1px dashed #cfc7b8;
  font-size: .9rem;
  font-weight: 500;
}

.ticks li::before {
  content: "✓";
  position: absolute;
  left: 0; top: .65rem;
  display: grid;
  place-items: center;
  width: 1.55rem; height: 1.55rem;
  background: var(--green);
  color: #fff;
  border-radius: 50%;
  font-size: .75rem;
}

/* ================= MODES ================= */

.modes { padding: 6rem var(--gutter); background: #fff; text-align: center; }

.switch {
  position: relative;
  display: inline-flex;
  padding: 6px;
  margin-bottom: 2rem;
  background: var(--cream);
  border: 2px solid var(--ink);
  border-radius: 999px;
}

.switch button {
  position: relative;
  z-index: 2;
  min-width: 120px;
  padding: .75rem 1.5rem;
  border: 0;
  background: transparent;
  color: var(--ink);
  border-radius: 999px;
  font-weight: 600;
  transition: color .3s ease;
}
.switch button.on { color: #fff; }

.pill {
  position: absolute;
  top: 6px; left: 6px;
  width: 120px;
  height: calc(100% - 12px);
  background: var(--ink);
  border-radius: 999px;
  transition: transform .4s cubic-bezier(.7,0,.2,1), width .4s cubic-bezier(.7,0,.2,1);
}

/* Cards stack in one grid cell, so the panel always fits the taller one */

.mode-panel {
  display: grid;
  width: 100%;
  max-width: 800px;
  margin-inline: auto;
}

.mode-card {
  grid-area: 1 / 1;
  padding: 2.5rem;
  color: #fff;
  text-align: left;
  background: linear-gradient(135deg, var(--teal), var(--blue));
  border-radius: var(--radius);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(10px) scale(.97);
  transition: opacity .4s ease, transform .4s ease, visibility .4s ease;
}

.mode-card[data-for="offline"] { background: linear-gradient(135deg, var(--orange), var(--pink)); }

.mode-card.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
}

.mode-card h3 { margin-bottom: .8rem; font-size: clamp(1.5rem, 3vw, 2.1rem); }
.mode-card p  { max-width: 650px; opacity: .94; }

.tags { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: 1.5rem; }

.tags span {
  padding: .4rem .85rem;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px;
  font-size: .78rem;
}

/* ================= METHOD ================= */

.method { padding: 7rem var(--gutter); }

.timeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  max-width: var(--container);
  margin-inline: auto;
}

.timeline::before {
  content: "";
  position: absolute;
  top: 34px; left: 0; right: 0;
  border-top: 2px dashed rgba(255,255,255,.25);
}

.timeline li { position: relative; }

.timeline b {
  position: relative;
  display: grid;
  place-items: center;
  width: 68px; height: 68px;
  margin-bottom: 1.2rem;
  background: var(--c);
  color: #fff;
  border-radius: 50%;
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 1.7rem;
}

.timeline h3 { font-size: 1.45rem; }
.timeline p  { max-width: 240px; margin-top: .4rem; color: #c9c7e6; font-size: .86rem; }

/* ================= FAQ ================= */

.faq {
  display: grid;
  grid-template-columns: minmax(280px, .8fr) minmax(0, 1.2fr);
  gap: clamp(3rem, 6vw, 6rem);
  max-width: var(--container);
  margin-inline: auto;
  padding: 8rem 2rem;
}

.faq-l p:last-child { margin-top: 1rem; color: var(--ink-soft); }
.acc { min-width: 0; }

details {
  margin-bottom: 1rem;
  padding: 1.2rem 1.4rem;
  background: #fff;
  border: 2px solid var(--ink);
  border-radius: 20px;
  box-shadow: 0 5px 0 var(--ink);
}

summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  cursor: pointer;
  list-style: none;
  font-size: .94rem;
  font-weight: 700;
}
summary::-webkit-details-marker { display: none; }

summary::after {
  content: "+";
  flex-shrink: 0;
  color: var(--pink);
  font-size: 1.5rem;
  line-height: 1;
  transition: transform .3s ease;
}
details[open] summary::after { transform: rotate(45deg); }

details p { max-width: 680px; margin-top: .8rem; color: var(--ink-soft); font-size: .88rem; }

/* ================= CONTACT ================= */

.contact {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(350px, 1fr);
  gap: clamp(3rem, 6vw, 6rem);
  padding: 7rem var(--gutter);
  background: linear-gradient(135deg, var(--purple), var(--pink));
  color: #fff;
}

.contact em { color: var(--yellow); background: none; -webkit-text-fill-color: var(--yellow); }

.c-info { align-self: center; min-width: 0; }
.contact-details { margin-top: 2rem; }

.line {
  display: flex;
  align-items: flex-start;
  gap: .8rem;
  margin-top: 1rem;
  color: #fff;
  font-size: .96rem;
  overflow-wrap: anywhere;
}
a.line:hover { text-decoration: underline; text-underline-offset: 4px; }

.contact-icon { flex: 0 0 24px; display: grid; place-items: center; }
.c-info .btn { margin-top: 2rem; }

.c-form {
  display: grid;
  gap: 1rem;
  min-width: 0;
  padding: clamp(1.5rem, 4vw, 2.4rem);
  background: #fff;
  color: var(--ink);
  border-radius: var(--radius);
  box-shadow: 14px 14px 0 var(--ink);
}

.form-heading { margin-bottom: .5rem; }

.form-kicker {
  display: inline-flex;
  padding: .3rem .65rem;
  margin-bottom: .6rem;
  background: rgba(232,58,140,.1);
  color: var(--pink);
  border-radius: 999px;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .12em;
}

.c-form h3 { font-size: clamp(1.5rem, 3vw, 2rem); }
.form-heading p { margin-top: .4rem; color: var(--ink-soft); font-size: .82rem; }

.c-form label { display: grid; gap: .35rem; font-size: .78rem; font-weight: 700; }

.c-form input, .c-form select {
  width: 100%;
  min-height: 50px;
  padding: .75rem .9rem;
  border: 2px solid #e0dccf;
  border-radius: 13px;
  outline: none;
  background: var(--cream);
  color: var(--ink);
  font-size: 1rem; /* 16px stops iOS zooming on focus */
  transition: border-color .2s ease, box-shadow .2s ease;
}

.c-form input:focus, .c-form select:focus {
  border-color: var(--pink);
  box-shadow: 0 0 0 4px rgba(232,58,140,.1);
}

.form-submit { width: 100%; margin-top: .4rem; }

/* ================= FOOTER ================= */

footer {
  padding: 3rem 1rem 5rem;
  background: var(--ink);
  color: #c9c7e6;
  text-align: center;
  font-size: .8rem;
}

.footer-inner { max-width: 700px; margin-inline: auto; }

footer img {
  width: auto;
  height: 68px;
  margin: 0 auto 1rem;
  padding: 6px;
  background: #fff;
  border-radius: 12px;
}

/* ================= WHATSAPP FAB ================= */

.fab {
  position: fixed;
  right: 20px;
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  display: grid;
  place-items: center;
  width: 58px; height: 58px;
  background: var(--green);
  color: #fff;
  border-radius: 50%;
  font-size: 1.5rem;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  z-index: 900;
  transition: transform .25s ease;
}
.fab:hover { transform: translateY(-4px) scale(1.04); }

/* ================= ANIMATIONS ================= */

@keyframes float      { 50% { transform: translate(30px, 40px) scale(1.08); } }
@keyframes floatSmall { 50% { transform: translateY(-10px); } }
@keyframes bob        { 50% { transform: translateY(-9px) rotate(-2deg); } }
@keyframes morph      { 50% { border-radius: 40% 60% 38% 62% / 60% 40% 60% 40%; } }
@keyframes rotate     { to  { transform: rotate(360deg); } }
@keyframes slide      { to  { transform: translateX(-50%); } }

/* =========================================================
   LARGE TABLET
========================================================= */

@media (max-width: 1100px) {
  .nav { width: calc(100% - 32px); }
  .nav nav { gap: 1rem; font-size: .82rem; }

  .hero { grid-template-columns: minmax(0, 1fr) minmax(360px, .9fr); gap: 2rem; }
  .hero-art { min-height: 430px; }
  .chip { font-size: .7rem; }
}

/* =========================================================
   TABLET + MOBILE HEADER  (burger menu)
========================================================= */

@media (max-width: 960px) {

  html { scroll-padding-top: 90px; }

  .nav {
    top: calc(12px + env(safe-area-inset-top, 0px));
    width: calc(100% - 28px);
    min-height: 62px;
    padding: 7px 8px 7px 16px;
    border-radius: 22px;
  }

  .brand img { height: 43px; }
  .burger { display: flex; }

  /*
    Dropdown panel: absolute to the header, full width,
    scrolls internally if the screen is short.
  */
  .nav nav {
    position: absolute;
    top: calc(100% + 10px);
    left: 0; right: 0;
    width: 100%;
    max-height: calc(100svh - 110px);
    overflow-y: auto;
    overscroll-behavior: contain;

    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 10px;

    background: var(--ink);
    color: #fff;
    border-radius: 22px;
    box-shadow: 0 20px 50px rgba(20,18,58,.3);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-12px) scale(.98);
    transform-origin: top center;
    transition: opacity .25s ease, visibility .25s ease, transform .3s ease;
  }

  .nav nav.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
  }

  .nav nav a {
    display: block;
    width: 100%;
    padding: .85rem 1rem;
    border-radius: 13px;
    font-size: .96rem;
    white-space: normal;
  }

  .nav nav a:not(.nav-demo)::after { display: none; }
  .nav nav a:not(.nav-demo):hover,
  .nav nav a:not(.nav-demo):active { background: rgba(255,255,255,.1); color: #fff; }

  .nav-demo {
    display: flex;
    min-height: 48px;
    margin-top: 6px;
    text-align: center;
    box-shadow: none;
  }

  /* Hero */

  .hero {
    grid-template-columns: 1fr;
    min-height: auto;
    padding: 8rem 6vw 8rem;
  }

  .hero-copy { max-width: 760px; margin-inline: auto; text-align: center; }
  .tiles { justify-content: center; }
  .lead { margin-inline: auto; }
  .cta { justify-content: center; }
  .mini { justify-content: center; text-align: left; }

  .hero-art {
    width: min(680px, 100%);
    min-height: 480px;
    height: 500px;
    margin: 1rem auto 0;
  }

  /* About */
  .about { grid-template-columns: 1fr; padding: 6rem 6vw; }
  .about-photos { width: min(620px, 100%); margin-inline: auto; }

  /* Services */
  .stairs { padding: 6rem 6vw 0; }
  .steps { grid-template-columns: repeat(2, 1fr); gap: 1rem; min-height: auto; padding-bottom: 2rem; align-items: stretch; }
  .step { height: auto !important; min-height: 310px; border-radius: var(--radius); }

  /* Foundation */
  .found { grid-template-columns: 1fr; padding: 6rem 6vw; }
  .found-left { max-width: 720px; }

  /* Tuition */
  .tuition { grid-template-columns: 1fr; padding: 6rem 6vw; }
  .t-img { width: min(650px, 100%); margin-inline: auto; }

  /* Method */
  .method { padding: 6rem 6vw; }
  .timeline { grid-template-columns: repeat(2, 1fr); gap: 2.5rem 2rem; }
  .timeline::before { display: none; }

  /* FAQ */
  .faq { grid-template-columns: 1fr; padding: 6rem 6vw; }

  /* Contact */
  .contact { grid-template-columns: 1fr; padding: 6rem 6vw; }
  .c-info { max-width: 700px; }
  .c-form { width: min(700px, 100%); }
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 640px) {

  html { scroll-padding-top: 82px; }
  body { font-size: .94rem; }

  /* Header */

  .nav {
    top: calc(10px + env(safe-area-inset-top, 0px));
    width: calc(100% - 20px);
    min-height: 58px;
    padding: 6px 7px 6px 13px;
    border-radius: 19px;
  }

  .brand img { height: 38px; }
  .burger { width: 42px; height: 42px; }

  .nav nav {
    top: calc(100% + 8px);
    max-height: calc(100svh - 96px);
    padding: 8px;
    border-radius: 20px;
  }

  .nav nav a { padding: .8rem .9rem; }

  /* Hero */

  .hero { padding: 7.2rem 5vw 6rem; }

  .hero h1 { font-size: clamp(2.35rem, 11vw, 3.3rem); }

  .tiles { gap: .25rem; margin-bottom: .8rem; }

  .tiles b {
    width: clamp(37px, 12vw, 55px);
    border-radius: 9px;
    font-size: clamp(1.6rem, 8vw, 2.4rem);
  }

  .lead { font-size: .92rem; margin: 1.2rem auto 1.6rem; }

  .cta { display: grid; grid-template-columns: 1fr; width: 100%; gap: .8rem; }

  .btn { width: 100%; min-height: 51px; padding: .8rem 1rem; font-size: .88rem; }

  .mini {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .7rem;
    width: 100%;
    margin-top: 2.2rem;
  }
  .mini li { text-align: center; font-size: .65rem; align-content: start; }
  .mini strong { font-size: clamp(1.7rem, 8vw, 2.1rem); }

  /* Hero image */

  .hero-art { min-height: 350px; height: 350px; margin-top: .5rem; }

  .photo-main { inset: 8% 1% 9% 8%; box-shadow: 12px 12px 0 var(--yellow); }

  .photo-small { width: 34%; border-width: 5px; }

  .chip { padding: .45rem .7rem; font-size: .62rem; box-shadow: 0 7px 20px rgba(20,18,58,.14); }

  .c1 { top: 12%; left: 0; }
  .c2 { top: 48%; right: 0; }
  .c3 { right: 5%; bottom: 0; }

  .spin { width: 75px; height: 75px; top: 0; right: 0; }
  .spin text { font-size: 8px; }
  .spin span { font-size: 1.3rem; }

  .wave { height: 50px; }

  /* Marquee */
  .marquee { padding: .9rem 0; }
  .track { gap: 1rem; font-size: 1.35rem; }

  /* General */
  .about, .tuition, .faq { padding: 5rem 5vw; }

  h2 { font-size: clamp(2rem, 9vw, 2.8rem); }

  /* About */
  .about-photos { height: 360px; }
  .ap1 { width: 73%; height: 70%; }
  .ap2 { width: 54%; height: 47%; border-width: 7px; }
  .stamp { width: 90px; height: 90px; font-size: .72rem; }
  .stamp strong { font-size: 1.15rem; }
  .values { grid-template-columns: 1fr; gap: 1.2rem; margin-top: 2rem; }

  /* Services */
  .stairs { padding: 5rem 5vw 0; }
  .sec-head { margin-bottom: 2rem; }
  .steps { grid-template-columns: 1fr; gap: .8rem; }
  .step { min-height: auto; padding: 1.5rem; border-radius: 20px; }
  .step h3 { font-size: 1.45rem; }
  .step p { font-size: .84rem; }

  /* Foundation */
  .found { padding: 5rem 5vw; }
  .found-grid { grid-template-columns: 1fr; gap: .8rem; }
  .fc { min-height: auto; padding: 1.3rem; }
  .fc:nth-child(even) { transform: none; }
  .fc:nth-child(even):hover { transform: translateY(-5px) rotate(0); }

  /* Tuition */
  .tuition { gap: 3rem; }
  .t-img img { box-shadow: -10px 10px 0 var(--teal); }
  .t-badge { right: -5px; padding: .75rem 1rem; font-size: .8rem; }
  .ticks li { font-size: .83rem; }

  /* Modes */
  .modes { padding: 5rem 5vw; }
  .switch { display: flex; width: 100%; max-width: 300px; margin-inline: auto; margin-bottom: 2rem; }
  .switch button { min-width: 0; flex: 1; padding: .7rem .8rem; }
  .mode-card { padding: 1.5rem; border-radius: 22px; }
  .mode-card h3 { font-size: 1.5rem; }
  .mode-card p { font-size: .84rem; }
  .tags span { font-size: .7rem; }

  /* Method */
  .method { padding: 5rem 5vw; }
  .timeline { grid-template-columns: 1fr; gap: 2rem; }
  .timeline b { width: 58px; height: 58px; font-size: 1.4rem; }
  .timeline p { max-width: none; }

  /* FAQ */
  details { padding: 1rem; border-radius: 16px; }
  summary { font-size: .85rem; }
  details p { font-size: .82rem; }

  /* Contact */
  .contact { padding: 5rem 5vw; }
  .line { font-size: .83rem; }
  .c-form { padding: 1.3rem; border-radius: 22px; box-shadow: 8px 8px 0 var(--ink); }

  /* Footer */
  footer { padding: 2.5rem 1rem 5rem; }
  footer img { height: 58px; }

  /* WhatsApp */
  .fab { right: 15px; bottom: calc(15px + env(safe-area-inset-bottom, 0px)); width: 54px; height: 54px; }
}

/* =========================================================
   VERY SMALL PHONES
========================================================= */

@media (max-width: 380px) {
  .nav { width: calc(100% - 14px); padding-left: 10px; }
  .brand img { height: 34px; }
  .burger { width: 40px; height: 40px; }

  .hero { padding-inline: 4vw; }

  .mini { gap: .35rem; }
  .mini li { font-size: .58rem; }
  .mini strong { font-size: 1.55rem; }

  .hero-art { min-height: 300px; height: 300px; }
  .chip { font-size: .56rem; padding: .38rem .55rem; }
  .spin { width: 64px; height: 64px; }
}

/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }

  .reveal { opacity: 1; transform: none; }
}