/* ==========================================================================
   «Урал Батыр» — Уфа, ул. Ю. Гагарина, 10/1
   Дизайн-система: флаг Республики Башкортостан как несущий приём.
   Синий / белый / зелёный, золото курая на акцентах. Светлая, гражданская.
   ========================================================================== */

:root{
  /* поверхности */
  --paper:     #F2F7FA;
  --white:     #FFFFFF;
  --soft:      #F7FBFD;
  --alt:       #FAFCFE;

  /* линии */
  --line:      #DCE7F0;
  --line-2:    #E7EEF4;
  --line-3:    #EEF3F7;

  /* текст */
  --ink:       #0E2A44;
  --body:      #16324B;
  --mut-1:     #40607A;
  --mut-2:     #55738A;
  --mut-3:     #6B8598;
  --mut-4:     #7C93A8;

  /* синий */
  --blue:      #0B6FB4;
  --blue-dk:   #0A5C95;
  --blue-lt:   #CFE3F1;
  --blue-brd:  #D7E6F1;
  --blue-pale: #E4F0F8;

  /* зелёный */
  --green:     #00893E;
  --green-lt:  #A9DCBC;
  --green-brd: #C7E6D3;
  --green-pale:#E4F5EA;

  /* золото */
  --gold:      #F5C445;
  --gold-sh:   #D9A61F;
  --gold-hov:  #FFD666;
  --gold-txt:  #C99418;
  --gold-pale: #FFFCF3;

  --display: 'Oswald', 'Arial Narrow', sans-serif;
  --text:    'PT Sans', system-ui, -apple-system, sans-serif;

  --wrap: 1320px;
  --gut: clamp(18px, 4vw, 40px);
  --r: 3px;
  --card-sh: 0 12px 26px -20px rgba(14,42,68,.5);
  --lift-sh: 0 18px 40px -28px rgba(14,42,68,.45);

  /* точечная сетка — фон героя и шапок разделов */
  --dots: radial-gradient(circle at 1px 1px, rgba(11,111,180,.14) 1px, transparent 0);
}

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

html{ scroll-behavior:smooth }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto }
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important }
}

body{
  margin:0;
  font-family:var(--text);
  font-size:17px;
  line-height:1.62;
  color:var(--body);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block }
a{ color:var(--blue); text-decoration:none }
a:hover{ color:var(--green) }
::selection{ background:#FFD84D; color:#0E2A44 }

:focus-visible{ outline:3px solid var(--gold); outline-offset:2px }

/* --------------------------------------------------------- типографика -- */

h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:600;
  line-height:1.05;
  letter-spacing:.012em;
  color:var(--ink);
  margin:0 0 .5em;
  text-wrap:balance;
}
h1{ font-size:clamp(34px, 5.6vw, 74px); font-weight:700; line-height:1.02; text-transform:uppercase }
h2{ font-size:clamp(26px, 3.4vw, 42px); text-transform:uppercase }
h3{ font-size:clamp(19px, 2vw, 22px); letter-spacing:.02em }
h4{ font-size:12px; text-transform:uppercase; letter-spacing:.16em; color:var(--mut-4) }

p{ margin:0 0 1em; text-wrap:pretty }
p:last-child{ margin-bottom:0 }

.lead{ font-size:clamp(17px,1.9vw,19px); line-height:1.62; color:var(--mut-1) }

.eyebrow{
  font-family:var(--display);
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--green);
  margin:0 0 10px;
}
/* заголовок раздела подчёркнут синей линией — общий приём макета */
.eyebrow + h2{
  border-bottom:2px solid var(--blue);
  padding-bottom:16px;
  margin-bottom:26px;
}

/* --------------------------------------------------------------- сетка -- */

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut) }
.sect{ padding-block:clamp(44px, 6vw, 76px) }
.sect--tight{ padding-block:clamp(28px, 3.5vw, 44px) }

.tint{ background:var(--white); border-block:1px solid var(--line) }
/* прежние тёмные секции — теперь светлая акцентная полоса с точечной сеткой */
.night{
  background:linear-gradient(180deg, var(--blue-pale) 0%, var(--paper) 82%);
  position:relative;
}
.night::before{
  content:""; position:absolute; inset:0;
  background-image:var(--dots); background-size:26px 26px; opacity:.6; pointer-events:none;
}
.night > *{ position:relative; z-index:1 }

