/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */

/* =====================================================
   WeDoCreepy.com — Site CSS
   Paste this into: Elementor > Site Settings > Custom CSS
   (or the page's Advanced > Custom CSS if you only want it on one page)
   ===================================================== */

/* =====================================================
   WeDoCreepy.com — Site CSS
   Paste this into: Elementor > Site Settings > Custom CSS
   (or the page's Advanced > Custom CSS if you only want it on one page)
   ===================================================== */

html,body{margin:0;padding:0}
html{overflow-x:clip}
:root{
  --green:#54a226; --green-bright:#86cf45; --green-700:#3f7d1c; --green-900:#1f3d12;
  --ink:#111210; --ink-soft:#2a2d27; --muted:#5c6354; --line:#e2e5dd;
  --bg:#ffffff; --bg-soft:#f5f6f3; --dark:#15140f;
}
.wdc-site *{box-sizing:border-box}html{scroll-behavior:smooth}.wdc-site{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink);background:var(--bg);line-height:1.6;font-size:17px;-webkit-font-smoothing:antialiased}.wdc-site .wrap{width:100%;max-width:1100px;margin:0 auto;padding:0 22px}.wdc-site a{text-decoration: underline;color:var(--green-700)}.wdc-site h1, .wdc-site h2, .wdc-site h3{line-height:1.2;color:var(--ink);margin:0 0 .5rem}.wdc-site h1{font-size:2.35rem;letter-spacing:-.5px}.wdc-site h2{font-size:1.6rem;margin-top:0}.wdc-site h3{font-size:1.12rem}.wdc-site p{margin:0 0 1rem}.wdc-site .muted{color:var(--muted)}.wdc-site .btn{display:inline-block;background:var(--green);color:#fff;font-weight:700;text-decoration:none;
  padding:.85rem 1.5rem;border-radius:8px;border:0;cursor:pointer;font-size:1rem;transition:background .15s}.wdc-site .btn:hover{background:var(--green-700)}.wdc-site .btn--ghost{background:transparent;color:var(--ink);border:1.5px solid var(--ink)}.wdc-site .btn--ghost:hover{background:var(--ink);color:#fff}.wdc-site .head{border-bottom:1px solid var(--line);background:var(--bg)}.wdc-site .head .wrap{display:flex;align-items:center;justify-content:space-between;gap:14px;padding-top:9px;padding-bottom:9px;flex-wrap:wrap}.wdc-site .brand{font-weight:800;font-size:1.3rem;letter-spacing:-.3px;display:flex;align-items:center;gap:.5rem}.wdc-site .brand img{height:44px;width:auto;display:block}.wdc-site .logo-ph{max-width: 300px;display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;
  border:2px dashed var(--green);border-radius:8px;padding:5px 10px}.wdc-site .logo-ph img{height:32px;width:auto;display:block}.wdc-site .logo-ph .ph-tag{font-size:.58rem;font-weight:800;letter-spacing:1px;color:#fff;background:var(--green);
  border-radius:4px;padding:2px 6px}.wdc-site .logo-ph .ph-text{font-weight:800;font-size:1.2rem;color:var(--green-700);letter-spacing:-.3px}.wdc-site .logo-ph--foot{border-color:#4b5a3a;margin-bottom:.9rem}.wdc-site .logo-ph--foot .ph-text{color:#fff}.wdc-site .brand .dot{width:13px;height:13px;border-radius:3px;background:var(--green);display:inline-block}.wdc-site .head-phone{font-weight:700;color:var(--ink);text-decoration:none;font-size:1.05rem;white-space:nowrap}.wdc-site .head-phone span{color:var(--muted);font-weight:600;font-size:.85rem;display:block;text-align:right}.wdc-site section{padding:52px 0;border-bottom:1px solid var(--line)}.wdc-site .hero{background:var(--dark);color:#fff;border-bottom:0}.wdc-site .hero h1{color:#fff}.wdc-site .hero p{color:#cdd4c4;font-size:1.15rem;max-width:60ch}.wdc-site .hero .row{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1.4rem}.wdc-site .eyebrow{display:inline-block;font-size:.78rem;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;
  color:var(--green-700);margin-bottom:.5rem}.wdc-site .hero .eyebrow{color:var(--green-bright)}.wdc-site .soft{background:var(--bg-soft)}.wdc-site .grid{display:grid;gap:18px}.wdc-site .g2{grid-template-columns:repeat(2,1fr)}.wdc-site .g3{grid-template-columns:repeat(3,1fr)}.wdc-site .card{border:1px solid var(--line);border-radius:10px;padding:20px;background:var(--bg)}.wdc-site .card h3{margin-bottom:.35rem}.wdc-site .card .tag{display:inline-block;font-size:.8rem;font-weight:700;color:var(--green-900);
  background:#eaf3e0;border-radius:999px;padding:.18rem .6rem;margin-bottom:.55rem}.wdc-site .step .n{font-size:.8rem;font-weight:700;color:var(--green-700);letter-spacing:1px;text-transform:uppercase}.wdc-site .areas h3{color:var(--green-900);font-size:1rem;border-bottom:2px solid var(--green-bright);
  padding-bottom:.3rem;margin-bottom:.6rem}.wdc-site .areas ul{list-style:none;margin:0;padding:0;columns:2;font-size:.96rem}.wdc-site .areas li{padding:.12rem 0;color:var(--ink-soft)}.wdc-site .review{border-left:3px solid var(--green-bright);padding:.2rem 0 .2rem 16px;margin:0 0 18px}.wdc-site .review .who{font-weight:700;font-size:.92rem;color:var(--muted);margin-top:.3rem}.wdc-site details{border:1px solid var(--line);border-radius:10px;padding:0 18px;margin-bottom:12px;background:var(--bg)}.wdc-site details[open]{padding-bottom:14px}.wdc-site summary{cursor:pointer;font-weight:700;padding:16px 0;list-style:none;color:var(--ink);font-size:1.05rem}.wdc-site summary::-webkit-details-marker{display:none}.wdc-site summary::after{content:"+";float:right;color:var(--green-700);font-weight:800;font-size:1.3rem;line-height:1}.wdc-site details[open] summary::after{content:"\2013"}.wdc-site .prose h2{font-size:1.3rem;margin-top:1.4rem}.wdc-site .prose h3{font-size:1.08rem;margin-top:1.1rem;color:var(--green-700)}.wdc-site .prose ul, .wdc-site .prose ol{padding-left:1.2rem;margin:0 0 1rem}.wdc-site .prose li{margin:.35rem 0}.wdc-site .prose .lead{font-size:1.05rem}.wdc-site .form{display:grid;gap:14px;max-width:560px}.wdc-site .form .two{display:grid;grid-template-columns:1fr 1fr;gap:14px}.wdc-site label{font-weight:600;font-size:.9rem;display:block;margin-bottom:.3rem}.wdc-site input, .wdc-site select, .wdc-site textarea{width:100%;padding:.7rem .8rem;border:1px solid var(--line);border-radius:8px;
  font:inherit;font-size:1rem;background:#fff;color:var(--ink)}.wdc-site input:focus, .wdc-site select:focus, .wdc-site textarea:focus{outline:2px solid var(--green-bright);border-color:var(--green)}.wdc-site textarea{min-height:96px;resize:vertical}.wdc-site .consent{display:flex;gap:.6rem;align-items:flex-start;font-size:.84rem;color:var(--muted);font-weight:400}.wdc-site .consent input{width:auto;margin-top:.25rem}.wdc-site .form-note{font-size:.86rem;color:var(--muted)}.wdc-site #formOK, .wdc-site .form-ok{display:none;background:#eaf3e0;border:1px solid var(--green-bright);border-radius:10px;
  padding:18px;color:var(--green-900);font-weight:600}.wdc-site footer{background:var(--dark);color:#c4ccb8;padding:46px 0 30px;border:0}.wdc-site footer .wrap{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:32px}.wdc-site footer h4{color:#fff;margin:0 0 .6rem;font-size:1rem}.wdc-site .foot-logo{height:40px;width:auto;display:block;margin-bottom:.8rem}.wdc-site footer a{color:#c4ccb8}.wdc-site footer a:hover{color:var(--green-bright)}.wdc-site .foot-bottom{border-top:1px solid #2c2b25;margin-top:30px;padding-top:18px;font-size:.85rem;color:#8c9180;
  display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}.wdc-site .wip-banner{background:var(--green);color:#fff;text-align:center;font-size:.92rem;font-weight:600;
  padding:10px 16px;line-height:1.45}.wdc-site .wip-banner a{color:#fff;text-decoration:underline;font-weight:700}.wdc-site .img-ph{position:relative;border:2px dashed var(--line);border-radius:10px;background:var(--bg-soft);
  display:flex;align-items:center;justify-content:center;text-align:center;color:var(--muted);min-height:200px}.wdc-site .img-ph .ph-label{font-weight:800;letter-spacing:1px;text-transform:uppercase;font-size:.8rem;color:var(--green-700)}.wdc-site .img-ph small{display:block;font-weight:600;letter-spacing:0;text-transform:none;font-size:.78rem;color:var(--muted);margin-top:4px}.wdc-site .hero{position:relative;overflow:hidden}.wdc-site .hero .wrap{position:relative;z-index:2}.wdc-site .hero-bg-ph{position:absolute;inset:0;z-index:1;background:#17160f;border:2px dashed #41502f}.wdc-site .hero-bg-ph .ph-label{position:absolute;top:12px;right:14px;color:#9aa67e;font-weight:700;letter-spacing:1px;
  text-transform:uppercase;font-size:.72rem;border:1px solid #41502f;border-radius:6px;padding:5px 10px;
  background:rgba(0,0,0,.32)}

