/* ── Offices block ── 4-col regional contact directory; token-only. */
.block-offices {
  background: var(--color-bg);
  padding: clamp(80px, 11vh, 120px) var(--space-section-x);
}

.block-offices .off-header { max-width: 760px; margin-bottom: 56px; }
.block-offices .off-intro {
  font-family: var(--font-body);
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.7;
  color: var(--color-fg-muted);
  margin-top: 20px;
}

.block-offices .off-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  /* No container bg — earlier we used `background: var(--color-border)`
     + 1px gap to fake hairlines between cards, but the container bg
     also paints through empty cells (e.g. after a card is removed in
     the editor), leaving a beige stub. Self-borders on each card
     (below) keep the hairline look without the empty-cell artefact. */
}

.block-offices .off-card {
  /* Cards reset section-level colour overrides — see comment on
     .pf-card in portfolio/style.css. Keeps card text readable when the
     section bg is repainted via section_inject_color_attrs. */
  --color-fg:        #1a1714;
  --color-fg-muted:  #3f3c35;
  --color-muted:     #8a827c;
  color: var(--color-fg);

  background: var(--color-bg);
  padding: 36px 28px;
  display: flex; flex-direction: column;
  transition: background 0.25s;
  /* Self-frame in place of the old container-bg trick. */
  border: 1px solid var(--color-border);
  margin: 0 -1px -1px 0;   /* overlap adjacent borders so combined line is 1 px not 2 */
}
.block-offices .off-card:hover { background: var(--color-surface); }

.block-offices .off-region {
  font-family: var(--font-eyebrow);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: 12px;
}

.block-offices .off-city {
  font-family: var(--font-display);
  font-size: clamp(20px, 1.8vw, 24px);
  font-weight: 400;
  line-height: 1.2;
  color: var(--color-fg);
  margin-bottom: 16px;
}

.block-offices .off-rule {
  width: 32px; height: 1px;
  background: var(--color-accent);
  margin-bottom: 20px;
}

.block-offices .off-address {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.7;
  color: var(--color-fg-muted);
  margin-bottom: 20px;
  flex-grow: 1;
}

.block-offices .off-link {
  font-family: var(--font-eyebrow);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--color-accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  align-self: flex-start;
  margin-bottom: 6px;
  transition: border-color 0.15s, color 0.15s;
}
.block-offices .off-link:hover {
  border-color: var(--color-accent-soft);
  color: var(--color-accent-soft);
}

@media (max-width: 1100px) {
  .block-offices .off-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .block-offices { padding: 56px 20px; }
  .block-offices .off-grid { grid-template-columns: 1fr; }
}