*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }


a { text-decoration: none; color: inherit; }
img { display: block; max-width: 100%; }

/* ---- VARS ---- */
:root {
  --yellow: #ffdb72;
  --yellow-mid: #fdd467;
  --yellow-dark: #f6b73e;
  --green: #91bd30;
  --dark: #2b2b2b;
  --radius: 12px;
  --shadow: 0 4px 24px rgba(0,0,0,.07);
  --shadow-hover: 0 14px 40px rgba(0,0,0,.13);
}



.office-section { padding: 60px 0; background-color: #f8f9fb; }


.office-title { font-size: 26px; font-weight: 700; color: var(--dark); margin-bottom: 26px; line-height: 1.3; }
.office-facts { display: flex; gap: 36px; flex-wrap: wrap; }
.office-fact { display: flex; align-items: flex-start; gap: 12px; }
.office-fact-icon {
  width: 42px; height: 42px; border-radius: 10px;
  background: rgba(43,43,43,.1);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.office-fact-lbl { font-size: 11px; color: rgba(43,43,43,.5); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 3px; }
.office-fact-val { font-size: 14px; font-weight: 600; color: var(--dark); line-height: 1.45; }
.office-btns { display: flex; flex-direction: column; gap: 10px; min-width: 220px; position: relative; z-index: 1; }
.office-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 22px; border-radius: 10px;
  font-size: 14px; font-weight: 600; cursor: pointer; border: none;
  transition: opacity .18s, transform .15s; font-family: inherit;
}
.office-btn:hover { opacity: .9; transform: translateY(-1px); }
.office-btn-dark { background: var(--dark); color: #fff; }
.office-btn-outline { background: rgba(43,43,43,.1); color: var(--dark); }

/* ОФИС — ВАРИАНТ B (белый) */
.office-b {
  background: #fff; border-radius: 16px;
  border: 1px solid #eee;
  padding: 48px 52px;
  display: grid; grid-template-columns: 1fr auto;
  gap: 48px; align-items: center;
}
.office-b .office-title { color: var(--dark); }
.office-b-accent { display: inline-block; width: 40px; height: 4px; background: var(--yellow); border-radius: 2px; margin-bottom: 16px; }
.office-b .office-fact-icon { background: #f8f9fb; border: 1px solid #eee; }
.office-b .office-fact-lbl { color: #aaa; }
.office-b .office-fact-val { color: var(--dark); }
.office-b .office-btn-dark { background: var(--yellow); color: var(--dark); }
.office-b .office-btn-outline { background: #f4f6f8; color: var(--dark); }

/* stats strip */
.office-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 28px; border-top: 1px solid rgba(43,43,43,.12); padding-top: 22px; }
.office-stat { text-align: center; }
.office-stat:not(:last-child) { border-right: 1px solid rgba(43,43,43,.12); }
.office-stat-num { font-size: 28px; font-weight: 700; color: var(--dark); line-height: 1; }
.office-stat-lbl { font-size: 11px; color: rgba(43,43,43,.5); text-transform: uppercase; letter-spacing: .4px; margin-top: 4px; }

.office-b .office-stats { border-top: 1px solid #eee; }
.office-b .office-stat:not(:last-child) { border-right: 1px solid #eee; }
.office-b .office-stat-num { color: var(--green); }
.office-b .office-stat-lbl { color: #aaa; }

.offices-label { font-size: 12px; font-weight: 600; color: #aaa; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 14px; }
.offices-divider { height: 1px; background: #eee; margin: 32px 0; }


/* ================================================================
   АДАПТИВ
================================================================ */
@media (max-width: 1024px) {
  
  .office-a, .office-b { grid-template-columns: 1fr; gap: 28px; }
  .office-btns { flex-direction: row; min-width: auto; }
}

@media (max-width: 768px) {
  .office-a, .office-b { padding: 28px 24px; }
  .office-title { font-size: 20px; }
  .office-facts { gap: 20px; }
  .office-btns { flex-direction: column; }
}