/* ==========================================================
   Mark Pest — Local Area Landing Suite
   Shared foundation: tokens, typography, header, footer, utils
   ========================================================== */

:root {
  --brand: #06a83c;
  --brand-deep: #04702a;
  --brand-dark: #06451c;
  --brand-soft: #e8f8ed;
  --brand-mist: #f3fbf6;
  --ink: #10231a;
  --ink-2: #3c4f45;
  --muted: #6b7d73;
  --line: rgba(6, 168, 60, 0.14);
  --paper: #ffffff;
  --canvas: #f7faf8;
  --gold: #c9a227;
  --radius: 22px;
  --radius-sm: 14px;
  --shadow-s: 0 6px 20px rgba(6, 69, 28, 0.06);
  --shadow-m: 0 18px 50px rgba(6, 69, 28, 0.10);
  --shadow-l: 0 34px 90px rgba(6, 69, 28, 0.16);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { -webkit-tap-highlight-color: transparent; }

html { scroll-behavior: smooth; scroll-padding-top: 96px; }

body {
  font-family: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--ink-2);
  background: var(--paper);
  font-size: 1.0125rem;
  line-height: 1.75;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6, .font-display {
  font-family: "Poppins", "Roboto", sans-serif;
  color: var(--ink);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.14;
}

h1 { font-size: clamp(2.1rem, 4.6vw, 3.6rem); }
h2 { font-size: clamp(1.7rem, 3.2vw, 2.65rem); }
h3 { font-size: clamp(1.2rem, 1.9vw, 1.6rem); }

p { margin-bottom: 1rem; }
a { text-decoration: none; color: var(--brand-deep); }
img { max-width: 100%; display: block; }

::selection { background: var(--brand); color: #fff; }

/* ---------- Eyebrow / kicker ---------- */
.kicker {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: "Poppins", sans-serif;
  font-size: .72rem; font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase; color: var(--brand-deep);
  background: var(--brand-soft);
  border: 1px solid var(--line);
  padding: .45rem 1rem; border-radius: 100px;
  margin-bottom: 1.1rem;
}
.kicker i, .kicker .dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--brand);
  box-shadow: 0 0 0 0 rgba(6,168,60,.55);
  animation: pulseDot 2.4s infinite;
}
@keyframes pulseDot {
  0% { box-shadow: 0 0 0 0 rgba(6,168,60,.5); }
  70% { box-shadow: 0 0 0 10px rgba(6,168,60,0); }
  100% { box-shadow: 0 0 0 0 rgba(6,168,60,0); }
}

.lead-xl { font-size: clamp(1.02rem, 1.35vw, 1.16rem); color: var(--ink-2); }
.text-brand { color: var(--brand-deep) !important; }
.bg-mist { background: var(--brand-mist); }
.bg-canvas { background: var(--canvas); }

.section { padding: clamp(64px, 8vw, 120px) 0; position: relative; }
.section-tight { padding: clamp(48px, 6vw, 84px) 0; }

