/* ============================================================================
   Ocean County Wildlife Control — styles.css
   DESIGN DNA (all 8 axes, distinct from every prior LeadGen site):
   1 layout   = stacked editorial: field-paper hero headline block, "Which critter?"
                identifier strip below the hero, lead form in its own band (NOT form-right,
                NOT form-in-hero, NOT color-block/glass/split-serif).
   2 corners  = 4px + signature DOUBLE-HAIRLINE "field plate" frame on cards; buttons have a
                thickening bottom "ground line" on hover (never translateY).
   3 hero     = light BONE field-paper with a faint TOPOGRAPHIC contour-line motif
                (not dark / photo / color-block / glass / soil-strata / concrete).
   4 type     = Zilla Slab (slab-serif display) + Karla (body); slab-caps eyebrows, no mono,
                no accent-word italic.
   5 rhythm   = 1160px container, 80/60px sections, alternating bone / deep-bone / espresso bands.
   6 parts    = field-guide "plate" cards, tag labels, buttons .btn--gold/.btn--ink/.btn--line/.btn--onink.
   7 signature= "Which critter?" animal identifier (tap a species -> field card of signs -> route).
   8 palette  = goldenrod #C68A1E + espresso #241C15 + bone #F3ECDD + forest-teal #2F5D57
                (gold-primary + espresso + slab-serif + topo-hero = unused; deliberately non-green).
   ========================================================================== */

:root{
  --ink:#241C15; --ink-2:#3A2E22; --ink-soft:#5C4F3D;
  --paper:#F3ECDD; --paper-2:#EADFC8; --paper-3:#E3D5B8;
  --white:#FFFDF6;
  --gold:#C68A1E; --gold-dk:#A5711A; --gold-tint:#F0DFB6;
  --teal:#2F5D57; --teal-dk:#244A45;
  --line:#D8CBB0; --line-2:#C9B994;
  --fg:#241C15; --fg-soft:#5C4F3D;
  --ok:#3E7C58; --warn:#B4571F;
  --container:1160px;
  --plate-frame: 0 0 0 1px var(--line), 0 0 0 4px var(--white), 0 0 0 5px var(--line);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--fg);
  font-family:"Karla",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:"Zilla Slab","Georgia",serif; line-height:1.12; margin:0 0 .5em; font-weight:700; letter-spacing:-.01em;}
h1{font-size:clamp(2.15rem,5vw,3.5rem)}
h2{font-size:clamp(1.7rem,3.4vw,2.5rem)}
h3{font-size:1.28rem}
p{margin:0 0 1rem}
a{color:var(--teal); text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%; display:block}
/* Gutter comes from width+margin, not padding, so an element that is BOTH
   .container and sets its own `padding` shorthand (.hdr, .hero__inner, inline
   hero padding) keeps its 22px side gutter instead of collapsing to the edge. */
.container{width:min(var(--container), 100% - 44px); margin-inline:auto}

