/* Hive Point Home Inspections — brand-refined, responsive styles (2025-11-03) */
:root{
  --bg:#fffdf8;
  --ink:#1f1608;          /* dark text */
  --sub:#6b5a38;          /* supporting text */
  --brand:#f4b400;        /* honey yellow */
  --brand-dark:#4a3210;   /* deep brown */
  --card:#ffffff;
  --border:#e8dcc3;
  --accent:#2d2d2d;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  color:var(--ink);
  background:var(--bg);
  line-height:1.6;
}
.container{max-width:1100px;margin:0 auto;padding:24px}
.header{
  position:sticky;top:0;background:rgba(255,253,248,.9);
  backdrop-filter:saturate(1.2) blur(8px); border-bottom:1px solid var(--border); z-index:5;
}
.header-inner{display:flex;align-items:center;gap:16px;padding:10px 24px}
.header img{height:42px}
.header .brand{font-weight:800;color:var(--brand-dark)}
.header nav{margin-left:auto;display:flex;gap:18px;flex-wrap:wrap}
.header a{color:var(--ink);text-decoration:none;font-weight:600}
.header .cta{background:var(--brand);padding:8px 14px;border-radius:10px;border:1px solid var(--brand-dark)}

.hero{}
.hero-inner{display:grid;grid-template-columns:1.2fr 1fr;gap:32px;align-items:center;padding:48px 24px}
.hero h1{font-size:clamp(28px,3.2vw,44px);line-height:1.1;margin:0 0 10px;color:var(--brand-dark)}
.hero p{font-size:18px;color:var(--sub);margin:0 0 18px}
.badges{display:flex;gap:10px;flex-wrap:wrap;margin:12px 0 0}
.badge{border:1px solid var(--brand-dark); background:#fff;
  padding:6px 10px;border-radius:999px;font-size:13px}

.section{padding:48px 24px;border-bottom:1px solid var(--border)}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:18px}
.card h3{margin:0 0 8px}
.card p{margin:0}

.grid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px;align-items:start}
.list{padding-left:18px}
.list li{margin:6px 0}
.kicker{font-size:13px;color:var(--sub);text-transform:uppercase;letter-spacing:.12em}

