/* =========================================================================
   PEST PRO — The Pest Professionals · San Antonio, TX
   Custom design system — editorial field-service / deep pine + venom lime
   No framework. Hand-crafted. Mobile-first.
   ========================================================================= */

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
img,svg,iframe{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{font:inherit;cursor:pointer}

/* ---------- Tokens ---------- */
:root{
  --pine:#0d2a1b;          /* deep pine - dominant dark */
  --pine-2:#123a26;
  --pine-3:#1c4d34;
  --cream:#f6f1e7;         /* warm paper */
  --cream-2:#efe7d6;
  --lime:#c2f04a;          /* signature venom accent */
  --lime-deep:#a6d62f;
  --clay:#d9744a;          /* texas warmth secondary */
  --ink:#142019;
  --muted:#5d6b62;
  --line:rgba(13,42,27,.12);
  --line-light:rgba(246,241,231,.16);
  --r:18px;                 /* radius */
  --shadow:0 24px 60px -20px rgba(13,42,27,.35);
  --shadow-sm:0 10px 30px -14px rgba(13,42,27,.30);
  --maxw:1180px;
  --ff-display:"Bricolage Grotesque",Georgia,serif;
  --ff-body:"Hanken Grotesk",system-ui,sans-serif;
}

/* ---------- Base ---------- */
body{
  font-family:var(--ff-body);
  background:var(--cream);
  color:var(--ink);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
.container{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(1.1rem,4vw,2rem)}
h1,h2,h3,h4{font-family:var(--ff-display);font-weight:800;line-height:1.02;letter-spacing:-.02em}
section{position:relative}

/* grain overlay utility */
.grain::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E");
}

/* contour line texture (hill country) */
.contour::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.14;
  background-image:radial-gradient(circle at 80% 20%, transparent 0 38%, var(--lime) 38% 38.4%, transparent 38.4%),
                   radial-gradient(circle at 80% 20%, transparent 0 30%, rgba(194,240,74,.6) 30% 30.3%, transparent 30.3%),
                   radial-gradient(circle at 80% 20%, transparent 0 22%, rgba(194,240,74,.4) 22% 22.3%, transparent 22.3%);
}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:.6rem;border:0;border-radius:999px;
  padding:.95rem 1.7rem;font-weight:700;font-size:1rem;transition:transform .18s ease,box-shadow .18s ease,background .18s ease;white-space:nowrap}
