/* ════════════════════════════════════════════════════════════════════════
   DG Service — VARIANT 1 "STOREFRONT"
   Closest to the DG Tools sister-site language.
   Palette ratio 60 yellow / 30 blue / 10 black:
     yellow  = hero CTA, stats, savings band, steps, badges, bottom-nav call
     blue    = utility bar, hero, why-us band, footer, headings
     black   = body copy, prices, fine detail
   Armenian-capable type: Noto Sans Armenian.
   ════════════════════════════════════════════════════════════════════════ */
:root{
  --y:#ffb800; --y-d:#e09e00; --y-lt:#ffd45e; --y-soft:#fff6dc;
  --b:#1b2559; --b-2:#2b3a7a; --b-lt:#4d5fa8; --b-soft:#eef1fb;
  --k:#0c0d12; --ink:#2a2c35; --muted:#6b6e7d; --meta:#9aa0b0;
  --w:#fff; --page:#f6f7fb; --line:#e6e8f0; --ok:#0a8f4a; --on-b:#c9cfe8;
  --r:14px; --r-lg:20px; --r-pill:999px;
  --font:'Noto Sans Armenian','Inter',system-ui,-apple-system,sans-serif;
  --wrap:1220px; --gut:clamp(16px,4vw,40px);
  --t:200ms; --ease:cubic-bezier(.2,.7,.2,1);
  --sh:0 1px 2px rgba(12,13,18,.05),0 8px 24px -10px rgba(27,37,89,.16);
  --sh-lg:0 2px 4px rgba(12,13,18,.05),0 20px 44px -14px rgba(27,37,89,.26);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--page);color:var(--ink);font-family:var(--font);font-size:16px;
     line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;color:inherit}
p{margin:0;text-wrap:pretty} h1,h2,h3{margin:0;text-wrap:balance}
:focus-visible{outline:3px solid var(--y);outline-offset:2px}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.sec{padding-block:clamp(44px,6vw,80px)}

/* Navy by default: inner pages put .h1 on white page-heads. The navy .hero
   overrides it back to white below — the only dark context that uses .h1. */
.h1{font-weight:800;font-size:clamp(30px,5vw,54px);line-height:1.08;letter-spacing:-.02em;color:var(--b)}
.h2{font-weight:800;font-size:clamp(23px,2.9vw,34px);line-height:1.15;letter-spacing:-.015em;color:var(--b)}
.h3{font-weight:700;font-size:18px;letter-spacing:-.01em;color:var(--b)}
.lead{color:var(--muted);font-size:clamp(15px,1.2vw,17px);max-width:56ch}

/* section head — yellow bar + navy title (DG Tools pattern) */
.shead{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:22px}
.shead .t{display:flex;gap:12px}
.shead .bar{width:5px;border-radius:3px;background:var(--y);flex:0 0 auto}
.shead .sub{color:var(--muted);font-size:14px;margin-top:3px}
.shead .all{color:var(--b-lt);font-size:14px;font-weight:600;white-space:nowrap}
.shead .all:hover{color:var(--b)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:14px 24px;
     border-radius:var(--r-pill);font-weight:700;font-size:15px;border:2px solid transparent;
     transition:transform var(--t) var(--ease),background var(--t),border-color var(--t),color var(--t)}
.btn:active{transform:translateY(1px)}
.btn-y{background:var(--y);color:var(--k)}
.btn-y:hover{background:var(--y-d)}
.btn-b{background:var(--b);color:var(--w)}
.btn-b:hover{background:var(--b-2)}
.btn-ghost{background:transparent;color:var(--w);border-color:rgba(255,255,255,.45)}
.btn-ghost:hover{border-color:var(--w);background:rgba(255,255,255,.1)}
.btn-out{background:var(--w);color:var(--b);border-color:var(--line)}
.btn-out:hover{border-color:var(--b)}
.btn svg{width:17px;height:17px}

