/* =====================================================================
   GLASSWATER - subpage components (services.html, areas.html)
   Loaded after styles.css. Reuses every token + component there.
   ===================================================================== */

/* ---------- service detail rows ---------- */
.svc-row{
  display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4.5rem);
  align-items:center;padding:clamp(3rem,6vw,5.5rem) 0;border-top:1px solid var(--line);
}
.svc-row:first-of-type{border-top:0}
.svc-row:nth-child(even) .svc-visual{order:-1}
.svc-row .num{font-family:var(--mono);font-size:.78rem;letter-spacing:.16em;color:var(--cyan);text-transform:uppercase}
.svc-row h2{font-family:var(--serif);font-weight:400;font-size:clamp(2.1rem,4.6vw,3.4rem);line-height:1;letter-spacing:-.01em;margin:.7rem 0 1rem}
.svc-row h2 em{font-style:italic;color:var(--cyan)}
.svc-row .lead{color:#cfe6ec;font-size:1.08rem;margin-bottom:1.4rem}
.svc-row p.sub{color:var(--muted);font-size:.98rem;margin-bottom:1.5rem}
.incl{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:.7rem .9rem;margin-bottom:1.6rem}
.incl li{display:flex;gap:.55rem;align-items:flex-start;font-size:.95rem;color:#d5eaef}
.incl li svg{width:18px;height:18px;color:var(--cyan);flex:none;margin-top:2px}
.svc-meta{display:flex;gap:1.4rem;align-items:center;flex-wrap:wrap}
.price-chip{
  display:inline-flex;align-items:baseline;gap:.35rem;
  padding:.5em .9em;border-radius:100px;background:var(--glass-bright);border:1px solid var(--line-strong);
  font-family:var(--mono);font-size:.82rem;color:var(--glint);
}
.price-chip b{font-family:var(--sans);font-size:1.05rem;color:var(--foam)}

/* visual panel (procedural, no stock photos) */
.svc-visual{
  position:relative;border-radius:var(--radius-lg);overflow:hidden;aspect-ratio:4/3;
  border:1px solid var(--line-strong);
  background:radial-gradient(90% 80% at 30% 20%,#0c6a86,#052836);
  box-shadow:0 40px 100px -50px rgba(0,0,0,.65);
  display:grid;place-items:center;
}
.svc-visual .vicon{position:relative;z-index:2;width:96px;height:96px;color:var(--glint);opacity:.92;filter:drop-shadow(0 8px 24px rgba(0,0,0,.4))}
.svc-visual .vtag{
  position:absolute;left:18px;bottom:16px;z-index:2;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  padding:.4em .8em;border-radius:100px;background:rgba(4,28,38,.5);border:1px solid var(--line);backdrop-filter:blur(6px);
}

/* ===== bespoke per-service visuals (each shows what the service does) ===== */
.viz{position:absolute;inset:0;z-index:1}
.viz svg{position:absolute;inset:0;width:100%;height:100%}
.viz-cap{position:absolute;left:20px;top:17px;z-index:6;font-family:var(--mono);font-size:.63rem;letter-spacing:.16em;text-transform:uppercase;color:var(--cyan)}
.viz-foot{position:absolute;left:20px;bottom:17px;z-index:6;font-family:var(--mono);font-size:.66rem;letter-spacing:.03em;color:var(--muted)}
.viz-foot b{color:var(--glint);font-weight:500}

/* 1 - chemistry readout */
.viz-chem{display:flex;flex-direction:column;justify-content:center;gap:.95rem;padding:2.7rem clamp(20px,3.4vw,30px) 2.5rem}
.gauge{display:grid;grid-template-columns:62px 1fr 46px;align-items:center;gap:.7rem}
.gauge .gl{font-family:var(--mono);font-size:.68rem;color:var(--muted)}
.gauge .gbar{position:relative;height:8px;border-radius:100px;background:rgba(255,255,255,.09)}
.gauge .gbar .zone{position:absolute;top:0;bottom:0;border-radius:100px;background:rgba(70,214,227,.18)}
.gauge .gbar i{position:absolute;left:0;top:0;bottom:0;border-radius:100px;background:linear-gradient(90deg,var(--aqua),var(--cyan),var(--glint));width:var(--w);animation:chemfill 1.5s var(--ease-water) both}
.gauge .gbar b{position:absolute;top:-3px;bottom:-3px;left:var(--p);width:2px;margin-left:-1px;background:var(--foam);border-radius:2px;box-shadow:0 0 7px rgba(242,254,255,.8)}
.gauge .gv{font-family:var(--mono);font-size:.75rem;color:var(--foam);text-align:right}
.gauge .gv small{color:var(--muted);font-size:.58rem;margin-left:1px}
.gauge:nth-of-type(2) .gbar i{animation-delay:.12s}
.gauge:nth-of-type(3) .gbar i{animation-delay:.26s}
@keyframes chemfill{from{width:0}}

/* 2 - green to clear wipe */
.viz-wipe .layer{position:absolute;inset:0}
.viz-wipe .clear{background:radial-gradient(120% 90% at 72% 8%,rgba(190,247,251,.5),transparent 50%),radial-gradient(80% 70% at 18% 92%,rgba(70,214,227,.5),transparent 55%),linear-gradient(160deg,#3fcfe0,#138e8c,#0a6f8a 60%,#063a4d)}
.viz-wipe .green{background:radial-gradient(70% 60% at 30% 30%,rgba(120,140,60,.5),transparent 60%),linear-gradient(150deg,#5c7a3a,#3f5a2c 45%,#2c3f22);clip-path:inset(0 0 0 0);animation:wipeG 7s ease-in-out infinite}
.viz-wipe .green::after{content:"";position:absolute;inset:0;opacity:.45;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E")}
.viz-wipe .seam{position:absolute;top:0;bottom:0;width:2px;margin-left:-1px;left:100%;background:linear-gradient(180deg,transparent,var(--glint),transparent);box-shadow:0 0 16px 2px rgba(120,240,255,.6);animation:seamX 7s ease-in-out infinite}
.viz-wipe .lab{position:absolute;bottom:16px;z-index:5;font-family:var(--mono);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;padding:.32em .7em;border-radius:100px}
.viz-wipe .lab.l{left:16px;background:rgba(50,70,30,.62);color:#e2f2c8;border:1px solid rgba(180,210,120,.32)}
.viz-wipe .lab.r{right:16px;background:rgba(8,52,68,.62);color:var(--glint);border:1px solid rgba(120,240,255,.32)}
@keyframes wipeG{0%,8%{clip-path:inset(0 0 0 0)}50%,58%{clip-path:inset(0 100% 0 0)}100%{clip-path:inset(0 0 0 0)}}
@keyframes seamX{0%,8%{left:100%}50%,58%{left:0%}100%{left:100%}}

/* 3 - equipment loop */
.flow{transform:translate(22px,130px);opacity:0;animation:flowx 2.6s linear infinite}
@keyframes flowx{0%{transform:translate(22px,130px);opacity:0}12%{opacity:1}88%{opacity:1}100%{transform:translate(218px,130px);opacity:0}}
.needle-eq{transform-box:view-box;transform-origin:121px 68px;animation:needleWig 4s ease-in-out infinite}
@keyframes needleWig{0%,100%{transform:rotate(-12deg)}50%{transform:rotate(10deg)}}

/* 4 - salt cell */
.bub{transform:translateY(126px);opacity:0;animation:rise 2.6s linear infinite}
@keyframes rise{0%{transform:translateY(126px);opacity:0}16%{opacity:.85}84%{opacity:.55}100%{transform:translateY(60px);opacity:0}}

/* 5 - deep clean vacuum */
.vac-head{offset-path:path("M40 56 H198 C212 56 212 82 198 82 H42 C28 82 28 108 42 108 H198 C212 108 212 134 198 134 H40");offset-rotate:0deg;animation:vacrun 7s ease-in-out infinite alternate}
@keyframes vacrun{to{offset-distance:100%}}
.deb{animation:debclean 7s ease-in-out infinite}
@keyframes debclean{0%{opacity:.85}50%{opacity:.08}100%{opacity:.85}}

/* 6 - pressure / leak gauge */
.needle-leak{transform-box:view-box;transform-origin:120px 92px;animation:leakWig 3.6s ease-in-out infinite}
@keyframes leakWig{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(5deg)}}
.gauge-dot{animation:gpulse 2.4s ease-in-out infinite}
@keyframes gpulse{0%,100%{opacity:.5}50%{opacity:1}}

@media (prefers-reduced-motion:reduce){
  .gauge .gbar i{animation:none}
  .viz-wipe .green{animation:none;clip-path:inset(0 50% 0 0)}
  .viz-wipe .seam{animation:none;left:50%}
  .flow,.needle-eq,.bub,.vac-head,.deb,.needle-leak,.gauge-dot{animation:none}
  .flow,.bub{opacity:.6}
}

/* ---------- "in every visit" checklist band ---------- */
.visit-band{
  border-radius:var(--radius-lg);border:1px solid var(--line-strong);
  background:linear-gradient(180deg,rgba(13,80,103,.4),rgba(6,40,53,.4));
  padding:clamp(2rem,5vw,3.4rem);
}
.visit-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem;margin-top:2rem}
.visit-item{display:flex;flex-direction:column;gap:.5rem}
.visit-item .vn{font-family:var(--mono);font-size:.74rem;color:var(--cyan)}
.visit-item h3{font-size:1.08rem}
.visit-item p{color:var(--muted);font-size:.9rem}

/* ---------- areas page ---------- */
.area-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem}
.area-card{
  position:relative;overflow:hidden;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.7rem 1.6rem 1.8rem;backdrop-filter:blur(6px);
  transition:transform .6s var(--ease-out),border-color .6s var(--ease-water),background .6s;
}
.area-card::before{
  content:"";position:absolute;inset:0;opacity:0;transition:opacity .6s var(--ease-water);pointer-events:none;
  background:radial-gradient(120% 90% at 50% 0%, rgba(70,214,227,.14), transparent 55%);
}
.area-card:hover{transform:translateY(-6px);border-color:rgba(70,214,227,.4);background:var(--panel-2)}
.area-card:hover::before{opacity:1}
.area-card .ac-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:.7rem}
.area-card h3{font-family:var(--serif);font-weight:400;font-size:1.7rem;letter-spacing:-.01em}
.area-card .zip{font-family:var(--mono);font-size:.74rem;color:var(--muted-2)}
.area-card p{color:var(--muted);font-size:.94rem;margin-bottom:1.2rem}
.area-card .tags{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:1.3rem}
.area-card .tag{font-family:var(--mono);font-size:.68rem;letter-spacing:.04em;color:var(--cyan);padding:.3em .6em;border-radius:100px;background:var(--glass-bright);border:1px solid var(--line)}
.area-card .ac-link{font-family:var(--mono);font-size:.78rem;color:var(--cyan);display:inline-flex;align-items:center;gap:.4em}
.area-card .ac-link svg{width:14px;height:14px;transition:transform .5s var(--ease-out)}
.area-card:hover .ac-link svg{transform:translateX(4px)}

/* ---------- big rich content blocks ---------- */
.rich{max-width:760px}
.rich h2{font-family:var(--serif);font-weight:400;font-size:clamp(2rem,4.4vw,3rem);line-height:1.02;letter-spacing:-.01em;margin-bottom:1rem}
.rich h2 em{font-style:italic;color:var(--cyan)}
.rich p{color:var(--muted);font-size:1.05rem;margin-bottom:1.1rem}
.rich p b{color:var(--text)}

/* ---------- responsive ---------- */
@media (max-width:1024px){
  .svc-row{grid-template-columns:1fr;gap:2rem}
  .svc-row:nth-child(even) .svc-visual{order:0}
  .svc-visual{aspect-ratio:16/9}
  .area-grid{grid-template-columns:repeat(2,1fr)}
  .visit-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:680px){
  .area-grid{grid-template-columns:1fr}
  .incl{grid-template-columns:1fr}
  .visit-grid{grid-template-columns:1fr}
}