/* ============================================================
   pages.css — content/SEO pages ported from the production site
   (sparkplugcontent.com). Layers on styles.css and reuses its
   tokens and components (.shell .section .heading .eyebrow .btn
   .card .grid). Nothing here overrides the homepage.

   Deliberately NO [data-reveal] on these pages: that rule starts
   at opacity:0 and only paints once script.js runs. These pages
   exist to rank, so their copy is visible with zero JS.
   ============================================================ */

/* ─────────── page header (compact hero) ─────────── */
.phead{
  /* the header is fixed and ~72px tall, so this is clearance + breathing room */
  padding-top:clamp(96px,8vw,118px);
  padding-bottom:clamp(40px,5vw,64px);
  border-bottom:1px solid var(--mist);
  background:linear-gradient(180deg,var(--wash) 0%,var(--white) 100%);
}
.phead__flag{
  display:inline-flex;align-items:center;gap:8px;
  border:1px solid var(--copper);
  color:var(--copper-dark);
  background:var(--white);
  border-radius:9999px;
  padding:6px 14px;
  font-size:12px;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;
  margin-bottom:20px;
}
.phead__flag::before{
  content:"";width:6px;height:6px;border-radius:50%;
  background:var(--copper);flex:0 0 auto;
}
.phead h1{margin:0}
.phead__lede{
  margin:22px 0 0;max-width:62ch;
  font-size:clamp(17px,1.7vw,21px);line-height:1.55;color:var(--granite);
}
.phead__lede strong{color:var(--charcoal);font-weight:600}
.phead__btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}

/* breadcrumb */
.crumb{
  font-size:13px;color:var(--granite);margin-bottom:22px;
  display:flex;flex-wrap:wrap;gap:6px;align-items:center;
}
.crumb a{color:var(--granite);text-decoration:none;border-bottom:1px solid var(--mist)}
.crumb a:hover{color:var(--copper-dark);border-bottom-color:var(--copper)}
.crumb span[aria-current]{color:var(--charcoal);font-weight:500}

/* ─────────── prose ─────────── */
.prose{max-width:72ch}
.prose p{
  font-size:clamp(16px,1.5vw,18px);line-height:1.7;color:var(--granite);
  margin:0 0 1.15em;
}
.prose p:last-child{margin-bottom:0}
.prose strong{color:var(--charcoal);font-weight:600}
.prose a{color:var(--copper-dark);text-decoration:none;border-bottom:1px solid var(--copper)}
.prose a:hover{background:var(--wash)}
.prose--wide{max-width:86ch}

/* ─────────── generic feature cards ─────────── */
.fgrid{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));margin-top:38px}
.fcard-p{
  background:var(--white);border:1px solid var(--mist);border-radius:10px;
  padding:24px;transition:border-color .25s var(--ease),transform .25s var(--ease);
}
.fcard-p:hover{border-color:var(--copper);transform:translateY(-2px)}
.fcard-p h3{
  margin:0 0 8px;font-size:18px;font-weight:700;letter-spacing:-0.02em;color:var(--ink);
}
.fcard-p p{margin:0;font-size:15px;line-height:1.6;color:var(--granite)}
.fcard-p__k{
  display:block;font-size:11px;font-weight:600;letter-spacing:0.14em;
  text-transform:uppercase;color:var(--copper-dark);margin-bottom:10px;
}

/* ─────────── work / proof list ─────────── */
.proof{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));margin-top:34px}
.proof__item{
  border:1px solid var(--mist);border-radius:10px;padding:22px;
  display:flex;flex-direction:column;gap:8px;background:var(--white);
  transition:border-color .25s var(--ease);
}
.proof__item:hover{border-color:var(--copper)}
.proof__item h3{margin:0;font-size:17px;font-weight:700;letter-spacing:-0.02em;color:var(--ink)}
.proof__item p{margin:0;font-size:14.5px;line-height:1.6;color:var(--granite)}
.proof__link{
  margin-top:auto;font-size:13px;font-weight:600;color:var(--copper-dark);
  text-decoration:none;letter-spacing:0.02em;
}
.proof__link:hover{text-decoration:underline}

/* ─────────── testimonials ─────────── */
.quotes{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));margin-top:34px}
.quote{
  border:1px solid var(--mist);border-left:3px solid var(--copper);
  border-radius:0 10px 10px 0;padding:24px;background:var(--white);
}
.quote blockquote{
  margin:0 0 14px;font-size:16.5px;line-height:1.6;color:var(--charcoal);
}
.quote cite{display:block;font-style:normal;font-size:14px;font-weight:700;color:var(--ink)}
.quote span{display:block;font-size:13px;color:var(--granite);margin-top:2px}

