/* ============================================================
   Fin-Tastic Aquatics — iter 2 "pool day" design
   Palette pulled from their real logo: pool blues + the
   red / blue / yellow / green / orange puzzle-frame colors.
   ============================================================ */
:root{
  --deep:#083D5C; --deep-2:#0A4A6E; --navy:#062E46;
  --aqua:#16B4C6; --aqua-2:#3ECEDD; --blue:#2E9BE0;
  --foam:#EAF7FB; --foam-2:#F6FCFE; --white:#fff;
  --sun:#F7C724; --sun-2:#FFC24B;
  --p-red:#E23A3A; --p-blue:#1F7FD1; --p-yellow:#F7C724; --p-green:#3FAA3F; --p-orange:#F78C1F;
  --ink:#123344; --muted:#4E6B7C; --muted-2:#7A93A1;
  --line:#D8ECF3; --line-2:#BFE2EC;
  --disp:'Fredoka',system-ui,sans-serif; --body:'Nunito Sans',system-ui,sans-serif;
  --shadow:0 24px 54px rgba(8,61,92,.16); --shadow-sm:0 10px 26px rgba(8,61,92,.12);
  --r:20px; --wrap:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--body);background:var(--foam-2);color:var(--ink);font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--disp);font-weight:600;line-height:1.06;margin:0;color:var(--deep)}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 22px}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55em;font-family:var(--disp);font-weight:600;font-size:1.02rem;
  padding:15px 28px;border-radius:999px;cursor:pointer;border:2px solid transparent;transition:transform .18s,box-shadow .18s,background .18s,color .18s;white-space:nowrap}