.pricing{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
.price{border:2px solid var(--brand-dark);border-radius:16px;padding:20px;background:#fff}
.price .num{font-size:32px;font-weight:800}
.price ul{padding-left:18px;margin:8px 0}

.faq details{border:1px solid var(--border);padding:12px;border-radius:12px;background:#fff}
.faq summary{font-weight:700;cursor:pointer}

.cta-block{background:#fff; border:2px dashed var(--brand-dark); padding:22px; border-radius:16px}
.cta-block a.button{display:inline-block;margin-top:8px;padding:10px 14px;border-radius:10px;border:1px solid var(--brand-dark);background:var(--brand);font-weight:800;text-decoration:none;color:#000}

.footer{padding:28px 24px;background:#fff3cd;border-top:1px solid var(--border);font-size:14px;color:var(--sub)}
.footer a{color:inherit}
small{color:var(--sub)}


/* === Background image helpers (placeholders) === */
.bg-cover{background-size:cover;background-position:center;background-repeat:no-repeat}
.bg-dim{background-color:rgba(255,255,255,0.75);background-blend-mode:luminosity}
.bg-hero{background-image:url('images/hero-bg.jpg')}
.bg-services{background-image:url('images/services-bg.jpg')}
.bg-pricing{background-image:url('images/pricing-bg.jpg')}
.bg-area{background-image:url('images/area-bg.jpg')}
.bg-faq{background-image:url('images/faq-bg.jpg')}
.bg-contact{background-image:url('images/contact-bg.jpg')}

/* Ensure content sits above any overlays */
.hero .hero-inner,
.section .container{ position: relative; z-index:1; }


/* === Readability over background images (default behavior) === */
/* Create a dark overlay on image sections for contrast */
.bg-cover{ position: relative; }
.bg-cover::before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.28), rgba(0,0,0,.42));
  pointer-events:none;
  z-index:0;
}

/* Use white text by default on image-backed sections (EXCEPT hero; see overrides below) */
.section.bg-services,
.section.bg-pricing,
.section.bg-area,
.section.bg-faq,
.section.bg-contact{
  color:#fff;
}
.section.bg-services p,
.section.bg-pricing p,
.section.bg-area p,
.section.bg-faq p,
.section.bg-contact p,
.section.bg-services .kicker,
.section.bg-pricing .kicker,
.section.bg-area .kicker,
.section.bg-faq .kicker,
.section.bg-contact .kicker,
.section.bg-services a,
.section.bg-pricing a,
.section.bg-area a,
.section.bg-faq a,
.section.bg-contact a{
  color:#fff;
}

/* Keep cards readable on light backgrounds even within darkened sections */
.section .card{
  background: rgba(255,255,255,0.98);
  color: var(--ink);
  backdrop-filter: saturate(1.1) blur(2px);
}

/* Slight text shadow for headings over images to enhance legibility */
.hero h1, .section h2{
  text-shadow: 0 2px 8px rgba(0,0,0,.35);
}

/* Buttons on images: stronger border for clarity */
.cta-block a.button{
  border: 2px solid rgba(0,0,0,.5);
}

/* Optional: reduce overlay intensity a touch on FAQ/contact */
.section.bg-faq::before,
.section.bg-contact::before{
  background: linear-gradient(180deg, rgba(0,0,0,.22), rgba(0,0,0,.34));
}

/* === Contrast fix: ensure dark text for light boxes === */
.card,
.card *,
.faq details,
.faq details *,
.cta-block,
.cta-block *,
table, thead, tbody, th, td {
  color: var(--ink) !important;
}

/* Keep links readable on light boxes */
.card a, .cta-block a, .faq details a {
  color: var(--ink) !important;
  text-decoration-thickness: 1.5px;
}

/* Strengthen card and FAQ backgrounds so overlay doesn't tint them */
.card, .faq details, .cta-block {
  background: rgba(255,255,255,0.98) !important;
  border-color: var(--border) !important;
}

/* Make table headers clearly defined */
th {
  font-weight: 700;
  background: rgba(0,0,0,0.03);
}

/* Keep section-level white text ONLY for non-card free text */
.section.bg-services .container > :not(.cards):not(.card):not(.cta-block) *,
.section.bg-pricing .container > :not(.grid-2):not(.card):not(.cta-block) *,
.section.bg-area .container > :not(.grid-2):not(.card):not(.cta-block) *,
.section.bg-faq .container > :not(.faq):not(.card):not(.cta-block) *,
.section.bg-contact .container > :not(.grid-2):not(.card):not(.cta-block) * {
  color: #fff !important;
}

/* On mobile, slightly increase overlay for readability */
@media (max-width: 640px){
  .bg-cover::before{
    background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.48));
  }
}


/* === Contact form legibility (always dark text) === */
#contact, #contact *, .section.bg-contact, .section.bg-contact *,
#contact form, #contact form *, #contact .card, #contact .card * {
  color: #000 !important;
}

#contact input, #contact textarea, #contact select {
  color: #000 !important;
  background: #fff !important;
}

#contact button {
  color: #000 !important;
}


/* === HERO-ONLY OVERRIDES (light & warm hero image) === */
/* Make hero text dark and readable on light/medium images */
.hero.bg-hero,
.hero.bg-hero p,
.hero.bg-hero .kicker,
.hero.bg-hero a,
.hero.bg-hero .badges,
.hero.bg-hero .badges * {
  color: var(--ink) !important;
}

/* Keep badges and CTA box styled for light background imagery */
.hero.bg-hero .badge{
  background:#fff;
  border-color: var(--brand-dark);
  color: var(--ink) !important;
}
.hero.bg-hero .cta-block{
  background: rgba(255,255,255,0.98) !important;
  border-color: var(--brand-dark) !important;
  color: var(--ink) !important;
}
.hero.bg-hero .cta-block a.button{
  background: var(--brand) !important;
  border-color: var(--brand-dark) !important;
  color: #000 !important;
}