.grid{ display:grid; gap:clamp(14px,1.6vw,20px) }
.g2{ grid-template-columns:repeat(2,1fr) }
.g3{ grid-template-columns:repeat(3,1fr) }
.g4{ grid-template-columns:repeat(4,1fr) }
.split{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(24px,3.4vw,48px); align-items:start }
.grid > *, .split > *, .hero__grid > *, .ftr__cols > *{ min-width:0 }

@media (max-width:980px){
  .g3,.g4{ grid-template-columns:repeat(2,1fr) }
  .split{ grid-template-columns:1fr }
}
@media (max-width:560px){
  .g2,.g3,.g4{ grid-template-columns:1fr }
}

/* ------------------------------------------------------- флаг Башкирии -- */

.orn{ display:flex; height:3px; background:var(--white) }
.orn::before,.orn::after{ content:""; flex:1 }
.orn::before{ background:var(--blue) }
.orn::after{ background:var(--green) }

.flagbar{
  position:absolute; left:0; top:0; bottom:0; width:6px;
  background:linear-gradient(180deg,
    var(--blue) 0 33.33%, var(--white) 33.33% 66.66%, var(--green) 66.66% 100%);
}

/* ---------------------------------------------------------------- шапка -- */

.topbar{
  background:var(--white);
  border-bottom:1px solid var(--line);
  font-family:var(--display);
  font-size:12px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--mut-4);
}
.topbar .wrap{ display:flex; flex-wrap:wrap; gap:6px 22px; align-items:center; padding-block:9px }
.topbar a{ color:var(--mut-3) }
.topbar a:hover{ color:var(--green) }
.topbar .sep{ margin-left:auto }

.hdr{
  position:sticky; top:0; z-index:60;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.hdr .wrap{ display:flex; align-items:center; gap:30px; padding-block:15px }

.brand{ display:flex; align-items:center; gap:13px }
.brand:hover{ color:inherit }
.brand__mark{ width:48px; height:48px; flex:none }
.brand__txt{ display:flex; flex-direction:column; gap:3px; line-height:1.2 }
.brand__name{
  font-family:var(--display); font-weight:700; font-size:21px;
  letter-spacing:.04em; text-transform:uppercase; color:var(--ink);
}
.brand__sub{
  font-family:var(--display); font-size:10.5px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--blue); line-height:1.5;
}

.nav{ margin-left:auto; display:flex; align-items:center; gap:22px }
/* Кнопки внутри меню исключены: иначе цвет пункта меню перебивает
   собственный цвет текста кнопки, и надпись сливается с её фоном. */
.nav a:not(.btn){
  font-family:var(--display); font-size:13px; letter-spacing:.09em;
  text-transform:uppercase; color:var(--mut-2);
  padding-bottom:3px; border-bottom:2px solid transparent;
}
.nav a:not(.btn):hover{ color:var(--green) }
.nav a:not(.btn)[aria-current="page"]{ color:var(--ink); border-bottom-color:var(--gold) }

.hdr__cta{ display:flex; gap:10px; margin-left:22px }
.nav .hdr__cta{ display:none }

.burger{
  display:none; margin-left:auto;
  background:var(--white); border:1px solid var(--line); color:var(--ink);
  width:46px; height:42px; border-radius:var(--r); cursor:pointer; font-size:19px;
}

@media (max-width:1240px){
  .nav{ gap:15px }
  .nav a{ font-size:12px; letter-spacing:.06em }
  .hdr .wrap{ gap:18px }
}
@media (max-width:1100px){
  .burger{ display:block }
  .nav{
    display:none; position:absolute; top:100%; left:0; right:0;
    background:var(--white); flex-direction:column; align-items:stretch; gap:0;
    padding:6px var(--gut) 18px;
    border-bottom:3px solid var(--gold); box-shadow:var(--lift-sh);
    max-height:76vh; overflow:auto;
  }
  .nav.open{ display:flex }
  .nav a{ padding:14px 2px; border-bottom:1px solid var(--line-3); font-size:14px; border-bottom-width:1px }
  .nav a[aria-current="page"]{ border-bottom-color:var(--line-3); color:var(--blue) }
  .hdr__cta{ display:none }
  .nav .hdr__cta{ display:flex; margin:16px 0 0 }
  .nav .hdr__cta .btn{ flex:1 }
}

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

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--display); font-size:14px; letter-spacing:.1em; text-transform:uppercase;
  padding:16px 30px; border:2px solid transparent; border-radius:2px;
  cursor:pointer; text-align:center; transition:.16s ease;
}

