@font-face{font-family:Helveticaneuecyr;src:url("/static/hn-roman.woff2")format("woff2");
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Helveticaneuecyr;src:url("/static/hn-light.woff2")format("woff2");
  font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:Helveticaneuecyr;src:url("/static/hn-medium.woff2")format("woff2");
  font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Namu 1930";src:url("/static/namu-1930.woff2")format("woff2");
  font-weight:600;font-style:normal;font-display:swap}
/* Шапка й меню — ті самі, що на clinic.houston.dp.ua.
   Витягнуто зі стилів клініки (vacancies.html + hx-glass.css) 10.09.2026.
   Змінні бренду продубльовані, бо culture має власну палітру нижче. */
:root{
  --lime:#9ebc32;--lime-d:#7a9424;
  --ink:#0d0b09;--ink2:#1a1714;
  --cream:#eae7e0;--cream2:#f5f3ef;
  --text:#e8e4dc;--muted:rgba(232,228,220,.54);
  --border:rgba(232,228,220,.1);
  --r:16px;--max:1160px;--px:48px;--nav-h:72px;
}
.btn-tg-form{display:inline-flex;align-items:center;gap:6px;background:#229ED9;color:#fff;padding:0 22px;height:50px;border-radius:10px;font-size:14px;font-weight:600;text-decoration:none;white-space:nowrap;transition:background .15s;flex-shrink:0}
.btn-tg-form:hover{background:#1a8bbf}
.btn-tg-form svg{flex-shrink:0}
.btn-tg{display:inline-flex;align-items:center;gap:7px;background:#229ED9;color:#fff;padding:10px 20px;border-radius:10px;font-size:13.5px;font-weight:600;text-decoration:none;white-space:nowrap;transition:background .15s,transform .12s;flex-shrink:0}
.btn-tg:hover{background:#1a8bbf;transform:translateY(-1px)}
@media(max-width:760px){
/* кнопки в рядок: дозволяємо переносити і не давати їм роздувати контейнер */
  .btn{max-width:100%}
}
.btn{display:inline-flex;align-items:center;gap:9px;padding:13px 26px;border-radius:100px;font-family:Helveticaneuecyr,Arial,sans-serif;font-size:14px;font-weight:500;letter-spacing:.03em;border:none;cursor:pointer;transition:opacity .18s,transform .15s,box-shadow .18s;white-space:nowrap}
.btn:hover{opacity:.84;transform:translateY(-1px)}
.btn-lime{background:var(--lime);color:var(--ink)}
.btn-lime:hover{box-shadow:0 4px 20px rgba(158,188,50,.3)}
.btn-outline{background:transparent;color:var(--cream);box-shadow:0 0 0 1px var(--border)}
.btn-outline:hover{background:rgba(232,228,220,.06)}
/* NAV */
    .nav{position:fixed;inset:0 0 auto;z-index:100;height:var(--nav-h);background:rgba(13,11,9,.82);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--border)}
.nav-in{max-width:var(--max);margin:0 auto;padding:0 var(--px);height:100%;display:flex;align-items:center;justify-content:space-between;gap:24px}
.nav-logo img{height:30px}
.nav-links{display:flex;align-items:center;gap:2px;list-style:none}
.nav-links a{font-family:"Namu 1930",Impact,sans-serif;font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:rgba(232,228,220,.62);padding:6px 10px;border-radius:8px;transition:color .18s,background .18s}
.nav-links a:hover,.nav-links a.active{color:var(--cream);background:rgba(232,228,220,.07)}
.nav-links a.active{color:var(--lime)}
.drop{position:relative}
.drop>a::after{content:"▾";margin-left:4px;font-size:10px;opacity:.7}
.drop-menu{list-style:none;margin:0;padding:8px;display:none;position:absolute;top:100%;left:0;margin-top:0;background:rgba(13,11,9,.97);border:1px solid var(--border);border-radius:12px;min-width:250px;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);z-index:200;box-shadow:0 8px 32px rgba(0,0,0,.5)}
.drop:hover .drop-menu{display:block}
.drop-menu::before{content:"";position:absolute;top:-10px;left:0;right:0;height:10px}
.drop-menu li{list-style:none!important;padding:0;margin:0}
.drop-menu a{display:block;padding:10px 14px;font-family:"Namu 1930",Impact,sans-serif;font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:rgba(232,228,220,.62);border-radius:8px;transition:color .18s,background .18s;background:transparent!important}
.drop-menu a:hover{color:var(--cream)!important;background:rgba(232,228,220,.07)!important}
.drop-menu a.active-page{color:var(--lime)!important}
.nav-tel{font-family:"Namu 1930",Impact,sans-serif;font-size:14px;font-weight:600;color:var(--cream);transition:color .18s}
.nav-tel:hover{color:var(--lime)}
.nav-cta{display:flex;align-items:center;gap:16px}
.burger{display:none;background:none;border:none;cursor:pointer;padding:4px}
.burger img{width:28px}
.mob{display:none;position:fixed;inset:0;z-index:1000;background:var(--ink);flex-direction:column;align-items:center;justify-content:flex-start;gap:18px;overflow-y:auto;padding:72px 20px 100px}
.mob.open{display:flex;z-index:10001}
.mob-x{position:absolute;top:18px;right:18px;background:none;border:none;cursor:pointer}
.mob-x img{width:34px}
.mob a{font-family:"Namu 1930",Impact,sans-serif;font-size:28px;font-weight:600;text-transform:uppercase;color:var(--cream);transition:color .18s}
.mob a:hover{color:var(--lime)}
.mob-sub{font-size:16px;text-transform:none;letter-spacing:.04em;color:rgba(250,248,240,.65);margin-top:-6px}
.mob-sub.active{color:var(--lime);opacity:1}
.mob-services-label{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:rgba(250,248,240,.35);margin-bottom:-14px;pointer-events:none}
.pos-cta .btn{font-size:13px;padding:11px 22px}
.btn-ink{background:var(--ink);color:var(--cream)}
.btn-ink:hover{box-shadow:0 4px 20px rgba(13,11,9,.4)}
.btn-ink-outline{background:transparent;color:var(--ink);box-shadow:0 0 0 1px rgba(13,11,9,.3)}
.btn-ink-outline:hover{background:rgba(13,11,9,.08)}
@media(max-width:600px){
.pos-cta .btn{text-align:center;justify-content:center}
}
/*nav-active-pill*/.nav-links a.active,.nav-links a.active-page{color:var(--lime)!important;background:rgba(158,188,50,.16)!important;border-radius:8px}
/* --- переключатель языка --- */
.langsw{display:inline-flex;align-items:stretch;border:1px solid rgba(242,239,233,.30);border-radius:999px;overflow:hidden;flex-shrink:0;line-height:1;margin-right:10px}
.langsw a{font-family:Helveticaneuecyr,-apple-system,"Segoe UI",Arial,sans-serif;font-size:12px;font-weight:600;letter-spacing:.06em;padding:8px 11px;color:rgba(242,239,233,.62);text-decoration:none;display:block;transition:background .18s,color .18s}
.langsw a:hover{color:var(--cream);background:rgba(242,239,233,.10)}
.langsw a[aria-current="true"]{background:var(--lime);color:#0d0b09}
.langsw a[aria-current="true"]:hover{background:var(--lime);color:#0d0b09}
.mob .langsw{margin:0 0 22px 0;align-self:center}
/* --- вариант в подвале: кремовый фон --- */
.langsw-foot{display:inline-flex;align-items:center;gap:10px;flex:0 0 auto}
.copy .langsw-foot,.cf-copy .langsw-foot{margin:0;padding:0;max-width:none}
.langsw-lbl{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:rgba(13,11,9,.38)}
.langsw-f{margin-right:0;border-color:rgba(13,11,9,.18)}
.langsw-f a{color:rgba(13,11,9,.50)}
.langsw-f a:hover{color:#0d0b09;background:rgba(13,11,9,.06)}
.langsw-f a[aria-current="true"]{background:#0d0b09;color:#f2efe9}
.langsw-f a[aria-current="true"]:hover{background:#0d0b09;color:#f2efe9}
@media(max-width:760px){
.nav .langsw{display:none}
.langsw{margin-right:0}
.langsw a{padding:9px 12px;font-size:12px}
.langsw-foot{justify-content:center;margin-top:4px}
}
@media(max-width:760px){
.nav .langsw{display:none}
}
.footer .copy .langsw-foot,.footer .cf-copy .langsw-foot{margin-left:0}
@media(min-width:1080px){
.footer .copy .langsw-foot,.footer .cf-copy .langsw-foot{margin-left:auto}
}
/* === Шапка: без переносів рядків (fix 14.08) === */
.nav-in{gap:14px}
.nav-links{flex-wrap:nowrap}
.nav-links > li{flex:0 0 auto}
.nav-links a,.nav-cta a,.nav-tel,.langsw a,.drop > a{white-space:nowrap}
.nav-cta{flex-wrap:nowrap;flex-shrink:0}
.nav-tel{flex-shrink:0}
.langsw{flex-shrink:0}
@media(max-width:1279px){
.nav-links a{font-size:12px;padding:6px 7px;letter-spacing:.03em}
.nav-tel{font-size:13px}
.nav-in{gap:10px}
}
@media(max-width:1150px){
.nav-links,.nav-cta,.nav-tel{display:none!important}
.burger{display:block!important}
}
/* ---------- шапка ---------- */
.nav{
  background:
    linear-gradient(180deg, rgba(255,255,255,.055) 0%, rgba(255,255,255,.012) 100%),
    rgba(13,11,9,.74)!important;
  border-bottom:1px solid transparent!important;
  border-image:linear-gradient(90deg,
    rgba(158,188,50,.0) 0%,
    rgba(158,188,50,.45) calc(var(--gsc) * 100%),
    rgba(120,200,220,.35) calc(var(--gsc) * 100% + 12%),
    rgba(255,255,255,.0) 100%) 1;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 8px 26px rgba(0,0,0,.30)}
@media(min-width:900px){
.nav{-webkit-backdrop-filter:blur(20px) saturate(140%);
       backdrop-filter:blur(20px) saturate(140%)}
}
.nav::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.07) 50%,transparent 62%);
  transform:translateX(calc((var(--gsc) * 160 - 80) * 1%))}
@media(prefers-reduced-motion:reduce){
.nav::after{display:none}
}
/* ---------- випадне меню ---------- */
.nav .drop-menu{
  background:
    linear-gradient(180deg, rgba(255,255,255,.09) 0%, rgba(255,255,255,.03) 100%),
    rgba(14,16,21,.86)!important;
  border:1px solid var(--g-line)!important;
  border-radius:16px!important;
  box-shadow:inset 0 1px 0 var(--g-hl), 0 18px 44px rgba(0,0,0,.5)!important;
  -webkit-backdrop-filter:blur(20px) saturate(135%);
  backdrop-filter:blur(20px) saturate(135%);
  overflow:hidden}
/* ---------- спільна геометрія й фізика ---------- */
.btn,.g-btn,.g-cta,.calc-opt,.tmap-gbtn{
  position:relative;
  isolation:isolate;
  border:1px solid transparent!important;
  transition:transform .24s var(--lg-ease),
             box-shadow .24s var(--lg-ease),
             background-color .2s ease!important;
  -webkit-tap-highlight-color:transparent}
/* Базовий .btn гасив непрозорість на наведенні — скло від цього
   каламутніє. Підйом і тінь роблять те саме виразніше. */
.btn:hover,.g-btn:hover,.g-cta:hover{opacity:1}
/* ---------- кромка: світло входить і виходить ----------
   Через background-clip зробити не можна: та техніка вимагає непрозорої
   першої заливки, а скло напівпрозоре. Тому кромка — окремий шар,
   вирізаний маскою; всередині лишається чисте скло. */
.g-btn::before,.g-cta::before,
.btn-lime::before,.btn-outline::before,.btn-ghost::before,
.btn-tg-form::before,.calc-opt::before,.tmap-gbtn::before{
  content:"";position:absolute;inset:0;border-radius:inherit;
  pointer-events:none;padding:1px;
  background:linear-gradient(152deg,
    var(--lg-rim-hi) 0%,
    rgba(255,255,255,.14) 26%,
    rgba(255,255,255,.02) 48%,
    rgba(255,255,255,.16) 74%,
    var(--lg-rim-lo) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite:exclude;
  z-index:2}
/* ---------- відблиск, що повзе від прокрутки ----------
   z-index:-1 кладе його НАД власним тлом кнопки, але ПІД текстом:
   у кнопках текст — голий вузол, йому z-index не поставиш. */
.g-btn::after,.g-cta::after,
.btn-lime::after,.btn-outline::after,.btn-ghost::after,
.btn-tg-form::after{
  content:"";position:absolute;inset:0;border-radius:inherit;
  pointer-events:none;z-index:-1;
  background-image:linear-gradient(106deg,
    transparent 36%, rgba(255,255,255,.09) 47%,
    rgba(255,255,255,.03) 54%, transparent 66%);
  background-size:230% 100%;
  background-repeat:no-repeat;
  background-position:calc(var(--gsc) * 200% - 50%) 0}
@media(prefers-reduced-motion:reduce){
.g-btn::after,.g-cta::after,
  .btn-lime::after,.btn-outline::after,.btn-ghost::after,
  .btn-tg-form::after{background-position:50% 0;opacity:.55}
}
/* ---------- друга дія: темне скло ---------- */
.g-btn,.btn-outline,.btn-ghost,.btn-tg-form,.calc-opt,.tmap-gbtn{
  background:
    linear-gradient(180deg,
      rgba(255,255,255,.062) 0%,
      rgba(255,255,255,.030) 55%,
      rgba(255,255,255,.042) 100%)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 -1px 0 rgba(255,255,255,.06),
    0 1px 1px rgba(0,0,0,.28),
    0 4px 12px -6px rgba(0,0,0,.34)!important}
.g-btn:hover,.btn-outline:hover,.btn-ghost:hover,
.btn-tg-form:hover,.calc-opt:hover,.tmap-gbtn:hover{
  transform:translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.20),
    inset 0 -1px 0 rgba(255,255,255,.08),
    0 1px 2px rgba(0,0,0,.26),
    0 8px 18px -7px rgba(0,0,0,.40)!important}
/* ---------- головна дія: те саме скло, залите лаймом ----------
   Прозорість тримаємо високою: кнопка запису має лишатись
   найпомітнішою на екрані. */
.g-cta,.btn-lime{
  color:#0b0f04!important;
  background:
    linear-gradient(180deg,
      rgba(176,208,64,1) 0%,
      rgba(162,193,53,1) 100%)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.26),
    0 1px 1px rgba(0,0,0,.24),
    0 4px 12px -6px rgba(158,188,50,.28)!important}
.g-cta:hover,.btn-lime:hover{
  transform:translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.32),
    0 1px 2px rgba(0,0,0,.22),
    0 8px 18px -7px rgba(158,188,50,.36)!important}
.g-cta::before,.btn-lime::before{
  --lg-rim-hi:rgba(255,255,255,.42);
  --lg-rim-lo:rgba(255,255,255,.24)}
/* ---------- натиснення: скло сідає ---------- */
.btn:active,.g-btn:active,.g-cta:active,
.calc-opt:active,.tmap-gbtn:active,.msb-btn:active{
  transform:translateY(0) scale(.985);
  transition-duration:.09s;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 1px 5px rgba(0,0,0,.20),
    0 1px 1px rgba(0,0,0,.24)!important}
.btn:focus-visible,.g-btn:focus-visible,.g-cta:focus-visible,
.calc-opt:focus-visible,.tmap-gbtn:focus-visible{
  outline:2px solid rgba(182,212,70,.9);outline-offset:3px}
@media(prefers-reduced-motion:reduce){
.btn,.g-btn,.g-cta,.calc-opt,.tmap-gbtn{transition:none!important}
.btn:hover,.g-btn:hover,.g-cta:hover,.btn-lime:hover{transform:none}
.btn:active,.g-btn:active,.g-cta:active,
  .calc-opt:active,.tmap-gbtn:active{transform:none}
}

/* поля шапки як у клініки */
@media(max-width:1024px){:root{--px:28px}}
@media(max-width:900px){:root{--px:24px}}
@media(max-width:860px){:root{--px:20px}}
/* списки в шапці й меню — без браузерних відступів */
.nav-links,.drop-menu,.mob ul{list-style:none;margin:0;padding:0}

/* мобільне меню — правила з клініки, 10.09.2026 */
.mob a,.mob button{min-height:44px;display:flex;align-items:center;justify-content:center}
.mob-svc-t{font-family:"Namu 1930",Impact,sans-serif;font-size:28px;font-weight:600;text-transform:uppercase;color:var(--cream);background:none;border:none;cursor:pointer;padding:0;min-height:44px;display:flex;align-items:center;justify-content:center;gap:9px;width:100%;letter-spacing:inherit}
.mob-svc-t::after{content:"\25BE";font-size:15px;opacity:.6;transition:transform .22s}
.mob-svc-t[aria-expanded="true"]::after{transform:rotate(180deg)}
.mob-svc-t[aria-expanded="true"]{color:var(--lime)}
.mob-svc{display:none;flex-direction:column;align-items:center;gap:11px;width:100%}
.mob-svc.open{display:flex}
.mob a.mob-sub{min-height:34px;font-size:15.5px;margin-top:-9px}
.srch-btn,#burger,.mob-x{min-width:44px;min-height:44px;display:inline-flex; align-items:center;justify-content:center}