/* =====================================================================
   ALA International – стили лендинга
   ---------------------------------------------------------------------
   Компонентный слой. Цвета, шрифты, размеры, радиусы и тени берутся из
   design-system.css – литералов здесь быть не должно.
   Подключать строго после design-system.css.

   Порядок правил совпадает с исходной таблицей стилей: он значим,
   поскольку часть переопределений сделана через max-width медиа-запросы,
   которые обязаны идти после соответствующих min-width правил.
   ===================================================================== */

/* ---------------------------------------------------------------------
   Прочее
   ------------------------------------------------------------------ */
app-landing {
  display:block;
  background:var(--ala-white);
  color:var(--ala-text);
}

/* ---------------------------------------------------------------------
   Корень и типографика
   ------------------------------------------------------------------ */
.ala-landing {
  font-family:var(--ala-font-body);
  letter-spacing:-.01em;
  overflow-x:clip;
}

/* ---------------------------------------------------------------------
   Шапка и навигация
   ------------------------------------------------------------------ */
.ala-header {
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:var(--ala-z-header);
  background:transparent;
  border-bottom:1px solid var(--ala-border-on-dark);
  color:var(--ala-white);
  transition:background var(--ala-transition),border-color var(--ala-transition),color var(--ala-transition),box-shadow var(--ala-transition);
}
.ala-header--scrolled {
  background:var(--ala-header-bg-scrolled);
  border-bottom-color:var(--ala-border-subtle);
  color:var(--ala-text);
  box-shadow:var(--ala-header-shadow);
}
.ala-header--scrolled .ala-logo-text,
.ala-header--scrolled .ala-nav a,
.ala-header--scrolled .ala-lang-btn {
  color:var(--ala-text);
}
.ala-header--scrolled .ala-nav a:hover {
  color:var(--ala-accent-strong);
}
.ala-header--scrolled .ala-burger-line {
  background:var(--ala-text);
}
.ala-logo-text,
.ala-nav a,
.ala-lang-btn {
  color:inherit;
}
.ala-nav a:hover {
  color:var(--ala-accent-on-dark);
}
.ala-burger-line {
  background:var(--ala-white);
}
.ala-logo-text {
  font-size:var(--ala-t-logo);
  font-family:var(--ala-font-display);
}
.ala-logo-text-lg {
  font-size:var(--ala-t-logo-lg);
  font-family:var(--ala-font-display);
}
.ala-nav {
  font-family:var(--ala-font-heading);
  font-size:var(--ala-t-nav);
}

/* ---------------------------------------------------------------------
   Герой
   ------------------------------------------------------------------ */
.ala-hero {
  min-height:720px;
  padding-top:88px;
  background:var(--ala-ink-800);
}
@media (min-width: 1024px) {
  .ala-hero {
    min-height:920px;
    padding-top:96px;
  }
}
@media (min-width: 1536px) {
  .ala-hero {
    min-height:1000px;
  }
}
.ala-hero-bg {
  z-index:0;
}
.ala-hero-bg-overlay {
  background:var(--ala-overlay-hero);
}
@media (max-width: 1023px) {
  .ala-hero-bg-overlay {
    background:var(--ala-overlay-hero-compact);
  }
}
.ala-hero-text {
  max-width:520px;
  position:relative;
  z-index:var(--ala-z-content);
}
@media (min-width: 1280px) {
  .ala-hero-text {
    max-width:620px;
  }
}
.ala-hero-title {
  font-family:var(--ala-font-display);
  line-height:.98;
  letter-spacing:-.02em;
}

/* ---------------------------------------------------------------------
   Шапка и навигация
   ------------------------------------------------------------------ */
.ala-lang-btn {
  font-size:var(--ala-t-ui);
}

/* ---------------------------------------------------------------------
   Герой
   ------------------------------------------------------------------ */
.ala-hero-title-accent {
  font-size:var(--ala-t-hero-accent);
  font-weight:800;
  letter-spacing:-.02em;
  color:var(--ala-accent);
}
.ala-hero-title-light {
  font-size:var(--ala-t-hero-light);
  font-weight:500;
  letter-spacing:-.02em;
  color:var(--ala-white);
}
.ala-hero-buttons {
  max-width:430px;
  margin-top:3rem;
}

/* ---------------------------------------------------------------------
   Кнопки
   ------------------------------------------------------------------ */
.ala-btn-primary {
  font-size:var(--ala-t-btn);
  font-family:var(--ala-font-heading);
  font-weight:700;
  letter-spacing:-.04em;
  width:100%;
  padding:16px 20px;
  min-height:60px;
  background:var(--ala-gradient-primary);
  border:1px solid var(--ala-hairline);
}
@media (min-width: 1280px) {
  .ala-btn-primary {
    min-height:66px;
  }
}
.ala-btn-secondary {
  font-family:var(--ala-font-heading);
  font-weight:700;
  font-size:var(--ala-t-btn-secondary,12px);
  letter-spacing:-.04em;
  line-height:1.15;
  text-align:center;
  box-sizing:border-box;
  background:var(--ala-scrim-glass);
  border:1px solid var(--ala-border-on-dark-strong);
}

/* ---------------------------------------------------------------------
   Герой
   ------------------------------------------------------------------ */
.ala-hero-buttons-row {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  align-items:stretch;
}
.ala-hero-buttons-row .ala-btn-secondary {
  font-size:var(--ala-t-btn-sm);
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-width:0;
  height:64px;
  padding:8px 10px;
}
@media (min-width: 640px) {
  .ala-hero-buttons-row .ala-btn-secondary {
    height:52px;
    padding:10px 14px;
  }
}
.ala-chat-pill {
  font-family:var(--ala-font-heading);
  font-weight:700;
  font-size:13px;
  letter-spacing:-.04em;
  background:var(--ala-ink-700-glass);
  border:1px solid var(--ala-hairline);
}

/* ---------------------------------------------------------------------
   Типографика контента
   ------------------------------------------------------------------ */
