/* ============================================================
   Beach B.U.M.S. — Design System v2
   Teal-forward coastal · motion · gallery · crashing-wave footer
   ============================================================ */

:root {
  /* ----- Palette (built from the logo teal #54C8DA) ----- */
  --aqua:        #54C8DA;   /* logo teal — the signature */
  --aqua-lt:     #8FDCE8;
  --aqua-pale:   #D8F1F5;
  --teal:        #1FA5B8;
  --teal-deep:   #10788A;
  --teal-ink:    #0B5560;
  --navy:        #0B2A45;
  --navy-deep:   #061A2C;
  --sand:        #EAD9B8;   /* accent */
  --sand-lt:     #F5EAD4;
  --sand-pale:   #FBF4E6;
  --cream:       #FCF9F2;
  --white:       #FFFFFF;
  --coral:       #EF8A3C;   /* warm orange pop */
  --coral-deep:  #D6712A;
  --gold:        #F4B740;   /* yellow pop */
  --ink:         #0E2A38;
  --ink-soft:    #40616C;
  --line:        rgba(11, 42, 69, .14);
  --line-lt:     rgba(255,255,255,.22);

  --display: "Fredoka", "Trebuchet MS", Verdana, sans-serif;
  --body:    "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --wrap: 1200px;
  --radius: 18px;
  --radius-sm: 10px;
  --shadow: 0 2px 6px rgba(6,26,44,.06), 0 16px 40px -22px rgba(6,26,44,.40);
  --shadow-lg: 0 4px 10px rgba(6,26,44,.08), 0 34px 70px -30px rgba(6,26,44,.5);
  --header-h: 74px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--aqua-pale);
  -webkit-font-smoothing: antialiased;
}
img, svg, picture { max-width: 100%; display: block; }
a { color: var(--teal-deep); }
button { font: inherit; }

:focus-visible { outline: 3px solid var(--coral); outline-offset: 3px; border-radius: 4px; }
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--navy); color: #fff; padding: .7rem 1.1rem;
  border-radius: 0 0 10px 10px; text-decoration: none; font-weight: 600; transition: top .18s ease;
}
.skip-link:focus { top: 0; }
.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; }

/* ----- Type ----- */
h1,h2,h3,h4 { font-family: var(--display); font-weight: 500; line-height: 1.14; letter-spacing: -.005em; margin: 0 0 .55em; color: var(--navy); }
h1 { font-size: clamp(2.5rem, 6.6vw, 4.15rem); letter-spacing: -.015em; font-weight: 600; }
h2 { font-size: clamp(1.9rem, 4.1vw, 2.7rem); font-weight: 600; }
h3 { font-size: clamp(1.3rem, 2.5vw, 1.65rem); }
h4 { font-size: 1.05rem; font-family: var(--body); font-weight: 700; letter-spacing: 0; }
p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

.eyebrow {
  font-family: var(--mono); font-size: .72rem; font-weight: 500; letter-spacing: .17em;
  text-transform: uppercase; color: var(--teal-deep); margin: 0 0 1rem;
  display: flex; align-items: center; gap: .6rem;
}
.eyebrow::before { content:""; width: 26px; height: 2px; background: var(--coral); flex: none; }
.eyebrow--light { color: var(--aqua-lt); }
.eyebrow--light::before { background: var(--coral); }
.lede { font-size: 1.22rem; line-height: 1.6; color: var(--ink-soft); }
.muted { color: var(--ink-soft); }
.fine { font-size: .875rem; line-height: 1.6; color: var(--ink-soft); }

/* ----- Layout ----- */
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 1.25rem; }
.wrap--narrow { max-width: 800px; }
.section { padding: 4.75rem 0; position: relative; }
@media (min-width: 940px){ .section { padding: 6.5rem 0; } }
.section__head { max-width: 730px; margin-bottom: 2.75rem; }
.section__head p { color: var(--ink-soft); font-size: 1.12rem; }