/* ─────────── FAQ ─────────── */
.faq{margin-top:34px;max-width:80ch}
.faq details{border-bottom:1px solid var(--mist);padding:4px 0}
.faq summary{
  cursor:pointer;list-style:none;padding:18px 34px 18px 0;position:relative;
  font-size:clamp(16px,1.6vw,18.5px);font-weight:600;color:var(--ink);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:6px;top:50%;
  width:9px;height:9px;margin-top:-6px;
  border-right:2px solid var(--copper);border-bottom:2px solid var(--copper);
  transform:rotate(45deg);transition:transform .25s var(--ease);
}
.faq details[open] summary::after{transform:rotate(-135deg);margin-top:-2px}
.faq summary:focus-visible{outline:2px solid var(--copper);outline-offset:3px;border-radius:4px}
.faq .faq__a{padding:0 0 20px;font-size:16px;line-height:1.7;color:var(--granite);max-width:72ch}
.faq .faq__a a{color:var(--copper-dark);border-bottom:1px solid var(--copper);text-decoration:none}

/* ─────────── pricing tiers ─────────── */
.tiers{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));margin-top:34px}
.tier{
  border:1px solid var(--mist);border-radius:12px;padding:26px;
  display:flex;flex-direction:column;background:var(--white);
}
.tier--feature{border-color:var(--ink);box-shadow:0 10px 34px rgba(0,0,0,0.07)}
.tier__flag{
  align-self:flex-start;font-size:11px;font-weight:700;letter-spacing:0.12em;
  text-transform:uppercase;color:var(--copper-dark);background:var(--wash);
  border-radius:9999px;padding:5px 11px;margin-bottom:14px;
}
.tier h3{margin:0 0 12px;font-size:15px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--ink)}
.tier__price{display:flex;align-items:baseline;flex-wrap:wrap;gap:5px;margin-bottom:4px}
.tier__price b{font-size:clamp(30px,3.6vw,40px);font-weight:700;letter-spacing:-0.04em;color:var(--ink);line-height:1}
.tier__price i{font-style:normal;font-size:14px;color:var(--granite)}
.tier__note{font-size:13px;color:var(--granite);margin:0 0 4px;line-height:1.5}
.tier__cmp{font-size:12px;color:var(--granite);opacity:0.85;margin:0 0 18px;line-height:1.5}
.tier ul{list-style:none;margin:0 0 22px;padding:0;display:flex;flex-direction:column;gap:9px}
.tier li{position:relative;padding-left:22px;font-size:14.5px;line-height:1.5;color:var(--granite)}
.tier li::before{
  content:"";position:absolute;left:0;top:6px;width:6px;height:10px;
  border-right:2px solid var(--copper);border-bottom:2px solid var(--copper);
  transform:rotate(45deg);
}
.tier .btn{margin-top:auto;width:100%}

/* pricing tab-style nav (real anchors, not JS tabs) */
.psec{scroll-margin-top:96px}
.pnav{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.pnav a{
  border:1px solid var(--mist);border-radius:9999px;padding:9px 18px;
  font-size:14px;font-weight:600;color:var(--charcoal);text-decoration:none;
  transition:border-color .2s var(--ease),color .2s var(--ease);
}
.pnav a:hover{border-color:var(--copper);color:var(--copper-dark)}

/* ─────────── numbered steps ─────────── */
.steps{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));margin-top:34px;counter-reset:st}
.step{padding-top:16px;border-top:2px solid var(--ink)}
.step__n{
  display:block;font-size:12px;font-weight:700;letter-spacing:0.12em;
  color:var(--copper-dark);margin-bottom:10px;
}
.step h3{margin:0 0 8px;font-size:18px;font-weight:700;letter-spacing:-0.02em;color:var(--ink)}
.step p{margin:0;font-size:15px;line-height:1.6;color:var(--granite)}

/* ─────────── local stats strip (honest numbers only) ─────────── */
.lstats{
  display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  margin-top:36px;padding:30px 0;border-block:1px solid var(--mist);
}
.lstat b{display:block;font-size:clamp(28px,3.4vw,40px);font-weight:700;letter-spacing:-0.04em;color:var(--ink);line-height:1}
.lstat span{display:block;margin-top:7px;font-size:13px;color:var(--granite);letter-spacing:0.02em}

