/* Groundwater Pros — reusable service-page design system.
   Scoped entirely under .svc-page so the locked homepage and shared site.css rules
   are never touched. Intended for well-drilling, hydrofracking, pump service,
   filtration, and future service pages alike — nothing here is well-drilling-specific
   except the content pulled from each page's own markup. */

.svc-page{
  --svc-carbon:#080d12;
  /* Dark sections and the accent color now resolve to the same homepage tokens
     (--navy-950 / --blue-500) instead of this page's own older, more muted values —
     approved on mobile first, now the single source of truth for every breakpoint. */
  --svc-charcoal:var(--navy-950);
  --svc-graphite:#18242e;
  --svc-smoke:#7f919f;
  --svc-mist:#dce5ea;
  --svc-water:var(--blue-500);
  --svc-ease:cubic-bezier(.22,1,.36,1);

  /* ---- shared typography scale — matched to the homepage system (site.css) as the
     source of truth: h3/eyebrow/body sizes and line-height are now the exact values
     homepage uses for equivalent elements (.prose h3, .eyebrow, .prose p); h1/h2 are
     bumped closer to the homepage's hero/head-c scale for a slightly larger, more open
     desktop feel without literally becoming a photo hero or homepage section head. ---- */
  --svc-h1:clamp(2.4rem,5.2vw,4.2rem);
  --svc-h2:clamp(1.7rem,2.9vw,2.6rem);
  /* Bumped 2026-09-19 (owner legibility feedback): the old floor (1.1rem/17.6px) could
     render SMALLER than --svc-body's own mobile floor (18px), so FAQ questions and step
     headings were losing to their own body text instead of standing out from it. */
  --svc-h3:clamp(1.25rem,1.6vw,1.5rem);
  --svc-label:.82rem;
  --svc-body:clamp(1rem,1.1vw,1.1rem);
  --svc-body-lh:1.65;

  /* ---- shared section rhythm — the standard content-section padding now matches the
     homepage's one universal section rhythm exactly (clamp(34px,3.4vw,58px), used by
     Services/Reviews/Service Area/"When You Call" alike). --svc-py-tight stays a
     deliberately smaller variant for the compact "Call Us" band, which has no direct
     homepage equivalent. ---- */
  --svc-py-tight:clamp(1.4rem,2.4vw,1.9rem);
  --svc-py:clamp(2.125rem,3.4vw,3.625rem);
  --svc-py-lg:clamp(2.125rem,3.4vw,3.625rem);
}

/* Mobile readability fix — shared across every service page (Well Drilling, Hydrofracking,
   Pump Installation & Service, Water Filtration). At mobile widths the 1.1vw term in the
   base --svc-body clamp above is only a few px, so it was resolving to its 1rem (16px)
   floor — too small for supporting/body copy on a real device. Overriding just the two
   body-copy tokens (not touched: --svc-h1/h2/h3/label, which govern headings/eyebrows/
   buttons/nav and are intentionally untouched) raises every consumer of --svc-body
   (hero description, "call us" copy, process-step text, list text, split-column copy,
   FAQ answers, final-CTA supporting line) to a readable size without a blind `p` rule
   that could reach outside .svc-page and affect the homepage, header, or footer. */
@media(max-width:900px){
  .svc-page{--svc-body:18px;--svc-body-lh:1.6}
}

.svc-page .svc-label{font-family:var(--disp);font-size:var(--svc-label);font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:var(--blue-500);margin:0}

