/* =========================================================================
   hivhair — базовый слой темы
   Цвета приходят из inc/config.php как переменные --c-*, здесь их не хардкодим.
   ========================================================================= */

:root {
	--f-body: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
	--f-head: var(--f-body);

	/* Контент чуть шире, чем было: в макете карточки идут в четыре колонки
	   и на 1180 они получались тесными. */
	--wrap: 1400px;

	/* Шапка и служебная строка тянутся шире контента — как в макете. */
	--wrap-wide: 1560px;

	--gut: 24px;

	--r-sm: 8px;
	--r-md: 14px;
	--r-pill: 100px;

	--shadow-soft: 0 1px 2px rgba(22, 38, 45, .04), 0 8px 24px rgba(22, 38, 45, .05);

	--step: 8px;
}

/* ---- Сброс -------------------------------------------------------------- */

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

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	background: #fff;
	color: var(--c-ink);
	font-family: var(--f-body);
	font-size: 17px;
	line-height: 1.62;
	-webkit-font-smoothing: antialiased;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

a { color: var(--c-accent-dk); text-decoration-thickness: 1px; text-underline-offset: 2px; }

h1, h2, h3, h4 {
	font-family: var(--f-head);
	font-weight: 640;
	line-height: 1.16;
	letter-spacing: -.02em;
	margin: 0 0 calc(var(--step) * 2);
}

h1 { font-size: clamp(34px, 5.4vw, 56px); letter-spacing: -.028em; }
h2 { font-size: clamp(26px, 3.4vw, 36px); }
h3 { font-size: clamp(19px, 2.2vw, 22px); }

p { margin: 0 0 calc(var(--step) * 2); }

:focus-visible {
	outline: 2px solid var(--c-accent);
	outline-offset: 3px;
	border-radius: 3px;
}

.skip-link {
	position: absolute;
	left: -9999px;
}

.skip-link:focus {
	left: var(--gut);
	top: var(--gut);
	z-index: 99;
	background: #fff;
	padding: 10px 16px;
	border-radius: var(--r-sm);
	box-shadow: var(--shadow-soft);
}

/* ---- Сетка -------------------------------------------------------------- */

/* Контейнер тянется вместе с экраном и упирается в потолок --wrap.
   Проценты, а не жёсткий максимум: иначе на 1366 контент лип бы к краям,
   а на 1920 расползался в нечитаемую строку. */
.wrap {
	width: 100%;
	max-width: min(var(--wrap), 92vw);
	margin: 0 auto;
	padding-left: var(--gut);
	padding-right: var(--gut);
}

.wrap-wide { max-width: min(var(--wrap-wide), 96vw); }

/* ---- Кнопки ------------------------------------------------------------- */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	padding: 12px 22px;
	border: 1px solid transparent;
	border-radius: var(--r-sm);
	font-size: 15.5px;
	font-weight: 560;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

.btn-solid {
	background: var(--c-accent-dk);
	color: #fff;
}

.btn-solid:hover { background: var(--c-accent); }

.btn-quiet {
	background: #fff;
	border-color: var(--c-rule);
	color: var(--c-ink);
}

.btn-quiet:hover { border-color: var(--c-accent); color: var(--c-accent-dk); }

/* ---- Служебная строка --------------------------------------------------- */

.topbar {
	background: var(--c-wash);
	border-bottom: 1px solid var(--c-rule);
	font-size: 13px;
	color: var(--c-ink-soft);
}

.topbar-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 6px 28px;
	padding-top: 9px;
	padding-bottom: 9px;
}

.topbar-notes {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 28px;
}

/* Метка справа — с точкой-маркером, как в макете. */
.topbar-mark {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	white-space: nowrap;
}

.topbar-mark::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--c-accent);
	flex: none;
}

/* ---- Шапка -------------------------------------------------------------- */

.site-head {
	position: sticky;
	top: 0;
	z-index: 40;
	background: rgba(255, 255, 255, .92);
	backdrop-filter: saturate(180%) blur(10px);
	border-bottom: 1px solid var(--c-rule);
}