.btn--gold{ background:var(--gold); color:var(--ink); border-color:var(--gold); box-shadow:0 3px 0 var(--gold-sh) }
.btn--gold:hover{ background:var(--gold-hov); border-color:var(--gold-hov); color:var(--ink) }
.btn--gold:active{ transform:translateY(2px); box-shadow:0 1px 0 var(--gold-sh) }

.btn--blue{ background:var(--blue); color:#fff; border-color:var(--blue); box-shadow:0 3px 0 var(--blue-dk) }
.btn--blue:hover{ background:#0D7CC8; border-color:#0D7CC8; color:#fff }
.btn--blue:active{ transform:translateY(2px); box-shadow:0 1px 0 var(--blue-dk) }

.btn--green{ background:var(--green); color:#fff; border-color:var(--green); box-shadow:0 3px 0 #006E32 }
.btn--green:hover{ background:#00A24A; border-color:#00A24A; color:#fff }

.btn--outline{ background:var(--white); color:var(--blue); border-color:var(--blue-lt) }
.btn--outline:hover{ border-color:var(--blue); color:var(--blue) }
.btn--ghost{ background:var(--white); color:var(--blue); border-color:var(--blue) }
.btn--ghost:hover{ background:var(--blue); color:#fff }

.btn--sm{ padding:13px 24px; font-size:13px }
.btn--wide{ width:100%; margin-bottom:10px }
.btn--wide:last-child{ margin-bottom:0 }
.btn[disabled]{ opacity:.45; cursor:not-allowed; box-shadow:none; transform:none }

/* ----------------------------------------------------------------- герой -- */

.hero{
  position:relative; overflow:hidden;
  background:linear-gradient(180deg, var(--blue-pale) 0%, var(--paper) 78%);
}
.hero__orn{
  position:absolute; inset:0; pointer-events:none;
  background-image:var(--dots); background-size:26px 26px; opacity:.7;
}
.hero::after{
  content:""; position:absolute; right:-120px; top:-80px;
  width:520px; height:520px; border-radius:50%;
  background:rgba(0,137,62,.07); pointer-events:none;
}
.hero .wrap{ position:relative; z-index:1; padding-block:clamp(44px,6vw,72px) clamp(52px,7vw,84px) }
.hero__grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(28px,4vw,56px); align-items:start }
@media (max-width:980px){ .hero__grid{ grid-template-columns:1fr } }

.hero__addr{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--display); font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  color:#4A7794; background:var(--white); border:1px solid var(--blue-brd);
  padding:8px 14px; border-radius:2px; margin:0 0 26px;
}
.hero__addr::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--green) }
.hero h1{ margin:0 }
.hero h1 .hl{ color:var(--green) }
.hero h1 .hl2{ color:var(--blue) }
.hero .lead{ max-width:560px; margin-top:26px }
.hero__btns{ display:flex; flex-wrap:wrap; gap:14px; margin-top:36px }

.hero__facts{
  background:var(--white); border:1px solid var(--line); border-radius:4px;
  box-shadow:var(--lift-sh); overflow:hidden;
}
.hero__facts::before{
  content:""; display:block; height:4px;
  background:linear-gradient(90deg,
    var(--blue) 0 33.33%, var(--green) 33.33% 66.66%, var(--gold) 66.66% 100%);
}
.hero__fact{ padding:28px 32px; border-bottom:1px solid var(--line-2) }
.hero__fact:last-child{ border-bottom:0; background:var(--gold-pale) }
.hero__fact b{
  display:block; font-family:var(--display); font-weight:600;
  font-size:clamp(34px,3.6vw,46px); line-height:1; color:var(--blue);
}
.hero__fact:nth-of-type(2) b{ color:var(--green) }
.hero__fact:nth-of-type(3) b{ color:var(--gold-txt) }
.hero__fact span{ display:block; font-size:15px; color:var(--mut-2); margin-top:10px }

/* --------------------------------------------------------- полоса сбора -- */

.raise{ background:var(--white); border-block:1px solid var(--line) }
.raise .wrap{ padding-block:clamp(32px,4vw,48px) }
.raise__head{ display:flex; flex-wrap:wrap; gap:12px 30px; align-items:flex-end; margin-bottom:22px }
.raise__head h2{ margin:0; font-size:clamp(22px,2.8vw,36px); border:0; padding:0 }
.raise__nums{
  margin-left:auto; font-family:var(--display); font-size:clamp(20px,2.4vw,28px); color:var(--blue);
}
.raise__nums small{
  display:block; font-family:var(--display); font-size:13px;
  letter-spacing:.08em; color:var(--mut-3);
}
.raise__meta{
  display:flex; flex-wrap:wrap; gap:6px 26px; margin-top:12px;
  font-family:var(--display); font-size:13px; letter-spacing:.08em; color:var(--mut-3);
}
.raise__meta b{ color:var(--blue); font-weight:500 }

.ribbon{ height:12px; background:var(--line-2); border-radius:6px; overflow:hidden }
.ribbon__fill{
  height:100%; width:0;
  background:linear-gradient(90deg, var(--blue), var(--green));
  transition:width 1.1s cubic-bezier(.2,.7,.2,1);
}
.ribbon__mark{ display:none }

/* --------------------------------------------------------------- карточки -- */

.card{
  background:var(--white); border:1px solid var(--line);
  border-top:3px solid var(--blue); border-radius:var(--r);
  padding:26px 24px 24px; position:relative;
  display:flex; flex-direction:column; gap:10px;
}
.grid > .card:nth-child(3n+2){ border-top-color:var(--green) }
.grid > .card:nth-child(3n+3){ border-top-color:var(--gold) }
.card--link{ transition:.16s ease; color:inherit }
.card--link:hover{ box-shadow:var(--card-sh); color:inherit }
.card h3{ margin:0 }
.card--link:hover h3{ color:var(--blue) }
.card p{ font-size:15px; color:var(--mut-3); line-height:1.55 }
.card .more{
  margin-top:auto; font-family:var(--display); font-size:13px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--blue);
}
.card__tag{
  align-self:flex-start; font-family:var(--display); font-size:12px;
  letter-spacing:.1em; text-transform:uppercase;
}
.tag--free{ color:var(--green) }
.tag--paid{ color:var(--gold-txt) }
.tag--age{ color:var(--mut-4) }
.card__corner{ display:none }