/* utility bar (navy) */
.util{background:var(--b);color:var(--on-b);font-size:13px}
.util-in{display:flex;align-items:center;justify-content:space-between;gap:14px;padding-block:9px}
.util a{display:inline-flex;align-items:center;gap:7px;font-weight:600;color:var(--w)}
.util a:hover{color:var(--y)}
.util svg{width:14px;height:14px;color:var(--y)}
/* Language is a URL, so these are real links — a shared /ru/ link stays
   Russian. aria-current marks the page you're already on. */
.langs{display:flex;gap:4px}
.langs a{display:inline-block;padding:4px 9px;border-radius:6px;background:transparent;
         color:var(--on-b);font-size:12px;font-weight:700;border:0;
         transition:color var(--t),background var(--t)}
.langs a[aria-current=page]{background:var(--y);color:var(--k)}
.langs a:hover{color:var(--w)}
.langs a[aria-current=page]:hover{color:var(--k)}

/* header (white) + logo block */
.hdr{background:var(--w);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50}
.hdr-in{display:flex;align-items:center;gap:26px;padding-block:12px}
.logo{display:inline-flex;align-items:center;background:var(--b);border:2px solid var(--y);border-radius:6px;
      padding:8px 12px;font-weight:800;font-size:19px;letter-spacing:-.01em;gap:6px}
.logo .dg{color:var(--y)}
.logo .sv{color:var(--w)}
.hdr nav{display:flex;gap:24px;margin-left:auto}
.hdr nav a{font-size:14.5px;font-weight:600;color:var(--ink);padding:6px 0;border-bottom:2px solid transparent;transition:color var(--t),border-color var(--t)}
.hdr nav a:hover{color:var(--b)}
.hdr nav a.on{color:var(--b);border-bottom-color:var(--y)}
.hdr-r{display:flex;align-items:center;gap:10px;margin-left:auto}
.hdr nav+.hdr-r{margin-left:0}
@media(max-width:980px){.hdr nav{display:none}}

/* services dropdown — the 3 landing pages reachable straight from the nav.
   Below 980px the header nav is hidden entirely, so phones reach the same
   three choices through services.html (the hub) via the bottom bar. */
.drop{position:relative;display:flex;align-items:center}
.drop-t{display:inline-flex;align-items:center;gap:6px;background:none;border:0;padding:6px 0;
        font:inherit;font-size:14.5px;font-weight:600;color:var(--ink);cursor:pointer;
        border-bottom:2px solid transparent;transition:color var(--t),border-color var(--t)}
.drop-t:hover{color:var(--b)}
.drop-t[aria-expanded=true]{color:var(--b);border-bottom-color:var(--y)}
.drop.on .drop-t{color:var(--b);border-bottom-color:var(--y)}
.drop-t svg{width:12px;height:12px;transition:transform var(--t) var(--ease)}
.drop-t[aria-expanded=true] svg{transform:rotate(180deg)}
.drop-m{position:absolute;top:calc(100% + 14px);left:50%;
        transform:translateX(-50%) translateY(-6px);min-width:296px;
        background:var(--w);border:1px solid var(--line);border-radius:var(--r-lg);
        box-shadow:0 18px 44px rgba(12,13,18,.16);padding:8px;z-index:60;
        opacity:0;visibility:hidden;
        transition:opacity var(--t),transform var(--t) var(--ease),visibility var(--t)}
.drop-m::before{content:'';position:absolute;top:-6px;left:50%;margin-left:-5px;width:10px;height:10px;
                background:var(--w);border-left:1px solid var(--line);border-top:1px solid var(--line);
                transform:rotate(45deg)}