.ala-section-title {
  font-size:var(--ala-t-section-title);
  font-family:var(--ala-font-heading);
  font-weight:800;
  line-height:.92;
  letter-spacing:-.025em;
  text-transform:uppercase;
}
.ala-body-md {
  font-size:var(--ala-t-body);
  font-family:var(--ala-font-display);
  font-weight:500;
  line-height:1.25;
}
.ala-caption {
  font-size:var(--ala-t-caption);
  font-family:var(--ala-font-display);
  font-weight:500;
  line-height:1.3;
  letter-spacing:0;
}
.ala-stat-number {
  font-size:var(--ala-t-stat);
  font-family:var(--ala-font-heading);
  font-weight:800;
  line-height:.95;
  letter-spacing:-.06em;
  text-transform:uppercase;
}
.ala-stat-label {
  font-size:var(--ala-t-stat-label);
  font-family:var(--ala-font-display);
  font-weight:500;
  line-height:1.25;
}

/* ---------------------------------------------------------------------
   Сетки строк
   ------------------------------------------------------------------ */
.ala-row-title {
  display:grid;
  grid-template-columns:1fr;
  gap:32px;
  align-items:center;
}
@media (min-width: 1024px) {
  .ala-row-title {
    grid-template-columns:minmax(280px,24%) 1fr;
    gap:48px;
  }
}
.ala-row-title-infra {
  display:grid;
  grid-template-columns:1fr;
  gap:40px;
}
@media (min-width: 1024px) {
  .ala-row-title-infra {
    grid-template-columns:minmax(320px,28%) 1fr;
    gap:60px;
  }
}
.ala-row-title-pvz {
  display:grid;
  grid-template-columns:1fr;
  gap:32px;
  align-items:end;
}
@media (min-width: 1024px) {
  .ala-row-title-pvz {
    grid-template-columns:minmax(260px,22%) 1fr;
    gap:56px;
  }
}
.ala-row-title-clients {
  display:grid;
  grid-template-columns:1fr;
  gap:24px;
  align-items:baseline;
}
@media (min-width: 1024px) {
  .ala-row-title-clients {
    grid-template-columns:minmax(320px,30%) 1fr;
    gap:48px;
  }
}

/* ---------------------------------------------------------------------
   Типографика контента
   ------------------------------------------------------------------ */
.ala-stats-grid {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:32px 40px;
}
@media (min-width: 1024px) {
  .ala-stats-grid {
    gap:40px 60px;
  }
}
.ala-stats-grid--pvz {
  grid-template-columns:repeat(3,1fr);
}
@media (max-width: 639px) {
  .ala-stats-grid--pvz {
    grid-template-columns:1fr;
    gap:24px;
  }
}
@media (min-width: 640px) and (max-width: 1023px) {
  .ala-stats-grid--pvz {
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:20px 16px;
  }
  .ala-stats-grid--pvz .ala-stat-number {
    font-size:26px;
  }
  .ala-stats-grid--pvz .ala-stat-label {
    font-size:13px;
  }
}

/* ---------------------------------------------------------------------
   О компании и процесс
   ------------------------------------------------------------------ */
.ala-about-banner {
  background:var(--ala-ink-500);
  border-radius:var(--ala-radius-lg);
  min-height:160px;
}
.ala-about-banner:before {
  content:"";
  position:absolute;
  inset:0;
  background-image:linear-gradient(120deg,transparent 0%,transparent 35%,rgba(58,166,217,.15) 36%,rgba(58,166,217,.15) 39%,transparent 40%),linear-gradient(120deg,transparent 0%,transparent 70%,rgba(58,166,217,.1) 71%,rgba(58,166,217,.1) 73%,transparent 74%);
  pointer-events:none;
}
.ala-asterisk-banner svg {
  stroke:currentColor;
  stroke-width:6;
  fill:none;
  stroke-linecap:round;
}
.ala-asterisk-blue svg {
  stroke:currentColor;
  stroke-width:6;
  fill:none;
  stroke-linecap:round;
}
.ala-feature-card {
  min-height:230px;
  transition:transform .25s ease;
}
.ala-feature-card:hover {
  transform:translateY(-3px);
}
.ala-feature-num {
  font-size:var(--ala-t-feature-num);
  font-family:var(--ala-font-heading);
  font-weight:800;
  line-height:.85;
  letter-spacing:-.05em;
  z-index:1;
}
.ala-process {
  background:var(--ala-surface-process);
}

/* ---------------------------------------------------------------------
   Типографика контента
   ------------------------------------------------------------------ */
.ala-arrow {
  font-size:var(--ala-t-arrow);
  font-family:var(--ala-font-heading);
  font-weight:800;
  line-height:.7;
  letter-spacing:-.04em;
  transform:scaleY(1.45);
  transform-origin:left center;
}
.ala-tag {
  font-size:var(--ala-t-tag);
  display:inline-flex;
  align-items:center;
  height:34px;
  padding:0 16px;
  border-radius:var(--ala-radius-pill);
  font-family:var(--ala-font-heading);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0;
  white-space:nowrap;
}
.ala-tag--filled {
  background:var(--ala-accent-strong);
  color:var(--ala-white);
}
.ala-tag--outline {
  background:transparent;
  color:var(--ala-white);
  border:1px solid rgba(255,255,255,.6);
}
.ala-tag--dark {
  background:var(--ala-ink-750);
  color:var(--ala-white);
}

/* ---------------------------------------------------------------------
   Инфраструктура
   ------------------------------------------------------------------ */
