/* Friendly Local look: warm, sunny and neighborly. Deep green, sunshine yellow, sky blue. */
:root {
  --page: #FFFCF4;
  --ink: #0F3D2E; --text: #34514A; --muted: #5A736A;
  --accent: #FFC93C; --accent-dark: #F2B514; --on-accent: #0F3D2E; --accent-text: #A86A00;
  --green: #0F3D2E; --forest: #0F3D2E; --amber: #FFC93C;
  --cream: #EAF4FF; --tint: #EAF4FF; --sage: #E3F1E8; --line: #DCE8E1;
  --radius: 22px;
  --head: 'Bricolage Grotesque', system-ui, sans-serif;
  --body: 'DM Sans', system-ui, sans-serif;
  --hero-bg: #EAF4FF;
  --page-hero-bg: #EAF4FF;
  --ph-a: #E1EFE6; --ph-b: #D5E8DC; --ph-ink: #2F5A49;
  --pulse: #22B35E;
}
h1, h2, h3 { font-weight: 800; letter-spacing: -0.03em; line-height: 1.02; }
h1 { font-size: clamp(44px, 5.8vw, 72px); }
h2 { font-size: clamp(32px, 4vw, 50px); }
h3 { font-weight: 700; }
.s-hero h1 { font-size: clamp(48px, 6.4vw, 80px); line-height: .98; }
.s-hero h1 mark { background: var(--accent); color: var(--ink); border-radius: 18px; padding: 0 .18em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.eyebrow { letter-spacing: .1em; font-size: 13px; color: var(--accent-text); }
.btn { border-radius: 16px; font-weight: 700; }
.btn-primary { box-shadow: 0 10px 22px -14px rgba(168, 106, 0, .8); }
.btn-outline { background: #fff; border-color: var(--ink); color: var(--ink); }
.btn-outline:hover { background: var(--ink); color: #fff; }
a:hover { color: #1B5E47; }
.card-link { color: var(--ink); }

/* Top bar + header */
.topbar { background: var(--forest); color: #EAF4FF; font-size: 14px; }
.topbar .dot { background: var(--accent); }
.site-header { background: var(--page); border-bottom: 0; box-shadow: 0 1px 0 var(--line); }
.logo svg { width: 52px; height: 52px; }
.logo-name { font-family: var(--head); font-weight: 800; font-size: 23px; color: var(--ink); }
.logo-tag { font-family: var(--body); font-weight: 500; font-size: 14px; color: var(--muted); }
.main-nav a { font-weight: 700; border-radius: 12px; }
.main-nav a[aria-current="page"] { background: var(--sage); color: var(--ink); }
.header-phone:hover { color: #1B5E47; }

/* Hero */
.hero-badge { background: #fff; color: var(--ink); box-shadow: 0 6px 16px -10px rgba(15,61,46,.4); }
.qq-inline .qq-form { background: #fff; border-radius: 24px; padding: 12px; box-shadow: 0 24px 48px -28px rgba(15,61,46,.45); }
.qq-field { background: transparent; border-radius: 0; border-bottom: 2px solid #D7E3DD; padding: 6px 10px; color: var(--ink); }
.qq-field:focus-within { box-shadow: none; border-bottom-color: var(--ink); }
.hero-photo { border-radius: 240px 240px 32px 32px; aspect-ratio: 4 / 4.8; border: 10px solid #fff; box-shadow: 0 30px 60px -36px rgba(15,61,46,.5); max-width: 500px; margin-left: auto; }
.float-a { background: var(--ink); transform: rotate(-4deg); left: -6px; }
.float-a strong { color: #fff; font-family: var(--head); font-size: 22px; } .float-a span { color: #BFE0D2; }
.float-b { transform: rotate(3deg); }
.float-b strong { font-family: var(--head); }

/* Sections */
.trust { border-bottom: 0; background: var(--page); }
.trust-icon { border-radius: 50%; background: var(--accent); color: var(--ink); }
.card { border: 0; border-radius: 26px; box-shadow: 0 18px 40px -30px rgba(15,61,46,.45); }
.card-img { height: 220px; }
.card-body h3 { font-family: var(--head); }
.chip { background: #fff; border: 2px solid var(--line); }
.tint .chip { border-color: #fff; }
.chip-white { border-radius: 999px; border: 2px solid #fff; }
.ba { border-radius: 26px; gap: 8px; }
.ba figcaption { border-radius: 999px; padding: 5px 12px; background: #fff; color: var(--ink); }
.ba figure:last-child figcaption { background: var(--accent); color: var(--ink); }
.owner-photo { border-radius: 50%; border: 10px solid #fff; box-shadow: 0 30px 60px -36px rgba(15,61,46,.5); }
.owner-quote { font-weight: 800; }
.review { border-radius: 26px; }
.tint .review { box-shadow: 0 18px 40px -32px rgba(15,61,46,.5); }
.avatar { background: var(--accent); color: var(--ink); }
.steps-sec { background: var(--ink); }
.steps li { border-radius: 20px; }
.step-num { background: var(--accent); color: var(--ink); font-family: var(--head); }
.step-card { border-radius: 26px; }
.step-card .step-num { background: var(--accent); color: var(--ink); }
.value-card { border-top: 0; border-radius: 26px; box-shadow: 0 18px 40px -32px rgba(15,61,46,.5); }
.value-card h3 { font-family: var(--head); }
.faq details { border-radius: 18px; border: 2px solid var(--line); }
.faq summary::after { background: var(--accent); color: var(--ink); }
.form-card, .side-card { border-radius: 26px; }
.field input, .field select, .field textarea { border-radius: 14px; border: 2px solid var(--line); background: #FFFDF8; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--ink); }
.chip-btn { border: 2px solid var(--line); border-radius: 14px; }
.chip-btn[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.photo, .map { border-radius: 26px; }
.rating-card { border-radius: 26px; box-shadow: 0 18px 40px -30px rgba(15,61,46,.5); }
.season-card { border-top: 0; background: #fff; border-radius: 22px; padding: 22px 22px 24px; }
.local-sec .season-card, .section:not(.tint) .season-card { background: var(--tint); }
.stat strong { color: var(--ink); font-family: var(--head); }
.signature-name { color: var(--ink); font-family: var(--head); }
.rule-note { border-left-color: var(--accent); }
.post-cta { background: var(--ink); }
.page-hero { position: relative; overflow: hidden; }
.page-hero::after { content: ""; position: absolute; right: -80px; top: -80px; width: 260px; height: 260px; border-radius: 50%; background: var(--accent); opacity: .35; pointer-events: none; }
.page-hero .container, .page-hero .container-narrow { position: relative; z-index: 1; }

/* CTA band + footer */
.cta-band { background: var(--accent); }
.cta-band .btn-white { background: var(--ink); color: #fff; }
.cta-band .btn-white:hover { color: var(--accent); }
.site-footer { background: var(--forest); color: #BFE0D2; }
.site-footer a { color: #BFE0D2; }
.footer-bottom { color: #8FB8A6; }
.site-footer .socials a { background: rgba(255,255,255,.1); }

@media (max-width: 760px) {
  .mobile-bar { background: var(--page); }
  .mobile-bar a { background: var(--tint); color: var(--ink); border-radius: 14px; }
  .mobile-bar a.is-main { background: var(--accent); }
  .hero-photo { margin: 0 auto; }
}