.drop-t[aria-expanded=true]+.drop-m{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.hdr nav .drop-m a{display:flex;align-items:flex-start;gap:11px;padding:11px 12px;
                   border-radius:var(--r);border-bottom:0;transition:background var(--t)}
.hdr nav .drop-m a:hover{background:var(--y-soft);color:var(--ink)}
.drop-i{flex:none;width:34px;height:34px;border-radius:8px;background:var(--y);color:var(--k);
        display:grid;place-items:center}
.drop-i svg{width:17px;height:17px}
.drop-x b{display:block;font-size:14px;font-weight:700;color:var(--ink);line-height:1.3}
.drop-x span{display:block;font-size:11.5px;color:var(--muted);margin-top:2px}
.hdr nav .drop-m a.drop-all{margin-top:4px;padding-top:12px;border-top:1px solid var(--line);
                            border-radius:0;justify-content:center;
                            font-size:13px;font-weight:700;color:var(--b)}
.hdr nav .drop-m a.drop-all:hover{background:transparent;text-decoration:underline}

/* hero (navy) */
.hero{position:relative;background:var(--b);color:var(--w);overflow:hidden;padding-block:clamp(40px,6vw,72px)}
.hero .h1{color:var(--w)}
.hero::before{content:'';position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:radial-gradient(60% 90% at 82% 0%,rgba(255,184,0,.28),transparent 62%),
             radial-gradient(50% 80% at 6% 100%,rgba(77,95,168,.5),transparent 60%)}
.hero .wrap{position:relative;z-index:1;text-align:center}
.hero .lead{color:rgba(255,255,255,.72);margin-inline:auto;text-align:center}
.hero-cta{display:flex;flex-direction:column;gap:12px;max-width:520px;margin:26px auto 0}
.hero-cta .btn{width:100%;padding:16px 24px;font-size:16px}
.chip{display:inline-flex;align-items:center;gap:8px;margin-top:22px;padding:9px 16px;border-radius:var(--r-pill);
      border:1px solid rgba(255,255,255,.28);font-size:13.5px;color:rgba(255,255,255,.9)}
.chip svg{width:15px;height:15px;color:var(--y)}
.hstats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:34px}
.hstats b{display:block;font-weight:800;font-size:clamp(22px,3vw,32px);color:var(--y);line-height:1;letter-spacing:-.02em}
.hstats span{display:block;font-size:12.5px;color:rgba(255,255,255,.66);margin-top:6px}
.hstats .tick{color:var(--y)}
@media(max-width:560px){.hstats{gap:8px}.hstats span{font-size:11px}}

/* cards / categories */
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media(max-width:900px){.g3{grid-template-columns:1fr}.g4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.g4{grid-template-columns:repeat(2,1fr)}}
.card{background:var(--w);border:1px solid var(--line);border-radius:var(--r-lg);padding:24px;box-shadow:var(--sh);
      transition:transform var(--t) var(--ease),box-shadow var(--t)}
.card:hover{transform:translateY(-4px);box-shadow:var(--sh-lg)}
.card .ico{width:52px;height:52px;border-radius:var(--r);background:var(--y-soft);color:var(--b);
           display:grid;place-items:center;margin-bottom:16px}
.card .ico svg{width:25px;height:25px}
.card .num{position:absolute;left:16px;top:16px;width:30px;height:30px;border-radius:8px;background:var(--y);
           color:var(--k);font-weight:800;font-size:13px;display:grid;place-items:center}
.card p{color:var(--muted);font-size:14.5px;margin-top:8px}
.card ul{list-style:none;margin:14px 0 0;padding:0}
.card li{font-size:13.5px;color:var(--muted);padding:6px 0 6px 20px;position:relative}
.card li::before{content:'';position:absolute;left:0;top:13px;width:9px;height:3px;border-radius:2px;background:var(--y)}

/* product cards (shared classes for js/vcatalog.js) */
.p-card{background:var(--w);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
        display:flex;flex-direction:column;transition:transform var(--t) var(--ease),box-shadow var(--t)}