/* Lighten (and warm up slightly) the hero's overlay only */
.hero.bg-hero::before{
  content:"";
  position:absolute; inset:0;
  /* subtler neutral overlay to avoid washing out light/warm photos */
  background: linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.12));
  pointer-events:none;
  z-index:0;
}

/* Ensure hero "cards" (if any) remain light */
.hero.bg-hero .card, .hero.bg-hero .card *{
  color: var(--ink) !important;
  background: rgba(255,255,255,0.98) !important;
}


/* === Glass box for hero tagline === */
.hero .tagline-box{
  background: rgba(255,255,255,0.35);
  backdrop-filter: blur(10px) saturate(1.4);
  -webkit-backdrop-filter: blur(10px) saturate(1.4);
  border: 1px solid rgba(255,255,255,0.45);
  border-radius: 14px;
  padding: 16px 22px;
  max-width: 620px;
  margin-top: 14px;
  color: var(--ink);
  font-size: 18px;
  line-height: 1.5;
  box-shadow: 0 6px 18px rgba(0,0,0,0.10);
}

/* Ensure glass box sits above hero overlay */
.hero .hero-inner, .hero .tagline-box{ position: relative; z-index: 1; }

@media (max-width:640px){
  .hero .tagline-box{ max-width: 100%; padding: 14px 16px; }
}


/* === Improve hero tagline readability (shadow highlight) === */
.hero p {
  color: #fff !important;
  text-shadow: 0 2px 8px rgba(0,0,0,0.45);
  font-weight: 500;
}


/* === Force hero tagline readability on top of all rules === */
.hero.bg-hero p {
  color: #ffffff !important;
  text-shadow: 0 3px 10px rgba(0,0,0,0.55) !important;
  font-weight: 600;
  position: relative;
  z-index: 3;
}


/* === Force black text for hero contact line === */
.hero.bg-hero .cta-block p,
.hero.bg-hero .cta-block a {
  color: #000 !important;
}


/* === Social Button Styling === */
.social-buttons {
  display: flex;
  gap: 12px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.social-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--brand);
  border: 1px solid var(--brand-dark);
  border-radius: 8px;
  padding: 8px 14px;
  color: #000;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.2s ease;
}
.social-btn:hover {
  background: #ffd65a;
}
.social-icon {
  height: 18px;
  width: 18px;
}


/* Centered social buttons for hero logo */
.hero .social-buttons {
  justify-content: center;
  margin-top: 20px;
}


/* === Header Social Buttons === */
.header-social {
  display: flex;
  align-items: center;
  gap: 10px;
}
.header-social-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  padding: 6px 10px;
  border: 1px solid var(--brand-dark);
  border-radius: 6px;
  color: var(--brand-dark);
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
}
.header-social-btn:hover {
  background: var(--brand);
  color: #000;
}
.header-social-icon {
  height: 14px;
  width: 14px;
}


/* === Bee separator icon next to brand === */
.bee-sep{
  height: 18px;
  width: 28px;
  margin-left: 10px;
  margin-right: 2px;
  vertical-align: middle;
  opacity: 0.9;
}
@media (max-width: 640px){
  .bee-sep{ height:16px; width:24px; margin-left:8px; }
}

/* Slightly tighten header when social buttons present */
.header .header-social-btn{
  background: transparent;
  border: 1px solid var(--brand-dark);
}
.header .header-social-btn:hover{
  background: var(--brand);
}


/* === Bee emoji separator next to brand (matches header style) === */
.bee-emoji{
  display:inline-block;
  margin: 0 8px;
  font-size: 1.05em;       /* slightly taller to match cap height */
  line-height: 1;
  vertical-align: middle;
  font-weight: 800;
  text-shadow: 0 0 0 var(--brand-dark); /* subtle weight match; color doesn't recolor emoji but aligns boldness */
}


/* === Larger social icons for consistency === */
.header-social-icon, .social-icon, .footer .social-icon {
  height: 30px !important;
  width: 30px !important;
}

.footer img[alt="Facebook"], .footer img[alt="Instagram"] {
  height: 30px !important;
  width: 30px !important;
}


/* === Adjusted Facebook icon size to match Instagram visual weight === */
.header-social-icon[alt="Facebook"], 
.footer img[alt="Facebook"] {
  height: 26px !important;
  width: 26px !important;
}