.ala-infra,
.ala-infra-top {
  background:var(--ala-ink-600);
}
.ala-infra-bottom {
  background:var(--ala-black);
  min-height:480px;
  overflow:hidden;
}
@media (min-width: 768px) {
  .ala-infra-bottom {
    min-height:520px;
  }
}
@media (min-width: 1024px) {
  .ala-infra-bottom {
    min-height:560px;
  }
}
@media (min-width: 1280px) {
  .ala-infra-bottom {
    min-height:600px;
  }
}
.ala-infra-bottom-bg {
  position:absolute;
  inset:0;
  width:100%;
}
.ala-infra-bottom-bg-img {
  position:absolute;
  inset:auto 0 0;
  display:block;
  width:100%;
  height:auto;
  min-height:100%;
  object-fit:cover;
  object-position:right bottom;
  transform:scale(.9);
  transform-origin:right bottom;
}
@media (min-width: 768px) {
  .ala-infra-bottom-bg-img {
    object-position:82% bottom;
    transform:scale(.88);
  }
}
@media (min-width: 1024px) {
  .ala-infra-bottom-bg-img {
    object-position:88% bottom;
    transform:scale(.86);
  }
}
@media (min-width: 1280px) {
  .ala-infra-bottom-bg-img {
    object-position:92% bottom;
    transform:scale(.84);
  }
}
.ala-infra-bottom-overlay {
  position:absolute;
  inset:0;
  background:var(--ala-overlay-infra);
}
.ala-infra-bottom-content {
  /* Ширину и боковое поле задаёт .ala-container из дизайн-системы.
     Собственное max-width конфликтовало с ним и на широких мониторах
     сдвигало блок вправо относительно остальных секций. */
}
.ala-infra-points-grid {
  display:grid;
  grid-template-columns:1fr;
  gap:2.5rem 2rem;
  max-width:760px;
}
@media (min-width: 640px) {
  .ala-infra-points-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:3rem 2.5rem;
    max-width:920px;
  }
}
@media (min-width: 1280px) {
  .ala-infra-points-grid {
    gap:3.5rem 4rem;
    max-width:980px;
  }
}
.ala-infra-point {
  display:flex;
  align-items:flex-start;
  gap:1rem;
}
@media (min-width: 768px) {
  .ala-infra-point {
    gap:1.25rem;
  }
}
.ala-infra-num {
  font-size:var(--ala-t-infra-num);
  font-family:var(--ala-font-heading);
  font-weight:800;
  line-height:.85;
  letter-spacing:-.06em;
  color:var(--ala-accent-strong);
  flex-shrink:0;
}
.ala-infra-point-text {
  font-size:var(--ala-t-infra-text);
  font-family:var(--ala-font-display);
  font-weight:500;
  line-height:1.35;
  letter-spacing:0;
  text-transform:uppercase;
  color:var(--ala-white);
  padding-top:.75rem;
}
@media (min-width: 768px) {
  .ala-infra-point-text {
    padding-top:1rem;
  }
}
@media (min-width: 1280px) {
  .ala-infra-point-text {
    line-height:1.4;
    padding-top:1.25rem;
  }
}

/* ---------------------------------------------------------------------
   Клиенты
   ------------------------------------------------------------------ */
.ala-clients {
  background:var(--ala-white);
}
.ala-clients-logos {
  background:var(--ala-surface-band);
}

/* ---------------------------------------------------------------------
   ПВЗ, поиск, трекинг
   ------------------------------------------------------------------ */
.ala-search-input {
  font-family:var(--ala-font-heading);
  font-weight:700;
  font-size:16px;
  letter-spacing:-.04em;
}
.ala-pickup-name {
  font-family:var(--ala-font-display);
  font-weight:500;
  font-size:18px;
  color:var(--ala-black);
  letter-spacing:0;
}
.ala-pickup-item {
  padding-left:8px;
  padding-right:8px;
}
.ala-pickup-item--active {
  background:var(--ala-surface-tint);
  box-shadow:inset 3px 0 var(--ala-accent-strong);
}
.ala-pickup-item--active .ala-pickup-name {
  color:var(--ala-accent-strong);
  font-weight:700;
}
.ala-pickup-addr {
  font-family:var(--ala-font-display);
  font-weight:500;
  font-size:13px;
  color:var(--ala-text-muted);
  line-height:1.45;
}
.ala-pickup-time {
  font-family:var(--ala-font-display);
  font-weight:500;
  font-size:13px;
  color:var(--ala-text-subtle);
  margin-top:3px;
}

/* ---------------------------------------------------------------------
   Шапка и навигация
   ------------------------------------------------------------------ */
.ala-mobile-nav {
  font-size:15px;
}

/* ---------------------------------------------------------------------
   ПВЗ, поиск, трекинг
   ------------------------------------------------------------------ */
.ala-pickup-meta {
  font-size:14px;
}
.ala-pickup-count {
  font-size:13px;
}

/* ---------------------------------------------------------------------
   Футер
   ------------------------------------------------------------------ */
/* Соцсети. Раньше это были растровые PNG, выбеленные фильтром
   brightness(0) invert(1); у исходников не совпадали пропорции
   (у YouTube 110×78 при жёстких h-7 w-5), и иконки сплющивало.
   Теперь – встроенные SVG в общей сетке 24×24 и currentColor. */
.ala-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ala-white);
  opacity: 0.85;
  transition: opacity var(--ala-duration-fast) var(--ala-ease),
    color var(--ala-duration-fast) var(--ala-ease);
}
.ala-social svg {
  display: block;
  width: var(--ala-icon-social);
  height: var(--ala-icon-social);
}
.ala-social:hover {
  opacity: 1;
  color: var(--ala-accent-on-dark);
}

/* ---------------------------------------------------------------------
   Шапка и навигация
   ------------------------------------------------------------------ */
@media (max-width: 1023px) {
  .ala-header .ala-container {
    padding:1rem;
  }
  .ala-mobile-nav {
    border-color:var(--ala-border-light);
    color:var(--ala-text);
  }
  .ala-mobile-nav-panel {
    border-color:var(--ala-border-light);
  }
}

/* ---------------------------------------------------------------------
   Герой
   ------------------------------------------------------------------ */
@media (max-width: 1023px) {
  .ala-hero {
    min-height:0;
    padding-top:72px;
  }
  .ala-hero-bg img {
    object-position:72% 58%;
  }
  .ala-hero-text {
    max-width:none;
  }
  .ala-hero-title-accent {
    line-height:1;
  }
  .ala-hero-title-light {
    line-height:1.05;
  }
  .ala-hero-buttons {
    max-width:none;
    margin-top:1.75rem;
  }
}

/* ---------------------------------------------------------------------
   Кнопки
   ------------------------------------------------------------------ */
@media (max-width: 1023px) {
  .ala-btn-primary {
    min-height:50px;
    padding:11px 14px;
  }
}

/* ---------------------------------------------------------------------
   Герой
   ------------------------------------------------------------------ */