.p-card:hover{transform:translateY(-3px);box-shadow:var(--sh)}
.p-img{aspect-ratio:1/1;background:var(--w);display:grid;place-items:center;padding:14px;border-bottom:1px solid var(--line)}
.p-img img{width:100%;height:100%;object-fit:contain}
.p-body{padding:12px 14px 16px;display:flex;flex-direction:column;gap:6px;flex:1}
.p-brand{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--b-lt)}
.p-name{font-size:13.5px;font-weight:600;color:var(--ink);line-height:1.35;flex:1}
.p-foot{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-top:4px}
.p-price{font-weight:800;font-size:16px;color:var(--k)}
.p-stock{font-size:11px;font-weight:600;color:var(--ok)}
.p-sku{font-size:11px;color:var(--meta)}
.p-empty{grid-column:1/-1;padding:48px 0;text-align:center;color:var(--muted)}

/* catalog controls */
.c-search{position:relative;max-width:540px;margin-bottom:16px}
.c-search svg{position:absolute;left:16px;top:50%;transform:translateY(-50%);width:18px;height:18px;color:var(--meta)}
.c-search input{width:100%;padding:14px 16px 14px 46px;border:2px solid var(--line);border-radius:var(--r-pill);
                background:var(--w);color:var(--ink);font:inherit;font-size:15px}
.c-search input:focus{outline:none;border-color:var(--y)}
.c-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.c-tab{display:inline-flex;align-items:center;gap:7px;padding:9px 15px;border-radius:var(--r-pill);border:2px solid var(--line);
       background:var(--w);color:var(--ink);font-size:13.5px;font-weight:600;transition:all var(--t)}
.c-tab i{font-style:normal;font-size:11px;color:var(--meta)}
.c-tab:hover{border-color:var(--b-lt)}
.c-tab[aria-pressed=true]{background:var(--y);border-color:var(--y);color:var(--k)}
.c-tab[aria-pressed=true] i{color:var(--k);opacity:.6}
.c-count{color:var(--muted);font-size:13.5px;margin-bottom:14px}
.c-count:empty{display:none}

/* brands */
.brands{display:flex;gap:12px;flex-wrap:wrap}
.brand-box{flex:1 1 150px;background:var(--w);border:1px solid var(--line);border-radius:var(--r);
           padding:18px 14px;text-align:center;font-weight:800;font-size:15px;color:var(--meta);
           filter:grayscale(1);transition:color var(--t),filter var(--t),border-color var(--t)}
.brand-box:hover{color:var(--b);filter:none;border-color:var(--y)}
.brand-box span{display:block;font-size:10.5px;font-weight:600;color:var(--meta);letter-spacing:.08em;text-transform:uppercase;margin-top:4px}

/* YELLOW savings band — the 60% anchor */
.band-y{background:var(--y);color:var(--k)}
.save{display:grid;grid-template-columns:1fr 1fr;gap:clamp(22px,3vw,48px);align-items:center}
@media(max-width:940px){.save{grid-template-columns:1fr}}
.save .kick{display:inline-block;background:var(--k);color:var(--y);font-size:12px;font-weight:800;
            letter-spacing:.1em;text-transform:uppercase;padding:6px 12px;border-radius:6px}
.big{font-weight:800;font-size:clamp(56px,10vw,112px);line-height:.9;letter-spacing:-.04em;color:var(--b);margin:16px 0 0}
.save p{color:rgba(12,13,18,.72);max-width:46ch;margin-top:12px}
.sub{display:flex;gap:24px;flex-wrap:wrap;margin-top:22px}
.sub b{display:block;font-weight:800;font-size:19px;color:var(--b)}
.sub span{font-size:12.5px;color:rgba(12,13,18,.6)}
.calc{background:var(--w);border-radius:var(--r-lg);padding:24px;box-shadow:0 18px 40px -14px rgba(12,13,18,.3)}
.calc h3{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--b-lt);margin-bottom:16px;font-weight:800}
.f{margin-bottom:15px}
.f label{display:block;font-size:13px;color:var(--muted);margin-bottom:7px}
.f .ctl{display:flex;align-items:center;gap:12px}
.f input[type=range]{flex:1;accent-color:var(--b);height:4px}
.f .val{font-weight:800;font-size:15px;min-width:84px;text-align:right;color:var(--b)}
.out{display:flex;align-items:baseline;justify-content:space-between;gap:12px;border-top:2px solid var(--line);margin-top:18px;padding-top:16px}
.out span{color:var(--muted);font-size:13.5px}
.out b{font-weight:800;font-size:clamp(24px,3.2vw,34px);color:var(--b);letter-spacing:-.02em}