/* === Unified honey-yellow hover style for Call and Request buttons === */
.header a.cta:hover,
a.button:hover,
button.button:hover {
  background: var(--brand) !important;
  border-color: var(--brand-dark) !important;
  color: #000 !important;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}


/* === Honey-yellow glow hover effect (modern style) === */
.header a.cta:hover,
a.button:hover,
button.button:hover,
.social-btn:hover,
.header-social-btn:hover {
  background: var(--brand) !important;
  border-color: var(--brand-dark) !important;
  color: #000 !important;
  box-shadow: 0 0 12px var(--brand);
  transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, color 0.25s ease;
}


/* === Nav chips styled like header social buttons === */
.header nav a.nav-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid var(--brand-dark);
  border-radius: 8px;
  color: var(--brand-dark);
  text-decoration: none;
  transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, color 0.25s ease;
}

.header nav a.nav-chip:hover,
.header nav a.nav-chip:focus-visible {
  background: var(--brand);
  border-color: var(--brand-dark);
  color: #000;
  box-shadow: 0 0 12px var(--brand);
  outline: none;
}

/* Maintain spacing between chips */
.header nav a.nav-chip + a.nav-chip { margin-left: 6px; }

/* Mobile: allow wrapping nicely */
@media (max-width: 640px){
  .header nav a.nav-chip { margin-top: 6px; }
}


/* === Reduced spacing between nav chips === */
.header nav a.nav-chip + a.nav-chip {
  margin-left: 3px !important;
}
@media (max-width: 640px){
  .header nav a.nav-chip { margin-top: 4px !important; }
}


/* === Tighter nav-chip spacing + responsive padding === */
/* Desktop/tablet: very tight gaps and slimmer padding */
.header nav a.nav-chip {
  padding: 5px 9px !important;
}
.header nav a.nav-chip + a.nav-chip {
  margin-left: 1px !important;
}

/* Mobile: increase padding for easier tapping */
@media (max-width: 640px){
  .header nav a.nav-chip {
    padding: 8px 12px !important;
  }
  .header nav a.nav-chip + a.nav-chip {
    margin-left: 4px !important;
    margin-top: 6px !important;
  }
}

