:root{
  --paper:#eef7fb; --surface:#ffffff; --surface-2:#e4f2f8;
  --ink:#0c2233; --ink-soft:#465f70; --muted:#6b8496;
  --pool:#0aa6d8; --pool-deep:#0679a8; --pool-wash:#d7edf6;
  --sun:#ffc02e; --sun-deep:#eda600; --splash:#ff5a3c;
  --border:rgba(12,34,51,.12); --shadow:rgba(9,64,92,.16);
  --display:"Baloo 2",ui-rounded,"Segoe UI",system-ui,sans-serif;
  --body:"Nunito Sans",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --maxw:1200px; --radius:20px;
}
@media (prefers-color-scheme:dark){:root{
  --paper:#06161f; --surface:#0d2432; --surface-2:#123243;
  --ink:#eaf6fb; --ink-soft:#a9c5d4; --muted:#7f9dac;
  --pool:#2cc0ea; --pool-deep:#0aa6d8; --pool-wash:#0e2c3b;
  --sun:#ffcb47; --sun-deep:#e9ad2a; --splash:#ff6d52;
  --border:rgba(255,255,255,.14); --shadow:rgba(0,0,0,.5);
}}
:root[data-theme="light"]{
  --paper:#eef7fb; --surface:#ffffff; --surface-2:#e4f2f8; --ink:#0c2233; --ink-soft:#465f70; --muted:#6b8496;
  --pool:#0aa6d8; --pool-deep:#0679a8; --pool-wash:#d7edf6; --sun:#ffc02e; --sun-deep:#eda600; --splash:#ff5a3c;
  --border:rgba(12,34,51,.12); --shadow:rgba(9,64,92,.16);
}
:root[data-theme="dark"]{
  --paper:#06161f; --surface:#0d2432; --surface-2:#123243; --ink:#eaf6fb; --ink-soft:#a9c5d4; --muted:#7f9dac;
  --pool:#2cc0ea; --pool-deep:#0aa6d8; --pool-wash:#0e2c3b; --sun:#ffcb47; --sun-deep:#e9ad2a; --splash:#ff6d52;
  --border:rgba(255,255,255,.14); --shadow:rgba(0,0,0,.5);
}
@font-face{font-family:"Baloo 2";font-style:normal;font-weight:800;font-display:swap;src:url("baloo2.woff2") format("woff2");}
@font-face{font-family:"Nunito Sans";font-style:normal;font-weight:200 900;font-display:swap;src:url("nunitosans.woff2") format("woff2");}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;font-family:var(--body);color:var(--ink);background:var(--paper);line-height:1.6;font-size:17px;-webkit-font-smoothing:antialiased;overflow-x:hidden;}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px;}
h1,h2,h3{font-family:var(--display);font-weight:800;line-height:1.04;margin:0;text-wrap:balance;letter-spacing:-.01em;}
.eyebrow{font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:.14em;font-size:.78rem;color:var(--pool-deep);}
:root[data-theme="dark"] .eyebrow{color:var(--pool);}
.btn{display:inline-flex;align-items:center;gap:.55em;font-family:var(--display);font-weight:800;font-size:1.02rem;padding:.82em 1.35em;border-radius:999px;border:2px solid transparent;cursor:pointer;transition:transform .12s,box-shadow .12s,background .15s;white-space:nowrap;}
.btn:focus-visible{outline:3px solid var(--pool);outline-offset:3px;}
.btn-sun{background:var(--sun);color:#3a2600;box-shadow:0 8px 20px -6px var(--sun-deep);}
.btn-sun:hover{transform:translateY(-2px);box-shadow:0 12px 26px -6px var(--sun-deep);}
.btn-pool{background:var(--pool);color:#fff;box-shadow:0 8px 20px -8px var(--pool-deep);}
.btn-pool:hover{transform:translateY(-2px);}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--border);}
.btn-ghost:hover{border-color:var(--pool);color:var(--pool-deep);}
:root[data-theme="dark"] .btn-ghost:hover{color:var(--pool);}
/* top bar + header */
.topbar{background:var(--ink);color:#dbeaf2;font-size:.86rem;}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:8px 22px;flex-wrap:wrap;}
.topbar strong{color:#fff;}
.topbar a{color:var(--sun);font-weight:700;}
.topbar .tb-right{display:flex;gap:18px;align-items:center;}
.hdr{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--surface) 90%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--border);}
.hdr .wrap{display:flex;align-items:center;gap:18px;padding:12px 22px;}
.brand{display:flex;align-items:center;gap:12px;font-family:var(--display);font-weight:800;font-size:1.12rem;color:var(--ink);}
.brand img{height:44px;width:auto;border-radius:8px;}
.nav{display:flex;gap:22px;margin-left:auto;align-items:center;}
.nav>a,.nav .drop>span{font-weight:700;font-size:.97rem;color:var(--ink-soft);padding:6px 2px;border-bottom:2px solid transparent;transition:color .15s,border-color .15s;cursor:pointer;display:inline-block;}
.nav>a:hover,.nav a.active,.nav .drop:hover>span{color:var(--pool-deep);border-color:var(--pool);}
:root[data-theme="dark"] .nav>a:hover,:root[data-theme="dark"] .nav .drop:hover>span{color:var(--pool);}
.nav .drop{position:relative;}
.nav .menu{position:absolute;top:100%;left:50%;transform:translateX(-50%);background:var(--surface);border:1px solid var(--border);border-radius:14px;box-shadow:0 24px 44px -18px var(--shadow);padding:8px;min-width:250px;display:none;flex-direction:column;gap:2px;z-index:60;}
.nav .drop:hover .menu{display:flex;}
.nav .menu a{padding:9px 12px;border-radius:9px;color:var(--ink-soft);font-weight:700;font-size:.92rem;}
.nav .menu a:hover{background:var(--surface-2);color:var(--pool-deep);}
.theme-btn{background:var(--surface-2);border:1px solid var(--border);border-radius:999px;width:40px;height:40px;cursor:pointer;color:var(--ink);font-size:1.1rem;display:inline-flex;align-items:center;justify-content:center;}
.hamburger{display:none;background:var(--surface-2);border:1px solid var(--border);border-radius:12px;width:46px;height:46px;cursor:pointer;color:var(--ink);font-size:1.4rem;align-items:center;justify-content:center;}
.mnav{display:none;flex-direction:column;gap:2px;padding:10px 22px 20px;background:var(--surface);border-bottom:1px solid var(--border);max-height:70vh;overflow:auto;}
.mnav a{padding:11px 6px;font-weight:700;border-bottom:1px solid var(--border);color:var(--ink);}
.mnav.open{display:flex;}
/* hero */
.hero{position:relative;background:radial-gradient(120% 90% at 85% 10%,var(--pool-wash),transparent 60%),var(--paper);padding:56px 0 40px;overflow:hidden;}
.hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:46px;align-items:center;}
.hero-badges{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:18px;}
.chip{display:inline-flex;align-items:center;gap:.4em;background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:.42em .85em;font-weight:800;font-size:.8rem;color:var(--ink-soft);box-shadow:0 4px 12px -8px var(--shadow);}
.chip b{color:var(--pool-deep);}
:root[data-theme="dark"] .chip b{color:var(--pool);}
.hero h1{font-size:clamp(2.5rem,5.4vw,4.1rem);}
.hero h1 .pop{color:var(--splash);display:inline-block;transform:rotate(-2deg);}
.hero p.lead{font-size:1.2rem;color:var(--ink-soft);margin:20px 0 28px;max-width:44ch;}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;align-items:center;}
.hero-media{position:relative;}
.hero-media .shot{border-radius:26px;box-shadow:0 30px 60px -24px var(--shadow);border:5px solid var(--surface);aspect-ratio:5/4;object-fit:cover;width:100%;}
.hero-media .float{position:absolute;background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:12px 16px;box-shadow:0 16px 34px -18px var(--shadow);display:flex;align-items:center;gap:10px;font-weight:800;}
.hero-media .f-rating{top:-16px;left:-14px;color:var(--sun-deep);}
.hero-media .f-book{bottom:-16px;right:-10px;color:var(--pool-deep);}
:root[data-theme="dark"] .hero-media .f-book{color:var(--pool);}
.hero-media .float .big{font-family:var(--display);font-size:1.25rem;}
.wave{display:block;width:100%;height:56px;color:var(--surface);}
/* trust */
.trust{background:var(--surface);}
.trust .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding:34px 22px;text-align:center;}
.trust .t{display:flex;flex-direction:column;gap:4px;}
.trust .t .n{font-family:var(--display);font-size:2rem;color:var(--pool-deep);line-height:1.05;}
:root[data-theme="dark"] .trust .t .n{color:var(--pool);}
.trust .t .l{font-weight:700;color:var(--ink-soft);font-size:.95rem;}
/* sections */
.section{padding:64px 0;}
.section.alt{background:var(--surface);}
.sec-head{text-align:center;max-width:660px;margin:0 auto 40px;}
.sec-head h2{font-size:clamp(1.9rem,3.6vw,2.8rem);margin-top:10px;}
.sec-head p{color:var(--ink-soft);font-size:1.1rem;margin:14px 0 0;}
/* home category grid */
.rgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
.rcard{position:relative;border-radius:18px;overflow:hidden;aspect-ratio:4/3;box-shadow:0 12px 30px -22px var(--shadow);display:block;color:#fff;transition:transform .16s,box-shadow .16s;}
.rcard:hover{transform:translateY(-5px);box-shadow:0 22px 42px -22px var(--shadow);}
.rcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .3s;}
.rcard:hover img{transform:scale(1.06);}
.rcard .rl{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;justify-content:flex-end;padding:16px;background:linear-gradient(transparent 42%,rgba(6,22,31,.84));}
.rcard .rl h3{font-size:1.14rem;}
.rcard .rl span{font-weight:700;font-size:.82rem;opacity:.92;}
/* homepage tabs */
.tabs{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-bottom:30px;}
.tabs .tab{font-family:var(--display);font-weight:800;font-size:.95rem;padding:.6em 1.15em;border-radius:999px;border:2px solid var(--border);background:var(--surface);color:var(--ink-soft);cursor:pointer;transition:background .15s,border-color .15s,color .15s,transform .12s;}
.tabs .tab:hover{border-color:var(--pool);color:var(--pool-deep);transform:translateY(-1px);}
.tabs .tab.on{background:var(--pool);border-color:var(--pool);color:#fff;}
:root[data-theme="dark"] .tabs .tab:hover{color:var(--pool);}
.tabpanel{display:none;}
.tabpanel.on{display:block;animation:tabin .25s ease;}
@keyframes tabin{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}
.tab-more{text-align:center;margin-top:30px;}
@media (prefers-reduced-motion:reduce){.tabpanel.on{animation:none;}}
@media (max-width:600px){.tabs{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;padding-bottom:6px;-webkit-overflow-scrolling:touch;}.tabs .tab{white-space:nowrap;flex:0 0 auto;}}
/* steps */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
.step{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:26px 22px;}
.step .num{font-family:var(--display);font-weight:800;font-size:1rem;width:40px;height:40px;border-radius:50%;background:var(--pool);color:#fff;display:flex;align-items:center;justify-content:center;margin-bottom:14px;}
.step:nth-child(2) .num{background:var(--sun);color:#3a2600;}
.step:nth-child(3) .num{background:var(--splash);}
.step:nth-child(4) .num{background:var(--pool-deep);}
.step h3{font-size:1.18rem;margin-bottom:6px;}
.step p{color:var(--ink-soft);margin:0;font-size:.97rem;}
/* category page */
.cathero{background:radial-gradient(120% 120% at 85% 0%,var(--pool-wash),transparent 60%),var(--paper);padding:32px 0 40px;}
.crumb{font-weight:700;font-size:.86rem;color:var(--muted);margin-bottom:14px;}
.crumb a:hover{color:var(--pool-deep);}
.cathero h1{font-size:clamp(2.1rem,4.6vw,3.2rem);}
.cathero .lead{font-size:1.15rem;color:var(--ink-soft);max-width:64ch;margin:14px 0 20px;}
.cathero .cta-row{display:flex;gap:12px;flex-wrap:wrap;align-items:center;}
.cathero .note{font-weight:700;color:var(--muted);font-size:.92rem;}
.values{background:var(--surface);border-top:1px solid var(--border);border-bottom:1px solid var(--border);}
.values .wrap{display:flex;flex-wrap:wrap;gap:10px 26px;justify-content:center;padding:16px 22px;}
.values .v{display:inline-flex;align-items:center;gap:.5em;font-weight:800;font-size:.93rem;color:var(--ink-soft);}
.values .v .ic{width:26px;height:26px;border-radius:8px;background:var(--pool-wash);color:var(--pool-deep);display:inline-flex;align-items:center;justify-content:center;font-size:.85rem;}
:root[data-theme="dark"] .values .v .ic{color:var(--pool);}
/* product grid */
.pgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
.pcard{background:var(--surface);border:1px solid var(--border);border-radius:18px;overflow:hidden;box-shadow:0 12px 30px -24px var(--shadow);transition:transform .16s,box-shadow .16s;display:flex;flex-direction:column;}
.pcard:hover{transform:translateY(-5px);box-shadow:0 22px 40px -22px var(--shadow);}
.pcard .thumb{display:block;aspect-ratio:5/4;overflow:hidden;background:var(--surface-2);}
.pcard a.pname{color:inherit;text-decoration:none;}
.pcard a.pname:hover h3{color:var(--pool-deep);}
:root[data-theme="dark"] .pcard a.pname:hover h3{color:var(--pool);}
.pcard .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .3s;}
.pcard:hover .thumb img{transform:scale(1.06);}
.pcard .body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:6px;flex:1;}
.pcard .body h3{font-size:1.06rem;line-height:1.15;}
.pcard .price{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-top:2px;}
.pcard .price .reg{color:var(--muted);text-decoration:line-through;font-weight:700;font-size:.92rem;font-variant-numeric:tabular-nums;}
.pcard .price .sale{font-family:var(--display);font-weight:800;font-size:1.3rem;color:var(--splash);line-height:1;font-variant-numeric:tabular-nums;}
.pcard .price .save{font-weight:800;font-size:.7rem;text-transform:uppercase;letter-spacing:.03em;color:#0b7a4f;background:rgba(46,204,113,.16);padding:.2em .5em;border-radius:999px;}
:root[data-theme="dark"] .pcard .price .save{color:#86e8b4;background:rgba(46,204,113,.16);}
.pcard .pdesc{margin:0;color:var(--ink-soft);font-size:.9rem;line-height:1.35;}
.pcard .viewprice{font-family:var(--display);font-weight:800;font-size:.94rem;color:var(--pool-deep);display:inline-flex;align-items:center;gap:.25em;margin-top:2px;transition:color .15s,gap .15s;}
.pcard .viewprice:hover{color:var(--splash);gap:.5em;}
:root[data-theme="dark"] .pcard .viewprice{color:var(--pool);}
:root[data-theme="dark"] .pcard .viewprice:hover{color:var(--splash);}
.pcard .book{margin-top:auto;font-family:var(--display);font-weight:800;font-size:.9rem;color:#fff;background:var(--pool);border-radius:10px;padding:.55em .8em;text-align:center;transition:background .15s,transform .12s;}
.pcard .book:hover{background:var(--pool-deep);transform:translateY(-1px);}
.gridnote{text-align:center;color:var(--muted);font-weight:700;margin-top:26px;}
/* service area (hyperlocal) */
.townwrap{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;max-width:820px;margin:0 auto;}
.town{background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:.5em 1.05em;font-family:var(--display);font-weight:800;font-size:.92rem;color:var(--ink-soft);box-shadow:0 4px 12px -9px var(--shadow);}
.areanote{text-align:center;color:var(--muted);font-weight:700;margin:26px auto 0;max-width:52ch;}
.areanote a{color:var(--pool-deep);}
:root[data-theme="dark"] .areanote a{color:var(--pool);}
/* FAQ */
.faq{max-width:780px;margin:0 auto;display:flex;flex-direction:column;gap:12px;}
.faq-q{background:var(--surface);border:1px solid var(--border);border-radius:14px;overflow:hidden;box-shadow:0 6px 18px -14px var(--shadow);}
.faq-q>summary{list-style:none;cursor:pointer;padding:18px 22px;font-family:var(--display);font-weight:800;font-size:1.05rem;color:var(--ink);display:flex;justify-content:space-between;align-items:center;gap:12px;}
.faq-q>summary::-webkit-details-marker{display:none;}
.faq-q>summary::after{content:"+";font-size:1.4rem;color:var(--pool-deep);transition:transform .2s;flex:0 0 auto;}
:root[data-theme="dark"] .faq-q>summary::after{color:var(--pool);}
.faq-q[open]>summary::after{transform:rotate(45deg);}
.faq-q>summary:hover{color:var(--pool-deep);}
:root[data-theme="dark"] .faq-q>summary:hover{color:var(--pool);}
.faq-a{padding:0 22px 20px;color:var(--ink-soft);line-height:1.6;}
/* contact band */
.band{background:linear-gradient(135deg,var(--pool),var(--pool-deep));color:#fff;border-radius:28px;padding:48px;display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;box-shadow:0 30px 60px -30px var(--pool-deep);}
.band h2{font-size:clamp(1.9rem,3.4vw,2.6rem);color:#fff;}
.band p{margin:14px 0 0;font-size:1.1rem;color:#e6f7ff;max-width:40ch;}
.callcard{background:var(--surface);color:var(--ink);border-radius:20px;padding:32px 26px;display:flex;flex-direction:column;gap:14px;text-align:center;box-shadow:0 20px 40px -20px rgba(0,0,0,.35);}
.callcard .cc-label{font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:.12em;font-size:.78rem;color:var(--muted);}
.callcard .cc-num{font-family:var(--display);font-weight:800;font-size:clamp(2rem,4.4vw,2.8rem);color:var(--pool-deep);line-height:1;}
:root[data-theme="dark"] .callcard .cc-num{color:var(--pool);}
.callcard .cc-meta{display:flex;flex-direction:column;gap:7px;color:var(--ink-soft);font-weight:700;font-size:.95rem;align-items:center;}
.callcard .cc-meta b{color:var(--pool-deep);}
:root[data-theme="dark"] .callcard .cc-meta b{color:var(--pool);}
.callcard .btn{width:100%;justify-content:center;}
.callcard .cc-hours{font-size:.82rem;color:var(--muted);}
/* footer */
.foot{background:#0b1f2e;color:#c3d7e2;padding:56px 0 30px;font-size:.95rem;}
.foot .cols{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:34px;}
.foot h4{font-family:var(--display);color:#fff;font-size:1.05rem;margin:0 0 14px;}
.foot a{color:#c3d7e2;display:block;padding:4px 0;}
.foot a:hover{color:var(--sun);}
.foot .brand-f{display:flex;align-items:center;gap:12px;margin-bottom:14px;}
.foot .brand-f img{height:52px;border-radius:8px;}
.foot .areas{line-height:1.9;color:#9db8c7;}
.foot .legal{border-top:1px solid rgba(255,255,255,.12);margin-top:38px;padding-top:20px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;color:#8fa9b8;font-size:.85rem;}
/* mobile sticky call */
.mobile-call{display:none;position:fixed;bottom:0;left:0;right:0;z-index:60;background:var(--surface);border-top:1px solid var(--border);padding:10px 14px;gap:10px;box-shadow:0 -8px 24px -12px var(--shadow);}
.mobile-call .btn{flex:1;justify-content:center;}
@media (max-width:960px){
  .hero .wrap{grid-template-columns:1fr;gap:30px;}
  .hero-media{order:-1;}
  .trust .wrap{grid-template-columns:repeat(2,1fr);gap:26px;}
  .rgrid,.pgrid{grid-template-columns:repeat(3,1fr);}
  .steps{grid-template-columns:repeat(2,1fr);}
  .band{grid-template-columns:1fr;padding:34px;}
  .foot .cols{grid-template-columns:1fr 1fr;}
  .nav{display:none;}
  .hdr .btn.callbtn{display:none;}
  .hamburger{display:inline-flex;}
}
@media (max-width:600px){
  .rgrid,.pgrid{grid-template-columns:repeat(2,1fr);gap:14px;}
  .foot .cols{grid-template-columns:1fr;}
  .band{padding:24px;}
  .mobile-call{display:flex;}
  body{padding-bottom:70px;}
  .topbar .tb-right span.hide{display:none;}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto;}}