/* Warm Community Minimalism: loaded only by the home and Tyumen pages. */
.variant-a {
  --color-bg: #FBFAF6;
  --color-surface: #fff;
  --color-surface-subtle: #EAF0E8;
  --color-border: #E7E9DF;
  --color-border-hover: #b8cab7;
  --color-text-primary: #243C2F;
  --color-text-secondary: #283A2E;
  --color-text-muted: #647166;
  --color-accent: #316A43;
  --color-accent-hover: #245536;
  --color-accent-subtle: #EAF0E8;
  --color-accent-text: #316A43;
  --container-max-width: 1360px;
  background: var(--color-bg);
  color: var(--color-text-secondary);
}

.variant-a .container { padding-inline: 40px; }
.variant-a .site-header { background: #FBFAF6; padding-block: 24px; }
.variant-a .brand-name { font-size: 23px; letter-spacing: -.05em; }
.variant-a .brand-badge { background: #EAF0E8; border: 0; color: #316A43; }
.variant-a .site-main { padding-top: 28px; gap: 52px; }
.variant-a .hero-section {
  background: #F3F0E8;
  border: 1px solid #EEE8DC;
  border-radius: 34px;
  padding: 0;
  overflow: hidden;
  box-shadow: 0 3px 30px rgba(32,47,37,.025);
}
.variant-a .hero-grid {
  display: grid;
  grid-template-columns: 51% 49%;
  align-items: center;
  gap: 0;
  min-height: 590px;
}
.variant-a .hero-content { min-width: 0; padding: 55px 24px 55px 68px; }
.variant-a .hero-title {
  color: #243C2F;
  font-size: clamp(38px, 4vw, 58px);
  line-height: 1.1;
  letter-spacing: -.05em;
  margin-bottom: 22px;
}
.variant-a .hero-lead { color: #536156; font-size: 17px; line-height: 1.65; max-width: 560px; }
.variant-a .hero-media { max-width: none; width: 100%; margin: 0; padding: 24px; }
.variant-a .hero-image {
  display: block;
  width: 100%;
  height: 540px;
  max-height: none;
  object-fit: cover;
  object-position: center;
  border-radius: 24px;
  box-shadow: none;
}
.variant-a .btn-primary { background: #471AFF; border-color: #471AFF; color: #fff; }
.variant-a .btn-primary:hover, .variant-a .btn-primary:active { background: #3712D8; border-color: #3712D8; }
.variant-a .btn:focus-visible, .variant-a a:focus-visible, .variant-a summary:focus-visible { outline: 3px solid #471AFF; outline-offset: 3px; }
.variant-a .steps-list li::before { border-color: #d6e4d4; }
.variant-a .site-footer { background: #F3F0E8; }
.variant-a-city .sticky-mobile-cta[hidden] { display: none; }

.variant-a-home { padding-bottom: 0; }
.variant-a-home .city-hub-container { max-width: var(--container-max-width); margin-inline: auto; text-align: left; }
.variant-a-home .city-list { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; }
.variant-a-home .city-list a {
  min-height: 120px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 24px;
  background: #fff;
  border: 1px solid #E7E9DF;
  border-radius: 20px;
  color: #243C2F;
  font-size: 20px;
  font-weight: 700;
  text-decoration: none;
  overflow-wrap: anywhere;
}
.variant-a-home .city-list a::after { content: '↗'; color: #316A43; flex: none; }
.variant-a-home .city-list a:hover { border-color: #9fbea0; background: #f4f8f1; }

@media (max-width: 767px) {
  .variant-a-home .city-hub-container { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .variant-a.variant-a-home .hero-section, .variant-a.variant-a-home .hero-grid { display: contents; }
  .variant-a.variant-a-home .hero-content {
    grid-row: 1;
    padding: 25px 21px;
    background: #F3F0E8;
    border: 1px solid #EEE8DC;
    border-radius: 22px;
  }
  .variant-a-home .hero-lead { margin-bottom: 0; }
  .variant-a-home .city-list { grid-row: 2; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .variant-a.variant-a-home .hero-media { grid-row: 3; padding: 0; }
}

@media (max-width: 850px) {
  .variant-a .container { padding-inline: 18px; }
  .variant-a .site-header { padding-block: 18px; }
  .variant-a .hero-grid { display: flex; flex-direction: column; align-items: stretch; min-height: 0; }
  .variant-a .hero-content { padding: 36px 28px 0; }
  .variant-a .hero-media { padding: 24px; }
  .variant-a .hero-image { height: 390px; }
  .variant-a-home .city-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 520px) {
  .variant-a-city { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
  .variant-a .container { padding-inline: 14px; }
  .variant-a .site-header { padding-block: 14px; }
  .variant-a .brand-name { font-size: 19px; }
  .variant-a .site-main { padding-top: 13px; gap: 24px; }
  .variant-a .hero-section { border-radius: 22px; }
  .variant-a .hero-content { padding: 25px 21px 0; }
  .variant-a .hero-title { font-size: 37px; line-height: 1.1; margin-bottom: 18px; }
  .variant-a .hero-lead { font-size: 14px; line-height: 1.56; }
  .variant-a .hero-media { padding: 20px 17px 17px; }
  .variant-a .hero-image { height: 255px; border-radius: 14px; }
  .variant-a .sticky-mobile-cta { background: #FBFAF6; }
  .variant-a-home .city-list { gap: 10px; }
  .variant-a-home .city-list a { min-height: 80px; padding: 16px; font-size: 16px; border-radius: 17px; }
}

@media (min-width: 521px) and (max-width: 767px) {
  .variant-a-city { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
}

@media (min-width: 768px) {
  .variant-a-city { padding-bottom: 0; }
}