/* =============================================================
   Trebots - service page layout
   -------------------------------------------------------------
   Shared by every page under /services/. Loads AFTER styles.css
   and pulse.css, so it inherits the PULSE look (flat black,
   hairline cyan grid, condensed uppercase display type) and only
   adds the structures those two don't already have.

   Service pages deliberately skip main.js - no three.js, no
   estimator, no chat - so nothing here may depend on JS. In
   particular: never use .reveal on these pages, it stays
   invisible without the animation runner.
   ============================================================= */

.svc {
  position: relative;
  z-index: 2;
  padding-top: calc(var(--offer-h) + 92px);
}
.svc-wrap { max-width: var(--max); margin: 0 auto; padding: 0 24px; }

/* ---------- Breadcrumb ---------- */
.svc-crumb {
  display: flex; flex-wrap: wrap; align-items: center; gap: 9px;
  font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 22px;
}
.svc-crumb a { color: var(--muted); text-decoration: none; }
.svc-crumb a:hover { color: var(--cyan); }
.svc-crumb [aria-current] { color: var(--cyan); }

/* ---------- Hero ---------- */
.svc-hero { padding-bottom: clamp(46px, 6vw, 74px); }
.svc-hero h1 {
  font-family: "Barlow Condensed", "Helvetica Neue", sans-serif;
  text-transform: uppercase; font-weight: 700; letter-spacing: 0.005em;
  font-size: clamp(2.5rem, 7vw, 4.6rem); line-height: 0.9;
  margin: 0 0 20px; max-width: 18ch; text-wrap: balance;
}
.svc-lead {
  color: var(--muted); max-width: 60ch; line-height: 1.72;
  font-size: clamp(1.02rem, 1.5vw, 1.16rem); margin: 0 0 30px;
}
.svc-cta { display: flex; flex-wrap: wrap; gap: 14px; }
.svc-cta .btn { --pad: 15px 32px; }

/* Fact strip under the hero - hairline cells, no boxes. */
.svc-facts {
  display: grid; gap: 1px; margin-top: clamp(38px, 5vw, 58px);
  grid-template-columns: 1fr;
  background: var(--hair, rgba(255, 255, 255, 0.14));
  border: 1px solid var(--hair, rgba(255, 255, 255, 0.14));
}
@media (min-width: 640px) { .svc-facts { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 940px) { .svc-facts { grid-template-columns: repeat(4, 1fr); } }
.svc-fact { background: #000; padding: 22px 24px; }
.svc-fact dt {
  font-family: ui-monospace, Menlo, monospace; font-size: 0.6rem;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--cyan); margin-bottom: 9px;
}
.svc-fact dd { margin: 0; font-size: 0.95rem; line-height: 1.5; color: var(--text); }

/* ---------- Sections ---------- */
.svc-section { padding: clamp(52px, 7vw, 92px) 0; border-top: 1px solid var(--hair, rgba(255, 255, 255, 0.14)); }
.svc-head { max-width: 60ch; margin-bottom: clamp(30px, 4vw, 46px); }
.svc-kicker {
  display: block;
  font-family: ui-monospace, Menlo, monospace; font-size: 0.66rem;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--cyan); margin-bottom: 15px;
}
.svc-head h2 {
  font-family: "Barlow Condensed", "Helvetica Neue", sans-serif;
  text-transform: uppercase; font-weight: 700; letter-spacing: 0.01em;
  font-size: clamp(1.9rem, 4.4vw, 3rem); line-height: 0.95;
  margin: 0 0 14px; text-wrap: balance;
}
.svc-head p { color: var(--muted); line-height: 1.7; margin: 0; }