.head-inner {
	display: flex;
	align-items: center;
	gap: 28px;
	padding-top: 12px;
	padding-bottom: 12px;
}

.brand {
	display: flex;
	align-items: center;
	gap: 12px;
	text-decoration: none;
	color: inherit;
	flex: none;
}

.brand-mark { display: block; flex: none; line-height: 0; }

.brand-mark .logo-img {
	width: auto;
	max-height: 44px;
}

.brand-text b {
	display: block;
	font-size: 17px;
	font-weight: 650;
	letter-spacing: -.015em;
}

.brand-text i {
	display: block;
	font-style: normal;
	font-size: 12.5px;
	color: var(--c-ink-soft);
	margin-top: 1px;
}

/* ---- Навигация ---------------------------------------------------------- */

.site-nav {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-left: auto;
}

.nav-list {
	display: flex;
	align-items: center;
	flex: none;
	gap: 13px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.nav-list > li { position: relative; }

.nav-list > li > a {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 6px 0;
	font-size: 13.5px;
	color: var(--c-ink);
	text-decoration: none;
	white-space: nowrap;
}

.nav-list > li > a:hover,
.nav-list > li.is-current > a { color: var(--c-accent-dk); }

.caret { opacity: .5; transition: transform .18s ease; }

.has-sub:hover .caret { transform: rotate(180deg); }

.subnav {
	position: absolute;
	top: calc(100% + 10px);
	left: -14px;
	min-width: 236px;
	margin: 0;
	padding: 8px;
	list-style: none;
	background: #fff;
	border: 1px solid var(--c-rule);
	border-radius: var(--r-md);
	box-shadow: var(--shadow-soft);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-4px);
	transition: opacity .16s ease, transform .16s ease, visibility .16s;
}