/* navy why-us band */
.band-b{background:var(--b);color:var(--w)}
.band-b .h2{color:var(--w)}
.wcard{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:var(--r-lg);padding:24px}
.wcard .ico{width:48px;height:48px;border-radius:var(--r);background:rgba(255,184,0,.16);color:var(--y);display:grid;place-items:center;margin-bottom:14px}
.wcard .ico svg{width:23px;height:23px}
.wcard h3{color:var(--w);margin-bottom:7px}
.wcard p{color:rgba(255,255,255,.62);font-size:14px}

/* steps — yellow circles */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:900px){.steps{grid-template-columns:1fr}}
.step{background:var(--w);border:1px solid var(--line);border-radius:var(--r-lg);padding:28px 22px;text-align:center;box-shadow:var(--sh)}
.step .n{width:58px;height:58px;border-radius:50%;background:var(--y);color:var(--k);font-weight:800;font-size:22px;
         display:grid;place-items:center;margin:0 auto 16px;box-shadow:0 0 0 8px var(--y-soft)}
.step p{color:var(--muted);font-size:14px;margin-top:6px}

/* ─── mobile menu ──────────────────────────────────────────────────────
   Below 980px the header nav is hidden, which left FAQ and Contact with no
   route on a phone — the bottom bar only carries 5 of 9 destinations. The
   drawer is cloned from the header nav at runtime, so navigation still has
   exactly one source across all 24 pages. */
.burger{display:none;width:44px;height:44px;align-items:center;justify-content:center;
        background:transparent;border:1px solid var(--line);border-radius:var(--r);
        color:var(--ink);cursor:pointer;flex:none}
.burger svg{width:20px;height:20px}
.burger:hover{background:var(--y-soft);border-color:var(--y)}
@media(max-width:980px){.burger{display:inline-flex}}

.scrim{position:fixed;inset:0;background:rgba(12,13,18,.55);z-index:70;
       opacity:0;visibility:hidden;transition:opacity var(--t),visibility var(--t)}
.scrim.on{opacity:1;visibility:visible}

.drawer{position:fixed;top:0;right:0;bottom:0;width:min(86vw,360px);z-index:71;
        background:var(--b);color:var(--w);display:flex;flex-direction:column;
        transform:translateX(101%);transition:transform var(--t) var(--ease);
        overflow-y:auto;overscroll-behavior:contain}
.drawer.on{transform:none}
.drawer-top{display:flex;align-items:center;justify-content:space-between;gap:12px;
            padding:12px 16px;border-bottom:1px solid rgba(255,255,255,.14);flex:none}
.dclose{width:44px;height:44px;display:grid;place-items:center;background:transparent;border:0;
        color:var(--w);cursor:pointer;border-radius:var(--r)}
.dclose:hover{background:rgba(255,255,255,.1);color:var(--y)}
.dclose svg{width:20px;height:20px}

.dnav{flex:1;padding:6px 0}
.dnav a{display:block;padding:13px 20px;min-height:48px;color:var(--w);
        font-size:15.5px;font-weight:700;transition:background var(--t),color var(--t)}
.dnav a:hover{background:rgba(255,255,255,.07);color:var(--y)}
.dnav a.on{color:var(--y);box-shadow:inset 3px 0 0 var(--y)}
.dlabel{padding:16px 20px 4px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;
        color:var(--y);font-weight:800}
