/* ============================
   TCP Concrete — Service & city pages (generated by scripts/gen_pages.py)
   Loaded after index.css; reuses its tokens, navbar, buttons and footer.
   ============================ */

.p-hero {
  background: var(--grad-dark);
  color: #fff;
  padding: 150px 0 var(--space-xl);
}
.p-hero .section-label { color: var(--clr-accent); }
.p-hero h1 {
  font-size: clamp(2rem, 4.5vw, 3.25rem);
  color: #fff;
  margin: 0.5rem 0 1rem;
  line-height: 1.15;
}
.p-lead {
  color: rgba(255,255,255,0.78);
  max-width: 760px;
  font-size: 1.125rem;
  line-height: 1.65;
  margin: 0 0 1.75rem;
}

.p-breadcrumb { margin-bottom: 1.25rem; font-size: 0.875rem; }
.p-breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; }
.p-breadcrumb li { color: rgba(255,255,255,0.6); }
.p-breadcrumb li + li::before { content: "/"; margin-right: 0.5rem; color: rgba(255,255,255,0.35); }
.p-breadcrumb a { color: rgba(255,255,255,0.8); text-decoration: none; }
.p-breadcrumb a:hover { color: #fff; text-decoration: underline; }
.p-breadcrumb [aria-current="page"] { color: #fff; }

.p-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }

.p-section { padding: var(--space-xl) 0; }
.p-section--alt { background: var(--clr-surface-alt, #f8fafc); }
.p-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: var(--space-xl);
  align-items: start;
}

.p-content h2 {
  font-size: 1.625rem;
  margin: 2rem 0 0.75rem;
  color: var(--clr-primary);
}
.p-content h2:first-child { margin-top: 0; }
.p-content p { color: var(--clr-text); line-height: 1.75; margin: 0 0 1rem; }

.p-list { margin: 0 0 1rem; padding: 0; list-style: none; }
.p-list li { position: relative; padding-left: 1.75rem; margin-bottom: 0.5rem; line-height: 1.6; }
.p-list li::before {
  content: "";
  position: absolute; left: 0; top: 0.55em;
  width: 0.75rem; height: 0.75rem; border-radius: 50%;
  background: var(--clr-accent);
}
.p-list--inline { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }
.p-list--inline li { margin-bottom: 0; }
.p-list--inline a { color: var(--clr-primary); font-weight: 600; }

.p-benefits { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-sm); margin-bottom: 1rem; }
.p-benefit {
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-md);
  padding: 1.25rem;
}
.p-benefit h3 { font-size: 1.0625rem; margin: 0 0 0.5rem; color: var(--clr-primary); }
.p-benefit p { font-size: 0.9375rem; margin: 0; color: var(--clr-text-light); }

.p-steps { counter-reset: step; list-style: none; margin: 0 0 1rem; padding: 0; }
.p-steps li { counter-increment: step; position: relative; padding-left: 3rem; margin-bottom: 1rem; line-height: 1.65; }
.p-steps li::before {
  content: counter(step);
  position: absolute; left: 0; top: 0;
  width: 2rem; height: 2rem; border-radius: 50%;
  background: var(--clr-accent); color: #fff;
  font-weight: 800; font-size: 0.9375rem;
  display: flex; align-items: center; justify-content: center;
}

.p-faq details { border-bottom: 1px solid var(--clr-border); padding: 0.875rem 0; }
.p-faq summary { cursor: pointer; font-weight: 600; color: var(--clr-primary); font-size: 1.0625rem; }
.p-faq summary:hover { color: var(--clr-accent); }
.p-faq details p { margin: 0.75rem 0 0; }

.p-side { position: sticky; top: 100px; display: grid; gap: var(--space-sm); }
.p-card {
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-md);
  padding: 1.5rem;
  box-shadow: 0 10px 30px rgba(15,23,42,0.06);
}
.p-card h3 { font-size: 1.125rem; margin: 0 0 0.875rem; color: var(--clr-primary); }
.p-card p { display: flex; align-items: center; gap: 0.625rem; margin: 0 0 0.625rem; color: var(--clr-text); font-size: 0.9375rem; line-height: 1.5; }
.p-card p .icon { flex: 0 0 auto; color: var(--clr-accent); }
.p-card a { color: inherit; text-decoration: none; }
.p-card a:hover { color: var(--clr-accent); }
.p-card .p-phone { font-weight: 700; font-size: 1.125rem; display: inline-flex; align-items: center; gap: 0.5rem; }
.p-card .btn { width: 100%; margin-top: 0.75rem; text-align: center; }
.p-links { list-style: none; margin: 0; padding: 0; }
.p-links li { border-bottom: 1px solid var(--clr-border); }
.p-links li:last-child { border-bottom: 0; }
.p-links a { display: block; padding: 0.5rem 0; font-size: 0.9375rem; color: var(--clr-text); }
.p-links a[aria-current="page"] { color: var(--clr-accent); font-weight: 700; }
.p-card h3 + .p-links { margin-bottom: 1rem; }

.p-photos { padding: 0 0 var(--space-xl); }
.p-photos h2 { text-align: center; margin-bottom: var(--space-md); }
.p-photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-sm); }
.p-photo {
  position: relative; display: block; overflow: hidden;
  border-radius: var(--radius-md); aspect-ratio: 4 / 3; background: #0f1219;
}
.p-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; }
.p-photo:hover img { transform: scale(1.04); }
.p-photo span {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 0.875rem 1rem; color: #fff; font-size: 0.875rem; font-weight: 600;
  background: linear-gradient(180deg, transparent, rgba(15,18,25,0.85));
}
.p-more { text-align: center; margin-top: var(--space-md); }

.p-related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-sm); }
.p-related-grid--compact { grid-template-columns: repeat(2, 1fr); margin-bottom: 1rem; }
.p-related {
  display: block; text-decoration: none;
  background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: var(--radius-md);
  padding: 1.25rem; transition: border-color var(--transition-fast), transform var(--transition-fast);
}
.p-related:hover { border-color: var(--clr-accent); transform: translateY(-2px); }
.p-related strong { display: block; color: var(--clr-primary); margin-bottom: 0.375rem; }
.p-related span { color: var(--clr-text-light); font-size: 0.9rem; line-height: 1.5; }

.p-cta { background: var(--grad-dark); color: #fff; padding: var(--space-xl) 0; text-align: center; }
.p-cta h2 { color: #fff; font-size: clamp(1.75rem, 3.5vw, 2.5rem); margin-bottom: 0.75rem; }
.p-cta p { color: rgba(255,255,255,0.75); max-width: 640px; margin: 0 auto 1.75rem; font-size: 1.0625rem; }
.p-cta .p-actions { justify-content: center; }

@media (max-width: 1024px) {
  .p-grid { grid-template-columns: 1fr; }
  .p-side { position: static; }
  .p-benefits, .p-related-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  .p-hero { padding-top: 120px; }
  .p-benefits, .p-related-grid, .p-related-grid--compact, .p-photo-grid { grid-template-columns: 1fr; }
  .p-actions .btn { width: 100%; justify-content: center; }
}