/* ============================================================
   IntegrityTeks — SERVICE PAGE TEMPLATE styles
   ------------------------------------------------------------
   Loads ALONGSIDE integrityteks-styles-v3.css (never instead of).
   The homepage sheet provides the design tokens (:root vars),
   header, footer, hero (.herox), problem band, stats, why-band,
   service areas, FAQ and final-CTA. This sheet only adds the
   NEW section types that service pages introduce, reusing the
   same tokens so every service page matches the homepage exactly.
   Reuse this file as-is for future service pages (Computer Repair,
   Network & Wi-Fi, etc.) — only the page HTML content changes.
   ============================================================ */

/* ---------- Breadcrumb ---------- */
.breadcrumb { background: var(--cool); border-bottom: 1px solid var(--border); }
.breadcrumb .wrap { padding-top: 14px; padding-bottom: 14px; }
.breadcrumb ol {
  list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em;
}
.breadcrumb li { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); }
.breadcrumb li + li::before { content: "\203A"; color: var(--muted); font-size: 14px; }
.breadcrumb a { color: var(--navy); font-weight: 700; }
.breadcrumb a:hover { color: var(--green); }
.breadcrumb [aria-current="page"] { color: var(--ink); font-weight: 700; }

/* ---------- Service hero: dual CTAs + tightened spacing (.svc-hero) ---------- */
/* The service hero reuses the homepage hero shell (.herox, .herox-copy,
   .herox-media, .herox-img, .herox-badge). Only the CTA row is new content;
   .herox already styles .btn-primary / .btn-outline for the dark band. */
.herox-ctas .btn svg { width: 17px; height: 17px; }
/* Denser, more polished hero: smaller gaps, capped intro width so the two
   intro lines don't sprawl, and a slightly quieter second line. Wording unchanged. */
.svc-hero .herox-copy { gap: 9px; padding: 38px 0; max-width: 500px; }
.svc-hero .herox-eyebrow { margin-bottom: 2px; }
/* Hero text hierarchy: the PRIMARY intro line stays dominant (larger, medium weight, bright),
   and the SECONDARY line drops to clearly smaller/lighter support text so the two stop competing.
   Lives in the shared template so every service page (incl. business-it-services) inherits it. */
.svc-hero .herox-sub { margin: 0; max-width: 470px; font-size: 16.5px; font-weight: 500; color: rgba(255, 255, 255, 0.95); }
.svc-hero .herox-sub + .herox-sub { font-size: 13px; font-weight: 400; line-height: 1.5; color: rgba(255, 255, 255, 0.6); }
.svc-hero .herox-ctas { margin-top: 7px; }
.svc-hero .herox-meta { margin-top: 9px; }

/* ---------- "What we recover" cards ----------
   These reuse the homepage category-box classes directly (.cats-grid / .cat-card /
   .cat-top / .cat-copy / .cat-media / .cat-tags) so they match the homepage exactly:
   copy on the left over a white veil that fades to reveal the photo on the right, with
   a dark navy strip of three feature chips at the bottom. The styling lives in
   integrityteks-styles-v3.css; the .recover-cats hook below only softens the veil. */

/* These recovery photos are DARK (black drives on dark surfaces), so the homepage veil
   — tuned for bright photos — let the image appear too abruptly. The photo starts further
   left than the homepage (10% vs 25%) so its left side appears earlier, and this longer,
   multi-stop gradient fades the white gradually (seamless blend) while clearing more on the
   RIGHT so the image reads stronger there. Opacity stays high under the copy on the left so
   the title and description remain crisp. (Scoped to this section only.) */
@media (min-width: 561px) {
  .recover-cats .cat-media { left: 10%; }
}
.recover-cats .cat-media::after {
  background: linear-gradient(to right,
    rgba(255, 255, 255, 1)    0%,
    rgba(255, 255, 255, 1)    36%,
    rgba(255, 255, 255, 0.90) 50%,
    rgba(255, 255, 255, 0.62) 62%,
    rgba(255, 255, 255, 0.30) 74%,
    rgba(255, 255, 255, 0.10) 85%,
    rgba(255, 255, 255, 0)    95%);
}

/* ---------- "Our process" steps + connecting timeline ---------- */
.process-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; position: relative; }
.process-step {
  position: relative; z-index: 1;        /* opaque card hides the line except in the gaps */
  display: flex; flex-direction: column; align-items: center; text-align: center;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 30px 24px 26px;
  box-shadow: var(--shadow-card);
}
.process-step .step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--navy-grad); color: #fff;
  font-family: var(--font-head); font-weight: 700; font-size: 18px;
  margin-bottom: 16px; position: relative; z-index: 2;
}
.process-step h3 { font-size: 18px; letter-spacing: -0.01em; }
.process-step p { color: var(--muted); font-size: 14px; margin-top: 8px; }
/* Timeline connector: a green line drawn BEHIND the cards (z-index 0). Opaque cards
   hide it except in the gaps between steps, so it links the numbered circles —
   horizontal across the row on desktop, vertical down the column on mobile. */
.process-steps::before {
  content: ""; position: absolute; z-index: 0;
  background: var(--green); border-radius: 2px;
}
@media (min-width: 781px) {
  /* circle vertical centre = 30px card padding + 23px (half of the 46px circle) */
  .process-steps::before { top: 53px; left: 0; right: 0; height: 3px; }
}
@media (max-width: 780px) {
  .process-steps { grid-template-columns: 1fr; gap: 20px; }
  .process-steps::before { top: 0; bottom: 0; left: 50%; transform: translateX(-50%); width: 3px; }
}

/* ---------- Transparent pricing band — card left, image right ---------- */
.pricing-band { background: var(--cool); }
.pricing-layout { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 40px; align-items: stretch; }
.pricing-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 40px;
}
.pricing-card h3 { font-size: 24px; letter-spacing: -0.02em; }
.pricing-card p { color: var(--muted); font-size: 16px; margin-top: 12px; }
.pricing-card .pricing-cta { margin-top: 26px; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.pricing-note { font-size: 14px; color: var(--muted); }
/* Figure on the right. Holds a placeholder until pricing-handover.jpg exists;
   the <img> hides itself on error (see HTML), revealing the placeholder beneath. */
.pricing-figure {
  position: relative; overflow: hidden;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--cool); min-height: 300px;
}
.pricing-figure img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.pricing-figure-ph {
  position: absolute; inset: 0; z-index: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  text-align: center; padding: 20px;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; color: var(--muted);
}
.pricing-figure.is-missing {
  background: repeating-linear-gradient(45deg, #eef1f7 0 10px, #e6eaf3 10px 20px);
}

/* ---------- Related services — angled navy split tiles (reuse homepage
   .value-card / .value-split) with a kept "Learn more →" CTA ---------- */
.related-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.related-grid .value-card { min-height: 204px; }
.value-learn {
  position: relative; z-index: 4; margin-top: 10px;
  font-family: var(--font-head); font-weight: 600; font-size: 13px; color: #fff;
}
.value-card:hover .value-learn { color: var(--green); }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .related-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 820px) {
  .pricing-layout { grid-template-columns: 1fr; gap: 22px; }
  .pricing-figure { min-height: 220px; }
}
@media (max-width: 560px) {
  .related-grid { grid-template-columns: 1fr; }
  .pricing-card { padding: 28px 22px; }
  .breadcrumb .wrap { padding-top: 12px; padding-bottom: 12px; }
}