/* ============================================================
   LUSH LANDSCAPES — STYLESHEET
   System serif stack · No external font deps
   ============================================================ */

/* ---- Reset & Base ---- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --c:    #0f3d2e;
  --cl:   #174d3a;
  --cp:   #e8f5ee;
  --bg:   #f4f7f6;
  --w:    #fff;
  --t:    #333;
  --tl:   #555;
  --tm:   #6b6b6b;
  --bd:   #d0d5d3;
  --bl:   #e8eaeb;
  --r:    #dc2626;
  --g:    #16a34a;
  --am:   #f59e0b;
  --br:   12px;
  --bs:   8px;
  --sh:   0 2px 16px rgba(0,0,0,.07);
  --font: Georgia, Cambria, 'Times New Roman', Times, serif;
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--t);
  overflow-x: hidden;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a   { color: inherit; text-decoration: none; }

.sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ============================================================
   PAGE WRAPPER & MAIN CARD
   ============================================================ */
.wrap {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 40px 20px 96px;
}

.card {
  width: 100%;
  max-width: 1200px;
  background: var(--w);
  border: 3px solid var(--c);
  border-radius: 16px;
  padding: 48px 44px 44px;
  position: relative;
  box-shadow: var(--sh);
}

/* "Coming Soon" pill on top-centre of card border */
.badge {
  position: absolute;
  top: -17px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--c);
  color: var(--w);
  padding: 7px 32px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2.5px;
  border-radius: 30px;
  border: 3px solid var(--bg);
  text-transform: uppercase;
  white-space: nowrap;
  z-index: 1;
}

/* ============================================================
   HEADER  —  10% logo | 75% title  (2 cols at all screen sizes)
   ============================================================ */
.hdr {
  display: grid;
  grid-template-columns: 10% 1fr;
  column-gap: 28px;
  align-items: center;
  margin-bottom: 32px;
}

.hdr-logo {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.logo {
  width: 110px;
  height: 110px;
  object-fit: contain;
  border-radius: var(--bs);
}

.hdr-title {
  display: flex;
  align-items: center;
}

.sn {
  font-size: 28px;
  font-weight: 800;
  color: var(--c);
  letter-spacing: -.5px;
  line-height: 1.2;
}

/* Description lives inside the Services section box */
.desc {
  font-size: 14.5px;
  color: var(--tl);
  line-height: 1.75;
  margin-bottom: 22px;
}

/* ============================================================
   SECTION BOX  —  shared bordered container pattern
   ============================================================ */
.sb {
  border: 2px solid var(--c);
  border-radius: var(--br);
  padding: 30px 28px 28px;
  position: relative;
  margin-bottom: 28px;
}

/* Top-centre pill label that "sits on" the border */
.sb-lbl {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--w);
  color: var(--c);
  padding: 4px 20px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  border: 2px solid var(--c);
  border-radius: 20px;
  white-space: nowrap;
  z-index: 2;  /* above map container */
}

/* ============================================================
   SERVICES GRID
   ============================================================ */
.svcs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  padding-top: 6px;         /* room for card labels */
}

/* Each service category card */
.svc {
  border: 2px solid var(--c);
  border-radius: var(--br);
  padding: 26px 18px 18px;
  background: var(--w);
  position: relative;
  font-size: 13px;
  transition: transform .2s, box-shadow .2s;
}
.svc:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(15,61,46,.12);
}

/* Centered pill label on the card's top border */
.svc-lbl {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--w);
  color: var(--c);
  padding: 3px 14px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .3px;
  border: 2px solid var(--c);
  border-radius: 20px;
  white-space: nowrap;
  text-align: center;
}

.svc ul {
  padding-left: 17px;
  list-style: disc;
}
.svc li {
  margin-bottom: 8px;
  line-height: 1.5;
  color: var(--tl);
}
.svc li:last-child { margin-bottom: 0; }

/* ============================================================
   MAP
   ============================================================ */
.mapc {
  width: 100%;
  height: 420px;
  border-radius: calc(var(--br) - 2px);
  overflow: hidden;
  margin-bottom: 14px;
  border: 1.5px solid var(--bl);
  position: relative;
  z-index: 0;
  isolation: isolate;  /* contain Leaflet stacking context */
}

/* ============================================================
   CITIES CHIPS  —  bordered box, carousel on mobile
   ============================================================ */
.locs-box {
  border: 2px solid var(--c);
  border-radius: var(--bs);
  padding: 14px 16px;
  background: var(--cp);
}

