/* Bullfrog Surveying — colors pulled from the logo */
:root{
  --forest:#0c2917;      /* dark forest green (logo outline) */
  --forest-2:#123a22;
  --green:#4e9a2f;       /* bright frog green */
  --green-light:#7cc04a;
  --gold:#f4b223;        /* wordmark gold */
  --orange:#e8892b;      /* sun orange */
  --cream:#fcf4d0;       /* belly cream */
  --cream-2:#fffaf0;
  --ink:#16251b;
  --muted:#4a5a4f;
  --radius:14px;
  --shadow:0 10px 30px rgba(12,41,23,.12);
  --head:"Oswald","Arial Narrow",Impact,sans-serif;
  --body:"Source Sans 3",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{margin:0;font-family:var(--body);font-size:1.075rem;line-height:1.6;color:var(--ink);background:var(--cream-2)}
img{max-width:100%;height:auto;display:block}
a{color:var(--green)}
h1,h2,h3{font-family:var(--head);line-height:1.1;margin:0 0 .5em;letter-spacing:.01em}
h1{font-size:clamp(2.4rem,5.2vw,4rem);text-transform:uppercase;font-weight:700}
h2{font-size:clamp(1.9rem,3.6vw,2.8rem);text-transform:uppercase;font-weight:700;color:var(--forest)}
h3{font-size:1.3rem;font-weight:600;color:var(--forest)}
.wrap{width:min(1160px,100% - 2.5rem);margin-inline:auto}
.skip{position:absolute;left:-999px}.skip:focus{left:1rem;top:1rem;z-index:99;background:#fff;padding:.5rem 1rem}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-family:var(--head);font-weight:600;text-transform:uppercase;letter-spacing:.04em;text-decoration:none;border-radius:999px;padding:.7rem 1.4rem;border:2px solid transparent;cursor:pointer;font-size:1rem;transition:transform .15s,background .15s,box-shadow .15s}
.btn:hover{transform:translateY(-2px)}
.btn-gold{background:var(--gold);color:var(--forest);box-shadow:0 4px 0 #b97c10}
.btn-gold:hover{background:#ffc23d}
.btn-outline{border-color:var(--cream);color:var(--cream)}
.btn-outline:hover{background:var(--cream);color:var(--forest)}
.btn-lg{padding:.95rem 1.8rem;font-size:1.1rem}
.btn svg{width:1.1em;height:1.1em;fill:currentColor}

/* Header */
.site-header{position:sticky;top:0;z-index:50;background:rgba(12,41,23,.96);backdrop-filter:blur(6px);border-bottom:3px solid var(--gold)}
.header-inner{display:flex;align-items:center;gap:1.5rem;min-height:68px}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--gold);font-family:var(--head);font-weight:700;font-size:1.35rem;text-transform:uppercase;letter-spacing:.03em}
.brand img{width:48px;height:48px;object-fit:contain}
.brand em{font-style:normal;color:var(--cream);font-weight:500}
.nav{display:flex;gap:1.4rem;margin-left:auto}
.nav a{color:var(--cream);text-decoration:none;font-family:var(--head);text-transform:uppercase;letter-spacing:.05em;font-size:.95rem}
.nav a:hover{color:var(--gold)}
.header-call{padding:.5rem 1.1rem;box-shadow:none}

/* Hero */
.hero{position:relative;color:var(--cream);overflow:hidden;
  background:
    radial-gradient(circle at 78% 45%,rgba(244,178,35,.28),transparent 42%),
    repeating-radial-gradient(circle at 78% 45%,rgba(124,192,74,.07) 0 2px,transparent 2px 46px),
    linear-gradient(160deg,var(--forest) 0%,#0a2214 60%,#06170d 100%)}
.hero-inner{display:grid;grid-template-columns:1.15fr .85fr;align-items:center;gap:2.5rem;padding:4.5rem 0 5rem}
.eyebrow{font-family:var(--head);text-transform:uppercase;letter-spacing:.14em;font-size:.9rem;color:var(--gold);margin:0 0 .8rem;font-weight:600}
.eyebrow.dark{color:var(--green)}
.hero h1{color:#fff}
.lede{font-size:1.25rem;max-width:36rem;color:#e9eedd}
.cta-row{display:flex;flex-wrap:wrap;gap:1rem;margin:1.8rem 0}
.hero-points{list-style:none;padding:0;margin:0;display:grid;gap:.4rem}
.hero-points li{padding-left:1.6rem;position:relative;color:#dfe8d2}
.hero-points li::before{content:"";position:absolute;left:0;top:.45em;width:.8rem;height:.8rem;background:var(--gold);clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%)}
.hero-logo img{width:100%;max-width:480px;margin-inline:auto;filter:drop-shadow(0 18px 30px rgba(0,0,0,.45))}

/* Sections */
.section{padding:5rem 0}
.section-lede{max-width:44rem;color:var(--muted);font-size:1.15rem;margin-top:-.2rem}
.section-dark{background:var(--forest);color:#e9eedd}
.section-dark h2{color:#fff}
.section-cream{background:var(--cream)}

/* Service cards */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1.25rem;margin-top:2.2rem}
.card{background:#fff;border-radius:var(--radius);padding:1.6rem;box-shadow:var(--shadow);border-top:5px solid var(--green);transition:transform .15s}
.card:hover{transform:translateY(-3px)}
.card p{margin:0;color:var(--muted)}
.icon{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:var(--forest);color:var(--gold);font-size:1.4rem;margin-bottom:1rem}
.card-cta{background:var(--forest);border-top-color:var(--gold);display:flex;flex-direction:column;align-items:flex-start;gap:.8rem}
.card-cta h3{color:var(--gold);margin:0}.card-cta p{color:#dfe8d2}

/* About */
.about{display:grid;grid-template-columns:.8fr 1.2fr;gap:3rem;align-items:center}
.photo-placeholder,.project-img{display:grid;place-items:center;text-align:center;font-family:var(--head);letter-spacing:.04em;border:2px dashed currentColor;border-radius:var(--radius)}
.photo-placeholder{aspect-ratio:4/5;color:var(--gold);background:rgba(255,255,255,.04);padding:1rem}
.big{font-family:var(--head);font-size:1.5rem;color:var(--gold);line-height:1.3}
.facts{list-style:none;padding:0;margin:1.2rem 0 0;display:grid;gap:.35rem}
.facts strong{color:var(--gold);font-weight:600}

/* Service area */
.area{display:grid;grid-template-columns:1.3fr .7fr;gap:3rem;align-items:center}
.county-list{list-style:none;padding:0;margin:1.2rem 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem}
.county-list li{background:#fff;border-left:5px solid var(--green);padding:.65rem 1rem;border-radius:8px;font-weight:600;color:var(--forest);box-shadow:0 2px 8px rgba(12,41,23,.07)}
.area-badge{display:grid;place-items:center}
.compass{position:relative;width:min(280px,70vw);aspect-ratio:1;border-radius:50%;display:grid;place-content:center;text-align:center;background:radial-gradient(circle,var(--gold) 0 55%,var(--orange) 56% 64%,var(--forest) 65%);color:var(--forest);box-shadow:var(--shadow)}
.compass strong{font-family:var(--head);font-size:4.5rem;line-height:1}
.compass span{font-family:var(--head);text-transform:uppercase;letter-spacing:.08em;font-weight:600}
.compass small{font-weight:600}
.compass .n{position:absolute;top:4%;left:50%;transform:translateX(-50%);color:var(--cream);font-size:1.2rem}

/* Projects */
.projects{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:2rem}
.project{background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);padding-bottom:1rem}
.project-img{aspect-ratio:16/10;margin:1rem;color:var(--green);background:var(--cream)}
.project h3,.project p{margin-inline:1.2rem}.project p{color:var(--muted);margin-top:0}

/* Contact */
.contact{display:grid;grid-template-columns:.9fr 1.1fr;gap:3rem;align-items:start}
.contact-big{display:block;font-family:var(--head);font-size:clamp(2rem,4vw,2.8rem);font-weight:700;color:var(--gold);text-decoration:none;margin-top:1.2rem}
.contact-email{color:var(--cream);font-size:1.15rem;word-break:break-all}
.contact-form{background:var(--cream-2);color:var(--ink);padding:2rem;border-radius:var(--radius);box-shadow:0 20px 40px rgba(0,0,0,.25);display:grid;gap:1rem}
.contact-form .row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.contact-form label{display:grid;gap:.35rem;font-weight:600;font-size:.95rem;color:var(--forest)}
.contact-form input,.contact-form select,.contact-form textarea{font:inherit;font-weight:400;padding:.7rem .85rem;border:2px solid #d9dccb;border-radius:10px;background:#fff;color:var(--ink);width:100%}
.contact-form :focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(78,154,47,.25)}
.contact-form button{justify-self:start}
.form-note{font-size:.9rem;color:var(--muted);margin:0}

/* Footer */
.site-footer{background:#06170d;color:#bfcbb6;padding:2.5rem 0;border-top:4px solid var(--gold)}
.footer-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.5rem}
.footer-brand{display:flex;align-items:center;gap:1rem}
.footer-brand img{width:80px;height:auto}
.footer-brand div{display:grid}
.footer-brand strong{font-family:var(--head);text-transform:uppercase;color:var(--gold);font-size:1.2rem;letter-spacing:.04em}
.footer-links{display:grid;gap:.3rem;text-align:right}
.footer-links a{color:var(--cream);text-decoration:none}
.copyright{width:100%;margin:0;font-size:.85rem;border-top:1px solid rgba(255,255,255,.1);padding-top:1rem}

/* Responsive */
@media (max-width:960px){
  .nav{display:none}
  .header-call{margin-left:auto}
  .hero-inner,.about,.area,.contact{grid-template-columns:1fr}
  .hero-inner{padding:2.5rem 0 3.5rem;gap:1.5rem}
  .hero-logo{order:-1}
  .hero-logo img{max-width:300px}
  .projects{grid-template-columns:1fr 1fr}
  .about-photo{max-width:340px}
}
@media (max-width:600px){
  body{font-size:1rem}
  .section{padding:3.5rem 0}
  .brand span{display:none}
  .hero-logo img{max-width:230px}
  .cta-row .btn{width:100%}
  .projects,.contact-form .row{grid-template-columns:1fr}
  .county-list{grid-template-columns:1fr 1fr}
  .contact-form{padding:1.4rem}
  .footer-links{text-align:left}
  .about-photo{max-width:none}
  .photo-placeholder{aspect-ratio:16/9}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.btn,.card{transition:none}}

/* Tweaks after screenshot review */
.photo-placeholder{aspect-ratio:1/1}
a[href^="tel:"]{white-space:nowrap}
@media (max-width:960px){.compass{width:200px}.compass strong{font-size:3.4rem}}

/* Services: main + additional */
.sub-head{font-size:1.05rem;text-transform:uppercase;letter-spacing:.12em;color:var(--green);margin:2.6rem 0 0}
.cards-main{grid-template-columns:repeat(3,1fr);margin-top:1rem}
.card-main{padding:2rem;border-top-width:7px}
.card-main h3{font-size:1.6rem}
.card-main .icon{width:60px;height:60px;font-size:1.7rem;background:var(--gold);color:var(--forest)}
.more-services{list-style:none;padding:0;margin:1rem 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.more-services li{background:#fff;border-left:5px solid var(--gold);border-radius:10px;padding:1rem 1.2rem;box-shadow:0 2px 10px rgba(12,41,23,.07);display:grid;gap:.25rem}
.more-services strong{font-family:var(--head);font-weight:600;color:var(--forest);font-size:1.1rem}
.more-services span{color:var(--muted);font-size:.97rem;line-height:1.5}
.more-services .and-more{background:var(--forest);border-left-color:var(--green)}
.more-services .and-more strong{color:var(--gold)}.more-services .and-more span{color:#dfe8d2}
.more-services .and-more a{color:var(--gold)}
@media (max-width:960px){.cards-main,.more-services{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.cards-main,.more-services{grid-template-columns:1fr}}
.more-services li{align-content:start}
.more-services .and-more{grid-column:span 2}
@media (max-width:600px){.more-services .and-more{grid-column:auto}}
.exp-list{margin:0 0 .5rem;padding:0;list-style:none;display:grid;gap:.4rem}
.exp-list li{position:relative;padding-left:1.6rem}
.exp-list li::before{content:"";position:absolute;left:0;top:.45em;width:.8rem;height:.8rem;background:var(--gold);clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%)}
.about{align-items:start}.about-photo{position:sticky;top:96px}@media (max-width:960px){.about-photo{position:static}}

/* Photos */
.about-photo img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 35%;border-radius:var(--radius);border:4px solid var(--gold);box-shadow:0 20px 40px rgba(0,0,0,.35)}
@media (max-width:960px){.about-photo{max-width:420px}}
@media (max-width:600px){.about-photo img{aspect-ratio:1/1;object-position:50% 40%}}

.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;margin-top:2rem}
.shot{margin:0;background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.shot img{width:100%;aspect-ratio:4/5;object-fit:cover}
.shot-wide{grid-column:1/-1}
.shot-wide img{aspect-ratio:21/8;object-position:50% 60%}
.shot figcaption{font-family:var(--head);font-weight:600;color:var(--forest);padding:.8rem 1.1rem;font-size:1.1rem;border-top:4px solid var(--gold)}
.shot:nth-child(3) img{object-position:50% 65%}
.shot:nth-child(4) img{object-position:30% 40%}
@media (max-width:960px){.gallery{grid-template-columns:1fr 1fr}.shot-wide img{aspect-ratio:16/8}}
@media (max-width:600px){.gallery{grid-template-columns:1fr}.shot-wide img{aspect-ratio:4/3}}

/* Contact: subtle mountain-road photo under heavy brand overlay */
.contact-section{background:
  linear-gradient(rgba(12,41,23,.9),rgba(8,30,17,.94)),
  url("assets/photos/mountain-road-shadow-800.jpg") center 30%/cover no-repeat}
/* Services groups (Oct 30 rev) */
.svc-group{display:grid;grid-template-columns:1fr 2fr;gap:1rem;margin-top:1rem;align-items:stretch}
.svc-group .more-services{margin:0}
.more-services.more-2{grid-template-columns:1fr 1fr}
.more-services .and-more{grid-column:auto}
.card-note{margin-top:.6rem;font-weight:600;color:var(--green)}
.county-intro{margin-bottom:0}
@media (max-width:960px){.svc-group{grid-template-columns:1fr}}
@media (max-width:600px){.more-services.more-2{grid-template-columns:1fr}}