/* =====================================================================
   terrace-pools-jacuzzis.css  (full replacement)
   Scoped to body.service-pool-page so no other page is affected.
   ===================================================================== */
body:not(.home).service-page{padding-top:0}
body.service-pool-page{
  --pe:cubic-bezier(.2,.7,.2,1);
  --po:#8b9d3b;--pod:#5f6f26;--pol:#c9d68a;--pdk:#0a1f17;--pmu:#68746b;--aqua:#9fe0d6;
  overflow-x:hidden;
}

/* ---------------- Hero (header overlays the image, as before) ---------------- */
body.service-pool-page .service-detail-hero{position:relative;overflow:hidden;min-height:clamp(620px,88vh,900px)}
body.service-pool-page .service-detail-hero > .service-header{position:absolute!important;top:0;left:0;right:0;width:100%;z-index:100;background:transparent!important;background-color:transparent!important;background-image:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;border:0!important;box-shadow:none!important}
body.service-pool-page .service-detail-hero .service-header .logo,
body.service-pool-page .service-detail-hero .service-header .nav > a{color:#fff}
body.service-pool-page .service-detail-video{animation:poolKen 26s ease-in-out infinite alternate}
@keyframes poolKen{to{transform:scale(1.09)}}

/* water effect layer: sits above the photo, below the dark shade and the text */
.pool-fx{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.pool-fx::after{content:"";position:absolute;inset:-25%;mix-blend-mode:screen;
  background:radial-gradient(38% 28% at 28% 42%,rgba(159,224,214,.28),transparent 70%),radial-gradient(34% 26% at 72% 62%,rgba(159,224,214,.22),transparent 70%),radial-gradient(26% 20% at 52% 28%,rgba(255,255,255,.14),transparent 70%);
  animation:poolCaustic 15s ease-in-out infinite alternate}
@keyframes poolCaustic{from{transform:translate(-3%,-2%) scale(1)}to{transform:translate(4%,3%) scale(1.12)}}
.pool-ring{position:absolute;right:16%;bottom:24%;width:60px;height:60px;margin:-30px;border:1.5px solid rgba(255,255,255,.7);border-radius:50%;opacity:0;animation:poolRipple 7.5s ease-out infinite}
.pool-ring.r2{animation-delay:2.5s}.pool-ring.r3{animation-delay:5s}
@keyframes poolRipple{0%{transform:scale(.2);opacity:0}12%{opacity:.7}100%{transform:scale(8);opacity:0}}
.pool-wave{position:absolute;left:0;bottom:0;width:200%;height:clamp(60px,9vw,130px);fill:rgba(255,255,255,.2);animation:poolWave 20s linear infinite}
.pool-wave.w2{bottom:6px;fill:rgba(255,255,255,.12);animation-duration:30s;animation-direction:reverse}
@keyframes poolWave{to{transform:translateX(-50%)}}

/* hero text enters one line at a time (fill "backwards" keeps normal hover styles afterwards) */
body.service-pool-page .service-detail-copy>*{animation:poolIn 1s var(--pe) backwards}
body.service-pool-page .service-detail-copy>*:nth-child(1){animation-delay:.15s}
body.service-pool-page .service-detail-copy>*:nth-child(2){animation-delay:.3s}
body.service-pool-page .service-detail-copy>*:nth-child(3){animation-delay:.45s}
body.service-pool-page .service-detail-copy>*:nth-child(4){animation-delay:.6s}
body.service-pool-page .service-detail-copy>*:nth-child(5){animation-delay:.75s}
@keyframes poolIn{from{opacity:0;transform:translateY(28px)}}

/* ---------------- Shared heading + kicker styles for the new sections ---------------- */
.pool-coord h2,.pool-showcase h2,.pool-faq h2{font-size:clamp(38px,5.2vw,76px);line-height:.98;letter-spacing:-.06em;margin:14px 0 0}
.pool-showcase h2 em,.pool-faq h2 em{color:var(--po);font-style:normal}
.pool-coord h2{color:#fff}.pool-coord h2 em{color:var(--pol);font-style:normal}
.pool-coord .service-kicker{color:var(--aqua)}

/* ---------------- What goes into it (dark, watery) ---------------- */
.pool-coord{position:relative;isolation:isolate;overflow:hidden;padding:clamp(60px,8vw,112px) 0;color:#fff;background:linear-gradient(160deg,#0a1f17 0%,#0c2f2c 58%,#0a1f17 100%)}
.pc-bg i{position:absolute;z-index:-1;border-radius:50%;filter:blur(90px);pointer-events:none;animation:poolDrift 26s ease-in-out infinite alternate}
.pc-bg i:nth-child(1){width:440px;height:440px;background:#2c8f8a;opacity:.38;top:-130px;right:-90px}
.pc-bg i:nth-child(2){width:380px;height:380px;background:var(--po);opacity:.26;bottom:-150px;left:-110px;animation-duration:32s}
@keyframes poolDrift{to{transform:translate(70px,46px) scale(1.16)}}
.pc-head{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:20px 56px;align-items:end;margin-bottom:clamp(30px,4vw,50px)}
.pc-head>p{margin:0;max-width:460px;justify-self:end;color:rgba(255,255,255,.74);font-size:17px;line-height:1.7}
.pc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.pc-card{position:relative;padding:26px 24px 24px;border-radius:22px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);overflow:hidden;translate:0 0;transition:translate .5s var(--pe),background .5s var(--pe),border-color .5s var(--pe),box-shadow .5s var(--pe)}
.pc-card::before{content:"";position:absolute;left:50%;top:-40%;width:120%;aspect-ratio:1;translate:-50% 0;border-radius:50%;background:radial-gradient(circle,rgba(159,224,214,.22),transparent 65%);opacity:0;transition:opacity .6s var(--pe)}
.pc-card:hover{translate:0 -8px;background:rgba(255,255,255,.1);border-color:rgba(159,224,214,.5);box-shadow:0 30px 50px -28px rgba(0,0,0,.7)}
.pc-card:hover::before{opacity:1}
.pc-num{position:absolute;top:20px;right:22px;font-size:12px;font-weight:800;letter-spacing:.14em;color:rgba(255,255,255,.35)}
.pc-ico{position:relative;display:grid;place-items:center;width:52px;height:52px;margin-bottom:18px;border-radius:16px;background:rgba(159,224,214,.14);color:var(--aqua);transition:background .5s var(--pe),color .5s var(--pe),transform .6s var(--pe)}
.pc-ico svg{width:24px;height:24px}
.pc-card:hover .pc-ico{background:var(--aqua);color:var(--pdk);transform:rotate(-8deg) scale(1.08)}
.pc-card h3{position:relative;margin:0 0 8px;font-size:20px;line-height:1.25;color:#fff}
.pc-card p{position:relative;margin:0;color:rgba(255,255,255,.72);font-size:15px;line-height:1.65}

/* ---------------- Marquee band ---------------- */
.pool-marquee{overflow:hidden;white-space:nowrap;padding:16px 0;background:var(--po);color:#fff}
.pm-track{display:flex;width:max-content;animation:poolMarq 42s linear infinite}
.pm-track span{flex:none;font-size:clamp(18px,2.4vw,30px);font-weight:800;letter-spacing:-.02em}
.pool-marquee:hover .pm-track{animation-play-state:paused}
@keyframes poolMarq{to{transform:translateX(-50%)}}

/* ---------------- Gallery (masonry, nothing is cropped) ---------------- */
.pool-showcase{padding:clamp(56px,7vw,100px) 0;background:#f7f0e3;overflow:hidden}
.ps-head{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:20px 56px;align-items:end;margin-bottom:clamp(26px,3.5vw,42px)}
.ps-head>p{margin:0;max-width:460px;justify-self:end;color:var(--pmu);font-size:17px;line-height:1.7}
.ps-grid{columns:4 240px;column-gap:14px}
.pg{position:relative;display:block;break-inside:avoid;margin:0 0 14px;border-radius:20px;overflow:hidden;background:#d8d2c5;min-height:150px;translate:0 0;transition:translate .5s var(--pe),box-shadow .5s var(--pe)}
.pg:hover{translate:0 -6px;box-shadow:0 26px 44px -22px rgba(10,31,23,.5)}
.pg-btn{position:relative;display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in;overflow:hidden;border-radius:inherit;font:inherit}
.pg img{display:block;width:100%;height:auto;transition:scale 1s var(--pe),filter .6s var(--pe)}
.pg:hover img{scale:1.06;filter:saturate(1.12)}
.pg-btn::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(10,31,23,.6),transparent 55%);opacity:0;transition:opacity .5s var(--pe)}
.pg:hover .pg-btn::after{opacity:1}
.pg-n{position:absolute;z-index:2;top:14px;left:14px;width:34px;height:34px;display:grid;place-items:center;border-radius:50%;background:rgba(10,31,23,.62);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff;font-size:11px;font-weight:700;transition:background .4s var(--pe),transform .5s var(--pe)}
.pg:hover .pg-n{background:var(--po);transform:scale(1.12) rotate(-8deg)}
.pg-zoom{position:absolute;z-index:2;right:14px;bottom:14px;width:38px;height:38px;display:grid;place-items:center;border-radius:50%;background:#fff;color:var(--pdk);font-size:22px;font-weight:600;line-height:1;opacity:0;translate:0 10px;transition:opacity .45s var(--pe),translate .45s var(--pe)}
.pg:hover .pg-zoom,.pg-btn:focus-visible .pg-zoom{opacity:1;translate:0 0}
.pg-btn:focus-visible{outline:3px solid var(--po);outline-offset:-3px}
/* water ripple that starts where the cursor enters */
.pg-btn::before{content:"";position:absolute;z-index:3;left:var(--mx,50%);top:var(--my,50%);width:30px;height:30px;margin:-15px;border-radius:50%;border:2px solid rgba(255,255,255,.85);opacity:0;pointer-events:none}
.pg-btn.rip::before{animation:poolRip .95s var(--pe)}
@keyframes poolRip{0%{transform:scale(0);opacity:.9}100%{transform:scale(13);opacity:0}}

/* ---------------- FAQ ---------------- */
.pool-faq{padding:clamp(56px,7vw,100px) 0;background:#e5e9d2}
.pf-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,6vw,90px);align-items:start}
.pf-intro p:not(.service-kicker){margin:16px 0 24px;max-width:420px;color:var(--pmu);font-size:17px;line-height:1.7}
.pf-list{display:grid;gap:10px}
.pf-item{border-radius:20px;background:#f7f0e3;border:1px solid rgba(10,31,23,.08);transition:border-color .5s var(--pe),box-shadow .5s var(--pe)}
.pf-item:hover,.pf-item.open{border-color:rgba(139,157,59,.6)}
.pf-item.open{box-shadow:0 22px 40px -26px rgba(10,31,23,.4)}
.pf-q{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;padding:20px 22px;border:0;background:none;color:var(--pdk);font:inherit;font-size:17px;font-weight:700;line-height:1.35;text-align:left;cursor:pointer}
.pf-q:focus-visible{outline:3px solid var(--po);outline-offset:-3px;border-radius:20px}
.pf-q i{position:relative;flex:none;width:34px;height:34px;border-radius:50%;background:rgba(139,157,59,.18);transition:background .4s var(--pe),transform .5s var(--pe)}
.pf-q i::before,.pf-q i::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2px;margin:-1px 0 0 -6px;background:var(--pod);border-radius:2px;transition:transform .5s var(--pe),background .4s}
.pf-q i::after{transform:rotate(90deg)}
.pf-item.open .pf-q i{background:var(--po);transform:rotate(180deg)}
.pf-item.open .pf-q i::before,.pf-item.open .pf-q i::after{background:#fff}
.pf-item.open .pf-q i::after{transform:rotate(0)}
.pf-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s var(--pe)}
.pf-item.open .pf-a{grid-template-rows:1fr}
.pf-a>div{overflow:hidden}
.pf-a p{margin:0;padding:0 22px 22px;color:var(--pmu);font-size:16px;line-height:1.75;max-width:640px}

/* ---------------- Photo viewer ---------------- */
.pl{position:fixed;inset:0;z-index:300;display:grid;place-items:center;padding:24px;background:rgba(4,18,12,.93);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);opacity:0;transition:opacity .3s var(--pe)}
.pl[hidden]{display:none}
.pl.open{opacity:1}
.pl-fig{margin:0;max-width:min(1100px,100%);max-height:100%;display:grid;gap:12px;justify-items:center}
.pl-media img{display:block;max-width:100%;max-height:78vh;border-radius:18px;object-fit:contain;animation:plIn .5s var(--pe)}
@keyframes plIn{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
.pl-cap{color:#e8efe0;font-size:14px;text-align:center}
.pl-cap b{color:var(--pol);margin-right:8px}
.pl-btn{position:absolute;width:44px;height:44px;border:0;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;font-size:22px;cursor:pointer;transition:background .3s var(--pe),scale .3s var(--pe)}
.pl-btn:hover{background:var(--po);scale:1.08}
.pl-btn:focus-visible{outline:3px solid var(--pol);outline-offset:2px}
.pl-close{top:20px;right:20px}
.pl-prev{left:20px;top:50%;margin-top:-22px}
.pl-next{right:20px;top:50%;margin-top:-22px}

/* ---------------- Entrance animations (only with JS + motion allowed) ---------------- */
@media (prefers-reduced-motion:no-preference){
  .js .pr{opacity:0;transform:translateY(34px);transition:opacity .85s var(--pe) calc(var(--i,0)*90ms),transform .95s var(--pe) calc(var(--i,0)*90ms),translate .5s var(--pe),background .5s var(--pe),border-color .5s var(--pe),box-shadow .5s var(--pe)}
  .js .pr.in{opacity:1;transform:none}
  /* Keep the gallery visible even if a local-file browser blocks JS observers. */
  .js .pg{opacity:1;transform:none;clip-path:none}
}

/* ---------------- Responsive ---------------- */
@media(max-width:1000px){
  .ps-grid{columns:3 220px}
}
@media(max-width:900px){
  .pc-head,.ps-head,.pf-grid{grid-template-columns:1fr;align-items:start}
  .pc-head>p,.ps-head>p{justify-self:start}
  .pc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:620px){
  .pc-grid{grid-template-columns:1fr}
  .ps-grid{columns:2 150px;column-gap:10px}
  .pg{margin-bottom:10px;border-radius:16px}
  .pg-n{width:30px;height:30px;top:10px;left:10px;font-size:10px}
  .pf-q{font-size:16px;padding:18px}
  .pf-a p{padding:0 18px 18px;font-size:15px}
  .pool-ring{right:8%}
  .pl{padding:12px}
  .pl-prev,.pl-next{top:auto;bottom:18px;margin:0}
  .pl-prev{left:calc(50% - 54px)}
  .pl-next{right:calc(50% - 54px)}
  .pl-media img{max-height:68vh}
}

/* ---------------- Reduced motion: no movement at all ---------------- */
@media (prefers-reduced-motion:reduce){
  body.service-pool-page *,body.service-pool-page *::before,body.service-pool-page *::after{animation:none!important;transition:none!important}
  .pool-fx{display:none}
}