/* ============================================================
   AQUASKYPOOL — Pool Engineering and Service
   LIGHT theme: poolside-bright + deep-lagoon + sun-deck sand
   ============================================================ */

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-size: 16px;
  font-family: "Segoe UI", Arial, Helvetica, sans-serif;
  color: #173238;            /* chlorophyll-ink body text */
  background-color: #F3FAFC; /* poolside-bright */
  line-height: 1.7;
  overflow-x: hidden;
}

a { color: #14606B; text-decoration: none; }
img { max-width: 100%; display: block; }
ul { list-style: none; }
button { cursor: pointer; font-family: inherit; }

/* ============ LANE-ROPE NAV ============ */
.lanerope-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: #FFFFFF; /* tile-foam */
  box-shadow: 0 2px 10px rgba(23, 50, 56, 0.06);
}

.lane-rope-strip {
  height: 14px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  background: #F3FAFC;
  border-bottom: 1px solid #D9EAEF; /* hairline */
}

.lane-rope-strip .float-bead {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background-color: #7FC8D6; /* sky-reflect */
  position: relative;
}

.lane-rope-strip .float-bead:nth-child(even) {
  background-color: #FFFFFF;
  border: 1px solid #7FC8D6;
}

.lane-rope-strip .rope-line {
  width: 44px;
  height: 1px;
  background-color: #14606B; /* deep-lagoon */
}

.nav-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 48px;
  background-color: #FFFFFF;
  border-bottom: 1px solid #D9EAEF;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.brand-glyph { font-size: 18px; line-height: 1; }

