/*
Theme Name: Scotia Pest Solutions
Theme URI: https://scotiapestsolutions.ca/
Author: On Demand Webmasters
Author URI: https://ondemandwebmasters.com/
Description: Built for pest control companies that win work on trust, not gimmicks. Every headline, photo and phone number is yours to change - no page builder, no shortcode soup, no developer on retainer. The quote form sits beside the hero on every page, where the enquiries actually come from, and works with whichever form plugin you already run. Nine content blocks cover the way pest work is really sold: the signs a homeowner spots, the steps your technicians take, the questions they always ask. One click sets up the whole site - pages, menus, photos and settings. Fast, accessible, and made to look like the local operator customers want to call.
Version: 1.0.0
Requires at least: 6.2
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: scotia-pest
Tags: business, custom-menu, custom-logo, featured-images, translation-ready, two-columns, right-sidebar
*/

/* =========================================================
   1. Base + design tokens (carried over from the approved mockup)
   ========================================================= */

:root{
  --navy:#0B2545; --navy-2:#123262; --navy-3:#1B3F7A;
  --red:#E62B33; --red-dark:#C21F27;
  --ink:#22303F; --slate:#5B6B7C; --line:#DCE4EC; --bg:#F4F7FA;
  --white:#FFFFFF; --gold:#FFB627; --radius:12px;
  --shadow:0 8px 28px rgba(11,37,69,.13);
  --disp:'Barlow Condensed','Arial Narrow',sans-serif;
  --body:'Inter',-apple-system,'Segoe UI',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--body);color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;}
.icn{display:inline-flex}
.icn svg{width:100%;height:100%;display:block}

/* ---------------------------------------------------------
   Site shell. #viewport keeps the container-query context the
   mockup was designed against, so every `@container site (...)`
   rule below continues to work exactly as approved.
   --------------------------------------------------------- */
/* ---------------------------------------------------------
   #viewport is the container-query context ONLY in preview
   mode, where it is also the scroll container.

   On the live site the window scrolls instead. Leaving
   `container-type` on #viewport there would apply layout
   containment between the sticky header and the scrollport,
   so `header.site{position:sticky}` would never stick - which
   is exactly why the header behaved differently from the
   mockup. The @container rules are mirrored as @media rules
   further down, so the live site gets identical breakpoints
   from the window width instead.
   --------------------------------------------------------- */
#viewport{width:100%;background:var(--bg);position:relative}
body.has-previewbar #viewport{container-type:inline-size;container-name:site}

/* ---------------------------------------------------------
   Preview bar (optional).

   Off by default. When switched on in Theme Settings the site is
   wrapped in #shell / #vpwrap and a review strip is pinned to the
   top, with a Desktop / Mobile toggle that renders the page inside
   a phone frame. This is the review harness from the original
   mockup, kept so the site can still be demoed the same way.
   --------------------------------------------------------- */