/* ---------- Hairline card grid ---------- */
.svc-grid {
  display: grid; gap: 1px; grid-template-columns: 1fr;
  background: var(--hair, rgba(255, 255, 255, 0.14));
  border: 1px solid var(--hair, rgba(255, 255, 255, 0.14));
}
@media (min-width: 700px) { .svc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .svc-grid--3 { grid-template-columns: repeat(3, 1fr); } }
.svc-cell { background: #000; padding: clamp(24px, 3vw, 32px); }
.svc-cell h3 {
  font-family: "Barlow Condensed", "Helvetica Neue", sans-serif;
  text-transform: uppercase; font-weight: 700; letter-spacing: 0.02em;
  font-size: 1.5rem; line-height: 1.02; margin: 0 0 10px;
}
.svc-cell p { color: var(--muted); font-size: 0.94rem; line-height: 1.62; margin: 0; }
.svc-cell-ic {
  display: block; width: 26px; height: 26px; margin-bottom: 16px;
  color: var(--cyan); fill: none; stroke: currentColor;
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}

/* ---------- Checklist ---------- */
.svc-list { display: grid; gap: 13px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 760px) { .svc-list--2 { grid-template-columns: repeat(2, 1fr); column-gap: 40px; } }
.svc-list li {
  position: relative; padding-left: 30px;
  color: var(--muted); line-height: 1.62; font-size: 0.97rem;
}
.svc-list li::before {
  content: ""; position: absolute; left: 4px; top: 8px;
  width: 9px; height: 9px; border: 1px solid var(--cyan);
}
.svc-list strong { color: var(--text); font-weight: 600; }

/* ---------- Process steps ---------- */
.svc-steps { display: grid; gap: 1px; grid-template-columns: 1fr; background: var(--hair, rgba(255, 255, 255, 0.14)); border: 1px solid var(--hair, rgba(255, 255, 255, 0.14)); }
@media (min-width: 780px) { .svc-steps { grid-template-columns: repeat(4, 1fr); } }
.svc-step { background: #000; padding: clamp(24px, 3vw, 30px); }
.svc-step-n {
  display: block; font-family: "Barlow Condensed", sans-serif;
  font-size: 2.6rem; line-height: 1; font-weight: 700;
  color: var(--cyan); margin-bottom: 12px;
}
.svc-step h3 {
  font-family: "Barlow Condensed", sans-serif; text-transform: uppercase;
  font-weight: 700; letter-spacing: 0.02em; font-size: 1.28rem;
  line-height: 1.05; margin: 0 0 8px;
}
.svc-step p { color: var(--muted); font-size: 0.9rem; line-height: 1.6; margin: 0; }

/* ---------- Price band ---------- */
.svc-price {
  border: 1px solid var(--hair-cy, rgba(0, 229, 255, 0.24));
  background: rgba(0, 229, 255, 0.04);
  padding: clamp(28px, 4vw, 42px);
  display: grid; gap: 26px; align-items: center;
}
@media (min-width: 860px) { .svc-price { grid-template-columns: 1fr auto; gap: 44px; } }
.svc-price h3 {
  font-family: "Barlow Condensed", sans-serif; text-transform: uppercase;
  font-weight: 700; letter-spacing: 0.01em; font-size: clamp(1.5rem, 3vw, 2.1rem);
  line-height: 1; margin: 0 0 12px;
}
.svc-price p { color: var(--muted); line-height: 1.68; margin: 0; max-width: 56ch; }
.svc-price-fig {
  font-family: "Barlow Condensed", sans-serif; font-weight: 700;
  font-size: clamp(2.2rem, 5vw, 3.2rem); line-height: 1; color: var(--cyan);
  display: block; margin-bottom: 6px;
}
.svc-price-sub {
  font-family: ui-monospace, Menlo, monospace; font-size: 0.64rem;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted);
}

/* ---------- Closing CTA ---------- */
.svc-final {
  border: 1px solid var(--hair-cy, rgba(0, 229, 255, 0.24));
  background: rgba(0, 229, 255, 0.04);
  padding: clamp(32px, 5vw, 56px); text-align: center;
  margin-bottom: clamp(56px, 7vw, 92px);
}
.svc-final h2 {
  font-family: "Barlow Condensed", sans-serif; text-transform: uppercase;
  font-weight: 700; letter-spacing: 0.01em;
  font-size: clamp(1.9rem, 4.2vw, 2.9rem); line-height: 0.95; margin: 0 0 14px;
}
.svc-final p { color: var(--muted); max-width: 56ch; margin: 0 auto 26px; line-height: 1.68; }
.svc-final .btn { --pad: 15px 34px; }

/* ---------- Sibling services ---------- */
.svc-more { display: grid; gap: 1px; grid-template-columns: 1fr; background: var(--hair, rgba(255, 255, 255, 0.14)); border: 1px solid var(--hair, rgba(255, 255, 255, 0.14)); }
@media (min-width: 700px) { .svc-more { grid-template-columns: repeat(3, 1fr); } }
.svc-more a {
  background: #000; padding: 24px 26px; text-decoration: none; color: inherit;
  display: flex; flex-direction: column; gap: 7px; transition: background 0.25s;
}
.svc-more a:hover { background: var(--cyan); color: var(--ao, #00131a); }
.svc-more a:hover .svc-more-d { color: rgba(0, 19, 26, 0.72); }
.svc-more strong {
  font-family: "Barlow Condensed", sans-serif; text-transform: uppercase;
  font-weight: 700; letter-spacing: 0.02em; font-size: 1.3rem; line-height: 1;
}
.svc-more-d { color: var(--muted); font-size: 0.88rem; line-height: 1.5; }

/* ---------- FAQ (reuses .faq-item from styles.css) ---------- */
.svc-faq { display: grid; gap: 14px; max-width: 860px; }