/* ------------------------------------------------------------- заглушки -- */

/* Слоты виджетов — карта и QR. Слотов под фотографии на сайте нет: пока
   собственных снимков не существует, пустые рамки только портят страницу. */
.slot{
  border:1px dashed var(--blue-lt); border-radius:2px;
  background:var(--soft); padding:22px 20px; display:grid; gap:6px;
}
.slot b{
  font-family:var(--display); font-weight:500; font-size:15px;
  letter-spacing:.06em; text-transform:uppercase; color:var(--mut-2);
}
.slot span{ font-size:13.5px; color:var(--mut-4); line-height:1.5 }
.slot--map{ min-height:180px; align-content:center }
.slot--qr{ min-height:150px; align-content:center; text-align:center }

/* ------------------------------------------------------------------ списки -- */

.klist{ list-style:none; padding:0; margin:0; display:grid; gap:12px }
.klist li{ position:relative; padding-left:26px; color:var(--mut-1); font-size:16px }
.klist li::before{
  content:""; position:absolute; left:0; top:.5em;
  width:11px; height:11px; background:var(--green);
  border-radius:50% 50% 50% 0; transform:rotate(45deg);
}
.klist li b{ color:var(--ink) }

.steps{ counter-reset:s; list-style:none; padding:0; margin:0; display:grid; gap:20px }
.steps li{ position:relative; padding-left:56px; color:var(--mut-1) }
.steps li::before{
  counter-increment:s; content:counter(s,decimal-leading-zero);
  position:absolute; left:0; top:3px;
  font-family:var(--display); font-size:15px; letter-spacing:.06em;
  color:var(--blue); border-bottom:2px solid var(--gold); padding-bottom:2px;
}
.steps b{
  display:block; font-family:var(--display); font-weight:400; font-size:19px;
  text-transform:uppercase; letter-spacing:.03em; color:var(--ink); margin-bottom:4px;
}