.locs {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  justify-content: flex-start;
  gap: 8px;
  scroll-snap-type: x mandatory;
  padding-bottom: 6px;
  scrollbar-width: thin;
  scrollbar-color: var(--c) var(--bl);
}
.locs::-webkit-scrollbar        { height: 4px; }
.locs::-webkit-scrollbar-track  { background: var(--bl); border-radius: 2px; }
.locs::-webkit-scrollbar-thumb  { background: var(--c);  border-radius: 2px; }

.loc {
  padding: 7px 18px;
  border-radius: 20px;
  border: 1.5px solid var(--c);
  background: var(--w);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--c);
  transition: all .2s;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  scroll-snap-align: start;
  -webkit-user-select: none;
  user-select: none;
}
.loc:hover,
.loc.on {
  background: var(--c);
  color: var(--w);
}

/* ============================================================
   CONTACT  —  3-column grid inside a bordered box
   ============================================================ */
.cg {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0;
}

.cg-col {
  padding: 4px 24px;
}
.cg-col:first-child { padding-left: 0; }
.cg-col:last-child  { padding-right: 0; }
.cg-col + .cg-col   { border-left: 2px solid var(--bl); }

.cg-col-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--c);
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 1.5px solid var(--bl);
}

.cg-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
  font-size: 13px;
  color: var(--tl);
  line-height: 1.55;
}
.cg-row:last-child { margin-bottom: 0; }

.cg-icon {
  width: 36px;
  height: 36px;
  background: var(--cp);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}
