/* ============================================================
   AQUIA POOL & SPA — premium layer (loaded after style.css)
   San Antonio deep navy + Texas orange + cream + real cyan wave
   ============================================================ */
:root{
  --cyan:#00AEEF;              /* Aquia's real brand wave */
  --cyan-soft:#5ECBF2;
  --navy:#0C2742;
  --navy-2:#103257;
}

/* ---- Brand wordmark + wave ------------------------------------ */
.brand{ align-items:center; gap:11px; }
.brand-wave{ display:inline-flex; width:38px; color:var(--cyan); flex:0 0 auto; }
.brand-wave svg{ width:100%; height:auto; filter:drop-shadow(0 1px 2px rgba(0,0,0,.18)); }
.is-scrolled .brand-wave{ color:var(--cyan); }
.brand-name{ font-family:var(--f-display); font-weight:700; font-size:20px; letter-spacing:-.02em; line-height:.95; display:flex; flex-direction:column; }
.brand-name__sub{ font-family:var(--f-mono); font-weight:400; font-size:9.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--brass); margin-top:3px; }
.brand-mark{ display:none; }
.footer-logo{ font-family:var(--f-display); font-size:24px; font-weight:700; letter-spacing:-.01em; color:var(--bone); display:inline-flex; align-items:center; gap:9px; }
.brand-wave--footer{ width:34px; color:var(--cyan); }

/* ---- HERO — readability first --------------------------------- */
.hero-scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(100deg, rgba(8,24,42,.92) 0%, rgba(8,24,42,.74) 38%, rgba(8,24,42,.30) 70%, rgba(8,24,42,.12) 100%),
    linear-gradient(0deg, rgba(8,24,42,.55) 0%, rgba(8,24,42,0) 45%);
  z-index:1;
}
.hero-content{ position:relative; z-index:2; }
.hero h1{ color:var(--bone); text-shadow:0 2px 30px rgba(0,0,0,.32); }
.hero h1 em{ font-style:normal; color:var(--cyan-soft); }
.hero-sub{
  max-width:54ch; margin-top:20px; color:rgba(245,240,230,.9);
  font-size:clamp(15px,1.55vw,18.5px); line-height:1.62; font-weight:300;
}
.hero-badges{
  display:flex; flex-wrap:wrap; gap:10px 18px; margin-top:26px;
  font-family:var(--f-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:rgba(245,240,230,.82);
}
.hero-badges span{ display:inline-flex; align-items:center; gap:8px; }
.hero-badges span::before{ content:""; width:5px; height:5px; border-radius:50%; background:var(--brass-soft); }
.hero-badges span:first-child::before{ display:none; }

/* ---- Photo tag on intro image --------------------------------- */
.atelier__photo{ position:relative; overflow:hidden; }
.photo-tag{
  position:absolute; left:14px; bottom:14px; z-index:2;
  font-family:var(--f-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  color:#fff; background:rgba(12,39,66,.82); padding:7px 12px; border-radius:30px;
  backdrop-filter:blur(4px); border:1px solid rgba(255,255,255,.12);
}
.atelier__sig small{ color:var(--brass); }

/* ---- SERVICE CARDS -------------------------------------------- */
.svc-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,1.8vw,24px);
  margin-top:clamp(40px,5vw,60px);
}
.svc-card{
  display:flex; flex-direction:column; gap:10px;
  background:var(--bone); border:1px solid var(--line); border-radius:16px;
  padding:30px 26px 26px; text-decoration:none; color:var(--ink);
  position:relative; overflow:hidden; transition:transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s, border-color .4s;
}
.svc-card::after{
  content:""; position:absolute; left:0; top:0; height:3px; width:100%;
  background:linear-gradient(90deg,var(--cyan),var(--brass)); transform:scaleX(0); transform-origin:left;
  transition:transform .45s cubic-bezier(.2,.7,.2,1);
}
.svc-card:hover{ transform:translateY(-6px); box-shadow:0 24px 50px -28px rgba(12,39,66,.55); border-color:transparent; }
.svc-card:hover::after{ transform:scaleX(1); }
.svc-card__num{ font-family:var(--f-mono); font-size:12px; letter-spacing:.16em; color:var(--brass); }
.svc-card h3{ font-size:clamp(19px,1.6vw,22px); line-height:1.18; }
.svc-card p{ font-size:14.5px; line-height:1.6; color:var(--ink-soft); flex:1; }
.svc-card__go{ font-family:var(--f-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--aqua-soft); margin-top:4px; }
.svc-card:first-child .svc-card__go{ color:var(--brass); font-weight:500; }

