/* SEO page template styles — layered on top of site.css. Used only by generated pages. */

/* ---------- Breadcrumb ---------- */
.crumbs{font-size:.86rem;color:#9fb8d0;margin-bottom:18px}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:4px 8px}
.crumbs li{display:flex;align-items:center;gap:8px}
.crumbs li+li::before{content:"/";color:#5f7a93}
.crumbs a{color:#cdddec;text-decoration:underline;text-underline-offset:3px}
.crumbs a:hover{color:#fff}
.crumbs [aria-current]{color:#fff;font-weight:700}

/* ---------- Hero (homepage .hero from site.css) ---------- */
.hero .sub a{color:#fff;font-weight:700;text-decoration:underline;text-underline-offset:3px}
.split .rich a,.split li a,.faq .ans a,.map-sec .lead a{color:inherit;font-weight:700;text-decoration:underline;text-underline-offset:3px}

/* ---------- Benefits / Why split (image + content, mirrored) ---------- */
.split{background:var(--paper)}
.split .wrap{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center}
.split.reverse .split-media{order:2}
.split-media img,.split-media .ph{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:20px;box-shadow:var(--shadow)}
.split-media .ph{display:grid;place-items:center;background:linear-gradient(160deg,var(--navy),var(--navy-800))}
.badge{display:inline-block;background:rgba(46,139,158,.12);color:var(--amber-600);font-size:.76rem;font-weight:800;
       letter-spacing:.1em;text-transform:uppercase;padding:6px 13px;border-radius:30px}
.split h2{margin:12px 0 12px}
.split .rich{color:var(--muted);font-size:1.05rem;margin-bottom:22px}
.checks{list-style:none;display:grid;gap:16px;margin-bottom:28px}
.checks li{display:flex;gap:12px;align-items:flex-start;color:var(--muted)}
.checks li svg{flex:0 0 auto;margin-top:3px}
.checks li strong{color:var(--navy);display:block;font-size:1.04rem;margin-bottom:2px}
.split-cta{display:flex;flex-wrap:wrap;gap:12px}
@media(max-width:880px){.split .wrap{grid-template-columns:1fr;gap:30px}.split.reverse .split-media{order:0}}

/* ---------- Card hub (locations / services) ---------- */
.hub{background:var(--cream)}
.hub-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,340px));justify-content:center;gap:22px}
.hub-card{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
          overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .15s ease,box-shadow .15s ease}
.hub-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.hub-card img,.hub-card .ph{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover}
.hub-card .ph{display:grid;place-items:center;background:linear-gradient(160deg,var(--navy),var(--navy-800))}
.hub-card .body{padding:22px;display:flex;flex-direction:column;gap:8px;flex:1}
.hub-card h3{font-size:1.18rem}
.hub-card p{color:var(--muted);font-size:.96rem;flex:1}
.hub-card .more{color:var(--amber-600);font-weight:800;font-size:.95rem}
@media(max-width:600px){.hub-grid{grid-template-columns:1fr}}

/* ---------- Map ---------- */
.map-sec{background:var(--paper)}
.map-frame{border-radius:20px;overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow-sm)}
.map-frame iframe{display:block;width:100%;height:420px;border:0}
@media(max-width:600px){.map-frame iframe{height:320px}}

/* Section tones — the generator alternates these so neighbouring sections never share a background */
section.tone-paper{background:var(--paper)}
section.tone-cream{background:var(--cream)}

/* ---------- /seo-template/ preview switcher (template preview pages only) ---------- */
.tpl-bar{background:#fff7d6;border-bottom:1px solid #ecdca0;color:#5c4a00;font-size:.9rem}
.tpl-bar .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;padding:10px 22px}
.tpl-bar .tpl-note{color:#8a7520}
.tpl-bar nav{display:flex;flex-wrap:wrap;gap:6px;margin-left:auto}
.tpl-bar nav a,.tpl-bar nav span{padding:5px 12px;border-radius:30px;font-weight:700}
.tpl-bar nav a{background:#fff;border:1px solid #ecdca0}
.tpl-bar nav a:hover{background:#fff1b8}
.tpl-bar nav span{background:var(--navy);color:#fff}

/* Hub heading used as the page H1 (/service-areas/): same look as section h2s */
.sec-head h1{font-size:clamp(1.7rem,3.6vw,2.6rem);font-weight:800;margin:10px 0 14px}

/* /photo-credits/ page (licensed photo attribution) */
.credit-list{list-style:none;max-width:760px;margin:0 auto;display:grid;gap:14px}
.credit-list li{display:flex;gap:16px;align-items:center;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:14px;color:var(--muted);font-size:.95rem}
.credit-list img{width:120px;height:auto;aspect-ratio:16/10;object-fit:cover;border-radius:10px;flex:0 0 auto}
.credit-list strong{color:var(--navy)}
.credit-list a{text-decoration:underline;text-underline-offset:2px}
@media(max-width:520px){.credit-list img{width:84px}}

/* Services hub on city pages: homepage .svc cards as links, plus a CTA line */
.svc-hub .svc-grid{grid-template-columns:repeat(auto-fit,minmax(260px,340px));justify-content:center}
.svc-link{display:flex;flex-direction:column;color:inherit}
.svc-link p{flex:1;margin-bottom:16px}
.svc-link .more{color:var(--amber-600);font-weight:800;font-size:.95rem}
@media(max-width:600px){.svc-hub .svc-grid{grid-template-columns:1fr}}