/* pages-2b.css — Tranche 2b (Agent D, home-exteriors subpages)
   Owned by this builder only (brief §6: one extra_css file per builder agent).
   Adds 3 small components on top of the existing site.css token system
   (--ink/--ink-soft/--steel/--steel-dim/--line/--line-strong/--azure/--bg-tint):
   breadcrumb row, FAQ list, and a related-services chip row. No new colors,
   radii, or fonts invented. */

.crumb{ padding:16px 0 0; }
.crumb ol{ list-style:none; display:flex; flex-wrap:wrap; gap:4px; font-size:12.5px; color:var(--steel-dim); }
.crumb li{ display:flex; align-items:center; gap:4px; }
.crumb li:not(:last-child)::after{ content:"/"; margin-left:4px; color:var(--line-strong); }
.crumb a{ color:var(--slate); }
.crumb a:hover, .crumb a:focus-visible{ color:var(--azure); }
.crumb li[aria-current] span{ color:var(--ink-soft); }

.faq-section{ padding:72px 0; background:#fff; }
.faq-section.tint{ background:var(--bg-tint); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.faq-list{ max-width:760px; margin:0 auto; }
.faq-item{ border-top:1px solid var(--line); padding:22px 0; }
.faq-item:last-child{ border-bottom:1px solid var(--line); }
.faq-q{ font-family:'Poppins',sans-serif; font-weight:600; font-size:16.5px; color:var(--ink); margin-bottom:8px; }
.faq-a{ color:var(--ink-soft); font-size:15px; line-height:1.65; margin:0; }

.rel-section{ padding:56px 0; }
.rel-head{ max-width:640px; margin:0 auto 24px; text-align:center; }
.rel-links{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }
.rel-links a{
  border:1px solid var(--line-strong); border-radius:999px; padding:10px 20px;
  font-family:'Poppins',sans-serif; font-weight:600; font-size:13px; color:var(--slate);
  transition:border-color .2s var(--ease-out), color .2s var(--ease-out);
}
.rel-links a:hover, .rel-links a:focus-visible{ border-color:var(--azure); color:var(--azure); }

@media (max-width:640px){
  .faq-section{ padding:48px 0; }
  .rel-section{ padding:40px 0; }
}