.btn:hover{transform:translateY(-2px)}
.btn-lime{background:var(--lime);color:var(--pine);box-shadow:0 10px 26px -10px rgba(166,214,47,.8)}
.btn-lime:hover{background:#cff760;box-shadow:0 16px 34px -10px rgba(166,214,47,.9)}
.btn-pine{background:var(--pine);color:var(--cream)}
.btn-pine:hover{background:var(--pine-2)}
.btn-ghost{background:transparent;border:1.5px solid currentColor}
.btn-lg{padding:1.1rem 2rem;font-size:1.08rem}

/* ---------- Top bar ---------- */
.topbar{background:var(--pine);color:var(--cream);font-size:.84rem;letter-spacing:.01em}
.topbar .container{display:flex;justify-content:space-between;align-items:center;padding-block:.5rem;gap:1rem}
.topbar a{font-weight:600}
.topbar .lime{color:var(--lime)}
@media(max-width:760px){.topbar .hide-sm{display:none}}

/* ---------- Nav ---------- */
.nav{position:sticky;top:0;z-index:50;background:rgba(246,241,231,.85);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav .container{display:flex;align-items:center;justify-content:space-between;padding-block:.9rem}
.brand{display:flex;align-items:center;gap:.55rem;font-family:var(--ff-display);font-weight:800;font-size:1.4rem;letter-spacing:-.02em}
.brand .mark{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:var(--pine);color:var(--lime);font-size:1.2rem;box-shadow:var(--shadow-sm)}
.brand .pro{color:var(--pine)}
.nav-links{display:flex;align-items:center;gap:.3rem}
.nav-links a:not(.btn){padding:.5rem .85rem;border-radius:999px;font-weight:600;font-size:.97rem;color:var(--ink);transition:background .15s,color .15s}
.nav-links a:not(.btn):hover{background:rgba(13,42,27,.07)}
.nav-toggle{display:none;background:var(--pine);color:var(--cream);border-radius:10px;width:44px;height:44px;font-size:1.3rem}
.has-sub{position:relative}
.submenu{position:absolute;top:calc(100% + 8px);left:0;background:var(--cream);border:1px solid var(--line);border-radius:14px;
  box-shadow:var(--shadow);padding:.5rem;min-width:230px;opacity:0;visibility:hidden;transform:translateY(6px);transition:.18s}
.has-sub:hover .submenu{opacity:1;visibility:visible;transform:translateY(0)}
.submenu a{display:block;padding:.6rem .8rem;border-radius:10px;font-weight:600;font-size:.95rem}
.submenu a:hover{background:rgba(13,42,27,.07)}
@media(max-width:920px){
  .nav-toggle{display:grid;place-items:center}
  .nav-links{position:fixed;inset:64px 0 auto 0;flex-direction:column;align-items:stretch;gap:.2rem;
    background:var(--cream);border-bottom:1px solid var(--line);padding:1rem clamp(1.1rem,4vw,2rem) 1.4rem;
    box-shadow:var(--shadow);transform:translateY(-120%);transition:transform .28s ease}
  .nav-links.open{transform:translateY(0)}
  .submenu{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;padding-left:1rem;background:transparent}
  .nav-links .btn{justify-content:center;margin-top:.4rem}
}

/* ---------- Reveal animation ---------- */
@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}
.reveal{animation:rise .7s cubic-bezier(.2,.7,.2,1) both}
.d1{animation-delay:.05s}.d2{animation-delay:.15s}.d3{animation-delay:.25s}.d4{animation-delay:.35s}.d5{animation-delay:.45s}

/* ---------- Hero ---------- */
.hero{background:var(--pine);color:var(--cream);overflow:hidden}
.hero .container{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(2rem,5vw,4rem);align-items:center;
  padding-block:clamp(3.5rem,8vw,6rem)}
.hero .eyebrow{display:inline-flex;align-items:center;gap:.5rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  font-size:.76rem;color:var(--lime);border:1px solid var(--line-light);padding:.45rem .9rem;border-radius:999px;margin-bottom:1.4rem}
.hero h1{font-size:clamp(2.6rem,6.4vw,4.6rem);margin-bottom:1.3rem}
.hero h1 .hl{color:var(--lime);position:relative;white-space:nowrap}
.hero h1 .hl::after{content:"";position:absolute;left:0;right:0;bottom:.08em;height:.14em;background:rgba(194,240,74,.32);border-radius:4px;z-index:-1}
.hero p.lede{font-size:clamp(1.05rem,1.6vw,1.22rem);color:rgba(246,241,231,.82);max-width:40rem;margin-bottom:2rem}
.hero p.lede a{color:var(--lime);font-weight:700}
.hero-actions{display:flex;flex-wrap:wrap;gap:.9rem;margin-bottom:2rem}
.hero-rating{display:flex;align-items:center;gap:.7rem;font-size:.98rem;color:rgba(246,241,231,.8)}
.stars{color:#ffd33d;letter-spacing:2px;font-size:1.1rem}

/* hero side card */
.quote-card{background:linear-gradient(180deg,rgba(28,77,52,.9),rgba(18,58,38,.9));border:1px solid var(--line-light);
  border-radius:24px;padding:1.8rem;box-shadow:var(--shadow);position:relative}
.quote-card h3{font-size:1.25rem;margin-bottom:1.1rem;color:var(--cream)}
.quote-card li{display:flex;gap:.7rem;align-items:flex-start;padding:.45rem 0;color:rgba(246,241,231,.92);font-weight:500}
.quote-card li i{color:var(--lime);font-size:1.15rem;margin-top:.1rem}
/* rotated 5.0 sticker */
.sticker{position:absolute;top:-26px;right:-18px;width:96px;height:96px;border-radius:50%;background:var(--lime);color:var(--pine);
  display:grid;place-content:center;text-align:center;transform:rotate(12deg);box-shadow:var(--shadow);border:3px solid var(--cream);z-index:2}
.sticker b{font-family:var(--ff-display);font-size:1.7rem;line-height:1}
.sticker span{font-size:.62rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase}
@media(max-width:920px){
  .hero .container{grid-template-columns:1fr}
  .sticker{width:80px;height:80px;top:-22px}
}

/* ---------- Marquee trust ---------- */
.marquee{background:var(--lime);color:var(--pine);overflow:hidden;border-block:2px solid var(--pine)}
.marquee-track{display:flex;gap:3rem;white-space:nowrap;padding-block:.75rem;animation:scroll 28s linear infinite;font-family:var(--ff-display);font-weight:800;font-size:1.05rem;letter-spacing:-.01em}
.marquee-track span{display:inline-flex;align-items:center;gap:.7rem}
.marquee-track i{font-size:.7rem}
@keyframes scroll{to{transform:translateX(-50%)}}

/* ---------- Section heads ---------- */
.section{padding-block:clamp(3.5rem,7vw,6rem)}
.kicker{display:inline-block;font-weight:800;text-transform:uppercase;letter-spacing:.14em;font-size:.78rem;color:var(--clay);margin-bottom:.7rem}
.h-xl{font-size:clamp(2rem,4.2vw,3rem)}
.lead{color:var(--muted);font-size:1.08rem;max-width:46rem}

/* ---------- Services (editorial cards) ---------- */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-top:2.6rem}
@media(max-width:900px){.svc-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:580px){.svc-grid{grid-template-columns:1fr}}
.svc{position:relative;background:var(--cream);border:1px solid var(--line);border-radius:var(--r);padding:1.7rem;
  overflow:hidden;transition:transform .2s ease,box-shadow .2s ease,border-color .2s}
.svc::before{content:"";position:absolute;inset:auto -40% -60% auto;width:60%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,var(--lime),transparent 70%);opacity:0;transition:opacity .25s}
.svc:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:var(--pine)}
.svc:hover::before{opacity:.22}
.svc .num{font-family:var(--ff-display);font-size:.85rem;font-weight:800;color:var(--clay);opacity:.7}
.svc .ic{width:56px;height:56px;border-radius:14px;background:var(--pine);color:var(--lime);display:grid;place-items:center;font-size:1.5rem;margin:.5rem 0 1rem;box-shadow:var(--shadow-sm)}
.svc h3{font-size:1.3rem;margin-bottom:.5rem}
.svc p{color:var(--muted);font-size:.98rem;margin-bottom:1rem}
.svc .go{font-weight:800;color:var(--pine);display:inline-flex;align-items:center;gap:.4rem;font-size:.95rem}
.svc:hover .go{color:var(--lime-deep)}
.svc .go i{transition:transform .2s}
.svc:hover .go i{transform:translateX(4px)}