@media (max-width: 1023px) {
  .ala-hero-buttons-row .ala-btn-secondary {
    height:48px;
    padding:5px 7px;
  }
}

/* ---------------------------------------------------------------------
   Типографика контента
   ------------------------------------------------------------------ */
@media (max-width: 1023px) {
  .ala-section-title {
    line-height:.95;
  }
  .ala-body-md {
    line-height:1.35;
  }
  .ala-caption {
    line-height:1.35;
  }
}

/* ---------------------------------------------------------------------
   О компании и процесс
   ------------------------------------------------------------------ */
@media (max-width: 1023px) {
  .ala-about-banner {
    min-height:0;
    padding:1.25rem 1rem 1.25rem 1.25rem;
  }
}

/* ---------------------------------------------------------------------
   Типографика контента
   ------------------------------------------------------------------ */
@media (max-width: 1023px) {
  .ala-about-banner .ala-body-md {
    padding-right:3.5rem;
    font-size:14px;
  }
}

/* ---------------------------------------------------------------------
   О компании и процесс
   ------------------------------------------------------------------ */
@media (max-width: 1023px) {
  .ala-asterisk-banner {
    right:.75rem;
  }
  .ala-asterisk-banner svg {
    height:2.5rem;
    width:2.5rem;
  }
  .ala-feature-grid {
    gap:4rem 1.5rem;
    margin-top:2.5rem;
  }
  .ala-feature-card {
    min-height:180px;
    padding:1.25rem 1rem 2.5rem;
  }
}

/* ---------------------------------------------------------------------
   Типографика контента
   ------------------------------------------------------------------ */
@media (max-width: 1023px) {
  .ala-feature-card .ala-body-md {
    font-size:14px;
    padding-right:.5rem;
  }
}

/* ---------------------------------------------------------------------
   О компании и процесс
   ------------------------------------------------------------------ */
@media (max-width: 1023px) {
  .ala-feature-num {
    right:.25rem;
    bottom:-2.25rem;
  }
  .ala-process {
    margin-top:4rem;
    border-radius:var(--ala-radius-xl);
  }
}

/* ---------------------------------------------------------------------
   Типографика контента
   ------------------------------------------------------------------ */
@media (max-width: 1023px) {
  .ala-tag {
    height:32px;
    padding:0 12px;
    white-space:normal;
    text-align:center;
    line-height:1.15;
    min-height:32px;
  }
}

/* ---------------------------------------------------------------------
   Инфраструктура
   ------------------------------------------------------------------ */
@media (max-width: 1023px) {
  .ala-infra-top {
    padding-top:3rem;
    padding-bottom:2.5rem;
  }
  .ala-infra-bottom {
    min-height:420px;
  }
  .ala-infra-bottom-overlay {
    background:var(--ala-overlay-infra-compact);
  }
  .ala-infra-bottom-bg-img {
    object-position:78% bottom;
    transform:scale(1.05);
    opacity:.55;
  }
  .ala-infra-point-text {
    padding-top:.5rem;
  }
  .ala-infra-points-grid {
    gap:2rem 1.25rem;
  }
}

/* ---------------------------------------------------------------------
   Клиенты
   ------------------------------------------------------------------ */
@media (max-width: 1023px) {
  .ala-clients-logos {
    margin-top:3rem;
  }
}

/* ---------------------------------------------------------------------
   ПВЗ, поиск, трекинг
   ------------------------------------------------------------------ */
@media (max-width: 1023px) {
  .ala-search-input {
    font-size:15px;
    padding-top:.75rem;
    padding-bottom:.75rem;
  }
  .ala-pickup-name {
    font-size:16px;
  }
}

/* ---------------------------------------------------------------------
   Герой
   ------------------------------------------------------------------ */
@media (max-width: 639px) {
  .ala-hero {
    padding-top:68px;
  }
  .ala-hero-content {
    padding-top:5.5rem;
    padding-bottom:2rem;
  }
}

/* ---------------------------------------------------------------------
   Типографика контента
   ------------------------------------------------------------------ */
@media (max-width: 639px) {
  .ala-stats-grid {
    grid-template-columns:1fr;
    gap:1.5rem;
  }
  .ala-row-title-infra .ala-stats-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:1.25rem 1rem;
  }
  .ala-row-title-infra .ala-stat-number {
    font-size:24px;
  }
}

/* ---------------------------------------------------------------------
   О компании и процесс
   ------------------------------------------------------------------ */
@media (max-width: 639px) {
  .ala-process .grid {
    gap:1.75rem;
  }
  .ala-asterisk-blue svg {
    height:2.25rem;
    width:2.25rem;
  }
}

/* ---------------------------------------------------------------------
   Клиенты
   ------------------------------------------------------------------ */
@media (max-width: 639px) {
  .ala-clients .grid {
    gap:2rem 1rem;
    margin-top:2.5rem;
  }
}

/* ---------------------------------------------------------------------
   Мобильное меню, бургер, активный пункт навигации
   ---------------------------------------------------------------------
   Этих правил не было в исходном снимке: Angular не отрисовал панель,
   потому что меню было закрыто в момент сохранения страницы.
   Разметка добавлена в index.html, поведение – в scripts/landing.js.
   ------------------------------------------------------------------ */

/* Открытое меню переводит шапку в то же непрозрачное состояние,
   что и прокрутка. */
.ala-header--menu-open {
  background: var(--ala-header-bg-scrolled);
  border-bottom-color: var(--ala-header-border-scrolled);
  color: var(--ala-text);
  box-shadow: var(--ala-header-shadow);
}
.ala-header--menu-open .ala-logo-text,
.ala-header--menu-open .ala-lang-btn {
  color: var(--ala-text);
}
.ala-header--menu-open .ala-burger-line {
  background: var(--ala-text);
}

.ala-burger {
  border-radius: var(--ala-radius-sm);
  background: transparent;
  border: 0;
  cursor: pointer;
}
.ala-burger-line {
  transition: transform var(--ala-transition), opacity var(--ala-transition);
}
/* Три полоски складываются в крестик. */
.ala-burger--open .ala-burger-line:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}
.ala-burger--open .ala-burger-line:nth-child(2) {
  opacity: 0;
}
.ala-burger--open .ala-burger-line:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

