/* ══════════════════════════════════════════════════════════════════════
   Burleigh Electrical — shared site stylesheet
   Design language matches the customer portal (bes.myheadquarters.app) —
   light body, white rounded cards, flat soft shadows, brand green pill
   buttons with black text, system font stack (no webfont). One file
   shared by index.html, news.html, reviews.html and every /news/*.html
   article page so the three no longer carry their own separate,
   drifting copies of the same design tokens.
   ══════════════════════════════════════════════════════════════════════ */

:root {
  --bg:            #eef1f5;
  --card:          #ffffff;
  --border:        #f1f5f9;
  --border-strong: #cbd5e1;
  --text:          #0f172a;
  --text-secondary:#334155;
  --text-muted:    #64748b;
  --green:         #7ee000;
  --green-dark:    #5ec200;
  --green-text:    #3f7a00;
  --green-bg:      #f4fce8;
  --header-bg:     #0a0a0a;
  --header-text:   #ffffff;
  --header-dim:    rgba(255,255,255,.55);
  --radius-lg:     22px;
  --radius-md:     16px;
  --radius-sm:     12px;
  --shadow-sm:     0 2px 8px rgba(15,23,42,.06);
  --shadow-md:     0 4px 16px rgba(15,23,42,.08);
  --shadow-lg:     0 10px 30px rgba(15,23,42,.12);
  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --ease: cubic-bezier(0.4,0,0.2,1);
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  font-family:var(--font); background:var(--bg); color:var(--text);
  line-height:1.6; min-height:100vh; -webkit-font-smoothing:antialiased;
}
a { text-decoration:none; color:inherit; }
ul { list-style:none; }
img { max-width:100%; display:block; }
.container { max-width:1180px; margin:0 auto; padding:0 24px; }
.visually-hidden { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }

/* ── HEADER — solid black, matches the customer portal's own header ── */
/* position:sticky already establishes a containing block for absolutely
   positioned descendants (same as relative would) — the mobile dropdown
   and hamburger button (both position:absolute) should anchor to THIS,
   the full-width header, not to .header-content further down. That
   mismatch was the actual bug: .header-content also had position:relative
   on it, which — being the nearer ancestor — won instead, so the dropdown
   inherited .header-content's own ~24px side padding and rendered as a
   narrower floating box instead of a proper full-width mobile nav panel. */
header {
  background:var(--header-bg); position:sticky; top:0; z-index:100;
  border-bottom:1px solid rgba(255,255,255,.08);
}
/* Logo on its own centered row, nav centered on the row below it (desktop).
   Mobile drops the nav row entirely (and the hamburger that used to
   reveal it) — replaced by .mobile-bottomnav, an always-visible bar,
   further down this file. Header on mobile is just the logo. */
