/* Holmes Roofing — Tranche 2c (core pages) page-specific CSS.
   Owned by Agent E. Additive only — every rule below is new selectors
   built from existing site.css tokens (--ink/--steel/--azure/--line/
   --bg-tint/--dark/--band/--gstar, Poppins/Open Sans/Alex Brush).
   Nothing here overrides a site.css rule; components already shipped
   (.page-hero, .pg-intro/.why-grid, .svc-section/.svc-grid/.svc-card,
   .warranty-band, .rev-google, .fin-grid/.fin-panel, .quote-band/
   .contact-form, .process/.pc, .seasonal-offers/.so-grid/.so-card,
   .cta-banner) are reused verbatim on these 11 pages with zero new CSS. */

/* ---- legal prose (privacy-policy, terms-of-service, legal-disclaimer):
   a readable single-column measure inside the existing .svc-section
   container — no card/grid, just typography. ---- */
.legal-content{ max-width:760px; margin:0 auto; }
.legal-content h2, .legal-content h3{ margin:34px 0 12px; }
.legal-content h2:first-child, .legal-content h3:first-child{ margin-top:0; }
.legal-content p{ color:var(--ink-soft); font-size:15px; line-height:1.7; margin-bottom:16px; }
.legal-content ul{ margin:0 0 16px 22px; color:var(--ink-soft); font-size:15px; line-height:1.7; }
.legal-content li{ margin-bottom:6px; }
.legal-content a{ color:var(--azure); text-decoration:underline; text-underline-offset:2px; }
.legal-updated{ font-family:'Poppins',sans-serif; font-weight:600; font-size:12px; letter-spacing:.4px; color:var(--steel-dim); margin-bottom:28px; }

/* ---- FAQ list (faq/): Q&A pairs, reuses .svc-section wrapper for the
   section band; question is a heading, answer is body copy. No JS
   accordion — everything renders open (no-JS-safe, matches the site's
   never-hide-content rule). ---- */
.faq-list{ max-width:820px; margin:0 auto; display:flex; flex-direction:column; gap:0; }
.faq-item{ padding:26px 0; border-bottom:1px solid var(--line); }
.faq-item:first-child{ padding-top:0; }
.faq-item h3{ font-size:18.5px; margin-bottom:10px; }
.faq-item p{ color:var(--ink-soft); font-size:15px; line-height:1.7; margin-bottom:10px; }
.faq-item p:last-child{ margin-bottom:0; }
.faq-item ul{ margin:0 0 10px 22px; color:var(--ink-soft); font-size:15px; line-height:1.7; }
.faq-item a{ color:var(--azure); text-decoration:underline; text-underline-offset:2px; }

/* ---- gallery grid (gallery/): responsive photo grid, real jobsite
   photos only, honest captions on hover/focus + always-visible for
   no-JS (caption sits under the photo, not an overlay-on-hover trick,
   so nothing depends on :hover to be readable). ---- */
.gallery-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:22px; }
.gal-card{ border-radius:12px; overflow:hidden; border:1px solid var(--line-strong); background:#fff; box-shadow:0 18px 40px -28px rgba(21,24,29,.22); }
.gal-card img{ width:100%; height:220px; object-fit:cover; display:block; }
.gal-cap{ padding:12px 14px 14px; font-family:'Poppins',sans-serif; font-weight:600; font-size:12.5px; color:var(--steel); letter-spacing:.2px; }
@media (max-width:640px){ .gal-card img{ height:200px; } }

/* ---- contact page: two-column split (form left, NAP/hours panel
   right) — reuses .contact-form verbatim in the left column, new
   .nap-card for the right. ---- */
.contact-split{ display:grid; grid-template-columns:1fr .78fr; gap:40px; align-items:start; max-width:1040px; margin:0 auto; }
.contact-split .contact-form{ margin:0; }
.nap-card{ background:var(--bg-tint); border:1px solid var(--line-strong); border-radius:16px; padding:32px 28px; }
.nap-card h3{ font-size:15px; margin-bottom:18px; }
.nap-row{ margin-bottom:18px; }
.nap-row:last-child{ margin-bottom:0; }
.nap-label{ font-family:'Poppins',sans-serif; font-weight:600; font-size:10.5px; letter-spacing:1.3px; text-transform:uppercase; color:var(--steel); margin-bottom:6px; }
.nap-val{ font-size:15px; color:var(--ink); line-height:1.5; }
.nap-val a{ color:var(--azure); font-weight:600; }
.nap-hours-row{ display:flex; justify-content:space-between; font-size:14px; color:var(--ink-soft); padding:3px 0; }
.nap-hours-row b{ color:var(--ink); }
@media (max-width:860px){ .contact-split{ grid-template-columns:1fr; } }

/* ---- careers page: single centered content panel (intro + how-to-
   apply), reuses .fin-panel's bordered/tinted box language at a wider
   measure. ---- */
.careers-panel{ max-width:640px; margin:0 auto; background:var(--bg-tint); border:1px solid var(--line-strong); border-radius:16px; padding:38px 34px; text-align:center; }
.careers-panel p{ color:var(--ink-soft); font-size:15.5px; line-height:1.7; margin-bottom:18px; }
.careers-panel p:last-of-type{ margin-bottom:0; }
.careers-panel .btn{ margin-top:8px; }

/* ---- cost-factors page: small labeled stat-style figure inside a
   .svc-card (no dollar amounts — labels only, e.g. "Pitch", "Tear-off
   layers"), reuses .svc-grid/.svc-card exactly, this just tightens the
   card's own eyebrow row. ---- */
.svc-card .svc-eyebrow{ font-family:'Poppins',sans-serif; font-weight:700; font-size:10.5px; letter-spacing:1.4px; text-transform:uppercase; color:var(--azure); margin-bottom:6px; }