:root {
  --ink: #142653;
  --muted: #5e6c89;
  --blue: #1293e8;
  --blue-deep: #087dc9;
  --coral: #ff6542;
  --coral-dark: #f4502f;
  --line: #e5edf5;
  --shell: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: #fff;
  font-family: "Manrope", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; }
.skip-link { position: fixed; z-index: 100; top: 8px; left: 8px; padding: 10px 14px; border-radius: 7px; color: #fff; background: #0b6da9; font-size: 12px; font-weight: 800; transform: translateY(-150%); }
.skip-link:focus { transform: translateY(0); }
:where(a, button, summary):focus-visible { outline: 3px solid rgba(18,147,232,.45); outline-offset: 3px; }
.shell { width: min(var(--shell), calc(100% - 48px)); margin-inline: auto; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  height: 76px;
  background: rgba(255,255,255,.97);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 3px 18px rgba(24,67,113,.035);
}
.header-inner { height: 100%; display: flex; align-items: center; }
.brand { width: 178px; height: 54px; display: flex; align-items: center; line-height: 1; }
.brand > img { width: 156px; height: auto; max-height: 52px; display: block; object-fit: contain; object-position: left center; }
.brand-word { position: relative; color: #1696e5; font-size: 28px; font-weight: 800; letter-spacing: -.9px; }
.brand-dot { display: inline-block; width: 11px; height: 11px; margin-left: 3px; border-radius: 50%; background: #1696e5; transform: translateY(-8px); }
.brand-dot::after { content: ""; position: absolute; width: 21px; height: 4px; margin: 12px 0 0 -14px; border-radius: 100%; background: #1696e5; transform: rotate(-13deg); }
.brand-subtitle { margin-top: 4px; color: #389acf; font-size: 9px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.main-nav { display: flex; align-items: center; gap: 39px; margin: 0 auto; }
.main-nav a { padding-block: 26px; color: #344461; font-size: 13px; font-weight: 600; transition: color .2s ease; }
.main-nav a:hover, .main-nav a:focus-visible { color: var(--blue); }
.header-actions { display: flex; align-items: center; gap: 23px; }
.phone { color: #22365f; font-size: 14px; font-weight: 800; white-space: nowrap; }
.button { display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; color: #fff; background: var(--coral); font-weight: 800; box-shadow: 0 7px 18px rgba(255,101,66,.23); transition: transform .2s ease, background .2s ease, box-shadow .2s ease; }
.button:hover { background: var(--coral-dark); transform: translateY(-1px); box-shadow: 0 10px 22px rgba(255,101,66,.3); }
.button-small { min-width: 120px; height: 42px; font-size: 13px; }
.menu-toggle { display: none; width: 42px; height: 42px; padding: 10px; border: 0; background: transparent; }
.menu-toggle span { display: block; height: 2px; margin: 5px 0; background: var(--ink); border-radius: 2px; }

.hero { position: relative; min-height: 455px; overflow: hidden; background: linear-gradient(90deg, #fff 0%, #fff 39%, #f5fbff 55%, #dff5ff 100%); }
.hero-inner { position: relative; z-index: 3; min-height: 455px; display: flex; align-items: center; }
.hero-photo { position: absolute; z-index: 1; inset: 0 0 0 42%; background-image: linear-gradient(90deg, #fff 0%, rgba(255,255,255,.82) 7%, rgba(255,255,255,0) 27%), url("assets/hero-swimming.webp"); background-size: cover; background-position: 52% 49%; }
.hero-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(2,139,208,.08)); }
.hero-copy { width: 58%; padding: 37px 0 60px; }
.eyebrow { margin: 0 0 13px; color: var(--blue-deep); font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
h1 { max-width: 660px; margin: 0; font-size: clamp(34px, 3.2vw, 48px); line-height: 1.18; letter-spacing: -1.55px; font-weight: 800; }
.hero-lead { margin: 19px 0 0; color: #4b5a76; font-size: 18px; line-height: 1.55; font-weight: 500; }
.hero-cta { display: flex; align-items: center; gap: 18px; margin-top: 25px; }
.button-primary { min-width: 293px; height: 55px; padding-inline: 25px; font-size: 14px; }
.video-button { height: 52px; padding: 0 18px; display: inline-flex; align-items: center; gap: 10px; border: 1px solid #d8e6f1; border-radius: 9px; color: #188bd7; background: rgba(255,255,255,.88); font-size: 13px; font-weight: 800; cursor: pointer; box-shadow: 0 5px 17px rgba(35,98,152,.08); }
.play-icon { width: 24px; height: 24px; display: grid; place-items: center; padding-left: 2px; border: 2px solid #2d9dea; border-radius: 50%; font-size: 9px; }
.hero-features { display: flex; gap: 12px; margin: 24px 0 0; padding: 0; list-style: none; }
.hero-features li { min-width: 165px; min-height: 59px; padding: 10px 13px; display: flex; align-items: center; gap: 10px; border: 1px solid rgba(215,230,241,.88); border-radius: 12px; color: #3c4f70; background: rgba(255,255,255,.74); font-size: 11px; line-height: 1.35; font-weight: 700; box-shadow: 0 8px 30px rgba(29,100,155,.05); backdrop-filter: blur(4px); }
.feature-icon { width: 31px; height: 31px; display: grid; place-items: center; flex: 0 0 auto; color: #218fdc; line-height: 1; }
.feature-icon img { width: 30px; height: 30px; display: block; object-fit: contain; }
.hero-wave { position: absolute; z-index: 5; bottom: -1px; left: 0; width: 100%; height: 50px; }
.next-stage { padding: 34px 0 52px; text-align: center; color: #90a0b7; }
.next-stage span { color: var(--blue); font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.next-stage p { margin: 6px 0 0; font-size: 13px; }

.trust-section { position: relative; z-index: 7; margin-top: -5px; }
.trust-strip { min-height: 94px; padding: 18px 26px; display: grid; grid-template-columns: repeat(4, 1fr); align-items: center; border: 1px solid #edf3f8; border-radius: 15px; background: linear-gradient(100deg, #f8fbff, #fff 48%, #f5fbff); box-shadow: 0 14px 40px rgba(36,104,153,.07); }
.trust-item { min-height: 55px; padding: 2px 23px; display: flex; align-items: center; gap: 14px; border-right: 1px solid #dce8f1; }
.trust-item:first-child { padding-left: 10px; }
.trust-item:last-child { border-right: 0; }
.line-icon { width: 38px; height: 38px; flex: 0 0 38px; display: grid; place-items: center; line-height: 1; }
.line-icon img { width: 36px; height: 36px; display: block; object-fit: contain; }
.trust-item div { display: grid; gap: 3px; }
.trust-item strong { color: #172c59; font-size: 18px; line-height: 1.2; font-weight: 800; white-space: nowrap; }
.trust-item small { color: #65738d; font-size: 9px; line-height: 1.4; font-weight: 600; }

.section-heading { margin: 34px auto 18px; text-align: center; }
.section-heading span { display: block; margin-bottom: 5px; color: #2297e2; font-size: 10px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.section-heading h2 { margin: 0; color: var(--ink); font-size: 24px; line-height: 1.25; letter-spacing: -.5px; }
.section-heading.compact { margin-top: 30px; margin-bottom: 15px; }
.benefit-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 13px; }
.benefit-card { min-height: 162px; padding: 18px 13px 14px; text-align: center; border: 1px solid #e5edf4; border-radius: 13px; background: #fff; box-shadow: 0 8px 25px rgba(38,94,137,.055); transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.benefit-card:hover { transform: translateY(-3px); border-color: #bfe1f6; box-shadow: 0 13px 30px rgba(38,94,137,.1); }
.benefit-icon { width: 42px; height: 42px; margin: 0 auto 9px; display: grid; place-items: center; color: #2097e6; line-height: 1; }
.benefit-icon img { width: 40px; height: 40px; display: block; object-fit: contain; }
.benefit-card h3 { margin: 0; color: #253858; font-size: 12px; line-height: 1.3; font-weight: 800; }
.benefit-card p { max-width: 130px; margin: 8px auto 0; color: #7c899d; font-size: 9px; line-height: 1.45; font-weight: 500; }

.program-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.program-tab { height: 44px; border: 1px solid #e4edf4; border-radius: 11px 11px 0 0; color: #344765; background: #fff; font-weight: 800; font-size: 12px; cursor: pointer; transition: color .2s ease, background .2s ease, box-shadow .2s ease; }
.program-tab:hover { color: var(--blue); background: #f7fbfe; }
.program-tab.is-active { border-color: #118ed9; color: #fff; background: linear-gradient(135deg, #0d91e5, #087fc9); box-shadow: 0 8px 18px rgba(12,137,216,.21); }
.program-panel { min-height: 290px; padding: 15px; display: grid; grid-template-columns: 48% 1fr; gap: 34px; align-items: center; border: 1px solid #e5edf4; border-radius: 14px; background: #fff; box-shadow: 0 12px 36px rgba(30,87,131,.07); }
.program-image-wrap { position: relative; height: 255px; overflow: hidden; border-radius: 12px; background: #dff3fc; }
.program-image-wrap img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center 46%; }
.age-badge { position: absolute; left: 14px; bottom: 14px; padding: 7px 12px; border-radius: 7px; color: #fff; background: rgba(9,126,199,.9); font-size: 9px; font-weight: 800; backdrop-filter: blur(5px); }
.program-copy { padding-right: 28px; }
.program-kicker { color: #1492df; font-size: 10px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.program-copy h3 { margin: 5px 0 8px; color: #152d5c; font-size: 24px; letter-spacing: -.4px; }
.program-copy > p { margin: 0; color: #68758c; font-size: 11px; line-height: 1.58; }
.program-copy ul { margin: 12px 0 15px; padding: 0; display: grid; gap: 7px; list-style: none; }
.program-copy li { position: relative; padding-left: 19px; color: #40516e; font-size: 10px; font-weight: 600; }
.program-copy li::before { content: "✓"; position: absolute; left: 0; top: -1px; color: #168fe0; font-size: 13px; font-weight: 800; }
.program-link { min-width: 178px; height: 40px; padding: 0 16px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; border: 1px solid #1595e2; border-radius: 7px; color: #0d8bdc; background: #fff; font-size: 10px; font-weight: 800; transition: color .2s ease, background .2s ease, box-shadow .2s ease, transform .2s ease; }
.program-link span { font-size: 16px; transition: transform .2s ease; }
.program-link:hover { color: #fff; background: #1595e2; box-shadow: 0 7px 16px rgba(21,149,226,.2); transform: translateY(-1px); }
.program-link:hover span { transform: translateX(3px); }

.booking { min-height: 215px; margin-top: 28px; padding: 22px 28px; display: grid; grid-template-columns: 29% 1fr; gap: 26px; overflow: hidden; border-radius: 15px; color: #fff; background: linear-gradient(120deg, #ff6543 0%, #ff7454 56%, #ff6040 100%); box-shadow: 0 14px 32px rgba(255,96,62,.2); }
.booking-intro { padding: 3px 0 0 7px; }
.booking-intro > span { font-size: 9px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; opacity: .8; }
.booking-intro h2 { margin: 6px 0 8px; font-size: 22px; line-height: 1.18; letter-spacing: -.35px; }
.booking-intro p { margin: 0; font-size: 9px; line-height: 1.5; opacity: .86; }
.booking-form { position: relative; min-height: 171px; padding: 21px 22px 13px; border-radius: 12px; color: var(--ink); background: #fff; box-shadow: 0 10px 24px rgba(151,52,34,.12); }
.booking-progress { position: absolute; top: 11px; left: 50%; display: flex; gap: 6px; transform: translateX(-50%); }
.booking-progress span { width: 22px; height: 3px; border-radius: 4px; background: #dce8f0; }
.booking-progress .is-active { background: #ff6846; }
.booking-options { display: grid; grid-template-columns: repeat(4, 1fr); }
.booking-option { position: relative; min-height: 105px; display: grid; justify-items: center; align-content: center; gap: 4px; border: 0; border-right: 1px solid #e2ebf2; color: #314465; background: transparent; cursor: pointer; transition: background .2s ease; }
.booking-option:last-child { border-right: 0; }
.booking-option:not(:last-child)::after { content: "›"; position: absolute; z-index: 2; top: 43%; right: -9px; width: 18px; height: 24px; display: grid; place-items: center; color: #9bd4f4; background: #fff; font-size: 24px; line-height: 1; transform: translateY(-50%); }
.booking-option:hover, .booking-option.is-selected { background: #f7fbfe; }
.option-icon { width: 29px; height: 29px; display: grid; place-items: center; line-height: 1; }
.option-icon img { width: 28px; height: 28px; display: block; object-fit: contain; }
.booking-option strong { font-size: 10px; line-height: 1.35; }
.booking-option small { color: #8a97aa; font-size: 8px; }
.booking-submit { width: min(260px, 80%); height: 42px; margin: 1px auto 0; display: flex; align-items: center; justify-content: center; gap: 10px; border: 0; border-radius: 7px; color: #fff; background: var(--coral); font-size: 12px; font-weight: 800; cursor: pointer; box-shadow: 0 7px 15px rgba(255,101,66,.22); }
.booking-result { min-height: 13px; margin: 4px 0 -9px; color: #1a8ed7; text-align: center; font-size: 8px; font-weight: 700; }

.lesson { padding-top: 4px; }
.lesson-flow { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.lesson-flow::before { content: ""; position: absolute; z-index: -1; top: 53%; left: 5%; right: 5%; height: 1px; background: repeating-linear-gradient(90deg, #a9d9f5 0 5px, transparent 5px 10px); }
.lesson-step { position: relative; min-height: 138px; padding: 17px 132px 14px 54px; border-radius: 13px; background: #fff; box-shadow: 0 8px 26px rgba(29,88,133,.07); }
.step-number { position: absolute; top: 15px; left: 14px; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: #078cd8; font-size: 13px; line-height: 1; font-weight: 800; box-shadow: 0 5px 12px rgba(8,140,216,.2); }
.step-copy h3 { margin: 0 0 7px; color: #243858; font-size: 12px; line-height: 1.3; font-weight: 800; letter-spacing: -.12px; }
.step-copy p { margin: 0; color: #78869a; font-size: 9px; line-height: 1.5; font-weight: 500; }
.lesson-step img, .step-finish { position: absolute; top: 13px; right: 12px; width: 108px; height: 112px; border-radius: 11px; object-fit: cover; }
.step-finish { padding: 14px 7px; display: grid; place-items: center; align-content: center; color: #fff; text-align: center; background: linear-gradient(145deg, #19a5e8, #087ec9); }
.step-finish span { width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.6); border-radius: 50%; font-weight: 800; }
.step-finish strong { margin-top: 4px; font-size: 11px; }
.step-finish small { margin-top: 2px; font-size: 6px; opacity: .8; }

.facilities { margin-top: 30px; padding: 20px 22px 22px; border: 1px solid #e4edf4; border-radius: 15px; background: #fff; box-shadow: 0 12px 38px rgba(29,88,133,.06); }
.facility-heading { margin-bottom: 14px; display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.facility-heading > div:first-child > span, .section-heading.aligned > span { color: #168fdd; font-size: 9px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.facility-heading h2 { margin: 4px 0 4px; font-size: 21px; letter-spacing: -.45px; }
.facility-heading p { margin: 0; color: #7b899d; font-size: 10px; }
.gallery-controls { display: flex; align-items: center; gap: 9px; color: #8794a7; font-size: 10px; }
.gallery-controls button { width: 31px; height: 31px; border: 1px solid #d9e8f1; border-radius: 50%; color: #168edc; background: #fff; cursor: pointer; }
.facility-showcase { display: grid; grid-template-columns: 52% 27% 1fr; gap: 12px; }
.facility-main-photo { position: relative; height: 100%; min-height: 312px; overflow: hidden; border-radius: 13px; }
.facility-main-photo img { width: 100%; height: 100%; display: block; object-fit: cover; transition: opacity .2s ease; }
.photo-caption { position: absolute; left: 13px; bottom: 13px; padding: 9px 12px; display: grid; gap: 2px; border-radius: 8px; color: #fff; background: rgba(9,58,92,.63); backdrop-filter: blur(7px); }
.photo-caption strong { font-size: 10px; }
.photo-caption span { font-size: 7px; opacity: .8; }
.facility-side-photos { display: grid; grid-template-rows: 1fr 1fr; gap: 12px; }
.gallery-thumb { padding: 0; overflow: hidden; border: 2px solid transparent; border-radius: 12px; background: #e9f5fb; cursor: pointer; }
.gallery-thumb.is-active { border-color: #15a0eb; }
.gallery-thumb img { width: 100%; height: 100%; display: block; object-fit: cover; }
.facility-facts { padding: 16px 12px 10px; display: flex; flex-direction: column; border-radius: 12px; background: linear-gradient(150deg, #f8fcff, #fff); }
.facility-facts h3 { margin: 0 0 12px; font-size: 18px; line-height: 1.25; }
.facility-facts ul { margin: 0; padding: 0; display: grid; gap: 12px; list-style: none; }
.facility-facts li { display: flex; align-items: center; gap: 9px; color: #53637e; font-size: 9px; line-height: 1.35; font-weight: 700; }
.facility-facts li > span { width: 27px; height: 29px; display: grid; place-items: center; flex: 0 0 27px; }
.facility-facts li > span img { width: 27px; height: 27px; display: block; object-fit: contain; }
.facts-button { height: 38px; margin-top: auto; border: 0; border-radius: 7px; color: #fff; background: var(--coral); font-size: 8px; font-weight: 800; cursor: pointer; }

.section-heading.aligned { margin: 24px 0 13px; text-align: left; }
.section-heading.aligned h2 { font-size: 20px; }
.comfort-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.comfort-card { overflow: hidden; border: 1px solid #e4edf4; border-radius: 12px; background: #fff; box-shadow: 0 7px 23px rgba(29,88,133,.05); }
.comfort-visual { width: 100%; height: 145px; display: block; position: relative; overflow: hidden; object-fit: cover; object-position: center; }
.comfort-card h3 { margin: 12px 13px 5px; color: #138edb; font-size: 12px; }
.comfort-card p { min-height: 62px; margin: 0 13px 14px; color: #77859a; font-size: 8.5px; line-height: 1.55; }
.playroom { display: flex; align-items: flex-end; justify-content: center; gap: 15px; padding-bottom: 25px; background: linear-gradient(145deg, #d8f1fb, #fef7e7); }
.playroom::before { content: ""; position: absolute; inset: auto 16px 16px; height: 35px; border-radius: 8px; background: #70c3dd; box-shadow: 0 -42px 0 -12px #f5a84d; }
.playroom span { z-index: 1; color: #fff; font-size: 27px; }
.waiting { background: linear-gradient(180deg, #d9ebf0 0 48%, #c69c76 49% 53%, #e9d7c0 54%); }
.waiting span { position: absolute; bottom: 17px; width: 63px; height: 46px; border-radius: 6px 6px 2px 2px; background: #e7ecee; box-shadow: inset 0 8px #b2d0db; }
.waiting span:nth-child(1) { left: 15px; }.waiting span:nth-child(2) { left: 50%; transform: translateX(-50%); background: #f7f2eb; }.waiting span:nth-child(3) { right: 15px; }
.showers { display: flex; justify-content: space-around; padding: 20px 25px; background: repeating-linear-gradient(90deg, #dce8e9 0 27px, #eef5f5 27px 29px); }
.showers i { width: 7px; height: 73px; border-radius: 4px; background: #9babad; box-shadow: 12px -2px 0 -2px #778b8e; }
.changing { display: flex; gap: 4px; padding: 18px 14px; background: #e7ddd2; }
.changing span { flex: 1; border-radius: 3px; background: linear-gradient(90deg, #b68d6d, #d1af91); box-shadow: inset 0 -25px rgba(80,57,41,.12); }

.video-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.video-card { position: relative; height: 230px; padding: 0; overflow: hidden; border: 0; border-radius: 13px; background: #dff2fb; cursor: pointer; box-shadow: 0 8px 25px rgba(24,81,125,.09); }
.video-card img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .35s ease; }
.video-card:hover img { transform: scale(1.035); }
.video-shade { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 48%, rgba(5,42,68,.62)); }
.video-play { position: absolute; top: 50%; left: 50%; width: 54px; height: 54px; display: grid; place-items: center; padding-left: 4px; border-radius: 50%; color: #158bd5; background: rgba(255,255,255,.94); font-size: 17px; transform: translate(-50%,-50%); box-shadow: 0 6px 22px rgba(0,46,80,.18); }
.video-label { position: absolute; left: 18px; right: 18px; bottom: 14px; display: flex; justify-content: space-between; align-items: center; color: #fff; }
.video-label strong { font-size: 11px; }.video-label small { padding: 4px 6px; border-radius: 4px; background: rgba(0,28,50,.45); font-size: 7px; }
.video-status { min-height: 16px; margin: 5px 0 0; color: #708097; text-align: center; font-size: 8px; }
.video-modal-open { overflow: hidden; }
.video-modal { position: fixed; z-index: 200000; inset: 0; padding: 24px; display: grid; place-items: center; background: rgba(5,24,43,.84); backdrop-filter: blur(5px); }
.video-modal-dialog { position: relative; width: min(960px, 94vw); }
.video-modal-frame { position: relative; width: 100%; overflow: hidden; border-radius: 15px; background: #071624; box-shadow: 0 24px 80px rgba(0,0,0,.45); aspect-ratio: 16 / 9; }
.video-modal-frame iframe { width: 100%; height: 100%; display: block; border: 0; }
.video-modal-close { position: absolute; z-index: 2; right: -14px; top: -14px; width: 38px; height: 38px; display: grid; place-items: center; border: 0; border-radius: 50%; color: #17314f; background: #fff; cursor: pointer; font-size: 28px; line-height: 1; box-shadow: 0 5px 20px rgba(0,0,0,.28); }

.pricing-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; align-items: stretch; }
.price-card { position: relative; min-height: 220px; padding: 18px 12px 14px; display: flex; flex-direction: column; align-items: center; border: 1px solid #dfebf3; border-radius: 12px; text-align: center; background: #fff; box-shadow: 0 8px 24px rgba(30,87,131,.055); }
.price-card.featured { border: 2px solid #ff7657; transform: translateY(-3px); box-shadow: 0 12px 30px rgba(255,101,66,.12); }
.popular { position: absolute; top: -12px; left: 50%; padding: 5px 16px; border-radius: 20px; color: #fff; background: var(--coral); font-size: 8px; font-weight: 800; transform: translateX(-50%); }
.price-type { color: #344968; font-size: 10px; font-weight: 800; }
.price-card h3 { margin: 10px 0 2px; color: #078bd9; font-size: 22px; }
.price-card small { color: #8592a5; font-size: 8px; }
.price-card p { margin: 12px 0; color: #65738b; font-size: 8px; line-height: 1.55; }
.price-card a { width: calc(100% - 18px); height: 35px; margin-top: auto; display: grid; place-items: center; border: 1px solid #ff8268; border-radius: 6px; color: #ff6040; font-size: 8px; font-weight: 800; }
.price-card.featured a { border-color: var(--coral); color: #fff; background: var(--coral); }
.pricing-note { margin: 11px 0 0; color: #91a0b3; text-align: center; font-size: 7px; }

.trainer-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.trainer-card { min-width: 0; padding: 9px; display: flex; flex-direction: column; border: 1px solid #dfeaf2; border-radius: 13px; background: #fff; box-shadow: 0 4px 14px rgba(31,84,122,.07); }
.trainer-card > img { width: 100%; height: 150px; display: block; border-radius: 9px; object-fit: cover; object-position: center center; background: #eef3f6; }
.trainer-info { min-height: 218px; padding: 9px 5px 2px; display: flex; flex-direction: column; align-items: stretch; }
.trainer-info h3 { margin: 0; color: #192f54; font-size: 13px; line-height: 1.2; }
.trainer-role { min-height: 25px; margin: 4px 0 2px; color: #168edc; font-size: 8px; line-height: 1.35; font-weight: 700; }
.trainer-experience { margin: 0 0 4px; color: #168edc; font-size: 8px; line-height: 1.3; font-weight: 800; }.trainer-experience span { color: #354967; }
.trainer-info ul { min-height: 50px; margin: 0 0 6px; padding-left: 13px; color: #354967; font-size: 7.5px; line-height: 1.45; }
.trainer-ages { min-height: 21px; display: flex; flex-wrap: wrap; gap: 5px; }.trainer-ages span { min-width: 31px; padding: 4px 7px; border-radius: 7px; color: #168edc; background: #f0f8fd; text-align: center; font-size: 7px; line-height: 1; font-weight: 800; }
.trainer-more { min-height: 31px; margin-top: auto; display: grid; place-items: center; border: 1px solid #ff7658; border-radius: 7px; color: #ff6546; background: #fff; font-size: 8px; font-weight: 800; transition: color .2s, background .2s; }.trainer-more:hover { color: #fff; background: #ff6b4a; }

.reviews { margin-top: 27px; }
.reviews-heading { margin-bottom: 12px; display: flex; justify-content: space-between; align-items: flex-end; }
.reviews-heading > div:first-child > span, .contact-card > span, .app-card > div:first-child > span { color: #168edc; font-size: 9px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.reviews-heading h2, .contact-card h2, .app-card h2 { margin: 4px 0 0; font-size: 21px; }
.rating-block { display: grid; grid-template-columns: auto auto; align-items: center; column-gap: 9px; text-align: right; }
.rating-block strong { grid-row: span 2; font-size: 32px; }.rating-block span, .stars { color: #ffb400; letter-spacing: 2px; }.rating-block small { color: #8794a7; font-size: 7px; }
.review-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.review-grid > article { min-height: 155px; padding: 15px; border: 1px solid #e2ebf2; border-radius: 12px; background: #fff; box-shadow: 0 7px 22px rgba(28,83,125,.05); }
.review-author { display: flex; align-items: center; gap: 9px; }
.review-author > span { width: 30px; height: 30px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 50%; color: #fff; background: linear-gradient(145deg, #19a7e9, #087dc8); font-size: 11px; font-weight: 800; }
.review-author div { display: grid; gap: 2px; }.review-author strong { font-size: 8.5px; }.review-author small { color: #8a97a9; font-size: 7px; }
.review-grid article p { min-height: 63px; margin: 12px 0 8px; color: #65748b; font-size: 8.5px; line-height: 1.55; }.stars { font-size: 9px; }

.faq-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px 14px; }
.faq details { border: 1px solid #e1ebf2; border-radius: 8px; background: #fff; }
.faq summary { position: relative; padding: 11px 35px 11px 13px; color: #435471; font-size: 9px; font-weight: 700; list-style: none; cursor: pointer; }
.faq summary::-webkit-details-marker { display: none; }.faq summary::after { content: "+"; position: absolute; right: 13px; color: #168fdd; font-size: 15px; top: 6px; }.faq details[open] summary::after { content: "−"; }
.faq details p { margin: 0; padding: 0 13px 12px; color: #7b899c; font-size: 8px; line-height: 1.5; }

.contact-hub { margin-top: 25px; display: grid; grid-template-columns: 1.45fr .82fr 1.15fr; gap: 12px; }
.app-card, .contact-card, .map-card { min-height: 190px; border: 1px solid #e1ebf2; border-radius: 13px; background: #f7fbfe; overflow: hidden; }
.app-card { padding: 20px; display: flex; justify-content: space-between; }
.app-card h2 { line-height: 1.25; }.app-card p { max-width: 220px; color: #718097; font-size: 8px; line-height: 1.5; }
.store-badges { display: flex; gap: 6px; margin-top: 12px; }.store-badges a { min-width: 85px; height: 29px; padding: 0 9px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; border-radius: 5px; color: #fff; background: #10151d; font-size: 7px; font-weight: 700; }.store-badges img { width: 13px; height: 13px; display: block; object-fit: contain; }
.app-phone { width: 112px; height: 196px; margin: -9px 5px -25px 12px; display: block; align-self: flex-start; object-fit: contain; object-position: center top; filter: drop-shadow(0 7px 12px rgba(29,64,91,.16)); }
.contact-card { padding: 20px; background: #fff; }.contact-card ul { margin: 16px 0 12px; padding: 0; display: grid; gap: 8px; color: #405475; font-size: 8.5px; list-style: none; }.contact-card li { display: flex; align-items: center; gap: 7px; line-height: 1.25; }.contact-card li > img { width: 17px; height: 17px; flex: 0 0 17px; display: block; object-fit: contain; }.socials { display: flex; gap: 6px; }.socials a { width: 25px; height: 25px; display: block; border-radius: 50%; }.socials img { width: 25px; height: 25px; display: block; object-fit: contain; }
.map-card { position: relative; background: #e7f1e4; }.map-card::before, .map-card::after, .map-roads { content: ""; position: absolute; background: #fff; box-shadow: 0 0 0 2px #d5dfd2; }.map-card::before { width: 150%; height: 15px; top: 45%; left: -20%; transform: rotate(-22deg); }.map-card::after { width: 14px; height: 140%; top: -20%; left: 65%; transform: rotate(11deg); }.map-roads { width: 130%; height: 9px; top: 25%; left: -15%; transform: rotate(14deg); }.map-pin { position: absolute; z-index: 2; left: 43%; top: 37%; width: 32px; height: 32px; display: grid; place-items: center; border: 4px solid #fff; border-radius: 50%; color: #fff; background: #1497e4; box-shadow: 0 4px 10px rgba(12,93,141,.2); }.map-card strong, .map-card small { position: absolute; z-index: 2; left: 54%; padding: 4px 7px; background: rgba(255,255,255,.9); }.map-card strong { top: 39%; font-size: 8px; }.map-card small { top: 51%; color: #66758b; font-size: 6px; }

.final-cta { min-height: 250px; margin-top: 28px; color: #fff; background-image: linear-gradient(90deg, rgba(0,137,205,.95) 0%, rgba(0,154,220,.82) 44%, rgba(0,142,208,.05) 68%), url("assets/footer-swimmer.webp"); background-size: cover; background-position: center; }
.final-cta-inner { min-height: 250px; display: flex; align-items: center; }.final-cta span { font-size: 9px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; opacity: .85; }.final-cta h2 { margin: 5px 0 7px; font-size: 28px; line-height: 1.15; }.final-cta p { margin: 0 0 15px; font-size: 9px; line-height: 1.5; }.final-cta .button { min-width: 235px; height: 42px; font-size: 9px; }
.site-footer { min-height: 68px; color: rgba(255,255,255,.8); background: #087fc5; }.site-footer .shell { min-height: 68px; display: flex; align-items: center; gap: 24px; }.footer-brand { width: 142px; padding: 5px 9px; display: block; border-radius: 9px; background: rgba(255,255,255,.96); box-sizing: border-box; }.footer-brand img { width: 124px; height: auto; display: block; object-fit: contain; filter: none; }.site-footer p, .site-footer a { font-size: 7px; }.site-footer nav { margin: auto; display: flex; gap: 25px; }

@media (max-width: 1040px) {
  .main-nav { gap: 22px; }
  .header-actions .phone { display: none; }
  .hero-copy { width: 66%; }
  .hero-photo { left: 40%; }
  .hero-features li { min-width: 145px; }
  .trust-item { padding-inline: 13px; }
  .benefit-grid { grid-template-columns: repeat(3, 1fr); }
  .benefit-card { min-height: 150px; }
  .program-panel { grid-template-columns: 46% 1fr; gap: 24px; }
  .booking { grid-template-columns: 25% 1fr; padding-inline: 19px; }
  .booking-intro h2 { font-size: 18px; }
  .lesson-flow { gap: 12px; }
  .lesson-step { padding-right: 100px; }
  .lesson-step img, .step-finish { width: 82px; }
  .facility-showcase { grid-template-columns: 54% 1fr; }
  .facility-side-photos { display: none; }
  .comfort-visual { height: 125px; }
  .video-card { height: 200px; }
  .price-card { min-height: 205px; }
  .contact-hub { grid-template-columns: 1.35fr 1fr; }.map-card { grid-column: span 2; min-height: 160px; }
}

@media (max-width: 760px) {
  .shell { width: min(100% - 32px, var(--shell)); }
  .site-header { height: 66px; }
  .brand { width: 146px; margin-right: auto; }
  .brand > img { width: 138px; }
  .brand-word { font-size: 24px; }
  .brand-subtitle { font-size: 8px; }
  .menu-toggle { display: block; order: 3; margin-left: 8px; }
  .header-actions { order: 2; }
  .header-actions .button { min-width: 104px; height: 38px; }
  .main-nav { position: absolute; top: 66px; left: 0; right: 0; display: none; padding: 10px 24px 20px; flex-direction: column; align-items: stretch; gap: 0; background: #fff; border-bottom: 1px solid var(--line); box-shadow: 0 15px 25px rgba(20,38,83,.1); }
  .main-nav.is-open { display: flex; }
  .main-nav a { padding: 12px 0; }
  .hero { min-height: 700px; background: #f4fbff; }
  .hero-inner { min-height: 700px; align-items: flex-start; }
  .hero-photo { inset: auto 0 0; height: 48%; background-image: linear-gradient(180deg, #f4fbff 0%, rgba(244,251,255,0) 32%), url("assets/hero-swimming.webp"); background-position: 58% center; }
  .hero-copy { width: 100%; padding: 44px 0 0; text-align: center; }
  .eyebrow { font-size: 9px; }
  h1 { font-size: clamp(29px, 8vw, 38px); letter-spacing: -1px; }
  h1 br { display: none; }
  .hero-lead { margin-top: 14px; font-size: 15px; }
  .hero-cta { justify-content: center; }
  .hero-features { justify-content: center; }
  .hero-features li { min-width: 0; flex: 1; padding: 9px; justify-content: center; }
  .hero-features li span:last-child { display: none; }
  .trust-strip { grid-template-columns: repeat(2, 1fr); padding: 12px; }
  .trust-item { padding: 12px; border-right: 0; border-bottom: 1px solid #e2ebf2; }
  .trust-item:nth-last-child(-n+2) { border-bottom: 0; }
  .section-heading { margin-top: 28px; }
  .section-heading h2 { font-size: 21px; }
  .benefit-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .program-tabs { gap: 4px; overflow-x: auto; }
  .program-tab { min-width: 105px; }
  .program-panel { grid-template-columns: 1fr; gap: 20px; }
  .program-image-wrap { height: min(58vw, 300px); }
  .program-copy { padding: 0 8px 10px; }
  .booking { grid-template-columns: 1fr; gap: 14px; padding: 20px; }
  .booking-intro { text-align: center; }
  .booking-intro h2 br, .booking-intro p br { display: none; }
  .booking-form { padding-inline: 10px; }
  .lesson-flow { grid-template-columns: 1fr; }
  .lesson-flow::before { display: none; }
  .lesson-step { min-height: 132px; padding-right: 132px; }
  .lesson-step img, .step-finish { width: 108px; height: 106px; }
  .facility-heading { align-items: flex-start; }
  .facility-showcase { grid-template-columns: 1fr; }
  .facility-main-photo { height: min(58vw, 320px); min-height: 0; }
  .facility-facts { display: grid; grid-template-columns: 1fr 1.5fr; gap: 10px; }
  .facility-facts h3 { grid-row: span 2; }
  .facility-facts ul { grid-template-columns: repeat(2, 1fr); }
  .facts-button { grid-column: 2; }
  .comfort-grid { grid-template-columns: repeat(2, 1fr); }
  .video-card { height: 30vw; min-height: 170px; }
  .pricing-grid { grid-template-columns: repeat(2, 1fr); }
  .trainer-grid { grid-template-columns: repeat(2, 1fr); }
  .trainer-card > img { height: 190px; }
  .review-grid { grid-template-columns: 1fr; }.review-grid > article { min-height: 130px; }.review-grid article p { min-height: auto; }
  .contact-hub { grid-template-columns: 1fr 1fr; }.app-card { grid-column: span 2; }.map-card { grid-column: span 2; }
  .site-footer nav { display: none; }
}

@media (max-width: 520px) {
  .header-actions .button { display: none; }
  .hero { min-height: 720px; }
  .hero-inner { min-height: 720px; }
  .hero-copy { padding-top: 32px; }
  .hero-cta { flex-direction: column; gap: 10px; }
  .button-primary, .video-button { width: 100%; }
  .hero-features { margin-top: 16px; }
  .trust-section { width: calc(100% - 24px); }
  .trust-item { gap: 6px; padding: 10px 6px; }
  .line-icon { width: 30px; height: 30px; flex-basis: 30px; }
  .line-icon img { width: 29px; height: 29px; }
  .trust-item strong { font-size: 14px; }
  .trust-item small { font-size: 8px; }
  .benefit-card { min-height: 145px; padding-inline: 9px; }
  .program-tabs { width: 100%; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; padding-bottom: 4px; overflow: visible; }
  .program-tab { min-width: 0; padding-inline: 3px; white-space: nowrap; }
  .booking { width: calc(100% - 24px); padding-inline: 12px; }
  .booking-options { grid-template-columns: repeat(2, 1fr); }
  .booking-option { min-height: 92px; border-bottom: 1px solid #e2ebf2; }
  .booking-option:nth-child(2) { border-right: 0; }
  .booking-option:nth-child(2)::after { display: none; }
  .booking-option:nth-last-child(-n+2) { border-bottom: 0; }
  .facilities { width: calc(100% - 24px); padding-inline: 12px; }
  .facility-heading h2 { font-size: 18px; }
  .gallery-controls { display: none; }
  .facility-main-photo { height: 240px; }
  .facility-facts { grid-template-columns: 1fr; }
  .facility-facts h3 { grid-row: auto; }
  .facts-button { grid-column: auto; }
  .comfort-grid { gap: 9px; }
  .comfort-visual { height: 110px; }
  .video-grid { grid-template-columns: 1fr; gap: 10px; }
  .video-card { height: 205px; }
  .pricing-grid { gap: 9px; }
  .price-card { min-height: 205px; padding-inline: 7px; }
  .price-card h3 { font-size: 18px; }
  .trainer-grid { grid-template-columns: 1fr; }.trainer-card > img { height: 240px; }.trainer-info { min-height: 205px; }.trainer-info h3 { font-size: 16px; }.trainer-role,.trainer-experience { font-size: 10px; }.trainer-info ul { font-size: 9px; }
  .reviews-heading { align-items: center; }.rating-block strong { font-size: 26px; }
  .faq-grid { grid-template-columns: 1fr; }
  .contact-hub { grid-template-columns: 1fr; }.app-card, .map-card { grid-column: auto; }.app-card { padding-right: 12px; }
  .final-cta { min-height: 300px; background-image: linear-gradient(180deg, rgba(0,143,209,.97) 0%, rgba(0,147,212,.88) 49%, rgba(0,143,209,.05) 78%), url("assets/footer-swimmer.webp"); background-position: 60% center; }.final-cta-inner { min-height: 300px; align-items: flex-start; padding-top: 35px; text-align: center; }.final-cta h2 { font-size: 24px; }.final-cta .button { width: 100%; }
  .site-footer .shell { justify-content: space-between; }.site-footer .shell > a:last-child { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; }
}