.brand-text {
  font-size: 21px;
  font-weight: 800;
  letter-spacing: 2px;
  color: #14606B;
  text-transform: uppercase;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.nav-links a {
  color: #173238;
  font-weight: 600;
  position: relative;
  padding-bottom: 4px;
}

.nav-links a:hover {
  color: #14606B;
  border-bottom: 2px solid #14606B;
}

.nav-dot { width: 5px; height: 5px; border-radius: 50%; background-color: #F27E63; }

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid #14606B;
  color: #14606B;
  font-size: 15px;
  padding: 7px 12px;
  border-radius: 4px;
  font-weight: 700;
}

/* ============ HERO ============ */
.poolcut-hero {
  display: flex;
  flex-direction: column;
  background-color: #F3FAFC;
}

.hero-text {
  width: 55%;
  padding: 70px 60px 40px;
}

.eyebrow {
  display: inline-block;
  background-color: #14606B;
  color: #F3FAFC;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 3px;
  margin-bottom: 22px;
}

.hero-text h1 {
  font-size: 50px;
  line-height: 1.12;
  color: #173238;
  margin-bottom: 22px;
  font-weight: 800;
}

.hero-text h1 .accent { color: #14606B; }

.hero-sub {
  font-size: 17px;
  color: #3E5A62;
  max-width: 540px;
  margin-bottom: 30px;
}

.hero-ctas { display: flex; gap: 16px; flex-wrap: wrap; }

.btn {
  display: inline-block;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.5px;
  padding: 13px 28px;
  border-radius: 5px;
  transition: transform 0.15s ease;
}

.btn:hover { transform: translateY(-2px); }

.btn-primary { background-color: #14606B; color: #F3FAFC; }
.btn-primary:hover { background-color: #0E4551; }

.btn-outline {
  background-color: transparent;
  color: #14606B;
  border: 1px solid #14606B;
}

.pool-cutaway {
  background-color: #F3FAFC;
  padding: 0 40px 0;
  display: flex;
  align-items: flex-end;
}

.deck-band {
  width: 40%;
  background-color: #F0E6D2; /* sun-deck sand */
  height: 170px;
  border-radius: 12px 12px 0 0;
  position: relative;
  margin-right: 8px;
}

.depth-sign {
  position: absolute;
  top: 20px;
  left: 24px;
  background-color: #FFFFFF;
  padding: 8px 12px;
  border: 2px solid #14606B;
  border-radius: 4px;
  text-align: center;
  box-shadow: 0 3px 8px rgba(23, 50, 56, 0.12);
}

.depth-sign .depth-val { font-size: 22px; font-weight: 800; color: #14606B; line-height: 1.1; }
.depth-sign .depth-label { font-size: 10px; color: #173238; letter-spacing: 1px; text-transform: uppercase; }

.pool-vessel {
  width: 60%;
  height: 200px;
  border-radius: 0 0 70px 70px;
  border: 3px solid #A9B2B4;
  overflow: hidden;
  position: relative;
  background-color: #F0E6D2;
}

.water-layers {
  position: absolute;
  inset: 0;
  display: flex;
}

.water-shallow {
  width: 45%;
  background-color: #7FC8D6;
  transform: skewY(-8deg);
  margin-left: -8%;
  border-right: 2px solid #14606B;
}

.water-deep {
  flex: 1;
  background-color: #14606B;
}

/* skimmer box */
.skimmer {
  position: absolute;
  top: 30px;
  left: 28%;
  width: 40px;
  height: 26px;
  background-color: #FFFFFF;
  border: 2px solid #14606B;
  border-radius: 3px;
}

.skimmer::after {
  content: "";
  position: absolute;
  top: 7px;
  left: 4px;
  width: 28px;
  height: 4px;
  background-color: #14606B;
}

/* ladder */
.pool-ladder {
  position: absolute;
  top: 40px;
  left: 10%;
  width: 22px;
  height: 70px;
  border-left: 4px solid #14606B;
  border-right: 4px solid #14606B;
}

.pool-ladder .rung {
  position: absolute;
  left: -3px;
  width: 20px;
  height: 3px;
  background-color: #173238;
}

.pool-ladder .r1 { top: 10px; }
.pool-ladder .r2 { top: 30px; }
.pool-ladder .r3 { top: 40px; }

/* chlorine floater */
.floater {
  position: absolute;
  bottom: 40px;
  right: 18%;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background-color: #F27E63;
  border: 2px solid #FFFFFF;
}

.floater::after {
  content: "";
  position: absolute;
  top: -6px;
  left: 4px;
  width: 10px;
  height: 6px;
  border-radius: 3px;
  background-color: #FFFFFF;
}

/* ripple rings */
.ripple { position: absolute; border: 2px solid #14606B; border-radius: 50%; filter: saturate(0.63); }
.ripple-r1 { top: 12px; left: 40%; width: 26px; height: 10px; }
.ripple-r2 { top: 6px; left: 58%; width: 34px; height: 12px; }
.ripple-r3 { top: 16px; right: 14%; width: 20px; height: 9px; }

/* return jets */
.jet { position: absolute; width: 7px; height: 7px; border-radius: 50%; background-color: #F3FAFC; border: 1px solid #0E4551; }
.jet-j1 { right: 26%; bottom: 34%; }
.jet-j2 { right: 18%; bottom: 44%; }

/* drain */
.drain {
  position: absolute;
  bottom: 8px;
  left: 48%;
  width: 26px;
  height: 26px;
  background-color: #F0E6D2;
  border-radius: 50%;
  border: 2px solid #173238;
}

.drain::before {
  content: "";
  position: absolute;
  inset: 4px;
  background:
    repeating-radial-gradient(circle at center, transparent 0 4px, #173238 4px 6px);
  border-radius: 50%;
}

/* rebar ticks */
.pool-vessel::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    135deg,
    transparent 0 9px,
    #173238 9px 11px
  );
  filter: saturate(0.07);
  pointer-events: none;
}

/* ============ ROUTE ROWS ============ */
.route-rows {
  background-color: #F3FAFC;
  padding: 70px 60px;
}

.section-title {
  font-size: 34px;
  color: #14606B;
  font-weight: 800;
  margin-bottom: 14px;
}

.section-sub {
  color: #3E5A62;
  max-width: 620px;
  margin-bottom: 38px;
  font-size: 16px;
}

.route-row {
  display: flex;
  align-items: center;
  gap: 28px;
  background-color: #FFFFFF;
  border: 1px solid #D9EAEF;
  border-radius: 10px;
  padding: 26px 30px;
  margin-bottom: 12px;
}

.day-disc {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #7FC8D6;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 18px;
  color: #14606B;
  position: relative;
}

.day-disc::after {
  content: "";
  position: absolute;
  right: 2px;
  top: 2px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #F27E63;
}

.route-row-text { flex: 1; }

.route-row-text h3 {
  font-size: 20px;
  color: #173238;
  margin-bottom: 8px;
  font-weight: 700;
}

.route-row-text p { color: #3E5A62; font-size: 15px; }

.chem-strip { display: flex; flex-direction: column; gap: 6px; flex-shrink: 0; }

.chem-strip .vial {
  display: flex;
  align-items: center;
  gap: 6px;
}

.vial-tube {
  width: 12px;
  height: 22px;
  border: 1.5px solid #14606B;
  border-bottom: none;
  border-radius: 3px 3px 0 0;
  position: relative;
  overflow: hidden;
}

.vial-tube::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #7FC8D6;
}

.vial-tube.v1::before { height: 70%; background-color: #7FC8D6; }
.vial-tube.v2::before { height: 40%; background-color: #14606B; }
.vial-tube.v3::before { height: 55%; background-color: #FFFFFF; border-top: 1px solid #14606B; }

.chem-strip .vial-label {
  font-size: 9px;
  color: #173238;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ============ METRIC BAND ============ */
.metric-band {
  background-color: #F0E6D2;
  padding: 70px 60px;
  display: flex;
  justify-content: space-around;
  gap: 30px;
  flex-wrap: wrap;
}

.gauge {
  text-align: center;
  width: 200px;
}

.gauge-dial {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background-color: #FFFFFF;
  border: 8px solid #14606B;
  margin: 0 auto 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.gauge-value {
  font-size: 30px;
  font-weight: 800;
  color: #14606B;
}

.gauge-label {
  font-size: 12px;
  color: #173238;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 600;
}

.metric-band-title {
  width: 100%;
  text-align: center;
  font-size: 28px;
  color: #14606B;
  font-weight: 800;
  margin-bottom: 10px;
}

/* ============ STATEMENT BAND ============ */
.statement-band {
  background-color: #FFFFFF;
  padding: 80px 60px;
  text-align: center;
}

.statement-inner {
  max-width: 720px;
  margin: 0 auto;
  border-left: 4px solid #7FC8D6;
  padding-left: 34px;
  text-align: left;
}

.statement-inner p {
  font-size: 25px;
  font-weight: 700;
  line-height: 1.5;
  color: #173238;
}

.statement-inner .statement-attribution {
  margin-top: 18px;
  font-size: 14px;
  color: #14606B;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* ============ CTA BAND ============ */
.cta-band {
  background-color: #F3FAFC;
  padding: 80px 60px;
  text-align: center;
}

.cta-band h2 {
  font-size: 34px;
  color: #14606B;
  font-weight: 800;
  margin-bottom: 14px;
}

.cta-band p { color: #3E5A62; max-width: 560px; margin: 0 auto 30px; font-size: 17px; }

/* ============ COVER-REEL FOOTER ============ */
.coverreel-footer {
  background-color: #0E4551; /* deep lagoon */
  color: #F3FAFC;
  position: relative;
  z-index: 1;
  padding-bottom: 60px;
}

.cover-reel-strip {
  height: 14px;
  width: 100%;
  background-color: #7FC8D6;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 30px;
}

.cover-reel-strip .reel-roller { flex: 1; height: 6px; background-color: #14606B; }
.cover-reel-strip .reel-crank { width: 12px; height: 12px; background-color: #14606B; border-radius: 3px; }

.footer-inner {
  padding: 60px 40px 0;
  text-align: center;
}

.footer-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: 3px;
  color: #F3FAFC;
  text-transform: uppercase;
  margin-bottom: 28px;
}

.footer-links {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 18px;
  margin-bottom: 30px;
}

.footer-links a { color: #F3FAFC; font-size: 15px; font-weight: 600; }
.footer-links a:hover { color: #7FC8D6; }
.footer-link-sep { color: #F0E6D2; filter: saturate(0.63); }

.buoy-ring {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 30px;
}

.buoy-ring .ring { width: 20px; height: 20px; border-radius: 50%; border: 4px solid #F27E63; }

.buoy-ring .wave { width: 30px; height: 2px; background-color: #7FC8D6; }

.legal-line {
  font-size: 14px;
  color: #C7E3EA;
  line-height: 1.8;
}

.legal-line a { color: #C7E3EA; }
.legal-line a:hover { color: #FFFFFF; }

/* ============ SCROLL REVEAL ============ */
.fade-up { transition: transform 0.7s ease; }

.fade-up.visible { opacity: 1; }

/* ============ RESPONSIVE ============ */
@media (max-width: 860px) {
  .nav-links {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: #FFFFFF;
    padding: 20px;
    box-shadow: 0 6px 16px rgba(23, 50, 56, 0.1);
  }

  .nav-links.open { display: flex; align-items: center; }

  .nav-toggle { display: inline-block; }

  .hero-text { width: 100%; padding: 50px 24px 30px; }
  .hero-text h1 { font-size: 36px; }
  .pool-cutaway { flex-direction: column; padding: 0 24px 60px; }
  .deck-band, .pool-vessel { width: 100%; }
  .route-rows, .metric-band, .statement-band, .cta-band { padding: 50px 24px; }
  .route-row { flex-direction: column; align-items: flex-start; }
  .metric-band { justify-content: center; }
  .nav-row { padding: 12px 24px; }
}