.dnav a.sub{padding-left:32px;font-size:14.5px;font-weight:600;color:rgba(255,255,255,.78);min-height:44px}
.dnav a.sub small{display:block;font-size:11.5px;font-weight:600;color:rgba(255,255,255,.45);margin-top:2px}

.dfoot{flex:none;padding:16px 20px calc(16px + env(safe-area-inset-bottom));
       border-top:1px solid rgba(255,255,255,.14);display:flex;flex-direction:column;gap:10px}
/* full-size language buttons — the utility-bar switcher is too small to tap */
.dlangs{display:flex;gap:8px}
.dlangs a{flex:1;min-height:44px;display:grid;place-items:center;border-radius:var(--r);
          border:1px solid rgba(255,255,255,.24);color:var(--w);font-size:13px;font-weight:800}
.dlangs a:hover{border-color:var(--y);color:var(--y)}
.dlangs a[aria-current=page]{background:var(--y);border-color:var(--y);color:var(--k)}
.dtel{display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;
      color:var(--w);font-weight:700;font-size:15px}
.dtel svg{width:16px;height:16px;color:var(--y)}
body.menu-open{overflow:hidden}

/* the utility-bar switcher is thumb-sized on touch, not 13px tall */
@media(max-width:980px){
  .langs a{padding:8px 11px}
  .util-in{gap:10px}
}

/* per-service detail rows — label left, real value right */
.info{display:grid;grid-template-columns:1fr 1fr;gap:2px 26px;background:var(--w);
      border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(18px,2.4vw,28px)}
@media(max-width:860px){.info{grid-template-columns:1fr}}
.irow{padding:14px 0;border-top:1px solid var(--line)}
.irow:first-child,.info>.irow:nth-child(2){border-top:0}
@media(max-width:860px){.info>.irow:nth-child(2){border-top:1px solid var(--line)}}
.irow .k{display:flex;align-items:center;gap:8px;font-size:11.5px;letter-spacing:.08em;
         text-transform:uppercase;color:var(--b);font-weight:800}
.irow .k svg{width:14px;height:14px}
.irow .v{margin-top:6px;color:var(--ink);font-size:14.5px;max-width:46ch}

/* related-equipment chips → deep-link into the catalog category */
.eqc{display:flex;flex-wrap:wrap;gap:8px}
.eqc a{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:var(--r-pill);
       background:var(--w);border:1px solid var(--line);font-size:13.5px;font-weight:700;color:var(--ink);
       transition:background var(--t),border-color var(--t),color var(--t)}
.eqc a:hover{background:var(--y-soft);border-color:var(--y);color:var(--b)}
.eqc a i{font-style:normal;font-size:11.5px;font-weight:800;color:var(--w);background:var(--b);
         border-radius:var(--r-pill);padding:1px 7px}

/* CNG: the calculator slot, minus a number we cannot honestly give */
.nocalc{background:var(--b);color:var(--w);border-radius:var(--r-lg);padding:clamp(20px,3vw,30px)}
.nocalc h3{color:var(--y);font-size:12px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:12px;font-weight:800}
.nocalc p{color:rgba(255,255,255,.72);font-size:14.5px}

/* FAQ — round-shaped cards, as asked for on the old site */
.qa-list{display:flex;flex-direction:column;gap:10px;max-width:860px}
.qa{background:var(--w);border:1px solid var(--line);border-radius:var(--r-lg);
    transition:border-color var(--t),box-shadow var(--t)}
.qa[open]{border-color:var(--y);box-shadow:0 6px 22px rgba(12,13,18,.07)}
.qa summary{display:flex;align-items:center;justify-content:space-between;gap:14px;
            padding:18px 20px;cursor:pointer;list-style:none;
            font-size:15.5px;font-weight:700;color:var(--ink)}
