/* =============================================================
   Articles-PMO.css
   Internal version: V6 | 2026-10-14 CST (the old teal colour, and its faint see-through backgrounds, are now the site link blue 1f78d1 (T85)) | V5 2026-10-14 CST (the 120 legacy-sheet rules the articles still used moved to the top, so articles stop loading Global-CSS-PMO.css; V4: articles 1120 wide with an 820 reading column, no sidebar, and the pill beside Google's Preferred Source button, Sam 10-14-2026)

   THE ARTICLE STYLESHEET. Split out of Global-CSS-PMO.css on 2026-08-02.

   WHY THIS FILE EXISTS
   Article styling used to live inside the 228KB legacy sheet. It was 9% of that
   file, but every article styling change meant redeploying the one snippet that
   310 pages depend on. On 2026-08-01 exactly that happened: an article-only CSS
   edit was shipped, the deploy rewrote the shared snippet, a page-targeting guard
   that existed only on the live copy was lost, and the legacy sheet landed on top
   of every rebuilt page. FAQ icons inflated to 398px, FAQ rows grew a second plus
   button, dark headings went navy-on-navy.

   Nothing about the CSS was wrong. The blast radius was wrong. Article work now
   edits THIS file, which loads only where article markup exists, so it cannot
   reach another page type.

   WHO GETS THIS FILE (see the v2_only/scope wrapper in Deploy-Snippets-PMO.py)
     - every single post, which is where the articles live
     - the article index page /pest-articles/
     - /pest-in-your-city/, which reuses the article pagination

   DO NOT add non-article rules here, and do not add article rules to the global
   sheet. That separation is the whole point of the file.
   ============================================================= */

/* MOVED FROM THE LEGACY SHEET 10-14-2026 (Global-CSS-PMO.css, snippet 5), checker item 15.
   These are the 120 rules of that 128KB sheet that can match anything on the 70 articles,
   /pest-articles/ or /pest-in-your-city/, copied word for word and in the same order, so those
   pages stop downloading the legacy sheet. Chrome tested every legacy rule against all 72 pages;
   the other 644 matched nothing there. They sit FIRST so they keep the place they had in the
   cascade (the legacy sheet loaded just before the header sheet and this one), and the rest of
   this file still overrides them exactly as before. The :root colours here are the ones every
   rule below uses as var(--navy), var(--yellow) and so on.
   New article styling goes BELOW this block, never into it. */