.section--cream { background: var(--cream); }
.section--white { background: var(--white); }
.section--sand  { background: var(--sand-lt); }
.section--aqua  { background: var(--aqua); }
.section--aqua .section__head p { color: var(--teal-ink); }
.section--aqua .eyebrow { color: var(--teal-ink); }
.section--teal  { background: linear-gradient(160deg, var(--teal) 0%, var(--teal-deep) 100%); color: #EAFBFE; }
.section--teal h2, .section--teal h3, .section--teal h4 { color: #fff; }
.section--teal .section__head p, .section--teal .muted, .section--teal .fine { color: #C4EEF4; }
.section--navy  { background: var(--navy); color: #DCE8EF; }
.section--navy h2,.section--navy h3,.section--navy h4 { color: #fff; }
.section--navy .section__head p,.section--navy .muted,.section--navy .fine { color: #A9C2D2; }
.section--navy .eyebrow { color: var(--aqua-lt); }

.grid { display: grid; gap: 1.5rem; }
@media (min-width: 640px){ .grid-2{grid-template-columns:repeat(2,1fr);} .grid-4{grid-template-columns:repeat(2,1fr);} }
@media (min-width: 940px){ .grid-3{grid-template-columns:repeat(3,1fr);} .grid-4{grid-template-columns:repeat(4,1fr);} }

/* ----- Scroll reveal ----- */
[data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
[data-reveal].in { opacity: 1; transform: none; }
[data-reveal-delay="1"]{ transition-delay: .08s; }
[data-reveal-delay="2"]{ transition-delay: .16s; }
[data-reveal-delay="3"]{ transition-delay: .24s; }

/* ----- Wave dividers ----- */
.wave-divide { display: block; width: 100%; height: auto; margin: 0; line-height: 0; }
.wave-divide svg { display: block; width: 100%; height: 90px; }
@media (min-width:940px){ .wave-divide svg { height: 130px; } }

/* ----- Buttons ----- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .85rem 1.6rem; border-radius: 999px; font-weight: 650; font-size: 1rem;
  text-decoration: none; border: 2px solid transparent; cursor: pointer;
  transition: transform .16s ease, background-color .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn--primary { background: var(--coral); color: #fff; box-shadow: 0 10px 24px -12px rgba(226,101,60,.8); }
.btn--primary:hover { background: var(--coral-deep); }
.btn--deep { background: var(--navy); color: #fff; }
.btn--deep:hover { background: var(--navy-deep); }
.btn--outline { border-color: var(--navy); color: var(--navy); }
.btn--outline:hover { background: var(--navy); color: #fff; }
.btn--light { border-color: rgba(255,255,255,.7); color: #fff; }
.btn--light:hover { background: #fff; color: var(--navy); }
.btn--sm { padding: .62rem 1.2rem; font-size: .92rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; }

/* ----- Header ----- */
.header {
  position: sticky; top: 0; z-index: 90;
  background: rgba(216, 241, 245, .82);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(11,42,69,.08);
  transition: background .25s ease, box-shadow .25s ease;
}
.header.scrolled { background: rgba(252,249,242,.92); box-shadow: 0 6px 22px -18px rgba(6,26,44,.6); }
.header__inner { display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height: var(--header-h); }
.brand { display:flex; align-items:center; gap:.7rem; text-decoration:none; }
.brand__mark { width: 42px; height: 42px; flex:none; object-fit: contain; }
.brand__name { font-family: var(--display); font-size: 1.24rem; font-weight: 600; color: var(--navy); line-height: 1; letter-spacing: -.01em; }
.brand__sub { font-family: var(--mono); font-size:.57rem; letter-spacing:.13em; text-transform: uppercase; color: var(--teal-deep); display:block; margin-top:4px; }
.nav { display:none; }
.nav a { text-decoration:none; color: var(--navy); font-size:.95rem; font-weight: 550; padding:.4rem 0; border-bottom: 2px solid transparent; }
.nav a:hover { color: var(--teal-deep); border-bottom-color: var(--coral); }
.header__cta { display:none; }
.menu-btn { display:inline-flex; align-items:center; gap:.5rem; background: var(--navy); color:#fff; border:0; border-radius:999px; padding:.55rem 1rem; font-weight:600; font-size:.9rem; cursor:pointer; }
@media (min-width:1120px){ .nav{display:flex;gap:1.4rem;align-items:center;} .header__cta{display:inline-flex;} .menu-btn{display:none;} }

.drawer { position: fixed; inset:0; z-index:100; background: linear-gradient(160deg,var(--teal) 0%, var(--navy) 100%); color:#fff; padding:1.25rem; overflow-y:auto; display:none; }
.drawer[data-open="true"]{ display:block; }
.drawer__top{ display:flex; justify-content:flex-end; }
.drawer__close{ background:transparent; border:2px solid rgba(255,255,255,.5); color:#fff; border-radius:999px; padding:.5rem 1rem; cursor:pointer; font-weight:600; }
.drawer nav{ display:grid; gap:.2rem; margin:1.5rem 0 2rem; }
.drawer nav a{ color:#fff; text-decoration:none; font-family:var(--display); font-size:1.5rem; padding:.5rem 0; border-bottom:1px solid rgba(255,255,255,.14); }
.drawer .btn-row{ flex-direction:column; }
.drawer .btn{ width:100%; }

/* ----- HERO ----- */
.hero { position: relative; background: linear-gradient(165deg, var(--aqua-lt) 0%, var(--aqua) 45%, var(--teal) 100%); overflow: hidden; padding: 3.25rem 0 0; }
.hero__grid { display:grid; gap:2rem; align-items:center; position: relative; z-index: 2; }
@media (min-width:1000px){ .hero{padding-top:4.25rem;} .hero__grid{ grid-template-columns: 1.03fr .97fr; gap:3rem; } }
.hero__eyebrow { font-family: var(--mono); font-size:.72rem; letter-spacing:.17em; text-transform:uppercase; color: var(--teal-ink); margin:0 0 1rem; font-weight:500; }
.hero__title { margin-bottom:.3rem; color: var(--navy); }
.hero__title small { display:block; font-family:var(--body); font-weight:700; font-size: clamp(.95rem,2vw,1.15rem); letter-spacing:.02em; color: var(--teal-ink); margin-top:.85rem; }
.hero__tagline { font-family:var(--display); font-weight:500; font-size: clamp(1.4rem,3vw,1.95rem); color: var(--navy); margin:1rem 0 1.3rem; }
.hero__copy { font-size:1.14rem; color: var(--teal-ink); max-width:54ch; }
.hero .btn-row{ margin-top:1.7rem; }
.hero__badges{ display:grid; gap:.7rem; margin-top:1.9rem; }
@media (min-width:560px){ .hero__badges{ grid-template-columns:1fr 1fr; } }
.badge{ background: rgba(255,255,255,.72); border:1px solid rgba(255,255,255,.8); border-radius: var(--radius-sm); padding:.85rem 1rem; backdrop-filter: blur(4px); }
.badge strong{ display:block; color:var(--navy); font-size:.98rem; }
.badge span{ font-size:.85rem; color:var(--teal-ink); }

.hero__art { position: relative; z-index: 2; display:flex; justify-content:center; }
.hero__turtle { width: min(520px, 92%); filter: drop-shadow(0 30px 40px rgba(6,26,44,.35)); animation: floatY 7s ease-in-out infinite; }
@keyframes floatY { 0%,100%{ transform: translateY(0) rotate(0deg);} 50%{ transform: translateY(-16px) rotate(-1deg);} }

.hero__bubbles { position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden; }
.bubble { position:absolute; bottom:-40px; border-radius:50%; background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.9), rgba(255,255,255,.25) 60%, transparent 70%); animation: rise linear infinite; }
@keyframes rise { 0%{ transform: translateY(0) translateX(0); opacity:0; } 10%{opacity:.8;} 90%{opacity:.7;} 100%{ transform: translateY(-116vh) translateX(20px); opacity:0; } }

.hero__waves { position:relative; z-index:2; margin-top: 1.5rem; line-height:0; overflow:hidden; }
.hero__waves svg { width:200%; height: 70px; display:block; }
@media (min-width:940px){ .hero__waves svg{ height: 110px; } }
.hero__waves .w1 { animation: slideX 18s linear infinite; }
.hero__waves .w2 { animation: slideX 26s linear infinite reverse; opacity:.6; }
@keyframes slideX { from{ transform: translateX(0);} to{ transform: translateX(-25%);} }

/* ----- Partnership strip ----- */
.partners { background: var(--navy); color:#DCE8EF; padding: 1.5rem 0; }
.partners__inner { display:grid; gap:1.1rem; align-items:center; text-align:center; }
@media (min-width:900px){ .partners__inner{ grid-template-columns:1fr auto 1fr; text-align:left; } }
.partners__label{ font-family:var(--mono); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--aqua-lt); margin:0; }
.partners__names{ font-family:var(--display); font-size:1.15rem; color:#fff; margin:.3rem 0 0; }
.partners__logos{ display:flex; gap:1rem; justify-content:center; align-items:center; }
.logo-slot{ height:54px; min-width:118px; border:1px dashed rgba(255,255,255,.3); border-radius:var(--radius-sm); display:flex; align-items:center; justify-content:center; padding:.4rem .7rem; font-family:var(--mono); font-size:.58rem; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.5); text-align:center; }
.logo-slot img{ max-height:100%; width:auto; }

/* ----- Cards ----- */
.card { background: var(--white); border:1px solid var(--line); border-radius: var(--radius); padding: 1.7rem; box-shadow: var(--shadow); }
.card h3{ margin-bottom:.5rem; }
.card p{ color: var(--ink-soft); }
.card--flat{ box-shadow:none; }
.card--glass{ background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.24); color:#EAFBFE; }
.card--glass h3,.card--glass h4{ color:#fff; }
.card--glass p{ color:#C4EEF4; }
.card--lift{ transition: transform .2s ease, box-shadow .2s ease; }
.card--lift:hover{ transform: translateY(-6px); box-shadow: var(--shadow-lg); }

.pillar__tag{ font-family:var(--mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--coral); display:block; margin-bottom:.55rem; }
.card__icon{ width:30px; height:30px; margin-bottom:.75rem; color:var(--teal); }
.card--glass .card__icon{ color: var(--aqua-lt); }

/* ----- Checks ----- */
.checks{ list-style:none; margin:0; padding:0; display:grid; gap:.55rem; }
.checks li{ position:relative; padding-left:1.7rem; color:var(--ink-soft); font-size:1rem; }
.checks li::before{ content:""; position:absolute; left:0; top:.58em; width:9px; height:9px; border-radius:50%; background:var(--teal); }
.checks--coral li::before{ background:var(--coral); }
.checks--light li{ color:#C4EEF4; }
.checks--light li::before{ background:var(--aqua-lt); }

/* ----- Compare ----- */
.compare{ display:grid; gap:1.25rem; align-items:stretch; }
@media (min-width:900px){ .compare{ grid-template-columns:1fr auto 1fr; } }
.compare__or{ display:none; align-self:center; font-family:var(--mono); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft); writing-mode:vertical-rl; padding:1rem .4rem; border-left:1px solid var(--line); border-right:1px solid var(--line); }
@media (min-width:900px){ .compare__or{ display:block; } }
.compare .card{ display:flex; flex-direction:column; }
.pill{ align-self:flex-start; font-family:var(--mono); font-size:.66rem; letter-spacing:.13em; text-transform:uppercase; background:var(--sand); color:var(--navy); padding:.3rem .7rem; border-radius:999px; margin-bottom:.9rem; }
.pill--teal{ background:var(--teal); color:#fff; }

/* ----- Tabs ----- */
.tabs{ display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:1.75rem; border-bottom:1px solid var(--line); padding-bottom:1rem; }
.tab{ background:transparent; border:1px solid var(--line); border-radius:999px; padding:.6rem 1.1rem; cursor:pointer; color:var(--ink-soft); font-weight:600; font-size:.93rem; transition:all .16s ease; }
.tab:hover{ border-color:var(--teal); color:var(--teal-deep); }
.tab[aria-selected="true"]{ background:var(--navy); border-color:var(--navy); color:#fff; }
.tabpanel[hidden]{ display:none; }
.tabpanel{ animation: fadeUp .45s ease; }
@keyframes fadeUp{ from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:none;} }
.cohort__head{ display:flex; flex-wrap:wrap; gap:.5rem 1rem; align-items:baseline; margin-bottom:1.5rem; }
.cohort__grades{ font-family:var(--mono); font-size:.75rem; letter-spacing:.12em; text-transform:uppercase; color:var(--coral); }
.subject{ border-top:2px solid var(--navy); padding-top:.9rem; }
.subject h4{ margin:0 0 .3rem; color:var(--navy); }
.subject p{ margin:0; color:var(--ink-soft); font-size:.98rem; }
.subject cite{ font-style:italic; }

/* ----- Notes ----- */
.note{ border-left:4px solid var(--teal); background:var(--white); padding:1.1rem 1.3rem; border-radius:0 var(--radius-sm) var(--radius-sm) 0; box-shadow:var(--shadow); }
.note--sand{ border-left-color:var(--coral); background:var(--sand-lt); box-shadow:none; }
.note--glass{ background: rgba(255,255,255,.1); border-left-color: var(--aqua-lt); box-shadow:none; color:#EAFBFE; }
.note--glass p{ color:#EAFBFE; }
.note p{ margin:0; }

/* ----- Schedule flow ----- */
.flow{ list-style:none; margin:0; padding:0; counter-reset:step; }
.flow li{ counter-increment:step; position:relative; padding:0 0 1.15rem 2.6rem; border-left:2px solid var(--aqua); margin-left:.55rem; }
.flow li:last-child{ border-left-color:transparent; padding-bottom:0; }
.flow li::before{ content:counter(step); position:absolute; left:-.85rem; top:-.15rem; width:1.7rem; height:1.7rem; border-radius:50%; background:var(--navy); color:#fff; font-family:var(--mono); font-size:.74rem; display:flex; align-items:center; justify-content:center; }
.flow strong{ display:block; color:var(--navy); font-size:1.02rem; }

/* ----- Tuition ----- */
.price-card{ display:flex; flex-direction:column; position:relative; }
.price-card--feature{ border-color:var(--teal); border-width:2px; box-shadow:var(--shadow-lg); }
.price-card__flag{ position:absolute; top:-.85rem; left:1.6rem; background:var(--gold); color:var(--navy); font-family:var(--mono); font-size:.63rem; letter-spacing:.14em; text-transform:uppercase; padding:.35rem .8rem; border-radius:999px; }
.price-card__days{ font-family:var(--mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--teal-deep); margin-bottom:.8rem; }
.price{ font-family:var(--display); font-size:2.95rem; line-height:1; color:var(--navy); letter-spacing:-.03em; }
.price span{ display:block; font-family:var(--body); font-size:.84rem; letter-spacing:.04em; color:var(--ink-soft); margin-top:.45rem; font-weight:600; }
.price-card .checks{ margin:1.4rem 0; }
.price-card .btn{ margin-top:auto; }

/* ----- GALLERY (swipe / scroll-snap) ----- */
.gallery { position: relative; }
.gallery__track {
  display: grid; grid-auto-flow: column; grid-auto-columns: 84%;
  gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: .5rem .25rem 1.25rem; margin: 0 -.25rem; scrollbar-width: thin;
}
@media (min-width:680px){ .gallery__track{ grid-auto-columns: 46%; } }
@media (min-width:1000px){ .gallery__track{ grid-auto-columns: 31%; } }
.gallery__track::-webkit-scrollbar{ height:8px; }
.gallery__track::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.5); border-radius:999px; }
.slide{ scroll-snap-align: start; position: relative; border-radius: var(--radius); overflow: hidden; background: var(--navy); box-shadow: var(--shadow); aspect-ratio: 4/3; margin:0; }
.slide img{ width:100%; height:100%; object-fit: cover; transition: transform .5s ease; }
.slide:hover img{ transform: scale(1.05); }
.slide figcaption{ position:absolute; left:0; right:0; bottom:0; padding: 1.4rem 1.1rem .95rem; color:#fff; background: linear-gradient(transparent, rgba(6,26,44,.82)); font-size:.95rem; }
.slide figcaption strong{ display:block; font-family:var(--display); font-size:1.2rem; font-weight:500; margin-bottom:.15rem; }
.gallery__bar{ display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-top:.25rem; }
.gallery__hint{ font-family:var(--mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:#C4EEF4; display:flex; align-items:center; gap:.5rem; }
.gallery__nav{ display:none; gap:.5rem; }
@media (min-width:1000px){ .gallery__nav{ display:flex; } }
.gallery__btn{ width:44px; height:44px; border-radius:50%; border:2px solid rgba(255,255,255,.6); background:transparent; color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .16s ease; }
.gallery__btn:hover{ background:#fff; color:var(--navy); }

/* ----- Feature split ----- */
.split{ display:grid; gap:2rem; align-items:center; }
@media (min-width:900px){ .split{ grid-template-columns:1fr 1fr; gap:3rem; } .split--rev .split__media{ order:2; } }
.split__media{ border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-lg); }
.split__media img{ width:100%; height:100%; object-fit:cover; }

/* ----- Chips (bring / classroom) ----- */
.chips{ display:grid; gap:1rem; }
@media (min-width:640px){ .chips{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:960px){ .chips{ grid-template-columns:repeat(4,1fr); } }
.chip{ background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:1.4rem; text-align:center; box-shadow:var(--shadow); transition: transform .2s ease; }
.chip:hover{ transform: translateY(-5px); }
.chip__ico{ width:28px; height:28px; margin:0 auto .8rem; color:var(--teal); }
.chip strong{ display:block; color:var(--navy); font-size:1.05rem; margin-bottom:.2rem; }
.chip span{ font-size:.9rem; color:var(--ink-soft); }

/* ----- Safety ----- */
.ratio-grid{ display:grid; gap:1.25rem; }
@media (min-width:700px){ .ratio-grid{ grid-template-columns:1fr 1fr; } }
.ratio{ background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18); border-radius:var(--radius); padding:1.5rem; }
.ratio__num{ font-family:var(--display); font-size:3rem; line-height:1; color:#fff; letter-spacing:-.03em; margin-bottom:.5rem; }
.ratio__num em{ font-style:normal; color:var(--aqua-lt); }
.ratio p{ color:#C4EEF4; margin:0; font-size:.98rem; }
.ratio h4{ color:#fff; }
.safety-cols{ display:grid; gap:1.5rem; }
@media (min-width:800px){ .safety-cols{ grid-template-columns:1fr 1fr; } }

/* ----- Locations ----- */
.loc-grid{ display:grid; gap:1rem; }
@media (min-width:620px){ .loc-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:960px){ .loc-grid{ grid-template-columns:repeat(4,1fr); } }
.loc{ background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:1.25rem; display:flex; flex-direction:column; gap:.35rem; transition: transform .2s ease; }
.loc:hover{ transform: translateY(-4px); }
.loc__name{ font-family:var(--display); font-size:1.3rem; color:var(--navy); }
.loc__state{ font-family:var(--mono); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--teal-deep); }
.loc__note{ font-size:.88rem; color:var(--ink-soft); }

/* ----- Steps ----- */
.steps{ display:grid; gap:1.25rem; counter-reset:enroll; }
@media (min-width:900px){ .steps{ grid-template-columns:repeat(3,1fr); } }
.step{ counter-increment:enroll; }
.step__num{ font-family:var(--display); font-size:2.7rem; line-height:1; color:var(--aqua); margin-bottom:.5rem; }
.step__num::before{ content:"0" counter(enroll); }
.qr-slot{ margin-top:1rem; width:112px; height:112px; border:1px dashed var(--line); border-radius:var(--radius-sm); display:flex; align-items:center; justify-content:center; text-align:center; font-family:var(--mono); font-size:.56rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); padding:.5rem; }
.qr-slot img{ width:100%; height:100%; object-fit:contain; }

/* ----- FAQ ----- */
.faq{ border-top:1px solid var(--line); }
.faq details{ border-bottom:1px solid var(--line); }
.faq summary{ cursor:pointer; list-style:none; padding:1.15rem 2.5rem 1.15rem 0; position:relative; font-family:var(--display); font-size:1.18rem; color:var(--navy); font-weight:500; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; position:absolute; right:.4rem; top:50%; transform:translateY(-50%); font-family:var(--body); font-size:1.5rem; color:var(--coral); line-height:1; }
.faq details[open] summary::after{ content:"\2212"; }
.faq summary:hover{ color:var(--teal-deep); }
.faq__body{ padding:0 2.5rem 1.4rem 0; color:var(--ink-soft); }

/* ----- FOOTER crashing wave ----- */
.footer-wave{ line-height:0; background: var(--navy-deep); overflow:hidden; }
.footer-wave svg{ display:block; width:100%; height: 120px; }
@media (min-width:940px){ .footer-wave svg{ height: 170px; } }
.footer-wave .crest{ animation: crash 9s ease-in-out infinite; }
.footer-wave .crest2{ animation: crash 13s ease-in-out infinite reverse; }
.footer-wave .foam{ animation: foam 6s ease-in-out infinite; }
@keyframes crash { 0%,100%{ transform: translateX(0);} 50%{ transform: translateX(-16px);} }
@keyframes foam { 0%,100%{ opacity:.85;} 50%{ opacity:1;} }

.footer{ background:var(--navy-deep); color:#A9C2D2; padding: 1rem 0 6rem; }
@media (min-width:1120px){ .footer{ padding-bottom:3rem; } }
.footer__grid{ display:grid; gap:2.25rem; }
@media (min-width:860px){ .footer__grid{ grid-template-columns:1.4fr 1fr 1fr 1fr; } }
.footer h4{ color:#fff; font-family:var(--mono); font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; margin-bottom:1rem; font-weight:500; }
.footer ul{ list-style:none; margin:0; padding:0; display:grid; gap:.5rem; }
.footer a{ color:#A9C2D2; text-decoration:none; font-size:.95rem; }
.footer a:hover{ color:#fff; text-decoration:underline; }
.footer__bottom{ border-top:1px solid rgba(255,255,255,.12); margin-top:2.5rem; padding-top:1.5rem; display:flex; flex-wrap:wrap; gap:.75rem 1.5rem; justify-content:space-between; font-size:.85rem; }
.social{ display:flex; gap:.6rem; }
.social a{ width:36px; height:36px; border-radius:50%; border:1px solid rgba(255,255,255,.22); display:flex; align-items:center; justify-content:center; }
.social a:hover{ background:rgba(255,255,255,.1); }

/* ----- Sticky mobile CTA ----- */
.sticky-cta{ position:fixed; left:0; right:0; bottom:0; z-index:80; background:rgba(11,42,69,.97); backdrop-filter:blur(8px); padding:.7rem 1rem calc(.7rem + env(safe-area-inset-bottom)); display:flex; gap:.6rem; border-top:1px solid rgba(255,255,255,.14); }
.sticky-cta .btn{ flex:1; padding:.7rem .5rem; font-size:.9rem; }
@media (min-width:1120px){ .sticky-cta{ display:none; } }

/* ----- Motion preferences ----- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  [data-reveal]{ opacity:1 !important; transform:none !important; }
}