.qa summary::-webkit-details-marker{display:none}
.qa summary:hover{color:var(--b)}
.qa-x{flex:none;width:28px;height:28px;border-radius:50%;background:var(--y-soft);color:var(--b);
      display:grid;place-items:center;transition:transform var(--t) var(--ease),background var(--t)}
.qa-x svg{width:14px;height:14px}
.qa[open] .qa-x{transform:rotate(180deg);background:var(--y)}
.qa p{padding:0 20px 20px;color:var(--muted);font-size:14.5px;max-width:70ch}
.qa[hidden]{display:none}

/* map */
.map-wrap{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--surface,var(--page))}
.map-wrap iframe{display:block;width:100%;height:clamp(280px,42vw,440px);border:0}

/* contact */
.ct{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,40px);background:var(--w);
    border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(22px,3vw,40px);box-shadow:var(--sh)}
@media(max-width:860px){.ct{grid-template-columns:1fr}}
.crow{padding:13px 0;border-top:1px solid var(--line)}
.crow:first-child{border-top:0}
.crow .k{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--meta);font-weight:700}
.crow .v{font-weight:700;font-size:16.5px;color:var(--b);margin-top:2px}
.crow a:hover{color:var(--y-d)}
.live{display:inline-flex;align-items:center;gap:8px;padding:7px 13px;border-radius:var(--r-pill);
      background:var(--y-soft);color:var(--k);font-size:12.5px;font-weight:700}
.live i{width:7px;height:7px;border-radius:50%;background:var(--ok);display:block}

/* footer */
.foot{background:var(--b);color:rgba(255,255,255,.6);padding-block:36px 26px;font-size:13.5px}
.foot-top{display:flex;justify-content:space-between;gap:22px;flex-wrap:wrap;margin-bottom:22px}
.foot a{color:rgba(255,255,255,.85)} .foot a:hover{color:var(--y)}
.foot-bot{border-top:1px solid rgba(255,255,255,.14);padding-top:18px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:12.5px}

/* mobile bottom nav — DG Tools pattern */
.bnav{position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;background:var(--b);
      border-top:3px solid var(--y);padding:8px 6px calc(8px + env(safe-area-inset-bottom))}
.bnav-in{display:grid;grid-template-columns:repeat(5,1fr);gap:2px}
.bnav a{display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px 2px;
        font-size:9.5px;font-weight:700;color:rgba(255,255,255,.7);letter-spacing:.02em;text-align:center}
/* Uppercase in CSS, not in the markup — otherwise Armenian reads ԳԼԽԱՎՈՐ
   while the generated Russian and English read "Главная" / "Home" and the
   bar changes character with the language. Safe here: no nav label contains
   `և`, which uppercases to the archaic ԵՒ rather than the modern ԵՎ. */
.bnav a span{text-transform:uppercase}
.bnav a svg{width:21px;height:21px}
.bnav a.on{color:var(--y)}
.bnav a.call{color:var(--k)}
.bnav a.call .cc{width:40px;height:40px;border-radius:50%;background:var(--y);display:grid;place-items:center;margin-top:-14px;
                 box-shadow:0 -2px 10px rgba(0,0,0,.25)}
.bnav a.call span{color:var(--y)}
@media(max-width:820px){.bnav{display:block}body{padding-bottom:74px}}

/* desktop chat fab */
.fab{position:fixed;right:20px;bottom:20px;z-index:55;display:inline-flex;align-items:center;gap:9px;padding:13px 18px;
     border-radius:var(--r-pill);background:var(--y);color:var(--k);font-weight:700;font-size:14px;
     box-shadow:0 10px 28px -6px rgba(255,184,0,.6);transition:transform var(--t) var(--ease)}
.fab:hover{transform:translateY(-2px)}
.fab svg{width:19px;height:19px}
@media(max-width:820px){.fab{display:none}}

@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto}}