:root {
  --blue:       #1f78d1;
  --blue-d:     #1d6a8a;
  --blue-l:     #4FA8CC;
  --blue-pale:  #E0EAF2;
  --navy:       #0D2137;
  --yellow:     #F5A623;
  --yellow-d:   #D4861A;
  --text:       #1A2A3A;
  --muted:      #5A7A8A;
  --border:     #C8DDE8;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; }
.wrap { max-width: 1140px; margin: 0 auto; padding: 0 20px; }
.eyebrow {
  font-size: 13px; font-weight: 700; letter-spacing: .2em;
 color: var(--blue);
  display: block; margin-bottom: 10px;
}
.page-title-sub {
  color: rgba(255,255,255,.65);
  font-size: 15px;
  margin-top: 6px;
}
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 26px; border-radius: 8px; font-weight: 700; font-size: 15px;
  transition: all .2s; cursor: pointer; border: none;
  font-family: "Plus Jakarta Sans", sans-serif;
  line-height: 1; white-space: nowrap; min-height: 50px;
}
@media(max-width:480px) {
  .btn { white-space: normal; text-align: center; line-height: 1.3; }
}
.btn-amber { background: var(--yellow); color: var(--navy); }
.btn-amber:hover { background: var(--yellow-d); transform: translateY(-1px); }
.hero { background: linear-gradient(160deg, var(--navy) 0%, #0e2d4a 60%, #0a2035 100%); padding: 52px 20px 48px; position: relative; overflow: hidden; }
.hero::after { content: ""; position: absolute; top: -100px; right: -100px; width: 500px; height: 500px; background: radial-gradient(circle, rgba(31,120,209,.14) 0%, transparent 65%); pointer-events: none; }
.hero h1 { font-family: "Bebas Neue", sans-serif; font-size: clamp(38px,7vw,60px); line-height: .95; letter-spacing: .5px; color: #fff; margin-bottom: 16px; }
.hero h1 em { color: var(--yellow); font-style: normal; }
.tbar { background: var(--blue); display: flex; justify-content: center; flex-wrap: wrap; }
.tbar-item { padding: 14px 20px; display: flex; align-items: center; gap: 8px; color: #fff; font-size: 12px; font-weight: 700; border-right: 1px solid rgba(255,255,255,.2); }
.tbar-item:last-child { border-right: none; }
.tbar-item span { font-size: 18px; }
@media(max-width:640px) {
  .tbar { flex-direction: column; }
  .tbar-item { width: 100%; border-right: none !important; border-bottom: 1px solid rgba(255,255,255,.15); padding: 10px 20px; }
  .tbar-item:last-child { border-bottom: none; }
}
.sec      { padding: 56px 0; }
.sec-alt  { background: #f8fbfd; padding: 56px 0; }
.breadcrumb { background: var(--blue-pale); padding: 10px 20px; border-bottom: 1px solid var(--border); }
.breadcrumb-inner { max-width: 1140px; margin: 0 auto; font-size: 12px; color: var(--muted); }
.breadcrumb-inner a { color: var(--blue); font-weight: 600; }
.breadcrumb-inner span { margin: 0 5px; opacity: .5; }
.aka { font-size: 11px; color: var(--blue); font-style: italic; margin-bottom: 6px; }
@keyframes blink { 0%,100% { opacity:1; transform:scale(1); } 50% { opacity:.5; transform:scale(.8); } }
.seasonal-cta { background: linear-gradient(135deg, var(--navy) 0%, #0e2d4a 60%, #0a2035 100%); padding: 56px 20px; position: relative; overflow: hidden; }
.seasonal-cta::before { content: ""; position: absolute; top: -80px; right: -80px; width: 400px; height: 400px; background: radial-gradient(circle, rgba(31,120,209,.18) 0%, transparent 65%); pointer-events: none; }
.seasonal-cta-inner { max-width: 800px; margin: 0 auto; text-align: center; position: relative; z-index: 1; }
.seasonal-cta h2 { font-family: "Bebas Neue", sans-serif; font-size: clamp(30px,6vw,52px); color: #fff; letter-spacing: 1px; line-height: 1.05; margin-bottom: 10px; }
.seasonal-cta h2 em { color: var(--yellow); font-style: normal; }
.entry-content .seasonal-cta h2 { color: #fff !important; font-size: clamp(30px,6vw,52px) !important; letter-spacing: 1px !important; line-height: 1.05 !important; margin-bottom: 10px !important; }
.seasonal-cta .hook { font-size: 15px; color: rgba(255,255,255,.7); line-height: 1.7; margin-bottom: 28px; max-width: 560px; margin-left: auto; margin-right: auto; }
.seasonal-cta .cta-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 20px; }
.trust-micro { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; }
.trust-micro span { font-size: 12px; color: rgba(255,255,255,.45); display: flex; align-items: center; gap: 5px; }
.trust-micro span::before { content: "✓"; color: var(--blue-l); font-weight: 700; }
.btn-white-outline { display: inline-flex; align-items: center; justify-content: center; padding: 14px 26px; border-radius: 8px; font-weight: 700; font-size: 15px; font-family: "Plus Jakarta Sans", sans-serif; background: transparent; color: #fff; border: 2px solid rgba(255,255,255,.45); min-height: 50px; line-height: 1; white-space: nowrap; transition: all .2s; cursor: pointer; }
.btn-white-outline:hover { border-color: #fff; background: rgba(255,255,255,.08); }
.inside-article:has(.hero), .inside-article:has(.hero-bar) { padding: 0 !important; }
.inside-article:has(.hero) .entry-header, .inside-article:has(.hero-bar) .entry-header { display: none; }
.grid-container:has(.hero), .grid-container:has(.hero-bar) { max-width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; }
#primary:has(.hero), .content-area:has(.hero), #primary:has(.hero-bar), .content-area:has(.hero-bar) { width: 100% !important; max-width: 100% !important; padding: 0 !important; }
.hero { width: 100%; }
@media(min-width:860px) { .hero-cta-row { display: grid !important; grid-template-columns: auto 200px !important; align-items: start !important; } }
@media(min-width:860px) { .faq-layout { display: grid !important; grid-template-columns: 1fr 340px !important; gap: 36px; overflow: visible; } }
@media(min-width:600px) { .stat-rail { display: grid !important; grid-template-columns: repeat(3,1fr) !important; } }
.entry-content h2 {
  font-family: "Bebas Neue", sans-serif !important;
  font-size: clamp(28px,4.5vw,42px) !important;
  letter-spacing: .5px !important;
  line-height: 1.1 !important;
  color: var(--text) !important;
  margin-bottom: 20px;
}
.entry-content .sec-h2 { font-family: "Bebas Neue", sans-serif !important; font-size: clamp(28px,4.5vw,42px) !important; letter-spacing: .5px; line-height: 1.1; color: var(--text); margin-bottom: 20px; }
.entry-content .sec-h2-tight { margin-bottom: 8px !important; }
.wrap-sm { max-width: 900px; }
.open-p { font-size: 15px; line-height: 1.85; color: var(--text); margin-bottom: 16px; }
.open-p:last-child { margin-bottom: 0; }
.sec-lead { font-size: 14px; color: var(--muted); margin-bottom: 24px; max-width: 680px; }
.btn-ghost-white { background: rgba(255,255,255,.12); color: #fff; border: 2px solid rgba(255,255,255,.4); }
.btn-ghost-white:hover { background: rgba(255,255,255,.2); }
.page-title-bar { background: var(--navy); padding: 36px 20px 28px; text-align: center; }
.page-title-bar h1 {
  font-family: "Bebas Neue", sans-serif;
  font-size: clamp(26px, 5vw, 44px);
  line-height: 1.05;
  letter-spacing: .5px;
  color: #fff;
  margin-bottom: 16px;
}
.page-title-bar h1 em { color: var(--yellow); font-style: normal; }
.pill {
  display: inline-block;
  font-size: 11px;
  background: transparent;
  color: var(--muted);
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 20px;
  border: 1.5px solid var(--border);
}
.sec { padding: 72px 0; }
@media(max-width:600px) {
  .sec { padding: 52px 0; }
}
.sec p a, .sec-light p a, .reviews-section p a {
  color: var(--blue);
  text-decoration: none;
  text-underline-offset: 2px;
}
@media(min-width:760px) { .entry-content .pl-feat-strip { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; } }
@media(max-width:640px) {
  .pricing-plans-sec { padding: 32px 14px; }
  .cal-section { padding: 32px 14px; }
  .sec.sec-tight { padding-top: 24px; padding-bottom: 24px; }
  .onetimes-wrap { padding: 16px; }
  .est-section { padding: 36px 14px; }
}
.entry-content .cap { font-size: 12px; color: #7a8a9a; font-style: italic; margin-top: 8px; line-height: 1.5; }
.entry-content .mugshot { background: #fff; border: 1px solid #C8DDE8; border-radius: 14px; overflow: hidden; display: grid; grid-template-columns: 280px 1fr; box-shadow: 0 4px 22px rgba(13,33,55,.06); }
@media(max-width:768px) {
  .entry-content .mugshot { grid-template-columns: 1fr; }
}
.entry-content .confusion-table { width: 100%; border-collapse: collapse; margin-top: 18px; background: #fff; border: 1px solid #E0EAF2; border-radius: 10px; overflow: hidden; }
.entry-content .confusion-table th { background: #0D2137; color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .08em; padding: 12px 14px; text-align: left; }
.entry-content .confusion-table td { padding: 12px 14px; font-size: 13px; color: #2A3A4A; border-bottom: 1px solid #E0EAF2; vertical-align: middle; line-height: 1.5; }
.entry-content .confusion-table tr:last-child td { border-bottom: none; }
.entry-content .confusion-table tr:nth-child(odd) td { background: #F8FBFD; }
@media(max-width:768px) {
  .entry-content .confusion-table thead { display: none; }
  .entry-content .confusion-table,
  .entry-content .confusion-table tbody,
  .entry-content .confusion-table tr,
  .entry-content .confusion-table td { display: block; width: 100%; }
  .entry-content .confusion-table tr { border: 1px solid #E0EAF2; border-radius: 8px; margin-bottom: 14px; padding: 14px 16px; }
  .entry-content .confusion-table tr:nth-child(odd)  { background: #F8FBFD !important; }
  .entry-content .confusion-table tr:nth-child(even) { background: #fff !important; }
  .entry-content .confusion-table tr:nth-child(odd) td { background: transparent; }
  .entry-content .confusion-table td { border-bottom: 1px dashed #E0EAF2; padding: 9px 0; font-size: 13px; }
  .entry-content .confusion-table td:last-child { border-bottom: none; padding-bottom: 0; }
  .entry-content .confusion-table td:first-child { padding-top: 0; border-bottom: 2px solid #F5A623; margin-bottom: 6px; padding-bottom: 10px; }
}
@media(max-width:768px) {
  body { padding-bottom: 54px; }
}
@media(max-width:768px) {
  .entry-content:has(.bc-wrap) .confusion-table th:first-child,
  .entry-content:has(.bc-wrap) .confusion-table td:first-child {
    width: 100% !important;
  }
  .entry-content:has(.bc-wrap) .confusion-table tr:last-child td:first-child {
    border-bottom: 2px solid #F5A623 !important;
    margin-bottom: 6px !important;
    padding-bottom: 10px !important;
  }
  .entry-content:has(.bc-wrap) .confusion-table td {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
  .entry-content:has(.bc-wrap) .confusion-table td:first-child .self-badge {
    left: 14px;
    transform: none;
    top: 10px;
  }
  .entry-content:has(.bc-wrap) .confusion-table td:first-child:has(.self-badge) {
    padding-top: 40px !important;
  }
  .entry-content:has(.bc-wrap) .species-cell-v {
    flex-direction: row !important;
    gap: 12px !important;
    align-items: center !important;
    text-align: left !important;
  }
  .entry-content:has(.bc-wrap) .species-cell-v strong {
    font-size: 13px;
    text-align: left;
    line-height: 1.3;
  }
  .entry-content:has(.bc-wrap) .species-cm-img {
    width: 40px !important;
    height: 40px !important;
    flex-shrink: 0;
    margin: 0 !important;
  }
  .entry-content:has(.bc-wrap) .confusion-table .cm-aka {
    display: block !important;
    font-size: 11px;
    line-height: 1.4;
  }
  .entry-content:has(.bc-wrap) .confusion-table .cm-sci {
    display: none !important;
  }
  .entry-content:has(.bc-wrap) .confusion-table .self-badge {
    font-size: 9px !important;
    padding: 2px 7px !important;
  }
  .entry-content:has(.bc-wrap) #confusion-matrix {
    padding-top: 52px !important;
  }
}
@media (max-width: 768px) {
  .entry-content .diy-fail-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}
@media(max-width: 600px) {
  .entry-content .bottom-stops-text {
    text-align: left;
  }
  .entry-content .bottom-cta-p {
    text-align: left;
  }
}
.single-post .entry-title { display: none !important; }
.single-post .entry-header .entry-meta { display: none !important; }
.single-post .wp-post-image { display: none !important; }
.single-post #nav-below,
.single-post footer.entry-meta { display: none !important; }
.city-tab-bar { display: flex; flex-wrap: wrap; gap: 6px; padding-bottom: 18px; margin-bottom: 24px; border-bottom: 2px solid var(--border); }
.city-tab { padding: 7px 14px; background: #F0F5FA; border: none; border-radius: 20px; font-size: 13px; font-weight: 700; color: var(--navy); cursor: pointer; font-family: inherit; transition: background .15s, color .15s; white-space: nowrap; }
.city-tab.active { background: var(--blue); color: #fff; }
.city-tab:hover:not(.active) { background: #DDE8F2; }
.city-photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(218px, 1fr)); gap: 14px; min-height: 200px; }
.city-lb { display: none; position: fixed; inset: 0; z-index: 9998; align-items: center; justify-content: center; padding: 16px; }
.city-lb.open { display: flex; }
.city-lb-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.82); cursor: pointer; }
.city-lb-box { position: relative; z-index: 1; background: #fff; border-radius: 12px; max-width: 700px; width: 100%; max-height: 90vh; overflow-y: auto; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.city-lb-img { width: 100%; display: block; border-radius: 12px 12px 0 0; max-height: 55vh; object-fit: contain; background: #0D2137; }
.city-lb-body { padding: 18px 22px 24px; }
.city-lb-title { font-size: 16px; font-weight: 700; color: var(--navy); margin-bottom: 8px; line-height: 1.3; }
.city-lb-desc { font-size: 14px; color: #444; line-height: 1.65; }
.city-lb-close { position: absolute; top: 10px; right: 12px; background: rgba(0,0,0,.55); color: #fff; border: none; border-radius: 50%; width: 34px; height: 34px; font-size: 22px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 2; transition: background .15s; }
.city-lb-close:hover { background: rgba(0,0,0,.8); }
@media(max-width:600px) {
  .city-lb { padding: 8px; }
  .city-lb-body { padding: 14px 16px 18px; }
  .city-lb-title { font-size: 15px; }
}
.city-link-strip { display: flex; flex-wrap: wrap; gap: 8px; padding: 20px 0 4px; }
.city-link-btn { display: inline-block; padding: 8px 16px; background: #F0F5FA; border-radius: 6px; font-size: 13px; font-weight: 600; color: var(--navy); text-decoration: none !important; transition: background .15s; }
.city-link-btn:hover { background: var(--blue); color: #fff !important; }
@media(max-width:600px) {
  .city-tab { font-size: 12px; padding: 6px 11px; }
  .city-photo-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .city-photo-meta { padding: 8px 10px 10px; }
}
@keyframes pmo-pulse-dot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(74,222,128,0.65); }
  50%       { box-shadow: 0 0 0 5px rgba(74,222,128,0); }
}


/* Blog post header image - floats right, title and byline flow left */
.blog-header-img { float: right !important; width: 275px !important; height: 185px !important; object-fit: cover !important; object-position: center !important; border-radius: 8px !important; margin: 0 0 16px 22px !important; display: block !important; box-shadow: 0 0 0 3px var(--navy) !important; }

/* Breadcrumb nav */
.blog-breadcrumb { font-size: 12px; color: var(--muted); margin-bottom: 10px; line-height: 1.4; }
.blog-breadcrumb a { color: var(--blue); text-decoration: none; font-weight: 600; }
.blog-breadcrumb a:hover { text-decoration: none; }
.blog-breadcrumb-sep { margin: 0 5px; color: var(--muted); }

/* Article wrapper */
.blog-article { max-width: 760px; margin: 0 auto; padding-top: 4px; }

/* Byline - compact strip with separator */
.blog-byline { font-size: 13px; color: var(--muted); margin-bottom: 24px; padding-bottom: 14px; border-bottom: 1px solid var(--border); display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; }
.blog-byline a { color: var(--blue); text-decoration: none; font-weight: 600; }
.blog-byline a:hover { text-decoration: none; }

/* Lead and body */
.blog-lead { font-size: 18px; line-height: 1.75; color: var(--text); margin-bottom: 28px; font-weight: 500; clear: right; }
.blog-article p { font-size: 16px; line-height: 1.8; color: var(--text); margin-bottom: 18px; }
.blog-article ul, .blog-article ol { margin: 0 0 18px 24px; }
.blog-article li { font-size: 16px; line-height: 1.75; color: var(--text); margin-bottom: 6px; }
.blog-article a { color: var(--blue); text-decoration: none; }
.blog-article a:hover { text-decoration: none; }
.blog-article img { max-width: 100%; height: auto; display: block; margin: 24px auto; border-radius: 6px; }

/* Callout box */
.blog-callout { background: #E0EAF2; border-left: 4px solid var(--blue); border-radius: 6px; padding: 16px 20px; margin: 24px 0; font-size: 15px; line-height: 1.65; color: var(--text); }
.blog-callout a { color: var(--blue); text-decoration: none; }
.blog-callout a:hover { text-decoration: none; }

/* Section headings - override entry-content Bebas Neue !important */
.blog-article h2 { font-family: "Plus Jakarta Sans", sans-serif !important; font-size: 22px !important; font-weight: 700 !important; color: var(--navy) !important; margin: 36px 0 14px !important; letter-spacing: 0 !important; line-height: 1.35 !important; text-transform: none !important; }
.blog-article h3 { font-family: "Plus Jakarta Sans", sans-serif !important; font-size: 18px !important; font-weight: 700 !important; color: var(--navy) !important; margin: 22px 0 10px !important; letter-spacing: 0 !important; line-height: 1.35 !important; text-transform: none !important; }

/* City service area pills */
.blog-city-pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 22px; }
.blog-city-pill { display: inline-block; padding: 5px 14px; background: #EEF4FB; border: 1px solid #C5DCEF; border-radius: 20px; font-size: 13px; color: var(--blue); font-weight: 600; text-decoration: none !important; white-space: nowrap; transition: all .15s; }
.blog-city-pill:hover { background: var(--blue) !important; color: #fff !important; border-color: var(--blue) !important; }

/* CTA box */
.blog-cta { background: var(--navy); border-radius: 10px; padding: 24px 28px; margin: 36px 0 8px; text-align: center; }
.blog-cta-eyebrow { font-size: 11px; letter-spacing: .15em; color: rgba(255,255,255,.5); display: block; margin-bottom: 8px; font-weight: 700; }
.blog-cta h3 { color: #fff !important; font-size: 22px !important; font-weight: 700 !important; margin: 0 0 12px !important; font-family: "Plus Jakarta Sans", sans-serif !important; letter-spacing: -.3px !important; text-transform: none !important; line-height: 1.3 !important; }
.blog-cta p { color: rgba(255,255,255,.7); font-size: 15px; margin-bottom: 0; }
.blog-cta-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 18px; }
.blog-cta .btn-amber { background: var(--yellow) !important; color: var(--navy) !important; padding: 13px 26px !important; border-radius: 7px !important; font-size: 15px !important; font-weight: 700 !important; border: none !important; text-decoration: none !important; }
.blog-cta .btn-amber:hover { background: var(--yellow-d) !important; transform: translateY(-1px); }
.blog-cta .btn-white-outline { background: transparent !important; color: #fff !important; border: 2px solid rgba(255,255,255,.35) !important; padding: 11px 24px !important; border-radius: 7px !important; font-size: 15px !important; font-weight: 700 !important; text-decoration: none !important; }
.blog-cta .btn-white-outline:hover { background: rgba(255,255,255,.1) !important; border-color: rgba(255,255,255,.6) !important; }

/* Related / tag pills */
.blog-related { margin-top: 44px; padding-top: 20px; border-top: 2px solid var(--border); }
.blog-related-label { font-size: 11px; font-weight: 700; letter-spacing: .15em; color: var(--muted); margin-bottom: 12px; display: block; }
.blog-tag-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.blog-tag-pill { display: inline-flex; align-items: center; padding: 7px 16px; background: #F0F4F8; border-radius: 20px; font-size: 13px; color: var(--blue) !important; text-decoration: none !important; font-weight: 600; transition: all .15s; border: 1px solid transparent; }
.blog-tag-pill:hover { background: var(--blue) !important; color: #fff !important; }

/* In-article H1 title (WP title is PHP-suppressed site-wide; blog HTML owns the H1) */
.blog-post-title { font-family: "Plus Jakarta Sans", sans-serif !important; font-size: clamp(26px, 4vw, 38px) !important; font-weight: 800 !important; color: var(--navy) !important; line-height: 1.2 !important; letter-spacing: -.6px !important; text-transform: none !important; margin: 28px 0 12px !important; }

/* Blog category badge */
/* White, not the banned light blue. The pill used to default to #E5F2FB, which is on Sam's
   no-light-blue-on-articles list, and only the 7 template-converted articles overrode it with an
   inline style. The other 36 published articles were showing the banned colour live. Fixing the
   default here clears all 36 without touching a single page; the inline overrides on the 7 are now
   redundant but harmless, and come out as each article is rewritten. */
/* Literal hex on purpose, NOT var(). Every colour variable this sheet uses (--blue, --navy,
   --muted, --border) is defined in the LEGACY sheet, not in the chrome sheet. Articles only get
   those variables because they are still v1 pages. The moment an article moves to the new design
   it stops loading the legacy sheet and every var() in this file resolves to nothing. Literal
   values survive that move. Note also that --blue was the old teal until 10-14-2026; it is now the brand link blue
   #1f78d1 the article markup uses inline, so the two agree. */
.blog-cat-badge { display: inline-flex; align-items: center; background: #FFFFFF; color: #17466b !important; border: 1px solid #1f78d1; font-size: 12px; font-weight: 700; letter-spacing: .08em; padding: 5px 13px; border-radius: 20px; text-decoration: none !important; margin-bottom: 0; transition: background .15s, color .15s; }
.blog-cat-badge:hover { background: var(--blue) !important; color: #fff !important; }

/* Byline - flex row so badge sits right-aligned on same line as date */
/* clear:right locks the "fly layout" (Sam, 2026-08-01). The header image floats right, so on an
   article with a SHORT title the byline still sits beside it, loses 297px of width, and the
   category badge wraps onto its own line below the author. On an article with a longer title the
   byline clears the image, gets full width, and the badge sits neatly on the right. Same markup,
   two different-looking pages, decided purely by how many lines the headline happened to run to:
   House Fly and American Cockroach got the good version, Silverfish and DIY Rodent did not.
   Clearing the float makes every article take the full-width path, so the badge is always on the
   byline row, under the image. */
.blog-byline { font-size: 13px; color: var(--muted); margin-bottom: 24px; padding-bottom: 14px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; clear: right; }

/* Section highlight blocks - light blue bg for visual variety */
.blog-hi { background: #EBF6FB; border-radius: 10px; padding: 26px 28px; margin: 32px 0; }
.blog-hi h2 { margin-top: 0 !important; }
.blog-hi p:last-child, .blog-hi ul:last-child, .blog-hi ol:last-child { margin-bottom: 0; }

/* Service area compact text row */
.blog-service-row { background: #FFFFFF; border: 1px solid #E0EAF2; border-radius: 8px; padding: 14px 20px; margin: 10px 0 32px; font-size: 14px; line-height: 2.1; color: var(--text); }
.blog-service-row a { color: var(--blue); font-weight: 600; text-decoration: none; }
.blog-service-row a:hover { text-decoration: none; }

/* Compact related links */
.blog-related-compact { margin-top: 36px; padding-top: 20px; border-top: 2px solid var(--border); }
.blog-related-compact-label { font-size: 11px; font-weight: 700; letter-spacing: .15em; color: var(--muted); margin-bottom: 10px; display: block; }
.blog-related-link { border-bottom: 1px solid #EDF1F6; }
.blog-related-link:last-child { border-bottom: none; }
.blog-related-link a { display: flex; align-items: center; gap: 10px; padding: 10px 0; font-size: 15px; font-weight: 600; color: var(--navy) !important; text-decoration: none !important; line-height: 1.3; transition: color .15s; }
.blog-related-link a:hover { color: var(--blue) !important; }
.blog-related-link a::before { content: "\2192"; color: var(--blue); font-size: 15px; flex-shrink: 0; }

/* Article search box */
.blog-search-box { background: #FFFFFF; border: 1px solid #E0EAF2; border-radius: 10px; padding: 20px 24px; margin-top: 28px; }
.blog-search-label { font-size: 13px; font-weight: 700; color: var(--navy); margin-bottom: 10px; display: block; }
.blog-search-row { display: flex; gap: 8px; }
.blog-search-input { flex: 1; padding: 10px 14px; border: 1.5px solid #C5DCEF; border-radius: 6px; font-size: 14px; font-family: inherit; color: var(--text); background: #fff; outline: none; min-width: 0; }
.blog-search-input:focus { border-color: var(--blue); }
.blog-search-btn { padding: 10px 20px; background: #1f78d1; color: #fff; border: none; border-radius: 6px; font-size: 14px; font-weight: 700; cursor: pointer; font-family: inherit; white-space: nowrap; transition: background .15s; }
.blog-search-btn:hover { background: #17466b; }@media(max-width:600px) {
  .blog-post-title { font-size: 24px !important; }
  .blog-header-img { float: none !important; width: 100% !important; height: 200px !important; margin: 0 0 16px 0 !important; }
  .blog-lead { font-size: 16px; clear: none; }
  .blog-article h2 { font-size: 20px !important; }
  .blog-cta { padding: 20px 16px; }
  .blog-cta h3 { font-size: 19px !important; }
  .blog-hi { padding: 18px 16px; }
  .blog-search-row { flex-direction: column; }
  .blog-search-btn { width: 100%; }
}

/* =============================================================

   V120 | 2026-05-14 21:00 CST

   PEST ARTICLES HUB + CITY GALLERY HUB

   New classes: art-pill-nav, art-pill, art-section, art-grid,
   art-card, art-card-img, art-card-body, art-badge, category modifiers,
   art-search-wrap, art-search, art-hidden, city-tab-bar,
   city-tab, city-photo-grid, city-photo-card, city-photo-wrap,
   city-photo-meta, city-photo-badge, city-load-more-btn,
   city-gallery-loading, city-link-strip, city-link-btn

   ============================================================= */

/* ---- PEST ARTICLES HUB ---- */

.art-pill-nav { position: sticky; top: 0; z-index: 90; background: #fff; border-bottom: 2px solid #E8EFF7; box-shadow: 0 2px 8px rgba(0,0,0,.06); }
.art-pill-inner { display: flex; flex-wrap: wrap; gap: 6px; padding: 11px 20px; max-width: 1200px; margin: 0 auto; }
.art-pill { display: inline-block; padding: 6px 14px; background: #F0F5FA; border-radius: 20px; font-size: 12px; font-weight: 700; color: var(--navy); text-decoration: none !important; transition: background .15s, color .15s; white-space: nowrap; }
.art-pill:hover { background: var(--blue); color: #fff !important; }

.art-section { margin-bottom: 48px; scroll-margin-top: 58px; }
.art-section-intro { font-size: 15px; color: var(--text); margin: 0 0 16px; line-height: 1.65; }

.art-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(272px, 1fr)); gap: 12px; }

.art-svc-card { display: flex; align-items: center; justify-content: space-between; padding: 20px 22px; background: #FFFFFF; border-radius: 10px; border: 1px solid #DDE8F2; gap: 16px; flex-wrap: wrap; }
.art-svc-text { font-size: 15px; color: var(--text); margin: 0; line-height: 1.6; flex: 1; min-width: 200px; }
.art-svc-link { flex-shrink: 0; display: inline-block; padding: 10px 18px; background: var(--blue); color: #fff !important; border-radius: 6px; font-size: 14px; font-weight: 700; text-decoration: none !important; white-space: nowrap; transition: background .15s; }
.art-svc-link:hover { background: var(--navy); }

.art-search-section { background: #FFFFFF; border: 1.5px solid #DDE8F2; border-radius: 10px; padding: 18px 22px 22px; margin: 0 0 36px; }
.art-search-label { font-size: 12px; font-weight: 800; color: var(--navy); letter-spacing: .07em; margin: 0 0 10px; }
.art-search-row { display: flex; gap: 8px; }
.art-search { flex: 1; padding: 12px 16px; font-size: 15px; color: var(--navy); background: #fff; border: 1.5px solid #DDE8F2; border-radius: 8px; outline: none; font-family: inherit; min-width: 0; }
.art-search:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(42,109,175,.12); }
.art-search-btn { padding: 0 22px; background: var(--blue); color: #fff; border: none; border-radius: 8px; font-size: 15px; font-weight: 700; cursor: pointer; font-family: inherit; white-space: nowrap; transition: background .15s; }
.art-search-btn:hover { background: var(--navy); }
.art-search-results { margin-top: 14px; }
.art-card-loading { text-align: center; padding: 32px 20px; color: var(--muted); font-size: 14px; }@media(max-width:600px) { .art-search-row { flex-direction: column; } .art-search-btn { padding: 12px; } }@media(max-width:768px) {
  .art-pill-inner { padding: 9px 14px; }
  .art-pill { font-size: 11px; padding: 5px 11px; }
}@media(max-width:600px) {
  .art-section-h2 { font-size: 18px; }
  .art-grid { grid-template-columns: 1fr; }
}

/* Art section bar - navy header separating categories (V125) */
.art-section-bar { background: #0D2137; border-radius: 6px; padding: 7px 14px; margin: 36px 0 12px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; border-left: 4px solid transparent; }
.art-section-bar-h2 { color: #fff; font-size: 15px; font-weight: 700; margin: 0; }
.art-section-bar-count { color: rgba(255,255,255,0.65); font-size: 11px; font-weight: 600; }
/* category accent colors */
.art-cat-ants { border-left-color: #c62828; }
.art-cat-roaches { border-left-color: #6d4c41; }
.art-cat-crickets { border-left-color: #2e7d32; }
.art-cat-mosquitoes { border-left-color: #1565c0; }
.art-cat-invaders { border-left-color: #455a64; }
.art-cat-rodents { border-left-color: #795548; }
.art-cat-scorpions { border-left-color: #e65100; }
.art-cat-spiders { border-left-color: #6a1b9a; }
.art-cat-stinging { border-left-color: #f57f17; }
.art-cat-termites { border-left-color: #4e342e; }
.art-cat-seasonal { border-left-color: #00695c; }
.art-cat-exclusion { border-left-color: #37474f; }
.art-cat-commercial { border-left-color: #0d47a1; }
.art-view-all-row { margin: 10px 0 0; text-align: right; }

/* Category page mode (V122) */
.art-cat-back { display: inline-block; margin: 20px 0 20px; color: var(--muted); font-size: 13px; font-weight: 600; text-decoration: none !important; }
.art-cat-back:hover { color: var(--navy); }
.art-pagination { display: flex; align-items: center; gap: 14px; justify-content: center; padding: 28px 0 12px; flex-wrap: wrap; }@media(max-width:600px) { .art-section-bar { margin: 28px 0 10px; } .art-section-bar-h2 { font-size: 14px; } .art-pagination { gap: 10px; } .art-page-btn { padding: 8px 16px; font-size: 13px; } }

/* =============================================================
   articles-template-answer-cards.css
   Internal version: V1 | 10-13-2026 CST | Articles group, run 4.

   THE "ANSWER CARDS" ARTICLE DESIGN, Sam's pick of 10-13-2026 ("for the article design i really
   like Claude Design canvas. lets go with it"). Canvas sources:
   projects/Article-blog-writing/design-canvases/articles-article-page/.

   WHERE THIS GOES: it is a REQUEST to the Library group, who own the stylesheets. Append this
   whole block to the end of websites/pest-me-off/styles/Articles-PMO.css and deploy it with
   Deploy-Snippets-PMO.py --snippet articles-css BEFORE the first article built on this template
   is published. Without it the new articles render with the old article styling only.

   SCOPE: every rule is under .blog-article.pmo-ac, the wrapper only the new template carries, so
   none of the 44 existing articles changes. Literal colour values on purpose: the colour
   variables this sheet uses elsewhere come from the legacy sheet (see the note on .blog-cat-badge
   in Articles-PMO.css). Spacing 8 12 16 24 32 48, type 14 16 18 20 24 30 36 48, one 12px card
   radius and 8px on buttons, all from the refactoring-ui scales the canvas was drawn on.

   One deliberate change from the canvas: the canvas painted the answer cards and the search box
   pale blue (#F4F7FB). Pale blue boxes are banned on articles (Process-PestArticle-PMO.md
   Section 0, ST-1), so both are white with a full four-sided border here.
   ============================================================= */

.blog-article.pmo-ac { max-width: 760px; margin: 0 auto; padding-top: 0; container-type: inline-size; font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif; color: #24323F; }
.blog-article.pmo-ac *, .blog-article.pmo-ac *::before, .blog-article.pmo-ac *::after { box-sizing: border-box; }
.blog-article.pmo-ac p, .blog-article.pmo-ac li { font-size: 18px; line-height: 1.7; color: #24323F; margin: 0 0 16px; }
/* Links in running text are not underlined (Sam 10-14-2026), so weight 600 is their non-colour cue (WCAG 1.4.1), as on every other page type. */
.blog-article.pmo-ac :where(p,li,td)>a:where(:not([class])) { font-weight: 600; }
.blog-article.pmo-ac ul, .blog-article.pmo-ac ol { margin: 0 0 24px; padding-left: 24px; }
.blog-article.pmo-ac li { margin-bottom: 8px; }
.blog-article.pmo-ac a { color: #1f78d1; text-decoration: none; text-underline-offset: 2px; }
.blog-article.pmo-ac a:hover { color: #1D3A4F; }
.blog-article.pmo-ac a:focus-visible, .blog-article.pmo-ac button:focus-visible, .blog-article.pmo-ac input:focus-visible, .blog-article.pmo-ac .ac-table:focus-visible { outline: 3px solid #1D3A4F; outline-offset: 2px; }
/* Inside the deep blue boxes the ring turns gold: deep blue on white is 11.9 to 1, gold on deep blue 5.9 to 1, and gold on white would be only 2.0 to 1 */
.blog-article.pmo-ac .ac-hero :focus-visible, .blog-article.pmo-ac .blog-stat :focus-visible, .blog-article.pmo-ac .blog-cta :focus-visible { outline-color: #F5A623; }
.blog-article.pmo-ac img { margin: 0; border-radius: 0; }

/* The deep blue opening: breadcrumb, title, byline, badge, lead paragraph and the header photo */
.blog-article.pmo-ac .ac-hero { background: #1D3A4F; border: 1px solid #1D3A4F; border-radius: 12px; padding: 32px; margin: 0 0 32px; display: grid; grid-template-columns: 1fr; gap: 24px; color: #FFFFFF; }
.blog-article.pmo-ac .ac-hero-text { min-width: 0; }
.blog-article.pmo-ac .ac-hero-photo { order: -1; min-width: 0; }
.blog-article.pmo-ac .ac-hero-photo img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 12px; border: 1px solid #3A5468; margin: 0; }
.blog-article.pmo-ac .blog-breadcrumb { font-size: 14px; line-height: 1.5; color: #C9D7E3; margin: 0 0 16px; }
.blog-article.pmo-ac .blog-breadcrumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 8px; }
.blog-article.pmo-ac .blog-breadcrumb li { font-size: 14px; line-height: 1.5; color: #C9D7E3; margin: 0; display: inline-flex; gap: 8px; }
.blog-article.pmo-ac .blog-breadcrumb a { color: #FFFFFF; font-weight: 600; text-decoration: none; }
.blog-article.pmo-ac .blog-breadcrumb a:hover { color: #F5A623; }
.blog-article.pmo-ac .blog-post-title { font-family: "Plus Jakarta Sans", sans-serif !important; font-size: 30px !important; line-height: 1.2 !important; font-weight: 800 !important; color: #FFFFFF !important; letter-spacing: 0 !important; text-transform: none !important; margin: 0 0 16px !important; }
.blog-article.pmo-ac .blog-post-title .emph { color: #F5A623 !important; }
.blog-article.pmo-ac .blog-byline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: 14px; line-height: 1.5; color: #E3ECF3; margin: 0 0 24px; padding: 0; border: 0; clear: none; }
.blog-article.pmo-ac .blog-cat-badge { display: inline-flex; align-items: center; min-height: 44px; background: #FFFFFF; color: #1D3A4F !important; border: 1px solid #FFFFFF; border-radius: 999px; padding: 4px 12px; font-size: 14px; font-weight: 700; letter-spacing: 0; text-decoration: none !important; }
.blog-article.pmo-ac .blog-cat-badge:hover { background: #F5A623 !important; border-color: #F5A623; color: #0a0a0a !important; }
.blog-article.pmo-ac .blog-lead { font-size: 18px; line-height: 1.7; font-weight: 400; color: #FFFFFF; margin: 0; clear: none; }
.blog-article.pmo-ac .blog-lead a { color: #FFFFFF; }

/* Quick facts: one white card, full 2px blue border, the company's own line icons in rings */
.blog-article.pmo-ac .blog-keyfacts { border: 2px solid #1f78d1; border-radius: 12px; background: #FFFFFF; padding: 24px; margin: 0 0 48px; }
.blog-article.pmo-ac .ac-facts-head { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; }
.blog-article.pmo-ac .ac-facts-head strong { font-size: 20px; line-height: 1.3; font-weight: 800; color: #1D3A4F; }
.blog-article.pmo-ac .ac-facts-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 16px; }
.blog-article.pmo-ac .ac-facts-list li { display: flex; align-items: flex-start; gap: 12px; margin: 0; font-size: 16px; line-height: 1.6; }
.blog-article.pmo-ac .ac-ring { flex: 0 0 40px; width: 40px; height: 40px; border: 2px solid #1f78d1; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #FFFFFF; }
.blog-article.pmo-ac .ac-ring img { width: 24px !important; height: 24px !important; display: block !important; margin: 0 !important; }
.blog-article.pmo-ac .ac-ring-lg { flex-basis: 48px; width: 48px; height: 48px; }
.blog-article.pmo-ac .ac-ring-lg img { width: 32px !important; height: 32px !important; }
.blog-article.pmo-ac .ac-fact-text { padding-top: 8px; }

/* Sections, question headings and the answer card under each one */
.blog-article.pmo-ac .ac-sec { margin: 0 0 48px; }
.blog-article.pmo-ac h2 { font-family: "Plus Jakarta Sans", sans-serif !important; font-size: 24px !important; line-height: 1.25 !important; font-weight: 800 !important; color: #3A5468 !important; letter-spacing: 0 !important; text-transform: none !important; margin: 0 0 12px !important; }
.blog-article.pmo-ac .ac-answer { border: 0; border-left: 4px solid #1f78d1; border-radius: 0; background: transparent; padding: 4px 0 4px 20px; margin: 0 0 24px; }
.blog-article.pmo-ac .ac-answer::before { content: "Short answer"; display: block; font-size: 14px; line-height: 1.4; font-weight: 800; letter-spacing: 0; color: #1D3A4F; margin: 0 0 8px; }
.blog-article.pmo-ac .ac-answer p { font-size: 18px; line-height: 1.6; font-weight: 600; color: #1D3A4F; margin: 0; }

/* The number callout */
.blog-article.pmo-ac .blog-stat { border: 1px solid #1D3A4F; border-radius: 12px; background: #1D3A4F; padding: 32px; margin: 32px 0; display: flex; flex-wrap: wrap; gap: 16px 24px; align-items: center; }
.blog-article.pmo-ac .ac-stat-num { flex: 0 1 auto; font-size: 36px; line-height: 1.1; font-weight: 800; color: #F5A623; }
.blog-article.pmo-ac .ac-stat-body { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.blog-article.pmo-ac .ac-stat-what { font-size: 18px; line-height: 1.5; color: #FFFFFF; }
.blog-article.pmo-ac .ac-stat-source { font-size: 14px; line-height: 1.5; color: #C9D7E3; display: flex; align-items: flex-start; gap: 8px; }
.blog-article.pmo-ac .ac-stat-source img { width: 16px !important; height: 16px !important; flex: 0 0 16px; display: block !important; margin: 4px 0 0 !important; }
.blog-article.pmo-ac .ac-stat-source a { color: #FFFFFF; }

/* Tables: a box that scrolls on its own on a narrow phone, so the page never does */
.blog-article.pmo-ac .ac-table { max-width: 100%; overflow-x: auto; margin: 0 0 16px; border: 1px solid #C9D7E3; border-radius: 12px; }
.blog-article.pmo-ac .ac-table table { width: 100%; border-collapse: collapse; table-layout: fixed; margin: 0; border: 0; box-shadow: none; }
.blog-article.pmo-ac .ac-table th { background: #1f78d1; color: #FFFFFF; font-size: 16px; font-weight: 700; text-align: left; padding: 12px 16px; border: 0; }
.blog-article.pmo-ac .ac-table td { font-size: 16px; line-height: 1.5; color: #24323F; padding: 12px 16px; border: 0; border-top: 1px solid #C9D7E3; vertical-align: top; overflow-wrap: anywhere; }
.blog-article.pmo-ac .ac-table td:first-child { font-weight: 700; color: #1D3A4F; }
.blog-article.pmo-ac col.ac-w90 { width: 90px; }
.blog-article.pmo-ac col.ac-w120 { width: 120px; }
.blog-article.pmo-ac col.ac-w150 { width: 150px; }
.blog-article.pmo-ac col.ac-w190 { width: 190px; }
.blog-article.pmo-ac col.ac-w230 { width: 230px; }
.blog-article.pmo-ac .blog-table-note { font-size: 16px; font-weight: 700; font-style: italic; text-align: center; color: #1D3A4F; margin: 0 0 24px; }

/* Sources line */
.blog-article.pmo-ac .blog-sources { font-size: 14px; line-height: 1.7; color: #3A5468; border: 1px solid #C9D7E3; border-radius: 12px; padding: 16px 24px; margin: 0 0 32px; }

/* Closing call: one deep blue box, gold only on the main action */
.blog-article.pmo-ac .blog-cta { background: #1D3A4F; border: 1px solid #1D3A4F; border-radius: 12px; padding: 32px; margin: 0 0 32px; text-align: left; }
.blog-article.pmo-ac .blog-cta-eyebrow { display: block; font-size: 14px; font-weight: 600; letter-spacing: 0; color: #C9D7E3; margin: 0 0 8px; }
.blog-article.pmo-ac .blog-cta h3 { font-family: "Plus Jakarta Sans", sans-serif !important; font-size: 24px !important; line-height: 1.25 !important; font-weight: 800 !important; color: #FFFFFF !important; letter-spacing: 0 !important; text-transform: none !important; margin: 0 0 12px !important; }
.blog-article.pmo-ac .blog-cta p { font-size: 18px; line-height: 1.6; color: #E3ECF3; margin: 0 0 24px; }
.blog-article.pmo-ac .blog-cta-btns { display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-start; margin: 0; }
.blog-article.pmo-ac .blog-cta .btn-amber, .blog-article.pmo-ac .blog-cta .btn-white-outline { display: inline-flex !important; align-items: center; justify-content: center; min-height: 48px; padding: 12px 24px !important; border-radius: 8px !important; font-size: 16px !important; font-weight: 700 !important; text-decoration: none !important; transform: none !important; }
.blog-article.pmo-ac .blog-cta .btn-amber { background: #F5A623 !important; color: #0a0a0a !important; border: 2px solid #F5A623 !important; }
.blog-article.pmo-ac .blog-cta .btn-amber:hover { background: #FFFFFF !important; border-color: #FFFFFF !important; }
.blog-article.pmo-ac .blog-cta .btn-white-outline { background: transparent !important; color: #FFFFFF !important; border: 2px solid #FFFFFF !important; }
.blog-article.pmo-ac .blog-cta .btn-white-outline:hover { background: #FFFFFF !important; color: #1D3A4F !important; }

/* Author box */
.blog-article.pmo-ac .blog-author-box { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; border: 1px solid #C9D7E3; border-radius: 12px; background: #FFFFFF; padding: 24px; margin: 0 0 32px; }
.blog-article.pmo-ac .ac-author-photo { width: 72px !important; height: 72px !important; flex: 0 0 72px; border-radius: 50% !important; object-fit: cover; object-position: 50% 18%; border: 1px solid #C9D7E3; margin: 0 !important; }
.blog-article.pmo-ac .ac-author-text { flex: 1 1 240px; min-width: 0; }
.blog-article.pmo-ac .ac-author-name { font-size: 16px; font-weight: 700; color: #1D3A4F; }
.blog-article.pmo-ac .ac-author-role { font-weight: 400; color: #3A5468; }
.blog-article.pmo-ac .ac-author-text p { font-size: 16px; line-height: 1.6; margin: 8px 0; }
.blog-article.pmo-ac .ac-author-text a { font-size: 16px; font-weight: 600; }

/* Towns as chips, related reading as cards */
.blog-article.pmo-ac .blog-service-row { background: transparent; border: 0; padding: 0; margin: 0 0 32px; font-size: 16px; line-height: 1.5; }
.blog-article.pmo-ac .blog-service-row > strong, .blog-article.pmo-ac .blog-related-compact-label { display: block; font-size: 16px; font-weight: 700; letter-spacing: 0; color: #1D3A4F; margin: 0 0 12px; }
.blog-article.pmo-ac .ac-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.blog-article.pmo-ac .ac-chips li { margin: 0; font-size: 16px; }
.blog-article.pmo-ac .ac-chips a { display: inline-flex; align-items: center; min-height: 44px; border: 1px solid #C9D7E3; border-radius: 999px; padding: 8px 16px; color: #1D3A4F; font-weight: 600; text-decoration: none; }
.blog-article.pmo-ac .ac-chips a:hover { border-color: #1f78d1; color: #1f78d1; }
.blog-article.pmo-ac .blog-related-compact { margin: 0 0 32px; padding: 0; border: 0; }
.blog-article.pmo-ac .ac-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 12px; }
.blog-article.pmo-ac .blog-related-link { border: 0; }
.blog-article.pmo-ac .blog-related-link a { display: flex; align-items: flex-start; min-height: 44px; height: 100%; border: 1px solid #C9D7E3; border-radius: 12px; padding: 16px; font-size: 16px; line-height: 1.4; font-weight: 600; color: #1D3A4F !important; text-decoration: none !important; }
.blog-article.pmo-ac .blog-related-link a::before { content: none; }
.blog-article.pmo-ac .blog-related-link a:hover { border-color: #1f78d1; color: #1f78d1 !important; }

/* Search: a real form with a visible label */
.blog-article.pmo-ac .blog-search-box { background: #FFFFFF; border: 1px solid #C9D7E3; border-radius: 12px; padding: 24px; margin: 0 0 32px; }
.blog-article.pmo-ac .blog-search-label { display: block; font-size: 16px; font-weight: 700; color: #1D3A4F; margin: 0 0 12px; }
.blog-article.pmo-ac .blog-search-row { display: flex; flex-wrap: wrap; gap: 12px; }
.blog-article.pmo-ac .blog-search-input { flex: 1 1 220px; min-width: 0; min-height: 48px; border: 1px solid #6B8399; border-radius: 8px; padding: 0 16px; font-size: 16px; font-family: inherit; color: #24323F; background: #FFFFFF; }
.blog-article.pmo-ac .blog-search-btn { flex: 0 0 auto; min-height: 48px; border: 1px solid #3A5468; background: #3A5468; color: #FFFFFF; border-radius: 8px; padding: 0 24px; font-size: 16px; font-weight: 700; font-family: inherit; cursor: pointer; }
.blog-article.pmo-ac .blog-search-btn:hover { background: #1D3A4F; border-color: #1D3A4F; }

/* Wider article column: bigger type, photo beside the words */
@container (min-width: 600px) {
  .blog-article.pmo-ac .blog-post-title { font-size: 36px !important; }
  .blog-article.pmo-ac h2 { font-size: 30px !important; }
  .blog-article.pmo-ac .ac-answer p { font-size: 20px; }
  .blog-article.pmo-ac .ac-stat-num { font-size: 48px; }
  .blog-article.pmo-ac .blog-cta h3 { font-size: 30px !important; }
}
@container (min-width: 880px) {
  .blog-article.pmo-ac .ac-hero { grid-template-columns: 3fr 2fr; align-items: center; gap: 48px; padding: 48px; }
  .blog-article.pmo-ac .ac-hero-photo { order: 0; }
  .blog-article.pmo-ac .ac-hero-photo img { aspect-ratio: 3 / 2; }
  .blog-article.pmo-ac .blog-post-title { font-size: 48px !important; }
}
/* Narrow phones: tighter boxes so the words keep their width */
@container (max-width: 420px) {
  .blog-article.pmo-ac .ac-hero, .blog-article.pmo-ac .blog-stat, .blog-article.pmo-ac .blog-cta { padding: 24px 16px; }
  .blog-article.pmo-ac .blog-keyfacts, .blog-article.pmo-ac .blog-author-box, .blog-article.pmo-ac .blog-search-box { padding: 16px; }
  .blog-article.pmo-ac .ac-answer { padding: 4px 0 4px 16px; }
  .blog-article.pmo-ac .blog-cta .btn-amber, .blog-article.pmo-ac .blog-cta .btn-white-outline { width: 100%; }
  .blog-article.pmo-ac .blog-search-btn { width: 100%; }
}
/* On phones the theme gives posts no side padding, so the words and cards touched both screen
   edges in the local render (10-13-2026). The 16px gutter keeps them off the edge. */
@media (max-width: 768px) { .blog-article.pmo-ac { padding-left: 16px; padding-right: 16px; } }
@media (prefers-reduced-motion: reduce) { .blog-article.pmo-ac * { transition: none !important; } }

/* The theme parts this template replaces. The template prints the header photo once, inside the
   opening box, and its own byline. The theme still prints the featured image above the article
   and its own "by pestmeoff" line with two dates. The proper fix is in the child theme (stop
   printing both on posts that carry .pmo-ac), because a hidden image is still downloaded. Until
   then this hides them, on the new articles only. */
body.single-post:has(.blog-article.pmo-ac) .inside-article > .featured-image,
body.single-post:has(.blog-article.pmo-ac) .entry-header .entry-meta { display: none !important; }

/* WIDER ARTICLES (Sam, 10-14-2026: "you have WAY to much space on both side of the articles").
   Single posts only, both designs. The article runs 1120 wide like the Claude Design canvas
   (articles-article-page, 1200 page, 720 reading column); paragraphs, headings and short answers
   keep a centred 820 column for comfortable reading, and the boxes that hold grids, tables and
   numbers use the full width. On the answer cards design the wider column also switches on the
   photo beside the title (the 880 container rule above). */
body.single-post .blog-article { max-width: 1120px; }
body.single-post .blog-article.pmo-ac .ac-sec > :not(.ac-table):not(.blog-stat),
body.single-post .blog-article.pmo-ac > .blog-sources { max-width: 820px; margin-left: auto !important; margin-right: auto !important; }
body.single-post .blog-article:not(.pmo-ac) > :not(img):not(style):not(script) { max-width: 820px; margin-left: auto !important; margin-right: auto !important; }
body.single-post .blog-article:not(.pmo-ac) > :is(table, .blog-stat, .blog-cta, .blog-service-row, .blog-related-compact, .blog-related, .blog-city-pills) { max-width: none; }
/* The older design's header photo floats right; keep it at the right edge of the reading column. */
body.single-post .blog-article:not(.pmo-ac) > .blog-header-img { margin-right: max(0px, calc((100% - 820px) / 2)) !important; }
/* Older articles had no side gutter on phones, so the words touched both screen edges. */
@media (max-width: 768px) { body.single-post .blog-article:not(.pmo-ac) { padding-left: 16px; padding-right: 16px; } }

/* GOOGLE PREFERRED SOURCE ROW (To Do 241, Sam 10-14-2026, his A and B). The snippet
   PMO-Preferred-Source moves the article's treatment pill out of the byline into this row and
   puts Google's button beside it: side by side on a desktop, the pill centred above the button
   on a phone. Google draws and words the button itself. */
.blog-article .blog-byline:has(+ .pmo-pref-row) { margin-bottom: 12px; }
.blog-article .pmo-pref-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin: 0 0 24px; }
.blog-article .pmo-pref-source { display: flex; align-items: center; min-height: 40px; }
.blog-article:not(.pmo-ac) .blog-byline:has(+ .pmo-pref-row) { border-bottom: 0; padding-bottom: 0; }
.blog-article:not(.pmo-ac) .pmo-pref-row { padding-bottom: 14px; border-bottom: 1px solid var(--border); }
@media (max-width: 600px) { .blog-article .pmo-pref-row { flex-direction: column; align-items: center; } }