/* ===================================================================
   НСВС · base, page scope, primitives that render.php emits, header.
   Loads after tokens.css and ui.css. Every value is a var(--token);
   the only literals here are the layout numbers the prototype draws.
   =================================================================== */

/* ── Page scope ───────────────────────────────────────────────────────
   ONE definition of the page grid. Every container on every NSVS page,
   sections, header rows, mega panel, footer, is `.n-wrap` and reads these
   two tokens. Nothing sets its own max-width or gutter; if you need a
   different width, change it here and it changes everywhere.

   The numbers are /gbt's: 1600 with 40px gutters, 20px on mobile. The
   brandbook agrees (--wrap 1600); the home prototype drew 1320/56, which
   left the new pages narrower than the AIRFLOW landing they sit beside. */
.nsvs-page{
  --wrap:1600px;
  --wrap-pad:40px;
  --sec-pad:104px;
  --sec-pad-sm:72px;
  --fs-h2:48px;
  --fs-h1:clamp(34px,5.4cqw,72px);
  background:var(--cream);
  color:var(--ink);
  font-family:var(--font);
  -webkit-font-smoothing:antialiased;
  margin:0;
}
@media (max-width:700px){
  .nsvs-page{
    --wrap-pad:20px;
    --sec-pad:44px;
    --sec-pad-sm:34px;
    --fs-h2:28px;
  }
}
.nsvs-page,.nsvs-page *,.nsvs-page *::before,.nsvs-page *::after{box-sizing:border-box}
.nsvs-page img{max-width:100%;height:auto;display:block}
/* Margin and list reset.
   Zero specificity, for the same reason the link reset below is written that
   way. As `.nsvs-page p` it scored (0,1,1) and beat every single-class rule
   that sets a margin on a heading, a paragraph or a list: `.nb-pain__note`,
   `.nb-hero__lead`, `.nb-quiz__q`, `.fortune-note`, `.nb-team__name`, and
   every `.pu-*` rule in the site's shared popups, which render inside this
   page. Twenty-five authored spacings were silently dropped; that is what the
   owner saw as «интервалы не соблюдены». `:where()` still beats the user-agent
   sheet, author rules always do, and now loses to the components. */
:where(.nsvs-page) :where(h1,h2,h3,h4,p,ul,ol){margin:0}
:where(.nsvs-page) :where(ul,ol){list-style:none;padding:0}
.nsvs-page button{font-family:inherit}

/* Link reset.
   The layer dequeues the theme's stylesheet, which is what used to kill the
   browser's default underline and link blue. Without this every link on the
   page renders underlined, and any anchor whose colour a component does not
   set renders in the UA's blue.

   Specificity is deliberately zero: `:where()` contributes none, so this beats
   the user-agent sheet (author rules always do) and loses to every component
   rule. Written as a plain `.nsvs-page a` it would score (0,1,1) and quietly
   override `.nh-nav__link{color:…}` and every other single-class colour. */
:where(.nsvs-page) :where(a){color:inherit;text-decoration:none}
:where(.nsvs-page) :where(a:hover){text-decoration:none}

/* A font plugin prints an inline <style> in wp_head that forces
   Helvetica onto body, every heading, buttons, inputs and footer. Inline
   styles are not in the enqueue queue, so nsvs_drop_theme_assets() cannot
   reach them. These selectors carry one more class than the plugin's bare
   element selectors, so the design's own type wins on specificity rather
   than on source order. */
.nsvs-page h1,.nsvs-page h2,.nsvs-page h3,.nsvs-page h4,.nsvs-page h5,.nsvs-page h6,
.nsvs-page button,.nsvs-page input,.nsvs-page select,.nsvs-page textarea,
.nsvs-page footer{font-family:var(--font)}

/* ── Icons ───────────────────────────────────────────────────────────
   Every glyph is a <use> into the footer sprite. Colour comes from the
   surrounding text, so an icon never carries its own colour. */
.n-ico{flex:0 0 auto;fill:currentColor;color:inherit;vertical-align:middle}
.n-stars{display:inline-flex;gap:2px;color:var(--line)}
.n-stars .is-on{color:var(--gold)}