.header-content { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:20px 0; row-gap:12px; }
.logo { display:flex; align-items:center; justify-content:center; }
.logo-img { height:150px; width:auto; display:block; transition:transform .2s var(--ease); }
.logo:hover .logo-img { transform:scale(1.04); }
.nav-links { display:flex; gap:4px; align-items:center; justify-content:center; flex-wrap:wrap; }
.nav-links a { color:var(--header-dim); font-weight:500; font-size:14.5px; padding:8px 14px; border-radius:100px; transition:color .15s var(--ease), background .15s var(--ease); }
.nav-links a:hover, .nav-links a.active { color:#fff; background:rgba(255,255,255,.08); }
.nav-cta { background:var(--green)!important; color:#0a0a0a!important; font-weight:700!important; padding:9px 18px!important; }
.nav-cta:hover { background:#8cf200!important; color:#0a0a0a!important; }
@media(max-width:820px){
  .header-content { padding:22px 0; }
  .nav-links { display:none; }
}

/* ── BUTTONS — pill, green bg, black text (best contrast; same rule the
   portal uses everywhere) ── */
.btn-primary {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:var(--green); color:#0a0a0a; padding:14px 28px; border:none;
  border-radius:100px; font-size:15px; font-weight:700; letter-spacing:-0.1px;
  cursor:pointer; transition:transform .12s var(--ease), background .15s var(--ease);
  box-shadow:var(--shadow-md); font-family:inherit;
}
.btn-primary:hover { background:#8cf200; transform:translateY(-1px); }
.btn-primary:active { transform:scale(.97); }
.btn-secondary {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:var(--card); color:var(--text); padding:14px 28px;
  border:1px solid var(--border-strong); border-radius:100px; font-size:15px;
  font-weight:600; cursor:pointer; transition:transform .12s var(--ease), border-color .15s var(--ease);
  box-shadow:var(--shadow-sm); font-family:inherit;
}
.btn-secondary:hover { border-color:var(--green); transform:translateY(-1px); }
.btn-block { width:100%; }

/* ── HERO ── */
.hero { padding:64px 24px 40px; text-align:center; }
.hero-content { max-width:760px; margin:0 auto; }
.hero h1 { font-size:clamp(2.1rem,5vw,3.2rem); font-weight:800; letter-spacing:-1.3px; line-height:1.12; color:var(--text); }
.hero h1 em { color:var(--green-text); font-style:normal; }
.hero-sub { font-size:17px; color:var(--text-secondary); max-width:560px; margin:18px auto 0; }
.hero-actions { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:28px; }
.trust-strip { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:28px; }
.trust-chip {
  display:inline-flex; align-items:center; gap:6px; background:var(--card);
  border:1px solid var(--border); border-radius:100px; padding:8px 16px;
  font-size:13.5px; font-weight:600; color:var(--text-secondary); box-shadow:var(--shadow-sm);
}
.trust-chip strong { color:var(--text); }
.trust-chip .stars { color:#FBBC04; letter-spacing:1px; }

/* ── LOCATION STRIP ── */
.location-strip { background:var(--card); border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding:14px 24px; text-align:center; }
.location-strip p { font-size:13px; color:var(--text-muted); max-width:900px; margin:0 auto; }
.location-strip strong { color:var(--text-secondary); }

/* ── NO JOB TOO SMALL ── */
.no-job-banner { background:var(--green-bg); padding:26px 24px; }
.no-job-inner { max-width:1180px; margin:0 auto; display:flex; align-items:center; justify-content:center; gap:16px; flex-wrap:wrap; }
.no-job-icon { width:42px; height:42px; border-radius:12px; background:var(--green); display:flex; align-items:center; justify-content:center; flex-shrink:0; box-shadow:var(--shadow-sm); }
.no-job-icon svg { width:20px; height:20px; color:#0a0a0a; }
.no-job-text h3 { font-size:17px; font-weight:700; color:var(--text); }
.no-job-text p { font-size:14.5px; color:var(--text-secondary); margin-top:2px; }

/* ── SECTIONS ── */
.section { padding:72px 24px; }
.section-alt { background:var(--card); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.section-eyebrow { display:block; font-size:12.5px; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:var(--green-text); text-align:center; margin-bottom:10px; }
.section-title { font-size:clamp(1.6rem,4vw,2.2rem); font-weight:800; letter-spacing:-1px; line-height:1.2; text-align:center; color:var(--text); }
.section-sub { font-size:15.5px; color:var(--text-secondary); text-align:center; max-width:620px; margin:14px auto 0; }
.section-cta { text-align:center; margin-top:32px; }
.section-header { margin-bottom:40px; }
.section-header.left { text-align:left; }
.section-header.left .section-eyebrow, .section-header.left .section-title, .section-header.left .section-sub { text-align:left; margin-left:0; }

/* ── CARD (generic) ── */
.card { background:var(--card); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); border:1px solid var(--border); }

/* ── WHY CHOOSE US ── */
.why-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:16px; margin-top:36px; }
.why-card { background:var(--card); border-radius:var(--radius-md); border:1px solid var(--border); box-shadow:var(--shadow-sm); padding:24px; transition:transform .15s var(--ease), box-shadow .15s var(--ease); }
.why-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-md); }
.why-icon { width:44px; height:44px; border-radius:12px; background:var(--green-bg); display:flex; align-items:center; justify-content:center; margin-bottom:14px; }
.why-icon svg { width:22px; height:22px; color:var(--green-text); }
.why-card h3 { font-size:16px; font-weight:700; color:var(--text); margin-bottom:6px; }
.why-card p { font-size:14px; color:var(--text-secondary); line-height:1.6; }

/* ── REVIEWS PREVIEW / GRID ── */
.reviews-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:16px; margin-top:36px; }
.review-card { background:var(--card); border-radius:var(--radius-md); border:1px solid var(--border); box-shadow:var(--shadow-sm); padding:22px; display:flex; flex-direction:column; gap:10px; }
.review-stars { color:#FBBC04; font-size:14px; letter-spacing:2px; }
.review-body { font-size:14.5px; color:var(--text-secondary); line-height:1.65; flex:1; }
.review-foot { display:flex; align-items:center; justify-content:space-between; margin-top:4px; }
.review-name { font-size:13.5px; font-weight:700; color:var(--text); }
.review-date { font-size:12px; color:var(--text-muted); }
.review-source { display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:.5px; }

/* ── SERVICES ── */
.services-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:12px; margin-top:36px; }
.srv { display:flex; align-items:center; gap:12px; background:var(--card); border:1px solid var(--border); border-radius:var(--radius-sm); padding:16px 18px; font-size:14.5px; font-weight:600; color:var(--text); box-shadow:var(--shadow-sm); transition:transform .15s var(--ease); }
.srv:hover { transform:translateY(-2px); }
.srv-dot { width:9px; height:9px; border-radius:50%; background:var(--green); flex-shrink:0; }

/* ── NEWS PREVIEW / ARTICLE CARDS ── */
.articles-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:18px; margin-top:36px; }
.article-card { background:var(--card); border:1px solid var(--border); border-radius:var(--radius-md); overflow:hidden; box-shadow:var(--shadow-sm); transition:transform .15s var(--ease), box-shadow .15s var(--ease); }
.article-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-md); }
.card-emoji { font-size:40px; background:var(--green-bg); padding:26px; text-align:center; }
.card-body { padding:18px; }
.card-tag { display:inline-block; font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.6px; padding:3px 10px; border-radius:100px; margin-bottom:10px; }
.tag-ev { background:#dbeafe; color:#2563eb; }
.tag-landlord { background:#ede9fe; color:#7c3aed; }
.tag-safety { background:#ffedd5; color:#ea580c; }
.tag-smart { background:var(--green-bg); color:var(--green-text); }
.tag-solar { background:#fef3c7; color:#b45309; }
.card-source { font-size:11px; color:var(--text-muted); margin-bottom:8px; }
.card-source span { color:var(--green-text); font-weight:600; }
.card-body h3 { font-size:15.5px; font-weight:700; line-height:1.4; margin-bottom:8px; color:var(--text); }
.card-body p { font-size:13px; color:var(--text-secondary); line-height:1.6; margin-bottom:14px; }
.card-footer { display:flex; justify-content:space-between; align-items:center; }
.card-date { font-size:12px; color:var(--text-muted); }
.card-read { font-size:12.5px; font-weight:700; color:var(--green-text); }

/* ── COMMERCIAL / CLIENT CARDS ── */
.clients-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:14px; margin-top:36px; }
.client-card { background:var(--card); border:1px solid var(--border); border-radius:var(--radius-md); box-shadow:var(--shadow-sm); padding:22px; transition:transform .15s var(--ease); }
.client-card:hover { transform:translateY(-3px); }
.client-icon { font-size:26px; margin-bottom:10px; }
.client-card h4 { font-size:15px; font-weight:700; color:var(--text); margin-bottom:6px; }
.client-card p { font-size:13.5px; color:var(--text-secondary); line-height:1.6; }

/* ── AREAS ── */
.areas-list { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:32px; max-width:800px; margin-left:auto; margin-right:auto; }
.area-chip { background:var(--card); border:1px solid var(--border); border-radius:100px; padding:8px 16px; font-size:13.5px; font-weight:600; color:var(--text-secondary); box-shadow:var(--shadow-sm); }

/* ── FAQ (accordion via <details>) ── */
.faq-list { max-width:760px; margin:36px auto 0; display:flex; flex-direction:column; gap:10px; }
.faq-item { background:var(--card); border:1px solid var(--border); border-radius:var(--radius-sm); box-shadow:var(--shadow-sm); overflow:hidden; }
.faq-item summary { list-style:none; cursor:pointer; padding:18px 20px; font-size:15px; font-weight:600; color:var(--text); display:flex; justify-content:space-between; align-items:center; gap:12px; }
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary .faq-chevron { color:var(--text-muted); transition:transform .2s var(--ease); flex-shrink:0; }
.faq-item[open] summary .faq-chevron { transform:rotate(180deg); }
.faq-item p { padding:0 20px 18px; font-size:14px; color:var(--text-secondary); line-height:1.7; }

/* ── FINAL CTA BANNER ── */
.final-cta { background:var(--header-bg); padding:64px 24px; text-align:center; }
.final-cta h2 { color:#fff; font-size:clamp(1.5rem,3.6vw,2rem); font-weight:800; letter-spacing:-.8px; }
.final-cta p { color:rgba(255,255,255,.65); font-size:15px; margin:12px auto 26px; max-width:480px; }
.final-cta .hero-actions { margin-top:0; }
.final-cta .btn-secondary { background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.18); color:#fff; }
.final-cta .btn-secondary:hover { border-color:var(--green); }

/* ── FOOTER ── */
footer { background:var(--card); border-top:1px solid var(--border); padding:44px 24px 26px; text-align:center; }
.footer-logo-img { height:80px; width:auto; margin:0 auto 16px; opacity:.9; }
.footer-links { display:flex; flex-wrap:wrap; justify-content:center; gap:18px; margin-bottom:20px; }
.footer-links a { color:var(--text-secondary); font-size:14px; font-weight:500; }
.footer-links a:hover { color:var(--green-text); }
.footer-seo { font-size:12px; color:var(--text-muted); max-width:900px; margin:0 auto; line-height:1.7; }
.footer-bottom { font-size:12px; color:var(--text-muted); margin-top:18px; }

/* ── FLOATING CALL BUTTON ── */
.fab-call {
  position:fixed; bottom:22px; right:22px; z-index:90; display:flex; align-items:center; gap:8px;
  background:var(--green); color:#0a0a0a; padding:16px 22px; border-radius:100px;
  box-shadow:var(--shadow-lg); font-size:15px; font-weight:700; transition:transform .15s var(--ease);
}
.fab-call:hover { transform:scale(1.04); }
.fab-call svg { width:22px; height:22px; }
@media(max-width:600px){
  .fab-call-label { display:none; }
  /* Bigger tap target/icon on mobile (was 18px in a 14px-padded circle —
     too small to read as a real call button). Sits above the bottom nav
     bar, not overlapping it. */
  .fab-call { padding:18px; bottom:70px; }
  .fab-call svg { width:26px; height:26px; }
}

/* ── MOBILE BOTTOM NAV — replaces the hamburger dropdown with an always-
   visible bar (same pattern as the customer portal's own bottom nav:
   text-only, no icons, brand-green active state), so navigation doesn't
   require an extra tap to even see the options. Desktop is untouched —
   the centered nav row under the logo still does its job there. ── */
.mobile-bottomnav { display:none; }
@media(max-width:820px){
  .mobile-bottomnav {
    display:flex; position:fixed; bottom:0; left:0; right:0; z-index:95;
    background:#0a0a0a; border-top:1px solid rgba(255,255,255,.1);
    box-shadow:0 -6px 20px rgba(0,0,0,.35);
    padding:8px 4px calc(8px + env(safe-area-inset-bottom, 0px));
  }
  .mb-item {
    flex:1; display:flex; align-items:center; justify-content:center; text-align:center;
    padding:8px 2px; font-size:12px; font-weight:600; color:rgba(255,255,255,.55);
    position:relative;
  }
  .mb-item.active { color:var(--green); font-weight:800; }
  .mb-item.active::before {
    content:''; position:absolute; top:0; left:50%; transform:translateX(-50%);
    width:20px; height:3px; border-radius:100px; background:var(--green);
  }
  .mb-item.mb-cta { color:var(--green); font-weight:800; }
  body { padding-bottom:54px; }
}

/* ── CONTACT / ENQUIRY FORM ── */
/* scroll-margin-top offsets the #contact anchor clear of the sticky header
   — was a hardcoded inline value tied to one exact header height, which
   broke twice already as the header's own height kept changing. Generous
   buffer per breakpoint here so it doesn't need to be pixel-perfect. */
#contact { scroll-margin-top:210px; }
@media(min-width:821px){ #contact { scroll-margin-top:260px; } }
.form-section { padding:72px 24px; }
.form-card { max-width:640px; margin:0 auto; background:var(--card); border-radius:var(--radius-lg); box-shadow:var(--shadow-md); border:1px solid var(--border); padding:36px; }
.form-card h2 { font-size:1.7rem; font-weight:800; letter-spacing:-.6px; text-align:center; }
.form-sub { font-size:14.5px; color:var(--text-secondary); text-align:center; margin:10px 0 28px; }
.form-group { margin-bottom:16px; }
.form-group label { display:block; font-size:13px; font-weight:700; color:var(--text-secondary); margin-bottom:6px; }
.form-group input, .form-group select, .form-group textarea {
  width:100%; padding:13px 14px; border-radius:var(--radius-sm); border:1px solid var(--border-strong);
  background:var(--bg); font-size:14.5px; color:var(--text); font-family:inherit; transition:border-color .15s var(--ease);
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline:none; border-color:var(--green); background:var(--card); }
.form-group textarea { min-height:100px; resize:vertical; }
.submit-btn {
  width:100%; background:var(--green); color:#0a0a0a; border:none; padding:15px; border-radius:var(--radius-sm);
  font-size:15.5px; font-weight:700; cursor:pointer; transition:background .15s var(--ease); font-family:inherit;
}
.submit-btn:hover { background:#8cf200; }
.submit-btn:disabled { opacity:.6; cursor:default; }

/* ── ARTICLE FULL PAGE (used by /news/*.html) ── */
.article-hero { padding:44px 24px 8px; }
.article-back {
  display:inline-flex; align-items:center; gap:6px; background:var(--card); border:1px solid var(--border-strong);
  color:var(--text); font-size:13.5px; font-weight:700; padding:9px 16px; border-radius:100px;
  box-shadow:var(--shadow-sm); margin-bottom:24px; transition:transform .12s var(--ease);
}
.article-back:hover { transform:translateY(-1px); }
.article-inner { max-width:720px; margin:0 auto; padding:0 24px 72px; }
.article-source-banner { background:var(--card); border:1px solid var(--border); border-radius:var(--radius-sm); box-shadow:var(--shadow-sm); padding:14px 18px; margin-bottom:24px; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.source-label { font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.6px; color:var(--text-muted); }
.source-name { font-size:13px; color:var(--text); font-weight:600; }
.source-link { font-size:12px; color:var(--green-text); font-weight:700; margin-left:auto; }
.source-link:hover { text-decoration:underline; }
.article-h1 { font-size:clamp(1.6rem,4vw,2.3rem); font-weight:800; letter-spacing:-1px; line-height:1.22; margin:16px 0 12px; color:var(--text); }
.article-meta { display:flex; flex-wrap:wrap; gap:14px; margin-bottom:26px; }
.article-meta span { font-size:12.5px; color:var(--text-muted); font-weight:500; }
.article-lead { font-size:16.5px; color:var(--text-secondary); line-height:1.7; margin-bottom:26px; border-left:3px solid var(--green); padding-left:16px; }
.article-inner h2 { font-size:18px; font-weight:700; margin:28px 0 10px; letter-spacing:-.3px; color:var(--text); }
.article-inner p { font-size:15px; color:var(--text-secondary); line-height:1.75; margin-bottom:14px; }
.article-inner ul { margin:0 0 14px 20px; list-style:disc; }
.article-inner li { font-size:15px; color:var(--text-secondary); line-height:1.75; margin-bottom:6px; }
.article-inner a { color:var(--green-text); font-weight:600; }
.article-inner a:hover { text-decoration:underline; }
/* .article-inner a's element+class selector otherwise beats the plain
   .btn-primary class on specificity, which would leave the CTA button
   with green text on a green background. */
.article-inner a.btn-primary, .article-inner a.btn-primary:hover { color:#0a0a0a; text-decoration:none; }
.highlight-box { background:var(--green-bg); border:1px solid rgba(126,224,0,.3); border-radius:var(--radius-sm); padding:16px 20px; margin:22px 0; }
.highlight-box p { margin:0; color:var(--text); font-size:14.5px; font-weight:600; }
.article-cta { background:var(--card); border:1px solid var(--border); border-radius:var(--radius-md); box-shadow:var(--shadow-sm); padding:26px; margin-top:40px; text-align:left; }
.article-cta h3 { font-size:17px; font-weight:700; margin-bottom:8px; color:var(--text); }
.article-cta p { font-size:14px; color:var(--text-secondary); margin-bottom:16px; }
.article-cta a.btn-primary { padding:11px 22px; font-size:14px; }
.source-footer { margin-top:32px; padding-top:20px; border-top:1px solid var(--border); font-size:12px; color:var(--text-muted); }
.source-footer a { color:var(--green-text); font-weight:600; }
.source-footer a:hover { text-decoration:underline; }

/* ── NEWS / REVIEWS LISTING PAGE HERO ── */
.page-hero { padding:56px 24px 8px; text-align:center; }
.page-hero h1 { font-size:clamp(2rem,4.6vw,2.7rem); font-weight:800; letter-spacing:-1.2px; }
.page-hero p { font-size:15.5px; color:var(--text-secondary); max-width:560px; margin:14px auto 0; }

/* ── REVIEWS PAGE — score badge, "at a glance" insight box, JS-rendered
   review cards (avatar/badge/star-by-star), distinct from the homepage's
   static reviews-preview cards above ── */
.score-badge { display:inline-flex; align-items:center; gap:14px; background:var(--card); border:1px solid var(--border); border-radius:var(--radius-md); box-shadow:var(--shadow-sm); padding:14px 22px; margin-top:20px; }
.score-num { font-size:2.4rem; font-weight:800; color:var(--green-text); letter-spacing:-1px; }
.score-right { text-align:left; }
.score-stars { font-size:18px; color:#FBBC04; letter-spacing:2px; }
.score-label { font-size:12.5px; color:var(--text-muted); margin-top:2px; }
.g-logo { display:inline-flex; align-items:center; gap:4px; font-size:12px; color:var(--text-muted); margin-left:4px; }

.reviews-insight { background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); padding:28px 24px; margin:0 auto 40px; max-width:880px; }
.insight-themes { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:14px; margin-bottom:20px; }
.insight-theme { background:var(--green-bg); border:1px solid rgba(126,224,0,.25); border-radius:var(--radius-sm); padding:14px; }
.theme-label { font-size:10px; font-weight:700; color:var(--green-text); text-transform:uppercase; letter-spacing:.8px; margin-bottom:4px; }
.theme-value { font-size:13px; font-weight:700; color:var(--text); margin-bottom:4px; }
.theme-detail { font-size:12px; color:var(--text-secondary); line-height:1.5; }
.sentiment-tags { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:20px; }
.sentiment-tag { background:var(--green-bg); border:1px solid rgba(126,224,0,.25); color:var(--green-text); font-size:12px; font-weight:600; padding:4px 12px; border-radius:100px; }
.insight-quote { border-top:1px solid var(--border); padding-top:16px; }
.insight-quote p { font-size:14px; font-style:italic; color:var(--text-secondary); margin-bottom:4px; }
.insight-quote span { font-size:12px; color:var(--text-muted); }

.review-top { display:flex; align-items:center; gap:12px; margin-bottom:2px; }
.review-avatar { width:40px; height:40px; border-radius:50%; background:var(--green); display:flex; align-items:center; justify-content:center; font-size:13.5px; font-weight:800; color:#0a0a0a; flex-shrink:0; }
.local-guide-badge { font-size:10px; background:var(--green-bg); color:var(--green-text); border-radius:4px; padding:1px 6px; margin-left:6px; font-weight:700; }
.star.empty { color:var(--border-strong); }
.review-text { font-size:13.5px; color:var(--text-secondary); line-height:1.65; margin:10px 0 12px; }
.review-footer { display:flex; justify-content:space-between; align-items:center; }
.g-dot { width:10px; height:10px; border-radius:50%; background:conic-gradient(#4285F4 0 25%,#EA4335 25% 50%,#FBBC05 50% 75%,#34A853 75% 100%); }
.reviews-cta { text-align:center; padding:8px 0 8px; }
.reviews-cta p { color:var(--text-secondary); font-size:14px; margin-bottom:16px; }

@media(max-width:640px){
  .hero { padding:44px 20px 32px; }
  .section { padding:52px 20px; }
  .form-card { padding:24px; }
  /* Verified by scrolling a real article on a real viewport (not just a
     stitched full-page screenshot, which under-represents this): the
     floating call button sits fixed bottom-right and was overlapping the
     last line or two of body copy at almost every scroll position on long
     articles. Article text gets a permanent right-side gutter clear of the
     button's footprint instead. Widened when the button itself got bigger. */
  .article-inner { padding-right:96px; }
}