
/* ============ pestcontrolroswell.com design system ============
   Palette: deep forest green + warm amber on warm cream.
   Type: Fraunces (display) + Manrope (body), loaded via Google Fonts.
   ================================================================ */
:root{
  --forest-950:#07231a; --forest-900:#0a2e21; --forest-800:#0e3b2c;
  --forest-700:#14532d; --forest-600:#1b6a3c; --forest-100:#dcefe2;
  --forest-50:#eef7f0;
  --amber-500:#f5a524; --amber-400:#fbbf24; --amber-600:#d97706;
  --amber-soft:#fdf3e0;
  --cream:#faf7f0; --paper:#fffdf8; --ink:#15211b; --ink-soft:#45544b;
  --line:#e6e0d2; --white:#ffffff;
  --shadow-sm:0 1px 2px rgba(10,46,33,.06),0 4px 14px rgba(10,46,33,.06);
  --shadow-md:0 2px 6px rgba(10,46,33,.07),0 14px 34px rgba(10,46,33,.12);
  --shadow-lg:0 4px 10px rgba(10,46,33,.08),0 28px 60px rgba(10,46,33,.18);
  --r-lg:20px; --r-md:14px; --r-sm:10px;
  --font-d:"Fraunces",Georgia,"Times New Roman",serif;
  --font-b:"Manrope",-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font-b);color:var(--ink);background:var(--cream);
  font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--forest-700);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{font-family:var(--font-d);font-weight:600;line-height:1.15;color:var(--forest-950)}
