:root {
  --ink: #1A1A1A;
  --ink-strong: #101010;
  --ink-soft: #0A0A0A;
  --cream: #F2EFE9;
  --cream-soft: #F7F5F0;
  --cream-warm: #FAF6EC;
  --accent: #F5A623;
  --accent-hover: #B87400;
  --text-muted-dark: #C8C3B8;
  --text-muted-dark-2: #A9A49A;
  --text-body: #43403A;
  --text-body-soft: #5C584F;
}

* { box-sizing: border-box; }

html, body { overflow-x: hidden; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: Barlow, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  padding-bottom: 76px;
}

a { color: var(--ink); }
a:hover { color: var(--accent-hover); }

h1, h2, h3 {
  font-family: Archivo, sans-serif;
  font-weight: 900;
  letter-spacing: -0.02em;
  margin: 0;
}

img { display: block; max-width: 100%; }

.wrap { max-width: 1180px; margin: 0 auto; }
.wrap--narrow { max-width: 820px; }

@keyframes pulseDot { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

/* Topbar */
.topbar { background: var(--ink-strong); color: var(--cream); }
.topbar__inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 14px 16px; padding: 14px 20px; max-width: 1180px; margin: 0 auto;
}
.topbar__brand { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; min-width: 0; }
.topbar__logo {
  background: var(--cream); border-radius: 10px; padding: 6px 10px; width: 76px; height: 80px;
  overflow: hidden; flex: none;
}
.topbar__logo img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.5); }

.badge {
  display: inline-flex; align-items: center; gap: 11px;
  font-family: Archivo, sans-serif; font-weight: 700;
  font-size: clamp(13px, 3.2vw, 16px); letter-spacing: .08em; text-transform: uppercase;
}
.badge--live { border: 1px solid rgba(242, 239, 233, .3); padding: 11px 18px; border-radius: 100px; }
.badge__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); animation: pulseDot 1.8s ease-in-out infinite; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: Archivo, sans-serif; font-weight: 900; text-decoration: none;
  line-height: 1.15; white-space: nowrap;
  border-radius: 100px; border: none; cursor: pointer;
}
.btn--sm { font-size: 14px; padding: 11px 18px; font-weight: 700; }
.btn--lg { font-size: 17px; padding: 16px 24px; }
.btn--block { width: 100%; padding: 18px; font-size: 20px; }
.btn--accent-solid { background: var(--accent); color: var(--ink-strong); }
.btn--dark-solid { background: var(--ink-strong); color: var(--accent); }
.btn--outline-light {
  border: 1px solid rgba(242, 239, 233, .4); color: var(--cream); font-size: 16px;
  padding: 13px 22px 13px 16px;
}

/* Hero */
.hero { background: var(--ink-strong); color: var(--cream); }
.hero__content {
  padding: 26px 20px 0; max-width: 1180px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 26px; align-items: center;
}
.hero__text { display: flex; flex-direction: column; gap: 20px; }
.hero__title {
  font-size: clamp(34px, 8.5vw, 58px); line-height: 1; letter-spacing: -.025em; text-wrap: pretty;
}
.text-accent { color: var(--accent); }
.hero__lead { font-size: clamp(16px, 4.2vw, 19px); line-height: 1.55; margin: 0; max-width: 46ch; color: var(--text-muted-dark); }
.hero__cta { display: flex; flex-direction: column; gap: 12px; max-width: 440px; }

.cta-call {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  background: var(--accent); color: var(--ink-strong); text-decoration: none;
  padding: 14px 14px 14px 22px; border-radius: 100px;
}
.cta-call__text { display: flex; flex-direction: column; gap: 2px; }
.cta-call__label { font-family: Archivo, sans-serif; font-weight: 700; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; opacity: .75; }
.cta-call__number { font-family: Archivo, sans-serif; font-weight: 900; font-size: clamp(17px, 4.6vw, 21px); letter-spacing: -.01em; }
.cta-call__arrow {
  width: 40px; height: 40px; border-radius: 50%; background: var(--ink-strong); color: var(--accent);
  display: flex; align-items: center; justify-content: center; font-family: Archivo, sans-serif; font-weight: 900; font-size: 17px; flex: none;
}

.hero__wa-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.wa-btn__text { display: flex; flex-direction: column; gap: 1px; text-align: left; }
.wa-btn__title { font-family: Archivo, sans-serif; font-weight: 900; font-size: 16px; line-height: 1.15; }
.wa-btn__sub { font-family: Barlow, sans-serif; font-weight: 500; font-size: 12.5px; color: var(--text-muted-dark-2); }
.hero__wa-note { font-size: 14.5px; color: var(--text-muted-dark-2); }

.hero__photo { position: relative; width: 100%; aspect-ratio: 589 / 872; max-width: 360px; margin-left: auto; margin-right: auto; min-height: 230px; border-radius: 14px; overflow: hidden; }
.hero__photo img { width: 100%; height: 100%; object-fit: cover; }