/* ── Section heading (render.php: nsvs_sec_head) ─────────────────── */
.n-head{max-width:880px;margin-bottom:var(--s-10)}
.n-head--center{max-width:760px;margin-left:auto;margin-right:auto;text-align:center}
.n-head--center .n-eyebrow{justify-content:center}
.n-head--center .n-lead{margin-left:auto;margin-right:auto}
.n-head .n-h2{margin:var(--s-4) 0 0}
.n-head .n-lead{margin-top:var(--s-4);max-width:620px}
@media (max-width:700px){ .n-head{margin-bottom:var(--s-6)} }

/* ── Media (render.php: nsvs_photo / nsvs_avatar) ────────────────── */
.n-media{position:relative;overflow:hidden;border-radius:var(--r-2xl);background:var(--cream-dark)}
.n-media--16-11{aspect-ratio:16/11}
.n-media--1-1{aspect-ratio:1/1}
.n-media--4-5{aspect-ratio:4/5}
.n-media--3-2{aspect-ratio:3/2}
.n-media--9-16{aspect-ratio:9/16}
.n-media--free{aspect-ratio:auto;height:100%}
/* `.nsvs-page img{height:auto}` a few lines up is (0,1,1), one class plus an
   element, and a bare `.n-media__img` is (0,1,0), so it loses and the photo
   renders at its natural height, spilling out of its frame. Every media image
   is qualified with the page scope for that reason. Do not "simplify" these
   selectors back. */
.nsvs-page .n-media__img{width:100%;height:100%;object-fit:cover}
.n-media .n-ph{position:absolute;inset:0;border-radius:inherit}
.n-avatar{position:relative;display:inline-block;flex:0 0 auto;border-radius:var(--r-pill);overflow:hidden;background:var(--cream-dark)}
.nsvs-page .n-avatar__img{width:100%;height:100%;object-fit:cover}
.n-avatar .n-ph{position:absolute;inset:0;border-radius:inherit}
.n-avatar--letter{display:inline-flex;align-items:center;justify-content:center;background:var(--teal-soft);color:var(--teal-deep);font-weight:800;font-size:.42em;letter-spacing:0;line-height:1}

/* ── Grid helper: the one grid every block composes with ─────────── */
.n-grid{display:grid;gap:var(--s-6)}
.n-grid--2{grid-template-columns:repeat(2,1fr)}
.n-grid--3{grid-template-columns:repeat(3,1fr)}
.n-grid--4{grid-template-columns:repeat(4,1fr)}
@media (max-width:1000px){ .n-grid--4{grid-template-columns:repeat(2,1fr)} .n-grid--3{grid-template-columns:repeat(2,1fr)} }
@media (max-width:700px){ .n-grid--2,.n-grid--3,.n-grid--4{grid-template-columns:1fr;gap:var(--s-4)} }

/* ===================================================================
   HEADER, ported from NsvsHeader (nsvs-home.html)
   =================================================================== */

.nh{background:var(--white);border-bottom:1px solid var(--line);position:relative;z-index:var(--z-header)}
@media (max-width:1000px){ .nh{display:none} }

/* Top strip */
/* Geometry is /gbt's header (header3.php `.hd`), value for value: the three
   rows are full-bleed with 36px gutters, not the page's 1600/40 container.
   The site now opens one desktop header everywhere; /gbt is the reference, so
   a number that differs from `.hd-*` here is a bug, not a variation. */
.nh-row{max-width:none;margin:0;padding-left:36px;padding-right:36px}
/* Owner's palette review 2026-08-29: the sticky strips carry the brand's
   light tiffany (--teal-dark #43B8BC, the nsvs.info primary), not the deep
   teal. White-on-#43B8BC is the brand's own live pattern (nsvs.info sets
   white on it site-wide), so secondary text runs at higher opacity here
   than it did on the deep strip. */