.ala-mobile-nav-panel {
  background: var(--ala-header-bg-scrolled);
  border-top: 1px solid var(--ala-border-light);
  box-shadow: var(--ala-shadow-card);
  max-height: calc(100vh - 100%);
  overflow-y: auto;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.ala-mobile-nav {
  display: flex;
  flex-direction: column;
  padding-block: var(--ala-space-2) var(--ala-space-4);
  font-family: var(--ala-font-heading);
  color: var(--ala-text);
}
.ala-mobile-nav a {
  padding-block: var(--ala-space-3);
  border-bottom: 1px solid var(--ala-border-subtle);
  color: inherit;
  text-decoration: none;
  transition: color var(--ala-transition);
}
.ala-mobile-nav a:last-child {
  border-bottom: 0;
}
.ala-mobile-nav a:hover {
  color: var(--ala-accent-strong);
}
/* Активный пункт десктопного меню */
.ala-nav-link--active {
  color: var(--ala-accent-on-dark);
}
.ala-header--scrolled .ala-nav-link--active,
.ala-header--menu-open .ala-nav-link--active {
  color: var(--ala-accent-strong);
}

/* ---------------------------------------------------------------------
   Правки по итогам вычитки макета
   ------------------------------------------------------------------ */

/* Карта ПВЗ. Leaflet раскладывает свои панели по z-index 200–600, а
   контролы – до 1000, и без собственного контекста наложения они
   считаются от корня страницы и проезжают поверх шапки при прокрутке.
   isolation создаёт контекст, внутри которого все слои карты остаются. */
.ala-map,
.leaflet-container {
  isolation: isolate;
  position: relative;
  z-index: var(--ala-z-base);
}

/* Заголовок героя опущен ниже: на десктопе он вставал слишком близко
   к шапке. */
@media (min-width: 1024px) {
  .ala-hero-content {
    padding-top: 224px;
  }
}
@media (min-width: 1536px) {
  .ala-hero-content {
    padding-top: 256px;
  }
}

/* ---------------------------------------------------------------------
   Фирменные подписи: дескриптор позиционирования и коридор
   ---------------------------------------------------------------------
   Общие компоненты – используются и на главной, и на внутренних
   страницах, поэтому живут здесь, а не в стилях отдельной страницы.
   ------------------------------------------------------------------ */
.ala-descriptor {
  font-family: var(--ala-font-heading);
  font-weight: var(--ala-weight-bold);
  font-size: var(--ala-t-caption);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ala-steel-400);
}

.ala-corridor {
  /* Компонент нарисован под тёмную подложку (светлая обводка пилюль),
     поэтому цвет задаётся явно: наследуемый тёмный делал текст
     нечитаемым поверх героя. */
  color: var(--ala-white);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ala-space-3);
  font-family: var(--ala-font-heading);
  font-weight: var(--ala-weight-bold);
  font-size: var(--ala-t-caption);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.ala-corridor__node {
  padding: 7px 14px;
  border: 1px solid var(--ala-border-on-dark-strong);
  border-radius: var(--ala-radius-pill);
  white-space: nowrap;
}
.ala-corridor__node--soon {
  border-style: dashed;
  color: var(--ala-steel-400);
  border-color: currentColor;
}
.ala-corridor__arrow {
  color: var(--ala-accent-on-dark);
}


/* ---------------------------------------------------------------------
   Шапка и футер как самостоятельные компоненты
   ---------------------------------------------------------------------
   Раньше их раскладка держалась на утилитах Tailwind, а бандл Tailwind
   вшит только в index.html. Из-за этого вынесенные части разваливались
   на любой другой странице. Здесь раскладка описана своими правилами,
   поэтому partials/ работают одинаково везде.
   ------------------------------------------------------------------ */

/* --- шапка --- */
/* Шапка стоит на одной линии: знак, словесная часть и пункты меню
   выровнены по нижнему краю. baseline даёт точное совпадение с нижней
   строкой логотипа там, где браузер его понимает; flex-end – запасной. */
.ala-header__inner {
  display: flex;
  align-items: flex-end;
  align-items: last baseline;
  justify-content: space-between;
  gap: var(--ala-space-4);
  padding-block: var(--ala-space-5);
}
@media (min-width: 1024px) {
  .ala-header__inner { padding-block: var(--ala-space-6); }
}

.ala-header__brand {
  display: flex;
  align-items: flex-end;
  gap: var(--ala-space-3);
  flex-shrink: 0;
  text-decoration: none;
}
/* ЗНАК ЛОГОТИПА.
   Это не <img>, а плашка, вырезанная по альфа-каналу растрового знака
   (mask-image). Так знак можно красить: на тёмном фоне он белый с
   градиентом прозрачности – гребни ярче, основание уходит в фон; на
   светлом (прокрученная шапка) – фирменный градиент из #00405A.

   Заодно это чинит цвет: сам файл logo-pyramid.png нарисован средним
   голубым, которого в брендбуке нет, и на странице он был единственным
   местом, где этот оттенок ещё оставался.

   Маска берётся из logo-pyramid-big.png (354×188): мелкий файл
   102×54 на ретине по краям штриха рассыпался. */
.ala-logo-mark {
  display: block;
  height: var(--ala-logo-mark);
  aspect-ratio: 102 / 54;
  flex-shrink: 0;
  background: linear-gradient(
    170deg,
    rgba(255, 255, 255, 0.95) 0%,
    rgba(255, 255, 255, 0.72) 45%,
    rgba(255, 255, 255, 0.42) 100%
  );
  mask: url("../assets/img/logo-pyramid-big.png") center / contain no-repeat;
  -webkit-mask: url("../assets/img/logo-pyramid-big.png") center / contain no-repeat;
  transition: background var(--ala-transition);
}
/* Прокрученная шапка светлая – знак переворачивается в фирменный тёмный. */
.ala-header--scrolled .ala-logo-mark,
.ala-header--menu-open .ala-logo-mark {
  background: linear-gradient(
    170deg,
    var(--ala-brand-core) 0%,
    var(--ala-brand-mid) 55%,
    var(--ala-brand-steel) 100%
  );
}