/* ---------- Stats / why (dark) ---------- */
.dark{background:var(--pine);color:var(--cream)}
.dark .kicker{color:var(--lime)}
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4rem);align-items:center}
@media(max-width:900px){.split{grid-template-columns:1fr}}
.dark h2{color:var(--cream)}
.dark .lead{color:rgba(246,241,231,.78)}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.stat{background:rgba(246,241,231,.05);border:1px solid var(--line-light);border-radius:16px;padding:1.4rem}
.stat b{font-family:var(--ff-display);font-size:2.4rem;color:var(--lime);display:block;line-height:1}
.stat span{font-size:.92rem;color:rgba(246,241,231,.78)}
.feat-list{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:1.6rem}
@media(max-width:520px){.feat-list,.stats{grid-template-columns:1fr}}
.feat{display:flex;gap:.7rem;align-items:flex-start}
.feat i{color:var(--lime);font-size:1.3rem;margin-top:.1rem}
.feat b{display:block;font-family:var(--ff-body);font-weight:700}
.feat span{color:rgba(246,241,231,.7);font-size:.9rem}

/* map frame */
.mapframe{border-radius:24px;overflow:hidden;border:1px solid var(--line-light);box-shadow:var(--shadow);aspect-ratio:4/3}
.mapframe iframe{width:100%;height:100%}

