/* ================================================================
   Construction & Job Sites page — supplements location.css
   ================================================================ */

/* ── Pricing value proposition section ── */
.const-pricing-section {
  padding: 72px 0;
  background: var(--amber-bg, #fffbeb);
  border-top: 3px solid var(--yellow, #facc15);
}
.const-pricing-inner {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 3.5rem;
  align-items: center;
}
.const-pricing-text .section-pill { margin-bottom: 1rem; }
.const-pricing-text h2 {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(22px, 2.8vw, 34px);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--gray-900, #111827);
  margin-bottom: 1rem;
}
.const-pricing-text p {
  font-size: 1rem;
  color: var(--gray-600, #4b5563);
  line-height: 1.65;
  margin-bottom: 1.25rem;
}
.const-pricing-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.const-pricing-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.95rem;
  color: var(--gray-700, #374151);
  font-weight: 500;
}
.const-pricing-list svg { flex-shrink: 0; margin-top: 2px; color: var(--green-500, #22c55e); }

.const-pricing-cta-box {
  background: var(--white, #fff);
  border: 2px solid var(--yellow, #facc15);
  border-radius: 1rem;
  padding: 2.25rem 2rem;
  text-align: center;
  box-shadow: 0 8px 24px rgba(15,23,42,0.07);
}
.const-pricing-cta-label {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--gray-600, #4b5563);
  margin-bottom: 1rem;
}
.const-pricing-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 0.9rem 1.5rem;
  font-size: 1rem;
}
.const-pricing-cta-sub {
  margin-top: 0.75rem;
  font-size: 0.82rem;
  color: var(--gray-400, #9ca3af);
}

/* ── Products grid — 3-col override ── */
.const-units-section {
  padding: 72px 0;
  background: var(--white, #fff);
}
.const-units-section .section-head { margin-bottom: 2rem; }
.const-products-grid {
  grid-template-columns: repeat(3, 1fr) !important;
}

/* ── Calculator CTA banner ── */
.const-calc-banner {
  background: var(--navy, #0f172a);
  padding: 52px 0;
}
.const-calc-inner {
  display: flex;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
}
.const-calc-text { flex: 1; min-width: 280px; }
.const-calc-text h2 {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(20px, 2.2vw, 28px);
  font-weight: 800;
  color: var(--white, #fff);
  margin-bottom: 0.5rem;
}
.const-calc-text p {
  font-size: 0.95rem;
  color: rgba(255,255,255,0.7);
  line-height: 1.6;
}
.const-calc-actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  flex-shrink: 0;
}

/* ── Steps CTA (within steps-section from location.css) ── */
.steps-cta { text-align: center; margin-top: 2.25rem; }

/* ── Long-term service plan cards (dark navy) ── */
.plans-section { padding: 72px 0; background: var(--navy, #0f172a); }
.plans-section .section-head h2,
.plans-section .section-head p,
.plans-section .section-label { color: var(--white, #fff); }
.plans-section .section-head p { opacity: 0.75; }
.plans-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 2rem; }
.plan-card {
  background: var(--navy-mid, #1e293b);
  border: 1px solid var(--navy-light, #334155);
  border-radius: 0.75rem;
  padding: 1.9rem 1.6rem;
  color: var(--white, #fff);
}
.plan-card-featured { border-color: var(--yellow, #facc15); box-shadow: 0 0 0 1px var(--yellow, #facc15); }
.plan-card h3 { font-size: 1.15rem; margin-bottom: 1rem; color: var(--yellow, #facc15); }
.plan-card ul { list-style: none; display: flex; flex-direction: column; gap: 0.6rem; }
.plan-card li { font-size: 0.92rem; opacity: 0.9; padding-left: 1.4rem; position: relative; }
.plan-card li::before { content: "✓"; color: var(--green-500, #22c55e); position: absolute; left: 0; font-weight: 700; }
.plans-cta { text-align: center; margin-top: 2.25rem; display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.plans-phone-btn { border-color: rgba(255,255,255,0.4); color: rgba(255,255,255,0.85); }
.plans-phone-btn:hover { border-color: rgba(255,255,255,0.7); color: #fff; }

/* ── Markets section — wraps existing .loc-group components ── */
.const-markets-section { padding: 72px 0; background: var(--gray-50, #f9fafb); }
.const-loc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 2rem;
  border: 1px solid var(--gray-200, #e5e7eb);
  border-radius: 0.75rem;
  overflow: hidden;
}
.const-loc-grid .loc-group {
  border-right: 1px solid var(--gray-200, #e5e7eb);
  border-bottom: 1px solid var(--gray-200, #e5e7eb);
}
.const-loc-grid .loc-group:nth-child(3n) { border-right: none; }
.const-markets-more { margin-top: 1.25rem; font-size: 0.95rem; color: var(--gray-600, #4b5563); }
.const-markets-more a { color: var(--amber, #f59e0b); font-weight: 600; }

/* ── OSHA compliance table ── */
.osha-section { padding: 72px 0; background: var(--white, #fff); }
.osha-table-wrap { overflow-x: auto; margin-top: 2rem; border: 1px solid var(--gray-200, #e5e7eb); border-radius: 0.75rem; background: var(--white, #fff); }
.osha-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; min-width: 520px; }
.osha-table th {
  background: var(--navy, #0f172a);
  color: var(--white, #fff);
  text-align: left;
  padding: 0.9rem 1.25rem;
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.osha-table td { padding: 0.85rem 1.25rem; border-top: 1px solid var(--gray-200, #e5e7eb); }
.osha-table tbody tr:nth-child(even) { background: var(--gray-50, #f9fafb); }
.osha-table td strong { color: var(--gray-900, #111827); }
.osha-table td:last-child { color: var(--amber, #f59e0b); font-weight: 600; }
.osha-footnote { margin-top: 1rem; font-size: 0.82rem; color: var(--gray-500, #6b7280); line-height: 1.5; }
.osha-cta { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 1.75rem; }

/* ── Feature groups (replaces plan-card boxes in the service section) ── */
.feature-group {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.75rem 1.5rem;
  border-top: 2px solid var(--yellow, #facc15);
}
.feature-group-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: rgba(250, 204, 21, 0.12);
  border-radius: 0.5rem;
  color: var(--yellow, #facc15);
  flex-shrink: 0;
}
.feature-group h3 {
  font-family: 'Poppins', sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--white, #fff);
  margin: 0;
}
.feature-group ul {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  list-style: none;
}
.feature-group li {
  font-size: 0.92rem;
  color: rgba(255,255,255,0.82);
  padding-left: 1.4rem;
  position: relative;
  line-height: 1.5;
}
.feature-group li::before {
  content: "✓";
  color: var(--green-500, #22c55e);
  position: absolute;
  left: 0;
  font-weight: 700;
}

/* ── Responsive ── */
@media (max-width: 1024px) {
  .const-pricing-inner { grid-template-columns: 1fr; }
  .const-pricing-cta-box { max-width: 420px; }
}
@media (max-width: 900px) {
  .const-products-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .plans-grid { grid-template-columns: 1fr; }
  .const-loc-grid { grid-template-columns: repeat(2, 1fr); }
  .const-loc-grid .loc-group:nth-child(3n) { border-right: 1px solid var(--gray-200, #e5e7eb); }
  .const-loc-grid .loc-group:nth-child(2n) { border-right: none; }
}
@media (max-width: 600px) {
  .const-products-grid { grid-template-columns: 1fr !important; }
  .const-loc-grid { grid-template-columns: 1fr; }
  .const-loc-grid .loc-group { border-right: none !important; }
  .const-calc-inner { flex-direction: column; }
}

/* ── Trust bar: force clean 2-line items ── */
.trust-item span { line-height: 1.4; }

/* ── Typography: match homepage (Roboto body / Poppins headings) ── */
body { font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
h1, h2, h3, h4 { font-family: 'Poppins', sans-serif; }
.section-head h2 {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(28px, 3.5vw, 40px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.const-pricing-text h2 {
  font-size: clamp(28px, 3.5vw, 40px);
  line-height: 1.15;
}
.step-card h3, .plan-card h3 { font-family: 'Poppins', sans-serif; }

/* ── Section color rhythm: break up white-on-white runs ── */
.osha-section {
  /* Cream band echoing the pricing section, so the page tail alternates
     white → cream → gray → white instead of three near-identical grays. */
  background: var(--amber-bg, #fffbeb);
  border-top: 3px solid var(--yellow, #facc15);
  border-bottom: 1px solid var(--gray-200, #e5e7eb);
}
.osha-section .osha-table-wrap { background: var(--white, #fff); }

/* Safety: dark-outline buttons are invisible on the navy calc banner —
   force the white-outline treatment for any button variant placed there. */
.const-calc-banner .btn-outline-dark {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.7);
}
.const-calc-banner .btn-outline-dark:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}