/* JM Pest Control Solutions — homepage v7 "Full negro" (Refero-grounded)
   Reference lock
   - Primary: SpaceX (Refero style f3f3ccec) — continuous #000 canvas; full-bleed photo chapters that
     dissolve into black; compact text group low-left (~450px), never centered over the photo;
     small 50px actions with 4px corners; monochrome interface, color only inside photos;
     verified numbers shown big in regular weight; specification rows with 1px rules instead of cards.
   - Borrowed from MasterClass (Refero style da1ce87b): brand color only on the conversion action
     (JM blue = call / quote); poster rail with dark caption fade; quote card overlapping a real
     portrait; dark 4px FAQ rows with 16px gaps; full footer (keeps the 62 internal links).
   - User constraints: Brand Book (black, white, #213A8F, Archivo; logo untouched), Title Case
     (JM rejected all-caps lettering), real photos only, no invented claims.
   - Rejected: centered hero copy, pills/capsules, rounded 10px cards, glass chips, colored bands,
     drop shadows on feature items, all-caps headings. */
@font-face{font-family:"Archivo";font-style:normal;font-display:swap;font-weight:100 900;font-stretch:62% 125%;src:url("/assets/fonts/archivo-wdth.woff2") format("woff2-variations"),url("/assets/fonts/archivo-wdth.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{
  color-scheme:dark;
  --canvas:#000000;
  --text:#FFFFFF;                 /* Brand Book white: headings, body, icons */
  --text-2:#C4C4C4;               /* supporting copy: neutral tint of white */
  --muted:#8F8F8F;                /* eyebrows, captions, low-priority text */
  --edge:rgba(255,255,255,.35);   /* outlined action border */
  --rule:rgba(255,255,255,.22);   /* specification rows, dividers */
  --panel:#1A1A1A;                /* FAQ rows, quote card (MasterClass charcoal) */
  --input:#111111;
  --blue:#213A8F;                 /* conversion only: Call, Quote, Send */
  --focus:#FFFFFF;                /* focus ring only */
  --font:"Archivo",Helvetica,Arial,sans-serif;
  --gut:20px;--gut-wide:60px;--wrap:1400px;
  --ease:cubic-bezier(.19,1,.22,1);
  --r:4px;
}
@media (min-width:960px){:root{--gut:60px}}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-padding-top:90px;background:var(--canvas)}
body{margin:0;background:var(--canvas);color:var(--text);font:400 17px/1.55 var(--font);padding-bottom:calc(58px + env(safe-area-inset-bottom,0px))}
@media (min-width:960px){body{padding-bottom:0}}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,p,ul,ol,figure,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:12px;top:-60px;z-index:200;background:var(--blue);color:#fff;padding:10px 14px;font-weight:700}
.skip:focus{top:12px}
.nw{white-space:nowrap}

/* ---------- Type: condensed industrial display in Title Case, regular sentence-case body ---------- */
.display{font-weight:700;font-stretch:78%;letter-spacing:.005em;line-height:1;text-wrap:balance}
h2.display{font-size:clamp(2.2rem,7.6vw,3.5rem)}
.micro{font-size:14px;line-height:1.4;font-weight:500;letter-spacing:.02em;color:var(--muted)}
.lede{font-size:17px;color:var(--text-2);max-width:46ch}
.wrap{max-width:var(--wrap);margin:0 auto;padding-left:var(--gut);padding-right:var(--gut)}
.section{padding-block:clamp(72px,10vw,128px)}
.head{display:grid;gap:14px;margin-bottom:clamp(32px,5vw,56px);max-width:520px}
.head.wide{max-width:760px}