.cg-icon svg {
  width: 16px;
  height: 16px;
  stroke: var(--c);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cg-row strong {
  display: block;
  font-size: 13px;
  color: var(--t);
  font-weight: 600;
  margin-bottom: 3px;
}

/* Phone/email rows: number + button on one line */
.cg-inline {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.cg-inline strong { margin-bottom: 0; }

/* CTA column — left-aligned, same style as other two columns */
.cg-quote {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}
.cg-quote p {
  font-size: 13px;
  color: var(--tl);
  line-height: 1.65;
  margin-bottom: 14px;
}

/* Shared button style */
.cb-btn {
  display: inline-block;
  padding: 7px 16px;
  background: var(--c);
  color: var(--w);
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  margin-top: 4px;
  transition: background .2s;
  text-decoration: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
}
.cb-btn:hover { background: var(--cl); }

.qbtn {
  padding: 13px 32px;
  font-size: 14px;
  font-weight: 700;
  border-radius: var(--bs);
  letter-spacing: .3px;
  margin-top: 0;
}

/* ============================================================
   FOOTER
   ============================================================ */
footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  background: var(--c);
  color: rgba(255,255,255,.85);
  text-align: center;
  padding: 13px 20px;
  font-size: 12.5px;
  z-index: 10;
  letter-spacing: .2px;
}

/* ============================================================
   TOAST NOTIFICATIONS
   ============================================================ */
.tc-wrap {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}

.tst {
  pointer-events: auto;
  min-width: 300px;
  max-width: 440px;
  padding: 14px 18px;
  border-radius: var(--bs);
  font-size: 13px;
  line-height: 1.5;
  color: var(--w);
  box-shadow: 0 8px 28px rgba(0,0,0,.18);
  display: flex;
  align-items: flex-start;
  gap: 10px;
  animation: toastIn .3s ease;
}
.tst.ok { background: #16a34a; }
.tst.er { background: #dc2626; }
.tst.in { background: #2563eb; }
.tst .t-i { font-size: 18px; flex-shrink: 0; }
.tst .t-m { flex: 1; }
.tst .t-x {
  background: none; border: none;
  color: rgba(255,255,255,.7);
  font-size: 18px; cursor: pointer;
  padding: 0; margin-left: 8px;
}

@keyframes toastIn  { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } }
@keyframes toastOut { from { opacity: 1; } to { opacity: 0; transform: translateX(40px); } }

/* ============================================================
   PAGE LOADER
   ============================================================ */
.pld {
  display: none;
  position: fixed; inset: 0;
  background: rgba(255,255,255,.85);
  z-index: 8000;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 16px;
}
.pld.on  { display: flex; }
.pld-s {
  width: 44px; height: 44px;
  border: 4px solid var(--bl);
  border-top-color: var(--c);
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
.pld-t { font-size: 14px; font-weight: 600; color: var(--c); }
@keyframes spin { to { transform: rotate(360deg); } }

/* ============================================================
   MODALS
   ============================================================ */
.mo {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 5000;
  justify-content: center;
  align-items: flex-start;
  padding: 28px 16px;
  overflow-y: auto;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.mo.on { display: flex; }

.md {
  width: 100%;
  max-width: 640px;
  background: var(--w);
  border-radius: 14px;
  box-shadow: 0 16px 48px rgba(0,0,0,.12);
  animation: modalIn .25s ease;
  margin: auto;
  overflow: hidden;
}
.md-lg { max-width: 720px; }

@keyframes modalIn {
  from { opacity: 0; transform: translateY(-14px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.mh {
  padding: 24px 28px 16px;
  border-bottom: 1px solid var(--bl);
  position: relative;
}
.mh h2 { font-size: 20px; font-weight: 700; color: var(--c); margin-bottom: 6px; padding-right: 36px; }
.mh p  { font-size: 13px; color: var(--tm); line-height: 1.5; }

.mx {
  position: absolute; top: 18px; right: 20px;
  width: 32px; height: 32px;
  border: none; background: #f0f0f0;
  border-radius: 50%; font-size: 18px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: #555; transition: background .2s; line-height: 1;
}
.mx:hover { background: #e0e0e0; }

.mb {
  padding: 24px 28px;
  max-height: calc(100vh - 200px);
  overflow-y: auto;
}

.mf {
  padding: 16px 28px 24px;
  border-top: 1px solid var(--bl);
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.mf .btn { padding: 11px 28px; border-radius: var(--bs); font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer; border: none; transition: all .2s; }
.btn-c { background: #f0f0f0; color: #555; }
.btn-c:hover { background: #e0e0e0; }
.btn-s { background: var(--c); color: var(--w); }
.btn-s:hover:not(:disabled) { background: var(--cl); }
.btn-s:disabled { background: #a3b8b0; cursor: not-allowed; }

/* Legal text */
.lgl { font-size: 13px; color: var(--t); line-height: 1.7; }
.lgl h3 { font-size: 15px; font-weight: 700; color: var(--c); margin: 22px 0 8px; }
.lgl h3:first-child { margin-top: 0; }
.lgl p  { margin-bottom: 10px; }
.lgl ul { padding-left: 20px; margin-bottom: 12px; }
.lgl li { margin-bottom: 4px; }

/* ============================================================
   QUOTE FORM
   ============================================================ */
.fr    { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.fr.f1 { grid-template-columns: 1fr; }

.fg { position: relative; margin-bottom: 18px; }

.fg input,
.fg select,
.fg textarea {
  width: 100%;
  padding: 16px 14px 8px;
  border: 2px solid var(--bd);
  border-radius: var(--bs);
  font-family: inherit;
  font-size: 14px;
  color: var(--t);
  background: var(--w);
  outline: none;
  transition: border-color .2s;
  -webkit-appearance: none;
  appearance: none;
}

.fg select {
  padding-right: 36px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23777' d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}

.fg textarea { min-height: 88px; resize: vertical; }

.fg label {
  position: absolute;
  top: 50%; left: 14px;
  transform: translateY(-50%);
  font-size: 14px; color: var(--tm);
  pointer-events: none;
  transition: all .18s ease;
  background: var(--w);
  padding: 0 5px; z-index: 1;
}
.fg textarea ~ label { top: 20px; }

.fg input:focus,
.fg select:focus,
.fg textarea:focus { border-color: var(--c); }

.fg input:focus ~ label,
.fg input:not(:placeholder-shown) ~ label,
.fg select:focus ~ label,
.fg select:not([data-e="1"]) ~ label,
.fg textarea:focus ~ label,
.fg textarea:not(:placeholder-shown) ~ label,
.fg label.up {
  top: 0; left: 10px;
  transform: translateY(-50%);
  font-size: 11px; font-weight: 600; color: var(--c);
}

.fg.vok input              { border-color: var(--g); }
.fg.vok label,
.fg.vok label.up           { color: var(--g); }
.fg.err input,
.fg.err select,
.fg.err textarea           { border-color: var(--r); }

/* Email chip */
.ea { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); z-index: 2; }
.ec {
  padding: 5px 14px; border-radius: 20px;
  font-size: 11px; font-weight: 700;
  cursor: pointer; border: none;
  letter-spacing: .3px; transition: all .2s; white-space: nowrap;
}
.ec-v  { background: var(--c);  color: var(--w); }
.ec-v:hover { background: var(--cl); }
.ec-ok { background: var(--g);  color: var(--w); cursor: default; }
.ec-w  { background: var(--am); color: var(--w); cursor: wait; }

/* OTP row */
.otp-r     { display: none; align-items: flex-start; gap: 10px; margin-top: -10px; margin-bottom: 18px; }
.otp-r.on  { display: flex; }
.otp-r .fg { flex: 1; margin-bottom: 0; }
.btn-o {
  padding: 14px 18px;
  background: var(--c); color: var(--w);
  border: none; border-radius: var(--bs);
  font-family: inherit; font-size: 13px; font-weight: 600;
  cursor: pointer; white-space: nowrap; transition: background .2s;
}
.btn-o:hover:not(:disabled) { background: var(--cl); }
.btn-o:disabled { background: #a3b8b0; cursor: not-allowed; }
.otp-tm { font-size: 11px; color: var(--tm); margin-top: 4px; }

/* Phone — custom Canada prefix */
.ph-wrap {
  display: flex;
  align-items: stretch;
  border: 2px solid var(--bd);
  border-radius: var(--bs);
  background: var(--w);
  overflow: hidden;
  transition: border-color .2s;
}
.ph-wrap:focus-within { border-color: var(--c); }
.fg.err .ph-wrap       { border-color: var(--r); }

.ph-prefix {
  display: flex; align-items: center; gap: 6px;
  padding: 0 10px 0 12px;
  border-right: 1.5px solid var(--bd);
  background: #f7faf9;
  flex-shrink: 0; cursor: default; -webkit-user-select: none; user-select: none;
}
.ph-flag { width: 22px; height: 15px; object-fit: cover; border-radius: 2px; display: block; }
.ph-code { font-size: 13px; font-weight: 700; color: var(--t); letter-spacing: .3px; }

.ph-wrap input[type="tel"] {
  border: none !important;
  border-radius: 0 !important;
  padding: 16px 14px 8px 12px !important;
  flex: 1; min-width: 0;
}
.ph-wrap input[type="tel"]:focus { box-shadow: none; }

#pG label { top: 0; left: 10px; transform: translateY(-50%); font-size: 11px; font-weight: 600; color: var(--c); }
#pG.err label { color: var(--r); }

/* File upload */
.fua {
  border: 2px dashed var(--bd); border-radius: var(--bs);
  padding: 12px 16px;
  cursor: pointer; transition: all .2s;
  display: flex; align-items: center; gap: 12px;
}
.fua:hover, .fua.dg { border-color: var(--c); background: var(--cp); }
.fui {
  width: 36px; height: 36px; background: var(--cp);
  border-radius: 50%; display: flex; flex-shrink: 0;
  align-items: center; justify-content: center;
}
.fui svg { width: 18px; height: 18px; stroke: var(--c); fill: none; stroke-width: 2; }
.fug { flex: 1; min-width: 0; }
.fua .ft { font-size: 13px; font-weight: 600; color: var(--t); margin-bottom: 1px; }
.fua .fs { font-size: 11px; color: var(--tm); }
.fua .fb {
  flex-shrink: 0; white-space: nowrap; margin-left: auto;
  padding: 7px 16px;
  background: var(--c); color: var(--w); border-radius: 6px;
  font-size: 12px; font-weight: 600; transition: background .2s;
}
.fua:hover .fb { background: var(--cl); }
.fls { margin-top: 8px; }
.fi  { display: flex; align-items: center; padding: 8px 12px; background: #f9fafb; border-radius: 6px; margin-bottom: 4px; font-size: 12px; color: #444; }
.fi .fn { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-right: 8px; }
.fi .fz { color: var(--tm); font-size: 11px; margin-right: 8px; flex-shrink: 0; }
.fi .fx { background: none; border: none; color: var(--r); font-size: 18px; cursor: pointer; padding: 0 2px; line-height: 1; }
.fsi    { font-size: 11px; color: var(--tm); margin-top: 4px; }

/* Honeypot */
.hp { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; overflow: hidden; }

/* Terms checkbox */
.lck { display: flex; align-items: flex-start; gap: 8px; font-size: 12px; color: var(--tl); line-height: 1.5; }
.lck input[type="checkbox"] {width: 16px; height: 16px; accent-color: var(--c); flex-shrink: 0; cursor: pointer; }
.lck a { color: var(--c); text-decoration: underline; font-weight: 600; cursor: pointer; }
.lck a:hover { color: var(--cl); }

/* Success state */
.ss    { display: none; text-align: center; padding: 48px 24px; }
.ss.on { display: block; }
.si { width: 68px; height: 68px; background: var(--g); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 18px; }
.si svg { width: 34px; height: 34px; stroke: var(--w); fill: none; stroke-width: 2.5; }
.ss h3  { font-size: 20px; color: var(--c); margin-bottom: 10px; font-weight: 700; }
.ss p   { font-size: 14px; color: var(--tl); line-height: 1.6; max-width: 400px; margin: 0 auto; }

/* ============================================================
   LEAFLET POPUP
   ============================================================ */
.leaflet-popup-content { margin: 12px 14px !important; line-height: 1.5; }

.mk-pop { min-width: 170px; }

.mk-city {
  font-size: 13.5px;
  font-weight: 700;
  color: #0f3d2e;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
}

.mk-pop p {
  font-size: 12px;
  color: #666;
  margin: 0 0 10px;
  line-height: 1.55;
}

.mk-btn {
  display: block;
  width: 100%;
  padding: 8px 12px;
  background: #0f3d2e;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-family: Georgia, Cambria, 'Times New Roman', Times, serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .3px;
  cursor: pointer;
  text-align: center;
  transition: background .18s;
}
.mk-btn:hover { background: #174d3a; }

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* Tablet */
@media (max-width: 1024px) {
  .svcs { grid-template-columns: repeat(2, 1fr); }
  .svc-lbl { font-size: 10px; }
}

/* Small tablet / large mobile */
@media (max-width: 768px) {
  .card  { padding: 36px 20px 32px; }

  /* Header: keep 2 cols, shrink sizes */
  .hdr  { column-gap: 16px; margin-bottom: 24px; }
  .logo { width: 80px; height: 80px; }
  .sn   { font-size: 24px; }
  .desc { font-size: 13.5px; }

  /* Section boxes */
  .sb { padding: 26px 18px 22px; }

  /* Services: 1 column, labels may wrap */
  .svcs { grid-template-columns: 1fr; gap: 24px; }
  .svc-lbl { white-space: normal; width: max-content; max-width: 80%; }

  /* Map */
  .mapc { height: 280px; }

  /* Contact: stack columns */
  .cg { grid-template-columns: 1fr; }
  .cg-col + .cg-col { border-left: none; border-top: 2px solid var(--bl); padding-top: 20px; margin-top: 4px; }
  .cg-col { padding: 0; }
  .cg-col:first-child { padding-left: 0; }
  .cg-col:last-child  { padding-right: 0; padding-bottom: 0; }
  .cg-quote { align-items: flex-start; }

  /* Modal */
  .mb, .mh, .mf { padding-left: 18px; padding-right: 18px; }

  /* Form */
  .fr { grid-template-columns: 1fr; }

  /* Toast */
  .tst { min-width: auto; max-width: calc(100vw - 40px); }
}

/* Mobile */
@media (max-width: 540px) {
  .card  { padding: 28px 14px 28px; }
  .badge { font-size: 10px; padding: 6px 20px; }
  .hdr   { column-gap: 10px; }
  .sn    { font-size: 16px; }
  .logo  { width: 58px; height: 58px; }
  .desc  { font-size: 13px; }
  .sb    { padding: 22px 14px 18px; }
  .sb-lbl { font-size: 9.5px; padding: 3px 14px; }
  .svc   { padding: 24px 14px 14px; }
}

/* ============================================================
   SKIP NAVIGATION
   ============================================================ */
.skip-link {
  position: absolute;
  top: -100%;
  left: 0;
  background: var(--c);
  color: var(--w);
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 700;
  border-radius: 0 0 var(--bs) 0;
  z-index: 9999;
  text-decoration: none;
  transition: top .2s;
}
.skip-link:focus { top: 0; }

/* ============================================================
   FOCUS VISIBLE  (keyboard navigation ring)
   ============================================================ */
:focus-visible {
  outline: 3px solid var(--c);
  outline-offset: 2px;
  border-radius: 3px;
}
:focus:not(:focus-visible) { outline: none; }

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:        .01ms !important;
    animation-iteration-count: 1     !important;
    transition-duration:       .01ms !important;
    scroll-behavior:           auto  !important;
  }
}

/* ============================================================
   DARK MODE
   ============================================================ */
@media (prefers-color-scheme: dark) {
  :root {
    --bg:  #0a1a12;
    --w:   #141f18;
    --t:   #e8ede9;
    --tl:  #b0c0b4;
    --tm:  #8a9e90;
    --bd:  #2a3f30;
    --bl:  #1e2e22;
    --sh:  0 2px 16px rgba(0,0,0,.4);
  }
  .sb-lbl  { background: var(--w); }
  .fg label { background: var(--w); }
  .mk-city { color: #4caf82; }
  .mk-btn  { background: #174d3a; }
  .mk-btn:hover { background: #1e6348; }
}

/* ============================================================
   HIGH CONTRAST (Windows forced-colors)
   ============================================================ */
@media (forced-colors: active) {
  .btn, .cb-btn, .qbtn, .mk-btn { forced-color-adjust: none; border: 2px solid ButtonText; }
  :focus-visible { outline: 3px solid Highlight; }
}