@media(max-width:720px){.wdc-site h1{font-size:1.9rem}.wdc-site .g2, .wdc-site .g3, .wdc-site footer .wrap, .wdc-site .form .two{grid-template-columns:1fr}.wdc-site .areas ul{columns:1}.wdc-site .head-phone span{text-align:left}
}

/* =====================================================
   CONTACT FORM 7 OVERRIDES (v2 — hardened)
   Makes the CF7-generated quote form match the original
   custom form exactly (spacing, button, checkbox, text).
   Written WITHOUT relying on .wdc-site as an ancestor and WITH
   !important, because Elementor's Shortcode widget often renders
   the form outside your .wdc-site wrapper and/or your theme /
   Elementor's own CSS loads after this and fights for priority.
   ===================================================== */
.wpcf7{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif!important;
  color:#111210!important;
}
.wpcf7 form{
  margin-top:22px!important;max-width:560px!important;display:grid!important;gap:14px!important;
  text-align:left!important;
}
.wpcf7 .two{display:grid!important;grid-template-columns:1fr 1fr!important;gap:14px!important}
@media(max-width:720px){.wpcf7 .two{grid-template-columns:1fr!important}}

.wpcf7 label{
  font-weight:600!important;font-size:.9rem!important;display:block!important;
  margin-bottom:.8rem!important;text-align:left!important;color:#111210!important;
}