.ala-logo-text,
.ala-logo-text-lg {
  font-weight: var(--ala-weight-black);
  text-transform: uppercase;
  line-height: 0.92;
  letter-spacing: var(--ala-tracking-title);
}
.ala-logo-text-lg { color: var(--ala-white); }

.ala-nav {
  display: none;
  align-items: flex-end;
  gap: var(--ala-space-8);
  font-weight: var(--ala-weight-medium);
  /* нижняя строка логотипа набрана с line-height 0.92 – у пунктов меню
     под базовой линией остаётся больше воздуха, компенсируем */
  padding-bottom: 2px;
}
/* Порог десктопного меню – 1360.
   В строке шапки лежат: знак с словесной частью, шесть пунктов меню,
   переключатель языков, ссылка на портал и кнопка «Стать партнёром».
   Замерено на 1280 – «О компании» и «Вход на портал» переносились в
   две строки, а кнопка уезжала за правый край. На 1360 (боковые поля
   56px, колонка 1248px) строка укладывается без переносов. Ниже
   работает бургер, в его панели лежит та же навигация. */
@media (min-width: 1360px) {
  .ala-nav { display: flex; gap: 24px; }
}
@media (min-width: 1536px) {
  .ala-nav { gap: var(--ala-space-8); }
}
.ala-nav a {
  text-decoration: none;
  transition: color var(--ala-transition);
}

/* Правая группа шапки: языки, вход в портал, постоянная кнопка
   «Стать партнёром» (бриф требует, чтобы она была всегда заметна). */
.ala-header__aside {
  align-self: flex-end;
  /* На узких экранах языки и бургер стоят стопкой – в строку они
     не помещаются рядом с длинным словесным знаком. С 768px места
     хватает, и группа разворачивается в ряд. */
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}
@media (min-width: 768px) {
  .ala-header__aside {
    flex-direction: row;
    align-items: flex-end;
    gap: var(--ala-space-4);
  }
}
@media (min-width: 1024px) {
  .ala-header__aside { gap: var(--ala-space-5); }
}

/* Кнопка «Стать партнёром».
   Цвет зависит от состояния шапки. Пока шапка прозрачная и лежит на
   тёмном герое, фирменный #00405A на нём просто не виден – кнопка
   белая с тёмной надписью. Когда шапка при прокрутке становится
   белой, кнопка переворачивается в фирменную заливку. Раньше в обоих
   состояниях стоял один яркий градиент – он и был главным
   небрендбучным пятном на странице. */
.ala-header__cta {
  display: none;
  align-items: center;
  justify-content: center;
  /* Высота задана явно, а не набегает из padding + line-height.
     Раньше кнопка была 41.5px на главной и 45px на внутренних
     страницах: .ala-editorial ставит на корне line-height 1.5, кнопка
     его наследовала, и одна и та же кнопка в одной и той же шапке
     оказывалась разной высоты при переходе между разделами. */
  min-height: 44px;
  padding: 0 22px;
  line-height: 1.2;
  border: 1px solid var(--ala-white);
  border-radius: var(--ala-radius-pill);
  background: var(--ala-white);
  color: var(--ala-brand-deep);
  font-family: var(--ala-font-heading);
  font-weight: var(--ala-weight-bold);
  font-size: var(--ala-t-cta);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--ala-transition), color var(--ala-transition),
    border-color var(--ala-transition);
}
@media (min-width: 1024px) {
  .ala-header__cta { display: inline-flex; }
}
.ala-header__cta:hover {
  background: transparent;
  color: var(--ala-white);
}
.ala-header--scrolled .ala-header__cta,
.ala-header--menu-open .ala-header__cta {
  background: var(--ala-brand-core);
  border-color: var(--ala-brand-core);
  color: var(--ala-white);
}
.ala-header--scrolled .ala-header__cta:hover,
.ala-header--menu-open .ala-header__cta:hover {
  background: var(--ala-brand-deep);
  border-color: var(--ala-brand-deep);
  color: var(--ala-white);
}
.ala-lang-group { display: flex; align-items: flex-end; gap: var(--ala-space-2); }
/* Переключатель языка – ссылки на ту же страницу в другой версии сайта */
.ala-lang-btn {
  display: inline-flex;
  align-items: center;
  padding-inline: 2px;
  background: none;
  border: 0;
  cursor: pointer;
  text-decoration: none;
  font-family: inherit;
  font-size: inherit;
  font-weight: var(--ala-weight-medium);
  opacity: 0.6;
  transition: opacity var(--ala-transition), color var(--ala-transition);
}
.ala-lang-btn--active { opacity: 1; font-weight: var(--ala-weight-black); }

/* Отдельной текстовой ссылки .ala-portal-link в шапке больше нет:
   постоянная кнопка сама ведёт в портал, и держать рядом два входа
   в одно место незачем. Заодно строка шапки разгрузилась – исчезла
   вилка «показать на 768, спрятать на 1360, вернуть на 1536»,
   из-за которой вход в портал пропадал ровно на ноутбучных ширинах. */

.ala-burger {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: var(--ala-space-2);
}
@media (min-width: 1360px) { .ala-burger { display: none; } }
.ala-burger-line { display: block; height: 2px; width: 24px; }

.ala-mobile-nav-panel[hidden] { display: none; }
@media (min-width: 1360px) { .ala-mobile-nav-panel { display: none; } }

/* --- футер ---
   Переработан целиком. Что было не так:
    , min-height:820px держал высоту независимо от содержимого, из-за
       чего между знаком сверху и колонками снизу зияла пустота;
    , фотография склада во всю ширину перетягивала внимание и делала
       ссылки нечитаемыми на светлых участках снимка;
    , три тонкие колонки вели на верх четырёх страниц – по футеру
       нельзя было понять, что за разделами есть контент.
   Теперь: фирменный тёмный фон с диагональным штрихом из брендбука,
   высота по содержимому, шесть колонок по структуре меню из ТЗ. */
.ala-footer {
  position: relative;
  overflow: hidden;
  background: var(--ala-brand-deep);
  color: var(--ala-white);
  border-top: 1px solid var(--ala-hairline);
}