/* ---------- Buttons ---------- */
.btn-mp {
  --b1: var(--brand); --b2: var(--brand-deep);
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: "Poppins", sans-serif; font-weight: 600; font-size: .94rem;
  padding: .9rem 1.6rem; border-radius: 100px; border: 0;
  color: #fff; background: linear-gradient(120deg, var(--b1), var(--b2));
  box-shadow: 0 12px 28px rgba(6, 112, 42, .28);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), filter .3s;
  position: relative; overflow: hidden;
}
.btn-mp::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 20%, rgba(255,255,255,.35) 45%, transparent 70%);
  transform: translateX(-120%); transition: transform .8s var(--ease);
}
.btn-mp:hover { color: #fff; transform: translateY(-3px); box-shadow: 0 18px 38px rgba(6, 112, 42, .34); }
.btn-mp:hover::after { transform: translateX(120%); }

.btn-ghost {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: "Poppins", sans-serif; font-weight: 600; font-size: .94rem;
  padding: .85rem 1.5rem; border-radius: 100px;
  color: var(--brand-dark); background: #fff;
  border: 1.5px solid var(--line);
  transition: all .35s var(--ease);
}
.btn-ghost:hover { color: var(--brand-dark); border-color: var(--brand); transform: translateY(-3px); box-shadow: var(--shadow-s); }

/* ---------- Header ---------- */
.mp-header {
  position: sticky; top: 0; z-index: 1030;
  background: rgba(255, 255, 255, .82);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid rgba(6, 69, 28, .07);
  transition: box-shadow .35s var(--ease), background .35s;
}
.mp-header.is-stuck { box-shadow: 0 10px 34px rgba(6, 69, 28, .09); background: rgba(255,255,255,.95); }
.mp-header .navbar { padding: .55rem 0; }
.mp-logo img { height: 40px; width: auto; }
@media (max-width: 575px) { .mp-logo img { height: 32px; } }

.mp-nav .nav-link {
  font-family: "Poppins", sans-serif; font-weight: 500; font-size: .93rem;
  color: var(--ink); padding: .5rem .95rem; border-radius: 100px;
  position: relative; transition: color .3s var(--ease);
}
.mp-nav .nav-link::before {
  content: ""; position: absolute; left: 50%; bottom: .28rem;
  width: 0; height: 2px; border-radius: 2px; background: var(--brand);
  transform: translateX(-50%); transition: width .35s var(--ease);
}
.mp-nav .nav-link:hover, .mp-nav .nav-link.active { color: var(--brand-deep); }
.mp-nav .nav-link:hover::before, .mp-nav .nav-link.active::before { width: 46%; }

.mp-call {
  display: inline-flex; align-items: center; gap: .65rem;
  background: linear-gradient(120deg, var(--brand), var(--brand-deep));
  color: #fff; border-radius: 100px; padding: .6rem 1.15rem .6rem .6rem;
  font-family: "Poppins", sans-serif; font-weight: 600; font-size: .95rem;
  box-shadow: 0 10px 24px rgba(6, 112, 42, .26);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.mp-call:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 16px 32px rgba(6, 112, 42, .32); }
.mp-call .ring {
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255,255,255,.2); flex: 0 0 34px;
}
.mp-call .ring svg { width: 16px; height: 16px; fill: #fff; animation: shake 3s infinite; }
@keyframes shake {
  0%, 82%, 100% { transform: rotate(0); }
  85% { transform: rotate(-14deg); } 88% { transform: rotate(12deg); }
  91% { transform: rotate(-10deg); } 94% { transform: rotate(8deg); }
}
.mp-call small { display: block; font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; opacity: .82; line-height: 1; margin-bottom: 2px; }

.navbar-toggler { border: 1px solid var(--line); border-radius: 12px; padding: .35rem .6rem; }
.navbar-toggler:focus { box-shadow: none; }
.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%2306451c' stroke-linecap='round' stroke-width='2.4' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
@media (max-width: 991.98px) {
  .mp-nav { padding: .5rem 0 1rem; }
  .mp-nav .nav-link { padding: .6rem .2rem; }
}

/* ---------- Cards ---------- */
.mp-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-s);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s;
}
.mp-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-m); border-color: rgba(6,168,60,.3); }

.shot { position: relative; overflow: hidden; border-radius: var(--radius); background: linear-gradient(135deg, var(--brand-soft), #dff2e6); }
.shot img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.shot:hover img { transform: scale(1.06); }
.shot::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(6,69,28,0) 45%, rgba(6,69,28,.42) 100%);
}
.shot.no-veil::after { display: none; }

/* ---------- Decorative ---------- */
.orb { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .5; pointer-events: none; z-index: 0; }
.orb-a { background: radial-gradient(circle, rgba(6,168,60,.42), transparent 70%); }
.orb-b { background: radial-gradient(circle, rgba(201,162,39,.28), transparent 70%); }
.grid-fade {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image: linear-gradient(rgba(6,69,28,.055) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(6,69,28,.055) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 0%, #000 5%, transparent 72%);
  mask-image: radial-gradient(ellipse at 50% 0%, #000 5%, transparent 72%);
}
.float-slow { animation: floaty 7s ease-in-out infinite; }
.float-slower { animation: floaty 11s ease-in-out infinite; }
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-16px); } }

.sheen-line { height: 1px; background: linear-gradient(90deg, transparent, var(--line), transparent); }

/* ---------- Reveal on scroll ---------- */
[data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease), transform .8s var(--ease); will-change: opacity, transform; }
[data-reveal].in { opacity: 1; transform: none; }
[data-reveal][data-d="1"] { transition-delay: .09s; }
[data-reveal][data-d="2"] { transition-delay: .18s; }
[data-reveal][data-d="3"] { transition-delay: .27s; }
[data-reveal][data-d="4"] { transition-delay: .36s; }

/* ---------- Stats ---------- */
.stat-num { font-family: "Poppins", sans-serif; font-weight: 700; font-size: clamp(1.9rem, 3.4vw, 2.8rem); color: var(--brand-deep); line-height: 1; letter-spacing: -.03em; }
.stat-label { font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 500; }