/* ------------------------------------------------------------------ таблица -- */

.tbl-scroll{
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  background:var(--white); border:1px solid var(--line); border-radius:4px;
}
table.tbl{ width:100%; border-collapse:collapse; min-width:660px; font-size:15px }
table.tbl th{
  background:var(--soft); color:var(--mut-4);
  font-family:var(--display); font-weight:400; font-size:12px;
  letter-spacing:.12em; text-transform:uppercase; text-align:left;
  padding:15px 22px; border-bottom:1px solid var(--line-2);
}
table.tbl td{ padding:17px 22px; border-bottom:1px solid var(--line-3); color:var(--body) }
/* колонка значений не должна растягивать таблицу из-за полного наименования организации */
table.tbl td:nth-child(2){ max-width:300px }
table.tbl tr:last-child td{ border-bottom:0 }
table.tbl tbody tr:nth-child(even) td{ background:var(--alt) }
table.tbl td b{ font-weight:400; font-family:var(--display); font-size:16px; color:var(--ink); letter-spacing:.02em }
.free-row td{ background:var(--green-pale) }

/* ------------------------------------------------------------- виджет доната -- */

.donate{
  background:var(--white); border:1px solid var(--line); border-radius:4px;
  overflow:hidden; padding:0;
}
.donate::before{
  content:""; display:block; height:4px;
  background:linear-gradient(90deg,
    var(--blue) 0 33.33%, var(--green) 33.33% 66.66%, var(--gold) 66.66% 100%);
}
.donate > *{ margin-inline:clamp(20px,2.2vw,30px) }
.donate h3{ margin-top:26px; margin-bottom:6px }
.donate__hint{ font-size:14.5px; color:var(--mut-3); margin-bottom:20px }
.donate__note{ font-size:13px; line-height:1.5; color:var(--mut-4); margin-top:14px }
/* Строку назначения платежа посетитель переносит в приложение банка,
   поэтому она выделена и её удобно выделить мышью целиком. */
.donate__purpose{
  font-size:14px; line-height:1.5; color:var(--ink); margin:8px 0 12px;
  padding:10px 12px; background:var(--white); border:1px solid var(--line);
  border-radius:2px; user-select:all;
}
.donate > .pay-icons{ margin-bottom:26px }

.toggle{ display:grid; grid-template-columns:1fr 1fr; border:1px solid var(--line); margin-bottom:18px }
.toggle button{
  background:var(--white); border:0; padding:13px 8px; cursor:pointer;
  font-family:var(--display); font-size:13px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--mut-3);
}
.toggle button[aria-pressed="true"]{ background:var(--blue); color:#fff }

.sums{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:14px }
.sum{
  border:1px solid var(--line); background:var(--white); cursor:pointer;
  padding:13px 6px; text-align:center; border-radius:2px; transition:.14s;
}
.sum b{ display:block; font-family:var(--display); font-weight:500; font-size:18px; color:var(--ink) }
.sum span{ display:block; font-size:11.5px; line-height:1.35; color:var(--mut-4); margin-top:4px }
.sum:hover{ border-color:var(--blue-lt) }
.sum[aria-pressed="true"]{ border-color:var(--gold); background:var(--gold-pale); box-shadow:inset 0 0 0 1px var(--gold) }

.field{ margin-bottom:14px }
.field label{
  display:block; font-family:var(--display); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--mut-4); margin-bottom:6px;
}
.field input,.field select,.field textarea{
  width:100%; font-family:var(--text); font-size:16px; padding:13px 15px;
  border:1px solid var(--line); border-radius:2px; background:var(--white); color:var(--body);
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(11,111,180,.14);
}
.field textarea{ min-height:110px; resize:vertical }
.field small{ display:block; font-size:12.5px; color:var(--mut-4); margin-top:6px }

.check{ display:flex; gap:10px; align-items:flex-start; font-size:14px; line-height:1.45; margin-bottom:14px; color:var(--mut-1) }
.check input{ margin-top:3px; width:18px; height:18px; flex:none; accent-color:var(--green) }

