/* ============================================================
   SERVICE PAGE TEMPLATE — one stylesheet for every individual
   service page (meta-ads, google-ads, seo, geo, web-design).
   The page follows the visitor's own story:
     hero       the pain point as the headline, "Talk to us about …" button
     pairs      each pain point beside what we do about it
     outcomes   what changes when they work with us (navy)
     steps      how we run it
     faq        questions on the left (accordion from css/faq.css),
                an "Ask us a question" form on the right
   then the closing banner (css/closing.css) with the free audit button.
   ============================================================ */

/* --- Hero --- */
.sp-hero {
  padding: calc(var(--nav-height) + 80px) 0 100px;
  background:
    radial-gradient(ellipse 60% 80% at 85% 10%, rgba(46, 101, 184, 0.35) 0%, rgba(46, 101, 184, 0) 70%),
    linear-gradient(180deg, var(--dark) 0%, var(--navy) 100%);
  color: var(--white);
}
.sp-crumb { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 2rem; font-size: 0.8rem; font-weight: 600; color: rgba(255, 255, 255, 0.6); }
.sp-crumb a { color: var(--light-blue); transition: color var(--transition); }
.sp-crumb a:hover,
.sp-crumb a:focus-visible { color: var(--white); }

.sp-hero h1 { margin: 0 0 1.25rem; font-size: clamp(2.5rem, 6.4vw, 5rem); line-height: 1.03; letter-spacing: -0.03em; color: var(--white); }
.sp-hero-name {
  display: block;
  margin-bottom: 1rem;
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--light-blue);
}
.sp-hero-sub { max-width: 38rem; margin: 0 0 2.25rem; font-size: 1.2rem; line-height: 1.6; color: rgba(255, 255, 255, 0.85); }
.sp-hero-btn { gap: 0.75rem; background: var(--white); border-color: var(--white); color: var(--navy); }
.sp-hero-btn svg { width: 1.2rem; height: 1.2rem; transition: translate var(--transition); }
.sp-hero-btn:hover { background: var(--off-white); border-color: var(--off-white); transform: translateY(-2px); box-shadow: 0 12px 30px rgba(13, 31, 66, 0.45); }
.sp-hero-btn:hover svg { translate: 4px 0; }
.sp-hero-btn:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; }

/* --- Shared section heading and intro --- */
.sp-heading { max-width: 44rem; margin: 0.5rem 0 2.5rem; font-size: clamp(1.7rem, 3.2vw, 2.5rem); line-height: 1.15; letter-spacing: -0.02em; }
.sp-lead { max-width: 44rem; margin: -1.25rem 0 3rem; font-size: 1.1rem; line-height: 1.7; }

/* --- Pain point → what we do. Each row: the problem in the customer's
   words on the left, the fix on navy on the right, joined by a dotted
   line with an arrowhead. --- */
.sp-pairs { padding: 100px 0; background: var(--white); }
.sp-pairs-list { display: grid; gap: 1.25rem; margin: 0; padding: 0; list-style: none; }
.sp-pair { --gap: 4.5rem; display: grid; grid-template-columns: minmax(0, 1fr) var(--gap) minmax(0, 1fr); align-items: stretch; }

.sp-pain {
  grid-column: 1;
  padding: 1.75rem 1.75rem 1.6rem;
  border-left: 4px solid var(--light-blue);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  background: var(--off-white);
}
.sp-pain-quote { margin: 0 0 0.6rem; font-size: clamp(1.15rem, 1.7vw, 1.4rem); font-weight: 800; line-height: 1.25; letter-spacing: -0.01em; color: var(--navy); }
.sp-pain p:last-child { margin: 0; font-size: 0.98rem; line-height: 1.65; }

.sp-cure {
  position: relative;
  grid-column: 3;
  padding: 1.75rem 1.75rem 1.6rem;
  border-radius: var(--radius-lg);
  background: var(--navy);
  color: var(--white);
}
/* The connector: a dotted line across the gap, ending in an arrowhead */
.sp-cure::before {
  content: "";
  position: absolute;
  top: 50%;
  right: calc(100% + 0.9rem);
  width: calc(var(--gap) - 1.5rem);
  border-top: 4px dotted var(--light-blue);
  translate: 0 -2px;
}
.sp-cure::after {
  content: "";
  position: absolute;
  top: 50%;
  right: calc(100% + 0.55rem);
  width: 0.65rem;
  height: 0.65rem;
  border-top: 4px solid var(--blue);
  border-right: 4px solid var(--blue);
  translate: 0 -50%;
  rotate: 45deg;
}
.sp-cure-label { display: block; margin-bottom: 0.6rem; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--light-blue); }
.sp-cure-title { margin: 0 0 0.5rem; font-size: clamp(1.15rem, 1.7vw, 1.4rem); font-weight: 800; line-height: 1.25; letter-spacing: -0.01em; color: var(--white); }
.sp-cure p:last-child { margin: 0; font-size: 0.98rem; line-height: 1.65; color: rgba(255, 255, 255, 0.82); }