/* ---- AWARDS --------------------------------------------------- */
.awards-row{
  display:flex; flex-wrap:wrap; justify-content:center; gap:clamp(20px,4vw,52px);
  align-items:flex-end; margin-top:clamp(40px,5vw,56px);
}
.award{ display:flex; flex-direction:column; align-items:center; gap:12px; }
.award img{
  height:96px; width:auto; object-fit:contain;
  filter:drop-shadow(0 8px 20px rgba(0,0,0,.35));
  transition:transform .4s cubic-bezier(.2,.7,.2,1);
}
.award:hover img{ transform:translateY(-6px) scale(1.04); }
.award span{ font-family:var(--f-mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:rgba(245,240,230,.7); }

/* ---- SERVICE AREA SPLIT --------------------------------------- */
.area-split{ display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(32px,5vw,72px); align-items:center; }
.area-split__list{
  display:grid; grid-template-columns:1fr 1fr; gap:13px 26px;
  font-family:var(--f-mono); font-size:12.5px; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-soft);
}
.area-split__list div{ display:flex; align-items:center; gap:9px; padding-bottom:11px; border-bottom:1px solid var(--line); }
.brass-arrow{ color:var(--brass); font-weight:600; }

/* ---- Magnetic button (enhanced) ------------------------------- */
.magnetic{ will-change:transform; }

/* ---- Wave section divider ------------------------------------- */
.wave-divide{ display:block; width:100%; height:auto; color:var(--bone); }

/* ---- Inner page hero (services/about/etc.) -------------------- */
.page-hero{
  position:relative; padding:clamp(120px,16vh,180px) 0 clamp(52px,7vw,84px);
  background:var(--navy); color:var(--bone); overflow:hidden;
}
.page-hero::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(120% 90% at 85% 10%, rgba(0,174,239,.16), transparent 60%);
}
.page-hero .wrap{ position:relative; z-index:2; }
.page-hero .eyebrow{ color:var(--brass-soft); }
.page-hero h1{ color:var(--bone); font-size:clamp(38px,6vw,76px); margin-top:14px; }
.page-hero h1 em{ font-style:normal; color:var(--cyan-soft); }
.page-hero__sub{ max-width:60ch; margin-top:20px; color:rgba(245,240,230,.82); font-size:clamp(15px,1.6vw,18px); line-height:1.6; font-weight:300; }
.page-hero__wave{ position:absolute; left:0; right:0; bottom:-1px; z-index:1; line-height:0; }
.page-hero__wave svg{ width:100%; height:auto; display:block; color:var(--bone); }

/* ---- Deep service blocks (services.html) ---------------------- */
.svc-deep{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,64px); align-items:center; margin-bottom:clamp(48px,7vw,92px); }
.svc-deep:nth-child(even) .svc-deep__media{ order:2; }
.svc-deep__media{ border-radius:18px; overflow:hidden; aspect-ratio:4/3; background:var(--bone-2); position:relative; }
.svc-deep__media img{ width:100%; height:100%; object-fit:cover; }
.svc-deep__media--placeholder{ display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,var(--navy),var(--aqua-soft)); }
.svc-deep__media--placeholder span{ font-family:var(--f-mono); font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.85); }
.svc-deep__copy .mono{ color:var(--brass); }
.svc-deep__copy h2{ font-size:clamp(26px,3.2vw,40px); margin:8px 0 14px; }
.svc-deep__list{ list-style:none; padding:0; margin:18px 0 0; display:grid; gap:11px; }
.svc-deep__list li{ position:relative; padding-left:26px; font-size:15px; line-height:1.5; color:var(--ink-soft); }
.svc-deep__list li::before{ content:""; position:absolute; left:0; top:8px; width:11px; height:6px; border-left:2px solid var(--cyan); border-bottom:2px solid var(--cyan); transform:rotate(-45deg); }

/* ---- FAQ ------------------------------------------------------ */
.faq{ max-width:820px; margin:0 auto; }
.faq__item{ border-bottom:1px solid var(--line); padding:22px 0; }
.faq__item h3{ font-size:clamp(18px,1.8vw,22px); margin-bottom:8px; }
.faq__item p{ color:var(--ink-soft); line-height:1.62; font-size:15px; }

/* ---- Contact cards ------------------------------------------- */
.contact-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:clamp(36px,4vw,52px); }
.contact-card{ background:var(--bone); border:1px solid var(--line); border-radius:16px; padding:28px 26px; }
.contact-card .mono{ color:var(--brass); }
.contact-card h3{ font-size:20px; margin:8px 0 6px; }
.contact-card a{ color:var(--aqua-deep); text-decoration:none; font-weight:600; }
.contact-card p{ color:var(--ink-soft); font-size:14.5px; line-height:1.55; }