.eyebrow{
  font-family:"Zilla Slab",serif; font-weight:600; text-transform:uppercase;
  letter-spacing:.16em; font-size:.78rem; color:var(--gold-dk); margin:0 0 .7rem;
}
.section{padding:80px 0}
.section--tight{padding:56px 0}
.section--bone2{background:var(--paper-2)}
.section--ink{background:var(--ink); color:#EDE4D3}
.section--ink h2,.section--ink h3{color:var(--white)}
.section--ink .eyebrow{color:var(--gold)}
.lead{font-size:1.15rem; color:var(--fg-soft); max-width:60ch}
/* keep body/lead copy legible on every dark (espresso) band
   (scoped to the section header so the light field-card is unaffected) */
.section--ink .lead,.identify__head .lead,.cta-band .lead{color:#DCD1BB}
.identify__head p{color:#E7DECC}

/* ---- buttons: rectangular with a thickening bottom "ground line" ---- */
.btn{
  display:inline-flex; align-items:center; gap:.5rem; justify-content:center;
  font-family:"Zilla Slab",serif; font-weight:600; font-size:1rem; letter-spacing:.01em;
  padding:13px 22px 11px; border-radius:4px; cursor:pointer; border:1.5px solid transparent;
  border-bottom-width:4px; transition:border-color .15s, background .15s, color .15s;
  text-decoration:none; white-space:nowrap;
}
.btn:hover{text-decoration:none}
.btn--gold{background:var(--gold); color:#241C15; border-color:var(--gold-dk)}
.btn--gold:hover{background:#D3982C; border-bottom-color:var(--ink)}
.btn--ink{background:var(--ink); color:var(--white); border-color:#000}
.btn--ink:hover{background:#000; border-bottom-color:var(--gold)}
.btn--line{background:transparent; color:var(--ink); border:1.5px solid var(--ink-2); border-bottom-width:4px}
.btn--line:hover{border-bottom-color:var(--gold); background:#fff8e9}
.btn--onink{background:var(--gold); color:#241C15; border-color:var(--gold-dk)}
.btn--onink:hover{background:#D3982C; border-bottom-color:var(--white)}
.btn--lg{padding:16px 28px 14px; font-size:1.08rem}
.btn--block{display:flex; width:100%}

/* ---- header ---- */
.site-header{position:sticky; top:0; z-index:50; background:rgba(243,236,221,.94);
  backdrop-filter:blur(6px); border-bottom:1.5px solid var(--line-2)}
.hdr{display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:11px 0}
.brand{display:flex; align-items:center; gap:.6rem; text-decoration:none; color:var(--ink)}
.brand:hover{text-decoration:none}
.brand__mark{width:38px; height:38px; flex:none}
.brand__name{font-family:"Zilla Slab",serif; font-weight:700; font-size:1.12rem; line-height:1.02; letter-spacing:-.01em}
.brand__name small{display:block; font-family:"Karla",sans-serif; font-weight:600; font-size:.62rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--gold-dk)}
.nav{display:flex; align-items:center; gap:1.4rem}
.nav a{color:var(--ink); font-weight:600; font-size:.96rem}
.nav a:hover{color:var(--gold-dk); text-decoration:none}
.hdr__phone{display:flex; align-items:center; gap:.8rem}
.hdr__num{font-family:"Zilla Slab",serif; font-weight:700; font-size:1.05rem; color:var(--ink)}
.hdr__num:hover{text-decoration:none; color:var(--gold-dk)}
.nav-toggle{display:none}

/* ---- hero: bone field-paper + topographic contour motif ---- */
.hero{position:relative; overflow:hidden; background:var(--paper);
  border-bottom:1.5px solid var(--line-2)}
.hero::before{content:""; position:absolute; inset:0; opacity:.5; pointer-events:none;
  background-image:
   radial-gradient(120% 90% at 82% -10%, rgba(198,138,30,.14), transparent 60%),
   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='420' viewBox='0 0 560 420'%3E%3Cg fill='none' stroke='%23C9B994' stroke-width='1.1' opacity='.9'%3E%3Cpath d='M-20 60 C120 20 300 120 620 40'/%3E%3Cpath d='M-20 110 C140 70 320 170 620 96'/%3E%3Cpath d='M-20 165 C150 130 330 220 620 150'/%3E%3Cpath d='M-20 222 C150 190 340 275 620 210'/%3E%3Cpath d='M-20 280 C160 250 350 330 620 268'/%3E%3Cpath d='M-20 338 C160 312 360 385 620 330'/%3E%3C/g%3E%3C/svg%3E");
  background-size:cover, 620px 460px; background-position:center;}
.hero__inner{position:relative; padding:74px 0 66px; max-width:760px}
.hero .tag-row{display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1.1rem}
.tag{display:inline-block; font-family:"Zilla Slab",serif; font-weight:600; font-size:.74rem;
  text-transform:uppercase; letter-spacing:.12em; color:var(--teal-dk);
  border:1.5px solid var(--line-2); background:var(--white); padding:5px 11px; border-radius:3px}
.hero h1{margin-bottom:.55rem}
.hero__sub{font-size:1.2rem; color:var(--fg-soft); max-width:56ch; margin-bottom:1.7rem}
.hero__cta{display:flex; flex-wrap:wrap; gap:.8rem; align-items:center}
.hero__note{margin-top:1.1rem; font-size:.92rem; color:var(--fg-soft); display:flex; align-items:center; gap:.5rem}

/* ---- "Which critter?" identifier ---- */
.identify{background:var(--ink); color:#EAE0CE; border-top:4px solid var(--gold)}
.identify__head{max-width:64ch}
.identify__head h2{color:var(--white)}
.critters{display:grid; grid-template-columns:repeat(8,1fr); gap:10px; margin:26px 0 6px}
.critter{background:#2C2318; border:1.5px solid #4A3B29; color:#EAE0CE; border-radius:5px;
  padding:14px 6px 10px; text-align:center; cursor:pointer; font-family:"Zilla Slab",serif;
  font-weight:600; font-size:.86rem; transition:border-color .15s, background .15s; line-height:1.1}
.critter svg{width:34px; height:34px; margin:0 auto 6px; display:block}
.critter:hover{background:#352a1c; border-color:var(--gold)}
.critter[aria-pressed="true"]{background:var(--gold); color:#241C15; border-color:var(--gold-dk)}
.critter[aria-pressed="true"] svg *{stroke:#241C15}
.fieldcard{margin-top:20px; background:var(--paper); color:var(--fg); border-radius:6px;
  box-shadow:var(--plate-frame); padding:24px 26px; display:grid; grid-template-columns:1.3fr 1fr; gap:24px}
.fieldcard[hidden]{display:none}
.fieldcard__tag{font-family:"Zilla Slab",serif; text-transform:uppercase; letter-spacing:.14em;
  font-size:.72rem; color:var(--gold-dk); font-weight:600}
.fieldcard h3{margin:.2rem 0 .5rem; font-size:1.5rem}
.fieldcard ul{margin:.4rem 0 0; padding-left:1.1rem}
.fieldcard li{margin-bottom:.35rem}
.fieldcard__side{border-left:1.5px solid var(--line); padding-left:22px}
.fieldcard__urg{font-weight:700; font-family:"Zilla Slab",serif; margin-bottom:.3rem}
.fieldcard__urg.hi{color:var(--warn)} .fieldcard__urg.md{color:var(--gold-dk)} .fieldcard__urg.lo{color:var(--teal-dk)}

/* ---- generic grids / cards (field-guide "plates") ---- */
.plate{background:var(--white); border-radius:5px; box-shadow:var(--plate-frame); padding:24px}
.grid{display:grid; gap:20px}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr)}
.grid--2{grid-template-columns:repeat(2,1fr)}

.svc{background:var(--white); border-radius:5px; box-shadow:var(--plate-frame); padding:22px 22px 20px;
  display:flex; flex-direction:column}
.svc__ico{width:44px; height:44px; margin-bottom:12px}
.svc h3{margin-bottom:.35rem; font-size:1.2rem}
.svc p{font-size:.97rem; color:var(--fg-soft); margin-bottom:1rem}
.svc a.more{margin-top:auto; font-family:"Zilla Slab",serif; font-weight:600; color:var(--gold-dk); font-size:.95rem}
.svc a.more:hover{text-decoration:none; color:var(--ink)}

.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; counter-reset:s}
.step{position:relative; padding-top:12px}
.step__n{font-family:"Zilla Slab",serif; font-weight:700; font-size:1.05rem; color:#241C15;
  background:var(--gold); width:38px; height:38px; border-radius:50%; display:flex; align-items:center;
  justify-content:center; margin-bottom:12px; border:1.5px solid var(--gold-dk)}
.section--ink .step p{color:#CFC3AD}
.step h3{font-size:1.08rem}

.split{display:grid; grid-template-columns:1.05fr .95fr; gap:40px; align-items:center}
.checklist{list-style:none; margin:0; padding:0}
.checklist li{position:relative; padding:0 0 .7rem 1.9rem; color:var(--fg-soft)}
.checklist li::before{content:""; position:absolute; left:0; top:.42em; width:12px; height:12px;
  border:2px solid var(--gold-dk); border-top:0; border-right:0; transform:rotate(-45deg)}

/* ---- service-area / map ---- */
.area-wrap{display:grid; grid-template-columns:1fr 1fr; gap:36px; align-items:start}
.map-embed{width:100%; border-radius:6px; box-shadow:var(--plate-frame); border:0}
.towns{display:flex; flex-wrap:wrap; gap:9px; margin-top:6px}
.town{font-family:"Zilla Slab",serif; font-weight:600; font-size:.92rem; color:var(--ink);
  background:var(--white); border:1.5px solid var(--line-2); padding:7px 13px; border-radius:4px}
a.town{color:var(--ink)}
a.town:hover{text-decoration:none; border-color:var(--gold-dk); color:var(--gold-dk)}
a.town::after{content:" ›"; color:var(--gold-dk)}

/* ---- FAQ ---- */
.faq details{background:var(--white); border-radius:5px; box-shadow:var(--plate-frame);
  padding:4px 22px; margin-bottom:14px}
.faq summary{font-family:"Zilla Slab",serif; font-weight:600; font-size:1.1rem; padding:16px 0;
  cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:1rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; color:var(--gold-dk); font-size:1.5rem; line-height:1}
.faq details[open] summary::after{content:"–"}
.faq details[open] summary{border-bottom:1.5px solid var(--line)}
.faq p{padding:14px 0 6px; color:var(--fg-soft); margin:0}

/* ---- CTA band ---- */
.cta-band{background:var(--ink); color:#EDE4D3; text-align:center; border-top:4px solid var(--gold)}
.cta-band h2{color:var(--white)}
.cta-band .btn-row{display:flex; gap:.9rem; justify-content:center; flex-wrap:wrap; margin-top:1.4rem}

/* ---- lead form ---- */
.leadband{background:var(--paper-2); border-top:1.5px solid var(--line-2); border-bottom:1.5px solid var(--line-2)}
.leadform{background:var(--white); border-radius:6px; box-shadow:var(--plate-frame); padding:26px}
.leadform h3{font-size:1.4rem; margin-bottom:.2rem}
.leadform .fine{font-size:.9rem; color:var(--fg-soft); margin-bottom:1rem}
.field{margin-bottom:14px}
.field label{display:block; font-family:"Zilla Slab",serif; font-weight:600; font-size:.9rem; margin-bottom:5px}
.field input,.field select,.field textarea{width:100%; padding:12px 13px; border:1.5px solid var(--line-2);
  border-radius:4px; font:inherit; font-size:1rem; background:var(--paper); color:var(--ink)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none; border-color:var(--gold-dk);
  box-shadow:0 0 0 3px var(--gold-tint)}
.form-tcpa{font-size:.8rem; color:#6b5e49; margin:.4rem 0 0; line-height:1.5}
.form-tcpa a{color:var(--teal-dk)}
.hp{position:absolute; left:-9999px}

/* ---- breadcrumb / prose (articles) ---- */
.crumb{font-size:.88rem; color:var(--fg-soft); padding:16px 0 0}
.crumb a{color:var(--teal-dk)}
.prose{max-width:72ch}
.prose h2{margin-top:1.8em} .prose h3{margin-top:1.4em}
.prose ul,.prose ol{margin:0 0 1.1rem; padding-left:1.3rem}
.prose li{margin-bottom:.45rem}
.prose .callout{background:var(--paper-2); border-left:4px solid var(--gold); border-radius:4px;
  padding:16px 20px; margin:1.4rem 0}
.updated{font-size:.86rem; color:var(--fg-soft); text-transform:uppercase; letter-spacing:.08em; font-family:"Zilla Slab",serif}

/* ---- footer ---- */
.site-footer{background:#1C150F; color:#C7BBA4; padding:52px 0 26px; font-size:.95rem}
.site-footer a{color:#D9CBAF}
.foot-grid{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:30px; margin-bottom:30px}
.foot-grid h4{color:var(--white); font-size:1rem; text-transform:uppercase; letter-spacing:.1em}
.foot-list{list-style:none; margin:0; padding:0}
.foot-list li{margin-bottom:.5rem}
.foot-bottom{border-top:1px solid #3a2f22; padding-top:18px; display:flex; justify-content:space-between;
  flex-wrap:wrap; gap:.6rem; font-size:.85rem; color:#9c8f78}
.foot-bottom a{color:#9c8f78}

/* ---- sticky mobile call bar ---- */
.callbar{display:none}

/* ---- responsive ---- */
@media (max-width:900px){
  /* tablet band: drop the phone text so the header row stays on one line
     (the gold "Get help" button still carries the CTA here) */
  .hdr__num{display:none}
  .nav{gap:1.1rem}
  .grid--3,.grid--4{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
  .split,.area-wrap{grid-template-columns:1fr; gap:26px}
  .fieldcard{grid-template-columns:1fr}
  .fieldcard__side{border-left:0; border-top:1.5px solid var(--line); padding-left:0; padding-top:16px}
  .critters{grid-template-columns:repeat(4,1fr)}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  body{font-size:16px}
  .hdr__phone .hdr__num{display:none}
  /* header CTA is redundant with the sticky bottom call bar on mobile */
  .hdr__phone .btn--gold{display:none}
  .nav-toggle{display:inline-flex}
  /* mobile menu = full-width dropdown panel below the header (not inline) */
  .nav{display:none; position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--paper); border-bottom:1.5px solid var(--line-2);
    box-shadow:0 10px 24px rgba(36,28,21,.12); padding:6px 22px 12px}
  .nav[data-open="true"]{display:flex}
  .nav a{padding:14px 2px; border-bottom:1px solid var(--line); font-size:1.05rem}
  .nav a:last-child{border-bottom:0}
  .section{padding:56px 0}
  .grid--3,.grid--4,.grid--2{grid-template-columns:1fr}
  .critters{grid-template-columns:repeat(4,1fr)}
  .hero__inner{padding:52px 0 48px}
  .foot-grid{grid-template-columns:1fr}
  .callbar{display:flex; position:fixed; bottom:0; left:0; right:0; z-index:60;
    background:var(--ink); border-top:3px solid var(--gold); padding:9px 12px; gap:9px}
  .callbar a{flex:1; text-align:center}
  body{padding-bottom:66px}
}