/* Industry spoke pages (single-industry.php) — scoped under .savvy-sa.
   Ported from the Claude Design "Construction" build (construction.css).
   Construction-specific sections only: breadcrumb, section heads, risk,
   provide, why. The base .hero / .response / .cta / .eyebrow / .btn / .chip
   come from service-areas.css (also scoped .savvy-sa, loaded site-wide), so an
   industry page must carry class="savvy-sa". Token VALUES + aliases are defined
   on .savvy-sa in service-areas.css. */

/* breadcrumb */
.savvy-sa .crumb {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--font-sans); font-size: 13px; color: var(--text-muted);
  margin: 0 0 26px;
}
.savvy-sa .crumb a { color: var(--text-muted); text-decoration: none; }
.savvy-sa .crumb a:hover { color: var(--ink); }
.savvy-sa .crumb .sep { color: var(--border-strong); }
.savvy-sa .crumb .here { color: var(--ink); font-weight: 500; }

/* generic section head reused across industry sections */
.savvy-sa .sec-head { max-width: 660px; }
.savvy-sa .sec-head h2 {
  font-family: var(--font-display); font-weight: 700; font-size: var(--text-3xl);
  line-height: 1.1; letter-spacing: var(--tracking-display); color: var(--ink);
  margin: 14px 0 0; font-optical-sizing: auto;
}
.savvy-sa .on-dark .sec-head h2 { color: var(--text-on-dark); }
.savvy-sa .sec-head .lead {
  font-family: var(--font-sans); font-size: 16px; line-height: 1.55;
  color: var(--text-muted); margin: 16px 0 0; text-wrap: pretty;
}

/* ===================== RISK (light grey) ================================ */
.savvy-sa .risk { background: var(--surface-alt); border-bottom: 1px solid var(--border); }
.savvy-sa .risk-inner { padding-top: var(--space-24); padding-bottom: var(--space-24); }
.savvy-sa .risk-grid {
  margin-top: var(--space-12);
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-16); align-items: start;
}
.savvy-sa .risk-copy p {
  font-family: var(--font-sans); font-size: var(--text-md); line-height: 1.6;
  color: var(--ink); margin: 0; max-width: 460px; text-wrap: pretty;
}
.savvy-sa .risk-copy .risk-close {
  margin-top: var(--space-8); padding-top: var(--space-6);
  border-top: 1px solid var(--border-default); max-width: 460px;
}
.savvy-sa .risk-copy .risk-close p { font-size: 15px; color: var(--text-default); font-weight: var(--fw-semibold); margin: 0; }

/* Right column: icon list + bridge line (no divider lines; icons replace dots) */
.savvy-sa .risk-list { list-style: none; margin: 0; padding: 0; }
.savvy-sa .risk-list li {
  display: flex; align-items: flex-start; gap: var(--space-3);
  padding: 0; border: none; margin-bottom: var(--space-4);
}
.savvy-sa .risk-list li:last-child { margin-bottom: 0; }
.savvy-sa .risk-icon { display: inline-flex; width: 20px; height: 20px; color: var(--ink); flex: none; margin-top: 2px; }
.savvy-sa .risk-icon svg { width: 20px; height: 20px; display: block; }
.savvy-sa .risk-label { font-family: var(--font-sans); font-size: var(--fs-base); line-height: var(--lh-normal); color: var(--ink); }
.savvy-sa .risk-label strong { font-weight: var(--fw-semibold); color: var(--ink); }
.savvy-sa .risk-detail { color: var(--text-muted); }
.savvy-sa .risk-detail::before { content: " \2013 "; color: var(--text-muted); }
.savvy-sa .risk-bridge {
  margin: var(--space-5) 0 0; padding-top: var(--space-4);
  border-top: 1px solid var(--border-default);
  font-family: var(--font-sans); font-size: var(--fs-sm); line-height: var(--lh-normal);
  font-weight: var(--fw-semibold);
  color: var(--text-default);
}