/* ---------- Areas ---------- */
.pills{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.8rem;justify-content:center}
.pill{display:inline-flex;align-items:center;gap:.5rem;border:1px solid var(--line);background:var(--cream);
  border-radius:999px;padding:.6rem 1.15rem;font-weight:600;transition:.18s}
.pill:hover{background:var(--pine);color:var(--cream);transform:translateY(-2px)}
.pill i{color:var(--clay)}.pill:hover i{color:var(--lime)}

/* ---------- Reviews ---------- */
.review-wrap{background:var(--cream-2)}
.bigstars{color:#ffc02e;font-size:2rem;letter-spacing:4px}

/* ---------- CTA ---------- */
.cta{background:var(--lime);color:var(--pine);text-align:center;overflow:hidden}
.cta h2{font-size:clamp(2rem,5vw,3.2rem);color:var(--pine)}
.cta p{font-size:1.15rem;color:rgba(13,42,27,.78);margin:.6rem 0 1.6rem}

/* ---------- Footer ---------- */
.footer{background:var(--pine);color:rgba(246,241,231,.74)}
.footer .container{padding-block:clamp(3rem,6vw,4rem) 1.6rem}
.fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:2rem}
@media(max-width:820px){.fgrid{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.fgrid{grid-template-columns:1fr}}
.footer h5{color:var(--cream);font-family:var(--ff-display);font-size:1.05rem;margin-bottom:1rem}
.footer a:hover{color:var(--lime)}
.footer li{margin-bottom:.5rem}
.footer .brand{color:var(--cream);margin-bottom:1rem}
.footer .brand .pro{color:var(--lime)}
.fbar{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.6rem;margin-top:2.2rem;padding-top:1.4rem;
  border-top:1px solid var(--line-light);font-size:.85rem}

/* ---------- Sticky mobile call ---------- */
.callbar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:none}
.callbar a{display:block;text-align:center;padding:1rem;background:var(--lime);color:var(--pine);font-family:var(--ff-display);font-weight:800;font-size:1.1rem}
@media(max-width:920px){.callbar{display:block}body{padding-bottom:60px}}

.center{text-align:center}
.mx-auto{margin-inline:auto}
.mt-cta{margin-top:1.8rem}

/* ============ INNER PAGES (services / areas / about / contact) ============ */
.crumbs{background:var(--cream-2);border-bottom:1px solid var(--line);font-size:.86rem}
.crumbs .container{display:flex;gap:.5rem;align-items:center;padding-block:.7rem;color:var(--muted);flex-wrap:wrap}
.crumbs a{font-weight:600;color:var(--pine)}
.crumbs i{font-size:.7rem;opacity:.6}

.phero{background:var(--pine);color:var(--cream)}
.phero .container{padding-block:clamp(2.5rem,5vw,3.6rem)}
.phero .eyebrow{display:inline-flex;align-items:center;gap:.5rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-size:.74rem;color:var(--lime);margin-bottom:.8rem}
.phero h1{font-size:clamp(2.1rem,4.6vw,3.2rem);max-width:20ch}
.phero p{color:rgba(246,241,231,.82);max-width:46rem;margin-top:.9rem;font-size:1.08rem}
.phero .hero-actions{margin-top:1.5rem}

