/* ============================================================
   NEOSTYLE ARCHITECTS - страница контактов
   Дополняет style.css. Токены, типографика и hover-язык - общие.
   ============================================================ */

/* ---------- координатная схема офисов ---------- */
/* точки стоят по реальным широте и долготе, линия между ними - 473 км */
.geo{margin:0;max-width:440px;justify-self:end;width:100%}
.geo__plot{display:block;width:100%;height:auto;overflow:visible}
.geo__grid path{stroke:var(--bg-dark);stroke-width:1;fill:none}
.geo__frame{stroke:var(--concrete);stroke-width:1;fill:none}
.geo__cross{stroke:var(--metal);stroke-width:1;fill:none}
.geo__pt rect{fill:none;stroke:var(--accent);stroke-width:1}
.geo__link{
  stroke:var(--accent);stroke-width:1;fill:none;opacity:.55;
  stroke-dasharray:306;stroke-dashoffset:306;
  transition:stroke-dashoffset 1.6s var(--rv) .25s;
}
.geo.is-in .geo__link{stroke-dashoffset:0}
.geo__pt{opacity:0;transition:opacity .8s var(--ease)}
.geo.is-in .geo__pt{opacity:1}
.geo.is-in .geo__pt:first-of-type{transition-delay:.15s}
.geo.is-in .geo__pt:last-of-type{transition-delay:1.35s}

.geo__list{margin-top:clamp(22px,2.4vw,32px)}
.geo__row{
  display:grid;grid-template-columns:1fr auto auto;
  align-items:baseline;gap:14px;
  padding:14px 0;border-top:1px solid var(--hairline);
}
.geo__city{
  font-family:var(--font-display);font-weight:400;
  font-size:15px;letter-spacing:.24em;text-transform:uppercase;color:var(--warm-white);
}
.geo__coord{font-size:11.5px;letter-spacing:.14em;color:var(--text-muted);white-space:nowrap}
.geo__time{
  font-size:14px;letter-spacing:.12em;color:var(--accent);
  font-variant-numeric:tabular-nums;min-width:5ch;text-align:right;
}
.geo__note{
  margin:16px 0 0;padding-top:14px;border-top:1px solid var(--hairline);
  font-size:11.5px;line-height:1.7;letter-spacing:.06em;color:var(--text-dim);
}

/* ---------- офисы ---------- */
.offices{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:clamp(40px,5vw,96px);
  max-width:1280px;margin:0 auto;
}
.office{border-top:1px solid var(--hairline-strong);padding-top:clamp(26px,2.6vw,38px)}
.office__head{display:flex;align-items:baseline;gap:clamp(14px,1.6vw,24px);margin-bottom:clamp(30px,3.4vw,46px)}
.office__num{font-family:var(--font-display);font-size:26px;line-height:1;color:var(--accent);letter-spacing:.1em}
.office__city{
  font-family:var(--font-display);font-weight:300;
  font-size:clamp(24px,2.4vw,36px);letter-spacing:.24em;line-height:1;
  text-transform:uppercase;color:var(--warm-white);margin:0;
}
.office__country{font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--text-muted)}
.office__list{display:grid;gap:22px;margin:0}
.office__row{
  display:grid;grid-template-columns:132px 1fr;gap:20px;align-items:baseline;
  padding-bottom:20px;border-bottom:1px solid var(--hairline);
}
.office__row:last-child{border-bottom:0;padding-bottom:0}
.office__row dt{font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--text-soft)}
.office__row dd{margin:0;font-size:16.5px;font-weight:300;letter-spacing:.04em;color:var(--warm-white);line-height:1.75}
.office__row dd a{transition:color var(--dur) var(--ease)}
.office__row dd > a{display:block}
.office__row dd > a:hover{color:var(--accent)}
.office__msg{display:flex;gap:clamp(18px,2.4vw,34px);flex-wrap:wrap}
.office__msg .hero__link{padding-bottom:4px}
.office__msg .hero__link:hover{color:var(--warm-white)}

/* второй блок - города присутствия без отдельных реквизитов */
.office--soft .office__city{font-size:clamp(21px,2vw,30px)}
.office--soft .office__row dd{font-size:15px;color:var(--silver);max-width:46ch;letter-spacing:.01em}
.office--soft .office__num{color:var(--metal)}

/* ---------- полоса с кадром ---------- */
.feature--band{min-height:min(62svh,540px)}
.feature--band .feature__body{width:min(680px,88vw);padding-bottom:clamp(56px,7vw,92px)}
.feature--band .feature__body h2{font-size:clamp(19px,1.7vw,26px);letter-spacing:.3em}
.feature--band .feature__body p{margin-bottom:0}

/* ---------- заявка ---------- */
.lead-block{
  display:grid;grid-template-columns:.85fr 1.15fr;
  gap:clamp(40px,6vw,110px);
  max-width:1280px;margin:0 auto;align-items:start;
}
.checklist{list-style:none;margin:0 0 26px;padding:0;display:grid;gap:14px}
.checklist li{
  position:relative;padding-left:26px;
  color:var(--silver);font-size:15px;line-height:1.7;max-width:44ch;
}
.checklist li::before{
  content:"";position:absolute;left:0;top:.72em;
  width:12px;height:1px;background:var(--accent);
}
.lead-block__note{color:var(--text-muted);font-size:13.5px;line-height:1.7;max-width:42ch;margin:0}

/* ---------- соцсети ---------- */
.socials{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(18px,2.4vw,40px);
  max-width:1280px;margin:0 auto;
}
.social{
  display:block;border-top:1px solid var(--asphalt);
  padding-top:22px;
  transition:border-color var(--dur) var(--ease);
}
.social__name{
  display:block;
  font-family:var(--font-display);font-weight:400;
  font-size:clamp(17px,1.3vw,21px);letter-spacing:.2em;text-transform:uppercase;
  color:var(--warm-white);
  transition:color var(--dur) var(--ease);
}
.social__handle{
  display:block;margin-top:10px;
  font-size:12px;letter-spacing:.16em;color:var(--text-muted);
  transition:color var(--dur) var(--ease);
}
.social:hover{border-top-color:var(--accent)}
.social:hover .social__name{color:var(--accent)}
.social:hover .social__handle{color:var(--silver)}

/* ---------- текущий пункт меню ---------- */
.nav a.is-current{color:var(--warm-white)}
.nav a.is-current::after{width:100%;background:var(--metal)}

/* ---------- адаптив ---------- */
@media (max-width:1100px){
  .geo{justify-self:start;max-width:520px}
  .offices{grid-template-columns:1fr;gap:clamp(44px,6vw,64px)}
  .lead-block{grid-template-columns:1fr;gap:clamp(38px,5vw,56px)}
  .socials{grid-template-columns:repeat(2,1fr);gap:clamp(24px,3vw,36px)}
}
@media (max-width:760px){
  .office__head{flex-wrap:wrap;gap:10px 16px}
  .office__row{grid-template-columns:1fr;gap:8px}
  .form__pair{grid-template-columns:1fr}
  .geo__row{grid-template-columns:1fr auto;row-gap:6px}
  .geo__coord{grid-column:1;grid-row:2}
  .geo__time{grid-column:2;grid-row:1 / span 2;align-self:center}
  .socials{grid-template-columns:1fr;gap:0}
  .social{padding:20px 0}
  .social:last-child{border-bottom:1px solid var(--asphalt)}
}