.has-sub:hover > .subnav,
.has-sub:focus-within > .subnav {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.subnav a {
	display: block;
	padding: 9px 12px;
	border-radius: var(--r-sm);
	font-size: 15px;
	color: var(--c-ink);
	text-decoration: none;
}

.subnav a:hover { background: var(--c-tint); color: var(--c-accent-dk); }

.nav-cta {
	flex: none;
	padding: 10px 15px;
	font-size: 13.5px;
	gap: 7px;
}

.nav-cta .icn { opacity: .9; }

/* ---- Бургер ------------------------------------------------------------- */

.nav-burger {
	display: none;
	flex: none;
	width: 42px;
	height: 42px;
	margin-left: auto;
	border: 1px solid var(--c-rule);
	border-radius: var(--r-sm);
	cursor: pointer;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: 4px;
}

.nav-burger span {
	display: block;
	width: 17px;
	height: 1.6px;
	background: var(--c-ink);
	border-radius: 2px;
}

/* ---- Подвал ------------------------------------------------------------- */

.site-foot {
	margin-top: clamp(56px, 8vw, 96px);
	background: #072f2d;
	color: rgba(255, 255, 255, .72);
	font-size: 14.5px;
}

.foot-top {
	display: grid;
	grid-template-columns: 1.55fr 1fr 1fr 1fr 1.25fr;
	gap: 40px;
	padding: clamp(40px, 5vw, 62px) 0 34px;
}

.foot-logo {
	display: flex;
	align-items: center;
	gap: 11px;
	margin-bottom: 12px;
}

.foot-logo b {
	color: #fff;
	font-size: 16.5px;
	font-weight: 620;
	letter-spacing: -.015em;
}

.foot-brand p {
	margin: 0;
	max-width: 34ch;
	font-size: 14px;
	line-height: 1.55;
	color: rgba(255, 255, 255, .6);
}

.foot-social {
	display: flex;
	gap: 10px;
	margin: 18px 0 0;
	padding: 0;
	list-style: none;
}

.foot-social a {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: var(--r-sm);
	background: rgba(255, 255, 255, .08);
	color: rgba(255, 255, 255, .72);
	transition: background-color .18s ease, color .18s ease;
}

.foot-social a:hover { background: rgba(255, 255, 255, .16); color: #fff; }

.foot-col-title {
	display: block;
	margin-bottom: 14px;
	color: #fff;
	font-size: 14.5px;
	font-weight: 620;
}

.foot-list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 9px;
}

.foot-list a {
	color: rgba(255, 255, 255, .72);
	text-decoration: none;
	font-size: 14px;
}

.foot-list a:hover { color: #fff; }

.foot-col--empty a {
	color: rgba(255, 255, 255, .45);
	font-size: 13.5px;
}

.foot-aside p {
	margin: 0 0 10px;
	font-size: 13.5px;
	line-height: 1.5;
	color: rgba(255, 255, 255, .56);
}

.foot-aside p:last-child { margin-bottom: 0; }

.foot-note {
	max-width: 90ch;
	margin: 6px 0 0;
	padding: 0;
	font-size: 13px;
	color: rgba(255, 255, 255, .45);
}

.foot-bottom {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 28px;
	justify-content: space-between;
	padding: 18px 0 30px;
	margin-top: 20px;
	border-top: 1px solid rgba(255, 255, 255, .12);
	font-size: 13px;
	color: rgba(255, 255, 255, .5);
}

/* ---- Мобильные ---------------------------------------------------------- */

/* Восемь пунктов меню + кнопка требуют ~1380px. Ниже — бургер:
   иначе последний пункт залезает под кнопку. */
@media (max-width: 1519px) {

	.nav-burger { display: flex; }

	.site-nav {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		margin: 0;
		padding: 12px var(--gut) 22px;
		background: #fff;
		border-bottom: 1px solid var(--c-rule);
		box-shadow: var(--shadow-soft);
	}

	.nav-toggle:checked ~ .site-nav { display: flex; }

	.nav-list {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.nav-list > li > a {
		/* flex, а не inline-flex: иначе подчёркивание обрывается
		   по ширине текста, а не по ширине строки. */
		display: flex;
		justify-content: space-between;
		padding: 12px 0;
		border-bottom: 1px solid var(--c-rule);
		font-size: 16px;
	}

	.caret { display: none; }

	/* На узком экране подпункты просто раскрыты — без второго уровня тапов. */
	.subnav {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		min-width: 0;
		padding: 4px 0 10px 14px;
		border: 0;
		border-radius: 0;
		box-shadow: none;
	}

	.subnav a { padding: 7px 0; font-size: 15px; color: var(--c-ink-soft); }

	.nav-cta { margin-top: 16px; }

	.foot-top { grid-template-columns: 1.4fr 1fr 1fr; }

	.foot-aside { grid-column: 2 / -1; }
}

/* На узких экранах проценты не нужны — хватает боковых отступов контейнера. */
@media (max-width: 900px) {
	.wrap,
	.wrap-wide { max-width: 100%; }
}

@media (max-width: 720px) {
	.foot-top { grid-template-columns: 1fr 1fr; gap: 30px; }
	.foot-aside { grid-column: 1 / -1; }
	.topbar-mark { display: none; }
}

@media (max-width: 620px) {
	.foot-top { grid-template-columns: 1fr; gap: 28px; }
	.brand-text i { display: none; }
	.topbar-notes span:nth-child(n+2) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	* { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
/* =========================================================================
   Reference alignment — 08.08.2026
   Пропорции десктопа сведены с макетом главной.
   Кегли подняты 08.08 вечером: были 10–12px, на любом экране это мелко.
   ========================================================================= */
:root{
  /* Потолок контентной колонки. Полосы-фоны (герой, цифры, подвал)
     остаются во всю ширину, внутренняя сетка — нет. */
  --wrap: 1500px;
  --wrap-wide: 1560px;

  /* Расстояние от края экрана до первой буквы текста.
     К нему привязаны заливка героя и карточка в нём, иначе на широком
     мониторе они отрывались бы от колонки. */
  --edge: calc((100vw - min(var(--wrap), 96vw)) / 2 + var(--gut));

  /* Ширина текстовой колонки героя. На ноутбуке уже, иначе фотографию
     в первом экране совсем не видно. */
  --htw: 680px;

  /* Высота служебной строки и шапки. Вычитается из окна, когда первый
     экран растягивается на всю высоту. */
  --chrome: 120px;

  /* Высота фотографии в первом экране, когда герой раскладывается
     по вертикали (ниже 1200px). К ней привязаны заливка и отступ текста. */
  --hbh: clamp(240px, 52vw, 400px);
  --gut: 46px;
  --r-sm: 9px;
  --r-md: 12px;
  --shadow-soft: 0 10px 30px rgba(14,36,41,.08);
}
body{font-size:16px;line-height:1.5;background:#fff;color:#102131}
.wrap{max-width:min(var(--wrap),96vw)}
.wrap-wide{max-width:min(var(--wrap-wide),98vw)}
.topbar{background:#0b2234;color:rgba(255,255,255,.78);border:0;font-size:12.5px}
.topbar-inner{position:relative;min-height:34px;padding-top:8px;padding-bottom:8px}
.topbar-notes{width:100%;justify-content:space-between;padding-right:35%}
.topbar-mark{position:absolute;right:var(--gut);color:rgba(255,255,255,.75)}
.topbar-mark::before{background:#52c6bd}
.site-head{position:relative;background:#fff;backdrop-filter:none;border-bottom:1px solid #edf2f3}
.head-inner{min-height:82px;padding-top:12px;padding-bottom:12px;gap:30px}
.brand{gap:13px}
.brand-text b{font-size:17.5px;color:#102131}
.brand-text i{font-size:12.5px;color:#6d7b82}
.site-nav{gap:20px}
.nav-list{gap:19px}
.nav-list>li>a{font-size:13.5px;color:#293945}
.nav-cta{padding:11px 17px;border-radius:7px;font-size:13.5px;background:#147d7b}
.nav-burger{border:0;width:34px;height:34px}
.site-foot{margin-top:0;background:#072f2d;font-size:13.5px}
.site-foot .wrap{max-width:min(var(--wrap),96vw)}
.foot-top{grid-template-columns:1.45fr .9fr .9fr .9fr 1.15fr;gap:52px;padding:40px 0 28px}
.foot-logo b{font-size:15.5px}
.foot-brand p,.foot-list a{font-size:13px}
.foot-col-title{font-size:13.5px;margin-bottom:12px}
.foot-list{gap:8px}
.foot-aside p{font-size:12.5px}
.foot-note{display:none}
.foot-bottom{font-size:12px;padding:16px 0 26px;margin-top:12px}
@media (max-width:1519px){
  :root{--htw:560px}
  .nav-burger{display:flex}
  .site-nav{padding-left:30px;padding-right:30px}
  .topbar-notes{padding-right:0}
  .topbar-notes span:nth-child(2){display:none}
}
/* Подвал: пять колонок держатся только на широком экране.
   Без этих правил сетка 5×fr оставалась и на телефоне — страница
   уезжала вбок примерно на 170px. */
@media (max-width:1180px){
  .foot-top{grid-template-columns:1.4fr 1fr 1fr;gap:36px}
  .foot-aside{grid-column:2 / -1}
}
/* Выпадающее меню на широком экране: восемь пунктов в одну колонку
   растягивали панель на пол-экрана. Раскладываем в три столбца. */
@media (min-width:901px) and (max-width:1519px){
  .site-nav{padding:18px var(--edge) 24px}
  .nav-list{display:grid;grid-template-columns:repeat(3,1fr);gap:0 44px}
  .nav-cta{align-self:flex-start;margin-top:20px}
}
@media (max-width:900px){
  :root{--gut:22px}
  .wrap,.wrap-wide{max-width:100%}
  .topbar-mark{right:22px}
}
@media (max-width:720px){
  .foot-top{grid-template-columns:1fr 1fr;gap:28px}
  .foot-aside{grid-column:1 / -1}
}
@media (max-width:620px){
  .foot-top{grid-template-columns:1fr;gap:24px}
}
/* Самые узкие телефоны: название бренда упиралось в бургер. */
@media (max-width:420px){
  :root{--gut:16px}
  .head-inner{gap:14px}
  .brand{gap:10px}
  .brand-text b{font-size:15px}
}