.pay-icons{ display:flex; gap:8px; flex-wrap:wrap; margin-top:14px }
.pay-icons i{
  font-style:normal; font-family:var(--display); font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--mut-4);
  border:1px solid var(--line); padding:5px 10px; border-radius:2px;
}

/* --------------------------------------------------------------- аккордеон -- */

.acc{ background:var(--white); border:1px solid var(--line); border-radius:4px }
.acc__item{ border-bottom:1px solid var(--line-3) }
.acc__item:last-child{ border-bottom:0 }
.acc__btn{
  width:100%; text-align:left; background:none; border:0; cursor:pointer;
  padding:20px 52px 20px 24px; position:relative;
  font-family:var(--display); font-weight:400; font-size:19px;
  letter-spacing:.015em; color:var(--ink);
}
.acc__btn::after{
  content:"+"; position:absolute; right:22px; top:50%; transform:translateY(-50%);
  font-size:24px; color:var(--gold-txt); line-height:1;
}
.acc__btn[aria-expanded="true"]{ color:var(--blue) }
.acc__btn[aria-expanded="true"]::after{ content:"–" }
.acc__body{ display:none; padding:0 24px 22px; color:var(--mut-1); font-size:16px }
.acc__body.open{ display:block }

/* ----------------------------------------------------------------- отчёты -- */

.bars{ display:grid; gap:16px }
.bar__row{ display:grid; grid-template-columns:minmax(160px,1fr) 2.2fr auto; gap:16px; align-items:center; font-size:15px }
.bar__track{ height:12px; background:var(--line-2); border-radius:6px; overflow:hidden }
.bar__fill{ height:100%; background:var(--blue) }
.bar__fill.g{ background:var(--green) }
.bar__fill.y{ background:var(--gold) }
.bar__fill.c{ background:#C2603F }
.bar__val{ font-family:var(--display); font-size:16px; color:var(--ink); letter-spacing:.04em }
@media (max-width:640px){ .bar__row{ grid-template-columns:1fr auto } .bar__track{ grid-column:1/-1 } }

/* ------------------------------------------------------------------ прочее -- */

.crumbs{
  font-family:var(--display); font-size:12px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--mut-4); padding-block:14px;
}
.crumbs a{ color:var(--mut-4) }
.crumbs a:hover{ color:var(--green) }
.crumbs span{ color:var(--blue) }

.pagehead{
  position:relative; overflow:hidden;
  background:linear-gradient(180deg, var(--blue-pale) 0%, var(--paper) 88%);
}
.pagehead__orn{
  position:absolute; inset:0; pointer-events:none;
  background-image:var(--dots); background-size:26px 26px; opacity:.65;
}
.pagehead .wrap{ position:relative; z-index:1; padding-block:4px clamp(34px,4.4vw,56px) }
.pagehead .crumbs{ padding-top:18px }
.pagehead h1{ margin:6px 0 18px; font-size:clamp(30px,4.4vw,54px) }
.pagehead .lead{ margin:0 }

.quote{
  background:var(--white); border:1px solid var(--line); border-left:4px solid var(--gold);
  border-radius:var(--r); padding:24px 26px; margin:0;
  font-size:clamp(17px,2vw,20px); line-height:1.5; color:var(--ink);
}
.quote cite{
  display:block; font-family:var(--display); font-size:12px; font-style:normal;
  letter-spacing:.12em; text-transform:uppercase; color:var(--mut-4); margin-top:14px;
}