/* ─────────── quote form ─────────── */
.qform{
  max-width:720px;border:1px solid var(--mist);border-radius:12px;
  padding:clamp(22px,3vw,36px);background:var(--white);
}
.qform fieldset{border:0;margin:0 0 26px;padding:0}
.qform legend{
  font-size:12px;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--copper-dark);margin-bottom:16px;padding:0;
}
.qrow{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.qfield{display:flex;flex-direction:column;gap:7px;margin-bottom:16px}
.qfield label{font-size:14px;font-weight:600;color:var(--charcoal)}
.qfield input,.qfield select,.qfield textarea{
  font:inherit;font-size:15px;color:var(--charcoal);
  background:var(--white);border:1px solid var(--mist);border-radius:8px;
  padding:11px 13px;width:100%;
}
.qfield textarea{min-height:120px;resize:vertical}
.qfield input:focus,.qfield select:focus,.qfield textarea:focus{
  outline:2px solid var(--copper);outline-offset:1px;border-color:var(--copper);
}
.qchecks{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.qcheck{display:flex;align-items:center;gap:9px;font-size:15px;color:var(--charcoal);cursor:pointer}
.qcheck input{width:17px;height:17px;accent-color:var(--copper);flex:0 0 auto}
.qhint{font-size:13px;color:var(--granite);margin:-6px 0 14px}
.qform__note{font-size:13px;color:var(--granite);margin:16px 0 0;text-align:center}
.qstatus{margin-top:16px;font-size:15px;font-weight:600}
.qstatus[data-state="ok"]{color:#1f7a4d}
.qstatus[data-state="err"]{color:#b3261e}
.qstatus a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.qform[hidden],.qstatus[hidden],.qdone[hidden]{display:none}
/* Web3Forms honeypot — must never be visible or reachable */
.qbot{display:none !important}
.qdone{
  max-width:720px;border:1px solid var(--mist);border-radius:12px;
  padding:clamp(28px,4vw,44px);background:var(--white);text-align:center;
}
.qdone:focus{outline:none}
.qdone__mark{
  width:52px;height:52px;margin:0 auto 18px;border-radius:50%;
  display:grid;place-items:center;background:var(--copper);color:#fff;
  font-size:26px;line-height:1;font-weight:700;
}
.qdone__title{
  font-size:clamp(24px,3vw,32px);font-weight:700;letter-spacing:-0.03em;
  color:var(--ink);margin:0 0 12px;
}
.qdone__sub{font-size:16px;color:var(--granite);line-height:1.6;margin:0}
.qdone__sub a{color:var(--copper-dark);font-weight:600}

/* ─────────── legal pages ─────────── */
.legal{max-width:74ch}
.legal h2{
  margin:38px 0 12px;font-size:clamp(19px,2.1vw,24px);font-weight:700;
  letter-spacing:-0.02em;color:var(--ink);
}
.legal h2:first-of-type{margin-top:0}
.legal p{font-size:16px;line-height:1.7;color:var(--granite);margin:0 0 1em}
.legal a{color:var(--copper-dark);text-decoration:none;border-bottom:1px solid var(--copper)}
.legal__stamp{font-size:13px;color:var(--granite);margin-bottom:34px}

/* ─────────── closing CTA ─────────── */
.pcta{
  border-top:1px solid var(--mist);
  background:var(--wash);
  padding-block:clamp(56px,7vw,92px);
  text-align:center;
}
.pcta h2{margin:0 0 14px}
.pcta p{margin:0 auto 28px;max-width:56ch;font-size:clamp(16px,1.6vw,19px);line-height:1.6;color:var(--granite)}
.pcta__btns{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;align-items:center}
.pcta__tel{font-size:15px;color:var(--granite)}
.pcta__tel a{color:var(--copper-dark);font-weight:600;text-decoration:none;border-bottom:1px solid var(--copper)}

/* ─────────── site footer (3 columns + service areas) ─────────── */
.sfoot{border-top:1px solid var(--mist);background:var(--white);padding-block:clamp(48px,6vw,72px)}
.sfoot__grid{
  display:grid;gap:36px;
  grid-template-columns:minmax(230px,1.4fr) repeat(3,minmax(150px,1fr));
}
.sfoot__brand p{margin:14px 0 0;font-size:14.5px;line-height:1.6;color:var(--granite);max-width:34ch}
.sfoot__brand .sfoot__contact{margin-top:14px;font-size:14.5px;color:var(--granite)}
.sfoot__brand a{color:var(--copper-dark);text-decoration:none}
.sfoot__brand a:hover{text-decoration:underline}
.sfoot h2{
  font-size:11px;font-weight:700;letter-spacing:0.16em;text-transform:uppercase;
  color:var(--ink);margin:0 0 14px;
}
.sfoot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.sfoot ul a{font-size:14.5px;color:var(--granite);text-decoration:none}
.sfoot ul a:hover{color:var(--copper-dark);text-decoration:underline}
.sfoot__bottom{
  margin-top:44px;padding-top:22px;border-top:1px solid var(--mist);
  display:flex;flex-wrap:wrap;gap:10px 20px;align-items:center;justify-content:space-between;
  font-size:13.5px;color:var(--granite);
}
.sfoot__bottom a{color:var(--granite);text-decoration:none}
.sfoot__bottom a:hover{color:var(--copper-dark);text-decoration:underline}

@media (max-width:900px){
  .sfoot__grid{grid-template-columns:repeat(2,minmax(140px,1fr))}
  .sfoot__brand{grid-column:1/-1}
}
@media (max-width:560px){
  .sfoot__grid{grid-template-columns:1fr}
  .phead__btns .btn{width:100%}
}

/* ─────────── inbound anchor targets ───────────
   /index.html#our-work, #about and #faq are live inbound links from the
   production site and from every ported page. The nav is sticky, so give
   anchor targets clearance instead of letting the header cover them. */
.anchor-offset{display:block;height:0;scroll-margin-top:96px}
#about,#faq,#our-work,#work,#services,#pricing,#contact,#testimonials{scroll-margin-top:96px}

/* every tier reads as a starting price */
.tier__pre{font-style:normal;font-size:14px;color:var(--granite)}
.tiers__note{
  margin-top:20px;
  font-size:13px;
  color:var(--granite);
  line-height:1.6;
}