.wpcf7-form-control-wrap{display:block!important;width:100%!important;text-align:left!important}

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 select,
.wpcf7 textarea{
  width:100%!important;padding:.7rem .8rem!important;border:1px solid #e2e5dd!important;
  border-radius:8px!important;font:inherit!important;font-size:1rem!important;background:#fff!important;
  color:#111210!important;box-sizing:border-box!important;
}
.wpcf7 textarea{min-height:96px!important;height: 96px;resize:vertical!important}

/* Submit button — force it to look like the original .btn, not a text input */
.wpcf7 input[type="submit"]{
  display:inline-block!important;width:auto!important;background:#54a226!important;color:#fff!important;
  font-weight:700!important;text-decoration:none!important;padding:.85rem 1.5rem!important;
  border-radius:8px!important;border:0!important;cursor:pointer!important;font-size:1rem!important;
  font-family:inherit!important;-webkit-appearance:none!important;appearance:none!important;
}
.wpcf7 input[type="submit"]:hover{background:#3f7d1c!important}
.wpcf7 .wpcf7-spinner{margin:0 0 0 .6rem!important}

/* Consent checkbox row — recreate the original .consent flex layout
   on CF7's own generated markup */
.wpcf7 .wpcf7-list-item{margin:0!important;display:block!important;text-align:left!important}
.wpcf7 .wpcf7-list-item label{
  display:flex!important;gap:.6rem!important;align-items:flex-start!important;font-size:.84rem!important;
  color:#5c6354!important;font-weight:400!important;text-align:left!important;margin-bottom:0!important;
}
.wpcf7 .wpcf7-list-item input[type="checkbox"]{
  width:auto!important;margin-top:.25rem!important;flex-shrink:0!important;
}
.wpcf7 .wpcf7-list-item-label {
    display: inline!important;
    text-align: left!important;
    line-height: 1.4em;
}

.wpcf7 .wpcf7-not-valid-tip{font-size:.78rem!important;margin-top:.25rem!important}
.wpcf7-response-output{border-radius:10px!important;font-size:.9rem!important;margin-top:14px!important}

.wpcf7 form.sent .form {
    display: none;
}
h1, h2, h3, h4, h5, h6 {
    font-weight: 700 !important;
}
.wpcf7 form.sent .wpcf7-response-output {
    background: #eaf3e0;
    border: 1px solid var(--green-bright);
    padding: 18px;
    color: var(--green-900);
    font-weight: 600;
    font-size: 17px !important;
}
.wpcf7 form .wpcf7-response-output {
    margin: 1em 0 1em !important;
}
.wdc-site .hero {
    background-position: 87% 40% !important;
    background: #000 url("https://wedocreepy.com/wp-content/uploads/2026/07/hero-image-scaled.jpeg");
    background-size: cover;
    background-repeat: no-repeat;
}

/* =====================================================
   SERVICES PAGE — additions
   Only the pieces not already defined above (.services-grid,
   .service-card, etc.). Reuses the same --green / --ink / --line
   variables and the existing .btn class so fonts and colors stay
   consistent with the rest of the site.
   ===================================================== */
.wdc-site .intro{max-width:800px;margin:0 auto 12px;text-align:center;color:var(--muted)}
.wdc-site .intro-link{text-align:center;margin-bottom:12px}

.wdc-site .services-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:28px;margin-top:24px}
.wdc-site .service-card{border:1px solid var(--line);border-radius:10px;overflow:hidden;box-shadow:0 1px 4px rgba(0,0,0,.06);display:flex;flex-direction:column;background:var(--bg)}
.wdc-site .service-card img{width:100%;height:180px;object-fit:cover;display:block}
.wdc-site .service-card .card-body{padding:20px;flex:1;display:flex;flex-direction:column}
.wdc-site .service-card h2{margin:0 0 10px;font-size:1.3rem}
.wdc-site .service-card p{color:var(--muted);flex:1}
.wdc-site .service-card .btn{align-self:flex-start;margin-top:10px}