.btn svg{width:1.15em;height:1.15em;flex:0 0 auto}
.btn-sun{background:var(--sun);color:#5C3D00;box-shadow:0 12px 26px rgba(247,199,36,.4)}
.btn-sun:hover{background:#FFD44D;transform:translateY(-2px) rotate(-.5deg)}
.btn-aqua{background:var(--aqua);color:#fff;box-shadow:0 12px 26px rgba(22,180,198,.35)}
.btn-aqua:hover{background:#19c4d8;transform:translateY(-2px)}
.btn-ghost{background:transparent;color:var(--deep);border-color:var(--line-2)}
.btn-ghost:hover{border-color:var(--aqua);color:var(--aqua)}
.btn-ghost.on-dark{color:#fff;border-color:rgba(255,255,255,.42)}
.btn-ghost.on-dark:hover{border-color:#fff;color:#fff;background:rgba(255,255,255,.12)}
.btn-lg{padding:17px 34px;font-size:1.1rem}

.eyebrow{display:inline-flex;align-items:center;gap:.55em;font-family:var(--disp);font-weight:600;
  font-size:.86rem;letter-spacing:.12em;text-transform:uppercase;color:var(--aqua)}
.eyebrow::before{content:"";width:26px;height:8px;border-radius:8px;
  background:radial-gradient(circle at 30% 50%,var(--aqua) 0 3px,transparent 3px),radial-gradient(circle at 75% 50%,var(--aqua-2) 0 3px,transparent 3px)}
.eyebrow.light{color:var(--aqua-2)}

/* ============================================================ LANE ROPE divider */
.lane{height:16px;position:relative;display:flex;align-items:center;overflow:hidden}
.lane::before{content:"";position:absolute;left:0;right:0;top:50%;height:2px;background:var(--line-2)}
.lane::after{content:"";position:relative;flex:1;height:12px;border-radius:8px;
  background:repeating-linear-gradient(90deg,
    var(--p-red) 0 22px, transparent 22px 27px,
    #fff 27px 49px, transparent 49px 54px,
    var(--p-blue) 54px 76px, transparent 76px 81px,
    #fff 81px 103px, transparent 103px 108px)}
.lane.in-band::before{background:rgba(255,255,255,.25)}

/* ============================================================ TOP BAR */
.topbar{background:var(--deep);color:#D7F0F7;font-size:.84rem}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;gap:14px;padding-top:8px;padding-bottom:8px}
.topbar .ti{display:flex;align-items:center;gap:.5em;font-weight:600}
.topbar .ti b{color:var(--sun-2);font-weight:800}
.topbar svg{width:15px;height:15px;color:var(--aqua-2);flex:0 0 auto}
@media(max-width:640px){.topbar .ti.hide-sm{display:none}}

/* ============================================================ HEADER */
.site-header{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.9);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:18px;padding-top:10px;padding-bottom:10px}
.brand{display:flex;align-items:center;gap:12px}
.brand .brand-logo{width:54px;height:54px;object-fit:contain;border-radius:12px;transition:transform .25s}
.brand:hover .brand-logo{transform:rotate(-4deg) scale(1.05)}
.brand-text{display:flex;flex-direction:column;line-height:1.12}
.brand-name{font-family:var(--disp);font-weight:600;font-size:1.28rem;color:var(--deep)}
.brand-name b{color:var(--aqua);font-weight:600}
.brand-sub{font-size:.74rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-2)}
.main-nav{display:flex;align-items:center;gap:24px}
.main-nav a{font-weight:800;font-size:.96rem;color:var(--ink);position:relative}
.main-nav a:not(.btn)::after{content:"";position:absolute;left:0;right:100%;bottom:-6px;height:3px;border-radius:3px;background:var(--aqua);transition:right .22s}
.main-nav a:not(.btn):hover::after{right:0}
.main-nav a:not(.btn):hover{color:var(--aqua)}
.nav-toggle{display:none;background:none;border:1px solid var(--line-2);border-radius:10px;padding:8px;color:var(--deep);cursor:pointer}
.nav-toggle svg{width:22px;height:22px}
@media(max-width:940px){
  .main-nav{position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;
    background:#fff;border-bottom:1px solid var(--line);padding:6px 22px 18px;transform:translateY(-8px);opacity:0;pointer-events:none;transition:.2s}
  .main-nav.open{transform:none;opacity:1;pointer-events:auto}
  .main-nav a{padding:13px 0;border-bottom:1px solid var(--line)}
  .main-nav .btn{margin-top:14px}
  .nav-toggle{display:inline-flex}
}

/* ============================================================ HERO — the pool */
.hero{position:relative;overflow:hidden;color:#fff;
  background:linear-gradient(168deg,var(--aqua-2) 0%,var(--aqua) 30%,var(--blue) 72%,#1E78B8 100%)}
/* caustic shimmer layers */
.hero::before,.hero::after{content:"";position:absolute;inset:-40%;pointer-events:none;opacity:.5;
  background:radial-gradient(ellipse 300px 140px at 20% 30%,rgba(255,255,255,.22),transparent 60%),
             radial-gradient(ellipse 420px 180px at 70% 60%,rgba(255,255,255,.16),transparent 60%),
             radial-gradient(ellipse 260px 120px at 45% 80%,rgba(255,255,255,.18),transparent 60%);
  animation:caustic 16s ease-in-out infinite alternate}
.hero::after{opacity:.32;animation-duration:22s;animation-direction:alternate-reverse;transform:scale(1.3)}
@keyframes caustic{from{transform:translate(-2%,-1%) scale(1)}to{transform:translate(3%,2%) scale(1.08)}}
.hero-inner{position:relative;z-index:2;display:grid;grid-template-columns:1.04fr .96fr;gap:48px;align-items:center;
  padding-top:74px;padding-bottom:120px}
.hero-copy .eyebrow{margin-bottom:18px;color:#fff}
.hero-copy .eyebrow::before{background:radial-gradient(circle at 30% 50%,var(--sun) 0 3px,transparent 3px),radial-gradient(circle at 75% 50%,#fff 0 3px,transparent 3px)}
.hero h1{font-size:clamp(2.6rem,5.6vw,4.1rem);color:#fff;font-weight:600;letter-spacing:-.01em}
.hero h1 .a{color:var(--sun);position:relative;display:inline-block}
.hero h1 .a svg{position:absolute;left:0;right:0;bottom:-10px;width:100%;height:12px;color:rgba(255,255,255,.85)}
.hero .lead{color:#E6F7FB;font-size:1.16rem;margin:22px 0 30px;max-width:540px}
.hero .lead strong{color:#fff}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px}
.hero-trust{display:flex;flex-wrap:wrap;gap:10px 24px;margin-top:30px;padding-top:22px;border-top:1px solid rgba(255,255,255,.28)}
.hero-trust span{display:flex;align-items:center;gap:.5em;font-size:.94rem;font-weight:800;color:#fff}
.hero-trust svg{width:1.2em;height:1.2em;color:var(--sun-2);flex:0 0 auto}

/* hero logo float */
.hero-art{position:relative;justify-self:center;width:100%;max-width:440px}
.hero-art .float-card{position:relative;background:#fff;border-radius:32px;padding:30px;box-shadow:0 34px 64px rgba(6,46,70,.35);
  animation:bob 6s ease-in-out infinite}
.hero-art .float-card::after{content:"";position:absolute;left:10%;right:10%;bottom:-26px;height:26px;border-radius:50%;
  background:rgba(6,46,70,.22);filter:blur(12px);animation:bobshadow 6s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-.6deg)}50%{transform:translateY(-12px) rotate(.6deg)}}
@keyframes bobshadow{0%,100%{transform:scaleX(1);opacity:.85}50%{transform:scaleX(.86);opacity:.55}}
.hero-art .float-card img{width:100%;height:auto}
.hero-art .chip{position:absolute;z-index:3;background:#fff;color:var(--deep);font-family:var(--disp);font-weight:600;
  font-size:.9rem;padding:10px 16px;border-radius:999px;box-shadow:var(--shadow-sm);display:flex;align-items:center;gap:.5em;white-space:nowrap}
.hero-art .chip svg{width:1.1em;height:1.1em}
.hero-art .chip.c1{top:-16px;left:-26px;animation:bob 7s .6s ease-in-out infinite}
.hero-art .chip.c1 svg{color:var(--p-green)}
.hero-art .chip.c2{bottom:34px;right:-24px;animation:bob 8s 1.2s ease-in-out infinite}
.hero-art .chip.c2 svg{color:var(--p-red)}
/* bubbles */
.bubbles{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1}
.bubbles span{position:absolute;bottom:-60px;border-radius:50%;
  background:radial-gradient(circle at 32% 30%,rgba(255,255,255,.75),rgba(255,255,255,.12) 62%);
  animation:rise linear infinite}
@keyframes rise{to{transform:translateY(-118vh) translateX(4vw)}}
/* layered waves */
.hero-waves{position:absolute;left:0;right:0;bottom:-1px;z-index:3;pointer-events:none}
.hero-waves svg{display:block;width:100%;height:88px}

/* ============================================================ SECTIONS */
.section{padding:92px 0}
.section-head{max-width:680px;margin-bottom:50px}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center}
.section-head.center .eyebrow{justify-content:center}
.section-head h2{font-size:clamp(2.1rem,4.4vw,3.2rem);margin:12px 0 14px}
.section-head p{color:var(--muted);font-size:1.1rem;margin:0}

/* value strip */
.vstrip{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.vstrip .wrap{display:grid;grid-template-columns:repeat(3,1fr)}
.vitem{display:flex;align-items:center;gap:15px;padding:24px 12px}
.vitem+.vitem{border-left:1px solid var(--line)}
.vitem .vic{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;flex:0 0 auto;transform:rotate(-3deg)}
.vitem:nth-child(1) .vic{background:#E9F7EE;color:var(--p-green)}
.vitem:nth-child(2) .vic{background:#FFF4DC;color:var(--p-orange)}
.vitem:nth-child(3) .vic{background:#FDEBEB;color:var(--p-red)}
.vitem .vic svg{width:26px;height:26px}
.vitem b{font-family:var(--disp);font-weight:600;font-size:1.06rem;display:block;color:var(--deep)}
.vitem span{font-size:.9rem;color:var(--muted)}
@media(max-width:760px){.vstrip .wrap{grid-template-columns:1fr}.vitem+.vitem{border-left:0;border-top:1px solid var(--line)}}

/* ============================================================ LESSONS — puzzle-colored cards */
.lessons{background:var(--foam)}
.lesson-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.lesson{position:relative;background:#fff;border-radius:var(--r);padding:0 26px 28px;box-shadow:var(--shadow-sm);
  border:1px solid var(--line);overflow:hidden;transition:transform .22s,box-shadow .22s}
.lesson:hover{transform:translateY(-6px) rotate(-.4deg);box-shadow:var(--shadow)}
.lesson .l-wave{height:52px;margin:0 -26px 18px}
.lesson .l-wave svg{display:block;width:100%;height:100%}
.lesson .l-ic{width:58px;height:58px;border-radius:18px;display:grid;place-items:center;margin:-46px 0 16px;position:relative;z-index:2;
  background:#fff;box-shadow:var(--shadow-sm)}
.lesson .l-ic svg{width:30px;height:30px}
.lesson h3{font-size:1.32rem;margin-bottom:8px}
.lesson p{color:var(--muted);font-size:.97rem;margin:0}
.lesson .l-badge{display:inline-block;font-family:var(--disp);font-weight:600;font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;
  padding:4px 12px;border-radius:999px;margin-bottom:12px}
.lesson[data-c="red"]    .l-wave path{fill:var(--p-red)}    .lesson[data-c="red"] .l-ic svg{color:var(--p-red)}    .lesson[data-c="red"] .l-badge{background:#FDEBEB;color:#B32626}
.lesson[data-c="blue"]   .l-wave path{fill:var(--p-blue)}   .lesson[data-c="blue"] .l-ic svg{color:var(--p-blue)}   .lesson[data-c="blue"] .l-badge{background:#E7F2FC;color:#155F9E}
.lesson[data-c="yellow"] .l-wave path{fill:var(--p-yellow)} .lesson[data-c="yellow"] .l-ic svg{color:#C79508}       .lesson[data-c="yellow"] .l-badge{background:#FFF4D6;color:#8A6A00}
.lesson[data-c="green"]  .l-wave path{fill:var(--p-green)}  .lesson[data-c="green"] .l-ic svg{color:var(--p-green)}  .lesson[data-c="green"] .l-badge{background:#E9F7EE;color:#2A7A2A}
.lesson[data-c="orange"] .l-wave path{fill:var(--p-orange)} .lesson[data-c="orange"] .l-ic svg{color:var(--p-orange)} .lesson[data-c="orange"] .l-badge{background:#FFEEDD;color:#B5620B}
.lesson[data-c="aqua"]   .l-wave path{fill:var(--aqua)}     .lesson[data-c="aqua"] .l-ic svg{color:var(--aqua)}     .lesson[data-c="aqua"] .l-badge{background:#E2F6F9;color:#0B7A88}

/* ============================================================ ABILITIES — deep water band */
.abilities{position:relative;color:#fff;overflow:hidden;
  background:linear-gradient(175deg,#0A5A80 0%,var(--deep) 55%,var(--navy) 100%)}
.abilities .rays{position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:linear-gradient(115deg,transparent 20%,rgba(120,220,235,.14) 26%,transparent 33%),
             linear-gradient(115deg,transparent 46%,rgba(120,220,235,.10) 52%,transparent 60%),
             linear-gradient(115deg,transparent 70%,rgba(120,220,235,.13) 77%,transparent 84%);
  animation:rays 14s ease-in-out infinite alternate}
@keyframes rays{from{transform:translateX(-3%)}to{transform:translateX(3%)}}
.abilities .puzzle-deco{position:absolute;pointer-events:none;opacity:.13;color:#fff}
.abilities .puzzle-deco svg{width:100%;height:100%}
.ab-inner{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center;padding-top:96px;padding-bottom:96px}
.ab-copy h2{font-size:clamp(2.1rem,4.4vw,3.2rem);color:#fff;margin:12px 0 14px}
.ab-copy .lead{color:#CDE9F2;font-size:1.13rem;margin:0 0 26px}
.ab-list{list-style:none;padding:0;margin:0;display:grid;gap:16px}
.ab-list li{display:flex;gap:15px;align-items:flex-start}
.ab-list .li-ic{width:46px;height:46px;border-radius:14px;background:rgba(255,255,255,.14);display:grid;place-items:center;flex:0 0 auto;transform:rotate(-3deg)}
.ab-list .li-ic svg{width:23px;height:23px;color:var(--aqua-2)}
.ab-list b{font-family:var(--disp);font-weight:600;font-size:1.08rem;display:block;color:#fff}
.ab-list span{color:#B9DCE8;font-size:.95rem}
.ab-card{position:relative;background:#fff;color:var(--ink);border-radius:26px;padding:36px 32px;box-shadow:0 30px 60px rgba(3,25,40,.45)}
.ab-card .qmark{font-family:var(--disp);font-size:4.6rem;line-height:.6;color:var(--aqua);height:36px}
.ab-card p{font-family:var(--disp);font-weight:600;font-size:1.5rem;line-height:1.3;color:var(--deep);margin:14px 0 12px}
.ab-card .src{color:var(--muted);font-weight:700;font-size:.92rem}
.ab-card .ab-partner{display:flex;gap:10px;align-items:flex-start;margin-top:20px;padding:15px 16px;border-radius:14px;
  background:var(--foam);color:var(--ink);font-size:.93rem;font-weight:600;line-height:1.45}
.ab-card .ab-partner svg{width:19px;height:19px;color:var(--p-green);flex:0 0 auto;margin-top:2px}
.ab-card .puz-row{display:flex;gap:7px;margin-top:18px}
.ab-card .puz-row svg{width:22px;height:22px}

/* ============================================================ STEPS — life-ring numbers */
.steps-sec{background:#fff}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
.step{text-align:center;padding:0 6px;position:relative}
.step .ring{width:74px;height:74px;margin:0 auto 18px;border-radius:50%;position:relative;
  background:conic-gradient(var(--p-red) 0 45deg,#fff 45deg 90deg,var(--p-red) 90deg 135deg,#fff 135deg 180deg,
    var(--p-red) 180deg 225deg,#fff 225deg 270deg,var(--p-red) 270deg 315deg,#fff 315deg 360deg);
  box-shadow:var(--shadow-sm);display:grid;place-items:center;transition:transform .25s}
.step:hover .ring{transform:rotate(14deg)}
.step .ring::before{content:"";position:absolute;inset:6px;border-radius:50%;background:#fff}
.step .ring b{position:relative;z-index:2;font-family:var(--disp);font-weight:600;font-size:1.55rem;color:var(--deep)}
.step:nth-child(2) .ring{background:conic-gradient(var(--p-blue) 0 45deg,#fff 45deg 90deg,var(--p-blue) 90deg 135deg,#fff 135deg 180deg,var(--p-blue) 180deg 225deg,#fff 225deg 270deg,var(--p-blue) 270deg 315deg,#fff 315deg 360deg)}
.step:nth-child(3) .ring{background:conic-gradient(var(--p-orange) 0 45deg,#fff 45deg 90deg,var(--p-orange) 90deg 135deg,#fff 135deg 180deg,var(--p-orange) 180deg 225deg,#fff 225deg 270deg,var(--p-orange) 270deg 315deg,#fff 315deg 360deg)}
.step:nth-child(4) .ring{background:conic-gradient(var(--p-green) 0 45deg,#fff 45deg 90deg,var(--p-green) 90deg 135deg,#fff 135deg 180deg,var(--p-green) 180deg 225deg,#fff 225deg 270deg,var(--p-green) 270deg 315deg,#fff 315deg 360deg)}
.step h3{font-size:1.18rem;margin-bottom:8px}
.step p{color:var(--muted);font-size:.94rem;margin:0}
.step::after{content:"";position:absolute;top:36px;right:-17px;width:34px;height:3px;border-radius:3px;
  background:repeating-linear-gradient(90deg,var(--line-2) 0 6px,transparent 6px 11px)}
.step:last-child::after{display:none}
@media(max-width:820px){.step::after{display:none}}

/* ============================================================ WHY */
.why{background:var(--foam)}
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.why-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:30px 26px;box-shadow:var(--shadow-sm);transition:transform .22s}
.why-card:hover{transform:translateY(-5px)}
.why-card .wi{width:54px;height:54px;border-radius:16px;display:grid;place-items:center;margin-bottom:16px;transform:rotate(-3deg)}
.why-card:nth-child(1) .wi{background:#E2F6F9;color:var(--aqua)}
.why-card:nth-child(2) .wi{background:#E7F2FC;color:var(--p-blue)}
.why-card:nth-child(3) .wi{background:#FDEBEB;color:var(--p-red)}
.why-card .wi svg{width:27px;height:27px}
.why-card h3{font-size:1.22rem;margin-bottom:8px}
.why-card p{color:var(--muted);font-size:.95rem;margin:0}

/* ============================================================ ABOUT */
.about{background:#fff}
.about-inner{display:grid;grid-template-columns:.9fr 1.1fr;gap:52px;align-items:center}
.about-art{position:relative;border-radius:28px;background:#fff;border:1px solid var(--line);
  display:grid;place-items:center;box-shadow:var(--shadow);padding:34px;overflow:visible}
.about-art img{width:88%;height:auto;border-radius:18px}
.about-art .corner{position:absolute;font-family:var(--disp);font-weight:600;font-size:.86rem;background:var(--foam);
  border:1px solid var(--line-2);color:var(--deep);padding:8px 15px;border-radius:999px;box-shadow:var(--shadow-sm)}
.about-art .corner.tl{top:-14px;left:-12px;transform:rotate(-4deg)}
.about-art .corner.br{bottom:-14px;right:-12px;transform:rotate(3deg)}
.about-body h2{font-size:clamp(2rem,4vw,2.9rem);margin:12px 0 16px}
.about-body p{color:var(--muted);font-size:1.06rem;margin:0 0 15px}
.about-body p b{color:var(--ink)}

/* ============================================================ SPLASH CTA */
.splash{position:relative;color:#fff;overflow:hidden;text-align:center;
  background:linear-gradient(160deg,var(--aqua-2),var(--aqua) 45%,var(--blue))}
.splash .wrap{position:relative;z-index:2;padding-top:84px;padding-bottom:84px}
.splash h2{color:#fff;font-size:clamp(2.1rem,4.6vw,3.3rem);margin-bottom:14px}
.splash p{color:#E6F7FB;font-size:1.14rem;max-width:560px;margin:0 auto 30px}
.splash .hero-actions{justify-content:center}

/* ============================================================ CONTACT */
.contact{background:var(--foam)}
.contact-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:48px;align-items:start}
.contact-info h2{font-size:clamp(2rem,4vw,2.9rem);margin:12px 0 14px}
.contact-info .lead{color:var(--muted);font-size:1.08rem;margin-bottom:28px}
.contact-methods{list-style:none;padding:0;margin:0;display:grid;gap:14px}
.cm{display:flex;gap:15px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px 18px;box-shadow:var(--shadow-sm)}
.cm-icon{width:48px;height:48px;border-radius:14px;background:#E2F6F9;display:grid;place-items:center;flex:0 0 auto;transform:rotate(-3deg)}
.cm-icon svg{width:22px;height:22px;color:var(--aqua)}
.cm-label{font-size:.76rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted-2);font-weight:800}
.cm-value{font-family:var(--disp);font-weight:600;font-size:1.06rem;color:var(--deep)}
a.cm-value:hover{color:var(--aqua)}
.contact-card{background:#fff;border-radius:24px;padding:32px 30px;box-shadow:var(--shadow);border-top:8px solid var(--aqua)}
.contact-card h3{font-size:1.5rem;margin-bottom:6px}
.contact-card .cc-sub{color:var(--muted);font-size:.95rem;margin:0 0 20px}
.field{display:flex;flex-direction:column;gap:7px;margin-bottom:15px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.field label{font-family:var(--disp);font-weight:600;font-size:.86rem;color:var(--deep)}
.field input,.field select,.field textarea{background:var(--foam-2);border:2px solid var(--line);border-radius:13px;
  padding:13px 14px;color:var(--ink);font-family:var(--body);font-size:1rem;width:100%;transition:border-color .18s,box-shadow .18s}
.field textarea{min-height:100px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--aqua);box-shadow:0 0 0 4px rgba(22,180,198,.16);background:#fff}
.field input::placeholder,.field textarea::placeholder{color:#9FB6C1}
.contact-card .btn{width:100%;margin-top:6px}
.cc-fine{font-size:.8rem;color:var(--muted-2);margin:12px 0 0;text-align:center}

/* ============================================================ FOOTER */
.site-footer{position:relative;background:var(--navy);color:#BFDDE9;padding:0 0 28px}
.footer-wave{display:block;width:100%;height:64px;background:var(--foam)}
.footer-wave svg{display:block;width:100%;height:100%}
.site-footer .wrap{padding-top:46px}
.footer-top{display:grid;grid-template-columns:1.35fr 1fr 1fr;gap:34px}
.footer-brand .fb-lock{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.footer-brand .footer-logo{width:52px;height:52px;border-radius:12px;background:#fff;padding:4px;object-fit:contain}
.footer-brand .brand-name{font-family:var(--disp);font-weight:600;font-size:1.25rem;color:#fff}
.footer-brand .brand-name b{color:var(--aqua-2)}
.footer-brand p{font-size:.94rem;max-width:340px;margin:0;color:#9FC6D6}
.footer-col h4{font-family:var(--disp);font-weight:600;font-size:.88rem;letter-spacing:.12em;text-transform:uppercase;color:#fff;margin:0 0 14px}
.footer-col a,.footer-col span{display:block;color:#9FC6D6;font-size:.94rem;margin-bottom:10px}
.footer-col a:hover{color:var(--aqua-2)}
.footer-disclaimer{color:#6E97A9;font-size:.8rem;line-height:1.6;border-top:1px solid rgba(255,255,255,.12);margin-top:32px;padding-top:20px}
.footer-bottom{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;color:#6E97A9;font-size:.86rem;margin-top:12px}
.footer-bottom .hl{color:var(--aqua-2)}

/* reveal */
.rv{opacity:0;transform:translateY(20px);transition:opacity .65s ease,transform .65s ease}
.rv-in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none}
  .hero::before,.hero::after,.hero-art .float-card,.hero-art .float-card::after,.hero-art .chip,.bubbles span,.abilities .rays{animation:none}
}

/* ============================================================ RESPONSIVE */
@media(max-width:960px){
  .hero-inner{grid-template-columns:1fr;gap:44px;padding-top:52px;padding-bottom:104px}
  .hero-art{max-width:340px}
  .lesson-grid{grid-template-columns:1fr 1fr}
  .ab-inner{grid-template-columns:1fr;gap:36px;padding-top:72px;padding-bottom:72px}
  .steps{grid-template-columns:1fr 1fr;gap:30px}
  .why-grid{grid-template-columns:1fr}
  .about-inner{grid-template-columns:1fr;gap:40px}
  .about-art{max-width:440px;margin:0 auto}
  .contact-grid{grid-template-columns:1fr;gap:36px}
  .footer-top{grid-template-columns:1fr 1fr;gap:26px}
}
@media(max-width:600px){
  body{font-size:16px}
  .section{padding:62px 0}
  .lesson-grid{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .field-row{grid-template-columns:1fr}
  .footer-top{grid-template-columns:1fr}
  .hero-actions .btn{flex:1 1 auto}
  .hero-art{max-width:300px}
  .hero-art .chip.c1{left:-8px}
  .hero-art .chip.c2{right:-8px}
}

/* ============ from our pool ============ */
.moments{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.moment{background:var(--white);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-sm)}
.m-media{position:relative;aspect-ratio:4/5;background:var(--foam)}
.m-media img,.m-media video{width:100%;height:100%;object-fit:cover;display:block}
.m-video{cursor:pointer}
.m-body{padding:20px 22px 22px}
.m-body h3{font-family:var(--disp);font-size:1.22rem;margin:0 0 6px;color:var(--ink)}
.m-body p{margin:0;color:var(--muted);font-size:.95rem}
.pg-play{position:absolute;inset:0;margin:auto;width:62px;height:62px;border-radius:50%;border:0;background:rgba(255,255,255,.94);color:var(--blue);display:grid;place-items:center;cursor:pointer;transition:.2s;box-shadow:0 8px 24px rgba(8,61,92,.3)}
.pg-play svg{width:26px;height:26px;margin-left:3px}
.m-video.playing .pg-play{opacity:0;pointer-events:none}
.m-video:hover .pg-play{transform:scale(1.08)}
.pool-more{text-align:center;margin-top:30px}
@media(max-width:900px){.moments{grid-template-columns:1fr;gap:18px;max-width:440px;margin:0 auto}}