/* ===== Deep Blue hybrid theme =====
   Dark zones (hero, stat band, about, services) keep the deep-blue ocean gradient.
   Everything below (done-right, testimonials, owners, gallery, contact, FAQ, footer)
   renders the Walter and Co template's clean light look. Service cards stay white. */

body.ocean{
  background-color:#02060f;
  background-image:
    linear-gradient(90deg,
      rgba(2,6,15,1) 0%,
      rgba(2,6,15,0.82) 12%,
      rgba(2,6,15,0) 32%,
      rgba(2,6,15,0) 68%,
      rgba(2,6,15,0.82) 88%,
      rgba(2,6,15,1) 100%),
    linear-gradient(180deg,
      #2c5a96 0%,
      #21477e 7%,
      #18375f 16%,
      #112a4a 28%,
      #0c1f38 44%,
      #08182c 60%,
      #050f1e 76%,
      #030a16 89%,
      #02060f 100%);
  background-repeat:no-repeat, no-repeat;
  background-position:top center, top center;
  background-size:100% 100%, 100% 100%;
  background-attachment:scroll, scroll;
}

/* dark zones: transparent so the deep-blue gradient shows through (everything else keeps its template bg) */
.ocean .krk-hero,
.ocean section.stat-banner,
.ocean .about-band,
.ocean #services{ background-color:transparent !important; }

/* hero "Book your FREE quote" form: dark glass so it reads on the photo */
.ocean .hero-form-card{
  background-color:rgba(13,30,58,.62) !important;
  border-color:rgba(120,160,210,.22) !important;
}
/* inputs keep the template's light/white fill with dark text (no override needed) */

/* rays zone wraps the stat banner + about so the light spans both */
.rays-zone{ position:relative; }
.rays-zone > .stat-banner,
.rays-zone > .about-band{ position:relative; z-index:1; }

/* sun rays: start at the TOP of the stat banner and bleed down through About
   (brand image, dark parts drop out via screen, edges fade via mask) */
.sun-rays{ position:absolute; top:0; left:0; right:0; bottom:0; pointer-events:none; overflow:hidden; z-index:0;
  background-image:url('photos/sun-rays.png?v=3'); background-repeat:no-repeat; background-position:center top;
  background-size:100% auto; mix-blend-mode:screen; opacity:.2;
  /* fade the rays out toward every edge so the image boundary is never visible;
     opaque band sits high so the beams start right under the wave, soft fade-in at the very top */
  -webkit-mask-image:radial-gradient(160% 65% at 50% 0%, rgba(0,0,0,0) 0%, #000 5%, #000 42%, rgba(0,0,0,0) 100%);
  mask-image:radial-gradient(160% 65% at 50% 0%, rgba(0,0,0,0) 0%, #000 5%, #000 42%, rgba(0,0,0,0) 100%); }
@media (max-width:640px){ .sun-rays{ background-size:190% auto; opacity:.13; } }

/* old happy-octopus logo badge in the corner (like the shirt chest logo) */
.octo-badge{ position:fixed; right:16px; bottom:16px; width:120px; z-index:40;
  pointer-events:none; filter:drop-shadow(0 6px 12px rgba(0,0,0,.55)); opacity:.96; }
@media (max-width:640px){ .octo-badge{ width:78px; right:10px; bottom:10px; } }

/* before / after comparison slider (drag to reveal the clean) */
.ba-slider{ position:relative; width:100%; max-width:440px; margin:0 auto; border-radius:.7rem; overflow:hidden;
  touch-action:none; user-select:none; --pos:50%; box-shadow:0 12px 30px rgba(0,0,0,.18); }
.ba-slider img{ display:block; width:100%; height:100%; object-fit:cover; pointer-events:none; }
.ba-slider .ba-after{ position:relative; aspect-ratio:4 / 5; }
.ba-slider .ba-before{ position:absolute; inset:0; clip-path:inset(0 calc(100% - var(--pos)) 0 0); }
.ba-divider{ position:absolute; top:0; bottom:0; left:var(--pos); width:3px; margin-left:-1.5px;
  background:#fff; box-shadow:0 0 0 1px rgba(0,0,0,.12); pointer-events:none; }
.ba-handle{ position:absolute; top:50%; left:var(--pos); width:44px; height:44px; margin:-22px 0 0 -22px;
  border-radius:50%; background:#fff; box-shadow:0 2px 10px rgba(0,0,0,.4);
  display:flex; align-items:center; justify-content:center; color:#1f74c4; font-size:18px; pointer-events:none; }
.ba-range{ position:absolute; inset:0; width:100%; height:100%; margin:0; padding:0; opacity:0;
  cursor:ew-resize; -webkit-appearance:none; appearance:none; background:transparent; }
.ba-range::-webkit-slider-thumb{ -webkit-appearance:none; width:48px; height:400px; cursor:ew-resize; }
.ba-range::-moz-range-thumb{ width:48px; height:400px; border:0; background:transparent; cursor:ew-resize; }
.ba-tag{ position:absolute; bottom:12px; padding:5px 11px; border-radius:999px; font-size:11px;
  font-weight:700; letter-spacing:.05em; color:#fff; pointer-events:none; }
.ba-tag--before{ left:12px; background:rgba(8,20,42,.7); }
.ba-tag--after{ right:12px; background:rgba(31,116,196,.88); }

/* wavy top edge where the pool hero meets the deep-blue zone (organic, not a hard line) */
.wave-top{ position:absolute; left:0; top:0; width:100%; height:160px; transform:translateY(-99%);
  z-index:2; pointer-events:none; line-height:0; }
.wave-top svg{ display:block; width:100%; height:100%; }
@media (max-width:640px){ .wave-top{ height:95px; } }

/* hero bottom padding: clear pool-image strip between the form card and the wave divider.
   (Tailwind pb-* utilities for these values were purged from output.css, so the spacing
   lives here instead. gap between card bottom and wave top is roughly padding minus 119px.) */
.krk-hero{ padding-bottom:80px; }
@media (max-width:640px){ .krk-hero{ padding-bottom:155px; } }

/* service cards: equal height per row, buttons flush to the bottom.
   Only in grid mode (>=640px). On mobile the grid is a single block column,
   where height:100% against the flex-row wrapper blew cards up to ~3288px. */
@media (min-width:640px){
  #services [data-aos="fade-up"]{ display:flex; flex-direction:column; height:100%; }
  #services [data-aos="fade-up"] > div:last-child{ display:flex; flex-direction:column; flex:1 1 auto; }
  #services [data-aos="fade-up"] > div:last-child > a:last-child{ margin-top:auto; align-self:flex-start; }
}

/* ===== service-page helpers (JB Grind template, recoloured to Deep Blue) ===== */
.svc-icon-square{ background:rgb(var(--brand-rgb)); border-radius:.5rem; padding:.5rem; width:fit-content; }
.svc-photo-panel{ background:linear-gradient(135deg, rgb(var(--brand-rgb)) 0%, var(--brand-deep) 100%); border-radius:.75rem; padding:1.25rem; }
.svc-tile{ background:#fff; border-radius:.5rem; }
.svc-card{ background:rgba(13,30,58,.85); border:1px solid rgba(255,255,255,.10); border-radius:.85rem; }
/* faq accordion (button toggles the answer; plus rotates to a cross) */
.faq-answer.hidden{ display:none; }
.faq-button svg{ transition:transform .2s ease; }
.faq-button[aria-expanded="true"] svg{ transform:rotate(45deg); }