.note{
  background:var(--gold-pale); border:1px solid #F2E4BD; border-left:4px solid var(--gold);
  padding:20px 22px; font-size:15.5px; border-radius:var(--r); color:var(--mut-1);
}
.note b{ color:var(--ink) }
.note--green{ background:var(--green-pale); border-color:var(--green-brd); border-left-color:var(--green) }
.note--clay{ background:#FDF1EC; border-color:#F3D8CC; border-left-color:#C2603F }

.prose h2{ margin-top:1.5em; font-size:clamp(22px,2.4vw,28px) }
.prose h3{ margin-top:1.3em }
.prose ul{ padding-left:20px; color:var(--mut-1) }
.prose li{ margin-bottom:8px }

.tiles{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:0;
  background:var(--white); border:1px solid var(--line); border-radius:4px; overflow:hidden;
}
.tile{ padding:26px 24px; border-right:1px solid var(--line-2) }
.tile:last-child{ border-right:0 }
.tile b{ display:block; font-family:var(--display); font-weight:600; font-size:34px; line-height:1; color:var(--blue) }
.tile:nth-child(2) b{ color:var(--green) }
.tile:nth-child(3) b{ color:var(--gold-txt) }
.tile span{ display:block; font-size:14.5px; color:var(--mut-2); margin-top:10px }
@media (max-width:640px){ .tile{ border-right:0; border-bottom:1px solid var(--line-2) } }

.person b{ font-family:var(--display); font-size:19px; letter-spacing:.02em; color:var(--ink); display:block }
.person em{
  font-style:normal; font-family:var(--display); font-size:12px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--gold-txt); display:block; margin-top:4px;
}
.person p{ font-size:14.5px; color:var(--mut-3); margin-top:8px }

.logos{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:0;
  background:var(--white); border:1px solid var(--line); border-radius:4px; overflow:hidden;
}
.logo{
  aspect-ratio:16/8; display:grid; place-items:center; text-align:center; padding:12px;
  font-family:ui-monospace,monospace; font-size:10px; color:#8FAABE;
  border-right:1px solid var(--line-2); border-bottom:1px solid var(--line-2);
}

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

