/* ============================================================
       Локальные стили страницы «Контакты».
       Используем токены из tokens.css.
       ============================================================ */

    /* ------- Hero «Контакты» ------- */
    .contacts-hero {
      position: relative;
      isolation: isolate;
      overflow: hidden;
      color: #fff;
      padding-block: var(--space-16) var(--space-12);
    }
    .contacts-hero::before {
      content: "";
      position: absolute; inset: 0;
      z-index: -2;
      background:
        linear-gradient(135deg, rgba(20,33,61,.82) 0%, rgba(26,37,84,.66) 55%, rgba(var(--color-primary-rgb),.55) 100%),
        url("../images/hero.jpg") center / cover no-repeat,
        var(--color-primary-900);
    }
    .contacts-hero::after {
      content: "";
      position: absolute;
      right: -10%; top: -30%;
      width: 55%; height: 130%;
      z-index: -1;
      background: radial-gradient(closest-side, rgba(var(--color-accent-rgb), .55), transparent 70%);
      filter: blur(60px);
      pointer-events: none;
    }
    .contacts-hero__grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: var(--space-10);
      align-items: end;
    }
    @media (min-width: 900px) {
      .contacts-hero__grid { grid-template-columns: 1.4fr 1fr; gap: var(--space-12); }
    }
    .contacts-hero__intro { display: flex; flex-direction: column; gap: var(--space-4); max-width: 720px; }
    .contacts-hero__eyebrow {
      align-self: flex-start;
      display: inline-flex; align-items: center; gap: var(--space-2);
      background: rgba(255,255,255,.14);
      border: 1px solid rgba(255,255,255,.25);
      color: #fff;
      font-size: var(--fs-12); font-weight: var(--fw-semibold);
      padding: .375rem .75rem;
      border-radius: var(--radius-pill);
      letter-spacing: .08em; text-transform: uppercase;
      backdrop-filter: blur(8px);
    }
    .contacts-hero__title {
      color: #fff;
      font-size: var(--fs-40);
      font-weight: var(--fw-bold);
      line-height: var(--lh-tight);
      letter-spacing: -0.02em;
    }
    .contacts-hero__title em {
      font-style: normal;
      background: linear-gradient(120deg, var(--color-accent) 0%, var(--color-accent-100) 100%);
      -webkit-background-clip: text; background-clip: text; color: transparent;
    }
    .contacts-hero__lede {
      color: rgba(255,255,255,.85);
      font-size: var(--fs-18);
      max-width: 56ch;
    }
    @media (min-width: 768px) {
      .contacts-hero__title { font-size: var(--fs-56); }
    }
    .contacts-hero__status {
      display: inline-flex;
      align-items: center;
      gap: var(--space-2);
      align-self: flex-start;
      padding: .5rem .875rem;
      background: rgba(31, 179, 106, 0.18);
      border: 1px solid rgba(31, 179, 106, 0.45);
      border-radius: var(--radius-pill);
      color: #B7F4D5;
      font-size: var(--fs-12);
      font-weight: var(--fw-semibold);
      letter-spacing: .06em; text-transform: uppercase;
    }
    .contacts-hero__status::before {
      content: "";
      width: 8px; height: 8px;
      border-radius: 50%;
      background: #1FB36A;
      box-shadow: 0 0 0 0 rgba(31,179,106, .6);
      animation: contacts-pulse 1.8s ease-out infinite;
    }
    @keyframes contacts-pulse {
      0% { box-shadow: 0 0 0 0 rgba(31,179,106, .55); }
      80% { box-shadow: 0 0 0 12px rgba(31,179,106, 0); }
      100% { box-shadow: 0 0 0 0 rgba(31,179,106, 0); }
    }

    /* ------- Карточка с быстрыми каналами справа в hero ------- */
    .contacts-quick {
      background: rgba(255,255,255,.06);
      border: 1px solid rgba(255,255,255,.18);
      border-radius: var(--radius-lg);
      padding: var(--space-5);
      backdrop-filter: blur(8px);
      display: grid; gap: var(--space-3);
    }
    .contacts-quick__title {
      font-size: var(--fs-12);
      letter-spacing: .08em; text-transform: uppercase;
      color: rgba(255,255,255,.65);
      font-weight: var(--fw-semibold);
      margin-bottom: var(--space-1);
    }
    .contacts-quick__row {
      display: grid;
      grid-template-columns: 32px 1fr auto;
      gap: var(--space-3);
      align-items: center;
      padding: var(--space-3) var(--space-3);
      border-radius: var(--radius-md);
      background: rgba(255,255,255,.04);
      border: 1px solid rgba(255,255,255,.1);
      color: #fff;
      transition: background var(--t-base), border-color var(--t-base), transform var(--t-base);
    }
    .contacts-quick__row:hover {
      background: rgba(255,255,255,.1);
      border-color: rgba(var(--color-accent-rgb),.5);
      color: #fff;
      transform: translateY(-1px);
    }
    .contacts-quick__icon {
      width: 32px; height: 32px;
      border-radius: 50%;
      display: grid; place-items: center;
      background: rgba(255,255,255,.08);
      color: #fff;
    }
    .contacts-quick__row--wa .contacts-quick__icon { background: #25D366; }
    .contacts-quick__row--tg .contacts-quick__icon { background: #229ED9; }
    .contacts-quick__label { display: flex; flex-direction: column; line-height: 1.3; }
    .contacts-quick__label small { font-size: var(--fs-12); color: rgba(255,255,255,.6); font-weight: var(--fw-regular); }
    .contacts-quick__cta {
      font-size: var(--fs-14);
      color: var(--color-accent);
      font-weight: var(--fw-semibold);
    }

    /* ------- Каналы связи — большие плитки ------- */
    .channels { padding-block: var(--space-16); background: var(--color-bg); }
    .channels__grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: var(--space-4);
    }
    @media (min-width: 600px) {
      .channels__grid { grid-template-columns: repeat(2, 1fr); }
    }
    @media (min-width: 1024px) {
      .channels__grid { grid-template-columns: repeat(4, 1fr); gap: var(--space-5); }
    }
    .channel {
      position: relative;
      padding: var(--space-6);
      border-radius: var(--radius-lg);
      background: var(--color-bg);
      border: 1px solid var(--color-border);
      display: flex; flex-direction: column; gap: var(--space-3);
      transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
      overflow: hidden;
      isolation: isolate;
      color: var(--color-text);
    }
    .channel::before {
      content: "";
      position: absolute; inset: 0;
      background: radial-gradient(120% 80% at 0% 0%, rgba(var(--ch-rgb, 56,88,214), 0.08), transparent 55%);
      opacity: 0;
      transition: opacity var(--t-base);
      z-index: -1;
    }
    .channel:hover {
      transform: translateY(-3px);
      box-shadow: var(--shadow-lg);
      border-color: rgba(var(--ch-rgb, 56,88,214), .45);
      color: var(--color-text);
    }
    .channel:hover::before { opacity: 1; }
    .channel__icon {
      width: 48px; height: 48px;
      display: grid; place-items: center;
      border-radius: var(--radius-md);
      background: rgba(var(--ch-rgb, 56,88,214), 0.1);
      color: rgb(var(--ch-rgb, 56,88,214));
    }
    .channel__title {
      font-size: var(--fs-12);
      letter-spacing: .08em; text-transform: uppercase;
      color: var(--color-text-muted);
      font-weight: var(--fw-semibold);
    }
    .channel__value {
      font-size: var(--fs-20);
      font-weight: var(--fw-semibold);
      color: var(--color-text);
      line-height: var(--lh-snug);
      letter-spacing: -0.01em;
      word-break: break-word;
    }
    .channel__hint {
      font-size: var(--fs-14);
      color: var(--color-text-muted);
      margin-top: auto;
    }
    .channel__cta {
      display: inline-flex; align-items: center; gap: var(--space-1);
      font-size: var(--fs-14);
      font-weight: var(--fw-semibold);
      color: rgb(var(--ch-rgb, 56,88,214));
      margin-top: var(--space-1);
    }
    .channel__cta svg { transition: transform var(--t-base); }
    .channel:hover .channel__cta svg { transform: translateX(3px); }

    .channel--phone { --ch-rgb: var(--color-primary-rgb); }
    .channel--email { --ch-rgb: var(--color-accent-rgb); }
    .channel--wa { --ch-rgb: 37, 211, 102; }
    .channel--tg { --ch-rgb: 34, 158, 217; }

    /* ------- Форма + сайдбар (тёмная) ------- */
    .contacts-form {
      background: var(--color-bg-dark);
      color: var(--color-on-dark);
      padding-block: var(--space-16);
      position: relative;
      isolation: isolate;
      overflow: hidden;
    }
    .contacts-form::before {
      content: "";
      position: absolute; inset: -10%;
      z-index: -1;
      background:
        radial-gradient(40% 50% at 80% 0%, rgba(var(--color-accent-rgb), 0.4), transparent 70%),
        radial-gradient(40% 60% at 0% 100%, rgba(var(--color-primary-rgb), 0.55), transparent 70%);
      filter: blur(40px);
      pointer-events: none;
    }
    .contacts-form .section-head__title h2 { color: var(--color-on-dark); }
    .contacts-form .eyebrow { color: var(--color-accent); }
    .contacts-form__grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: var(--space-8);
      align-items: start;
    }
    @media (min-width: 900px) {
      .contacts-form__grid { grid-template-columns: 1.1fr 1fr; gap: var(--space-12); }
    }
    .contacts-form__intro { color: var(--color-on-dark-muted); font-size: var(--fs-16); margin-top: var(--space-3); max-width: 52ch; }
    .contacts-form__bullets {
      display: flex; flex-direction: column;
      gap: var(--space-3);
      margin-top: var(--space-6);
    }
    .contacts-form__bullets li {
      display: grid;
      grid-template-columns: 24px 1fr;
      gap: var(--space-3);
      color: var(--color-on-dark-muted);
    }
    .contacts-form__bullets strong { color: var(--color-on-dark); display: block; }
    .contacts-form__bullets svg { color: var(--color-accent); margin-top: 4px; }

    .contacts-form__divider {
      margin: var(--space-8) 0 var(--space-5);
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,.18) 30%, rgba(255,255,255,.18) 70%, transparent);
      border: 0;
    }
    .contacts-form__hours-title {
      font-size: var(--fs-12);
      letter-spacing: .08em; text-transform: uppercase;
      color: rgba(255,255,255,.6);
      font-weight: var(--fw-semibold);
      margin-bottom: var(--space-3);
    }
    .contacts-form__hours {
      display: grid;
      grid-template-columns: 1fr;
      gap: var(--space-3);
    }
    @media (min-width: 600px) {
      .contacts-form__hours { grid-template-columns: repeat(2, 1fr); }
    }
    .contacts-form__hours li {
      display: flex; flex-direction: column;
      padding: var(--space-3) var(--space-4);
      border: 1px solid rgba(255,255,255,.12);
      border-radius: var(--radius-md);
      background: rgba(255,255,255,.04);
    }
    .contacts-form__hours dt { font-size: var(--fs-12); color: rgba(255,255,255,.55); letter-spacing: .04em; text-transform: uppercase; font-weight: var(--fw-semibold); }
    .contacts-form__hours dd { margin: 0; font-size: var(--fs-14); color: #fff; font-weight: var(--fw-medium); }
    .contacts-form__hours dd small { color: rgba(255,255,255,.55); font-weight: var(--fw-regular); }

    /* Поля формы (тёмная тема) */
    .contacts-form__form {
      background: rgba(255,255,255,.06);
      border: 1px solid rgba(255,255,255,.12);
      border-radius: var(--radius-lg);
      padding: var(--space-5);
      display: grid;
      grid-template-columns: 1fr;
      gap: var(--space-4);
      backdrop-filter: blur(8px);
    }
    @media (min-width: 600px) { .contacts-form__form { padding: var(--space-6); } }
    .contacts-form__form .field__label,
    .contacts-form__form .field__hint { color: var(--color-on-dark-muted); }
    .contacts-form__form .field__label--strong { color: var(--color-on-dark); }
    .contacts-form__form .input,
    .contacts-form__form .textarea,
    .contacts-form__form .select {
      background: rgba(255,255,255,.04);
      border-color: rgba(255,255,255,.16);
      color: var(--color-on-dark);
    }
    .contacts-form__form .input::placeholder,
    .contacts-form__form .textarea::placeholder { color: rgba(255,255,255,.45); }
    .contacts-form__form .input:focus,
    .contacts-form__form .textarea:focus,
    .contacts-form__form .select:focus {
      background: rgba(255,255,255,.08);
      border-color: var(--color-accent);
      box-shadow: 0 0 0 3px rgba(var(--color-accent-rgb),0.25);
    }
    .contacts-form__form .checkbox { color: var(--color-on-dark-muted); }
    .contacts-form__form .checkbox a { color: var(--color-accent); }
    /* intl-tel-input на тёмном фоне */
    .contacts-form__form .iti__selected-flag {
      background: rgba(255,255,255,.06);
      border-right-color: rgba(255,255,255,.16);
    }
    .contacts-form__form .iti--allow-dropdown .iti__flag-container:hover .iti__selected-flag,
    .contacts-form__form .iti--separate-dial-code .iti__flag-container:hover .iti__selected-flag {
      background: rgba(255,255,255,.12);
    }
    .contacts-form__form .iti--separate-dial-code .iti__selected-dial-code {
      color: var(--color-on-dark-muted);
    }
    .contacts-form__form .iti__arrow { border-top-color: var(--color-on-dark-muted); }
    .contacts-form__form .iti__arrow--up { border-bottom-color: var(--color-on-dark-muted); }
    .contacts-form__row {
      display: grid;
      grid-template-columns: 1fr;
      gap: var(--space-4);
    }
    @media (min-width: 600px) {
      .contacts-form__row { grid-template-columns: 1fr 1fr; }
    }

    /* Тематические чипы внутри формы */
    .contacts-topics {
      display: flex; flex-wrap: wrap; gap: var(--space-2);
    }
    .contacts-topic {
      cursor: pointer;
    }
    .contacts-topic input { position: absolute; opacity: 0; pointer-events: none; }
    .contacts-topic span {
      display: inline-flex;
      padding: .45rem .85rem;
      border-radius: var(--radius-pill);
      border: 1px solid rgba(255,255,255,.18);
      background: rgba(255,255,255,.04);
      font-size: var(--fs-14);
      color: rgba(255,255,255,.85);
      transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
    }
    .contacts-topic:hover span { border-color: rgba(255,255,255,.35); color: #fff; }
    .contacts-topic input:checked + span {
      background: rgba(var(--color-accent-rgb),.18);
      border-color: var(--color-accent);
      color: #fff;
    }

    /* ------- Офисы ------- */
    .offices { padding-block: var(--space-16); background: var(--color-bg-soft); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
    .offices__grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: var(--space-5);
    }
    @media (min-width: 768px) {
      .offices__grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }
    }
    @media (min-width: 1100px) {
      .offices__grid { grid-template-columns: repeat(4, 1fr); }
    }
    .office {
      display: flex; flex-direction: column;
      background: var(--color-bg);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-lg);
      overflow: hidden;
      transition: transform var(--t-base), box-shadow var(--t-base);
    }
    .office:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
    .office__photo {
      aspect-ratio: 16 / 10;
      background:
        linear-gradient(180deg, transparent 60%, rgba(20,22,27,.55) 100%),
        var(--ph-img, none) center / cover no-repeat,
        linear-gradient(135deg, var(--ph-from, #C7D2F4), var(--ph-to, #E9D7C5));
      position: relative;
      isolation: isolate;
    }
    .office__photo::after {
      content: attr(data-city);
      position: absolute; left: 16px; bottom: 14px;
      color: #fff;
      font-weight: var(--fw-semibold);
      letter-spacing: .04em;
      font-size: var(--fs-18);
      text-shadow: 0 1px 4px rgba(0,0,0,.25);
    }
    .office__badge {
      position: absolute; top: 12px; left: 12px;
      padding: 3px 10px;
      border-radius: var(--radius-pill);
      background: rgba(255,255,255,.92);
      color: var(--color-accent-600);
      font-size: var(--fs-12);
      font-weight: var(--fw-semibold);
      letter-spacing: .04em;
    }
    .office__body {
      padding: var(--space-5);
      display: flex; flex-direction: column; gap: var(--space-3);
      flex: 1;
    }
    .office__address {
      font-size: var(--fs-14);
      color: var(--color-text);
      line-height: var(--lh-snug);
    }
    .office__hours {
      display: flex; flex-direction: column;
      gap: 2px;
      font-size: var(--fs-14);
      color: var(--color-text-muted);
    }
    .office__hours strong { color: var(--color-text); font-weight: var(--fw-semibold); }
    .office__contacts {
      display: flex; flex-direction: column; gap: var(--space-2);
      font-size: var(--fs-14);
      margin-top: var(--space-1);
      padding-top: var(--space-3);
      border-top: 1px dashed var(--color-border);
    }
    .office__contacts a {
      display: inline-flex; align-items: center; gap: var(--space-2);
      color: var(--color-text);
    }
    .office__contacts a:hover { color: var(--color-accent-600); }
    .office__contacts svg { color: var(--color-accent); flex-shrink: 0; }
    .office__map {
      margin-top: auto;
      padding-top: var(--space-3);
      border-top: 1px dashed var(--color-border);
      font-size: var(--fs-14);
      font-weight: var(--fw-semibold);
      color: var(--color-primary);
      display: inline-flex; align-items: center; gap: var(--space-2);
    }
    .office__map svg { transition: transform var(--t-base); }
    .office:hover .office__map svg { transform: translate(2px, -2px); }

    /* ------- Команда (прямые контакты) ------- */
    .contacts-people { padding-block: var(--space-16); background: var(--color-bg); }
    .contacts-people__grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: var(--space-4);
    }
    @media (min-width: 600px) {
      .contacts-people__grid { grid-template-columns: repeat(2, 1fr); }
    }
    @media (min-width: 1024px) {
      .contacts-people__grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
    }
    .person-card {
      display: grid;
      grid-template-columns: 88px 1fr;
      gap: var(--space-4);
      padding: var(--space-5);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-lg);
      background: var(--color-bg);
      transition: border-color var(--t-base), box-shadow var(--t-base);
    }
    .person-card:hover { box-shadow: var(--shadow-md); border-color: rgba(var(--color-primary-rgb),.35); }
    .person-card__avatar {
      width: 88px; height: 88px;
      border-radius: 50%;
      background:
        var(--ph-img, none) center / cover no-repeat,
        linear-gradient(135deg, var(--ph-from, #C7D2F4), var(--ph-to, #E9D7C5));
      box-shadow: var(--shadow-sm);
    }
    .person-card__role {
      font-size: var(--fs-12);
      font-weight: var(--fw-semibold);
      letter-spacing: .06em; text-transform: uppercase;
      color: var(--color-accent-600);
    }
    .person-card__name {
      font-size: var(--fs-18);
      font-weight: var(--fw-semibold);
      color: var(--color-text);
      margin-top: 2px;
    }
    .person-card__lang {
      display: inline-flex; gap: 6px;
      margin-top: var(--space-2);
      flex-wrap: wrap;
    }
    .person-card__lang span {
      font-size: 11px;
      padding: 2px 8px;
      border-radius: var(--radius-pill);
      background: var(--color-primary-50);
      color: var(--color-primary);
      font-weight: var(--fw-semibold);
      letter-spacing: .04em;
    }
    .person-card__links {
      display: flex; gap: var(--space-2);
      margin-top: var(--space-3);
      flex-wrap: wrap;
    }
    .person-card__links a {
      display: inline-flex; align-items: center; justify-content: center;
      width: 36px; height: 36px;
      border-radius: 50%;
      background: var(--color-bg-soft);
      color: var(--color-text-muted);
      transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast);
    }
    .person-card__links a:hover { background: var(--color-accent); color: #fff; transform: translateY(-2px); }

    /* ------- FAQ ------- */
    .contacts-faq { padding-block: var(--space-16); background: var(--color-bg-soft); border-top: 1px solid var(--color-border); }
    .contacts-faq__grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: var(--space-4);
    }
    @media (min-width: 900px) {
      .contacts-faq__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-4) var(--space-5);
        align-items: start;
      }
    }
    .faq-item {
      border: 1px solid var(--color-border);
      border-radius: var(--radius-lg);
      background: var(--color-bg);
      overflow: hidden;
      transition: border-color var(--t-base), box-shadow var(--t-base);
    }
    .faq-item:hover { border-color: rgba(var(--color-accent-rgb),.35); }
    .faq-item[open] {
      border-color: rgba(var(--color-accent-rgb),.45);
      box-shadow: 0 6px 24px -16px rgba(var(--color-primary-rgb),.25);
    }
    .faq-item summary {
      padding: var(--space-5) var(--space-6);
      list-style: none;
      cursor: pointer;
      display: grid;
      grid-template-columns: 1fr 28px;
      align-items: center;
      gap: var(--space-4);
      font-weight: var(--fw-semibold);
      color: var(--color-text);
      font-size: var(--fs-18);
      line-height: var(--lh-snug);
    }
    .faq-item summary::-webkit-details-marker { display: none; }
    .faq-item__icon {
      width: 28px; height: 28px;
      display: grid; place-items: center;
      border-radius: 50%;
      background: var(--color-bg-soft);
      color: var(--color-text-muted);
      transition: transform var(--t-base), background var(--t-base), color var(--t-base);
    }
    .faq-item[open] .faq-item__icon { transform: rotate(45deg); background: var(--color-accent); color: #fff; }
    .faq-item__body {
      padding: 0 var(--space-6) var(--space-6);
      color: var(--color-text);
      font-size: var(--fs-16);
      line-height: var(--lh-loose);
    }

    /* ------- Реквизиты ------- */
    .contacts-legal { padding-block: var(--space-12) var(--space-16); background: var(--color-bg); }
    .legal-card {
      border: 1px solid var(--color-border);
      border-radius: var(--radius-lg);
      padding: var(--space-6);
      display: grid;
      grid-template-columns: 1fr;
      gap: var(--space-5);
      background:
        radial-gradient(60% 40% at 0% 0%, rgba(var(--color-primary-rgb),.05), transparent 70%),
        var(--color-bg);
    }
    @media (min-width: 768px) {
      .legal-card { grid-template-columns: repeat(3, 1fr); gap: var(--space-6); padding: var(--space-8); }
    }
    .legal-card__col h4 {
      font-size: var(--fs-12);
      letter-spacing: .08em; text-transform: uppercase;
      color: var(--color-primary);
      font-weight: var(--fw-semibold);
      margin-bottom: var(--space-3);
    }
    .legal-card__col dl {
      display: grid;
      grid-template-columns: 1fr;
      gap: var(--space-2);
      margin: 0;
      font-size: var(--fs-14);
    }
    .legal-card__col dt { color: var(--color-text-soft); font-weight: var(--fw-medium); }
    .legal-card__col dd { margin: 0; color: var(--color-text); font-weight: var(--fw-medium); }
    .legal-card__col dd + dt { margin-top: var(--space-2); }