/* ===================== PROVIDE (white, editorial list) ================== */
.savvy-sa .provide { background: var(--surface); border-bottom: 1px solid var(--border); }
.savvy-sa .provide-inner { padding-top: var(--space-24); padding-bottom: var(--space-24); }
.savvy-sa .provide-list {
  margin-top: var(--space-12); border-top: 1px solid var(--border-strong);
}
.savvy-sa .pv-item {
  display: grid; grid-template-columns: 40px 280px 1fr; gap: var(--space-8); align-items: baseline;
  padding: 26px 0; border-bottom: 1px solid var(--border);
}
.savvy-sa .pv-item .pv-num {
  font-family: var(--font-sans); font-size: 13px; font-weight: 600; color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.savvy-sa .pv-item .pv-name {
  font-family: var(--font-display); font-weight: 500; font-size: 22px;
  letter-spacing: var(--tracking-display); color: var(--ink); font-optical-sizing: auto;
}
.savvy-sa .pv-item .pv-name a {
  color: var(--ink); text-decoration: none;
  display: inline-flex; align-items: baseline; gap: 7px;
}
.savvy-sa .pv-item .pv-name a:hover {
  text-decoration: underline; text-underline-offset: 4px;
  text-decoration-thickness: 1px; text-decoration-color: var(--border-strong);
}
.savvy-sa .pv-item .pv-name .pv-ar {
  font-family: var(--font-sans); font-size: 14px; color: var(--text-muted);
  transition: transform 140ms ease, color 140ms ease;
}
.savvy-sa .pv-item .pv-name a:hover .pv-ar { transform: translateX(2px); color: var(--ink); }
.savvy-sa .pv-item .pv-desc {
  font-family: var(--font-sans); font-size: 16px; line-height: 1.55; color: var(--text-muted);
  text-wrap: pretty; max-width: 520px;
}

/* ===================== WHY (white, two-column points) =================== */
.savvy-sa .why { background: var(--surface); border-bottom: 1px solid var(--border); }
.savvy-sa .why-inner { padding-top: var(--space-24); padding-bottom: var(--space-24); }
.savvy-sa .why-wrap {
  margin-top: var(--space-12);
  display: grid; grid-template-columns: 0.85fr 1.15fr; gap: var(--space-16); align-items: start;
}
.savvy-sa .why-points { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border-strong); }
.savvy-sa .why-points li {
  display: flex; gap: 16px; align-items: baseline;
  padding: 22px 0; border-bottom: 1px solid var(--border);
}
.savvy-sa .why-points li .wy-num {
  font-family: var(--font-display); font-weight: 500; font-size: 18px; color: var(--ink);
  flex: none; width: 34px; font-variant-numeric: tabular-nums; font-optical-sizing: auto;
}
.savvy-sa .why-points li .wy-text {
  font-family: var(--font-sans); font-size: 17px; line-height: 1.5; color: var(--ink); text-wrap: pretty;
}

/* alt grey so two white sections never run together */
.savvy-sa .provide.alt-grey { background: var(--surface-alt); }

/* ===================== RESPONSIVE ====================================== */
@media (max-width: 1024px) {
  .savvy-sa .pv-item { grid-template-columns: 36px 220px 1fr; gap: var(--space-6); }
  .savvy-sa .why-wrap { grid-template-columns: 1fr; gap: var(--space-8); }
}
@media (max-width: 880px) {
  .savvy-sa .risk-grid { grid-template-columns: 1fr; gap: var(--space-8); }
  .savvy-sa .risk-copy p, .savvy-sa .risk-copy .risk-close { max-width: none; }
}
@media (max-width: 640px) {
  .savvy-sa .risk-inner, .savvy-sa .provide-inner, .savvy-sa .why-inner { padding-top: var(--space-16); padding-bottom: var(--space-16); }
  .savvy-sa .pv-item { grid-template-columns: 1fr; gap: 6px; padding: 22px 0; }
  .savvy-sa .pv-item .pv-num { order: -1; }
  .savvy-sa .pv-item .pv-name { font-size: 20px; }
  .savvy-sa .risk-list li { font-size: 16px; }
}

/* 3b. Mobile CCTV tower cameras (Construction, feedback pt 10) --------------- */
.savvy-sa .tower { background: var(--surface-alt); border-bottom: 1px solid var(--border); }
.savvy-sa .tower-inner { max-width: var(--container); margin: 0 auto; padding: var(--space-24) var(--space-8); }
.savvy-sa .tower-head { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: var(--space-16); align-items: center; }
.savvy-sa .tower-intro { margin-top: var(--space-4); max-width: 54ch; color: var(--text-muted); line-height: var(--lh-loose); }
.savvy-sa .tower-media img { width: 100%; height: auto; display: block; border: 1px solid var(--border); }
.savvy-sa .tower-cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-16); margin-top: var(--space-16); }
.savvy-sa .tower-col h3 { font-family: var(--font-display); font-size: var(--fs-lg); letter-spacing: var(--tracking-tight); margin: 0 0 var(--space-6); }
.savvy-sa .tower-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.savvy-sa .tower-list li { color: var(--text); font-size: var(--fs-md); line-height: var(--lh-normal); }
.savvy-sa .tower-ideal { margin-top: var(--space-16); display: flex; align-items: baseline; gap: var(--space-6); flex-wrap: wrap; }
.savvy-sa .tower-ideal__label { font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: var(--tracking-uppercase); color: var(--text-muted); white-space: nowrap; }
.savvy-sa .tower-tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-3); }
.savvy-sa .tower-tags li { border: 1px solid var(--border-strong); border-radius: 999px; padding: 0.32em 0.9em; font-size: var(--fs-sm); color: var(--text); }
.savvy-sa .tower-foot { margin-top: var(--space-12); max-width: 68ch; color: var(--text-muted); line-height: var(--lh-loose); }
@media (max-width: 880px) {
  .savvy-sa .tower-head { grid-template-columns: 1fr; gap: var(--space-8); }
  .savvy-sa .tower-cols { grid-template-columns: 1fr; gap: var(--space-8); }
}
@media (max-width: 640px) {
  .savvy-sa .tower-inner { padding: var(--space-16) var(--space-6); }
}