@media(max-width:720px){
  .wdc-site .services-grid{grid-template-columns:1fr}
}

/* =====================================================
   PEST CONTROL (SERVICE DETAIL) PAGE — additions
   Prefixed with "pcp-" (Pest Control Page) on purpose: this page's
   HTML reuses generic names like .hero, .step, .review that already
   mean something different elsewhere in your site CSS. Renaming here
   avoids silently breaking your homepage's hero / how-it-works /
   testimonials sections. Reuses your existing --green/--ink/--line
   variables and your existing .btn class so fonts and colors match.
   ===================================================== */

.wdc-site .pcp-hero{position:relative}
.wdc-site .pcp-hero img{width:100%;height:340px;object-fit:cover;display:block;border-radius:10px}
.wdc-site .pcp-hero-text{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(transparent,rgba(0,0,0,.75));color:#fff;padding:32px 24px;border-radius:0 0 10px 10px}
.wdc-site .pcp-hero-text h1{margin:0 0 8px;color:#fff}
.wdc-site .pcp-hero-text p{max-width:700px;color:#f1f1f1}

.wdc-site .pcp-benefits{display:flex;gap:32px;flex-wrap:wrap;margin:24px 0}
.wdc-site .pcp-benefit{display:flex;gap:14px;align-items:center;flex:1 1 300px}
.wdc-site .pcp-benefit img{width:56px;height:56px}
.wdc-site .pcp-benefit h5{margin:0;color:var(--ink)}

.wdc-site .pcp-breadcrumb{font-size:13px;color:var(--muted);margin-bottom:8px}

.wdc-site .pcp-check-list{padding-left:20px}

.wdc-site .pcp-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:24px;margin:24px 0}
.wdc-site .pcp-step{border:1px solid var(--line);border-radius:8px;padding:20px;background:var(--bg)}
.wdc-site .pcp-step img{width:56px;height:56px;margin-bottom:10px}
.wdc-site .pcp-step h3{color:var(--green-700)}

.wdc-site .pcp-service-areas h4{color:var(--ink);margin-top:24px}
.wdc-site .pcp-area-list{display:flex;flex-wrap:wrap;gap:8px 20px;padding:0;list-style:none;margin:8px 0 0}
.wdc-site .pcp-area-list li{font-size:14px}

.wdc-site .pcp-other-services{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-top:16px}
.wdc-site .pcp-other-services a{display:block;border:1px solid var(--line);border-radius:8px;padding:16px;text-align:center;font-weight:700;color:var(--ink);text-decoration:none}
.wdc-site .pcp-other-services a:hover{border-color:var(--green);color:var(--green-700)}

.wdc-site .pcp-offers-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;margin-top:16px}
.wdc-site .pcp-offer-card{border:1px solid var(--line);border-radius:8px;padding:20px;background:var(--bg)}
.wdc-site .pcp-offer-card h4{margin:8px 0 4px;color:var(--ink)}

.wdc-site .pcp-reviews{margin-top:48px;background:var(--bg-soft);padding:32px 24px;border-radius:8px}
.wdc-site .pcp-review{background:var(--bg);padding:20px;border-radius:6px;margin-bottom:16px;box-shadow:0 1px 3px rgba(0,0,0,.08)}
.wdc-site .pcp-review .pcp-stars{color:var(--green-700);font-weight:bold}
.wdc-site .pcp-review .pcp-author{margin-top:10px;font-weight:700;color:var(--ink)}

@media(max-width:720px){
  .wdc-site .pcp-hero img{height:220px}
  .wdc-site .pcp-benefits{gap:16px}
}

/* =====================================================
   SERVICE AREAS PAGE — additions
   Only the pieces not already defined above (the CTA callout box
   and the 3-column region grid with underlined headers — this is a
   different list layout than the flush "pcp-area-list" used on the
   individual service pages). Prefixed "pcp-" for consistency, reuses
   existing variables and fonts.
   ===================================================== */
.wdc-site .pcp-cta-box{margin:24px 0;padding:16px;background:var(--bg-soft);border-left:4px solid var(--green-700);font-weight:700}
.wdc-site .pcp-cta-box a{color:var(--green-700)}

.wdc-site .pcp-regions{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:32px;margin-top:32px}
.wdc-site .pcp-region h4{color:var(--green-700);border-bottom:2px solid var(--green-bright);padding-bottom:8px;margin-bottom:14px;font-size:1.1rem}
.wdc-site .pcp-region ul{list-style:none;margin:0;padding:0}
.wdc-site .pcp-region ul li{margin-bottom:8px}
.wdc-site .pcp-region ul li a{font-weight:600}

/* =====================================================
   MERGED FROM GLOBAL STYLESHEET (deduped)
   Only genuinely new pieces not already covered above are included
   here. Everything reused your existing .wdc-site scope and
   --green/--ink/--line variables instead of introducing the source
   file's own --brand-* variables, and existing collisions (.hero,
   .benefits, .breadcrumb, .reviews, .other-services, .areas,
   .services-grid, .intro, etc.) were skipped since equivalents
   already exist above (mostly under the "pcp-" prefix).
   ===================================================== */

.wdc-site img{max-width:100%;height:auto}

/* Colored bullet markers for the pcp check-lists already in use */
.wdc-site .pcp-check-list li{margin:.35rem 0}
.wdc-site .pcp-check-list li::marker{color:var(--green)}

/* Article + sidebar layout (for long-form pages, not yet used but
   available if you add a blog/article page) */
.wdc-site main.article, .wdc-site .article-main{max-width:900px}
.wdc-site .layout{display:grid;grid-template-columns:2fr 1fr;gap:32px;margin-top:16px}
.wdc-site .services-nav{list-style:none;display:flex;gap:16px;flex-wrap:wrap;padding:12px 0;margin:16px 0 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.wdc-site .services-nav li a{font-weight:700;color:var(--green-700)}
.wdc-site .sidebar{background:var(--bg-soft);border-radius:10px;padding:20px;align-self:start;border:1px solid var(--line)}
.wdc-site .sidebar h4{margin-top:0;color:var(--ink)}
.wdc-site .sidebar img{width:100%;border-radius:6px;margin-top:12px}

/* Offer card price/expiry styling — adds onto your existing
   .pcp-offer-card rather than replacing it */
.wdc-site .pcp-offer-card .amount{font-size:2em;font-weight:800;color:var(--green-700)}
.wdc-site .pcp-offer-card .expires{font-size:12px;color:var(--muted);margin-top:6px}

/* Special Offers page — additions: a highlighted "accent" card
   variant for the featured offer, and a small logo watermark shown
   at the bottom of each coupon card */
.wdc-site .pcp-offer-card{position:relative}
.wdc-site .pcp-offer-card--accent{border:2px solid var(--green);background:#eaf3e0}
.wdc-site .pcp-offer-card .coupon-logo{height:26px;width:auto;display:block;margin-top:16px;opacity:.8}

/* Spec/comparison table (not yet used, available for plan/pricing pages) */
.wdc-site .spec-table{width:100%;border-collapse:collapse;margin:24px 0}
.wdc-site .spec-table th{text-align:left;background:var(--bg-soft);padding:10px 14px;width:180px;vertical-align:top;color:var(--ink);border:1px solid var(--line)}
.wdc-site .spec-table td{padding:10px 14px;border:1px solid var(--line);vertical-align:top}

/* Alternate centered CTA banner (distinct from the left-border .pcp-cta-box) */
.wdc-site .cta-banner{background:var(--bg-soft);border:1px solid var(--line);border-radius:10px;padding:24px;text-align:center;margin:40px 0 0}
.wdc-site .cta-banner h3{margin-top:0;color:var(--ink)}

/* Pest-type grid (e.g. "pests we treat" detail cards) */
.wdc-site .pest-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px}
.wdc-site .pest-card{border:1px solid var(--line);border-radius:10px;padding:22px;box-shadow:0 1px 4px rgba(0,0,0,.06)}
.wdc-site .pest-card h2{margin:0 0 10px;font-size:1.25em;color:var(--ink)}
.wdc-site .pest-card p{color:var(--muted)}
.wdc-site .sub-links{list-style:none;padding:0;margin:12px 0}
.wdc-site .sub-links li{margin-bottom:4px}

/* Centered-h1 utility */
.wdc-site h1.centered{text-align:center}

/* ============ Extra responsive tiers for the new components above ============ */
@media (max-width:800px){
  .wdc-site .layout{grid-template-columns:1fr}
}

@media (max-width:600px){
  .wdc-site .pcp-offers-grid, .wdc-site .pest-grid{grid-template-columns:1fr}
  .wdc-site .spec-table, .wdc-site .spec-table tbody, .wdc-site .spec-table tr,
  .wdc-site .spec-table th, .wdc-site .spec-table td{display:block;width:100%}
  .wdc-site .spec-table th{width:100%;border-bottom:0;padding-bottom:4px}
  .wdc-site .spec-table td{border-top:0;padding-top:0;margin-bottom:10px}
}

/* =====================================================
   HOME PAGE — 480px phone tier
   The only new piece from the homepage's embedded <style> block that
   wasn't already covered above. (Its "img{max-width:100%;height:auto}"
   line was dropped here since that's already applied globally, not
   just under 480px, from the earlier merge.)
   ===================================================== */
@media(max-width:480px){
  .wdc-site h1{font-size:1.55rem}
  .wdc-site h2{font-size:1.3rem}
  .wdc-site .wrap{padding:0 16px}
  .wdc-site .head .wrap{padding-top:12px;padding-bottom:12px;gap:10px}
  .wdc-site .head-phone{font-size:.95rem}
  .wdc-site section{padding:36px 0}
  .wdc-site .hero .row{flex-direction:column;align-items:stretch}
  .wdc-site .hero .row .btn{width:100%;text-align:center}
  .wdc-site .hero p{font-size:1rem}
  .wdc-site .card{padding:16px}
  .wdc-site .form .two{gap:10px}
  .wdc-site details{padding:0 14px}
  .wdc-site summary{padding:14px 0;font-size:1rem}
  .wdc-site footer{padding:36px 0 24px}
  .wdc-site .foot-bottom{flex-direction:column;text-align:center;gap:8px}
}

/* =====================================================
   ABOUT PAGE — additions
   Only the two new pieces not already covered (a two-photo row and
   a full-width image break). Everything else on this page reuses
   existing "pcp-*" classes (breadcrumb, check-list, cta-banner,
   reviews) already defined above.
   ===================================================== */
.wdc-site .pcp-image-row{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:22px 0}
.wdc-site .pcp-image-row img{width:100%;height:260px;object-fit:cover;border-radius:10px;display:block}
.wdc-site .pcp-full-image{width:100%;border-radius:10px;margin:32px 0;display:block}

@media(max-width:600px){
  .wdc-site .pcp-image-row{grid-template-columns:1fr}
}

/* =====================================================
   LOCATION PAGE (e.g. "Pest Control in Chino") — additions
   Almost everything on these pages reuses classes already defined
   above (pcp-hero, pcp-benefits, pcp-breadcrumb, pcp-check-list,
   pcp-offers-grid, pcp-reviews, .layout, .sidebar, .services-nav).
   Only two new pieces: a description line under each benefit badge,
   and the image+text "content-block" layout used for each service
   section on these city pages.
   ===================================================== */
.wdc-site .pcp-benefit p{margin:2px 0 0;color:var(--muted);font-size:14px}

.wdc-site .content-block{display:grid;grid-template-columns:280px 1fr;gap:24px;align-items:start;margin:32px 0;padding-bottom:32px;border-bottom:1px solid var(--line)}
.wdc-site .content-block img{width:100%;border-radius:10px;object-fit:cover}
.wdc-site .content-block:last-of-type{border-bottom:0}

@media(max-width:700px){
  .wdc-site .content-block{grid-template-columns:1fr}
}

/* content-block variant for sections with no image (text-only) */
.wdc-site .content-block.no-image{display:block}

/* =====================================================
   BLOG POST PAGES — additions
   Article body reuses .article-main (already defined above) plus
   pcp-breadcrumb, pcp-check-list, and cta-banner. Only new pieces:
   the full-width hero image at the top of a post and inline images
   dropped mid-article — both follow the same visual language as
   .pcp-full-image on the About page.
   ===================================================== */
.wdc-site .article-hero{width:100%;max-height:420px;object-fit:cover;border-radius:10px;margin:0 0 24px;display:block}
.wdc-site .inline-img{width:100%;border-radius:10px;margin:28px 0;display:block}

/* In-page "jump to section" table of contents, used on longer posts */
.wdc-site .jump-links{list-style:none;padding:16px 20px;margin:20px 0;background:var(--bg-soft);border:1px solid var(--line);border-radius:10px}
.wdc-site .jump-links li{margin:6px 0}
.wdc-site .jump-links a{font-weight:600;color:var(--green-700)}

/* =====================================================
   MAIN NAVIGATION MENU — sticky header, dropdowns, hamburger
   Only the HEADER block needs this (paste into 2-header.html /
   your Header template), but it's added to the global stylesheet
   since that's where the rest of the site CSS already lives.
   Reuses --green/--ink/--line variables and the existing .btn,
   .head, .wip-banner, .wrap rules already defined above — nothing
   here duplicates or overrides those.
   ===================================================== */

/* Header becomes sticky as a whole (logo/phone row + nav row).
   The wip-banner above it is NOT sticky and scrolls away normally. */
.wdc-site .head{position:sticky;top:0;z-index:500;background:var(--bg)}

.wdc-site .site-header-pin{position:relative;background:var(--bg)}
.wdc-site .site-header-pin.is-pinned{position:fixed;top:0;left:0;right:0;z-index:500;box-shadow:0 4px 14px rgba(0,0,0,.1)}
.wdc-site .site-header-pin-spacer{display:none}
.wdc-site .site-header-pin-spacer.is-active{display:block}
.wdc-site .site-nav{border-top:1px solid var(--line);background:var(--bg)}
.wdc-site .site-nav-inner{display:flex;align-items:center;min-height:42px}

.wdc-site .site-nav-menu{list-style:none;display:flex;align-items:center;gap:2px;margin:0;padding:0;flex-wrap:wrap}
.wdc-site .nav-item{position:relative;display:flex;align-items:center}
.wdc-site .nav-item > a{display:block;padding:11px 14px;font-weight:700;color:var(--ink);text-decoration:none;font-size:.95rem;white-space:nowrap}
.wdc-site .nav-item > a:hover{color:var(--green-700)}

/* Caret toggle button — separate from the link itself so the link
   always navigates normally and the caret only opens/closes */
.wdc-site .dropdown-toggle{background:none;border:0;padding:11px 10px 11px 0;margin:0;cursor:pointer;display:flex;align-items:center;justify-content:center;line-height:0}
.wdc-site .dropdown-toggle .caret{width:7px;height:7px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);transition:transform .15s;display:block}
.wdc-site .nav-item.is-open > .dropdown-toggle .caret{transform:rotate(-135deg)}

/* Dropdown panels: hidden by default. Shown either via JS (.is-open,
   works for click/tap/keyboard on every device) or, additionally, via
   real CSS :hover on devices that actually have a mouse — so desktop
   users get classic hover-to-open without losing click support. */
.wdc-site .dropdown, .wdc-site .dropdown--mega{display:none;position:absolute;top:100%;left:0;background:#fff;
  border:1px solid var(--line);border-radius:10px;box-shadow:0 12px 28px rgba(0,0,0,.14);z-index:60}
.wdc-site .dropdown{padding:10px;min-width:230px}
.wdc-site .dropdown--mega{padding:26px;grid-template-columns:repeat(3,220px);gap:0 28px}

.wdc-site .nav-item.is-open > .dropdown{display:block}
.wdc-site .nav-item.is-open > .dropdown--mega{display:grid}

@media (hover:hover) and (pointer:fine){
  .wdc-site .nav-item:hover > .dropdown{display:block}
  .wdc-site .nav-item:hover > .dropdown--mega{display:grid}
}

.wdc-site .dropdown li{list-style:none}
.wdc-site .dropdown a{display:block;padding:9px 12px;border-radius:6px;color:var(--ink-soft);text-decoration:none;font-weight:600;font-size:.92rem;white-space:nowrap}
.wdc-site .dropdown a:hover{background:var(--bg-soft);color:var(--green-700)}

/* Mega panel (Locations) — three region columns, same visual
   language as .pcp-region on the Areas We Service page */
.wdc-site .mega-col h4{margin:0 0 10px;font-size:.95rem;color:var(--green-700);border-bottom:2px solid var(--green-bright);padding-bottom:7px}
.wdc-site .mega-col h4 a{color:inherit;text-decoration:none;padding:0;display:inline;font-weight:700;font-size:inherit}
.wdc-site .mega-col ul{list-style:none;margin:0;padding:0}
.wdc-site .mega-col li{margin:0}
.wdc-site .mega-col li a{padding:5px 6px;font-size:.87rem}

/* Hamburger button — hidden on desktop, lives next to the logo in
   the header row on mobile (not on its own separate line) */
.wdc-site .nav-toggle{display:none;flex-direction:column;justify-content:center;gap:4px;width:34px;height:34px;
  background:none;border:0;cursor:pointer;padding:0}
.wdc-site .nav-toggle-bar{display:block;width:22px;height:2.5px;background:var(--ink);border-radius:2px;transition:transform .2s,opacity .2s}
.wdc-site .nav-toggle.is-open .nav-toggle-bar:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.wdc-site .nav-toggle.is-open .nav-toggle-bar:nth-child(2){opacity:0}
.wdc-site .nav-toggle.is-open .nav-toggle-bar:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* Prevent background scroll while the mobile menu is open */
body.nav-open{overflow:hidden}

@media(max-width:860px){
  .wdc-site .nav-toggle{display:flex}

  /* Keep logo / phone / hamburger together on one line instead of
     the hamburger sitting on its own row */
  .wdc-site .head .wrap{flex-wrap:nowrap;gap:10px;padding-top:8px;padding-bottom:8px}
  .wdc-site .logo-ph{padding:4px 8px;flex:0 0 auto}
  .wdc-site .logo-ph img{height:26px}
  .wdc-site .head-phone{font-size:.85rem;flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
  .wdc-site .head-phone span{display:none}

  /* The sticky nav bar has nothing visible in it until the menu is
     opened (the toggle button now lives in the header row above),
     so collapse it to zero height rather than showing an empty bar */
  .wdc-site .site-nav{border-top:0}
  .wdc-site .site-nav-inner{min-height:0}

  .wdc-site .site-nav-menu{
    display:none;flex-direction:column;align-items:stretch;gap:0;
    position:absolute;top:100%;left:0;right:0;
    background:#fff;border-top:1px solid var(--line);box-shadow:0 12px 24px rgba(0,0,0,.12);
    max-height:80vh;overflow-y:auto;padding:6px 0 24px;z-index:450;flex-wrap:nowrap;
  }
  .wdc-site .site-nav-menu.is-open{display:flex}

  .wdc-site .nav-item{width:100%;display:block;position:relative}
  .wdc-site .nav-item > a{padding:15px 22px;width:100%}
  .wdc-site .dropdown-toggle{position:absolute;top:2px;right:6px;padding:15px}

  .wdc-site .dropdown, .wdc-site .dropdown--mega{
    position:static;display:none;box-shadow:none;border:0;border-radius:0;
    background:var(--bg-soft);padding:4px 22px 14px;margin:0;min-width:0;width:100%;
  }
  .wdc-site .nav-item.is-open > .dropdown{display:block}
  .wdc-site .nav-item.is-open > .dropdown--mega{display:block}
  .wdc-site .dropdown--mega{grid-template-columns:1fr}
  .wdc-site .mega-col{margin-bottom:16px}
  .wdc-site .mega-col:last-child{margin-bottom:0}
}