.svc-page .svc-grain{position:absolute;inset:0;pointer-events:none;opacity:.08;mix-blend-mode:soft-light;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E")}

/* A centered heading flanked by hairline rules — reused by "What Happens Next?" and the FAQ. */
.svc-page .svc-rule-head{display:flex;align-items:center;justify-content:center;gap:clamp(14px,2vw,26px);margin-bottom:clamp(1.6rem,3vw,2.2rem);text-align:center}
/* Matches the homepage/Related-Services .titlerow treatment exactly (same fade-to-transparent
   gradient, same size range) instead of the old solid bar, so every flanking-line heading on
   the site reads as one consistent component. */
.svc-page .svc-rule-head .ln{flex:0 0 clamp(30px,4vw,64px);height:2px;background:linear-gradient(90deg,transparent,var(--svc-water))}
.svc-page .svc-rule-head .ln:last-child{background:linear-gradient(90deg,var(--svc-water),transparent)}
.svc-page .svc-rule-head h2{font-size:var(--svc-h2);font-weight:700;color:inherit;line-height:1.05;margin:0}

@media(max-width:480px){
  .svc-page .svc-rule-head{gap:10px}
  .svc-page .svc-rule-head .ln{flex-basis:16px}
  .svc-page .svc-rule-head h2{font-size:clamp(1.15rem,5.5vw,1.4rem)}
}

/* Small blue underline used beneath a couple of light-section H2s, restrained (no decoration overload). */
.svc-page .svc-uline{display:block;width:40px;height:3px;background:var(--svc-water);margin:.6rem 0 1.1rem}

@media(prefers-reduced-motion:no-preference){
  .svc-page [data-reveal]{opacity:0;transform:translateY(20px);transition:opacity .8s var(--svc-ease),transform .8s var(--svc-ease)}
  .svc-page [data-reveal].is-visible{opacity:1;transform:none}
}

/* ================= COMPACT DARK SERVICE INTRO =================
   Replaces the homepage-style photo hero for this service page only. Dark field with the
   same diagonal navy/blue gradient homepage dark sections use (.why, .sec), restrained
   grain, no photography — the homepage keeps the large photo hero for itself. */
.svc-page .svc-intro{position:relative;overflow:hidden;background-color:var(--svc-charcoal);background-image:linear-gradient(140deg,#071126 0%,#153A6B 52%,#0A1B38 100%);padding:var(--svc-py-lg) 0}
.svc-page .svc-intro-grid{position:relative;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(260px,.8fr);gap:clamp(2.5rem,6vw,5rem);align-items:center}
.svc-page .svc-intro-copy .svc-label{margin-bottom:1rem}
.svc-page .svc-intro-copy h1{font-family:var(--disp);text-transform:uppercase;color:#fff;font-size:var(--svc-h1);line-height:1.02;margin:0 0 1.1rem}
.svc-page .svc-intro-copy>p:not(.svc-label){color:#dbe6f2;font-size:var(--svc-body);line-height:var(--svc-body-lh);max-width:46ch;margin:0 0 1.6rem}
.svc-page .svc-intro-facts{display:flex;flex-direction:column;gap:1.5rem;border-left:1px solid rgba(220,229,234,.14);padding-left:clamp(1.6rem,3vw,2.4rem)}

/* Credential block — integrated into the hero via a single accent rule, not a boxed card */
.svc-page .svc-credential{padding-left:1.1rem;border-left:2px solid var(--svc-water)}
.svc-page .svc-credential-head{margin-bottom:.9rem}
.svc-page .svc-credential-head span{font-family:var(--disp);text-transform:uppercase;letter-spacing:.05em;font-weight:700;font-size:1.05rem;color:#fff}
.svc-page .svc-credential-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.55rem}
.svc-page .svc-credential-list li{display:flex;align-items:baseline;justify-content:space-between;gap:.8rem;font-size:.9rem}
.svc-page .svc-credential-name{color:#eef2f5;font-weight:600}
.svc-page .svc-credential-num{color:var(--blue-400);font-size:.8rem;font-weight:600;white-space:nowrap}

.svc-page .svc-fact-row{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.svc-page .svc-fact{display:flex;flex-direction:column;align-items:flex-start}
.svc-page .svc-fact span{font-family:var(--disp);text-transform:uppercase;letter-spacing:.04em;font-weight:600;font-size:.78rem;line-height:1.3;color:#dbe4ec}
/* Compact single-line proof variant — hidden by default, only ever shown by a page's own
   mobile-only override (see well-drilling's scoped <style> block). */
.svc-page .svc-fact-line{display:none}

@media(max-width:900px){
  .svc-page .svc-intro-grid{grid-template-columns:1fr;gap:2.2rem}
  .svc-page .svc-intro-facts{border-left:0;border-top:1px solid rgba(220,229,234,.14);padding-left:0;padding-top:1.6rem}
  .svc-page .svc-fact-row{grid-template-columns:1fr 1fr}
}
@media(max-width:520px){
  .svc-page .svc-intro-copy h1{font-size:clamp(2rem,8.8vw,2.55rem)}
}

/* ================= ONE CALL. ONE POINT OF CONTACT. =================
   Compact single dark band, same gradient family as the intro. No portrait — none exists
   and none was generated. */
.svc-page .svc-answer{background-color:var(--svc-charcoal);background-image:linear-gradient(140deg,#071126 0%,#153A6B 52%,#0A1B38 100%);padding:var(--svc-py-tight) 0;border-top:1px solid rgba(43,131,255,.16)}
.svc-page .svc-answer .cap{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(280px,.9fr);gap:clamp(1.6rem,3.5vw,3rem);align-items:center}
.svc-page .svc-answer h2{font-family:var(--disp);text-transform:uppercase;color:#fff;font-size:var(--svc-h2);line-height:1.05;margin:0}
.svc-page .svc-answer-copy p{font-family:var(--sans);color:#dbe6f2;font-size:var(--svc-body);line-height:var(--svc-body-lh);margin:0}
.svc-page .svc-answer-who{margin-top:.85rem;padding-top:.7rem;border-top:1px solid rgba(220,229,234,.18)}
.svc-page .svc-answer-who span{font-family:var(--disp);text-transform:uppercase;letter-spacing:.16em;font-size:.68rem;color:var(--blue-400)}

@media(max-width:900px){
  .svc-page .svc-answer .cap{grid-template-columns:1fr;gap:1rem}
  .svc-page .svc-answer h2{font-size:clamp(1.42rem,6vw,1.9rem)}
}

/* ---------- FIRST CONTENT TRANSITION (tonal seam, no line art) ---------- */
.svc-page .svc-transition{height:clamp(20px,2.2vw,32px);background:linear-gradient(180deg,var(--svc-charcoal) 0%,rgba(255,255,255,0) 100%)}

/* ================= GET YOUR WELL PROJECT MOVING ================= */
.svc-page .svc-move{padding:var(--svc-py) 0;background:var(--stone-050)}
.svc-page .svc-move-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(320px,.95fr);gap:clamp(1.8rem,4vw,3.2rem);align-items:center}
.svc-page .svc-move-copy h2{font-size:var(--svc-h2);font-weight:700;color:var(--ink);line-height:1.05;margin:0 0 .7rem}
.svc-page .svc-move-copy>p{color:var(--body);font-size:var(--svc-body);line-height:var(--svc-body-lh);max-width:46ch;margin:0 0 .9rem}
.svc-page .svc-move-types{font-family:var(--disp);text-transform:uppercase;letter-spacing:.08em;font-weight:600;font-size:.86rem;color:var(--navy-800);margin:.9rem 0 1rem}
.svc-page .svc-move-media{position:relative;margin:0;border-radius:4px;overflow:hidden;box-shadow:0 24px 56px rgba(11,20,32,.18);aspect-ratio:4/5;max-height:560px}
.svc-page .svc-move-media img,.svc-page .svc-move-media video{width:100%;height:100%;object-fit:cover;display:block;background:#dfe3e6}
.svc-page .svc-move-duration{position:absolute;left:14px;bottom:14px;font-family:var(--disp);font-size:.72rem;font-weight:600;letter-spacing:.06em;color:#fff;background:rgba(8,13,18,.55);padding:.3rem .6rem;border-radius:3px;pointer-events:none}
/* Tap-to-play affordance — only shown by JS if autoplay was actually blocked */
.svc-page .svc-move-media.svc-video-blocked{cursor:pointer}
.svc-page .svc-move-media.svc-video-blocked::after{content:"";position:absolute;inset:0;margin:auto;width:64px;height:64px;border-radius:50%;background:rgba(8,13,18,.55) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E") center/26px no-repeat;pointer-events:none}

@media(max-width:900px){
  .svc-page .svc-move-grid{grid-template-columns:1fr;gap:0}
  .svc-page .svc-move-copy h2{font-size:clamp(1.42rem,6vw,1.9rem)}
  .svc-page .svc-move-media{order:2;margin-top:.25rem;max-height:none}
}

/* ================= WHAT HAPPENS NEXT — 3-step editorial process ================= */
.svc-page .svc-steps{padding:var(--svc-py-lg) 0;background:var(--svc-charcoal)}
.svc-page .svc-steps .svc-rule-head h2{color:#fff}
.svc-page .svc-steps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(2rem,4vw,3rem)}
.svc-page .svc-step{padding-top:1.3rem;border-top:2px solid var(--svc-water)}
.svc-page .svc-step-num{display:block;font-family:var(--disp);font-weight:700;font-size:clamp(2rem,3.4vw,2.7rem);line-height:1;color:var(--svc-water);margin-bottom:.5rem}
.svc-page .svc-step h3{font-size:var(--svc-h3);font-weight:600;color:#fff;margin-bottom:.6rem}
.svc-page .svc-step p{color:#dbe6f2;font-size:var(--svc-body);line-height:1.6;margin:0 0 .8rem}
.svc-page .svc-step-note{font-size:.86rem;color:#a8b8c2;border-left:2px solid var(--svc-water);padding-left:.8rem;margin-bottom:0}

@media(max-width:900px){
  .svc-page .svc-steps-grid{grid-template-columns:1fr;gap:2.2rem}
}

/* ================= COST + GEOLOGY — side-by-side editorial split ================= */
.svc-page .svc-split{padding:var(--svc-py) 0;background:var(--stone-050)}
.svc-page .svc-split-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,4vw,3.4rem)}
.svc-page .svc-split-col{position:relative;max-width:52ch}
.svc-page .svc-split-col:first-child{padding-right:clamp(1.5rem,3vw,2.5rem);border-right:1px solid var(--stone-200)}
.svc-page .svc-split-col:last-child{padding-left:clamp(1.5rem,3vw,2.5rem)}
.svc-page .svc-split-col h2{font-size:var(--svc-h2);font-weight:700;color:var(--ink);line-height:1.05;margin:0}
.svc-page .svc-split-col p{color:var(--body);font-size:var(--svc-body);line-height:var(--svc-body-lh);margin:0 0 1rem}
.svc-page .svc-split-close{font-weight:600;color:var(--navy-800);margin-bottom:0!important}
.svc-page .svc-split-col .src{color:#6c7a86;font-size:.82rem;margin:0}
.svc-page .svc-split-media{margin:0 0 1.1rem;border-radius:4px;overflow:hidden;box-shadow:0 16px 40px rgba(11,20,32,.16)}
.svc-page .svc-split-media img{width:100%;height:auto;display:block}

@media(max-width:900px){
  .svc-page .svc-split-grid{grid-template-columns:1fr;gap:2.4rem}
  .svc-page .svc-split-col{max-width:none}
  .svc-page .svc-split-col:first-child{padding-right:0;border-right:0;padding-bottom:2rem;border-bottom:1px solid var(--stone-200)}
  .svc-page .svc-split-col:last-child{padding-left:0}
}

/* ================= COMMON QUESTIONS BEFORE DRILLING — accordion ================= */
.svc-page .svc-faq{padding:var(--svc-py-lg) 0;background:var(--stone-050)}
.svc-page .svc-faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(2rem,4vw,3.2rem);max-width:1040px;margin:0 auto}
.svc-page .svc-faq-item{border-bottom:1px solid var(--stone-200)}
.svc-page .svc-faq-q{display:flex;align-items:center;justify-content:space-between;gap:1rem;width:100%;text-align:left;background:none;border:0;cursor:pointer;padding:.9rem 0;font-family:var(--sans);font-size:var(--svc-h3);font-weight:600;color:var(--ink);-webkit-tap-highlight-color:transparent}
.svc-page .svc-faq-q svg{flex:none;width:20px;height:20px;color:var(--svc-water);transition:transform .3s var(--svc-ease)}
.svc-page .svc-faq-q[aria-expanded="true"] svg{transform:rotate(180deg)}
.svc-page .svc-faq-a{max-height:0;overflow:hidden;transition:max-height .35s var(--svc-ease)}
.svc-page .svc-faq-a>p{color:var(--body);font-size:var(--svc-body);line-height:1.6;margin:0;padding:0 0 1.2rem}

@media(max-width:900px){
  .svc-page .svc-faq-grid{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  .svc-page .svc-faq-a,.svc-page .svc-faq-q svg{transition-duration:.01ms}
}

/* ================= FINAL SALES CTA — tightened substantially; shared .fcta rule in site.css untouched,
   overridden here via a more specific selector (padding only — no edit to the frozen homepage rule). ================= */
.svc-page .fcta.svc-fcta .cap{padding:clamp(1.6rem,3vw,2.2rem) var(--pad)}
.svc-page .svc-fcta-inner{display:flex;align-items:center;gap:clamp(1rem,2.2vw,1.6rem);text-align:left;justify-content:center;flex-wrap:wrap}
.svc-page .svc-fcta-inner .msg{margin:0;text-align:left}
.svc-page .svc-fcta-inner .msg h2{font-size:var(--svc-h2);line-height:1.05;margin:0 0 .3rem}
.svc-page .svc-fcta-inner .msg p{font-size:var(--svc-body)!important;margin:0!important;max-width:44ch}
.svc-page .svc-fcta-btn{flex:none;margin-left:auto}

@media(max-width:900px){
  .svc-page .svc-fcta-inner{flex-direction:column;text-align:center}
  .svc-page .svc-fcta-inner .msg{text-align:center}
  .svc-page .svc-fcta-inner .msg p{margin:0 auto!important}
  .svc-page .svc-fcta-btn{margin-left:0}
}

/* ================= RELATED SERVICES — real photo thumbnails ================= */
.svc-page .svc-rel-card{display:flex;flex-direction:column;padding:0;overflow:hidden}
.svc-page .svc-rel-media{aspect-ratio:16/10;overflow:hidden;background:#e4e8eb}
.svc-page .svc-rel-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s var(--svc-ease)}
.svc-page .svc-rel-card:hover .svc-rel-media img{transform:scale(1.05)}
.svc-page .svc-rel-body{padding:clamp(16px,1.8vw,22px)}
.svc-page .svc-rel-body h3{font-size:var(--svc-h3);margin:0 0 .3rem}
.svc-page .svc-rel-body p{margin:0 0 .6rem!important}

@media(max-width:900px){
  .svc-page .svc-rel-grid{grid-template-columns:1fr}
}

/* Well Drilling thumbnail in Related Services: default center crop shows only the mast,
   cutting off the water spraying at the base of the rig — pull the crop down. Applies at
   every width; the aspect-ratio (16/10) doesn't change between mobile and desktop, so the
   same crop problem exists on both. */
.svc-page .svc-rel-media img[src="/WellDrilling.jpeg"]{object-position:50% 95%}

@media(prefers-reduced-motion:reduce){
  .svc-page .svc-rel-media img{transition:none}
}

/* ================= MOBILE-ONLY CONTENT VARIANTS =================
   Shared "-m" naming convention: hidden by default (desktop and any page that doesn't
   opt in never shows this text). A page shows them — and hides the "-orig" counterpart —
   only inside its own scoped mobile media query (see well-drilling's <style> block).
   Only "Why Every Well Is Different" still uses this pattern — the video, one-call, and
   cost copy are now identical on both breakpoints and no longer need a variant. */
.svc-page .svc-diff-m,
.svc-page .svc-faq-cost-m,
.svc-page .svc-faq-depth-m{display:none}