/* ═══════════════════════════════════════════════════════════════════════════
   v3.css — საზოგადოებრივი ჯანდაცვის ცენტრი
   მინიმალიზმი · ხატულები · ანიმაცია

   ⚠️ ყველა კლასს აქვს `h-` პრეფიქსი. მიზეზი: წინა ვერსიაში ერთასოიანი
   კლასები ერთმანეთს ეჯახებოდა — ბარათის მოდიფიკატორი `.g` და ციფრების
   ბლოკის `.g` ერთი და იგივე იყო, ამიტომ ბარათის სათაური 46px-მდე იბერებოდა
   და ხატულა ყავისფერდებოდა.
   ═══════════════════════════════════════════════════════════════════════════ */

.hcx{
  --w:#ffffff;
  --w2:#f6f9fb;
  --w3:#eef3f7;
  --ink:#0a1628;
  --ink2:#22384f;
  --body:#4a6076;
  --mut:#71889e;
  --mut2:#9db0c2;
  --line:#e4ebf1;
  --line2:#cfdae3;

  --cy:#0d9bb8;
  --cy-d:#0a7a91;
  --cy-l:#00e5ff;
  --cy-s:#e7f8fc;
  --cy-s2:#c9f0f8;

  --sos:#d81b48;
  --sos-d:#a8143a;
  --sos-s:#fdf2f5;

  --amber:#b45309;
  --amber-s:#fef7ea;

  --r:1.125rem;
  --r-s:.75rem;
  --sh:0 1px 2px rgba(10,22,40,.05);
  --sh-2:0 16px 40px rgba(10,22,40,.12);
  --wrap:88rem;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

/* ═══════════════════════════════════════════════════════════════════════════
   ᲛᲐᲡᲨᲢᲐᲑᲘᲡ ᲔᲠᲗᲘ ᲡᲐᲮᲔᲚᲣᲠᲘ
   ───────────────────────────────────────────────────────────────────────────
   ადრე თითოეული ზომა ცალკე იყო აწყობილი: შრიფტს თავისი clamp ჰქონდა,
   კონტეინერს — საფეხურები 1500 / 1750 / 2100 პიქსელზე, დანარჩენს კი მყარი
   პიქსელი. შედეგად ერთ ეკრანზე ჰედერი ეტეოდა, მეორეზე — აღარა, და გვერდი
   ყოველ სიგანეზე სხვანაირად გამოიყურებოდა.

   ახლა რეგულატორი ერთია — ფესვის შრიფტი. ის ეკრანთან ერთად წრფივად იზრდება,
   ყველა დანარჩენი ზომა კი `rem`-შია და მას მიჰყვება. ეკრანი იცვლება —
   იცვლება მხოლოდ მასშტაბი, პროპორცია იგივე რჩება.

     1024px → 10.5px      1600px → 13.9px
     1280px → 11.6px      1920px → 17px
     1440px → 12.3px      2200px+ → 18px (ზღვარი)

   ⚠️ ᲛᲠᲣᲓᲘ ᲝᲠᲜᲐᲬᲘᲚᲘᲐ, ᲓᲐ ᲔᲡ ᲒᲐᲜᲖᲠᲐᲮᲣᲚᲘᲐ.
      1440px-მდე დახრილობა მცირეა — პატარა მონიტორზე გვერდი მჭიდროა.
      1440px-ს ზემოთ დახრილობა ორჯერ იზრდება: დიდ ეკრანზე ერთი მრუდით
      ყველაფერი პატარა რჩებოდა და გვერდებზე 326px სიცარიელე იდგა.
      ერთი წრფე ორივე ბოლოს ვერ აკმაყოფილებდა.

   ⚠️ მრუდი ორჯერ გადაითვალა. პირველ ჯერზე ქვედა ბოლო ჩამოვიდა, მაგრამ
      მაინც დიდი რჩებოდა. ახლა კიდევ უფრო ჩამოწეულია — პატარა მონიტორზე
      გვერდი შესამჩნევად იკუმშება, დიდზე მასშტაბი თითქმის იგივეა.
      ⚠️ ᲛᲮᲝᲚᲝᲓ ᲨᲠᲘᲤᲢᲘ ᲐᲠ ᲙᲛᲐᲠᲐ: სანამ რუკის სიმაღლე პიქსელებში იდგა,
         ის არ პატარავდებოდა და პატარა ეკრანს თითქმის მთლიანად ჭამდა.
         ყველა მნიშვნელოვანი სიმაღლე `rem`-შია გადაყვანილი.

   ⚠️ ტელეფონი გამონაკლისია: იქ ფესვი ფიქსირდება, თორემ ტექსტი წაუკითხავად
      დაპატარავდებოდა. მობილურ განლაგებას ისედაც თავისი წყვეტები აქვს. */
html{font-size:clamp(10.5px, .4375vw + 6px, 12.3px)}
/* დიდი ეკრანი — უფრო ციცაბო მრუდი და ოდნავ განიერი კონტეინერი */
@media(min-width:1441px){
  html{font-size:clamp(12.3px, .979vw - 1.8px, 18px)}
  .hcx{--wrap:92rem}
}
/* ⚠️ ტელეფონზე ფესვი ფიქსირებულია — vw-ზე მიბმა ვიწრო ეკრანზე ტექსტს
   წაუკითხავად დაპატარავებდა. 15px იყო; 13.5px-ზე ჩამოვიდა, რომ ბლოკები
   ვერტიკალურად ნაკლებ ადგილს იჭერდნენ. ველები ცალკე 16px-ზეა (იხ. ქვემოთ). */
@media(max-width:700px){html{font-size:13.5px}}

.hcx{
  background:var(--w);color:var(--body);
  font-family:'Noto Sans Georgian',system-ui,sans-serif;
  font-size:1rem;
  line-height:1.78;
  -webkit-font-smoothing:antialiased;overflow-x:clip;
}
.hcx a{color:inherit;text-decoration:none}
.hcx img,.hcx svg{display:block;max-width:100%}
.hcx ol,.hcx ul{list-style:none}
.hcx ::selection{background:var(--cy-s2);color:var(--ink)}
.hcx .h-mo{font-family:'Montserrat','Noto Sans Georgian',sans-serif;font-variant-numeric:tabular-nums}

/* კონტეინერიც `rem`-შია — ის ფესვთან ერთად სუნთქავს, ამიტომ საფეხურები
   1500 / 1750 / 2100 პიქსელზე აღარ სჭირდება და ამოღებულია. */
.h-wrap{max-width:var(--wrap);margin:0 auto;padding-inline:2.2rem}
@media(max-width:700px){.h-wrap{padding-inline:1.15rem}}

.h-kicker{
  display:inline-flex;align-items:center;gap:.625rem;
  font-family:'Montserrat',sans-serif;
  font-size:.69rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--cy-d);
}
.h-kicker::before{content:'';width:1.25rem;height:2px;background:var(--cy-l);border-radius:2px}

/* ═══════════════ ღილაკები ═══════════════ */