.brandstrip { padding: 26px 20px 34px; border-top: 1px solid rgba(242, 239, 233, .14); margin-top: 30px; text-align: center; }
.brandstrip__name { font-family: Archivo, sans-serif; font-weight: 900; color: var(--accent); font-size: min(7vw, 58px); line-height: 1.02; letter-spacing: -.03em; }
.brandstrip__tag { margin-top: 12px; font-family: Archivo, sans-serif; font-weight: 700; font-size: clamp(11px, 2.8vw, 14px); letter-spacing: .24em; text-transform: uppercase; color: var(--text-muted-dark); }

/* Sections */
.section { padding: 52px 20px; }
.section--dark { background: var(--ink-strong); color: var(--cream); }
.section__head {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 22px; margin-bottom: 28px;
}
.section__head h2 { font-size: clamp(27px, 6.5vw, 42px); line-height: 1.05; }
.section__lead { margin: 0; font-size: 17px; line-height: 1.6; color: var(--text-body); max-width: 52ch; }
.section__lead--dark { color: var(--text-muted-dark); }
.h-md { font-size: clamp(27px, 6.5vw, 38px); line-height: 1.05; margin: 0 0 12px; }
.max-20ch { max-width: 20ch; margin: 0 0 14px; font-size: clamp(27px, 6.5vw, 42px); line-height: 1.05; }
.text-center { text-align: center; }

/* Service cards */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.card {
  border: 1px solid rgba(26, 26, 26, .18); border-radius: 14px; padding: 24px;
  display: flex; flex-direction: column; gap: 10px; background: var(--cream-soft);
}
.card__bar { width: 34px; height: 6px; background: var(--accent); border-radius: 100px; }
.card h3 { font-size: 20px; margin: 6px 0 0; }
.card p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--text-body); }

/* Split layouts */
.split { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; align-items: start; }
.split--reverse { align-items: center; gap: 34px; }
.split--zone { gap: 34px; align-items: center; }
.split--contact { gap: 34px; }
.split__photo { position: relative; width: 100%; aspect-ratio: 864 / 576; min-height: 220px; border-radius: 14px; overflow: hidden; }
.split__photo img { width: 100%; height: 100%; object-fit: cover; }
.split__photo--square { aspect-ratio: 4 / 3; min-height: 240px; align-self: center; }

.pill-tag {
  display: inline-block; background: var(--accent); color: var(--ink-strong);
  font-family: Archivo, sans-serif; font-weight: 900; font-size: 11.5px; letter-spacing: .16em;
  text-transform: uppercase; padding: 7px 13px; border-radius: 100px; margin-bottom: 16px;
}

.feature-list { display: flex; flex-direction: column; gap: 14px; margin-bottom: 24px; }
.feature-list__item { border-top: 1px solid rgba(242, 239, 233, .22); padding-top: 14px; }
.feature-list__item h3 { font-size: 18px; margin: 0 0 6px; color: var(--accent); }
.feature-list__item p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--text-muted-dark); }

.bullet-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.bullet-list li { position: relative; padding-left: 21px; font-size: 16.5px; line-height: 1.55; color: var(--text-body); }
.bullet-list li::before {
  content: ""; position: absolute; left: 0; top: 8px; width: 9px; height: 9px; border-radius: 50%; background: var(--accent);
}
.bullet-list strong { font-family: Archivo, sans-serif; font-weight: 700; color: var(--ink); }

/* Steps panel */
.panel {
  background: var(--cream-warm); border: 1px solid rgba(245, 166, 35, .45); border-radius: 20px; padding: 32px 24px;
}
.split--steps { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 26px; align-items: center; }
.split--steps > div:first-child .btn { margin-top: 6px; }

.steps { list-style: none; margin: 0; padding: 0 0 0 6px; position: relative; }
.steps::before {
  content: ""; position: absolute; left: 25px; top: 14px; bottom: 14px; width: 2px; background: rgba(26, 26, 26, .18);
}
.steps__item { position: relative; display: flex; gap: 18px; padding-bottom: 22px; }
.steps__item:last-child { padding-bottom: 0; }
.steps__num {
  position: relative; z-index: 1; width: 40px; height: 40px; border-radius: 50%;
  background: var(--ink-strong); color: var(--accent); display: flex; align-items: center; justify-content: center;
  font-family: Archivo, sans-serif; font-weight: 900; font-size: 17px; flex: none;
}
.steps__num--last { background: var(--accent); color: var(--ink-strong); }
.steps__item h3 { font-size: 18px; margin: 0 0 5px; }
.steps__item p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--text-body); }

/* Zone list + map */
.zone-list { list-style: none; margin: 0 0 18px; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px 18px; }
.zone-list__item {
  display: flex; align-items: center; gap: 10px; font-family: Archivo, sans-serif; font-weight: 700; font-size: 16px;
}
.zone-list__item::before {
  content: ""; width: 12px; height: 12px; border-radius: 50% 50% 50% 0; background: var(--accent); transform: rotate(-45deg); flex: none;
}
.zone-list__item--base::before { background: var(--ink-strong); }
.zone-note { margin: 0; font-size: 15.5px; color: var(--text-body-soft); }

