/**
 * Office address.
 *
 * `.split`, `.split__media`, `.section`, `.alt-band`, `.eyebrow`,
 * `.section-title` and `.link-cta` all come from the kit. What is here is the
 * navy address card, which the kit has no equivalent for.
 */

.office-address__heading { margin-block: var(--s-3); }

.office-address__body {
  color: var(--ink-soft);
  max-width: 56ch;
}

.office-address__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-5);
  margin-block-start: var(--s-4);
}
/* These are real calls to action, not inline prose links, so they keep a tap
   target even though they render as text. */
.office-address__links .link-cta {
  min-height: 44px;
  align-items: center;
}

/* The card. A navy panel with the signature dashed gold arc bleeding out of
   its bottom corner, echoing the logo. */
.office-address__card {
  position: relative;
  overflow: hidden;
  background: var(--navy);
  color: var(--on-dark-strong);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-m);
  padding: clamp(var(--s-4), 2.5vw, var(--s-5));
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.office-address__card::after {
  content: "";
  position: absolute;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  border: 1.5px dashed var(--on-dark-arc);
  bottom: -92px;
  inset-inline-end: -72px;
  pointer-events: none;
}

.office-address__row {
  display: flex;
  align-items: flex-start;
  gap: 0.7em;
  font-size: var(--text-s);
}

.office-address__row svg {
  width: 18px;
  height: 18px;
  color: var(--gold);
  flex: none;
  margin-block-start: 0.2em;
}

/* Monospace on purpose: the licence number is a reference to be read
   character by character and checked against a certificate, not prose. */
.office-address__licence {
  border-block-start: 1px dashed var(--on-dark-hairline);
  padding-block-start: var(--s-3);
  font-family: ui-monospace, "Cascadia Mono", Consolas, Menlo, monospace;
  font-size: var(--text-xs);
  color: var(--on-dark-muted);
  letter-spacing: 0.03em;
}