.sec {
  margin: 0 0 12px;
  font-size: clamp(22px, 3vw, 30px);
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
:root:not([data-theme="dark"]) .sec {
  background: none !important;
  -webkit-background-clip: initial;
  background-clip: initial;
  color: var(--text);
}

/* Ensure in-page anchors land below sticky header */
:root { --site-scroll-pad: 84px }
@media (min-width: 768px){ :root { --site-scroll-pad: 72px } }
html { scroll-padding-top: var(--site-scroll-pad) }
section { scroll-margin-top: var(--site-scroll-pad) }

/* Generic chip/badge style used for callouts */
.chip {
  display: inline-block;
  padding: 12px 16px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color: #ffffff;
  font-weight: 800;
  box-shadow: 0 10px 28px rgba(2,6,23,.18);
}

/* Service Area: force same gradient as primary button and white text */
#service-area .city-callout {
  background: linear-gradient(135deg, #2563eb, #06b6d4) !important;
  color: #ffffff !important;
  border: 0;
}

/* Unified primary CTA button */
.btn-primary {
  display: inline-block;
  padding: 10px 16px;
  border-radius: 999px;
  background: linear-gradient(135deg, #2563eb, #06b6d4);
  color: #fff;
  font-weight: 800;
  text-decoration: none;
  border: 0;
  box-shadow: 0 8px 20px rgba(2,6,23,.18);
}
.btn-primary:hover { filter: brightness(1.06) }

/* Contact section shared layout */
#contact { margin-top: 36px }
#contact .wrap { max-width: 1200px; padding: 0 24px; margin: 0 auto }
#contact .box {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  padding: 20px 22px;
  width: min(50%, 560px);
  margin: 12px 0 0;
  text-align: left;
}