/* ---------- Testimonials ---------- */
.quote-mark { font-family: "Poppins", serif; font-size: 3.4rem; line-height: .6; color: rgba(6,168,60,.24); }
.stars { color: var(--gold); letter-spacing: 2px; font-size: .95rem; }
.avatar {
  width: 46px; height: 46px; border-radius: 50%; flex: 0 0 46px;
  display: grid; place-items: center; font-family: "Poppins", sans-serif; font-weight: 600;
  color: #fff; background: linear-gradient(135deg, var(--brand), var(--brand-deep));
}

/* ---------- FAQ ---------- */
.mp-faq .accordion-item { border: 1px solid var(--line); border-radius: var(--radius-sm) !important; margin-bottom: .8rem; overflow: hidden; background: #fff; box-shadow: var(--shadow-s); }
.mp-faq .accordion-button {
  font-family: "Poppins", sans-serif; font-weight: 600; font-size: 1rem; color: var(--ink);
  background: #fff; padding: 1.1rem 1.25rem; box-shadow: none !important;
}
.mp-faq .accordion-button:not(.collapsed) { color: var(--brand-deep); background: var(--brand-mist); }
.mp-faq .accordion-button::after {
  background-image: none; content: "+"; font-size: 1.55rem; font-weight: 400; line-height: 1;
  width: auto; height: auto; color: var(--brand-deep); transition: transform .35s var(--ease);
}
.mp-faq .accordion-button:not(.collapsed)::after { transform: rotate(45deg); }
.mp-faq .accordion-body { padding: 0 1.25rem 1.3rem; color: var(--ink-2); }

/* ---------- Map ---------- */
.map-frame { position: relative; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow-m); background: var(--brand-soft); }
.map-frame iframe { width: 100%; height: 100%; min-height: 420px; border: 0; display: block; filter: saturate(1.05); }
.map-pin {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -100%);
  pointer-events: none; z-index: 3; display: grid; place-items: center;
}
.map-pin .pin-body {
  width: 40px; height: 40px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg);
  background: linear-gradient(135deg, var(--brand), var(--brand-deep));
  box-shadow: 0 10px 22px rgba(6,69,28,.35); display: grid; place-items: center;
  animation: pinDrop 2.6s var(--ease) infinite;
}
.map-pin .pin-body span { transform: rotate(45deg); color: #fff; font-size: 1rem; }
@keyframes pinDrop { 0%,72%,100% { transform: rotate(-45deg) translateY(0); } 82% { transform: rotate(-45deg) translateY(-12px); } }
.map-pin .pin-wave {
  position: absolute; bottom: -10px; width: 34px; height: 12px; border-radius: 50%;
  background: rgba(6,168,60,.3); animation: waveScale 2.6s ease-in-out infinite;
}
@keyframes waveScale { 0%,100% { transform: scale(1); opacity: .5; } 50% { transform: scale(1.7); opacity: .12; } }

/* ---------- Contact ---------- */
.field {
  width: 100%; border: 1px solid var(--line); border-radius: 14px; padding: .85rem 1.05rem;
  font-size: .96rem; color: var(--ink); background: #fff; transition: border-color .3s, box-shadow .3s;
}
.field::placeholder { color: #9aa9a1; }
.field:focus { outline: 0; border-color: var(--brand); box-shadow: 0 0 0 4px rgba(6,168,60,.12); }
.form-note { font-size: .82rem; color: var(--muted); }

/* ---------- Footer ---------- */
.mp-footer { background: linear-gradient(180deg, #ffffff, var(--brand-mist)); border-top: 1px solid var(--line); padding: 64px 0 28px; }
.mp-footer a { color: var(--ink-2); transition: color .3s, padding-left .3s; }
.mp-footer a:hover { color: var(--brand-deep); }
.mp-footer h6 { font-family: "Poppins", sans-serif; font-weight: 600; color: var(--ink); letter-spacing: .02em; margin-bottom: 1rem; }
.footer-bottom { border-top: 1px solid var(--line); margin-top: 40px; padding-top: 20px; font-size: .86rem; color: var(--muted); }

/* ---------- Sticky mobile call bar ---------- */
.mobile-call {
  position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 1040;
  display: none; justify-content: space-between; align-items: center; gap: .75rem;
  background: rgba(255,255,255,.92); backdrop-filter: blur(12px);
  border: 1px solid var(--line); border-radius: 100px; padding: .5rem .5rem .5rem 1.1rem;
  box-shadow: var(--shadow-m);
}
@media (max-width: 767.98px) { .mobile-call { display: flex; } body { padding-bottom: 78px; } }
.mobile-call .lbl { font-family: "Poppins", sans-serif; font-weight: 600; font-size: .84rem; color: var(--ink); }

/* ---------- Progress ---------- */
.read-bar { position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 1050; background: linear-gradient(90deg, var(--brand), var(--gold)); transition: width .12s linear; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  [data-reveal] { opacity: 1; transform: none; }
}