/* Review notes for JM (removed from the production build) */
.jm-flag{display:inline-block;font:600 12px/1.35 var(--font);padding:4px 8px;border:1px dashed #666;background:#141414;color:#DDD;margin:6px 0;max-width:100%;text-align:left;font-stretch:100%}
.preview-ribbon{background:#0D0D0D;color:#BBB;font-size:12px;font-weight:600;text-align:center;padding:6px var(--gut);border-bottom:1px solid var(--rule)}

/* ---------- Actions: small instruments (50px, 4px corners) ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:50px;padding:0 20px;font:600 15px/1 var(--font);letter-spacing:.01em;text-decoration:none;border-radius:var(--r);border:1px solid var(--edge);background:rgba(0,0,0,.5);color:var(--text);cursor:pointer;white-space:nowrap;transition:background-color .5s var(--ease),color .5s var(--ease),border-color .5s var(--ease)}
.btn:hover{background:var(--text);color:#000;border-color:var(--text)}
.btn svg{width:16px;height:16px;flex:none}
.btn .arr{width:16px;height:16px;flex:none}
.btn.call{background:var(--blue);border-color:var(--blue);color:#fff}
.btn.call:hover{background:var(--text);border-color:var(--text);color:#000}
.btn-row{display:flex;flex-wrap:wrap;gap:12px}
.textlink{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:600;color:var(--text);text-decoration:none;border-bottom:1px solid var(--edge)}
.textlink:hover{border-bottom-color:var(--text)}

/* ---------- Navigation: part of the media stage, darkens once you scroll ---------- */
.site-head{position:absolute;top:0;left:0;right:0;z-index:100;background:linear-gradient(rgba(0,0,0,.65) 0%,rgba(0,0,0,0) 100%);transition:background-color .4s var(--ease)}
@media (min-width:960px){.site-head{position:fixed}.scrolled .site-head{background:rgba(0,0,0,.86);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--rule)}}
.site-head .wrap{display:flex;align-items:center;gap:24px;min-height:74px}
.brand{line-height:0;flex:none;min-height:44px;display:flex;align-items:center}
.brand img{height:40px;width:auto}
.nav{display:none}
@media (min-width:960px){.nav{display:flex;gap:4px;margin-left:auto}.nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;font:600 14px/1 var(--font);letter-spacing:.03em;color:#D9D9D9;text-decoration:none;transition:color .3s}.nav a:hover{color:#fff}}
.head-cta{margin-left:auto;display:flex;align-items:center;gap:8px}
@media (min-width:960px){.head-cta{margin-left:8px}}
.head-cta .btn{height:44px;padding:0 14px;font-size:14px;background:var(--blue);border-color:var(--blue);color:#fff}
.head-cta .btn:hover{background:var(--text);border-color:var(--text);color:#000}
@media (max-width:520px){.head-cta .hide-sm{display:none}}
.menu-btn{display:inline-flex;align-items:center;justify-content:center;min-width:48px;height:44px;border:1px solid var(--edge);border-radius:var(--r);background:rgba(0,0,0,.5);font:600 14px/1 var(--font);color:var(--text);cursor:pointer;padding:0 14px}
@media (min-width:960px){.menu-btn{display:none}}
.mobile-nav{background:#000;border-top:1px solid var(--rule)}
.mobile-nav a{display:block;padding:16px var(--gut);font:700 24px/1.15 var(--font);font-stretch:78%;color:var(--text);text-decoration:none;border-bottom:1px solid var(--rule)}
@media (min-width:960px){.mobile-nav{display:none!important}}

/* ---------- Opening: full-bleed, title stack low-left ---------- */
.hero{position:relative;height:100svh;min-height:620px;max-height:1000px;overflow:hidden;display:grid;align-items:end;background:#000}
.hero .media{position:absolute;inset:0}
.hero .media picture{display:block;width:100%;height:100%}
.hero .media img{width:100%;height:100%;object-fit:cover;object-position:50% 40%;animation:kb 2.4s var(--ease) both}
@media (min-width:700px){.hero .media img{object-position:72% 50%}}
@keyframes kb{from{transform:scale(1.06)}to{transform:scale(1)}}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(rgba(0,0,0,0) 34%,rgba(0,0,0,.72) 66%,#000 100%)}
@media (min-width:960px){.hero::after{background:linear-gradient(rgba(0,0,0,0) 50%,#000 100%),linear-gradient(90deg,rgba(0,0,0,.8) 0%,rgba(0,0,0,.45) 38%,rgba(0,0,0,0) 62%)}}
.hero-copy{position:relative;z-index:2;display:grid;gap:16px;justify-items:start;padding:0 var(--gut) calc(78px + env(safe-area-inset-bottom,0px));max-width:var(--wrap);width:100%;margin:0 auto}
@media (min-width:960px){.hero-copy{padding-bottom:clamp(56px,9vh,100px)}.hero-copy>*{max-width:600px}}
.hero .rating{display:inline-flex;align-items:center;gap:10px;min-height:44px;font-size:15px;color:var(--text-2);text-decoration:none}
.hero .rating .stars{color:var(--text);letter-spacing:.12em}
.hero .rating:hover{color:var(--text)}
.hero h1{font-size:clamp(2.7rem,11.2vw,4.8rem);line-height:.95;letter-spacing:-.005em}
.hero-text{font-size:17px;color:var(--text-2);max-width:42ch}
.hero .btn-row{margin-top:8px}
.hero-facts{display:flex;flex-wrap:wrap;gap:4px 20px;font-size:14px;color:var(--muted)}
.scroll-cue{position:absolute;z-index:2;right:var(--gut);bottom:40px;width:1px;height:56px;background:rgba(255,255,255,.25);overflow:hidden;display:none}
.scroll-cue::after{content:"";position:absolute;left:0;top:-20px;width:1px;height:20px;background:var(--text);animation:cue 3s var(--ease) infinite}
@keyframes cue{to{transform:translateY(76px)}}
@media (min-width:960px){.scroll-cue{display:block}}
.hero-copy>*{animation:rise 1s var(--ease) both}
.hero-copy>*:nth-child(1){animation-delay:.2s}.hero-copy>*:nth-child(2){animation-delay:.3s}.hero-copy>*:nth-child(3){animation-delay:.4s}.hero-copy>*:nth-child(4){animation-delay:.5s}.hero-copy>*:nth-child(5){animation-delay:.6s}.hero-copy>*:nth-child(6){animation-delay:.6s}
@keyframes rise{from{opacity:.01;transform:translateY(24px)}to{opacity:1;transform:none}}

/* ---------- Proof numerals: verified totals, size contrast not color ---------- */
.proof{padding-block:clamp(64px,9vw,110px) clamp(48px,6vw,72px);border-bottom:1px solid var(--rule)}
.proof ul{display:grid;grid-template-columns:1fr 1fr;gap:44px 16px;max-width:1100px;margin:0 auto}
@media (min-width:900px){.proof ul{grid-template-columns:repeat(4,1fr)}}
.proof li{display:grid;justify-items:center;text-align:center;gap:8px}
.proof b{font-weight:300;font-stretch:80%;font-size:clamp(3.6rem,15vw,7.4rem);line-height:.9;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.proof span{font-size:15px;color:var(--text-2)}
.proof .creds{margin:44px auto 0;text-align:center;font-size:14px;color:var(--muted)}

/* ---------- Services: poster rail (swipe on phone, grid on desktop, 3D tilt with a mouse) ---------- */
.rail{display:grid;grid-auto-flow:column;grid-auto-columns:74%;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 var(--gut) 16px;margin:0 calc(-1 * var(--gut));scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
@media (min-width:640px){.rail{grid-auto-columns:44%}}
@media (min-width:960px){.rail{grid-auto-flow:row;grid-template-columns:repeat(4,1fr);grid-auto-columns:auto;overflow:visible;margin:0;padding:0;gap:16px}}
.card{position:relative;display:block;aspect-ratio:4/5;border-radius:var(--r);overflow:hidden;scroll-snap-align:start;text-decoration:none;color:var(--text);background:#0E0E0E;transition:transform .45s var(--ease)}
.card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.card::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#080808 0%,rgba(8,8,8,.55) 42%,rgba(8,8,8,0) 75%)}
.card .glare{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;transition:opacity .4s;background:radial-gradient(circle at var(--gx,50%) var(--gy,30%),rgba(255,255,255,.22),rgba(255,255,255,0) 55%)}
.card .txt{position:absolute;left:16px;right:16px;bottom:16px;z-index:3;display:grid;gap:6px}
.card .name{font-weight:700;font-stretch:80%;font-size:24px;line-height:1.05;display:flex;justify-content:space-between;align-items:end;gap:8px}
.card .name::after{content:"→";font-weight:400;font-stretch:100%;font-size:18px}
.card .desc{font-size:14px;line-height:1.4;color:var(--text-2)}
.card .tag{position:absolute;z-index:3;left:12px;top:12px;padding:6px 10px;border-radius:var(--r);background:rgba(0,0,0,.6);border:1px solid var(--edge);font-size:13px;font-weight:600}
.card.solid{background:#0E0E0E;box-shadow:inset 0 0 0 1px var(--rule)}
.card.solid::after{display:none}
.card.solid .big{position:absolute;left:16px;right:16px;top:18px;z-index:3;font-weight:700;font-stretch:78%;font-size:clamp(2rem,7vw,2.6rem);line-height:.95}
.card.text-us{background:var(--blue);box-shadow:none}
@media (hover:hover) and (pointer:fine){.card:hover img{transform:scale(1.05)}.card:hover .glare{opacity:1}}
.card:active{transform:scale(.985)}
.rail-foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;margin-top:20px}
.rail-hint{font-size:14px;color:var(--muted)}
@media (min-width:960px){.rail-hint{visibility:hidden}}

/* ---------- Capability chapters: full-bleed photo, text group low-left over a directional veil ---------- */
.chapter{position:relative;min-height:min(94svh,940px);display:grid;align-items:end;overflow:hidden;background:#000}
.chapter .media{position:absolute;inset:0}
.chapter .media img{width:100%;height:100%;object-fit:cover}
.chapter::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(rgba(0,0,0,0) 30%,rgba(0,0,0,.78) 62%,#000 100%)}
@media (min-width:960px){.chapter::after{background:linear-gradient(#000 0%,rgba(0,0,0,0) 14%,rgba(0,0,0,0) 55%,#000 100%),linear-gradient(90deg,rgba(0,0,0,.82) 0%,rgba(0,0,0,.5) 36%,rgba(0,0,0,0) 60%)}}
.chapter .copy{position:relative;z-index:2;display:grid;gap:15px;justify-items:start;padding:0 var(--gut) clamp(56px,9vh,100px);max-width:var(--wrap);width:100%;margin:0 auto}
.chapter .copy>*{max-width:450px}
.chapter .copy p{color:var(--text-2)}
.chapter .copy .btn-row{margin-top:15px}

/* Specification rows (SpaceX): label left, value right, 1px rules */
.spec{display:grid;width:100%;border-top:1px solid var(--rule)}
.spec li{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:14px 0;border-bottom:1px solid var(--rule);font-size:15px}
.spec li span:first-child{color:var(--muted)}
.spec li span:last-child{text-align:right;color:var(--text)}
.spec.points li{justify-content:flex-start;gap:14px;color:var(--text)}
.spec.points li::before{content:"";flex:none;width:6px;height:6px;margin-top:.45em;background:var(--text)}

/* ---------- Pricing: three plans as specification columns ---------- */
.plans{display:grid;border-top:1px solid var(--rule)}
@media (min-width:900px){.plans{grid-template-columns:repeat(3,1fr)}}
.plan{display:grid;gap:18px;align-content:start;padding:36px 0 40px;border-bottom:1px solid var(--rule)}
@media (min-width:900px){.plan{padding:40px 36px 44px;border-bottom:0;border-left:1px solid var(--rule)}.plan:first-child{padding-left:0;border-left:0}.plan:last-child{padding-right:0}}
.plan .name{font-size:15px;font-weight:600;color:var(--text-2)}
.plan .amount{display:flex;align-items:baseline;gap:10px;font-weight:300;font-stretch:80%;font-size:clamp(4rem,14vw,5.6rem);line-height:.9;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.plan .amount small{font-size:15px;font-weight:500;font-stretch:100%;letter-spacing:0;color:var(--muted)}
.plan .btn{justify-self:start}
.plan-note{font-size:15px;color:var(--muted);margin-top:24px}

/* ---------- Steps: unboxed, no cards ---------- */
.steps{display:grid;gap:36px;margin-top:clamp(56px,8vw,96px)}
@media (min-width:900px){.steps{grid-template-columns:repeat(3,1fr);gap:48px}}
.steps li{display:grid;grid-template-columns:44px 1fr;gap:14px;align-items:start}
.steps .n{font-weight:300;font-stretch:80%;font-size:2.6rem;line-height:.85;color:var(--text)}
.steps h3{font-weight:700;font-stretch:80%;font-size:23px;line-height:1.1}
.steps p{color:var(--text-2);font-size:16px;margin-top:6px}

/* ---------- Real work strip ---------- */
.work{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
@media (min-width:900px){.work{grid-template-columns:repeat(4,1fr);gap:16px}}
.work figure{display:grid;gap:10px}
.work .ph{border-radius:var(--r);overflow:hidden;background:#0E0E0E}
.work img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .9s var(--ease)}
.work figure:hover img{transform:scale(1.04)}
.work figcaption{font-size:14px;color:var(--muted)}

/* ---------- Personal proof: quote card overlapping a real portrait (MasterClass) ---------- */
.testimony{display:grid;gap:0;align-items:center;max-width:1100px}
@media (min-width:900px){.testimony{grid-template-columns:380px 1fr}}
.testimony .portrait{border-radius:var(--r);overflow:hidden;aspect-ratio:4/5;max-width:380px;width:100%}
.testimony .portrait img{width:100%;height:100%;object-fit:cover}
.testimony blockquote{position:relative;z-index:1;background:var(--panel);border-radius:var(--r);padding:32px 26px;margin:-64px 16px 0;display:grid;gap:20px}
@media (min-width:900px){.testimony blockquote{margin:0 0 0 -96px;padding:48px 56px}}
.testimony blockquote p{font-size:clamp(19px,2.2vw,23px);line-height:1.55;color:var(--text)}
.testimony cite{font-style:normal;font-size:14px;color:var(--muted)}
.quotes{display:grid;grid-auto-flow:column;grid-auto-columns:84%;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 var(--gut) 12px;margin:40px calc(-1 * var(--gut)) 0;scrollbar-width:none}
.quotes::-webkit-scrollbar{display:none}
@media (min-width:900px){.quotes{grid-auto-flow:row;grid-template-columns:repeat(3,1fr);grid-auto-columns:auto;overflow:visible;margin:48px 0 0;padding:0;gap:16px}}
.quotes blockquote{scroll-snap-align:start;background:#0E0E0E;box-shadow:inset 0 0 0 1px var(--rule);border-radius:var(--r);padding:24px;display:grid;gap:14px;align-content:start}
.quotes p{font-size:16px;line-height:1.6;color:var(--text-2)}
.quotes cite{font-style:normal;font-size:14px;color:var(--muted)}
.proof-actions{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;margin-top:32px}

/* ---------- City check: closing rule + one horizontal field (SpaceX contact close) ---------- */
.areas-sec{text-align:center}
.closing-rule{width:1px;height:clamp(96px,14vw,160px);background:var(--text);margin:0 auto 28px}
.areas-sec .head{margin-inline:auto;justify-items:center}
.areas-sec .lede{margin-inline:auto}
.finder{display:grid;gap:10px;max-width:560px;margin:0 auto 56px;text-align:left}
.finder label{font-size:15px;font-weight:600;color:var(--text-2)}
.finder .row{display:grid;grid-template-columns:1fr auto;gap:8px}
.finder input{font:400 17px/1.3 var(--font);height:50px;padding:0 14px;border:0;border-radius:var(--r);background:var(--input);color:var(--text);box-shadow:inset 0 0 0 1px #3A3A3A;width:100%}
.finder input::placeholder{color:#767676}
.finder input:focus{outline:none;box-shadow:inset 0 0 0 2px var(--focus)}
.finder-out{font-size:16px;min-height:1.6em;color:var(--text-2)}
.finder-out a{color:var(--text);font-weight:600}
.areas{display:grid;gap:32px;text-align:left}
@media (min-width:900px){.areas{grid-template-columns:1fr 1fr;gap:64px}}
.county h3{font-size:15px;font-weight:600;color:var(--text-2);padding-bottom:12px;margin-bottom:14px;border-bottom:1px solid var(--rule)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips a{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border-radius:var(--r);border:1px solid var(--rule);text-decoration:none;font-size:15px;color:var(--text);transition:background-color .5s var(--ease),color .5s var(--ease),border-color .5s var(--ease)}
.chips a:hover{background:var(--text);color:#000;border-color:var(--text)}
.all-cities{margin-top:32px;border-top:1px solid var(--rule);text-align:left}
.all-cities summary{cursor:pointer;list-style:none;padding:18px 0;display:flex;justify-content:space-between;font-weight:600}
.all-cities summary::-webkit-details-marker{display:none}
.all-cities summary::after{content:"+";font-size:22px;line-height:1;font-weight:300}
.all-cities[open] summary::after{content:"−"}
.all-cities .cols{display:grid;gap:20px;padding-bottom:12px}
@media (min-width:700px){.all-cities .cols{grid-template-columns:1fr 1fr}}
.all-cities ul{columns:2;column-gap:16px}
.all-cities a{display:inline-block;padding:6px 0;font-size:15px;color:var(--text-2);text-decoration:none}
.all-cities a:hover{color:var(--text)}

/* ---------- Quote form (same fields as the Atrax / GorillaDesk form) ---------- */
.quote{display:grid;gap:40px}
@media (min-width:960px){.quote{grid-template-columns:.8fr 1.2fr;gap:80px}}
.contact-list{display:grid;margin-top:28px;border-top:1px solid var(--rule)}
.contact-list li{display:grid;gap:4px;padding:16px 0;border-bottom:1px solid var(--rule)}
.contact-list .micro{color:var(--muted)}
.contact-list a,.contact-list b{font-weight:700;font-stretch:80%;font-size:28px;line-height:1.1;text-decoration:none;color:var(--text)}
.contact-list a{display:inline-flex;align-items:center;min-height:44px}
.form{display:grid;gap:18px}
@media (min-width:640px){.form{grid-template-columns:1fr 1fr}}
.form .full{grid-column:1/-1}
.field{display:grid;gap:8px}
.field label{font-size:15px;font-weight:600;color:var(--text-2)}
.field input,.field textarea{font:400 17px/1.3 var(--font);border:0;border-radius:var(--r);padding:13px 14px;min-height:50px;width:100%;background:var(--input);color:var(--text);box-shadow:inset 0 0 0 1px #3A3A3A}
.field textarea{min-height:120px;resize:vertical}
.field input:focus,.field textarea:focus{outline:none;box-shadow:inset 0 0 0 2px var(--focus)}
.field[data-invalid] input,.field[data-invalid] textarea{box-shadow:inset 0 0 0 2px var(--text)}
.field .err{font-size:14px;font-weight:700}
.consent{font-size:14px;color:var(--muted)}
.form .btn{width:100%;background:var(--blue);border-color:var(--blue);color:#fff}
.form .btn:hover{background:var(--text);border-color:var(--text);color:#000}
.form-msg{padding:14px 0;border-top:1px solid var(--text);font-weight:600}

/* ---------- FAQ: dark 4px rows, 16px apart (MasterClass) ---------- */
.faq-wrap{max-width:820px}
.faq{display:grid;gap:16px}
.faq details{background:var(--panel);border-radius:var(--r)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:60px;padding:16px 20px;font-weight:600;font-size:17px;color:#FFFFFF}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:9px;height:9px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-3px);transition:transform .4s var(--ease)}
.faq details[open] summary::after{transform:rotate(-135deg) translateY(-2px)}
.faq details p{padding:0 20px 20px;color:var(--text-2);max-width:68ch}

/* ---------- Footer ---------- */
.site-foot{background:#000;color:var(--muted);border-top:1px solid var(--rule)}
.site-foot .wrap{padding-block:64px 28px;display:grid;gap:40px}
.foot-call{display:grid;gap:6px;text-decoration:none;color:var(--text);padding-bottom:36px;border-bottom:1px solid var(--rule)}
.foot-call .micro{color:var(--muted)}
.foot-call .display{font-size:clamp(3rem,13vw,7.5rem);font-weight:300;font-stretch:80%;letter-spacing:-.02em}
.foot-cols{display:grid;gap:32px}
.foot-cols .two{columns:2;column-gap:20px}
@media (min-width:900px){.foot-cols{grid-template-columns:1.1fr 1.6fr .8fr .8fr}}
.foot-cols h2{color:var(--text-2);margin-bottom:12px;font-size:14px}
.foot-cols a{color:var(--muted);text-decoration:none;display:inline-block;padding:5px 0;font-size:15px;transition:color .3s}
.foot-cols a:hover{color:var(--text)}
.foot-brand img{width:108px;height:108px}
.foot-brand address{font-style:normal;margin-top:14px;display:grid;gap:2px;font-size:15px;color:var(--text-2)}
.foot-legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;border-top:1px solid var(--rule);padding-top:20px;font-size:13px}
.site-foot .micro{color:var(--muted)}

/* ---------- Phone call bar: the only fixed element on the phone ---------- */
.action-bar{position:fixed;left:0;right:0;bottom:0;z-index:90;display:grid;grid-template-columns:1.3fr 1fr 1fr;background:rgba(0,0,0,.92);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-top:1px solid var(--rule);padding-bottom:env(safe-area-inset-bottom,0px)}
.action-bar a{min-height:58px;display:flex;align-items:center;justify-content:center;gap:8px;font:600 15px/1 var(--font);text-decoration:none;color:var(--text)}
.action-bar a+a{box-shadow:inset 1px 0 0 var(--rule)}
.action-bar a:first-child{background:var(--blue);color:#fff}
.action-bar svg{width:16px;height:16px}
@media (min-width:960px){.action-bar{display:none}}

/* ---------- Motion: reveals and scroll-linked zoom stay subordinate to the text ---------- */
.js .reveal{opacity:0;transform:translateY(22px);transition:opacity 1s var(--ease),transform 1s var(--ease);transition-delay:var(--d,0ms)}
.js .reveal.in{opacity:1;transform:none}
.js .reveal-3d{opacity:0;transform:perspective(900px) translateY(30px) rotateX(7deg);transform-origin:50% 100%;transition:opacity 1.1s var(--ease),transform 1.1s var(--ease);transition-delay:var(--d,0ms)}
.js .reveal-3d.in{opacity:1;transform:none}
@supports (animation-timeline: view()){
  .chapter .media img{animation:zoomout linear both;animation-timeline:view();animation-range:entry 0% exit 100%}
  @keyframes zoomout{from{transform:scale(1.18)}to{transform:scale(1)}}
  .hero .media{animation:par linear both;animation-timeline:scroll(root);animation-range:0 100svh}
  @keyframes par{to{transform:translateY(16%)}}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .reveal,.js .reveal-3d{opacity:1;transform:none}
}
/* preview build only: keep the review ribbon visible above the transparent header */
.preview-ribbon{position:relative;z-index:150}
.preview-ribbon ~ .site-head{top:28px}
.scrolled .preview-ribbon ~ .site-head{top:0}

/* ---------- v7 fixes after the first render ----------
   Phone: the van graphics (logo, phone number) fought the headline, and the light kitchen photo
   washed out the chapter text. On phones the photo now owns the top of each stage and dissolves
   into black; the text group sits on black below it (SpaceX dissolve, no text over busy graphics). */
.textlink svg{width:16px;height:16px;flex:none}
.textlink{white-space:nowrap}
@media (max-width:959px){
  .hero .media{bottom:auto;height:60%}
  .hero .media::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(0,0,0,.55) 0%,rgba(0,0,0,0) 18%,rgba(0,0,0,0) 42%,#000 100%)}
  .hero::after{display:none}
  .hero .media img{object-position:50% 28%}
  .hero h1{font-size:clamp(2.5rem,10.4vw,4rem)}
  .hero .btn-row .btn{padding:0 16px}
  .chapter{display:block;min-height:0}
  .chapter .media{position:relative;inset:auto;height:62svh;min-height:380px;max-height:600px;overflow:hidden}
  .chapter .media::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(0,0,0,0) 38%,#000 100%)}
  .chapter::after{display:none}
  .chapter .copy{margin-top:-88px;padding-bottom:72px}
}
@media (min-width:960px){
  .hero::after{background:linear-gradient(rgba(0,0,0,0) 50%,#000 100%),linear-gradient(90deg,rgba(0,0,0,.9) 0%,rgba(0,0,0,.72) 34%,rgba(0,0,0,0) 62%)}
}
@media (max-width:959px){.chapter[aria-labelledby="gc-title"] .media img{object-position:78% 60%}}
@media (min-width:960px){.hero::after{background:linear-gradient(rgba(0,0,0,0) 50%,#000 100%),linear-gradient(90deg,rgba(0,0,0,.92) 0%,rgba(0,0,0,.86) 36%,rgba(0,0,0,.3) 52%,rgba(0,0,0,0) 64%)}}
.preview-ribbon{height:28px;display:flex;align-items:center;justify-content:center;overflow:hidden;padding-block:0}
@media (max-width:959px){.preview-ribbon{height:46px;font-size:11px;line-height:1.3}.preview-ribbon ~ .site-head{top:46px}}
@media (min-width:960px){.hero::after{background:linear-gradient(rgba(0,0,0,0) 50%,#000 100%),linear-gradient(90deg,rgba(0,0,0,.92) 0%,rgba(0,0,0,.86) 40%,rgba(0,0,0,.35) 54%,rgba(0,0,0,0) 66%)}}
/* Phone opening as a stacked stage: photo block, then the title stack on black.
   Works on short phones (320x640) where a bottom-aligned stack would climb into the van graphics. */
@media (max-width:959px){
  .hero{display:block;height:auto;min-height:0;max-height:none}
  .hero .media{position:relative;inset:auto;height:clamp(300px,56svh,520px)}
  .hero .media::after{background:linear-gradient(rgba(0,0,0,.55) 0%,rgba(0,0,0,0) 20%,rgba(0,0,0,0) 45%,#000 100%)}
  .hero-copy{margin-top:-64px;padding-bottom:48px}
}

/* ---------- Brand Book pass (1NationUp, Oct 2024) ----------
   Logo: official Horizontal Variant, Full Color for dark backgrounds, transparent PNG, scaled proportionally only.
   Clear space around it is at least the height of the monogram's M (Safe Zone, p.5).
   Over photos the Brand Book asks for a 10-40% black layer (p.11): the header carries a 40% layer.
   Palette (p.8): #FFFFFF, #000000, #213A8F only; greys are neutral tints of black/white. */
.site-head{background:linear-gradient(rgba(0,0,0,.4) 0%,rgba(0,0,0,.4) 60%,rgba(0,0,0,0) 100%)}
.brand{margin-right:18px}
@media (max-width:959px){.brand img{height:34px}.hero .media::after{background:linear-gradient(rgba(0,0,0,0) 45%,#000 100%)}}
@media (max-width:359px){.brand img{height:28px}.brand{margin-right:10px}}
.foot-brand img{width:120px;height:auto}
/* Header spacing keeps the logo's clear space (about half the logo height) on every phone */
@media (max-width:959px){.site-head .wrap{gap:0}.brand{margin-right:18px}}
@media (min-width:960px){.site-head .wrap{min-height:80px}}
@media (max-width:359px){.site-head .wrap{padding-left:16px;padding-right:16px}.brand{margin-right:14px}.head-cta .lbl{display:inline}.head-cta .num{display:none}.head-cta .btn{padding:0 16px}}
.foot-brand address{margin-top:28px}
@media (min-width:360px) and (max-width:373px){.head-cta .lbl{display:inline}.head-cta .num{display:none}.head-cta .btn{padding:0 16px}}

/* ======================================================================
   Inner pages (services, locations, blog, about, hubs) — same v7.1 system:
   black stage, photo that dissolves into black, title stack low-left,
   specification rows instead of boxes, blue only on the call/quote action.
   ====================================================================== */
.page-hero{position:relative;background:#000;overflow:hidden}
.page-hero .media{position:relative;height:clamp(280px,48svh,460px)}
.page-hero .media img{width:100%;height:100%;object-fit:cover;object-position:50% 40%;animation:kb 2.4s var(--ease) both}
.page-hero .media::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(0,0,0,.4) 0%,rgba(0,0,0,0) 22%,rgba(0,0,0,0) 45%,#000 100%)}
.page-hero .copy{position:relative;z-index:2;display:grid;gap:16px;justify-items:start;max-width:var(--wrap);margin:-72px auto 0;padding:0 var(--gut) clamp(48px,7vw,80px)}
.page-hero .copy>*{max-width:640px}
.page-hero h1{font-size:clamp(2.4rem,9.6vw,4.4rem);line-height:.96}
.page-hero .lede{font-size:17px}
.page-hero .btn-row{margin-top:6px}
@media (min-width:960px){
  .page-hero{min-height:min(78svh,760px);display:grid;align-items:end}
  .page-hero .media{position:absolute;inset:0;height:auto}
  .page-hero .media::after{background:linear-gradient(rgba(0,0,0,.4) 0%,rgba(0,0,0,0) 18%,rgba(0,0,0,0) 52%,#000 100%),linear-gradient(90deg,rgba(0,0,0,.9) 0%,rgba(0,0,0,.8) 38%,rgba(0,0,0,.3) 56%,rgba(0,0,0,0) 70%)}
  .page-hero .copy{margin:0 auto;padding-top:140px;padding-bottom:clamp(56px,8vh,96px);width:100%}
}
.page-hero.plain .copy{margin-top:0;padding-top:clamp(120px,16vw,200px)}
.page-hero.plain{min-height:0;border-bottom:1px solid var(--rule)}
.crumbs{display:flex;flex-wrap:wrap;gap:6px 10px;font-size:14px;color:var(--muted)}
.crumbs a{color:var(--text-2);text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
.crumbs a:hover{color:var(--text)}
.crumbs span[aria-current]{display:inline-flex;align-items:center;min-height:44px;color:var(--muted)}

/* Article: readable column + a sticky contact column on wide screens */
.article{display:grid;gap:56px}
@media (min-width:1100px){.article{grid-template-columns:minmax(0,760px) 300px;justify-content:space-between;gap:80px}}
.prose{max-width:760px;font-size:17px;line-height:1.7;color:var(--text-2)}
.prose>*+*{margin-top:18px}
.prose h2{font-weight:700;font-stretch:80%;font-size:clamp(1.9rem,6vw,2.6rem);line-height:1.05;color:var(--text);margin-top:56px;text-wrap:balance}
.prose h2:first-child{margin-top:0}
.prose h3{font-weight:700;font-stretch:84%;font-size:clamp(1.3rem,4.4vw,1.6rem);line-height:1.15;color:var(--text);margin-top:36px}
.prose h4{font-weight:700;font-size:18px;color:var(--text);margin-top:28px}
.prose a{color:var(--text);text-decoration:underline;text-decoration-color:var(--edge);text-underline-offset:3px}
.prose a:hover{text-decoration-color:var(--text)}
.prose strong{color:var(--text);font-weight:600}
.prose ul,.prose ol{border-top:1px solid var(--rule)}
.prose li{position:relative;padding:14px 0 14px 28px;border-bottom:1px solid var(--rule)}
.prose ul>li::before{content:"";position:absolute;left:2px;top:1.35em;width:6px;height:6px;background:var(--text)}
.prose ol{counter-reset:n}
.prose ol>li{counter-increment:n;padding-left:44px}
.prose ol>li::before{content:counter(n,decimal-leading-zero);position:absolute;left:0;top:14px;font-weight:300;font-stretch:80%;font-size:20px;line-height:1.3;color:var(--text);font-variant-numeric:tabular-nums}
.prose table{width:100%;border-collapse:collapse;font-size:15px}
.prose td,.prose th{border-bottom:1px solid var(--rule);padding:12px 8px;text-align:left;vertical-align:top}
.aside{display:none}
@media (min-width:1100px){.aside{display:block}.aside .box{position:sticky;top:110px;display:grid;gap:14px;padding:28px 0;border-top:1px solid var(--text)}}
.aside .box .display{font-size:30px}
.aside .box p{font-size:15px;color:var(--text-2)}
.aside .btn{width:100%}

/* Call band */
.cta-band{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.cta-band .wrap{display:grid;gap:24px;padding-block:clamp(56px,8vw,96px)}
@media (min-width:900px){.cta-band .wrap{grid-template-columns:1fr auto;align-items:end}}
.cta-band h2{font-size:clamp(2.2rem,7.6vw,3.6rem)}

/* Card grids for hubs (services, blog) and related rails */
.grid-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
@media (min-width:700px){.grid-cards{grid-template-columns:repeat(3,1fr);gap:16px}}
@media (min-width:1100px){.grid-cards{grid-template-columns:repeat(4,1fr)}}
.grid-cards .card{aspect-ratio:4/5}
@media (max-width:699px){.grid-cards .card .name{font-size:19px}.grid-cards .card .desc{display:none}.grid-cards .card .txt{left:12px;right:12px;bottom:12px}}
.card .label{font-size:12px;font-weight:600;letter-spacing:.04em;color:var(--text-2)}
.posts .card{aspect-ratio:4/3}
@media (max-width:699px){.posts.grid-cards{grid-template-columns:1fr}.posts .card .desc{display:block}}

/* Neighborhoods + map */
.nb{display:grid;gap:40px}
@media (min-width:960px){.nb{grid-template-columns:1fr 1fr;gap:64px;align-items:start}}
.nb .chips span{display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border-radius:var(--r);border:1px solid var(--rule);font-size:15px;color:var(--text)}
.nb .map{border-radius:var(--r);overflow:hidden;aspect-ratio:4/3;background:#0E0E0E;box-shadow:inset 0 0 0 1px var(--rule)}
.nb .map iframe{width:100%;height:100%;border:0;display:block}

/* Team */
.team{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;max-width:820px}
@media (min-width:700px){.team{gap:16px}}
.team figure{display:grid;gap:12px}
.team .ph{border-radius:var(--r);overflow:hidden;aspect-ratio:4/5;background:#0E0E0E}
.team img{width:100%;height:100%;object-fit:cover}
.team figcaption b{display:block;font-weight:700;font-stretch:80%;font-size:24px;color:var(--text)}
.team figcaption span{font-size:14px;color:var(--muted)}

.section.tight{padding-block:clamp(48px,7vw,88px)}
.section.rule{border-top:1px solid var(--rule)}
.faq-wrap{max-width:var(--wrap)}
.faq-wrap .faq,.faq-wrap .head{max-width:820px}
.faq .ans{padding:0 20px 20px;color:var(--text-2);max-width:68ch}
.faq .ans>*+*{margin-top:12px}
.faq .ans a{color:var(--text)}
.faq .ans ul,.faq .ans ol{padding-left:20px;list-style:disc}
.faq .ans ol{list-style:decimal}
.faq .ans li+li{margin-top:6px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.field select{font:400 17px/1.3 var(--font);border:0;border-radius:var(--r);padding:13px 14px;min-height:50px;width:100%;background:var(--input);color:var(--text);box-shadow:inset 0 0 0 1px #3A3A3A;appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--text) 50%),linear-gradient(135deg,var(--text) 50%,transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 15px) 50%;background-size:5px 5px;background-repeat:no-repeat}
.field select:focus{outline:none;box-shadow:inset 0 0 0 2px var(--focus)}
.stages{display:grid;gap:0;border-top:1px solid var(--rule);margin-top:8px}
.stages li{display:grid;grid-template-columns:56px 1fr;gap:16px;padding:22px 0;border-bottom:1px solid var(--rule)}
.stages .n{font-weight:300;font-stretch:80%;font-size:2.4rem;line-height:.9}
.stages h3{font-weight:700;font-stretch:80%;font-size:24px;line-height:1.1;color:var(--text)}
.stages p{margin-top:6px;color:var(--text-2);font-size:16px}
.prose ol.stages{counter-reset:none;border-top:1px solid var(--rule)}
.prose ol.stages>li{display:grid;grid-template-columns:56px 1fr;gap:16px;padding:22px 0;border-bottom:1px solid var(--rule)}
.prose ol.stages>li::before{content:none}
.prose ol.stages h3{margin-top:0}
.aside .box a.display{display:inline-flex;align-items:center;min-height:44px}
/* reviews, blog list, article extras */
.review-list{display:grid;gap:10px}
@media(min-width:760px){.review-list{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.review-list{grid-template-columns:repeat(3,1fr)}}
.review-list blockquote{margin:0;padding:24px;border:1px solid var(--rule);border-radius:var(--r);background:#0B0B0B;display:grid;gap:12px;align-content:start}
.review-list blockquote p:not(.micro){font-size:17px;line-height:1.5;color:var(--text)}
.review-list .micro{color:var(--muted)}
.review-list cite{font-style:normal;font-size:14px;color:var(--text-2)}
.post-list{list-style:none;padding:0;margin:0;border-top:1px solid var(--rule)}
.post-list li{border-bottom:1px solid var(--rule)}
.post-list a{display:grid;gap:8px;padding:24px 0;text-decoration:none;color:var(--text)}
.post-list time{font-size:14px;color:var(--muted)}
.post-list .t{font-weight:700;font-stretch:80%;font-size:clamp(24px,4vw,34px);line-height:1.1;text-wrap:balance}
.post-list .d{color:var(--text-2);max-width:62ch}
.post-list .go{display:inline-flex;align-items:center;gap:8px;font-weight:700;min-height:44px}
.post-list a:hover .t{text-decoration:underline;text-underline-offset:4px}
.prose .byline,.prose .source{font-size:15px;color:var(--muted)}
.page-hero.plain .lede time{color:var(--text-2)}
.page-hero.plain .copy{margin-top:0;padding-top:calc(76px + clamp(24px,6vw,72px))}
#ts-box{min-height:65px}
.contact-list a,.contact-list b{overflow-wrap:anywhere}
@media(max-width:380px){.contact-list a,.contact-list b{font-size:22px}}
/* GorillaDesk portal widget: keep its button above the mobile call bar */
@media (max-width:959px){#gorilladesk-portal-widget-menu-icon{bottom:calc(70px + env(safe-area-inset-bottom,0px))!important;right:12px!important}#gorilladesk-portal-widget-main{bottom:calc(132px + env(safe-area-inset-bottom,0px))!important}}
/* At a glance */
.glance{padding-block:clamp(48px,7vw,88px)}
.glance-grid{display:grid;gap:28px}
@media(min-width:960px){.glance-grid{grid-template-columns:5fr 7fr;align-items:start;gap:56px}}
.glance .spec li{font-size:16px;align-items:flex-start}
.glance .spec li span:first-child{flex:0 0 38%}
.glance .spec li span:last-child{flex:1}
.quotes .micro{color:var(--muted)}
/* city page cards */
.pest-cards{display:grid;gap:10px}
@media(min-width:760px){.pest-cards{grid-template-columns:repeat(2,1fr)}}
.pest-cards li{background:#0E0E0E;box-shadow:inset 0 0 0 1px var(--rule);border-radius:var(--r);padding:22px;display:grid;gap:8px;align-content:start}
.pest-cards h3{font-weight:700;font-stretch:80%;font-size:24px;line-height:1.1}
.pest-cards p{color:var(--text-2);font-size:16px}
.pest-cards a{color:var(--text);font-weight:600;display:inline-flex;align-items:center;gap:6px;min-height:44px}
.svc-grid{display:grid;grid-template-columns:1fr;gap:0;border-top:1px solid var(--rule)}
@media(min-width:760px){.svc-grid{grid-template-columns:repeat(2,1fr);column-gap:40px}}
.svc-grid a{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:60px;border-bottom:1px solid var(--rule);text-decoration:none;color:var(--text);font-weight:700;font-stretch:80%;font-size:20px}
.svc-grid a:hover{color:var(--text-2)}
.svc-grid a span{font-weight:400;font-stretch:100%;font-size:14px;color:var(--muted)}
.chips.static span{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border-radius:var(--r);border:1px solid var(--rule);color:var(--text-2);font-size:15px}
.pest-cards a svg{width:16px;height:16px;flex:none}

.page-hero .media picture,.chapter .media picture{display:block;width:100%;height:100%}
.work img{aspect-ratio:4/5}