/* =========================================================
   NEIGHBORHOOD LANDING PAGES — SHARED STYLESHEET
   Scope: the 16 Pembroke Pines neighborhood pages ONLY.
   Class prefix: .nb-* (do not collide with .rc-*, .stb-*).
   Tokens, spacing, and breakpoints taken verbatim from the
   handoff design files. See:
     WEBSITE FILES/New changes/Pembroke Pines - new pages/README.md
   ========================================================= */

/* ---------- Base scope ---------- */
.nb-page { color: #16202b; font-family: 'Source Sans 3', system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
.nb-page * { box-sizing: border-box; }
.nb-page a { color: #0b2239; text-decoration: none; }
.nb-page a:hover { color: #8a6307; }
.nb-page h1,
.nb-page h2,
.nb-page h3,
.nb-page h4 { font-family: 'Archivo', system-ui, sans-serif; margin: 0; text-wrap: balance; }
.nb-page p { text-wrap: pretty; }
.nb-page details > summary { list-style: none; cursor: pointer; }
.nb-page details > summary::-webkit-details-marker { display: none; }
.nb-page details[open] .nb-faq-plus { transform: rotate(45deg); }
.nb-page { scroll-padding-top: 96px; }
html:has(.nb-page) { scroll-behavior: smooth; scroll-padding-top: 96px; }

/* Body needs bottom padding so fixed call bar doesn't cover the footer. */
body.nb-body { padding-bottom: 0; }

/* ---------- Container ---------- */
.nb-container { max-width: 1240px; margin: 0 auto; padding: 0 24px; }

/* ---------- Hero ---------- */
.nb-hero { position: relative; background: #0b2239; }
.nb-hero-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .42; }
.nb-hero-scrim { position: absolute; inset: 0; background: linear-gradient(90deg, #071a2d 8%, rgba(7,26,45,.72) 55%, rgba(7,26,45,.35) 100%); }
.nb-hero-inner { position: relative; max-width: 1240px; margin: 0 auto; padding: 34px 24px 68px; }
.nb-hero-crumb { display: flex; gap: 9px; align-items: center; font-size: 13px; color: #9fb6ca; margin-bottom: 38px; flex-wrap: wrap; }
.nb-hero-crumb a { color: #9fb6ca; }
.nb-hero-crumb .current { color: #fff; }
.nb-hero-copy { max-width: 730px; }
.nb-hero-badge { display: inline-flex; align-items: center; gap: 9px; background: rgba(245,184,34,.16); border: 1px solid rgba(245,184,34,.55); color: #ffd873; font-family: 'Archivo', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; padding: 7px 13px; border-radius: 2px; margin-bottom: 22px; }
.nb-h1 { font-size: 60px; line-height: 1.02; font-weight: 800; color: #fff; letter-spacing: -.022em; margin-bottom: 20px; }
.nb-hero-sub { font-size: 20px; line-height: 1.55; color: #d6e2ec; margin: 0 0 14px; }
.nb-hero-secondary { font-size: 17px; line-height: 1.6; color: #a8bfd2; margin: 0 0 32px; }
.nb-hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }
.nb-hero-trust { display: flex; gap: 26px; flex-wrap: wrap; margin-top: 30px; font-size: 14px; color: #cddbe8; }

/* ---------- Buttons ---------- */
.nb-btn { display: inline-block; font-family: 'Archivo', sans-serif; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; border-radius: 3px; border: none; cursor: pointer; text-align: center; transition: background .15s ease, color .15s ease; }
.nb-btn--primary { background: #f5b822; color: #0b2239; font-size: 15px; padding: 17px 28px; }
.nb-btn--primary:hover { background: #d99b0c; color: #0b2239; }
.nb-btn--ghost { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.4); color: #fff; font-size: 15px; padding: 17px 28px; }
.nb-btn--ghost:hover { background: rgba(255,255,255,.18); color: #fff; }
.nb-btn--dark { background: #0b2239; color: #fff; font-size: 15px; padding: 15px 24px; }
.nb-btn--dark:hover { background: #f5b822; color: #0b2239; }
.nb-btn--sm { font-size: 13.5px; padding: 13px 20px; letter-spacing: .07em; }
.nb-btn--emergency { background: #f5b822; color: #0b2239; font-size: 15px; padding: 15px 24px; }
.nb-btn--emergency:hover { background: #d99b0c; color: #0b2239; }

/* ---------- Stat strip ---------- */
.nb-stats { background: #f4f1ec; border-bottom: 1px solid #e3ddd3; }
.nb-stats-grid { max-width: 1240px; margin: 0 auto; padding: 0 24px; display: grid; grid-template-columns: repeat(4, 1fr); }
.nb-stat { padding: 26px 22px; border-right: 1px solid #e3ddd3; display: flex; gap: 14px; align-items: baseline; }
.nb-stat:last-child { border-right: none; }
.nb-stat-bullet { font-family: 'Archivo', sans-serif; font-size: 12px; font-weight: 700; color: #f5b822; }
.nb-stat-label { font-family: 'Archivo', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #7d8b99; }
.nb-stat-value { font-family: 'Archivo', sans-serif; font-size: 22px; font-weight: 700; color: #0b2239; letter-spacing: -.01em; }

/* ---------- Body grid (main + rail) ---------- */
.nb-shell { max-width: 1240px; margin: 0 auto; padding: 0 24px; display: grid; grid-template-columns: minmax(0, 1fr) 356px; gap: 56px; align-items: start; }
.nb-main { padding: 56px 0 0; min-width: 0; }
.nb-rail { position: sticky; top: 96px; padding: 56px 0 40px; }

/* ---------- TOC card ---------- */
.nb-toc { border: 1px solid #e3ddd3; border-left: 4px solid #f5b822; background: #faf8f5; padding: 22px 26px; margin-bottom: 52px; }
.nb-toc-label { font-family: 'Archivo', sans-serif; font-size: 11.5px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: #7d8b99; margin-bottom: 14px; }
.nb-toc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 28px; font-size: 15.5px; }
.nb-toc-grid a { color: #14344f; }
.nb-toc-grid a:hover { color: #8a6307; }

/* ---------- Section rhythm ---------- */
.nb-section { margin-bottom: 64px; }
.nb-h2 { font-size: 36px; font-weight: 700; color: #0b2239; letter-spacing: -.02em; line-height: 1.12; margin-bottom: 14px; }
.nb-lead { font-size: 17.5px; line-height: 1.68; color: #3c4a58; margin: 0 0 26px; max-width: 68ch; }
.nb-p { font-size: 17.5px; line-height: 1.68; margin: 0 0 16px; }
.nb-caption { font-size: 13.5px; color: #7d8b99; font-style: italic; margin-bottom: 24px; }
.nb-kicker { font-family: 'Archivo', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #8a6307; margin-bottom: 9px; }
.nb-meta-label { font-family: 'Archivo', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: #7d8b99; display: block; margin-bottom: 3px; }

/* ---------- About-section photo ---------- */
.nb-about-photo { width: 100%; height: 340px; object-fit: cover; border-radius: 4px; margin-bottom: 12px; }

/* ---------- Cards / grids ---------- */
.nb-g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.nb-g3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.nb-g4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.nb-g6 { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: #e3ddd3; border: 1px solid #e3ddd3; }
.nb-g6 > * { background: #fff; padding: 24px 26px; }
.nb-g6 h3 { font-size: 19px; font-weight: 700; color: #0b2239; margin-bottom: 8px; }
.nb-g6 p { margin: 0; font-size: 15.5px; line-height: 1.6; color: #4a5764; }

.nb-card { border: 1px solid #e3ddd3; background: #faf8f5; padding: 24px 26px; }
.nb-card h3 { font-size: 19px; font-weight: 700; color: #0b2239; margin-bottom: 8px; }
.nb-card p, .nb-card ul { margin: 0; font-size: 16px; line-height: 1.75; color: #4a5764; }
.nb-card ul { padding-left: 20px; }

.nb-panel-navy { background: #0b2239; color: #d6e2ec; padding: 28px; border-radius: 4px; }
.nb-panel-navy .nb-kicker { color: #ffd873; margin-bottom: 16px; }
.nb-panel-navy ol { margin: 0; padding-left: 20px; font-size: 16px; line-height: 1.8; }
.nb-panel-navy strong { color: #fff; }

.nb-left-mark { border-left: 3px solid #f5b822; padding: 4px 0 4px 20px; }
.nb-left-mark h3 { font-size: 19px; font-weight: 700; color: #0b2239; margin-bottom: 8px; }
.nb-left-mark p { margin: 0; font-size: 15.5px; line-height: 1.6; color: #4a5764; }

/* ---------- Code / paperwork rows ---------- */
.nb-coderows { display: grid; gap: 1px; background: #e3ddd3; border: 1px solid #e3ddd3; }
.nb-coderow { background: #fff; padding: 22px 26px; display: grid; grid-template-columns: 220px 1fr; gap: 24px; }
.nb-coderow-label { font-family: 'Archivo', sans-serif; font-size: 17px; font-weight: 700; color: #0b2239; }
.nb-coderow p { margin: 0; font-size: 16px; line-height: 1.65; color: #4a5764; }

/* ---------- Numbered step row ---------- */
.nb-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.nb-step { border-top: 3px solid #dfd8cd; padding-top: 16px; }
.nb-step--first { border-top-color: #f5b822; }
.nb-step-label { font-family: 'Archivo', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: #7d8b99; margin-bottom: 7px; }
.nb-step h3 { font-size: 17px; font-weight: 700; color: #0b2239; margin-bottom: 6px; }
.nb-step p { margin: 0; font-size: 15px; line-height: 1.55; color: #4a5764; }

/* ---------- Checklist ---------- */
.nb-check { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 32px; }
.nb-check-item { display: flex; gap: 12px; font-size: 16.5px; line-height: 1.55; }
.nb-check-arrow { color: #8a6307; font-weight: 700; }

/* ---------- Service cards ---------- */
.nb-svc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.nb-svc { border: 1px solid #e3ddd3; background: #fff; display: block; padding: 24px 26px; transition: border-color .15s ease; }
.nb-svc:hover { border-color: #f5b822; }
.nb-svc h3 { font-size: 20px; font-weight: 700; color: #0b2239; margin-bottom: 7px; }
.nb-svc p { margin: 0; font-size: 15.5px; line-height: 1.6; color: #4a5764; }

/* ---------- Material picker ---------- */
.nb-mat-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 0; }
.nb-mat-tab { font-family: 'Archivo', sans-serif; font-size: 14px; letter-spacing: .04em; padding: 13px 20px; cursor: pointer; border-radius: 2px 2px 0 0; }
.nb-mat-tab[aria-selected="false"] { font-weight: 600; border: 1px solid #e3ddd3; background: #faf8f5; color: #14344f; }
.nb-mat-tab[aria-selected="true"] { font-weight: 700; border: 1px solid #f5b822; background: #f5b822; color: #0b2239; }
.nb-mat-panel { border: 1px solid #e3ddd3; border-top: 3px solid #f5b822; background: #fff; padding: 30px 32px; display: grid; grid-template-columns: 1fr 240px; gap: 32px; align-items: start; }
.nb-mat-panel h3 { font-size: 24px; font-weight: 700; color: #0b2239; margin-bottom: 12px; }
.nb-mat-panel .nb-mat-body { font-size: 16.5px; line-height: 1.68; color: #3c4a58; margin: 0 0 18px; }
.nb-mat-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; font-size: 15.5px; }
.nb-mat-aside { background: #f4f1ec; border: 1px solid #e3ddd3; padding: 18px; font-size: 14.5px; line-height: 1.6; color: #4a5764; }
.nb-mat-aside-label { font-family: 'Archivo', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: #0b2239; margin-bottom: 8px; }

/* ---------- FAQ accordion ---------- */
.nb-faq-list { border-top: 1px solid #e3ddd3; }
.nb-faq-item { border-bottom: 1px solid #e3ddd3; }
.nb-faq-item summary { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 20px 4px; font-family: 'Archivo', sans-serif; font-size: 19px; font-weight: 600; color: #0b2239; }
.nb-faq-plus { flex: 0 0 auto; width: 26px; height: 26px; display: grid; place-items: center; color: #8a6307; font-size: 24px; font-weight: 400; transition: transform .18s ease; }
.nb-faq-item p { margin: 0 0 22px; padding-right: 46px; font-size: 16.5px; line-height: 1.68; color: #3c4a58; }

/* ---------- Area section ---------- */
.nb-map { width: 100%; height: 320px; border: 1px solid #e3ddd3; display: block; margin-bottom: 26px; }
.nb-nearby-label { font-family: 'Archivo', sans-serif; font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #7d8b99; margin-bottom: 14px; }
.nb-nearby-chips { display: flex; flex-wrap: wrap; gap: 9px; }
.nb-chip { border: 1px solid #e3ddd3; padding: 9px 16px; font-size: 15px; color: #14344f; background: #faf8f5; transition: border-color .15s ease, color .15s ease; }
.nb-chip:hover { border-color: #f5b822; color: #8a6307; }
.nb-chip--all { border-color: #0b2239; color: #0b2239; background: #fff; font-weight: 600; }
.nb-chip--all:hover { background: #0b2239; color: #fff; border-color: #0b2239; }

/* ---------- Lead-form rail ---------- */
.nb-lf { border: 1px solid #dfd8cd; background: #fff; box-shadow: 0 10px 34px rgba(11,34,57,.09); }
.nb-lf-head { background: #0b2239; padding: 22px 24px; }
.nb-lf-head h2 { font-size: 21px; font-weight: 700; color: #fff; margin-bottom: 6px; letter-spacing: -.01em; }
.nb-lf-head p { margin: 0; font-size: 14.5px; line-height: 1.5; color: #a8bfd2; }
.nb-lf-body { padding: 22px 24px 24px; display: grid; gap: 12px; }
.nb-lf label { display: grid; gap: 5px; font-family: 'Archivo', sans-serif; font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #7d8b99; }
.nb-lf input,
.nb-lf select { font-family: 'Source Sans 3', sans-serif; font-size: 16px; padding: 11px 12px; border: 1px solid #d9d2c7; border-radius: 2px; color: #16202b; letter-spacing: normal; text-transform: none; font-weight: 400; min-width: 0; background: #fff; }
.nb-lf-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.nb-lf-submit { background: #f5b822; border: none; color: #0b2239; font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 15px; letter-spacing: .06em; text-transform: uppercase; padding: 16px; border-radius: 3px; cursor: pointer; margin-top: 4px; transition: background .15s ease; }
.nb-lf-submit:hover { background: #d99b0c; }
.nb-lf-fine { margin: 0; font-size: 13px; line-height: 1.5; color: #8b96a2; text-align: center; }
.nb-lf-trust { border: 1px solid #dfd8cd; border-top: none; background: #f4f1ec; padding: 18px 24px; display: grid; gap: 9px; font-size: 14.5px; color: #4a5764; }
.nb-lf-trust a { color: #0b2239; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Final CTA band ---------- */
.nb-final { background: #0b2239; margin-top: 64px; }
.nb-final-inner { max-width: 1240px; margin: 0 auto; padding: 64px 24px; display: grid; grid-template-columns: 1.3fr 1fr; gap: 48px; align-items: center; }
.nb-final h2 { font-size: 40px; font-weight: 800; color: #fff; letter-spacing: -.022em; line-height: 1.08; margin-bottom: 16px; }
.nb-final p { font-size: 18px; line-height: 1.6; color: #a8bfd2; margin: 0; }
.nb-final-ctas { display: grid; gap: 12px; }
.nb-final-ctas .nb-btn { padding: 19px; font-size: 16px; }

/* ---------- Fixed call bar ---------- */
.nb-callbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 80; background: #0b2239; border-top: 2px solid #f5b822; box-shadow: 0 -6px 24px rgba(0,0,0,.22); }
.nb-callbar-inner { max-width: 1240px; margin: 0 auto; padding: 12px 24px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.nb-callbar-text { flex: 1; min-width: 180px; color: #cddbe8; font-size: 15px; line-height: 1.35; }
.nb-callbar-text strong { color: #fff; font-family: 'Archivo', sans-serif; }
.nb-callbar a { font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 14px; letter-spacing: .05em; text-transform: uppercase; padding: 13px 20px; border-radius: 3px; }
.nb-callbar-call { background: #fff; color: #0b2239; }
.nb-callbar-call:hover { background: #cddbe8; color: #0b2239; }
.nb-callbar-est { background: #f5b822; color: #0b2239; }
.nb-callbar-est:hover { background: #d99b0c; color: #0b2239; }

/* Bottom safety: keep site's back-to-top button and footer clear of the call bar. */
body.nb-body .site-footer { padding-bottom: 92px; }
body.nb-body .back-to-top { bottom: 84px; }

/* =========================================================
   RESPONSIVE — breakpoints per README §Responsive behavior
   ========================================================= */

@media (max-width: 1080px) {
  .nb-shell { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .nb-rail { position: static; padding: 0 0 48px; }
  .nb-g4 { grid-template-columns: 1fr 1fr; }
  .nb-steps { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  .nb-stats-grid { grid-template-columns: 1fr 1fr; }
  .nb-g3 { grid-template-columns: 1fr; }
  .nb-mat-panel { grid-template-columns: 1fr; }
  .nb-svc-grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .nb-h1 { font-size: 38px; }
  .nb-hero-sub { font-size: 18px; }
  .nb-h2 { font-size: 28px; }
  .nb-g2 { grid-template-columns: 1fr; }
  .nb-g4 { grid-template-columns: 1fr; }
  .nb-g6 { grid-template-columns: 1fr; }
  .nb-toc-grid { grid-template-columns: 1fr; }
  .nb-coderow { grid-template-columns: 1fr; gap: 6px; }
  .nb-stats-grid { grid-template-columns: 1fr; }
  .nb-stat { border-right: none; border-bottom: 1px solid #e3ddd3; }
  .nb-stat:last-child { border-bottom: none; }
  .nb-callbar-inner { flex-direction: column; align-items: stretch; gap: 8px; }
  .nb-callbar a { text-align: center; }
  .nb-final-inner { grid-template-columns: 1fr; gap: 28px; }
  .nb-steps { grid-template-columns: 1fr 1fr; }
  .nb-h1, .nb-h2 { line-height: 1.15; }
}

@media (max-width: 520px) {
  .nb-h1 { font-size: 32px; }
  .nb-check { grid-template-columns: 1fr; }
  .nb-steps { grid-template-columns: 1fr; }
}