.ftr{ background:var(--ink); color:#A9C4D8; font-size:14.5px }
.ftr .wrap{ padding-block:44px 34px }
.ftr__cols{ display:grid; grid-template-columns:1.3fr repeat(4,1fr); gap:30px }
@media (max-width:980px){ .ftr__cols{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:520px){ .ftr__cols{ grid-template-columns:1fr } }
.ftr .ftr-h{ font-family:var(--display); font-size:12px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--gold); margin-bottom:16px }
.ftr ul{ list-style:none; padding:0; margin:0; display:grid; gap:9px }
.ftr a:not(.btn){ color:#A9C4D8 }
.ftr a:not(.btn):hover{ color:var(--gold) }
.ftr .brand__name{ color:#fff }
.ftr .brand__sub{ color:#6E8FA8 }
.ftr__legal{
  border-top:1px solid rgba(169,196,216,.2); margin-top:34px; padding-top:22px;
  font-size:13px; color:#6E8FA8; display:grid; gap:8px;
}
.ftr__legal a{ color:#A9C4D8 }

/* ------------------------------------------------------- нижняя панель моб. -- */

.mbar{
  display:none; position:fixed; left:0; right:0; bottom:0; z-index:70;
  background:var(--ink); grid-template-columns:1fr 1fr 1fr;
  border-top:3px solid var(--gold);
}
.mbar a{
  padding:13px 4px; text-align:center; color:#fff;
  font-family:var(--display); font-size:12px; letter-spacing:.09em; text-transform:uppercase;
  border-right:1px solid rgba(255,255,255,.14);
}
.mbar a:last-child{ border-right:0; background:var(--gold); color:var(--ink) }
.mbar a:hover{ color:#fff }
.mbar a:last-child:hover{ color:var(--ink) }
@media (max-width:760px){
  .mbar{ display:grid }
  body{ padding-bottom:54px }
}

/* ---------------------------------------------------------------- утилиты -- */

.mt0{ margin-top:0 } .mb0{ margin-bottom:0 }
.mt12{ margin-top:12px } .mt24{ margin-top:24px } .mt32{ margin-top:32px } .mt40{ margin-top:40px }
.center{ text-align:center }
.narrow{ max-width:780px }
.narrow.center{ margin-inline:auto }
.muted{ color:var(--mut-3) }
.hidden{ display:none }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }
.skip{ position:absolute; left:-9999px; top:0; background:var(--gold); color:var(--ink); padding:10px 16px; z-index:100 }
.skip:focus{ left:0 }

.js .reveal{ opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s ease }
.js .reveal.in{ opacity:1; transform:none }
@media (prefers-reduced-motion: reduce){ .js .reveal{ opacity:1; transform:none } }

/* ------------------------------------------------------ cookie-уведомление -- */
/* Полоса внизу, не перекрывает контент и не является межстраничным баннером. */

.cookiebar{
  position:fixed; left:0; right:0; bottom:0; z-index:80;
  background:var(--white); border-top:3px solid var(--gold);
  box-shadow:0 -8px 26px -18px rgba(14,42,68,.5);
}
.cookiebar .wrap{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  padding-block:14px; font-size:14px; color:var(--mut-1);
}
.cookiebar p{ margin:0; flex:1; min-width:260px }
@media (max-width:760px){
  .cookiebar{ bottom:54px }
  .cookiebar .btn{ width:100% }
}

/* ---------------------------------------------------- полоса стадии проекта -- */
/* Центр ещё не работает. Это должно читаться на каждой странице, а не только
   на странице сбора — иначе сайт обещает услугу, которой пока нет. */

.stagebar{
  background:var(--green-pale);
  border-bottom:1px solid var(--green-brd);
  border-top:1px solid var(--green-brd);
  font-size:14.5px; color:var(--mut-1);
}
.stagebar .wrap{ padding-block:11px }
.stagebar b{ color:var(--green) }
.stagebar a{
  font-family:var(--display); font-size:13px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--blue); white-space:nowrap;
  border-bottom:2px solid var(--blue-lt); margin-left:6px;
}
.stagebar a:hover{ border-bottom-color:var(--green) }

/* ------------------------------------------------------- дата актуальности -- */
/* Шкала сбора выводится только вместе с датой: неподписанная шкала устаревает
   молча, и это хуже, чем её отсутствие. */

.fin-upd{
  margin:10px 0 0; font-size:13px; color:var(--mut-4);
  font-family:var(--display); letter-spacing:.05em;
}

/* ------------------------------------------------------------ фотографии -- */
/* Съёмка объекта. Подпись обязательна: она объясняет, что именно в кадре
   и почему это важно для сбора. */

.ph{ margin:0 }
.ph img{
  width:100%; height:auto; display:block;
  border:1px solid var(--line); border-radius:2px; background:var(--soft);
}
.ph figcaption{
  margin-top:10px; font-size:13.5px; line-height:1.5; color:var(--mut-3);
  border-left:2px solid var(--gold); padding-left:12px;
}
.ph--wide img{ aspect-ratio:16/9; object-fit:cover }
.ph--sq img{ aspect-ratio:1/1; object-fit:cover }

.phgrid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:clamp(16px,2vw,24px) }

/* -------------------------------------------------------------- QR-код -- */

/* В узкой колонке пояснение переносится под код, а не сжимается в столбик. */
.qr{ display:flex; flex-wrap:wrap; gap:22px; align-items:flex-start }
.qr__txt{ flex:1 1 240px }
.qr img{
  width:300px; height:300px; flex:none;
  border:1px solid var(--line); border-radius:2px; background:#fff;
}
.qr__txt b{
  display:block; font-family:var(--display); font-size:16px; letter-spacing:.03em;
  color:var(--ink); margin-bottom:8px;
}
.qr__txt p{ font-size:14.5px; color:var(--mut-2); margin-bottom:10px }
.qr__txt p.muted{ font-size:13px }
@media (max-width:560px){
  .qr{ justify-content:center; text-align:center }
  .qr img{ width:min(300px,88vw); height:auto }
  .qr__txt{ text-align:left }
}

/* --------------------------------------------------------------- карта -- */
/* Сторонний виджет не грузится, пока пользователь его не запросил. */

.ymap{ position:relative; aspect-ratio:16/10; border:1px solid var(--line); border-radius:2px; overflow:hidden }
.ymap__btn{
  width:100%; height:100%; cursor:pointer; border:0; padding:22px;
  display:grid; align-content:center; justify-items:center; gap:8px; text-align:center;
  background:
    radial-gradient(circle at 1px 1px, rgba(11,111,180,.16) 1px, transparent 0) 0 0/22px 22px,
    linear-gradient(180deg, var(--blue-pale), var(--soft));
}
.ymap__btn b{
  font-family:var(--display); font-size:16px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--blue); border-bottom:2px solid var(--gold); padding-bottom:4px;
}
.ymap__btn span{ font-size:13.5px; color:var(--mut-2); max-width:34ch }
.ymap__btn .ymap__hint{ font-size:12px; color:var(--mut-4) }
.ymap__btn:hover b{ color:var(--green) }
.ymap iframe{ width:100%; height:100%; display:block; border:0 }