body.has-previewbar,
body.has-previewbar html{height:100%}
body.has-previewbar{overflow:hidden;background:#0A1B33}
body.has-previewbar #shell{height:100vh;display:flex;flex-direction:column;align-items:center}
body.admin-bar.has-previewbar #shell{height:calc(100vh - 32px)}

#previewbar{width:100%;display:flex;align-items:center;justify-content:center;gap:14px;
  padding:9px 16px;background:#0A1B33;color:#8FA5C0;font-size:12.5px;flex-shrink:0;}
#previewbar strong{color:#fff;font-weight:600;letter-spacing:.4px}
#previewbar .pv-hint{opacity:.85}
#previewbar .pv-exit{margin-left:auto;color:#8FA5C0;text-decoration:none;font-weight:600}
#previewbar .pv-exit:hover{color:#fff}
.pv-toggle{display:flex;background:#132A4A;border-radius:99px;padding:3px;}
.pv-toggle button{border:0;background:transparent;color:#8FA5C0;font:600 12px var(--body);
  padding:6px 16px;border-radius:99px;cursor:pointer;transition:.2s;}
.pv-toggle button.on{background:var(--red);color:#fff}

body.has-previewbar #vpwrap{position:relative;width:100%;flex:1;min-height:0;overflow:hidden;
  transition:width .3s ease;}
body.has-previewbar #viewport{height:100%;overflow-y:auto;scroll-behavior:smooth}

/* Phone frame */
body.has-previewbar.mobile #vpwrap{width:392px;flex:none;align-self:center;height:calc(100% - 26px);
  border:10px solid #05101F;border-radius:34px;margin:10px 0 16px;
  box-shadow:0 20px 60px rgba(0,0,0,.5);}
body.has-previewbar.mobile #viewport{border-radius:24px}

/* Inside the frame the drawer must stay in the frame, not the window. */
body.has-previewbar .drawer-veil{position:absolute}
body.has-previewbar .drawer{position:absolute}
body.has-previewbar.drawer-open .drawer{transform:none}
body.has-previewbar.drawer-open .drawer-veil{opacity:1;pointer-events:auto}

@media (max-width:640px){
  #previewbar .pv-toggle,#previewbar .pv-hint{display:none}
  body.has-previewbar.mobile #vpwrap{width:100%;border:0;border-radius:0;margin:0;height:100%;align-self:stretch}
  body.has-previewbar.mobile #viewport{border-radius:0}
}

/* WordPress admin bar must not cover the sticky header */
body.admin-bar header.site{top:32px}
@media screen and (max-width:782px){body.admin-bar header.site{top:46px}}

/* Skip link */
.skip-link{position:absolute;left:-9999px;top:5px;z-index:200;background:var(--navy);color:#fff;
  padding:12px 18px;border-radius:0 0 8px 0;font:700 14px var(--body);text-decoration:none;}
.skip-link:focus{left:5px}

.utility{background:var(--navy);color:#C7D6E8;font-size:12.5px;display:flex;
  justify-content:space-between;align-items:center;padding:7px 5%;gap:12px;}
.utility .u-left{display:flex;gap:18px;align-items:center;white-space:nowrap;overflow:hidden}
.utility a{color:#fff;text-decoration:none;font-weight:600}
.utility .u-right{display:flex;gap:16px;align-items:center;white-space:nowrap}

header.site{position:sticky;top:0;z-index:60;background:var(--navy-2);box-shadow:0 2px 14px rgba(5,16,31,.35);}
.nav-inner{display:flex;align-items:center;justify-content:space-between;padding:12px 5%;gap:20px;max-width:1280px;margin:0 auto;}
/* Once the window is wider than the 1280px cap plus its gutters, the 5%
   padding only squeezes the bar in from edges it is nowhere near. */
@media screen and (min-width: 1480px){
  .nav-inner{padding-left:0;padding-right:0}
}

.logo{display:flex;align-items:center;flex-shrink:0}
.logo img{height:40px;width:auto;display:block}
nav.main{display:flex;align-items:center;gap:4px}
nav.main>div{position:relative}
nav.main a.top{color:#E8EFF7;text-decoration:none;font:600 13.5px var(--body);
  padding:10px 13px;border-radius:8px;display:block;transition:.15s;}
nav.main a.top:hover,nav.main a.top.active{background:rgba(255,255,255,.12);color:#fff}
.dropdown{position:absolute;top:calc(100% + 10px);left:0;background:#fff;border-radius:12px;
  box-shadow:var(--shadow);padding:8px;min-width:250px;z-index:70;
  opacity:0;visibility:hidden;transform:translateY(-6px);pointer-events:none;
  transition:opacity .15s ease,transform .15s ease,visibility .15s;}
/* invisible bridge across the gap so hover survives the trip down */
.dropdown::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}
nav.main .has-drop:hover>.dropdown,
nav.main .has-drop.open>.dropdown{opacity:1;visibility:visible;transform:none;pointer-events:auto}
nav.main .has-drop:hover>a.top,
nav.main .has-drop.open>a.top{background:rgba(255,255,255,.12);color:#fff}
nav.main .has-drop>a.top{cursor:pointer;user-select:none}
.dropdown a{display:flex;align-items:center;gap:11px;white-space:nowrap;color:var(--ink);text-decoration:none;
  font:500 14px var(--body);padding:9px 12px;border-radius:8px;}
.dropdown a:hover{background:var(--bg);color:var(--red)}
.dropdown a .icn{width:20px;height:20px;color:var(--navy);flex-shrink:0}
.dropdown a:hover .icn{color:var(--red)}
.head-cta{display:flex;align-items:center;gap:14px;flex-shrink:0}
.phone-block{text-align:right;line-height:1.15}
.phone-block .pb-label{font:600 10.5px var(--body);color:#9FB4CC;text-transform:uppercase;letter-spacing:.8px}
.phone-block a{font:800 21px var(--disp);letter-spacing:.5px;color:#fff;text-decoration:none;display:block;}
.phone-block a:hover{color:var(--gold)}
/* Buttons.

   Two things were throwing the label off centre:

   1. `.btn-ghost` adds a 2px border while `.btn` has none, so a ghost button
      was 4px taller than a red one with identical padding. `.hero-ctas` is a
      flex row with the default `align-items:stretch`, so the red button was
      stretched to match - and as an inline-block its label stayed put at the
      top padding instead of moving to the new centre. The border is now
      declared on `.btn` itself as transparent, with the padding reduced by the
      same 2px, so every variant is exactly the same box.

   2. `inline-block` puts the label on a baseline, so the font's descender
      space sits below it and the text reads low. `inline-flex` with centred
      alignment removes that, and normalises <button> against <a>. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:2px solid transparent;cursor:pointer;text-decoration:none;text-align:center;
  font:700 14.5px/1 var(--body);border-radius:9px;padding:10px 20px;transition:.15s;
  margin:0;-webkit-appearance:none;appearance:none;}
.btn-red{background:var(--red);color:#fff;box-shadow:0 4px 14px rgba(230,43,51,.35)}
.btn-red:hover{background:var(--red-dark);transform:translateY(-1px)}
.btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.4)}
.btn-ghost:hover{border-color:#fff}
.burger{display:none;background:transparent;border:0;cursor:pointer;padding:6px;}
.burger span{display:block;width:26px;height:3px;background:#fff;border-radius:2px;margin:5px 0}

.drawer-veil{position:fixed;inset:0;background:rgba(5,16,31,.55);z-index:80;opacity:0;pointer-events:none;transition:.25s}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(340px,88%);background:#fff;z-index:90;
  transform:translateX(105%);transition:transform .28s cubic-bezier(.2,.8,.25,1);
  display:flex;flex-direction:column;overflow-y:auto;}
body.drawer-open .drawer{transform:none}
body.drawer-open .drawer-veil{opacity:1;pointer-events:auto}
body.drawer-open{overflow:hidden}
.drawer-head{background:var(--navy);padding:16px 18px;display:flex;justify-content:space-between;align-items:center;}
.drawer-head img{height:32px}
.drawer-close{background:transparent;border:0;color:#fff;font-size:26px;cursor:pointer;line-height:1}
.drawer-call{display:block;background:var(--red);color:#fff;text-align:center;text-decoration:none;
  font:800 20px var(--disp);letter-spacing:.5px;padding:15px;margin:14px 16px 4px;border-radius:10px;}
.drawer-call small{display:block;font:600 11px var(--body);letter-spacing:.6px;opacity:.9;text-transform:uppercase}
.drawer nav{padding:10px 8px 30px}
.drawer nav a{display:flex;align-items:center;gap:12px;padding:14px 14px;color:var(--ink);
  text-decoration:none;font:600 16px var(--body);border-bottom:1px solid var(--line);}
.drawer nav a .icn{width:22px;height:22px;color:var(--navy);flex-shrink:0}
.drawer nav .sub{font-weight:500;font-size:15px;padding-left:28px;color:var(--slate)}
.drawer nav a:active{background:var(--bg)}

.hero{position:relative;color:#fff;overflow:hidden;
  background:radial-gradient(1100px 500px at 85% -10%, #1E4B8F 0%, transparent 60%),
  linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 55%, #0E2B55 100%);}
.hero::after{content:"";position:absolute;inset:0;
  background-image:radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:22px 22px;pointer-events:none;}
.hero-inner{position:relative;z-index:2;max-width:1280px;margin:0 auto;padding:56px 5% 60px;
  display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center;}
/* The form itself is rendered by the client's form plugin via shortcode.
   The theme only positions the slot inside the hero grid and leaves all
   styling to the plugin. */
.form-slot{justify-self:end;width:100%;max-width:430px;color:var(--ink);
  /* Keeps the form's top clear of the sticky header for any plain #anchor
     jump. The JS path computes the header height exactly; this is the
     no-JS fallback and a sensible default. */
  scroll-margin-top:92px}
body.admin-bar .form-slot{scroll-margin-top:124px}
@media screen and (max-width:782px){
  body.admin-bar .form-slot{scroll-margin-top:138px}
}

/* Anything else worth anchoring to should clear the header too. */
main [id]{scroll-margin-top:92px}

.photo-tag{display:inline-flex;align-items:center;gap:8px;font:600 11px var(--body);
  letter-spacing:.8px;text-transform:uppercase;color:#9FB4CC;
  border:1px dashed rgba(255,255,255,.35);border-radius:99px;padding:5px 12px;margin-bottom:18px;}
.hero h1{font:800 clamp(38px,4.6cqw,60px)/1.02 var(--disp);letter-spacing:.5px;text-transform:uppercase;margin-bottom:14px;}
.hero h1 em{font-style:normal;color:var(--gold)}
.hero p.lead,.svc-hero p.lead{font:400 16.5px/1.65 var(--body);color:#C7D6E8;max-width:52ch;margin-bottom:22px}
.hero-ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px;margin-bottom:26px}
.hero-ctas .btn{padding:13px 24px;font-size:15.5px}
.trust-row{display:flex;gap:22px;flex-wrap:wrap}
.trust-row .t{display:flex;align-items:center;gap:8px;font:600 13px var(--body);color:#E8EFF7}
.trust-row .t b{color:var(--gold)}


.pest-rail{background:#fff;border-bottom:1px solid var(--line);box-shadow:0 6px 18px rgba(11,37,69,.05)}
.pr-inner{max-width:1280px;margin:0 auto;padding:16px 5%}
.pr-label{font:700 11px var(--body);letter-spacing:1px;text-transform:uppercase;color:var(--slate);margin-bottom:10px}
.pr-scroll{display:flex;gap:10px;overflow:visible;flex-wrap:wrap;padding-bottom:6px}
.pest-chip{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:8px;
  min-width:104px;padding:13px 10px;border:1.6px solid var(--line);border-radius:12px;
  background:#fff;text-decoration:none;color:var(--ink);font:600 12.5px var(--body);
  transition:.15s;cursor:pointer;text-align:center;}
.pest-chip .icn{width:30px;height:30px;color:var(--navy)}
.pest-chip:hover{border-color:var(--red);color:var(--red);transform:translateY(-2px);box-shadow:0 8px 18px rgba(230,43,51,.12)}
.pest-chip:hover .icn{color:var(--red)}

section.block{padding:64px 5%}
.wrap{max-width:1280px;margin:0 auto}
.eyebrow{font:700 12px var(--body);letter-spacing:1.4px;text-transform:uppercase;color:var(--red);margin-bottom:8px}
h2.sec{font:800 clamp(28px,3.4cqw,42px)/1.05 var(--disp);text-transform:uppercase;letter-spacing:.4px;color:var(--navy);margin-bottom:12px}
p.sec-sub{font:400 15.5px/1.65 var(--body);color:var(--slate);max-width:64ch;margin-bottom:36px}

.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-bottom:20px}
.svc-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  transition:.2s;display:flex;flex-direction:column;text-decoration:none;}
.svc-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:transparent}
.svc-photo{height:150px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:8px;
  color:#fff;font:600 11px var(--body);letter-spacing:.8px;text-transform:uppercase;
  background:linear-gradient(135deg,var(--navy-2),var(--navy-3));position:relative;}
.svc-photo .icn{width:52px;height:52px;color:#fff;opacity:.95}
.svc-photo span.rp{opacity:.75}
.svc-body{padding:20px 22px 24px;flex:1;display:flex;flex-direction:column}
.svc-body h3{font:800 22px var(--disp);text-transform:uppercase;letter-spacing:.4px;color:var(--navy);margin-bottom:8px}
.svc-body p{font:400 14px/1.6 var(--body);color:var(--slate);flex:1;margin-bottom:16px}
.svc-link{font:700 13.5px var(--body);color:var(--red);text-decoration:none}
.svc-link::after{content:" \2192"}

.why{background:var(--navy);color:#fff}
.why .eyebrow{color:var(--gold)}
.why h2.sec{color:#fff}
.why p.sec-sub{color:#B9CADF}
.why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.why-card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:24px 22px}
.why-card .icn{width:40px;height:40px;color:#fff;margin-bottom:14px}
.why-card h4{font:800 19px var(--disp);text-transform:uppercase;letter-spacing:.4px;margin-bottom:8px}
.why-card p{font:400 13.5px/1.6 var(--body);color:#B9CADF}

.rev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.rev-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:24px}
.stars{color:var(--gold);letter-spacing:2px;font-size:15px;margin-bottom:10px}
.rev-card p{font:400 14px/1.65 var(--body);color:var(--ink);margin-bottom:14px}
.rev-card .who{font:700 13px var(--body);color:var(--navy)}
.rev-card .who small{display:block;font-weight:500;color:var(--slate)}

.cta-band{background:linear-gradient(120deg,var(--red),#B81B22);color:#fff}
.cta-band .wrap{display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap}
.cta-band h2{font:800 clamp(26px,3cqw,38px) var(--disp);text-transform:uppercase;letter-spacing:.4px}
.cta-band p{font:500 14.5px var(--body);opacity:.95;margin-top:4px}
.cta-band .btn{background:#fff;color:var(--red);font-size:16px;padding:13px 26px}
.cta-band .big-phone{font:800 30px var(--disp);color:#fff;text-decoration:none;letter-spacing:.5px}
/* The mockup used an inline style here; promoted to a class so it stays editable. */
.cta-band .cta-actions{display:flex;gap:18px;align-items:center;flex-wrap:wrap}

.svc-hero{position:relative;overflow:hidden;background:linear-gradient(135deg,var(--navy) 0%,var(--navy-2) 60%,#0E2B55 100%);color:#fff}
.svc-hero .hero-inner{padding:48px 5% 52px}
.crumbs{font:600 12px var(--body);color:#9FB4CC;margin-bottom:16px}
.crumbs a{color:#C7D6E8;text-decoration:none}
.crumbs a:hover{color:#fff}
.sp-two{display:grid;grid-template-columns:1.2fr .8fr;gap:44px;align-items:start}
.sp-main h2.sec{font-size:clamp(24px,2.6cqw,32px)}
.sp-main>p{font:400 15px/1.7 var(--body);color:var(--ink);margin-bottom:18px;max-width:70ch}
.signs{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:8px 0 28px}
.sign{display:flex;gap:10px;align-items:flex-start;background:#fff;border:1px solid var(--line);
  border-radius:10px;padding:14px 16px;font:500 13.5px/1.5 var(--body);}
.sign .tick{color:var(--red);font-weight:800}
.steps{counter-reset:step;display:grid;gap:14px;margin:8px 0 30px}
.step{display:flex;gap:16px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px 20px}
.step .n{counter-increment:step;flex:0 0 38px;height:38px;border-radius:10px;background:var(--navy);
  color:#fff;display:flex;align-items:center;justify-content:center;font:800 18px var(--disp);}
.step .n::before{content:counter(step)}
/* The step card owns its own internals.

   `margin-top:0` is explicit because the heading sits flush against the top of
   the card, level with the numbered badge - any inherited top margin drops it
   out of alignment. The `.prose` variants below carry a matching class count so
   the card renders identically whether or not it lands inside a prose column;
   `.prose p` is declared later in this file and would otherwise resize and
   re-space the body copy on the pages that use one. */
.step h4{font:800 17px var(--disp);text-transform:uppercase;letter-spacing:.4px;color:var(--navy);
  margin:0 0 4px}
.step p{font:400 13.5px/1.6 var(--body);color:var(--slate);margin:0}
.step p:not(:last-child){margin-bottom:10px}
.prose .step h4{font:800 17px var(--disp);text-transform:uppercase;letter-spacing:.4px;color:var(--navy);
  margin:0 0 4px}
.prose .step p{font:400 13.5px/1.6 var(--body);color:var(--slate);margin:0;max-width:none}
.prose .step p:not(:last-child){margin-bottom:10px}
.sp-side{position:sticky;top:96px;display:grid;gap:18px}
.side-call{background:var(--navy);border-radius:14px;color:#fff;padding:22px;text-align:center;}
.side-call .pb-label{font:600 11px var(--body);letter-spacing:.8px;text-transform:uppercase;color:#9FB4CC}
.side-call a.num{font:800 30px var(--disp);color:#fff;text-decoration:none;display:block;margin:4px 0 12px}
.side-box{background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px}
.side-box h5{font:700 12px var(--body);letter-spacing:1.2px;text-transform:uppercase;color:var(--slate);margin-bottom:12px}
.side-box a{display:flex;gap:11px;align-items:center;padding:9px 4px;color:var(--ink);
  text-decoration:none;font:600 14px var(--body);border-bottom:1px solid var(--line)}
.side-box a .icn{width:20px;height:20px;color:var(--navy);flex-shrink:0}
.side-box a:hover{color:var(--red)}
.side-box a:hover .icn{color:var(--red)}
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line);padding:16px 4px}
.faq summary{font:700 15px var(--body);color:var(--navy);cursor:pointer;list-style:none;display:flex;justify-content:space-between}
.faq summary::after{content:"+";color:var(--red);font-weight:800;font-size:18px}
.faq details[open] summary::after{content:"\2013"}
.faq details p{font:400 14px/1.65 var(--body);color:var(--slate);padding-top:10px;max-width:75ch}

footer.site{background:#081A31;color:#9FB4CC;padding:52px 5% 50px}
.accred{max-width:1280px;margin:0 auto 40px;background:#fff;border-radius:14px;
  display:flex;align-items:center;justify-content:center;gap:26px;padding:20px 26px;flex-wrap:wrap}
.accred .a-label{font:700 11px var(--body);letter-spacing:1.2px;text-transform:uppercase;color:var(--slate)}
.accred img{max-height:56px;width:auto;max-width:100%}
.f-grid{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:1.15fr 1fr 1fr 1fr 1.05fr;gap:32px}
footer.site .f-logo{height:34px;margin-bottom:14px}
footer.site p{font:400 13px/1.7 var(--body)}
footer.site h5{font:700 12px var(--body);letter-spacing:1.2px;text-transform:uppercase;color:#fff;margin-bottom:14px}
footer.site a{color:#C7D6E8;text-decoration:none;font:500 13.5px var(--body);display:block;padding:4px 0}
footer.site a:hover{color:#fff}
/* Contact column: the phone line is the emphasis, so it carries its own
   weight and colour rather than an inline style. */
.f-contact .f-phone{font-weight:700;color:#fff}
.f-contact .f-phone:hover{color:var(--gold)}

/* Coverage area.

   Spans the whole grid on its own row. The community list runs to forty-odd
   place names, which is unreadable squeezed into one column beside the
   contact details, so it gets the full width and a centred measure. */
.f-coverage{grid-column:1 / -1;margin-top:12px;padding-top:26px;
  border-top:1px solid rgba(255,255,255,.12);text-align:center}
.f-coverage .f-cov-head{margin-bottom:8px;color:#fff}
.f-coverage p{width:100%;max-width:100%;margin:0;color:#9FB4CC}

.f-bottom{max-width:1280px;margin:36px auto 0;border-top:1px solid rgba(255,255,255,.12);
  padding-top:18px;font:400 12px var(--body);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.f-bottom a{color:inherit;display:inline;padding:0}
.f-bottom a:hover{color:#fff}

.msb{position:sticky;bottom:0;z-index:65;display:none;grid-template-columns:1fr 1fr;
  box-shadow:0 -6px 20px rgba(5,16,31,.25);}
.msb a{padding:15px;text-align:center;font:800 16px var(--disp);letter-spacing:.6px;text-transform:uppercase;text-decoration:none}
.msb .call{background:var(--navy);color:#fff}
.msb .quote{background:var(--red);color:#fff}


/* ---- photo banner heroes ---- */
.hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero,.svc-hero{position:relative;overflow:hidden}
.hero-bg{position:absolute!important;inset:0;z-index:0;overflow:hidden}

.hero-bg img{width:100%;height:100%;object-fit:cover;display:block}
.hero-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg, rgba(8,26,49,.96) 0%, rgba(8,26,49,.92) 32%, rgba(11,37,69,.58) 62%, rgba(11,37,69,.26) 100%);}

/* ---- form states ---- */

@container site (max-width: 980px){
  .hero-bg::after{background:linear-gradient(180deg, rgba(8,26,49,.93) 0%, rgba(8,26,49,.86) 52%, rgba(11,37,69,.74) 100%);}
}
.hero::after,.svc-hero::after{display:none}
/* ---- team strip ---- */
.team-strip{position:relative;overflow:hidden;background:var(--navy);line-height:0}
.team-strip img{width:100%;height:auto;display:block;opacity:.95}
.team-strip .ts-cap{position:absolute;left:0;right:0;bottom:0;padding:34px 5% 18px;line-height:1.2;
  background:linear-gradient(0deg, rgba(8,26,49,.94) 20%, rgba(8,26,49,0));color:#fff}
.team-strip .ts-cap h3{font:800 clamp(19px,2.6cqw,32px) var(--disp);text-transform:uppercase;letter-spacing:.5px}
.team-strip .ts-cap p{font:500 13px var(--body);color:#C7D6E8;margin-top:2px}
/* ---- content pages ---- */
.prose h3{font:800 22px var(--disp);text-transform:uppercase;letter-spacing:.4px;color:var(--navy);margin:0 0 8px}
.prose p{font:400 15px/1.75 var(--body);color:var(--ink);margin-bottom:16px;max-width:70ch}
.prose ul{margin:0 0 18px 20px}
.prose li{font:400 14.5px/1.7 var(--body);color:var(--slate);margin-bottom:6px}
.prose a{color:var(--red);font-weight:600;text-decoration:none}
.prose a:hover{text-decoration:underline}
.feature-img{width:100%;height:auto;border-radius:14px;display:block;box-shadow:var(--shadow);margin:6px 0 26px}
.feature-figure{margin:0 0 26px}
.feature-figure .feature-img{margin:0}
.owner-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:30px;align-items:start;margin:8px 0 10px}
.owner-grid img{width:100%;border-radius:14px;display:block;box-shadow:var(--shadow)}
.bio{background:#fff;border:1px solid var(--line);border-radius:12px;padding:20px 22px;margin-bottom:14px}
.bio h4{font:800 20px var(--disp);text-transform:uppercase;letter-spacing:.4px;color:var(--navy);margin:0 0 2px}
.bio .role{font:600 11.5px var(--body);letter-spacing:.8px;text-transform:uppercase;color:var(--red);margin-bottom:8px}
.bio p{font:400 14px/1.65 var(--body);color:var(--slate);margin:0}
.cap-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:4px 0 26px}
.cap{background:#fff;border:1px solid var(--line);border-radius:12px;padding:22px}
/* The grid is two columns, so a final card only needs the full width when
   the count is odd and it would otherwise sit alone with a gap beside it.
   :last-child:nth-child(odd) is true only in that case - an even number of
   cards leaves the last one in its normal column. */
.cap:last-child:nth-child(odd){grid-column:1 / -1}
.cap h4{font:800 19px var(--disp);text-transform:uppercase;letter-spacing:.4px;color:var(--navy);margin:0 0 8px}
.cap p{font:400 13.5px/1.65 var(--body);color:var(--slate);margin:0}
.cap p:not(:last-child) {margin-bottom: 15px;}
.press{display:grid;gap:10px;margin-bottom:10px}
.press a{display:flex;justify-content:space-between;gap:12px;align-items:center;background:#fff;
  border:1px solid var(--line);border-radius:10px;padding:14px 16px;color:var(--navy);
  font:600 14px var(--body);text-decoration:none}
.press a:hover{border-color:var(--red);color:var(--red)}
.press a span{color:var(--slate);font-weight:500;font-size:12.5px;white-space:nowrap}
.pill{display:inline-block;background:var(--gold);color:#3A2A00;font:800 11px var(--body);
  letter-spacing:1px;text-transform:uppercase;padding:5px 12px;border-radius:99px;margin-bottom:14px}
@container site (max-width: 980px){
  .owner-grid{grid-template-columns:1fr;gap:20px}
  .cap-grid{grid-template-columns:1fr}
}

@container site (max-width: 1180px){
  nav.main{gap:0}
  nav.main a.top{padding:10px 9px;font-size:13.5px}
  .head-cta{gap:10px}
  .phone-block a{font-size:19px}
}
@container site (max-width: 980px){
  nav.main{display:none}
  .burger{display:block}
  .hero-inner{grid-template-columns:1fr;gap:34px;padding:40px 5% 46px}
  .form-slot{justify-self:stretch;max-width:none}
    .svc-grid{grid-template-columns:1fr 1fr}
  .why-grid{grid-template-columns:1fr 1fr}
  .rev-grid{grid-template-columns:1fr}
  .sp-two{grid-template-columns:1fr}
  .sp-side{position:static}
  .f-grid{grid-template-columns:1fr 1fr}
  .f-coverage{padding-top:22px}
}
@container site (max-width: 620px){
  .f-grid{grid-template-columns:1fr;gap:26px}
  .f-coverage{padding-top:22px}
  .f-bottom{flex-direction:column;gap:6px}
  footer.site{padding:40px 6% 90px}
  .utility .u-left span.hide-m{display:none}
  .phone-block{display:none}
  .head-cta .btn{display:none}
  .logo img{height:32px}
  .svc-grid{grid-template-columns:1fr}
  .why-grid{grid-template-columns:1fr}
  .signs{grid-template-columns:1fr}
    section.block{padding:46px 5%}
  .msb{display:grid}
  .cta-band .wrap{flex-direction:column;align-items:flex-start}
  .accred{gap:16px;padding:16px}
  .accred img{max-height:42px}
  /* Pest rail reads better centred once the chips wrap on a phone. */
  .pr-label{text-align:center}
  .pr-scroll{justify-content:center}
  .pest-chip{align-items:center;justify-content:center}
}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
@media (prefers-reduced-motion: reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* =========================================================
   WordPress integration layer
   Everything above is the approved mockup design, untouched.
   Everything below only exists to make WordPress core markup,
   the block editor and the admin bar behave inside that design.
   ========================================================= */

/* --- Core alignment + caption classes (required for theme review) --- */
.alignleft{float:left;margin:6px 24px 18px 0}
.alignright{float:right;margin:6px 0 18px 24px}
.aligncenter{display:block;margin-left:auto;margin-right:auto}
.alignwide{max-width:min(1100px,100%);margin-left:auto;margin-right:auto}
.alignfull{width:100%;max-width:none}
.wp-caption{max-width:100%}
.wp-caption img{display:block;width:100%;height:auto;border-radius:12px}
.wp-caption-text,.wp-block-image figcaption{font:500 13px/1.5 var(--body);color:var(--slate);margin-top:8px;text-align:center}
.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;width:1px;
  margin:-1px;overflow:hidden;padding:0;position:absolute!important;word-wrap:normal!important}
.sticky,.bypostauthor{position:relative}
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin:0 0 24px}
.gallery-item img{width:100%;height:auto;border-radius:12px;display:block}

/* --- Prose additions the mockup never needed but the editor can output ---

   Wrapped in :where() on purpose. These are fallbacks for loose content typed
   into the editor, so they must never outrank a component's own styling.
   :where() contributes zero specificity, which means `.step h4`, `.cap h4` and
   `.bio h4` keep their own rules even though they are declared earlier in this
   file and sit inside a .prose container. Without it, `.prose h4` tied on
   specificity and won on source order, which flattened the step cards. */
:where(.prose) h2:not(.sec){font:800 26px var(--disp);text-transform:uppercase;letter-spacing:.4px;color:var(--navy);margin:30px 0 10px}
:where(.prose) h4{font:700 17px var(--body);color:var(--navy);margin:20px 0 6px}
:where(.prose) ol{margin:0 0 18px 20px}
:where(.prose) ol li{font:400 14.5px/1.7 var(--body);color:var(--slate);margin-bottom:6px}
:where(.prose) blockquote{border-left:4px solid var(--red);background:#fff;border-radius:0 12px 12px 0;
  padding:16px 20px;margin:0 0 22px;box-shadow:var(--shadow)}
:where(.prose) blockquote p{margin-bottom:0;font-style:italic}
:where(.prose) table{width:100%;border-collapse:collapse;margin:0 0 24px;font:400 14px var(--body)}
:where(.prose) th,:where(.prose) td{border:1px solid var(--line);padding:10px 12px;text-align:left}
:where(.prose) th{background:var(--navy);color:#fff;font-weight:700}
:where(.prose) tbody tr:nth-child(even){background:#fff}
:where(.prose) img{max-width:100%;height:auto;border-radius:12px}
:where(.prose) figure{margin:0 0 22px}
:where(.prose) code{background:#fff;border:1px solid var(--line);border-radius:5px;padding:2px 6px;font-size:13px}
.prose>*:first-child{margin-top:0}

/* --- Blog / archive / search, so the theme degrades gracefully --- */
.post-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px}
.post-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--shadow);display:flex;flex-direction:column;transition:.18s}
.post-card:hover{transform:translateY(-3px)}
.post-card img{width:100%;height:190px;object-fit:cover;display:block}
.post-card .pc-body{padding:20px 22px 24px;display:flex;flex-direction:column;gap:8px;flex:1}
.post-card h3{font:800 21px var(--disp);text-transform:uppercase;letter-spacing:.4px;color:var(--navy)}
.post-card h3 a{color:inherit;text-decoration:none}
.post-card h3 a:hover{color:var(--red)}
.post-card p{font:400 14.5px/1.65 var(--body);color:var(--slate)}
.post-meta{font:600 12px var(--body);color:var(--slate);text-transform:uppercase;letter-spacing:.6px}
.entry-thumb{width:100%;border-radius:14px;display:block;margin:0 0 26px;box-shadow:var(--shadow)}
.pagination{display:flex;gap:8px;flex-wrap:wrap;margin-top:34px}
.pagination .page-numbers{display:inline-block;padding:10px 15px;border-radius:9px;background:#fff;
  border:1px solid var(--line);color:var(--navy);font:700 14px var(--body);text-decoration:none}
.pagination .page-numbers.current,.pagination .page-numbers:hover{background:var(--navy);color:#fff;border-color:var(--navy)}
.searchform{display:flex;gap:8px;margin-bottom:18px}
.searchform input[type=search]{flex:1;border:1.6px solid var(--line);border-radius:9px;padding:11px 12px;
  font:500 14.5px var(--body);background:#fff;outline:none}
.searchform input[type=search]:focus{border-color:var(--navy-3);box-shadow:0 0 0 3px rgba(27,63,122,.12)}
.no-results{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:30px;box-shadow:var(--shadow)}

/* --- Comments --- */
.comments-area{margin-top:40px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:28px;box-shadow:var(--shadow)}
.comments-area h3{font:800 22px var(--disp);text-transform:uppercase;letter-spacing:.4px;color:var(--navy);margin-bottom:16px}
.comment-list{list-style:none;margin:0 0 24px}
.comment-list ul.children{list-style:none;margin-left:26px}
.comment-body{border-bottom:1px solid var(--line);padding:16px 0}
.comment-author{font:700 14.5px var(--body);color:var(--navy)}
.comment-metadata{font:500 12px var(--body);color:var(--slate);margin-bottom:8px}
.comment-content p{font:400 14.5px/1.7 var(--body);color:var(--ink)}
.comment-form label{display:block;font:600 12px var(--body);color:var(--slate);margin-bottom:4px}
.comment-form input[type=text],.comment-form input[type=email],.comment-form input[type=url],.comment-form textarea{
  width:100%;border:1.6px solid var(--line);border-radius:9px;padding:11px 12px;font:500 14.5px var(--body);
  background:#fff;outline:none;margin-bottom:12px;font-family:var(--body)}
.comment-form .submit{background:var(--red);color:#fff;border:0;border-radius:9px;padding:12px 22px;
  font:700 14.5px var(--body);cursor:pointer}

/* --- Interior hero without a background image still needs contrast --- */
.svc-hero.no-photo::before{content:"";position:absolute;inset:0;
  background:linear-gradient(135deg,var(--navy) 0%,var(--navy-2) 60%,#0E2B55 100%);z-index:0}

/* --- Print --- */
@media print{
  .utility,header.site,.drawer,.drawer-veil,.msb,.form-slot,.cta-band,footer.site{display:none!important}
  body{background:#fff}
  .sp-two{grid-template-columns:1fr!important}
}

/* --- Pricing tier cards: the copy is prose, not a one-line teaser --- */
.svc-card .price-copy p{font:400 14px/1.65 var(--body);color:var(--slate);margin-bottom:10px}
.svc-card .price-copy p:last-child{margin-bottom:0}
.svc-card .price-copy b{color:var(--navy)}

/* --- Press links with no destination yet --- */
.press a[aria-disabled="true"]{cursor:default}
.press a[aria-disabled="true"]:hover{border-color:var(--line);color:var(--ink)}

/* --- Paginated posts/pages (wp_link_pages) --- */
.page-links{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:24px 0 0;
  font:700 14px var(--body);color:var(--navy)}
.page-links a{display:inline-block;padding:8px 13px;border-radius:8px;background:#fff;
  border:1px solid var(--line);color:var(--navy);text-decoration:none}
.page-links a:hover{background:var(--navy);color:#fff;border-color:var(--navy)}


/* =========================================================
   Live-site breakpoints.

   Exact mirrors of the @container rules above. The mockup sized
   itself against #viewport; a real page sizes against the window,
   and these keep the two identical. The @container versions are
   still what drives the phone frame in preview mode.
   ========================================================= */
@media screen and (max-width: 980px){
  .hero-bg::after{background:linear-gradient(180deg, rgba(8,26,49,.93) 0%, rgba(8,26,49,.86) 52%, rgba(11,37,69,.74) 100%);}
}
@media screen and (max-width: 980px){
  .owner-grid{grid-template-columns:1fr;gap:20px}
  .cap-grid{grid-template-columns:1fr}
}
@media screen and (max-width: 1180px){
  nav.main{gap:0}
  nav.main a.top{padding:10px 9px;font-size:13.5px}
  .head-cta{gap:10px}
  .phone-block a{font-size:19px}
}
@media screen and (max-width: 980px){
  nav.main{display:none}
  .burger{display:block}
  .hero-inner{grid-template-columns:1fr;gap:34px;padding:40px 5% 46px}
  .form-slot{justify-self:stretch;max-width:none}
    .svc-grid{grid-template-columns:1fr 1fr}
  .why-grid{grid-template-columns:1fr 1fr}
  .rev-grid{grid-template-columns:1fr}
  .sp-two{grid-template-columns:1fr}
  .sp-side{position:static}
  .f-grid{grid-template-columns:1fr 1fr}
  .f-coverage{padding-top:22px}
}
@media screen and (max-width: 620px){
  .f-grid{grid-template-columns:1fr;gap:26px}
  .f-coverage{padding-top:22px}
  .f-bottom{flex-direction:column;gap:6px}
  footer.site{padding:40px 6% 90px}
  .utility .u-left span.hide-m{display:none}
  .phone-block{display:none}
  .head-cta .btn{display:none}
  .logo img{height:32px}
  .svc-grid{grid-template-columns:1fr}
  .why-grid{grid-template-columns:1fr}
  .signs{grid-template-columns:1fr}
    section.block{padding:46px 5%}
  .msb{display:grid}
  .cta-band .wrap{flex-direction:column;align-items:flex-start}
  .accred{gap:16px;padding:16px}
  .accred img{max-height:42px}
  /* Pest rail reads better centred once the chips wrap on a phone. */
  .pr-label{text-align:center}
  .pr-scroll{justify-content:center}
  .pest-chip{align-items:center;justify-content:center}
}