/* Диагональный штрих – фирменный графический элемент из брендбука.
   Держится очень тихо (opacity .07): это подложка, а не иллюстрация. */
.ala-footer__strokes {
  position: absolute;
  right: -6%;
  bottom: -18%;
  width: min(46%, 620px);
  aspect-ratio: 460 / 300;
  background: var(--ala-brand-steel);
  opacity: 0.07;
  mask: url("../assets/img/brand-strokes.svg") center / contain no-repeat;
  -webkit-mask: url("../assets/img/brand-strokes.svg") center / contain no-repeat;
  pointer-events: none;
}

.ala-footer-inner {
  position: relative;
  z-index: var(--ala-z-content);
  padding-block: var(--ala-space-12);
}
@media (min-width: 1024px) {
  .ala-footer-inner { padding-block: var(--ala-space-16) var(--ala-space-10); }
}

/* Верх футера: слева фирменный блок, справа – сетка ссылок. */
.ala-footer__top {
  display: grid;
  gap: var(--ala-space-10);
}
@media (min-width: 1024px) {
  .ala-footer__top {
    grid-template-columns: minmax(260px, 300px) 1fr;
    gap: var(--ala-space-12);
    align-items: start;
  }
}
@media (min-width: 1440px) {
  .ala-footer__top { gap: var(--ala-space-16); }
}

.ala-footer__brand-link {
  display: inline-flex;
  align-items: center;
  gap: var(--ala-space-3);
  text-decoration: none;
}
/* Знак в футере – та же маска, тот же белый градиент. */
.ala-footer__mark {
  display: block;
  height: 44px;
  aspect-ratio: 102 / 54;
  flex-shrink: 0;
  background: linear-gradient(
    170deg,
    rgba(255, 255, 255, 0.95) 0%,
    rgba(255, 255, 255, 0.7) 45%,
    rgba(255, 255, 255, 0.38) 100%
  );
  mask: url("../assets/img/logo-pyramid-big.png") center / contain no-repeat;
  -webkit-mask: url("../assets/img/logo-pyramid-big.png") center / contain no-repeat;
}
@media (min-width: 1024px) { .ala-footer__mark { height: 52px; } }

/* Словесный знак в футере набирается мельче, чем на баннерах: общий
   токен --ala-t-logo-lg (34px) давал строку «INTERNATIONAL» шириной
   больше самой колонки, и она наезжала на первый столбец ссылок. */
.ala-footer__brand-link .ala-logo-text-lg { font-size: 24px; }

.ala-footer__descriptor {
  margin: var(--ala-space-5) 0 0;
  font-size: var(--ala-t-eyebrow);
  font-weight: var(--ala-weight-bold);
  line-height: 1.5;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ala-brand-steel);
}

.ala-footer__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ala-space-2);
  margin-top: var(--ala-space-6);
  /* См. .ala-header__cta: высота фиксируется, чтобы не зависеть от
     line-height страницы, на которой стоит футер. */
  min-height: 46px;
  padding: 0 22px;
  line-height: 1.2;
  border: 1px solid var(--ala-border-on-dark-strong);
  border-radius: var(--ala-radius-pill);
  font-family: var(--ala-font-heading);
  font-weight: var(--ala-weight-bold);
  font-size: var(--ala-t-cta);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ala-white);
  transition: background var(--ala-transition), color var(--ala-transition),
    border-color var(--ala-transition);
}
.ala-footer__cta:hover {
  background: var(--ala-white);
  border-color: var(--ala-white);
  color: var(--ala-brand-deep);
}

/* Колонки ссылок. Шесть групп по структуре меню; на узких экранах
   складываются в две, на средних – в три. */
.ala-footer__cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ala-space-8) var(--ala-space-6);
}
@media (min-width: 768px) {
  .ala-footer__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Шесть колонок – только с 1440px. На 1280 они получались по ~146px:
   заголовки «ИНФРАСТРУКТУРА» и «КЛИЕНТАМ» налезали друг на друга. */
@media (min-width: 1440px) {
  .ala-footer__cols {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--ala-space-8) var(--ala-space-5);
  }
}

/* Отступ живёт на заголовке, а не на списке под ним. В base.css стоит
   сброс `ul[class] { margin: 0 }` – селектор с атрибутом плюс элемент
   даёт специфичность выше одиночного класса, и margin-top на
   .ala-footer-links молча обнулялся. */
.ala-footer-title {
  margin: 0 0 var(--ala-space-5);
  font-family: var(--ala-font-heading);
  font-size: var(--ala-t-eyebrow);
  font-weight: var(--ala-weight-bold);
  line-height: 1.4;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ala-brand-steel);
}
.ala-footer-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--ala-space-3);
}
.ala-footer-links a {
  color: rgba(255, 255, 255, 0.78);
  text-decoration: none;
  transition: color var(--ala-transition);
}
.ala-footer-links a:hover { color: var(--ala-white); }

/* Правовые документы и реквизиты компании: над нижней строкой. */
.ala-footer__legal {
  margin-top: var(--ala-space-12);
  padding-top: var(--ala-space-6);
  border-top: 1px solid var(--ala-border-on-dark);
  display: flex;
  flex-direction: column;
  gap: var(--ala-space-3);
}
.ala-footer-legal-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--ala-space-2) var(--ala-space-6);
}
.ala-footer-legal-links a {
  font-size: var(--ala-t-ui);
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
  transition: color var(--ala-transition);
}
.ala-footer-legal-links a:hover { color: var(--ala-white); }
.ala-footer-req {
  margin: 0;
  max-width: 90ch;
  font-size: var(--ala-t-ui);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.45);
}
.ala-footer__legal + .ala-footer__bottom { margin-top: var(--ala-space-4); padding-top: 0; border-top: 0; }

/* Где по ссылкам подвала попадают пальцем, строка текста высотой 20 px мала: у каждой
   ссылки область нажатия 44 px. Условие по ширине покрывает телефоны и планшеты,
   «pointer: coarse» – сенсорные экраны любой ширины, например iPad Pro 1024 px.
   Отступы между строками убираем: их заменяет сама область, и подвал не растёт вдвое. */