.wrap{display:grid;grid-template-columns:1fr 340px;gap:clamp(2rem,4vw,3.5rem);align-items:start}
@media(max-width:900px){.wrap{grid-template-columns:1fr}}
.prose>*+*{margin-top:1.1rem}
.prose h2{font-size:1.7rem;margin-top:2.4rem}
.prose h3{font-size:1.25rem;margin-top:1.6rem}
.prose p,.prose li{color:#33433b;font-size:1.04rem}
.prose ul{padding-left:0}
.prose ul li{list-style:none;position:relative;padding-left:1.7rem;margin-top:.5rem}
.prose ul li::before{content:"\F26A";font-family:"bootstrap-icons";position:absolute;left:0;top:.05rem;color:var(--lime-deep)}
.prose .callout{background:var(--cream-2);border-left:4px solid var(--lime);border-radius:0 14px 14px 0;padding:1.1rem 1.3rem}
.prose strong{color:var(--ink)}

.sidebar{position:sticky;top:90px;display:grid;gap:1.2rem}
.side-card{border:1px solid var(--line);border-radius:18px;padding:1.4rem;background:var(--cream)}
.side-card.dark{background:var(--pine);color:var(--cream);border:0;box-shadow:var(--shadow)}
.side-card.dark h4{color:var(--cream)}
.side-card h4{font-size:1.15rem;margin-bottom:.8rem}
.side-card .phone{font-family:var(--ff-display);font-size:1.5rem;color:var(--lime);font-weight:800}
.side-list a{display:flex;align-items:center;justify-content:space-between;padding:.6rem 0;border-bottom:1px solid var(--line);font-weight:600;color:var(--ink)}
.side-list a:last-child{border-bottom:0}
.side-list a:hover{color:var(--lime-deep)}
.side-list i{color:var(--clay)}

.faq details{border:1px solid var(--line);border-radius:14px;padding:.2rem 1.1rem;background:var(--cream);margin-top:.8rem}
.faq summary{cursor:pointer;font-family:var(--ff-display);font-weight:800;font-size:1.05rem;padding:.95rem 0;list-style:none;display:flex;justify-content:space-between;gap:1rem;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"\F4FE";font-family:"bootstrap-icons";color:var(--lime-deep);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details[open] summary{border-bottom:1px solid var(--line)}
.faq p{padding:.9rem 0;color:#33433b}

/* ============ IMAGES ============ */
.hero-figure{position:relative;border-radius:24px;overflow:hidden;box-shadow:var(--shadow);border:1px solid var(--line-light)}
.hero-figure img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
.badge-float{position:absolute;left:-14px;bottom:-14px;width:104px;filter:drop-shadow(0 8px 18px rgba(0,0,0,.3))}
.badge-float img{width:100%;border:0}
.figure{position:relative;border-radius:20px;overflow:hidden;box-shadow:var(--shadow-sm);border:1px solid var(--line)}
.figure img{width:100%;height:100%;object-fit:cover;display:block}
.figure-4x3 img{aspect-ratio:4/3}
.figure-16x9 img{aspect-ratio:16/9}
.media-band{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,4vw,3rem);align-items:center}
@media(max-width:820px){.media-band{grid-template-columns:1fr}}
.inline-badge{width:120px;flex:none}

/* hero crop fix — focus on technician */
.hero-figure img{aspect-ratio:3/2;object-position:70% 32%}

/* ============ CONTACT FORM ============ */
.contact-form{display:grid;gap:1rem;margin-top:1.2rem}
.contact-form label{display:grid;gap:.4rem;font-weight:600;color:var(--ink);font-size:.95rem}
.contact-form .form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media(max-width:560px){.contact-form .form-row{grid-template-columns:1fr}}
.contact-form input,.contact-form select,.contact-form textarea{
  font:inherit;font-weight:400;padding:.8rem 1rem;border:1px solid var(--line);border-radius:12px;
  background:var(--cream);color:var(--ink);width:100%}
.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{
  outline:none;border-color:var(--lime-deep);box-shadow:0 0 0 3px rgba(166,214,47,.25)}
.contact-form textarea{resize:vertical}