.nh-top{background:var(--teal-dark);color:#fff}
.nh-top .nh-row{height:42px;display:flex;align-items:center;gap:18px;font-size:13px;line-height:1.15;white-space:nowrap}
.nh-top__left{display:flex;align-items:center;gap:20px;flex:0 0 auto}
.nh-top__open{display:inline-flex;align-items:center;gap:var(--s-2);font-weight:600}
.nh-top__open .n-dot{width:7px;height:7px}
.nh-top__hours{color:rgba(255,255,255,.88);font-weight:500}
.nh-top__div{width:1px;height:16px;background:rgba(255,255,255,.32);flex:0 0 auto}
.nh-top__branches{flex:1;display:flex;align-items:center;justify-content:center;gap:2px;min-width:0;overflow:hidden}
.nh-top__branch{display:inline-flex;align-items:center;gap:6px;padding:6px 9px;border-radius:var(--r-pill);color:rgba(255,255,255,.95);font-weight:500;flex:0 0 auto}
.nh-top__branch .n-ico{color:rgba(255,255,255,.75)}
.nh-top__right{display:flex;align-items:center;gap:18px;flex:0 0 auto}
.nh-top__phone{display:inline-flex;align-items:center;gap:var(--s-2);font-weight:700;letter-spacing:-.2px;color:#fff}
.nh-top__phone:hover{color:#fff}
.nh-top__phone .n-ico{color:rgba(255,255,255,.9)}
.nh-top__call{display:inline-flex;align-items:center;gap:6px;font-weight:600;opacity:.85;cursor:pointer;background:none;border:0;padding:0;color:inherit;font-size:inherit;font-family:inherit}
.nh-top__call:hover{opacity:1}

/* Brand lockup */
.nh-logo{display:flex;align-items:center;gap:16px;color:inherit}
.nh-logo__tile{width:62px;height:62px;flex:0 0 62px;border-radius:18px;background:linear-gradient(135deg,var(--teal-dark),var(--teal));display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:0 12px 28px -10px rgba(34,120,127,.45);position:relative}
.nh-logo__tile::after{content:'';position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 1px 0 rgba(255,255,255,.3)}
/* Same brand PNG and the same filter /gbt uses: the mark is teal on
   transparent, brightness(0) crushes it to black and invert(1) flips it to
   white, alpha untouched. */
.nh-logo__img{display:block;width:42px;height:42px;object-fit:contain;filter:brightness(0) invert(1)}
.nh-logo__text{display:block;min-width:0}
.nh-logo__name{display:flex;align-items:baseline;gap:8px;font-weight:800;font-size:26px;letter-spacing:-.5px;line-height:1;color:var(--ink)}
.nh-logo__since{font-size:13px;font-weight:700;color:var(--teal-deep);background:var(--teal-soft);padding:3px 7px;border-radius:6px;letter-spacing:.5px}
.nh-logo__sub{display:block;font-size:13px;font-weight:500;line-height:1.15;color:var(--ink-3);margin-top:6px}
.nh-logo--compact .nh-logo__tile{width:38px;height:38px;flex:0 0 38px;border-radius:11px;box-shadow:none}
.nh-logo--compact .nh-logo__tile::after{display:none}
.nh-logo--compact .nh-logo__img{width:26px;height:26px}
.nh-logo--compact{gap:9px}
.nh-logo--compact .nh-logo__name{font-size:15px;letter-spacing:-.3px}
.nh-logo--compact .nh-logo__sub{font-size:13px;font-weight:400;margin-top:2px}

/* Main band */
.nh-band{padding-top:22px;padding-bottom:22px;display:grid;grid-template-columns:auto 1fr;align-items:center;gap:28px}
.nh-band__actions{display:flex;align-items:center;justify-content:flex-end;gap:var(--s-3)}
.nh-band__actions .n-btn{height:56px;padding:0 22px;gap:10px}

/* Nav row */
.nh-nav{display:flex;align-items:stretch;gap:2px;white-space:nowrap}
/* The nav row rides the page on desktop the way the mobile bar does: once the
   header has scrolled past, the row pins itself to the top, hides on scroll
   down and comes back on any scroll up. `.nh-nav` is what goes fixed, not the
   row, so the row keeps its 55px in the flow and the page never jumps.
   Driven by navStickInit() in nsvs.js. */
.nh-navrow{position:relative;border-top:1px solid var(--line-soft)}
@media (min-width:1001px){
  .nh-navrow.is-fixed .nh-nav{position:fixed;top:0;left:0;right:0;z-index:var(--z-header);
    background:var(--white);border-bottom:1px solid var(--line);
    box-shadow:0 14px 34px -28px rgba(15,40,42,.75);
    transition:transform var(--t-slow) var(--ease)}
  .nh-navrow.is-fixed.is-off .nh-nav{transform:translateY(-101%)}
  .nh-navrow.is-fixed .nmega{position:fixed;top:var(--nh-nav-h,55px)}
  .nh-navrow.is-fixed.is-off .nmega{display:none}
}
@media (prefers-reduced-motion:reduce){
  .nh-navrow.is-fixed .nh-nav{transition:none}
}
.nh-nav__all{display:inline-flex;align-items:center;gap:10px;line-height:1.15;padding:16px 22px 16px 0;margin-right:22px;font-weight:700;font-size:14.5px;color:var(--ink);border:none;border-right:1px solid var(--line);background:none;cursor:pointer;border-radius:0;flex:0 0 auto}
.nh-nav__caret{color:var(--ink-3);margin-left:4px;transition:transform var(--t-slow) var(--ease)}
.nh-nav__all[aria-expanded="true"]{color:var(--teal-deep)}
.nh-nav__all[aria-expanded="true"] .nh-nav__caret{transform:rotate(180deg);color:var(--teal-deep)}
.nh-nav__all:hover{color:var(--teal-deep)}
.nh-nav__burger{width:36px;height:22px;position:relative;display:inline-block;flex:0 0 36px}
.nh-nav__burger i{position:absolute;left:0;height:2px;background:var(--teal-deep);border-radius:2px}
.nh-nav__burger i:nth-child(1){top:2px;right:0}
.nh-nav__burger i:nth-child(2){top:10px;right:12px}
.nh-nav__burger i:nth-child(3){bottom:2px;right:8px}
.nh-nav__list{display:flex;align-items:stretch;gap:2px;flex:1;min-width:0;font-size:14px;font-weight:600}
.nh-nav__link{display:inline-flex;align-items:center;gap:7px;line-height:1.15;padding:18px 13px;color:var(--ink-2);position:relative;flex:0 0 auto}
/* Split so this matches header3.php exactly: hover is colour only (:hover
   there, header3.php `.hd-nav-link:hover`) and only the CURRENT page's item
   takes 700 (`.hd-nav-link.is-active`). Bolding on hover reflowed the whole
   nav row under the cursor and made the two headers read differently. */
.nh-nav__link:hover{color:var(--teal-deep)}
.nh-nav__link.is-on{color:var(--teal-deep);font-weight:700}
.nh-nav__badge{font-size:13px;font-weight:700;color:var(--ink-2);background:var(--cream);padding:2px 7px;border-radius:var(--r-pill);letter-spacing:.2px}
.nh-nav__badge--urgent{color:#fff;background:var(--warn)}
.nh-nav__right{display:flex;align-items:center;gap:8px;padding:12px 0 12px 16px;border-left:1px solid var(--line);margin-left:8px;flex:0 0 auto}
.nh-nav__urgent{display:inline-flex;align-items:center;gap:6px;line-height:1.15;padding:8px 12px;border-radius:var(--r-pill);background:var(--teal-soft);color:var(--teal-deep);font-size:13px;font-weight:700;white-space:nowrap}

/* ── Mega menu ───────────────────────────────────────────────────── */
/* ── Затемнение под открытым меню ─────────────────────────────────────
   /gbt's `.h3-backdrop`, value for value: the page behind an open menu dims
   and blurs, and a click on it closes the menu. One element for both menus,
   the desktop directions panel and the mobile sheet, because a visitor
   should meet the same page treatment wherever they landed.

   z-index sits under --z-header (200), so the header and the sheet, which both
   live at that layer, stay above it while everything else goes behind. */
.n-backdrop{position:fixed;inset:0;background:rgba(15,40,42,.55);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  z-index:calc(var(--z-header) - 50);opacity:0;visibility:hidden;pointer-events:none;
  cursor:pointer;transition:opacity .26s ease,visibility 0s linear .26s}
[data-nsvs-menu="open"] .n-backdrop,
[data-nsvs-panel="open"] .n-backdrop{opacity:1;visibility:visible;pointer-events:auto;
  transition:opacity .26s ease,visibility 0s}
@media (prefers-reduced-motion:reduce){
  .n-backdrop{transition:none}
}

.nmega{position:absolute;left:0;right:0;top:100%;background:var(--white);border-top:1px solid var(--line);border-bottom:1px solid var(--line);box-shadow:var(--sh-4);z-index:var(--z-dropdown);animation:n-mega-in var(--t-slow) var(--ease)}
.nmega[hidden]{display:none}
@keyframes n-mega-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.nmega__wrap{padding-top:var(--s-8);padding-bottom:var(--s-6)}
.nmega__dirs{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-4)}
@media (max-width:1200px){ .nmega__dirs{grid-template-columns:repeat(2,1fr)} }
.nmega__dir{display:flex;align-items:center;gap:var(--s-3);color:inherit;padding:var(--s-4);border:1.5px solid var(--line);border-radius:var(--r-lg);background:var(--white);transition:border-color var(--t-fast),transform var(--t-fast) var(--ease),box-shadow var(--t-fast)}
.nmega__dir:hover{border-color:var(--teal-deep);transform:translateY(-2px);box-shadow:var(--sh-2)}
.nmega__dir.is-on{border-color:var(--teal-deep);background:var(--teal-mist)}
.nmega__dir-body{flex:1;min-width:0}
.nmega__dir-arrow{color:var(--ink-3);flex:0 0 auto;transition:transform var(--t-fast) var(--ease),color var(--t-fast)}
.nmega__dir:hover .nmega__dir-arrow{color:var(--teal-deep);transform:translateX(3px)}
.nmega__icon{width:40px;height:40px;flex:0 0 40px;border-radius:var(--r-sm);background:var(--teal-soft);color:var(--teal-deep);display:flex;align-items:center;justify-content:center}
.nmega__title{display:block;font-size:16px;font-weight:800;color:var(--ink);letter-spacing:-.3px}
.nmega__lead{display:block;font-size:var(--fs-caption);color:var(--ink-3);margin-top:3px;line-height:1.4}

/* ===================================================================
   MOBILE HEADER + MENU SHEET

   One burger menu for the whole site. This is /gbt's format (header3.php
   `.hm`): a bar pinned to the top, and a full-width curtain that rolls down
   under it. It replaces the left side drawer these pages used to open, which
   was the only place on the site where the burger behaved differently.
   =================================================================== */

/* Fixed, not sticky, /gbt's `.hm-bar` is fixed too, and for a reason this
   layer learned the hard way. A sticky bar loses its offset the moment an
   ancestor's overflow stops being visible: `popups-uslugi.php` locks the page
   behind a modal with `body{overflow:hidden}`, and at that instant a sticky
   bar jumps from the top of the screen to the top of the DOCUMENT, a hard
   cut with no transition, measured at −1400px on a page scrolled to 1400.
   Fixed positioning does not care about the lock. The page reserves the bar's
   height instead; `--nmob-h` is measured by nsvs.js, and the fallback is the
   height it actually renders at (34px strip + 67px bar). */
.nmob{display:none;position:fixed;top:0;left:0;right:0;z-index:var(--z-header);background:var(--white)}
@media (max-width:1000px){
  .nmob{display:block}
  .nsvs-page{padding-top:var(--nmob-h,101px)}
}

/* Smart header, /gbt's behaviour (header3.php `.hm-bar`): the bar slides
   out of the way while you scroll down and comes back on any upward scroll,
   so the burger is one flick away without the bar standing on the content.
   State is an attribute on <html>, set by nsvs.js. The sheet is its child and
   rides with it. */
.nmob{transform:translateY(0);transition:transform .26s cubic-bezier(.4,0,.2,1);will-change:transform}
[data-nsvs-bar="off"] .nmob{transform:translateY(-100%)}
@media (prefers-reduced-motion:reduce){
  .nmob{transition:none}
}
.nmob__top{background:var(--teal-dark);color:#fff;height:34px;display:flex;align-items:center;justify-content:space-between;padding:0 var(--s-4);font-size:13px;font-weight:600}
.nmob__open{display:inline-flex;align-items:center;gap:7px}
.nmob__open .n-dot{width:6px;height:6px;box-shadow:none}
.nmob__phone{display:inline-flex;align-items:center;gap:6px;color:#fff}
.nmob__phone .n-ico{color:rgba(255,255,255,.9)}
.nmob__bar{background:var(--white);padding:11px var(--s-4);display:flex;align-items:center;gap:11px;border-bottom:1px solid var(--line)}
.nmob__bar .nh-logo{flex:1;min-width:0}
.nmob__book{width:44px;height:44px;flex:0 0 44px;border-radius:var(--r-md);background:var(--teal-dark);color:#fff;border:0;display:flex;align-items:center;justify-content:center;cursor:pointer}
.nmob__book:hover{color:#fff;background:var(--teal-deep)}

/* Burger and X are stacked inside the one button and cross-fade with a
   quarter turn, so the control tracks the curtain instead of snapping at the
   end of it. Keyed on the open state alone: the moment the X is tapped the
   button starts turning back, in step with the sheet rolling up. */
.nmob__burger{position:relative;width:44px;height:44px;flex:0 0 44px;border-radius:var(--r-md);border:1.5px solid var(--line);background:var(--white);color:var(--ink);display:flex;align-items:center;justify-content:center;padding:0;cursor:pointer;transition:border-color var(--t-slow) var(--ease),color var(--t-slow) var(--ease)}
.nmob__burger-open,.nmob__burger-close{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;transition:opacity var(--t-slow) var(--ease),transform var(--t-slow) var(--ease)}
.nmob__burger-close{opacity:0;transform:rotate(-90deg) scale(.6)}
[data-nsvs-menu="open"] .nmob__burger{border-color:var(--teal);color:var(--teal-deep)}
[data-nsvs-menu="open"] .nmob__burger-open{opacity:0;transform:rotate(90deg) scale(.6)}
[data-nsvs-menu="open"] .nmob__burger-close{opacity:1;transform:none}

/* "Новый Стандарт" becomes "меню" while the sheet is open. The two captions
   are layered, so the swap cross-fades in place instead of reflowing. */
.nmob__bar .nh-logo__sub{position:relative}
.nmob__sub-default,.nmob__sub-open{transition:opacity var(--t-slow) var(--ease)}
.nmob__sub-open{position:absolute;left:0;top:0;right:0;opacity:0;pointer-events:none}
[data-nsvs-menu="open"] .nmob__sub-default{opacity:0}
[data-nsvs-menu="open"] .nmob__sub-open{opacity:1}

/* The curtain. Closed it is a zero-height, invisible, untabbable strip under
   the bar, so it costs nothing in layout; open it fills the viewport below the
   bar and scrolls inside itself while the page behind it is locked.
   --nmob-h is the bar's measured height, set by nsvs.js. */
.nmob__sheet{position:absolute;left:0;right:0;top:100%;z-index:var(--z-dropdown);background:var(--cream);overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;max-height:0;opacity:0;visibility:hidden;transition:max-height var(--t-sheet) var(--ease-out),opacity var(--t-slow) var(--ease),visibility 0s linear var(--t-sheet)}
[data-nsvs-menu="open"] .nmob__sheet{max-height:calc(100vh - var(--nmob-h,100px));max-height:calc(100dvh - var(--nmob-h,100px));opacity:1;visibility:visible;transition:max-height var(--t-sheet) var(--ease-out),opacity var(--t-slow) var(--ease),visibility 0s}
.nmob__sheet-body{padding-bottom:var(--s-7)}

/* Consultation plate under the bar, /gbt's `.hm-cta`, value for value
   (margin 16/14, padding 14/16, r-md, the same 135deg abyss→dark gradient and
   the same radial glow, 38px avatar, 14px/800 title, 11.5px sub at .85, 32px
   white arrow). Markup and the reason it lives outside .nmob: inc/menu.php
   `nsvs_mobile_consult()`. */
.nmob__cta{display:none;margin:0 var(--s-4) 14px;padding:14px var(--s-4);border-radius:var(--r-md);
  background:linear-gradient(135deg,var(--teal-dark),var(--teal));color:#fff;
  align-items:center;gap:var(--s-3);position:relative;overflow:hidden;cursor:pointer}
@media (max-width:1000px){.nmob__cta{display:flex}}
.nmob__cta:hover{color:#fff}
.nmob__cta::after{content:'';position:absolute;right:-40px;top:-40px;width:120px;height:120px;border-radius:999px;
  background:radial-gradient(circle,rgba(123,201,192,.4),transparent 60%)}
.nmob__cta-ava{width:38px;height:38px;flex:0 0 38px;border-radius:11px;background:rgba(255,255,255,.2);color:#fff;
  display:inline-flex;align-items:center;justify-content:center;position:relative;z-index:1}
/* With the doctor's photograph. The roster's files are full-figure transparent
   cutouts, so the tile takes the light ground they were shot against and the
   modal portrait's framing, centring a cutout in a 38px box shows a chest,
   not a face. Round, like every other face on the site and like the arrow at
   the other end of the row. */
.nmob__cta-ava--photo{background:var(--teal-soft);border-radius:999px;overflow:hidden;
  box-shadow:0 0 0 1.5px rgba(255,255,255,.35)}
.nmob__cta-ava--photo img{width:100%;height:100%;object-fit:cover;object-position:50% 10%;display:block}
.nmob__cta-text{flex:1;min-width:0;position:relative;z-index:1}
.nmob__cta-title{display:block;font-size:14px;font-weight:800;line-height:1.15;letter-spacing:-.2px}
.nmob__cta-sub{display:block;font-size:13px;opacity:.85;margin-top:3px}
.nmob__cta-arrow{width:32px;height:32px;flex:0 0 32px;border-radius:999px;background:#fff;color:var(--teal-dark);
  display:inline-flex;align-items:center;justify-content:center;position:relative;z-index:1}

.nmob__dirs{padding:var(--s-4) var(--s-4) 0;display:flex;flex-direction:column;gap:var(--s-2)}
.nmob__dirs .n-label{margin-bottom:var(--s-1)}
.nmob__dirs .nmega__icon{width:40px;height:40px;flex:0 0 40px}
.nmob__dirs .nmega__dir{padding:var(--s-3) var(--s-4);border-width:1px;border-color:var(--line-soft);border-radius:var(--r-lg)}
.nmob__dirs .nmega__dir:hover{transform:none;box-shadow:none}

.nmob__links{display:flex;flex-direction:column;padding:var(--s-2) var(--s-4) var(--s-1)}
.nmob__link{display:flex;align-items:center;justify-content:space-between;gap:var(--s-2);padding:14px 4px;font-size:14.5px;font-weight:600;color:var(--ink);border-bottom:1px solid var(--line-soft)}
.nmob__link:last-child{border-bottom:0}
.nmob__link-title{flex:1;min-width:0;display:inline-flex;align-items:center;gap:var(--s-2)}
.nmob__link-right{display:inline-flex;align-items:center;gap:var(--s-2);color:var(--ink-3);flex:0 0 auto}
.nmob__link--urgent{color:var(--urgent);font-weight:700}
.nmob__link--urgent .nmob__link-right{color:var(--urgent)}
.nmob__link-dot{width:7px;height:7px;flex:0 0 7px;border-radius:var(--r-pill);background:currentColor}

.nmob__socials{display:flex;gap:var(--s-3);padding:var(--s-3) var(--s-4) 0}
.nmob__soc{flex:1 1 0;min-width:0;height:52px;display:inline-flex;align-items:center;justify-content:center;gap:9px;border-radius:var(--r-lg);background:var(--white);border:1px solid var(--line-soft);font-size:14.5px;font-weight:700;color:var(--ink)}
.nmob__soc:hover{border-color:var(--line)}
.nmob__soc-glyph{flex:0 0 auto}
.nmob__soc--tg .nmob__soc-glyph{color:#229ED9}
.nmob__soc--wa .nmob__soc-glyph{color:#25D366}

.nmob__foot{padding:var(--s-5) var(--s-4) 0;display:flex;flex-direction:column;gap:var(--s-3);align-items:flex-start}
.nmob__tel{font-size:20px;font-weight:800;color:var(--ink);letter-spacing:-.4px}

@media (prefers-reduced-motion:reduce){
  .nmob__sheet,.nmob__burger,.nmob__burger-open,.nmob__burger-close,.nmob__sub-default,.nmob__sub-open{transition:none!important}
}

/* ── Scrollbar ────────────────────────────────────────────────────────
   The rest of the site replaces the OS scrollbar with a 2px brand bar
   (head.php, which this layer does not include). Same bar here, so the
   chrome is one brand on every page. Colour is the layer's own --teal,
   the NSVS twin of head.php's --main-color.

   In modern Chrome and Safari the standard props (scrollbar-width /
   scrollbar-color) take precedence and make the browser ignore
   ::-webkit-scrollbar, so an exact 2px is only reachable through the legacy
   pseudo with NO standard props set. Firefox has no ::-webkit-scrollbar and
   gets the standard props instead ("thin" is its minimum). */
html::-webkit-scrollbar{width:2px;height:2px}
html::-webkit-scrollbar-track{background:transparent}
html::-webkit-scrollbar-thumb{background:var(--teal);border-radius:0}
html::-webkit-scrollbar-thumb:hover{background:var(--teal-dark)}
html::-webkit-scrollbar-corner{background:transparent}

@supports not selector(::-webkit-scrollbar){
  html{scrollbar-width:thin;scrollbar-color:var(--teal) transparent}
}

/* Touch devices: hide the OS bar entirely and let the overlay below be the
   only one. Android Chrome draws a transient native bar, which rendered
   beside the overlay as two bars; iOS Safari does not always honour
   ::-webkit-scrollbar for the page, which is why the overlay exists. */
@media (pointer:coarse){
  html::-webkit-scrollbar{width:0!important;height:0!important;display:none}
  html{scrollbar-width:none}
}

/* The overlay bar nsvs.js builds on touch devices: shown while scrolling,
   fades when idle. pointer-events:none, never blocks a tap. */
.nsvs-mscroll{position:fixed;top:0;right:0;width:2px;height:100vh;z-index:9998;pointer-events:none;opacity:0;transition:opacity .3s ease}
.nsvs-mscroll.is-active{opacity:1}
.nsvs-mscroll__thumb{position:absolute;top:0;right:0;width:2px;height:0;background:var(--teal);border-radius:0;will-change:transform,height}

/* ── Site popups ──────────────────────────────────────────────────────
   The popups themselves are `template-parts/popups-uslugi.php` and carry all
   their own CSS under `.pu-scope`. Two things belong here instead of there,
   because they exist only on these pages: the success plate nsvs.js paints
   over a sent form (the theme's own `.form-info` lives in the stylesheet this
   layer dequeues), and the reset for the two header controls that open a popup
   and are therefore <button>, not <a>. */
.pu-scope .pu-ok{display:flex;flex-direction:column;gap:6px;padding:22px;border-radius:14px;background:var(--teal-soft);color:var(--accent-ink);text-align:center}
.pu-scope .pu-ok b{font-size:16px;font-weight:800}
.pu-scope .pu-ok span{font-size:13.5px;opacity:.85}

/* `font-family`, not the `font` shorthand: `font:inherit` here also reset the
   size, weight and line-height these two controls set above, so the desktop
   urgent chip rendered at 16px/normal instead of 12px/1.15 and made the whole
   nav row 8px taller than /gbt's. */
.nh-nav__urgent,.nmob__link--urgent{border:0;font-family:inherit;cursor:pointer;text-align:left}
.nmob__link--urgent{width:100%;background:none}