.h-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:.81rem 1.375rem;border-radius:var(--r-s);min-height:2.94rem;
  font-family:inherit;font-size:.845rem;font-weight:700;
  border:1.5px solid transparent;cursor:pointer;
  transition:transform .2s,background .2s,border-color .2s,box-shadow .2s;
}
/* `.hcx` პრეფიქსი აუცილებელია — `.hcx a{color:inherit}`-ს ჯაბნის */
.hcx .h-btn--dark{background:var(--ink);color:#fff}
.hcx .h-btn--dark:hover{background:var(--cy-d);color:#fff;transform:translateY(-2px);box-shadow:var(--sh-2)}
.hcx .h-btn--ghost{background:var(--w);color:var(--ink);border-color:var(--line2)}
.hcx .h-btn--ghost:hover{border-color:var(--ink);color:var(--ink);transform:translateY(-2px)}
.hcx .h-btn--sos{background:var(--sos);color:#fff}
.hcx .h-btn--sos:hover{background:var(--sos-d);color:#fff;transform:translateY(-2px)}
/* რუკის ღილაკი — აქცენტური, რომ რეესტრის გვერდზე თვალში ხვდებოდეს.
   ghost-ვარიანტი გვერდის სხვა ჩარჩოებში იკარგებოდა. */
.hcx .h-btn--map{background:var(--cy);color:#fff;box-shadow:0 4px 14px rgba(13,155,184,.28)}
.hcx .h-btn--map:hover{background:var(--cy-d);color:#fff;transform:translateY(-2px);
  box-shadow:0 8px 22px rgba(13,155,184,.36)}
.h-btn--map svg{transition:transform .25s cubic-bezier(.2,.85,.3,1)}
.hcx .h-btn--map:hover svg{transform:scale(1.08)}
.h-btn--sm{padding:.69rem 1.125rem;min-height:2.75rem;font-size:.82rem}

/* ═══════════════ ჰედერი ═══════════════ */

.h-hd{
  position:sticky;top:0;z-index:300;background:rgba(255,255,255,.94);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line);padding-top:env(safe-area-inset-top);
}
.h-hd__in{display:flex;align-items:center;gap:1.1rem;height:4.5rem}
.h-logo{display:flex;align-items:center;gap:.75rem;flex-shrink:0;min-width:0}
.h-logo img{width:2.25rem;height:2.25rem}
.h-logo b{color:var(--ink);font-size:.78rem;font-weight:700;line-height:1.3;max-width:12.5rem}

/* ნავიგაცია — მხოლოდ ტექსტი, ხატულების გარეშე.
   ⚠️ ზომები `rem`-შია: ვიწრო ეკრანზე მენიუ ფესვთან ერთად პროპორციულად
      პატარავდება და კონტეინერს აღარ სცდება. */
.h-nav{display:flex;gap:.12rem;margin-left:auto;min-width:0}
.h-nav a{
  padding:.56rem .8rem;border-radius:.625rem;font-size:.845rem;font-weight:600;
  color:var(--body);white-space:nowrap;transition:color .2s,background .2s;
}
.h-nav a:hover{color:var(--ink);background:var(--w2)}
.h-nav a.on{color:var(--ink);background:var(--cy-s)}

.hcx .h-hot{
  display:inline-flex;align-items:center;gap:9px;flex-shrink:0;
  padding:9px 16px;border-radius:50px;min-height:44px;
  background:var(--sos);color:#fff;font-weight:700;font-size:13.5px;letter-spacing:.2px;
  transition:background .2s;
}
.hcx .h-hot:hover{background:var(--sos-d);color:#fff}
.h-hot i{width:7px;height:7px;border-radius:50%;background:#fff;flex-shrink:0;
  animation:h-blink 1.8s ease-in-out infinite}
@keyframes h-blink{0%,100%{opacity:1}50%{opacity:.35}}

.h-burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:10px 6px}
.h-burger span{display:block;width:22px;height:2px;background:var(--ink);border-radius:2px;transition:.25s}
.h-burger.on span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.h-burger.on span:nth-child(2){opacity:0}
.h-burger.on span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.h-drawer{
  position:fixed;inset:0;z-index:400;background:var(--w);
  display:flex;flex-direction:column;justify-content:center;gap:6px;padding:84px 22px 40px;
  opacity:0;pointer-events:none;transform:translateY(-8px);transition:.25s;
}
.h-drawer.open{opacity:1;pointer-events:all;transform:translateY(0)}
.h-drawer a{
  display:flex;align-items:center;gap:14px;min-height:56px;padding:14px 18px;
  border-radius:var(--r-s);border:1px solid var(--line);color:var(--ink);
  font-size:15.5px;font-weight:700;
}
.h-drawer a svg{width:22px;height:22px;color:var(--cy-d);flex-shrink:0}
.h-drawer a.on{background:var(--cy-s);border-color:var(--cy-s2)}
.h-drawer__x{position:absolute;top:22px;right:22px;width:44px;height:44px;border-radius:50%;
  border:1px solid var(--line);background:var(--w);color:var(--ink);font-size:21px;cursor:pointer}

/* ⚠️ ცხელი ხაზის ღილაკი ჰედერიდან ამოღებულია (_v3). ის ~160px-ს იკავებდა
   და ნავიგაციას აჭარბებდა კონტეინერს — ბოლო პუნქტს აფარებდა. burger-ს
   ახლა თვითონ სჭირდება `margin-left:auto`.
   ⚠️ ზღვარი ორჯერ გადაითვალა. მენიუს 9 პუნქტი 86.8rem-ს ითხოვს; ფესვის
      მრუდის ჩამოწევის შემდეგ ეს ~1037px-ს უდრის, ადრე კი ~1171px-ს.
      ამიტომ 1200-იდან 1080-ზე ჩამოვიდა — ვიწრო ეკრანზეც სრული მენიუ ჩანს. */
@media(max-width:1080px){.h-nav{display:none}.h-burger{display:flex;margin-left:auto}}
@media(max-width:560px){
  .h-logo b{display:none}
  .h-hot span{display:none}
  .h-hot{width:44px;height:44px;padding:0;justify-content:center;border-radius:50%}
}

/* ═══════════════ ჰერო ═══════════════ */

/* ⚠️ ქვედა ხაზი მოხსნილია. აზრი ჰქონდა მაშინ, როცა ქვემოთ გადაუდებელი
   კიდიდან კიდემდე გაჭიმული ვარდისფერი ზოლი იდგა და ხაზი მათ ჰყოფდა.
   ახლა იქ ბარათია თეთრ ფონზე — ხაზი უბრალოდ მიტოვებულ ზოლად იკითხებოდა. */
.h-hero{background:linear-gradient(180deg,var(--w2),var(--w))}
.h-hero__in{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);
  gap:52px;
  align-items:stretch;          /* ⟵ რუკა მარცხენა სვეტის სიმაღლეს იმეორებს */
  /* padding-block — თორემ შემოკლებული `padding` .h-wrap-ის გვერდით
     დაშორებას ანულებდა და ჰერო გვერდის ბადეს სცდებოდა */
  padding-block:66px 60px;
}
/* ⚠️ `container-type` — ციფრების ბლოკს ეკრანის სიგანე კი არა, ᲐᲛ ᲡᲕᲔᲢᲘᲡ
   სიგანე აინტересებს. ეკრანი შეიძლება ფართო იყოს, სვეტი კი ვიწრო
   (რუკა გვერდით დგას) — სწორედ მაშინ იშლებოდა ოთხი ციფრი 3+1-ად. */
.h-hero__l{display:flex;flex-direction:column;justify-content:center;container-type:inline-size}
.h-hero__in > *{min-width:0}
.h-hero h1{
  /* ⚠️ vw-clamp აღარაა — ზომას ფესვი წყვეტს, ერთ ადგილას */
  color:var(--ink);font-size:2.9rem;font-weight:800;
  line-height:1.14;letter-spacing:-.03em;margin:1.15rem 0 1rem;
  text-wrap:balance;overflow-wrap:break-word;
}
.h-hero h1 em{font-style:normal;color:var(--cy-d)}
.h-hero__lede{font-size:1rem;color:var(--body);max-width:50ch;line-height:1.8}
.h-hero__cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}

/* ── ციფრები ჰეროშივე, ცალკე სექციის გარეშე ── */
/* ⚠️ ბადე, არა flex-wrap. flex-wrap ოთხ ციფრს 3+1-ად ტეხდა და ბოლო
   მარტო რჩებოდა. ბადეში რიგში ან ოთხივეა, ან ორ-ორი — შუალედური
   „ობოლი" მდგომარეობა შეუძლებელია. */
.h-figs{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;
  margin-top:34px;border-top:1px solid var(--line);padding-top:22px;
}
.h-fig{
  padding:6px 24px 6px 0;margin-right:24px;border-right:1px solid var(--line);
  border-radius:10px;transition:transform .26s cubic-bezier(.2,.85,.3,1);
}

/* ⚠️ ვიწრო სვეტში ადრე 2×2-ზე გადადიოდა. აღარ გადადის: ოთხივე ციფრი
   ᲧᲝᲕᲔᲚᲗᲕᲘᲡ ერთ რიგშია — ისე, როგორც ფართო ეკრანზეა. ვიწროვდება არა რიგი,
   არამედ თვითონ ციფრები: შუალედი, შრიფტი და გამყოფებს შორის მანძილი.
   გამონაკლისი მხოლოდ ტელეფონია (იხ. ქვემოთ 640px) — იქ ოთხი სვეტი
   375px-ზე უბრალოდ წაუკითხავი იქნებოდა. */
@container (max-width:660px){
  .h-fig{padding-right:1rem;margin-right:1rem}
  .h-fig b{font-size:1.55rem}
  .h-fig span{font-size:.66rem;margin-top:.4rem}
}
@container (max-width:520px){
  .h-fig{padding-right:.7rem;margin-right:.7rem}
  .h-fig b{font-size:1.35rem;letter-spacing:-.03em}
  .h-fig span{font-size:.62rem;line-height:1.4}
}
.h-fig:hover{transform:scale(1.06)}
.h-fig:last-child{border-right:0;padding-right:0;margin-right:0}
.h-fig b{
  display:flex;align-items:baseline;gap:1px;
  font-family:'Montserrat',sans-serif;font-variant-numeric:tabular-nums;
  font-size:1.82rem;font-weight:800;color:var(--ink);line-height:1;letter-spacing:-.045em;
}
.h-fig b i{font-style:normal;font-size:.5em;color:var(--cy-d);font-weight:700}
/* ⚠️ `overflow-wrap:anywhere` ᲡᲐᲕᲐᲚᲓᲔᲑᲣᲚᲝᲐ. ქართული სიტყვა
   „ზედამხედველობაზე" 16 ასოა და არსად ტყდება — ნაგულისხმევი `normal`-ით
   ის უბრალოდ ᲒᲐᲓᲘᲝᲓᲐ თავისი ყუთიდან (123px სიტყვა 112px ყუთში) და მეზობელ
   სვეტს ეფარებოდა. 17ch-ც ცოტა იყო: `ch` ციფრ „0"-ზე იზომება, ქართული
   ასო კი უფრო განიერია. */
.h-fig span{
  display:block;font-size:11.5px;color:var(--mut);margin-top:7px;line-height:1.5;
  max-width:20ch;overflow-wrap:anywhere;
}

/* ── ნამდვილი რუკა (Leaflet + OpenStreetMap) ── */
.h-map{position:relative;width:100%;display:flex;flex-direction:column}
.h-map__box{
  flex:1;min-height:420px;
  position:relative;border-radius:var(--r);overflow:hidden;
  border:1px solid var(--line);background:var(--w2);
  box-shadow:0 14px 34px rgba(10,22,40,.09);
  z-index:1;                                  /* sticky ჰედერის ქვეშ დარჩეს */
}

/* გადიდების ღილაკი — რუკის კუთხეში */
.h-map__open{
  position:absolute;right:12px;top:12px;z-index:500;
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 14px;border-radius:10px;min-height:40px;
  background:rgba(255,255,255,.95);backdrop-filter:blur(8px);
  border:1px solid var(--line);color:var(--ink);
  font-size:12.5px;font-weight:700;
  box-shadow:0 4px 14px rgba(10,22,40,.14);
  transition:background .2s,transform .2s;
}
.hcx .h-map__open:hover{background:var(--ink);color:#fff;transform:translateY(-1px)}

/* Ctrl-ის მინიშნება — მხოლოდ მაშინ, როცა ბორბალს ატრიალებენ */
.h-map__ctrl{
  position:absolute;inset:0;z-index:450;pointer-events:none;
  display:flex;align-items:center;justify-content:center;
  background:rgba(10,22,40,.42);backdrop-filter:blur(2px);
  color:#fff;font-size:14px;font-weight:700;text-align:center;padding:20px;
  opacity:0;transition:opacity .25s;
}
.h-map__box.show-ctrl .h-map__ctrl{opacity:1}
.h-map .leaflet-container{font-family:inherit;background:#eef3f7}
.h-map .leaflet-control-attribution{font-size:10px;background:rgba(255,255,255,.82)}
.h-map .leaflet-control-zoom a{
  border-radius:8px !important;color:var(--ink);border-color:var(--line);
  width:32px;height:32px;line-height:30px;
}
.h-map-err{display:flex;align-items:center;justify-content:center;height:100%;
  color:var(--mut);font-size:14px}

/* წერტილი — მიტანაზე ოდნავ იზრდება */
.hc-mk{cursor:pointer;transition:r .18s ease, filter .18s ease}
.hc-mk:hover{filter:drop-shadow(0 3px 8px rgba(10,22,40,.35))}
.hc-me{cursor:default}

/* მინიშნება */
.leaflet-tooltip.hc-tip{
  background:var(--ink);color:#fff;border:0;border-radius:8px;
  font-family:'Noto Sans Georgian',system-ui,sans-serif;
  font-size:12.5px;font-weight:600;padding:7px 11px;
  box-shadow:0 6px 18px rgba(10,22,40,.28);white-space:normal;max-width:230px;
}
.leaflet-tooltip.hc-tip::before{border-top-color:var(--ink)}

.h-map__cap{
  display:flex;align-items:center;gap:8px 20px;flex-wrap:wrap;
  margin-top:14px;font-size:12.5px;color:var(--mut);
}
.h-map__cap span{display:inline-flex;align-items:center;gap:8px}
.h-map__cap i{width:10px;height:10px;border-radius:50%;flex-shrink:0;border:2px solid #fff;
  box-shadow:0 0 0 1px var(--line2)}
.h-map__cap i.s1{background:#0a1628}
.h-map__cap i.s2{background:#0d9bb8}
.h-map__cap i.s3{background:#3fb9a0}
.h-map__cap i.s4{background:#d81b48}
/* ⚠️ `margin-left:auto` ᲐᲛᲝᲦᲔᲑᲣᲚᲘᲐ. ის მინიშნებას მარჯვენა კიდეზე
   აგდებდა, ლეგენდა კი მარცხნივ რჩებოდა — ორი ცალკე „კუნძული" გამოდიოდა.
   ახლა იმავე რიგშია და მარცხენა კიდეზევე სწორდება. */
.h-map__hint{font-size:11.5px;color:var(--mut2)}

/* ═══════════════════════════════════════════════════════════════════════════
   ჰეროს სტილიზებული რუკა — პარალაქსი
   ───────────────────────────────────────────────────────────────────────────
   ფენები `data-d`-ს ატარებენ და კურსორზე სხვადასხვა სიჩქარით მიყვებიან.
   transform-ს JS წერს პირდაპირ (hc-parallax.js) — CSS transition შიგ არ არის,
   თორემ ორი ანიმაცია ერთმანეთს ეჯახება და მოძრაობა ბლანტდება.
   ═══════════════════════════════════════════════════════════════════════════ */

.h-pm{
  /* ⚠️ `flex:1` — რუკა მარცხენა სვეტის სიმაღლეს ბოლომდე ავსებს.
     მის გარეშე ბარათი 440px-ზე ჩერდებოდა და ტექსტს ბლოკი აცდებოდა. */
  flex:1 1 auto;
  position:relative;display:block;overflow:hidden;isolation:isolate;
  min-height:27.5rem;border-radius:var(--r);
  border:1px solid var(--line);background:var(--w2);
  box-shadow:0 14px 34px rgba(10,22,40,.09);
  cursor:pointer;z-index:1;                     /* sticky ჰედერის ქვეშ */
  transition:transform .38s cubic-bezier(.22,.8,.3,1),
             box-shadow .38s cubic-bezier(.22,.8,.3,1),
             border-color .38s;
}
.hcx .h-pm:hover,
.hcx .h-pm:focus-visible{
  transform:translateY(-5px);
  border-color:var(--cy-s2);
  box-shadow:0 28px 62px rgba(10,22,40,.17), 0 0 0 4px rgba(0,229,255,.11);
}
.hcx .h-pm:active{transform:translateY(-2px) scale(.995)}

/* შუქის გავლა — მხოლოდ მიტანაზე, რომ „დასაჭერი" შეგრძნება გაჩნდეს */
.h-pm::after{
  content:'';position:absolute;inset:0;z-index:6;pointer-events:none;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.55) 50%,transparent 62%);
  transform:translateX(-120%);opacity:0;
}
.h-pm:hover::after{animation:pmSheen .9s cubic-bezier(.3,.7,.4,1) .05s 1}
@keyframes pmSheen{
  0%{transform:translateX(-120%);opacity:0}
  25%{opacity:1}
  100%{transform:translateX(120%);opacity:0}
}

.h-pm__stage{position:absolute;inset:0;display:block}

/* ტილო ყუთზე დიდია — ფენები რომ იძვრიან, კიდე არ უნდა გამოჩნდეს */
/* ⚠️ `.hcx` პრეფიქსი აუცილებელია. გლობალური `.hcx svg{max-width:100%}`
   უფრო სპეციფიკურია, ვიდრე მარტო `.h-pm__svg`, და ტილოს ბარათის სიგანეზე
   ჭრიდა. მარცხენა კიდე -30px-ზე რჩებოდა, ამიტომ ᲛᲐᲠᲯᲕᲜᲘᲕ 30px-იანი
   თეთრი ზოლი ჩნდებოდა — ბარათის საკუთარი ფონი გამოსჭვიოდა. */
/* ⚠️ ადრე ტილო -30px-ით იყო გატანილი და `slice`-ით იჭრებოდა — ეს ძველ,
   „კიდიდან კიდემდე" რუკას სჭირდებოდა. ახლა სქემაა და მთლიანად უნდა ჩანდეს. */
.hcx .h-pm__svg{
  position:absolute;inset:0;width:100%;height:100%;
  max-width:none;overflow:visible;z-index:1;
}
.h-pm__svg [data-d]{will-change:transform}

/* ⚠️ ᲙᲝᲜᲢᲣᲠᲘ ᲓᲐ ᲢᲘᲚᲝ ᲔᲠᲗ ᲧᲣᲗᲨᲘ ᲣᲜᲓᲐ ᲘᲯᲓᲔᲡ, თორემ წერტილი ხმელეთს
   აცდება. `object-fit:contain` იგივეა, რაც SVG-ის `xMidYMid meet` —
   ორივე ერთნაირად ჯდება და კოორდინატები ემთხვევა.
   `translate`-ს აქ ᲐᲓᲒᲘᲚᲘ ᲐᲠ ᲐᲥᲕᲡ: სურათს პარალაქსი `transform`-ს წერს. */
.h-pm__map{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;z-index:0;
  opacity:.62;pointer-events:none;user-select:none;
}

/* ── ᲓᲐᲬᲔᲡᲔᲑᲣᲚᲔᲑᲔᲑᲘᲡ ᲬᲔᲠᲢᲘᲚᲔᲑᲘ ──
   ⚠️ `stroke-width` ᲒᲐᲜᲖᲠᲐᲮ ᲓᲘᲓᲘᲐ: ტილო 2529 ერთეულია და ბარათზე
      ≈0.185-ჯერ იკუმშება, ე.ი. 9 ერთეული ეკრანზე ~1.7px-ია. */
.h-pm__dot{
  stroke:#fff;stroke-width:9;
  opacity:0;transform-box:fill-box;transform-origin:center;
  animation:pmDot .5s cubic-bezier(.2,.9,.3,1) forwards;
  animation-delay:calc(.35s + var(--i) * .014s);
}
@keyframes pmDot{
  from{opacity:0;transform:scale(.2)}
  to{opacity:1;transform:scale(1)}
}
.h-pm__dot.s1{fill:#0a1628}
.h-pm__dot.s2{fill:#0d9bb8}
.h-pm__dot.s3{fill:#3fb9a0}

/* ── ცენტრი ── */
.h-pm__hub-halo{
  fill:none;stroke:rgba(18,182,207,.42);stroke-width:9;
  transform-box:fill-box;transform-origin:center;
  animation:pmHubHalo 3s ease-out infinite;
}
.h-pm__hub-c{fill:#12b6cf;stroke:#fff;stroke-width:12}
@keyframes pmHubHalo{
  0%  {opacity:.42;transform:scale(.55)}
  70% {opacity:0;  transform:scale(1.05)}
  100%{opacity:0;  transform:scale(1.05)}
}

@media (prefers-reduced-motion:reduce){
  .h-pm__hub-halo{animation:none;opacity:.3}
}

/* ── წარწერა ქალაქზე ── */
/* ⚠️ ახლა SVG-ის შიგნითაა (`text`), არა HTML-ში. ძველი ვარიანტი პროცენტებით
   იდგმებოდა და `preserveAspectRatio="slice"`-ის დაჭრაზე ცენტრს სცილდებოდა. */
/* ზომები ტილოს ერთეულებშია (≈0.185 ეკრანზე): 72 → ~13px, 26 → ~4.8px */
.h-pm__city-t{
  fill:var(--ink);font-family:inherit;font-size:72px;font-weight:800;
  letter-spacing:-1px;paint-order:stroke;
  stroke:#fff;stroke-width:26;stroke-linejoin:round;
}

/* ── მცურავი ელემენტები ── */
.h-pm__cta,
.h-pm__count,
.h-pm__zoom{
  position:absolute;z-index:5;display:inline-flex;align-items:center;
  border-radius:12px;pointer-events:none;
  background:rgba(255,255,255,.94);
  -webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px);
  border:1px solid var(--line);
  box-shadow:0 6px 20px rgba(10,22,40,.13);
}

.h-pm__cta{
  right:1rem;bottom:1rem;gap:.55rem;padding:.68rem 1rem;
  /* ⚠️ 800 იყო — ზედმეტად მსუქნად იკითხებოდა. 600 საკმარისია. */
  color:var(--ink);font-size:.85rem;font-weight:600;letter-spacing:0;
  transition:background .28s,color .28s,box-shadow .28s,padding .28s;
}
.h-pm__cta svg{transition:transform .28s cubic-bezier(.22,.8,.3,1)}
.hcx .h-pm:hover .h-pm__cta{
  background:var(--ink);color:#fff;border-color:var(--ink);
  box-shadow:0 10px 28px rgba(10,22,40,.34);
}
.hcx .h-pm:hover .h-pm__cta svg{transform:translateX(4px)}

/* პულსი — ბარათი თვითონ ეუბნება, რომ დასაჭერია */
.h-pm__cta::before{
  content:'';position:absolute;inset:-1px;border-radius:12px;z-index:-1;
  border:1.5px solid var(--cy-l);opacity:0;
  animation:pmPulse 2.8s ease-out infinite;
}
@keyframes pmPulse{
  0%  {opacity:.85;transform:scale(1)}
  55% {opacity:0;  transform:scale(1.16)}
  100%{opacity:0;  transform:scale(1.16)}
}
.h-pm:hover .h-pm__cta::before{animation:none;opacity:0}

.h-pm__count{
  left:16px;bottom:16px;gap:6px;padding:9px 14px;
  color:var(--body);font-size:12px;font-weight:600;
}
.h-pm__count b{
  font-family:'Montserrat',sans-serif;font-variant-numeric:tabular-nums;
  font-size:15px;font-weight:800;color:var(--ink);letter-spacing:-.5px;
}

/* ⚠️ ხატულიანი ბარათები (`.h-pm__panel`, `.h-pm__ico`) ᲐᲛᲝᲦᲔᲑᲣᲚᲘᲐ —
   ტილოს ნახევარს ფარავდნენ. ტიპების დაშლა ლეგენდაშია, ბარათის ქვემოთ. */

.h-pm__zoom{
  right:16px;top:16px;padding:9px;color:var(--ink);
  transition:background .28s,color .28s;
}
.hcx .h-pm:hover .h-pm__zoom{background:var(--cy-s);color:var(--cy-d);border-color:var(--cy-s2)}
.hcx .h-pm:hover .h-pm__zoom{background:var(--cy-s);color:var(--cy-d);border-color:var(--cy-s2)}

/* ═══════════════ გადაუდებელი ═══════════════
   ბარათია, არა კიდიდან კიდემდე გაჭიმული ზოლი.

   ⚠️ ადრე ბარათი იყო და შიგთავსი 28px-ით შიგნით იწევდა — ჰეროს ტექსტს
      აცდებოდა. ამიტომ ბარათი უკან იწევს ზუსტად იმდენით, რამდენიც მისი
      შიდა padding-ია (--sos-pad). შედეგი: ბარათის კიდე `.h-wrap`-ის
      გუტერშია, შიგთავსი კი ისევ ჰეროს ვერტიკალზე დგას. */

/* ⚠️ ვერტიკალური ჰაერი — ბარათი ჰეროსა და მომდევნო სექციას შუა იყო
   ჩაჭედილი, ზემოთაც და ქვემოთაც 0px. სწორედ ეს იკითხებოდა „გადასვლად". */
.h-sos-band{--sos-pad:28px;padding-block:14px 40px}

.h-sos-band > .h-wrap{position:relative}

.h-sos-band .h-sos{
  position:relative;z-index:2;overflow:hidden;
  margin-inline:calc(var(--sos-pad) * -1);
  padding:24px var(--sos-pad);
  border-radius:var(--r);
  background:var(--sos-s);
  border:1px solid #f5dbe2;
  box-shadow:0 10px 30px rgba(216,27,72,.08);
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:22px;align-items:center;
}
/* ⚠️ ვიწრო ეკრანზე `.h-wrap`-ის გუტერი 18px-ია, უარყოფითი მინდორი კი 28px —
   ბარათი 10px-ით ეკრანს გარეთ გადიოდა და ჰორიზონტალურ გადაწევას აჩენდა.
   ტელეფონზე უარყოფითი მინდორი საერთოდ არ გვჭირდება: ყველაფერი ისედაც
   ერთ სვეტშია და გასწორება აზრს კარგავს. */
@media(max-width:700px){
  .h-sos-band .h-sos{margin-inline:0;padding:20px 18px}
}
.h-sos-band .h-sos::before{
  content:'';position:absolute;left:-70px;top:50%;transform:translateY(-50%);
  width:240px;height:240px;border-radius:50%;pointer-events:none;z-index:-1;
  background:radial-gradient(circle,rgba(216,27,72,.11),transparent 68%);
}
.h-sos__i{
  position:relative;z-index:2;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  width:50px;height:50px;border-radius:14px;
  background:var(--sos);color:#fff;
  box-shadow:0 6px 18px rgba(216,27,72,.28);
}
.h-sos__i::after{
  content:'';position:absolute;inset:-1px;border-radius:15px;
  border:1.5px solid var(--sos);opacity:.5;
  animation:h-pulse-soft 2.4s ease-in-out infinite;
}
@keyframes h-pulse-soft{
  0%,100%{opacity:.5;transform:scale(1)}
  50%    {opacity:0;  transform:scale(1.28)}
}
.h-sos__x{position:relative;z-index:2;min-width:0}
.h-sos__t{
  font-family:'Montserrat',sans-serif;font-size:10.5px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--sos-d);
}
.h-sos__n{
  display:block;font-family:'Montserrat',sans-serif;color:var(--ink);
  font-size:clamp(18px,1.8vw,23px);font-weight:800;letter-spacing:.4px;
  margin-top:4px;line-height:1.2;
}
.h-sos__d{color:var(--ink2);font-size:13px;margin-top:5px;max-width:58ch;line-height:1.65}

/* ═══════════════ სექცია ═══════════════ */

.h-sec{padding-block:4.65rem}

/* ⚠️ ᲡᲔᲥᲪᲘᲔᲑᲘᲡ ᲜᲐᲪᲠᲘᲡᲤᲔᲠᲘ ᲤᲝᲜᲘ ᲛᲝᲮᲡᲜᲘᲚᲘᲐ.
 *
 * იყო თეთრი/ნაცრისფერი მონაცვლეობა და ხაზი საზღვარზე. ხაზების მოხსნის
 * შემდეგ ფონის ნახტომი შიშველი დარჩა — სექციის კიდე მკვეთრად იკვეთებოდა
 * და ბარათებს ჭრიდა. ახლა მთელი გვერდი თეთრია, სექციებს ერთმანეთისგან
 * მხოლოდ ჰაერი ჰყოფს — ეს ემთხვევა დამკვეთის მიერ მიღებულ მიმართულებას:
 * თეთრი ფონი და მინიმალიზმი.
 *
 * კლასი შენარჩუნებულია, რომ HTML-ს არ შევეხოთ. */
.h-sec--grey{background:var(--w)}
.h-sec__head{margin-bottom:34px;max-width:64ch}
.h-sec__head h2{color:var(--ink);font-size:1.95rem;font-weight:800;
  letter-spacing:-1px;line-height:1.22;margin-top:14px;text-wrap:balance}
.h-sec__head p{color:var(--mut);font-size:14.5px;margin-top:10px;line-height:1.75}
.h-sec__flex{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;max-width:none}

/* ═══════════════ სერვისების ბარათები ═══════════════ */

.h-svc{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}

.h-card{
  position:relative;display:grid;
  grid-template-rows:auto auto 1fr auto;      /* ხატულა · სათაური · ტექსტი · ქვედა ზოლი */
  padding:1.75rem 1.63rem;border-radius:var(--r);
  /* ⚠️ ჩრდილი ოდნავ გაძლიერდა: ფონი ნაცრისფრიდან თეთრზე გადავიდა და
     თეთრი ბარათი თეთრზე ბრტყლდებოდა. */
  background:var(--w);border:1px solid var(--line);
  box-shadow:0 2px 10px rgba(10,22,40,.05),0 1px 2px rgba(10,22,40,.04);
  min-height:14.4rem;overflow:hidden;
  transition:transform .3s cubic-bezier(.2,.85,.3,1),box-shadow .3s,border-color .3s;
}
/* ⚠️ scale-ს z-index სჭირდება — გადიდებული ბარათი მეზობელს ქვეშ უნდა იტოვებდეს,
   თორემ კიდე მეზობლის ჩრდილში იჭრება. */
.h-card:hover{
  z-index:2;
  transform:translateY(-10px) scale(1.055);
  box-shadow:0 28px 60px rgba(10,22,40,.18);
  border-color:var(--cy-s2);
}
.h-card:hover .h-card__i{transform:scale(1.06)}
.h-card::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:3px;
  background:linear-gradient(90deg,var(--cy-l),var(--cy));
  transform:scaleX(0);transform-origin:left;transition:transform .34s cubic-bezier(.2,.85,.3,1);
}
.h-card:hover::after{transform:scaleX(1)}

.h-card__i{
  display:flex;align-items:center;justify-content:center;
  width:54px;height:54px;border-radius:15px;
  background:var(--cy-s);color:var(--cy-d);margin-bottom:18px;
  transition:background .3s,color .3s,transform .3s cubic-bezier(.2,.85,.3,1);
}
.h-card:hover .h-card__i{background:var(--ink);color:#fff}

.h-card__t{
  display:block;color:var(--ink);
  font-size:17px;font-weight:700;line-height:1.35;letter-spacing:-.2px;
  margin-bottom:8px;
}
.h-card__d{color:var(--mut);font-size:13.5px;line-height:1.7;margin-bottom:20px}

.h-card__f{display:flex;align-items:center;justify-content:space-between;gap:12px}
.h-card__tag{
  display:inline-flex;align-items:center;
  font-family:'Montserrat',sans-serif;font-size:10px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;line-height:1;
  padding:7px 12px;border-radius:50px;background:var(--w3);color:var(--body);
  transition:background .3s,color .3s;white-space:nowrap;
}
.h-card:hover .h-card__tag{background:var(--cy-s);color:var(--cy-d)}
.h-card__a{
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  width:38px;height:38px;border-radius:50%;
  background:var(--w3);color:var(--ink);
  transition:background .3s,color .3s,transform .3s;
}
.h-card:hover .h-card__a{background:var(--ink);color:#fff;transform:translateX(3px)}

/* ალტერნატიული ფერი — მკაცრად მხოლოდ ამ ბარათზე */
.h-card--amber .h-card__i{background:var(--amber-s);color:var(--amber)}
.h-card--amber:hover .h-card__i{background:var(--amber);color:#fff}
.h-card--amber:hover .h-card__tag{background:var(--amber-s);color:var(--amber)}
.h-card--amber::after{background:linear-gradient(90deg,#f0b429,var(--amber))}
.h-card--amber:hover .h-card__a{background:var(--amber);color:#fff}

/* ═══════════════ რუკის გვერდი (ruka.php) ═══════════════ */

.h-mp-head{background:var(--w2);border-bottom:1px solid var(--line);padding-block:2.4rem 1.9rem}
.h-mp-head h1{color:var(--ink);font-size:2.05rem;font-weight:800;
  letter-spacing:-.03em;line-height:1.2;margin:.9rem 0 .6rem}
.h-mp-head p{color:var(--mut);font-size:.9rem;max-width:78ch;line-height:1.7}

.h-mp{display:grid;grid-template-columns:minmax(0,24rem) minmax(0,1fr);gap:1.4rem;padding-block:1.6rem}
.h-mp__side{display:flex;flex-direction:column;gap:.9rem;min-width:0}
/* ═══════════════ ფენის გადამრთველი ═══════════════
   ორი კითხვა, ორი ფენა: „სად მივიღო დახმარება" და „რა შემოწმდა".
   ადრე ეს ორი სია ორ სხვადასხვა გვერდზე იდგა და მოქალაქეს არ ესმოდა,
   რომელზე დააჭიროს. */
.h-lay{
  display:grid;grid-template-columns:1fr 1fr;gap:.5rem;
  margin-bottom:1rem;
}
.h-lay__b{
  display:flex;flex-direction:column;gap:.2rem;cursor:pointer;text-align:left;
  padding:.7rem .85rem;border-radius:var(--r-s);
  border:1.5px solid var(--line2);background:var(--w);
  font-family:inherit;color:var(--body);
  transition:border-color .2s,background .2s,color .2s;
}
.h-lay__b b{font-size:.8rem;font-weight:700;line-height:1.3;color:var(--ink)}
.h-lay__b span{
  font-family:'Montserrat',sans-serif;font-size:.68rem;font-weight:700;
  color:var(--mut2);font-variant-numeric:tabular-nums;
}
.h-lay__b:hover{border-color:var(--ink)}
.h-lay__b.on{background:var(--ink);border-color:var(--ink)}
.h-lay__b.on b{color:#fff}
.h-lay__b.on span{color:rgba(255,255,255,.6)}

/* ზედამხედველობის ფენის ფერები — იგივე, რაც hc-map.js-შია */
.h-chip i.o1,.h-map__cap i.o1{background:#b45309}
.h-chip i.o2,.h-map__cap i.o2{background:#0d9bb8}
.h-chip i.o3,.h-map__cap i.o3{background:#7c3aed}
.h-chip i.o4,.h-map__cap i.o4{background:#71889e}
.h-place__b.b-skola{background:#b45309}
.h-place__b.b-baghi{background:#0d9bb8}
.h-place__b.b-saloni{background:#7c3aed}
.h-place__b.b-sxva{background:#71889e}

/* ⚠️ `hidden` ატრიბუტი მარტო ვერ მალავს: `.h-mp__chips{display:flex}` და
   `.h-map__cap{display:flex}` ბრაუზერის ნაგულისხმევ `display:none`-ს ჯაბნის,
   რადგან ავტორის წესი უფრო ძლიერია. შედეგად ორივე ფენის ფილტრი ერთდროულად
   ჩანდა. ატრიბუტიანი სელექტორი უფრო სპეციფიკურია და საკითხს ხურავს. */
.h-mp__chips[hidden],
.h-mp__list[hidden],
.h-map__cap[hidden]{display:none}

@media(max-width:520px){.h-lay{grid-template-columns:1fr}}

.h-mp__tools{display:flex;flex-direction:column;gap:.75rem}

.h-mp__search{
  display:grid;grid-template-columns:1.15rem minmax(0,1fr);gap:.7rem;align-items:center;
  border:1.5px solid var(--line2);border-radius:var(--r-s);padding:0 .95rem;min-height:3.1rem;
  background:var(--w);color:var(--mut2);transition:border-color .2s,box-shadow .2s;
}
.h-mp__search:focus-within{border-color:var(--cy);box-shadow:0 0 0 3px var(--cy-s)}
.h-mp__search input{border:0;outline:0;background:none;font-family:inherit;font-size:.9rem;
  color:var(--ink);min-width:0;padding:.75rem 0}

.h-mp__chips{display:flex;flex-wrap:wrap;gap:.5rem}
.h-chip{
  display:inline-flex;align-items:center;gap:7px;cursor:pointer;
  padding:.5rem .82rem;border-radius:50px;min-height:2.4rem;
  border:1px solid var(--line2);background:var(--w);
  font-family:inherit;font-size:.78rem;font-weight:600;color:var(--body);
  transition:background .2s,border-color .2s,color .2s;
}
.h-chip b{font-family:'Montserrat',sans-serif;font-size:.69rem;color:var(--mut2);font-variant-numeric:tabular-nums}
.h-chip i{width:.56rem;height:.56rem;border-radius:50%;flex-shrink:0}
.h-chip i.s1{background:#0a1628}.h-chip i.s2{background:#0d9bb8}.h-chip i.s3{background:#3fb9a0}
.h-chip:hover{border-color:var(--ink)}
.h-chip.on{background:var(--ink);border-color:var(--ink);color:#fff}
.h-chip.on b{color:rgba(255,255,255,.65)}

.h-mp__list{
  border:1px solid var(--line);border-radius:var(--r);background:var(--w);
  overflow:auto;max-height:calc(100vh - 18.75rem);min-height:21rem;
}
/* ⚠️ სია და ფილტრები პიქსელებში იყო და მასშტაბს არ მიჰყვებოდა — პატარა
   ეკრანზე რუკის გვერდი უზარმაზარი რჩებოდა. ყველაფერი `rem`-შია. */
.h-place{
  display:grid;grid-template-columns:4px minmax(0,1fr);gap:.9rem;align-items:stretch;
  width:100%;text-align:left;cursor:pointer;border:0;border-bottom:1px solid var(--line);
  background:none;font-family:inherit;padding:0;transition:background .2s;
}
.h-place:last-of-type{border-bottom:0}
.h-place:hover{background:var(--w2)}
.h-place.on{background:var(--cy-s)}
.h-place__b{display:block}
.h-place__b.b-stacionari{background:#0a1628}
.h-place__b.b-klinika{background:#0d9bb8}
.h-place__b.b-ambulatoria{background:#3fb9a0}
.h-place__x{display:block;padding:.85rem 1rem .85rem 0;min-width:0}
.h-place__n{display:block;color:var(--ink);font-size:.87rem;font-weight:700;line-height:1.4}
.h-place__a{display:block;color:var(--mut);font-size:.78rem;margin-top:.2rem;line-height:1.5}
.h-place__p{display:inline-flex;align-items:center;gap:.38rem;color:var(--cy-d);
  font-size:.75rem;font-weight:600;margin-top:.35rem}
.h-place__p svg{width:.81rem;height:.81rem}
.h-place__none{display:none;padding:2.5rem 1.25rem;text-align:center;color:var(--mut);font-size:.84rem}

.h-mp__map{display:flex;flex-direction:column;min-width:0}
.h-mp__canvas{
  position:relative;flex:1;min-height:32.5rem;
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  background:var(--w2);z-index:1;
}
.h-mp__canvas .leaflet-container{font-family:inherit;background:#eef3f7}
.h-mp__canvas .leaflet-control-attribution{font-size:10px;background:rgba(255,255,255,.82)}
.h-mp__canvas .leaflet-control-zoom a{border-radius:8px !important;color:var(--ink);
  border-color:var(--line);width:34px;height:34px;line-height:32px}
.h-mp__canvas.show-ctrl .h-map__ctrl{opacity:1}
.h-mp__reset{
  margin-left:auto;cursor:pointer;border:1px solid var(--line2);background:var(--w);
  border-radius:50px;padding:7px 14px;min-height:36px;
  font-family:inherit;font-size:12px;font-weight:600;color:var(--body);transition:.2s;
}
.h-mp__reset:hover{border-color:var(--ink);color:var(--ink)}

@media(max-width:960px){
  .h-mp{grid-template-columns:1fr;gap:16px}
  .h-mp__map{order:-1}
  .h-mp__canvas{min-height:23.75rem}
  .h-mp__list{max-height:28.75rem}
}
@media(max-width:640px){
  .h-mp-head{padding:26px 0 22px}
  .h-mp__canvas{min-height:320px}
}

/* ═══════════════ სია ═══════════════ */

.h-list{display:grid;gap:12px}
.h-row{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:20px;align-items:center;
  padding:20px 24px;border-radius:var(--r-s);
  background:var(--w);border:1px solid var(--line);
  transition:border-color .28s,transform .28s,box-shadow .28s;
}
.h-row:hover{border-color:var(--cy-s2);transform:translateY(-3px) scale(1.008);box-shadow:var(--sh)}
.h-row__i{display:flex;align-items:center;justify-content:center;width:46px;height:46px;
  border-radius:12px;background:var(--cy-s);color:var(--cy-d);flex-shrink:0;transition:.28s}
.h-row:hover .h-row__i{background:var(--ink);color:#fff}
.h-row__d{font-family:'Montserrat',sans-serif;font-size:11.5px;font-weight:700;
  letter-spacing:.1em;color:var(--cy-d);text-transform:uppercase;display:block;margin-bottom:5px}
.h-row__t{display:block;color:var(--ink);font-size:16px;font-weight:700;line-height:1.4}
.h-row__p{color:var(--mut);font-size:13px;margin-top:4px;line-height:1.6}
.h-row__a{display:flex;align-items:center;justify-content:center;width:38px;height:38px;
  border-radius:50%;background:var(--w3);color:var(--ink);flex-shrink:0;transition:.28s}
.h-row:hover .h-row__a{background:var(--ink);color:#fff;transform:translateX(3px)}

.h-none{text-align:center;padding:60px 24px;border-radius:var(--r);
  border:1px dashed var(--line2);background:var(--w)}
.h-none svg{margin:0 auto 14px;color:var(--mut2)}
.h-none b{display:block;color:var(--ink);font-size:16px;margin-bottom:6px}
.h-none p{color:var(--mut);font-size:13.5px}

/* ═══════════════ ეტაპები ═══════════════ */

/* ═══════════════ ეტაპები — ისრებით შეკრული ჯაჭვი ═══════════════
   ⚠️ ჩარჩო და გამყოფი ხაზები მოხსნილია. ეტაპებს ისარი აკავშირებს —
      ისე, როგორც პირველ ვარიანტში იყო, ოღონდ ცოცხალი ისრით.
   ⚠️ სათაური და აღწერა `display:block`-ია. `span` ინლაინია და ტექსტი
      სათაურის გვერდით ეკვროდა — ზუსტად ეს იყო გატეხილი. */

.h-flow{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;
  list-style:none;                              /* ⟵ ორმაგი ციფრი აქედან მოდიოდა */
  background:transparent;
}
.h-step{
  position:relative;padding:0 40px 0 0;
  transition:transform .28s cubic-bezier(.2,.85,.3,1);
}
.h-step:last-child{padding-right:0}

/* დამაკავშირებელი ხაზი — ციფრის სიმაღლეზე გადის */
.h-step::before{
  content:'';position:absolute;z-index:0;
  left:34px;right:16px;top:15px;height:2px;
  background:linear-gradient(90deg,var(--cy-s2),var(--line));
  border-radius:2px;
}
/* ისრის წვერი */
.h-step::after{
  content:'';position:absolute;z-index:1;
  right:14px;top:9px;width:14px;height:14px;
  border-top:2px solid var(--line2);border-right:2px solid var(--line2);
  transform:rotate(45deg);border-radius:2px;
  transition:transform .28s cubic-bezier(.2,.85,.3,1),border-color .28s;
}
.h-step:last-child::before,
.h-step:last-child::after{display:none}
.h-step:hover::after{transform:rotate(45deg) translate(3px,-3px);border-color:var(--cy-d)}

.h-step__top{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.h-step__n{
  position:relative;z-index:2;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  width:32px;height:32px;border-radius:50%;
  background:var(--ink);color:#fff;
  font-family:'Montserrat',sans-serif;font-weight:700;font-size:13px;
  box-shadow:0 0 0 6px var(--w2),0 4px 12px rgba(10,22,40,.16);
  transition:background .25s,transform .25s;
}
.h-step:hover .h-step__n{background:var(--cy-d);transform:scale(1.08)}
.h-step__t{
  display:block;color:var(--ink);
  font-size:15.5px;font-weight:700;line-height:1.35;letter-spacing:-.2px;
  margin-bottom:7px;
}
.h-step__i{display:none}
.h-step__d{display:block;color:var(--mut);font-size:13px;line-height:1.7;max-width:30ch}

/* ═══════════════ შესახებ ═══════════════ */

.h-about{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.8fr);gap:48px;align-items:start}
.h-about__t p{color:var(--body);font-size:15px;line-height:1.95;margin-bottom:18px}
.h-about__t p:last-child{margin-bottom:0;color:var(--mut)}
.h-contact{border:1px solid var(--line);border-radius:var(--r);background:var(--w);
  overflow:hidden;box-shadow:var(--sh)}
/* ⚠️ სექციის სათაური მარცხენა სვეტში გადავიდა, ამიტომ ბარათი მის ზედა
   ხაზზე დგება და ჩამოწევა აღარ სჭირდება. ადრე აქ `margin-top:9px` იდგა —
   მაშინ ბარათი ტექსტის პირველ ხაზს ესწორებოდა. */
.h-sec__head--in{margin-bottom:1.4rem}
.h-sec__head--in h1,
.h-sec__head--in h2{margin-top:.6rem}
/* კიკერს საკუთარი ხაზის სიმაღლე აქვს და ტექსტი ჩარჩოს შიგნით ~.6rem-ით
   ჩამოდის. ბარათი იმდენივეთ ჩამოვა, რომ ზედა კიდეები დაემთხვეს.
   ზომა `rem`-შია — მასშტაბთან ერთად თვითონ ერგება. */
.h-about > .h-contact{margin-top:.6rem}

/* ლაბორატორიის მარჯვენა სვეტი — შედეგის შემოწმების ბარათი */
.h-lab-box{
  margin-top:.6rem;padding:1.6rem 1.5rem;
  border:1px solid var(--line);border-radius:var(--r);background:var(--w);
  box-shadow:0 2px 10px rgba(10,22,40,.05),0 1px 2px rgba(10,22,40,.04);
}
.h-lab-box .h-sec__head{margin-bottom:1.2rem}
.h-contact h4{font-family:'Montserrat',sans-serif;font-size:10.5px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--cy-d);
  padding:20px 26px;border-bottom:1px solid var(--line);background:var(--w2)}
.h-contact dl{margin:0}
.h-contact dl > div{display:grid;grid-template-columns:19px minmax(0,1fr);gap:14px;align-items:start;
  padding:16px 26px;border-bottom:1px solid var(--line)}
.h-contact dl > div:last-child{border-bottom:0}
.h-contact dl svg{width:19px;height:19px;color:var(--cy-d);flex-shrink:0;margin-top:3px}
.h-contact dt{font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--mut2);
  font-weight:700;margin-bottom:4px;font-family:'Montserrat',sans-serif}
.h-contact dd{color:var(--ink2);font-size:14.5px;line-height:1.55;margin:0}

/* ═══════════════ ფუტერი ═══════════════ */

.h-ft{background:var(--ink);color:rgba(255,255,255,.62);padding-bottom:env(safe-area-inset-bottom)}
.h-ft__in{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr) minmax(0,1fr);
  gap:44px;padding:58px 0 42px}
.h-ft__1 img{width:38px;height:38px;margin-bottom:16px}
.h-ft__1 b{display:block;color:#fff;font-size:14px;line-height:1.55;margin-bottom:12px}
.h-ft__1 p{font-size:12.5px;line-height:1.75;margin-bottom:7px;color:rgba(255,255,255,.5)}
.h-ft__c h4{font-family:'Montserrat',sans-serif;font-size:10.5px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--cy-l);margin-bottom:18px}
.h-ft__c a,.h-ft__c p{
  display:grid;grid-template-columns:16px minmax(0,1fr);gap:10px;align-items:start;
  font-size:13.5px;padding:6px 0;line-height:1.6;overflow-wrap:break-word;
}
.h-ft__c a{min-height:34px;transition:color .2s;align-items:center}
.h-ft__c a:hover{color:var(--cy-l)}
.h-ft__c svg{width:16px;height:16px;color:rgba(255,255,255,.35);flex-shrink:0}
.h-ft__b{border-top:1px solid rgba(255,255,255,.12);padding:20px 0;display:flex;
  justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:12.5px;color:rgba(255,255,255,.45)}
.h-ft__b a:hover{color:var(--cy-l)}

/* ═══════════════ გამოჩენა ═══════════════ */

.h-rv{opacity:0;transform:translateY(16px);
  transition:opacity .55s ease,transform .55s cubic-bezier(.2,.85,.3,1)}
.h-rv.in{opacity:1;transform:none}
.h-d1{transition-delay:.05s}.h-d2{transition-delay:.1s}.h-d3{transition-delay:.15s}
.h-d4{transition-delay:.2s}.h-d5{transition-delay:.25s}.h-d6{transition-delay:.3s}

/* ═══════════════════════════════════════════════════════════════════════════
   ადაპტივი
   ═══════════════════════════════════════════════════════════════════════════ */

@media(max-width:1080px){
  .h-hero__in{grid-template-columns:1fr;gap:42px;padding-block:52px 56px}
  .h-map{max-width:580px}
  .h-svc{grid-template-columns:repeat(2,minmax(0,1fr))}
  .h-flow{grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 0}
  /* ორ სვეტში მე-2 ეტაპი რიგის ბოლოა — ისარი იქ არ უნდა იყოს */
  .h-step:nth-child(2n)::before,
  .h-step:nth-child(2n)::after{display:none}
  .h-step:nth-child(2n){padding-right:0}
  .h-about{grid-template-columns:1fr;gap:30px}
  .h-about > .h-contact{margin-top:0}   /* ერთ სვეტში გასწორება აზრს კარგავს */
  .h-sec{padding:60px 0}
  .h-map__box{height:400px}
  .h-pm{min-height:25rem}
}

@media(max-width:900px){
  .h-quick{grid-template-columns:1fr}
  .h-sos{grid-template-columns:auto minmax(0,1fr);gap:18px}
  .h-sos .h-btn{grid-column:1 / -1;width:100%}
}

/* ═══════════════════════════════════════════════════════════════════════════
   ᲢᲔᲚᲔᲤᲝᲜᲘ
   ───────────────────────────────────────────────────────────────────────────
   ⚠️ პრობლემა იყო არა შრიფტი, არამედ ᲡᲘᲛᲐᲦᲚᲔ: ყოველი ბლოკი თითქმის მთელ
      ეკრანს იკავებდა და გვერდი უსასრულოდ იგრაგნებოდა. სამი მიზეზი:
        · სექციის ვერტიკალური padding დესკტოპისა იყო (4.65rem);
        · სერვისების ბარათები ერთ სვეტში ეწყობოდა — ექვსი ეკრანი ზედიზედ;
        · ბარათებს `min-height` ედგათ და ცარიელ ადგილს იჭერდნენ.
      ახლა: ბარათები ორ სვეტში, სექციები ორჯერ დაბალი, min-height მოხსნილი.

   ⚠️ ველების შრიფტი 16px-ზე ნაკლები ᲐᲠ ᲣᲜᲓᲐ ᲘᲧᲝᲡ — iOS ასეთ ველზე დაჭერისას
      გვერდს ავტომატურად აახლოებს და განლაგებას ტეხს. */
@media(max-width:640px){
  .h-sec{padding-block:2.4rem}
  .h-sec__head{margin-bottom:1.4rem}
  .h-hero__in{padding-block:1.8rem 2rem;gap:1.6rem}

  /* ორი ბარათი რიგში — ექვსი ეკრანის ნაცვლად სამი რიგი */
  .h-svc{grid-template-columns:1fr 1fr;gap:.7rem}
  .h-card{padding:1rem .85rem;min-height:0;border-radius:var(--r-s)}
  .h-card__i{width:2.4rem;height:2.4rem;border-radius:.7rem;margin-bottom:.7rem}
  .h-card__i svg{width:1.35rem;height:1.35rem}
  .h-card__t{font-size:.95rem;margin-bottom:.35rem}
  .h-card__d{font-size:.8rem;line-height:1.55;margin-bottom:.8rem}
  .h-card__a{width:1.9rem;height:1.9rem}
  .h-card__tag{font-size:.6rem}
  .h-card:hover{transform:none}          /* თითზე hover არ არსებობს */

  /* ჯაჭვი ვერტიკალურია — ისარი ქვევით იყურება */
  .h-flow{grid-template-columns:1fr;gap:0}
  .h-step{padding:0 0 1.35rem 2.6rem !important}
  .h-step:last-child{padding-bottom:0 !important}
  .h-step__top{position:absolute;left:0;top:0;margin-bottom:0}
  .h-step__n{width:1.75rem;height:1.75rem;font-size:.8rem;box-shadow:0 0 0 4px var(--w)}
  .h-step__t{font-size:.95rem;margin-bottom:.25rem}
  .h-step__d{font-size:.82rem;line-height:1.55}
  .h-step::before{left:.82rem;right:auto;top:2rem;bottom:.3rem;width:2px;height:auto;
    background:linear-gradient(180deg,var(--cy-s2),var(--line))}
  .h-step::after{left:.45rem;right:auto;top:auto;bottom:0;transform:rotate(135deg);
    width:.7rem;height:.7rem}
  .h-step:hover::after{transform:rotate(135deg)}
  .h-step:nth-child(2n)::before,
  .h-step:nth-child(2n)::after{display:block}
  .h-step:last-child::before,
  .h-step:last-child::after{display:none}

  /* ჰერო — რუკა დაბალია, ღილაკები ერთ რიგში */
  .h-map__box{height:340px}
  .h-pm{min-height:13.5rem}
  .h-pm__cta{right:.6rem;bottom:.6rem;padding:.5rem .7rem;font-size:.78rem}
  .h-pm__count{left:.6rem;bottom:.6rem;padding:.42rem .6rem;font-size:.72rem}
  .h-pm__zoom{right:.6rem;top:.6rem;padding:.45rem}
  .h-map__cap{font-size:.72rem;gap:.4rem .9rem;margin-top:.7rem}
  .h-hero h1{font-size:1.95rem;letter-spacing:-.02em;margin:.7rem 0 .6rem}
  .h-hero__lede{font-size:.92rem;line-height:1.65}
  .h-hero__cta{gap:.55rem;margin-top:1.1rem}
  .h-hero__cta .h-btn{flex:1 1 0;min-width:0;padding-inline:.8rem;font-size:.82rem}

  .h-figs{display:grid;grid-template-columns:1fr 1fr;gap:1rem 0;margin-top:1.5rem;padding-top:1.2rem}
  .h-fig{padding:0 1rem 0 0;margin-right:1rem;border-right:1px solid var(--line)}
  .h-fig:nth-child(2n){border-right:0;padding-right:0;margin-right:0}
  .h-fig b{font-size:1.6rem}
  .h-fig span{max-width:none;font-size:.72rem;margin-top:.25rem}

  .h-row{grid-template-columns:auto minmax(0,1fr);gap:.85rem;padding:.85rem 1rem}
  .h-row__a{display:none}
  /* ფუტერი ტელეფონზე თითქმის მთელ ეკრანს იკავებდა — სვეტები ორად და
     დაშორებები შემცირებული */
  .h-ft__in{grid-template-columns:1fr 1fr;gap:1.2rem;padding:1.8rem 0 1.2rem}
  .h-ft__1{grid-column:1 / -1}
  .h-ft__1 img{width:2rem;height:2rem;margin-bottom:.7rem}
  .h-ft__c a{font-size:.8rem;min-height:1.9rem}
  .h-ft h5{font-size:.68rem;margin-bottom:.6rem}
  .h-ft__b{padding:.9rem 0;font-size:.75rem}
  .h-sos{padding:1.1rem 1rem;gap:.8rem}
  .h-sos__d{font-size:.82rem;line-height:1.55}
  /* „ცენტრის შესახებ" ყველაზე მაღალი ბლოკი იყო — ტექსტის ხაზთაშორისი
     1.95 ტელეფონისთვის ზედმეტად თავისუფალია */
  .h-about{gap:1.4rem}
  .h-about__t p{font-size:.85rem;line-height:1.65;margin-bottom:.8rem}
  .h-sec__head--in{margin-bottom:1rem}
  .h-contact dl > div{padding:.7rem 1rem;gap:.7rem}
  .h-contact h4{padding:.8rem 1rem}
  .h-contact dd{font-size:.85rem}
  .h-contact dt{font-size:.62rem;margin-bottom:.15rem}

  /* iOS-ის ავტომატური მიახლოების საწინააღმდეგოდ */
  .h-in,.h-mp__search input,.hcx input,.hcx select,.hcx textarea{font-size:16px}
}

/* ⚠️ ზღვარი 400 → 340. 375px-იან ტელეფონზე ორი ბარათი რიგში ეტევა და
   სერვისების სექცია ორჯერ დაბალი ხდება. ერთ სვეტში მხოლოდ ყველაზე
   ვიწრო ეკრანები რჩება. */
@media(max-width:339px){
  .h-svc{grid-template-columns:1fr}
  .h-card{padding:.95rem 1rem}
  .h-card__d{margin-bottom:.7rem}
  .h-hero__cta{flex-direction:column}
  .h-hero__cta .h-btn{width:100%}
  .h-sos{grid-template-columns:auto minmax(0,1fr)}
  .h-sos .h-btn{grid-column:1 / -1;width:100%}
}

/* ═══════════════ ხელმისაწვდომობა ═══════════════ */

.hcx a:focus-visible,.hcx button:focus-visible,.hcx input:focus-visible{
  outline:2px solid var(--cy-d);outline-offset:3px;border-radius:8px;
}

@media(prefers-reduced-motion:reduce){
  .hcx *,.hcx *::before,.hcx *::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .h-rv{opacity:1 !important;transform:none !important}
  .h-map__dot{opacity:1 !important}
  .h-map__ring,.h-map__hubring{opacity:0 !important}
  /* პარალაქსის რუკა: წერტილები ჩანს, პულსი და ბრწყინვა ითიშება */
  .h-pm__dot{opacity:1 !important;transform:none !important}
  .h-pm__ring{opacity:0 !important}
  .h-pm__cta::before{opacity:0 !important}
  .h-pm::after{display:none}
  .h-pm__svg [data-d]{transform:none !important}
}