@media (max-width: 1023px), (pointer: coarse) {
  .ala-footer-links { gap: 0; }
  .ala-footer-links a { display: flex; align-items: center; min-height: 44px; }
  .ala-footer-legal-links { gap: 0 var(--ala-space-6); }
  .ala-footer-legal-links a,
  .ala-footer-cookie { display: inline-flex; align-items: center; min-height: 44px; }
  .ala-footer__brand-link { display: inline-flex; align-items: center; min-height: 44px; }
}

/* Нижняя строка: только правовая подпись и дескриптор. */
.ala-footer__bottom {
  margin-top: var(--ala-space-12);
  padding-top: var(--ala-space-6);
  border-top: 1px solid var(--ala-border-on-dark);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--ala-space-2);
}
@media (min-width: 768px) {
  .ala-footer__bottom { flex-direction: row; align-items: center; }
}
.ala-footer-copy {
  margin: 0;
  font-size: var(--ala-t-ui);
  color: rgba(255, 255, 255, 0.45);
}

/* Кнопка «Стать партнёром» в мобильном меню */
.ala-mobile-nav a.ala-mobile-nav-cta {
  margin-top: var(--ala-space-4);
  padding: 14px 20px;
  border-bottom: 0;
  border-radius: var(--ala-radius-pill);
  background: var(--ala-brand-core);
  color: var(--ala-white);
  font-weight: var(--ala-weight-bold);
  text-transform: uppercase;
  text-align: center;
  letter-spacing: var(--ala-tracking-ui);
}
.ala-mobile-nav a.ala-mobile-nav-cta:hover, .ala-mobile-nav a.ala-mobile-nav-cta:focus-visible { background: var(--ala-brand-deep); color: var(--ala-white); }

/* Tabler chevron-down. Native disclosure navigation works with touch and keyboard. */
.ala-chevron { width: 18px; height: 18px; flex-shrink: 0; transition: transform .18s; }
.ala-nav-group { position: relative; }
.ala-nav > .ala-nav-group { padding-bottom: 16px; margin-bottom: -16px; }
.ala-nav-group > summary { display: flex; align-items: center; gap: 6px; list-style: none; cursor: pointer; font: inherit; color: inherit; padding-block: 16px; white-space: nowrap; }
.ala-nav > .ala-nav-group > summary { padding-block: 16px 0; }
.ala-nav-group > summary::-webkit-details-marker { display: none; }
.ala-nav-group[open] > summary .ala-chevron { transform: rotate(180deg); }
.ala-nav-group > summary:focus-visible { outline: 2px solid var(--ala-brand-steel); outline-offset: 5px; }
.ala-nav-group[data-current] > summary { text-decoration: underline; text-underline-offset: 6px; }
.ala-nav-dropdown { position: absolute; top: 100%; left: -24px; width: 280px; padding: 12px; border: 1px solid #d4dfe3; border-radius: 0 0 28px 0; background: #fff; box-shadow: 0 16px 36px rgba(0,32,45,.14); }
.ala-header .ala-nav-dropdown a { display: block; padding: 13px 12px; color: #00202d; font-size: 16px; line-height: 1.4; white-space: normal; }
.ala-header .ala-nav-dropdown a:hover, .ala-header .ala-nav-dropdown a:focus-visible { background: #f2f5f6; color: #00405a; }
.ala-mobile-nav .ala-nav-group { border-bottom: 1px solid var(--ala-border-subtle); }
.ala-mobile-nav .ala-nav-group > summary { justify-content: space-between; padding-block: 16px; }
.ala-mobile-nav .ala-nav-dropdown { position: static; width: auto; margin-bottom: 12px; padding: 0 0 0 16px; background: transparent; border: 0; border-left: 2px solid #7596a6; border-radius: 0; box-shadow: none; }
.ala-mobile-nav .ala-nav-dropdown a { border: 0; }
@media (min-width: 1360px) and (max-width: 1535px) { .ala-nav { gap: 16px; } }
@media (prefers-reduced-motion: reduce) { .ala-chevron { transition: none; } }

/* The language selector moves into the burger panel at the same breakpoint. */
.ala-mobile-language { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding-block: 16px 24px; border-bottom: 1px solid var(--ala-border-subtle); }
.ala-mobile-language > span { font-size: 14px; color: var(--ala-text-muted); }
.ala-mobile-language .ala-lang-group { gap: 8px; }
.ala-mobile-language .ala-lang-btn { justify-content: center; min-width: 44px; min-height: 44px; padding: 10px; font-size: 16px; color: var(--ala-brand-deep); opacity: 1; border: 1px solid transparent; }
.ala-mobile-language .ala-lang-btn--active { border-color: var(--ala-brand-core); background: var(--ala-brand-core); color: var(--ala-white); }
@media (max-width: 1359px) { .ala-header__aside > .ala-lang-group { display: none; } }

/* Выбор языка в шапке: текущий язык и список. Строка из четырёх кнопок не
   помещалась рядом с меню на 1360px, особенно в казахской версии. */
.ala-lang-menu { position: relative; }
.ala-lang-menu > summary {
  display: flex; align-items: center; gap: 4px; padding: 6px 2px;
  list-style: none; cursor: pointer; font: inherit; font-weight: var(--ala-weight-black);
  color: inherit; white-space: nowrap;
}
.ala-lang-menu > summary::-webkit-details-marker { display: none; }
.ala-lang-menu > summary .ala-chevron { width: 16px; height: 16px; transition: transform .18s; }
.ala-lang-menu[open] > summary .ala-chevron { transform: rotate(180deg); }
.ala-lang-menu > summary:focus-visible { outline: 2px solid var(--ala-brand-steel); outline-offset: 4px; }
.ala-header .ala-lang-menu__list { left: auto; right: -12px; top: calc(100% + 12px); width: 200px; }
.ala-header .ala-lang-menu__list a { display: flex; align-items: baseline; gap: 12px; }
.ala-header .ala-lang-menu__list a b { min-width: 24px; font-weight: 800; color: var(--ala-brand-core); }
.ala-header .ala-lang-menu__list a[aria-current] { background: #f2f5f6; }
@media (max-width: 1359px) { .ala-header__aside > .ala-lang-menu { display: none; } }