/* === Compact mobile header + hamburger (global) === */
@media (max-width: 820px){
  .header{ position: static !important; box-shadow: none; }
  .header-inner{ display:flex; align-items:center; gap:8px; padding:6px 10px; min-height:48px; }
  .header img[alt*="logo"]{ width:28px; height:28px; }
  .header .brand{ font-size:15px; font-weight:800; white-space:nowrap; }
  /* Hamburger button */
  .nav-toggle{ display:inline-flex; align-items:center; gap:8px; padding:6px 8px; border:1px solid #999; border-radius:8px; background:#fff; }
  .nav-toggle .bars{ display:inline-block; width:18px; height:12px; position:relative; }
  .nav-toggle .bars::before, .nav-toggle .bars::after, .nav-toggle .bars span{ content:""; position:absolute; left:0; right:0; height:2px; background:#000; }
  .nav-toggle .bars::before{ top:0; } .nav-toggle .bars span{ top:5px; } .nav-toggle .bars::after{ bottom:0; }
  .nav-toggle[aria-expanded="true"]{ background:#f1f1f1; }
  /* Collapse nav by default */
  #site-nav{ overflow:hidden; max-height:0; opacity:0; transition:max-height .25s ease, opacity .2s ease; width:100%; order:4; }
  #site-nav.open{ max-height:320px; opacity:1; }
  #site-nav a{ display:block; width:100%; margin:8px 0; }
  /* Make social icons compact but visible on mobile */
  .header .header-social{ display:inline-flex !important; gap:8px; margin-left:auto; }
  .header .header-social .header-social-btn{ padding:6px; border-radius:999px; border:1px solid #ddd; background:#fff; line-height:0; }
  .header .header-social .header-social-icon{ width:16px; height:16px; display:inline-block; }
  .header .header-social .header-social-btn{ font-size:0; } /* hide label text if present */
}

/* === Mobile stability & overflow fixes (2025-11-07) === */
*, *::before, *::after { box-sizing: border-box; }
html, body { max-width: 100%; overflow-x: hidden; }
img, svg, video, canvas, iframe { max-width: 100%; height: auto; }
a, p, h1, h2, h3, h4, h5, h6 { overflow-wrap: anywhere; word-break: break-word; }

/* Prevent flex/grid children from forcing overflow */
.header-inner, .container, .cards, .grid-2, .footer, nav, .row, .col { min-width: 0; }
[class*="grid"], [class*="flex"] { min-width: 0; }

/* Navigation chips spacing on small screens */
@media (max-width: 820px){
  #site-nav a { margin: 6px 6px 0 0; }
}

/* Safer tables on small screens */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 600px){
  table { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  thead, tbody, tr { display: table; width: 100%; table-layout: fixed; }
}

/* === Mobile header overrides v10 (2025-11-07) === */
@media (max-width: 820px){
  /* Make header not floating */
  .header{ position: static !important; box-shadow: none !important; }
  /* Smaller top bar */
  .header-inner{ padding: 6px 10px !important; min-height: 48px; gap: 8px; }
  /* Hide company name text */
  .header .brand{ display: none !important; }
  /* Social buttons bigger */
  .header .header-social{ display: inline-flex !important; gap: 12px !important; margin-left: auto !important; }
  .header .header-social .header-social-btn{ padding: 10px !important; border-radius: 999px !important; border: 1px solid #ddd !important; background: #fff !important; line-height: 0 !important; }
  .header .header-social .header-social-icon{ width: 22px !important; height: 22px !important; display: inline-block !important; }
  .header .header-social .header-social-btn{ font-size: 0 !important; } /* icons only */
  /* Mobile logo under the bar */
  .mobile-top-logo{ display: block !important; text-align: center; padding: 10px 0 6px; border-bottom: 1px solid #eee; background: #fff; }
  .mobile-top-logo img{ width: 64px; height: 64px; }
  /* Hamburger styles */
  .nav-toggle{ display: inline-flex !important; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid #999; border-radius: 8px; background: #fff; }
  .nav-toggle .bars{ display: inline-block; width: 18px; height: 12px; position: relative; }
  .nav-toggle .bars::before, .nav-toggle .bars::after, .nav-toggle .bars span{ content:""; position:absolute; left:0; right:0; height:2px; background:#000; }
  .nav-toggle .bars::before{ top:0; } .nav-toggle .bars span{ top:5px; } .nav-toggle .bars::after{ bottom:0; }
  /* Collapsed nav by default */
  #site-nav{ overflow: hidden; max-height: 0; opacity: 0; transition: max-height .25s ease, opacity .2s ease; width: 100%; order: 4; }
  #site-nav.open{ max-height: 320px; opacity: 1; }
  #site-nav a{ display: block; width: 100%; margin: 8px 0; }
  /* Safety: no horizontal scroll */
  html, body { overflow-x: hidden; }
  img, svg, iframe { max-width: 100%; height: auto; }
  .container, .header-inner, nav, .cards, .grid-2 { min-width: 0; }
}

/* === Mobile-only header & hero tweaks v11 (2025-11-07) === */
@media (max-width: 820px){
  /* Remove company name text from top bar */
  .header .brand{ display: none !important; }

  /* Make social buttons bigger (icons) */
  .header .header-social{ display:inline-flex !important; gap:14px !important; margin-left:auto !important; }
  .header .header-social .header-social-btn{ padding:12px !important; border-radius:999px !important; border:1px solid #ddd !important; background:#fff !important; line-height:0 !important; }
  .header .header-social .header-social-icon{ width:24px !important; height:24px !important; display:inline-block !important; }
  .header .header-social .header-social-btn{ font-size:0 !important; } /* icons only */

  /* Smaller top bar height (not floating) */
  .header{ position: static !important; box-shadow:none !important; }
  .header-inner{ padding:6px 10px !important; min-height: 48px; gap:8px; }

  /* Hamburger styles & collapsed nav */
  .nav-toggle{ display:inline-flex !important; align-items:center; gap:8px; padding:6px 8px; border:1px solid #999; border-radius:8px; background:#fff; }
  .nav-toggle .bars{ display:inline-block; width:18px; height:12px; position:relative; }
  .nav-toggle .bars::before, .nav-toggle .bars::after, .nav-toggle .bars span{ content:""; position:absolute; left:0; right:0; height:2px; background:#000; }
  .nav-toggle .bars::before{ top:0; } .nav-toggle .bars span{ top:5px; } .nav-toggle .bars::after{ bottom:0; }
  #site-nav{ overflow:hidden; max-height:0; opacity:0; transition:max-height .25s ease, opacity .2s ease; width:100%; order:4; }
  #site-nav.open{ max-height: 320px; opacity:1; }
  #site-nav a{ display:block; width:100%; margin:8px 0; }

  /* Move the hero logo up and make it bigger */
  .hero{ padding-top: 8px !important; }
  .hero img.hero-logo{ display:block; width: 140px !important; height:auto; margin: 6px auto 10px !important; }

  /* Prevent side-to-side scroll on phones */
  html, body{ overflow-x:hidden; }
  img, svg, iframe{ max-width:100%; height:auto; }
  .container, .header-inner, nav, .cards, .grid-2{ min-width:0; }
}


/* === MOBILE HEADER & HAMBURGER (2025-11-09) === */
@media (max-width: 820px){
  .header{ position:sticky; top:0; background:#fffdf8; z-index: 50; }
  .header-inner{ display:flex; align-items:center; gap:12px; padding:10px 12px; }
  /* remove any remaining bee/logo in top bar */
  .header .bee-emoji, .header img[alt*="logo" i]{ display:none !important; }

  .nav-toggle{
    margin-left:auto;
    display:inline-flex; align-items:center; gap:8px;
    border:1px solid var(--border);
    background:#fff; border-radius:12px; padding:8px 10px;
    font-weight:700; font-size:14px;
  }
  .nav-toggle .bars{ display:inline-block; width:18px; height:12px; position:relative; }
  .nav-toggle .bars span,
  .nav-toggle .bars::before,
  .nav-toggle .bars::after{
    content:""; position:absolute; left:0; right:0; height:2px; background:#111;
  }
  .nav-toggle .bars span{ top:5px; }
  .nav-toggle .bars::before{ top:0; }
  .nav-toggle .bars::after{ bottom:0; }

  #site-nav{
    display:none;
    position:absolute;
    top:100%; left:0; right:0;
    background:#fffdf8;
    border-bottom:1px solid var(--border);
    padding:12px 16px;
    box-shadow:0 8px 16px rgba(0,0,0,.06);
  }
  #site-nav.open{ display:flex; flex-direction:column; gap:8px; }
  #site-nav .nav-chip{
    display:flex; justify-content:center;
    padding:12px 14px; font-size:16px; border:1px solid var(--border); border-radius:14px;
    background:#fff;
  }

  .header .header-social{ display:flex; align-items:center; gap:14px; }
  .header .header-social-icon{ width:28px; height:28px; }
  .header .header-social-btn{ display:flex; align-items:center; justify-content:center; border:1px solid var(--border); border-radius:999px; padding:6px; }

  /* phone emoji button */
  .header .header-social .phone-btn{
    width:44px; height:44px; font-size:22px;
    background:#fff; border:1px solid var(--border);
    border-radius:999px; display:flex; align-items:center; justify-content:center;
  }

  /* brand hover/tap animation */
  .header .header-social .header-social-btn,
  .header .header-social .phone-btn{
    transition: transform .15s ease, background .15s ease, border-color .15s ease;
  }
  .header .header-social .header-social-btn:hover,
  .header .header-social .header-social-btn:active,
  .header .header-social .phone-btn:hover,
  .header .header-social .phone-btn:active{
    background: var(--brand, #ffd966);
    border-color: var(--brand-dark, #b8860b);
    transform: scale(1.05);
    color:#000;
  }
}



/* === FORCED MOBILE HEADER & HAMBURGER (2025-11-09) === */
@media (max-width: 820px){
  .header{ position:sticky; top:0; background:#fffdf8; z-index:50; }
  .header-inner{ display:flex; align-items:center; gap:12px; padding:10px 12px; }
  .header .bee-emoji, .header img[alt*="logo" i]{ display:none !important; }

  .nav-toggle{
    margin-left:auto;
    display:inline-flex; align-items:center; gap:8px;
    border:1px solid var(--border);
    background:#fff; border-radius:12px; padding:8px 10px;
    font-weight:700; font-size:14px;
  }
  .nav-toggle .bars{ display:inline-block; width:18px; height:12px; position:relative; }
  .nav-toggle .bars span,
  .nav-toggle .bars::before,
  .nav-toggle .bars::after{
    content:""; position:absolute; left:0; right:0; height:2px; background:#111;
  }
  .nav-toggle .bars span{ top:5px; }
  .nav-toggle .bars::before{ top:0; }
  .nav-toggle .bars::after{ bottom:0; }

  #site-nav{
    display:none;
    position:absolute; top:100%; left:0; right:0;
    background:#fffdf8;
    border-bottom:1px solid var(--border);
    padding:12px 16px;
    box-shadow:0 8px 16px rgba(0,0,0,.06);
  }
  #site-nav.open{ display:flex; flex-direction:column; gap:8px; }
  #site-nav .nav-chip{
    display:flex; justify-content:center;
    padding:12px 14px; font-size:16px;
    border:1px solid var(--border); border-radius:14px;
    background:#fff;
  }

  .header .header-social{ display:flex; align-items:center; gap:14px; }
  .header .header-social-btn{
    display:flex; align-items:center; justify-content:center;
    border:1px solid var(--border); border-radius:999px; padding:6px; width:44px; height:44px;
    text-decoration:none;
  }
  .header .header-social-icon{ font-size:16px; line-height:1; }
  .header .header-social .phone-btn{ font-size:22px; }
}


/* === GUARANTEED MOBILE HAMBURGER === */
@media (max-width: 820px){
  .header { position: sticky; top: 0; background: #fffdf8; z-index: 100; }
  .header-inner { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; }
  .header-social { display: flex; align-items: center; gap: 14px; }
  .header-social-btn { font-size: 18px; border: 1px solid #b8860b; border-radius: 50%; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: #fff; text-decoration: none; }
  .phone-btn { font-size: 22px; }

  .nav-toggle { border: 1px solid #b8860b; background: #fff; border-radius: 8px; padding: 8px 10px; font-size: 14px; }
  .nav-toggle .bars { display: inline-block; width: 18px; height: 12px; position: relative; }
  .nav-toggle .bars span, .nav-toggle .bars::before, .nav-toggle .bars::after { content: ""; position: absolute; left: 0; right: 0; height: 2px; background: #111; }
  .nav-toggle .bars span { top: 5px; }
  .nav-toggle .bars::before { top: 0; }
  .nav-toggle .bars::after { bottom: 0; }

  #site-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; background: #fffdf8; border-top: 1px solid #ddd; flex-direction: column; }
  #site-nav.open { display: flex; }
  #site-nav a { padding: 12px; text-align: center; border-bottom: 1px solid #ddd; font-size: 16px; }

  /* Hide any top-bar logo/bee that may exist */
  .header .bee-emoji, .header img[alt*="logo" i] { display:none !important; }
}

/* Even spacing for right-side cards */


/* About inspector */
.inspector-card { overflow:hidden; }

.inspector-about{
  display:block;
}

.inspector-photo{
  width:180px;
  height:180px;
  float:left;
  margin:0 20px 12px 0;
  border-radius:999px;
  object-fit:cover;
  border:2px solid var(--brand-dark);
  box-shadow:0 0 0 3px #fff;
}

@media (max-width: 768px){
  .inspector-photo{
    float:none;
    display:block;
    margin:0 auto 16px auto;
  }
}


.right-col{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  height:100%;
}


/* Move top card down 25% */



/* Add spacing between the last two right-side cards */
.right-col > .card:last-child{
  margin-top:24px;
}


/* Move top card slightly down to create space between card 1 and 2 */
.right-col > .card:first-child{
  margin-top:12px;
}