.map-frame {
  border: 1px solid rgba(26, 26, 26, .18); border-radius: 16px; overflow: hidden;
  background: var(--cream-soft); min-height: 320px; display: flex;
}
#map { width: 100%; min-height: 320px; }
.leaflet-container { font-family: Barlow, system-ui, sans-serif; background: var(--cream); }
.pin { background: var(--accent); border: 2px solid var(--ink-strong); width: 16px; height: 16px; border-radius: 50%; box-shadow: 0 0 0 4px rgba(245, 166, 35, .28); }
.pin.base { background: var(--ink-strong); border-color: var(--accent); width: 20px; height: 20px; }
.lbl {
  font-family: Archivo, system-ui, sans-serif; font-weight: 700; font-size: 12.5px; color: var(--ink);
  background: var(--cream); border: 1px solid rgba(26, 26, 26, .25); border-radius: 100px; padding: 3px 9px; white-space: nowrap;
}

/* Reviews */
.reviews__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 24px; }
.reviews__score { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.score-badge {
  display: flex; align-items: center; gap: 12px; border: 1px solid rgba(26, 26, 26, .18);
  border-radius: 100px; padding: 10px 18px; background: #FFFFFF;
}
.score-badge__num { font-family: Archivo, sans-serif; font-weight: 900; font-size: 22px; line-height: 1; }
.score-badge__stars { color: var(--accent); font-size: 17px; letter-spacing: .08em; }
.score-badge__count { font-size: 14.5px; color: var(--text-body); white-space: nowrap; }
.link-strong { font-family: Archivo, sans-serif; font-weight: 700; font-size: 15px; text-decoration: none; }

.review-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; align-items: start; }
.review-card { border: 1px solid rgba(26, 26, 26, .18); border-radius: 16px; padding: 22px; background: var(--cream-soft); }
.review-card__head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.review-avatar {
  width: 40px; height: 40px; border-radius: 50%; background: var(--ink-strong); color: var(--accent);
  display: flex; align-items: center; justify-content: center; font-family: Archivo, sans-serif; font-weight: 900; font-size: 16px; flex: none;
}
.review-name { font-family: Archivo, sans-serif; font-weight: 700; font-size: 16px; }
.review-meta { font-size: 13.5px; color: var(--text-body-soft); }
.review-stars { color: var(--accent); font-size: 17px; letter-spacing: .08em; margin-bottom: 10px; }
.review-card p { margin: 0 0 10px; font-size: 15.5px; line-height: 1.6; color: var(--text-body); }
.review-card p:last-child { margin-bottom: 0; }

/* FAQ */
.faq__item { border-top: 1px solid rgba(26, 26, 26, .18); padding: 18px 0; }
.faq__q {
  width: 100%; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  background: none; border: none; padding: 0; cursor: pointer; text-align: left;
  font-family: Archivo, sans-serif; font-weight: 700; font-size: 17.5px; color: var(--ink); line-height: 1.35;
}
.faq__sign {
  flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: var(--ink-strong);
  display: flex; align-items: center; justify-content: center; font-size: 17px; line-height: 1;
}
.faq__a { margin: 12px 0 0; font-size: 16.5px; line-height: 1.6; color: var(--text-body); max-width: 62ch; display: none; }
.faq__item.is-open .faq__a { display: block; }
.faq__item.is-open .faq__sign { content: "–"; }

/* Contact */
.contact-cta { display: flex; flex-direction: column; gap: 12px; max-width: 420px; }
.contact-form { border: 1px solid rgba(242, 239, 233, .22); border-radius: 16px; padding: 24px; }
.contact-form h3 { font-size: 19px; margin: 0 0 4px; }
.contact-form__note { margin: 0 0 16px; font-size: 15.5px; color: var(--text-muted-dark-2); }
.contact-form form { display: flex; flex-direction: column; gap: 12px; }
.contact-form input, .contact-form textarea {
  width: 100%; background: #1B1B19; border: 1px solid rgba(242, 239, 233, .25); border-radius: 8px;
  color: var(--cream); font-family: Barlow, sans-serif; font-size: 16px; padding: 14px; resize: vertical;
}
.contact-form button {
  background: var(--accent); color: var(--ink-strong); border: none; border-radius: 100px;
  font-family: Archivo, sans-serif; font-weight: 900; font-size: 17px; padding: 16px; cursor: pointer;
}

/* Footer */
.footer { background: var(--ink-soft); color: var(--text-muted-dark-2); padding: 30px 20px 36px; }
.footer__inner { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; }
.footer__brand { font-family: Archivo, sans-serif; font-weight: 700; font-size: 15px; color: var(--cream); }
.footer__meta { font-size: 14.5px; }

/* Sticky bottom bar (mobile only) */
.stickybar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--ink-strong); border-top: 1px solid var(--ink-strong);
}
.stickybar__call, .stickybar__wa {
  display: flex; align-items: center; justify-content: center; text-decoration: none;
  font-family: Archivo, sans-serif; font-weight: 900; font-size: 16px; padding: 18px 10px;
}
.stickybar__call { background: var(--ink-strong); color: var(--accent); }
.stickybar__wa { background: var(--accent); color: var(--ink-strong); }

@media (min-width: 768px) {
  .stickybar { display: none; }
  body { padding-bottom: 0; }
}