/* Icon at the top of each card: pale tile on the problem, glass tile on the fix */
.sp-icon {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: 1.1rem;
  border-radius: 0.8rem;
}
.sp-icon svg { width: 1.6rem; height: 1.6rem; }
.sp-pain .sp-icon { border: 1px solid var(--border); background: var(--white); color: var(--blue); }
.sp-cure .sp-icon { background: rgba(255, 255, 255, 0.12); color: var(--white); }

/* --- How we run it: four steps --- */
.sp-steps { padding: 100px 0; background: var(--off-white); }
.sp-steps-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; margin: 0; padding: 0; list-style: none; }
.sp-steps-list li {
  padding: 1.6rem 1.5rem 1.7rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--white);
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text-muted);
}
.sp-steps-list span { display: block; font-size: 2.6rem; font-weight: 800; line-height: 1; letter-spacing: -0.04em; color: var(--light-blue); }
.sp-steps-list strong { display: block; margin: 1rem 0 0.35rem; font-size: 1.15rem; font-weight: 800; color: var(--navy); }

/* --- The outcomes: big statements, two by two, on navy --- */
.sp-outcomes {
  padding: 110px 0;
  background:
    radial-gradient(ellipse 55% 90% at 92% 40%, rgba(46, 101, 184, 0.3) 0%, rgba(46, 101, 184, 0) 70%),
    var(--navy);
  color: var(--white);
}
.sp-outcomes .section-label { color: var(--light-blue); }
.sp-outcomes .sp-heading { color: var(--white); }
.sp-outcomes-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 4rem; margin: 0; padding: 0; list-style: none; }
.sp-outcome { padding: 2rem 0 2.25rem; border-top: 2px solid rgba(255, 255, 255, 0.3); }
.sp-outcome h3 { margin: 0 0 0.6rem; font-size: clamp(1.5rem, 2.6vw, 2.1rem); font-weight: 800; line-height: 1.15; letter-spacing: -0.02em; color: var(--white); text-wrap: balance; }
.sp-outcome p { max-width: 30rem; margin: 0; font-size: 1.05rem; line-height: 1.65; color: rgba(255, 255, 255, 0.82); }

/* --- Questions, with the "Ask us a question" form beside them --- */
.sp-faq { padding: 100px 0; background: var(--white); }
.sp-faq-inner { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: start; gap: 4rem; }
.sp-faq .sp-heading { margin-bottom: 2rem; }

.sp-ask {
  position: sticky;
  top: calc(var(--nav-height) + 1.5rem);
  padding: 2rem 2rem 2.1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--off-white);
}
.sp-ask-title { margin: 0 0 0.4rem; font-size: clamp(1.4rem, 2.2vw, 1.8rem); line-height: 1.15; letter-spacing: -0.02em; }
.sp-ask-note { margin: 0 0 1.5rem; font-size: 0.95rem; }
.sp-ask .form-group { margin-bottom: 1.1rem; }
.sp-ask label { display: block; margin-bottom: 0.4rem; font-size: 0.85rem; font-weight: 700; color: var(--navy); }
.sp-ask-optional { font-weight: 500; color: var(--text-muted); }
.sp-ask input,
.sp-ask textarea { width: 100%; background: var(--white); }
.sp-ask textarea { min-height: 7.5rem; }
.sp-ask-btn { width: 100%; justify-content: center; margin-top: 0.4rem; }
/* Spam trap: real visitors never see or reach this field */
.sp-ask-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ============ Smaller screens ============ */
@media (max-width: 1000px) {
  .sp-steps-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sp-pair { --gap: 3rem; }
}
@media (max-width: 900px) {
  .sp-hero { padding: calc(var(--nav-height) + 48px) 0 68px; }
  .sp-pairs,
  .sp-steps,
  .sp-outcomes,
  .sp-faq { padding: 68px 0; }
  .sp-faq-inner { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
  .sp-ask { position: static; padding: 1.5rem 1.4rem 1.6rem; }
  .sp-heading { margin-bottom: 2rem; }
  .sp-lead { margin: -0.9rem 0 2.25rem; }

  /* Pairs stack: the fix sits directly under its problem as one block */
  .sp-pairs-list { gap: 1.5rem; }
  .sp-pair { grid-template-columns: minmax(0, 1fr); }
  .sp-pain,
  .sp-cure { grid-column: 1; }
  .sp-pain { padding: 1.4rem 1.3rem 1.3rem; border-radius: 0 var(--radius-lg) 0 0; }
  .sp-cure { padding: 1.4rem 1.3rem 1.3rem; border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
  .sp-cure::before,
  .sp-cure::after { content: none; }

  .sp-outcomes-list { grid-template-columns: minmax(0, 1fr); }
  .sp-outcome { padding: 1.5rem 0 1.75rem; }
}
@media (max-width: 560px) {
  .sp-steps-list { grid-template-columns: minmax(0, 1fr); }
}