h1{font-size:clamp(2.1rem,5.2vw,3.4rem);letter-spacing:-.01em}
h2{font-size:clamp(1.6rem,3.4vw,2.3rem);margin-bottom:.5em}
h3{font-size:1.22rem;margin-bottom:.35em}
p{margin-bottom:1em}
.wrap{max-width:1180px;margin:0 auto;padding:0 22px}
.section{padding:72px 0}
.section--white{background:var(--paper)}
.section--green{background:var(--forest-900);color:#e9f4ec}
.section--green h2,.section--green h3{color:#fff}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:.78rem;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;color:var(--amber-600);margin-bottom:14px}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--amber-500);border-radius:2px}
.lede{font-size:1.13rem;color:var(--ink-soft);max-width:46em}
.section--green .lede{color:#c4dacd}
.btn{display:inline-flex;align-items:center;gap:9px;font-weight:800;font-size:1rem;
  padding:14px 26px;border-radius:999px;border:2px solid transparent;cursor:pointer;
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease}
.btn:hover{text-decoration:none;transform:translateY(-2px)}
.btn--amber{background:linear-gradient(180deg,var(--amber-400),var(--amber-500));
  color:#3a2703;box-shadow:0 8px 20px rgba(245,165,36,.35)}
.btn--amber:hover{box-shadow:0 12px 26px rgba(245,165,36,.45)}
.btn--green{background:var(--forest-700);color:#fff;box-shadow:var(--shadow-sm)}
.btn--green:hover{background:var(--forest-600)}
.btn--ghost{background:transparent;border-color:var(--forest-100);color:#fff}
.btn--ghost:hover{border-color:var(--amber-400);color:var(--amber-400)}
.btn svg{width:19px;height:19px;flex:none}
/* header */
.topbar{background:var(--forest-950);color:#cfe5d6;font-size:.86rem;padding:7px 0}
.topbar .wrap{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}
.topbar a{color:var(--amber-400);font-weight:700}
header.site{position:sticky;top:0;z-index:60;background:rgba(255,253,248,.92);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
header.site .wrap{display:flex;align-items:center;gap:26px;padding-top:12px;padding-bottom:12px}
.logo{display:flex;align-items:center;gap:11px;font-family:var(--font-d);font-weight:700;
  font-size:1.28rem;color:var(--forest-950);line-height:1.05}
.logo:hover{text-decoration:none}
.logo .mark{width:42px;height:42px;flex:none;border-radius:12px;display:grid;place-items:center;
  background:linear-gradient(145deg,var(--forest-700),var(--forest-900));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25),var(--shadow-sm)}
.logo .mark svg{width:25px;height:25px}
.logo small{display:block;font-family:var(--font-b);font-size:.68rem;font-weight:800;
  letter-spacing:.16em;text-transform:uppercase;color:var(--amber-600)}
nav.main{margin-left:auto;display:flex;gap:26px;font-weight:700;font-size:.98rem}
nav.main a{color:var(--forest-950);padding:6px 2px;border-bottom:2px solid transparent}
nav.main a:hover,nav.main a[aria-current="page"]{text-decoration:none;border-color:var(--amber-500);color:var(--forest-700)}
.head-call{display:inline-flex;align-items:center;gap:9px;background:var(--forest-800);color:#fff;
  font-weight:800;padding:11px 20px;border-radius:999px;box-shadow:var(--shadow-sm);
  transition:transform .18s ease,background .18s ease}
.head-call:hover{text-decoration:none;background:var(--forest-600);transform:translateY(-1px)}
.head-call svg{width:18px;height:18px}
/* hero */
.hero{position:relative;overflow:hidden;color:#eaf5ee;
  background:
   radial-gradient(1100px 480px at 85% -10%,rgba(245,165,36,.28),transparent 60%),
   radial-gradient(900px 600px at -10% 110%,rgba(27,106,60,.5),transparent 55%),
   linear-gradient(160deg,var(--forest-800) 0%,var(--forest-950) 78%)}
.hero::after{content:"";position:absolute;inset:auto 0 0 0;height:120px;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1440' height='120' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath d='M0 120 L0 84 L120 84 L120 62 L260 62 L260 90 L420 90 L420 48 L470 30 L520 48 L520 78 L700 78 L700 58 L860 58 L860 92 L1030 92 L1030 66 L1180 66 L1180 86 L1310 86 L1310 70 L1440 70 L1440 120 Z' fill='%2307231a' fill-opacity='0.55'/%3E%3C/svg%3E") bottom/cover no-repeat}
.hero .wrap{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr .95fr;
  gap:44px;padding-top:64px;padding-bottom:84px;align-items:center}
.hero h1{color:#fff}
.hero h1 em{font-style:italic;color:var(--amber-400)}
.hero .lede{color:#cfe5d6}
.hero-photo{position:relative;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-lg);
  transform:rotate(1.2deg)}
.hero-photo img{width:100%;height:100%;object-fit:cover;aspect-ratio:3/2.1}
.hero-photo::after{content:"";position:absolute;inset:0;border-radius:var(--r-lg);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0 26px}
.chip{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.22);color:#fff;font-size:.88rem;font-weight:700;
  padding:8px 14px;border-radius:999px;animation:floaty 5s ease-in-out infinite}
.chip svg{width:16px;height:16px;color:var(--amber-400)}
.chip:nth-child(2){animation-delay:.8s}.chip:nth-child(3){animation-delay:1.6s}.chip:nth-child(4){animation-delay:2.4s}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
/* lead form card */
.form-card{background:var(--paper);color:var(--ink);border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg);padding:28px;position:relative}
.form-card::before{content:"";position:absolute;top:0;left:28px;right:28px;height:4px;
  border-radius:0 0 4px 4px;background:linear-gradient(90deg,var(--amber-400),var(--amber-600))}
.form-card h3{font-size:1.35rem}
.form-card p{font-size:.94rem;color:var(--ink-soft);margin-bottom:14px}
.form-card label{display:block;font-size:.82rem;font-weight:800;letter-spacing:.04em;
  text-transform:uppercase;color:var(--forest-800);margin:12px 0 5px}
.form-card input,.form-card select,.form-card textarea{width:100%;font:inherit;font-size:1rem;
  padding:12px 14px;border:1.5px solid var(--line);border-radius:var(--r-sm);background:#fff;
  transition:border-color .15s ease,box-shadow .15s ease}
.form-card input:focus,.form-card select:focus,.form-card textarea:focus{outline:none;
  border-color:var(--amber-500);box-shadow:0 0 0 4px rgba(245,165,36,.18)}
.form-card .btn{width:100%;justify-content:center;margin-top:16px}
.form-note{font-size:.8rem;color:var(--ink-soft);text-align:center;margin:10px 0 0}
/* trust strip */
.trust{background:var(--paper);border-bottom:1px solid var(--line)}
.trust .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;padding-top:26px;padding-bottom:26px}
.trust-item{display:flex;gap:12px;align-items:flex-start}
.trust-item .ic{width:42px;height:42px;flex:none;border-radius:12px;background:var(--amber-soft);
  display:grid;place-items:center}
.trust-item .ic svg{width:22px;height:22px;color:var(--amber-600)}
.trust-item b{display:block;font-size:.97rem;color:var(--forest-950)}
.trust-item span{font-size:.86rem;color:var(--ink-soft)}
/* cards & grids */
.grid{display:grid;gap:22px}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--2{grid-template-columns:repeat(2,1fr)}
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:26px;box-shadow:var(--shadow-sm);
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.card:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);border-color:#d9cfb6}
.card .ic{width:54px;height:54px;border-radius:16px;display:grid;place-items:center;
  background:linear-gradient(145deg,var(--forest-50),var(--forest-100));margin-bottom:15px}
.card .ic svg{width:29px;height:29px;color:var(--forest-700)}
.card p{font-size:.95rem;color:var(--ink-soft);margin-bottom:12px}
.card .more{font-weight:800;font-size:.93rem}
.card .more:hover{color:var(--amber-600)}
a.card{color:inherit;display:block}
a.card:hover{text-decoration:none}
/* pest identifier strip */
.pest-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.pest{background:var(--forest-800);border:1px solid rgba(255,255,255,.09);border-radius:var(--r-lg);
  padding:22px;text-align:center;transition:transform .2s ease,background .2s ease}
.pest:hover{transform:translateY(-4px);background:var(--forest-700)}
.pest svg{width:44px;height:44px;color:var(--amber-400);margin:0 auto 10px}
.pest b{display:block;color:#fff;font-size:1.02rem}
.pest span{font-size:.85rem;color:#bcd6c4}
/* process */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;counter-reset:step}
.step{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:26px;
  position:relative;box-shadow:var(--shadow-sm)}
.step::before{counter-increment:step;content:counter(step);position:absolute;top:-17px;left:22px;
  width:36px;height:36px;border-radius:50%;background:linear-gradient(180deg,var(--amber-400),var(--amber-500));
  color:#3a2703;font-weight:800;display:grid;place-items:center;box-shadow:var(--shadow-sm)}
.step .ic svg{width:26px;height:26px;color:var(--forest-700)}
.step .ic{margin-bottom:10px}
.step p{font-size:.93rem;color:var(--ink-soft);margin:0}
/* table */
table.pests{width:100%;border-collapse:separate;border-spacing:0;background:var(--paper);
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-sm)}
table.pests th,table.pests td{padding:14px 18px;text-align:left;vertical-align:top}
table.pests th{background:var(--forest-800);color:#fff;font-family:var(--font-d);font-weight:600}
table.pests tr:nth-child(even) td{background:var(--forest-50)}
table.pests td:first-child{font-weight:800;color:var(--forest-900);white-space:nowrap}
/* plans */
.plan{position:relative;display:flex;flex-direction:column}
.plan .tag{position:absolute;top:-13px;right:22px;background:linear-gradient(180deg,var(--amber-400),var(--amber-500));
  color:#3a2703;font-size:.75rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  padding:5px 12px;border-radius:999px;box-shadow:var(--shadow-sm)}
.plan ul{list-style:none;margin:0 0 18px}
.plan li{padding:7px 0 7px 28px;position:relative;font-size:.96rem;color:var(--ink-soft)}
.plan li::before{content:"";position:absolute;left:0;top:12px;width:16px;height:16px;border-radius:50%;
  background:var(--forest-100) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314532d' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E") center/10px no-repeat}
.plan .btn{margin-top:auto;justify-content:center}
.plan--featured{border:2px solid var(--amber-500);box-shadow:var(--shadow-md)}
/* guarantee badge block */
.assure{display:grid;grid-template-columns:auto 1fr;gap:28px;align-items:center;
  background:linear-gradient(140deg,var(--forest-800),var(--forest-950));border-radius:24px;
  padding:38px;color:#e9f4ec;box-shadow:var(--shadow-md)}
.assure .seal{width:128px;height:128px;flex:none}
.assure h2{color:#fff;margin-bottom:.3em}
.assure p{color:#c4dacd;margin:0;max-width:44em}
/* FAQ */
.faq{max-width:820px}
details.faq-item{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);
  padding:4px 22px;margin-bottom:12px;box-shadow:var(--shadow-sm)}
details.faq-item summary{cursor:pointer;font-family:var(--font-d);font-weight:600;font-size:1.08rem;
  color:var(--forest-950);padding:14px 0;list-style:none;display:flex;justify-content:space-between;gap:14px}
details.faq-item summary::-webkit-details-marker{display:none}
details.faq-item summary::after{content:"+";color:var(--amber-600);font-size:1.4rem;line-height:1}
details.faq-item[open ] summary::after{content:"–"}
details.faq-item p{color:var(--ink-soft);font-size:.97rem;padding-bottom:14px}
/* CTA band */
.cta-band{background:linear-gradient(120deg,var(--amber-500),var(--amber-600));border-radius:24px;
  padding:40px;display:flex;flex-wrap:wrap;gap:20px;align-items:center;justify-content:space-between;
  box-shadow:var(--shadow-md)}
.cta-band h2{color:#2e1d02;margin:0}
.cta-band p{color:#5b430a;margin:4px 0 0;font-weight:600}
.cta-band .btn{background:var(--forest-950);color:#fff;box-shadow:var(--shadow-md)}
.cta-band .btn:hover{background:var(--forest-800)}
/* article */
.article{max-width:760px}
.article h2{margin-top:1.4em}
.article ul,.article ol{margin:0 0 1.1em 1.3em}
.article li{margin-bottom:.45em}
.crumb{font-size:.86rem;color:var(--ink-soft);margin-bottom:16px}
.crumb a{font-weight:700}
.page-hero{background:linear-gradient(160deg,var(--forest-800),var(--forest-950));color:#eaf5ee;
  padding:56px 0 60px;position:relative;overflow:hidden}
.page-hero::after{content:"";position:absolute;inset:auto 0 0 0;height:70px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1440' height='70' viewBox='0 0 1440 70' preserveAspectRatio='none'%3E%3Cpath d='M0 70 L0 44 L180 44 L180 28 L360 28 L360 50 L560 50 L560 22 L610 8 L660 22 L660 42 L880 42 L880 30 L1080 30 L1080 48 L1260 48 L1260 36 L1440 36 L1440 70 Z' fill='%2307231a' fill-opacity='0.5'/%3E%3C/svg%3E") bottom/cover no-repeat}
.page-hero h1{color:#fff;max-width:16em}
.page-hero .lede{color:#cfe5d6}
.page-hero .wrap{position:relative;z-index:2}
/* footer */
footer.site{background:var(--forest-950);color:#bcd6c4;padding:56px 0 110px;font-size:.95rem}
footer.site .cols{display:grid;grid-template-columns:1.3fr 1fr 1fr 1.1fr;gap:34px}
footer.site h4{font-family:var(--font-d);color:#fff;font-size:1.05rem;margin-bottom:12px}
footer.site a{color:#bcd6c4}
footer.site a:hover{color:var(--amber-400)}
footer.site ul{list-style:none}
footer.site li{margin-bottom:7px}
footer .nap b{color:#fff}
footer .fine{border-top:1px solid rgba(255,255,255,.13);margin-top:36px;padding-top:20px;
  font-size:.82rem;color:#8fb09c}
/* sticky mobile call bar */
.callbar{display:none}
@media (max-width:900px){
  nav.main{display:none}
  .hero .wrap{grid-template-columns:1fr;padding-top:44px}
  .trust .wrap{grid-template-columns:repeat(2,1fr)}
  .grid--3,.grid--2{grid-template-columns:1fr}
  .pest-strip{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:1fr}
  .assure{grid-template-columns:1fr;text-align:left}
  footer.site .cols{grid-template-columns:1fr 1fr}
  .callbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:70;gap:10px;
    padding:10px 12px calc(10px + env(safe-area-inset-bottom));
    background:rgba(7,35,26,.96);backdrop-filter:blur(8px)}
  .callbar a{flex:1;text-align:center;padding:13px;border-radius:999px;font-weight:800}
  .callbar .cb-call{background:linear-gradient(180deg,var(--amber-400),var(--amber-500));color:#3a2703}
  .callbar .cb-form{border:1.5px solid rgba(255,255,255,.35);color:#fff}
}
@media (prefers-reduced-motion:reduce){.chip{animation:none}html{scroll-behavior:auto}}
/* scroll reveal */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}