/* ---- Readability guards --------------------------------------- */
.section--dark p, .section--dark li{ color:rgba(245,240,230,.82); }
.body-lg{ line-height:1.62; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:900px){
  .svc-grid{ grid-template-columns:1fr 1fr; }
  .area-split{ grid-template-columns:1fr; }
  .contact-cards{ grid-template-columns:1fr; }
  .svc-deep{ grid-template-columns:1fr; }
  .svc-deep:nth-child(even) .svc-deep__media{ order:0; }
}
@media (max-width:600px){
  .svc-grid{ grid-template-columns:1fr; }
  .area-split__list{ grid-template-columns:1fr; }
  .brand-name{ font-size:18px; }
  .hero-badges{ gap:8px 14px; font-size:10px; }
  .award img{ height:72px; }
  .awards-row{ gap:18px 26px; }
}

/* ---- Reduced motion ------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .svc-card,.award img,.magnetic{ transition:none !important; }
}

.zip-grid span{font-family:var(--f-mono);font-size:12.5px;letter-spacing:.06em;color:var(--aqua-deep);background:var(--bone);border:1px solid var(--line);border-radius:30px;padding:8px 15px;}
.family-pillars-wrap .family-pillars{display:grid;grid-template-columns:1fr 1fr;gap:22px 40px;}
@media(max-width:760px){.family-pillars-wrap .family-pillars{grid-template-columns:1fr;}}

/* ---- PRICING ---------------------------------------------------- */
.price-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:clamp(40px,5vw,56px); align-items:stretch; }
.price-card{ position:relative; display:flex; flex-direction:column; background:var(--bone); border:1px solid var(--line); border-radius:18px; padding:32px 28px; transition:transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s; }
.price-card:hover{ transform:translateY(-6px); box-shadow:0 24px 50px -28px rgba(12,39,66,.5); }
.price-card--feature{ background:var(--navy); border-color:var(--navy); color:var(--bone); transform:scale(1.03); }
.price-card--feature:hover{ transform:scale(1.03) translateY(-6px); }
.price-card--feature .price-card__name,.price-card--feature h3{ color:var(--bone); }
.price-card__badge{ position:absolute; top:-12px; left:50%; transform:translateX(-50%); background:var(--brass); color:#fff; font-family:var(--f-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; padding:6px 14px; border-radius:30px; white-space:nowrap; }
.price-card__name{ font-family:var(--f-mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--brass); }
.price-card__price{ font-family:var(--f-display); font-size:clamp(38px,4.5vw,52px); font-weight:700; line-height:1; margin:12px 0 2px; letter-spacing:-.02em; }
.price-card--feature .price-card__price{ color:#fff; }
.price-card__per{ font-family:var(--f-mono); font-size:12px; color:var(--ink-soft); }
.price-card--feature .price-card__per{ color:rgba(245,240,230,.7); }
.price-card__list{ list-style:none; padding:0; margin:22px 0 24px; display:grid; gap:11px; flex:1; }
.price-card__list li{ position:relative; padding-left:26px; font-size:14.5px; line-height:1.45; color:var(--ink-soft); }
.price-card--feature .price-card__list li{ color:rgba(245,240,230,.85); }
.price-card__list li::before{ content:""; position:absolute; left:0; top:6px; width:11px; height:6px; border-left:2px solid var(--cyan); border-bottom:2px solid var(--cyan); transform:rotate(-45deg); }
.price-note{ text-align:center; margin-top:30px; }
.price-chips{ display:flex; flex-wrap:wrap; justify-content:center; gap:9px; margin-top:16px; }
.price-chips span{ font-family:var(--f-mono); font-size:11.5px; letter-spacing:.04em; color:var(--aqua-deep); background:var(--bone-2); border:1px solid var(--line); border-radius:30px; padding:7px 14px; }
@media(max-width:900px){ .price-grid{ grid-template-columns:1fr; max-width:440px; margin-inline:auto; } .price-card--feature{ transform:none; } .price-card--feature:hover{ transform:translateY(-6px); } }

/* ---- Placeholder media → designed "water" panels (no empty feel) ---- */
.svc-deep__media--placeholder{
  background:
    radial-gradient(120% 140% at 18% 0%, rgba(0,174,239,.30), transparent 55%),
    repeating-radial-gradient(circle at 30% 38%, rgba(255,255,255,.07) 0 2px, transparent 2px 22px),
    linear-gradient(150deg, var(--navy) 0%, var(--aqua-soft) 100%);
  flex-direction:column; gap:18px; text-align:center; padding:28px;
}
.svc-deep__media--placeholder::before{
  content:""; width:58px; height:58px; border-radius:50%;
  background:rgba(255,255,255,.1); border:1.5px solid rgba(255,255,255,.4);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 24'%3E%3Cpath d='M2 16c5 0 5-7 10-7s5 7 10 7 5-7 10-7 5 7 6 7' stroke='black' stroke-width='3' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") center/30px no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 24'%3E%3Cpath d='M2 16c5 0 5-7 10-7s5 7 10 7 5-7 10-7 5 7 6 7' stroke='black' stroke-width='3' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") center/30px no-repeat;
  background:var(--cyan-soft);
}
.svc-deep__media--placeholder span{ font-size:11.5px; max-width:24ch; line-height:1.5; }