/* Locate us: Head Office / Office Locations / Technology Centres flip cards (layout after xpressbees.com/contact-us). */
.off-sec { padding: clamp(40px, 6vw, 72px) 0; background: var(--bg); }
.off-sec + .off-sec { padding-top: 0; }
.off-sec .sec-head { text-align: center; max-width: 720px; margin: 0 auto clamp(24px, 3vw, 36px); }
.off-sec .sec-head h2 { text-align: center; }
.off-sec .sec-head p { margin-left: auto; margin-right: auto; }
.off-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px; max-width: 1100px; margin: 0 auto; }
.off-grid.one { grid-template-columns: minmax(0, 380px); justify-content: center; }

.off-card { height: 170px; perspective: 1000px; cursor: pointer; outline: 0; }
.off-in { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .6s cubic-bezier(.4, .2, .2, 1); }
.off-card:hover .off-in, .off-card:focus .off-in, .off-card:focus-within .off-in { transform: rotateY(180deg); }
.off-f, .off-b { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 20px 22px; border-radius: 14px; text-align: center; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.off-f { background: #fff; border: 1px solid var(--line); box-shadow: 0 2px 10px rgba(23, 23, 23, .07); }
.off-f i { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--orange-50); color: var(--orange); }
.off-f i svg { width: 22px; height: 22px; }
.off-f b { font: 700 17px/1.3 var(--h); color: var(--ink); }
.off-f small { font: 600 11.5px/1 var(--h); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.off-b { transform: rotateY(180deg); background: linear-gradient(135deg, var(--orange), var(--orange-600)); color: #fff; box-shadow: 0 14px 28px -12px rgba(243, 112, 33, .7); }
.off-b b { font: 700 15.5px/1.3 var(--h); }
.off-b p { margin: 0; font: 400 14px/1.55 var(--b); }
.off-b a { color: #fff; font-weight: 700; text-decoration: none; }
.off-b a:hover { text-decoration: underline; }
.off-tbc { opacity: .85; font-style: italic; }
@media (prefers-reduced-motion: reduce) { .off-in { transition: none; } }
@media (max-width: 700px) { .off-grid { grid-template-columns: 1fr; } .off-card { height: 160px; } }

/* left-aligned like the rest of the site */
.off-sec .sec-head, .off-sec .sec-head h2, .off-sec .sec-head p { text-align: left; margin-left: 0; margin-right: 0; }
.off-grid { margin: 0; }
.off-grid.one { justify-content: start; }
.off-f, .off-b { align-items: flex-start; text-align: left; padding: 22px 24px; }

/* fill the full width: 3 columns, head office card + map */
.off-grid { max-width: none; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.off-grid.ho { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.off-grid.ho .off-card { height: 260px; }
.off-map { height: 260px; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); box-shadow: 0 2px 10px rgba(23, 23, 23, .07); background: #eee; }
.off-map iframe { width: 100%; height: 100%; border: 0; display: block; }
@media (max-width: 1024px) { .off-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .off-grid.ho { grid-template-columns: 1fr; } .off-grid.ho .off-card { height: 170px; } }
@media (max-width: 700px) { .off-grid { grid-template-columns: 1fr; } .off-map { height: 220px; } }

/* Placeholder shown while the office list loads from /api/branches. */
.off-loading { grid-column: 1 / -1; margin: 0; padding: 18px 2px; color: #667085; font-size: 14px; }
.off-b .off-tbc { color: #98a2b3; font-style: italic; }

/* On touch / small screens there is no hover to flip the card, so show both faces
   stacked: the front header on top and the full address below (always readable). */
@media (max-width: 700px) {
  .off-card { height: auto; perspective: none; cursor: default; }
  .off-in { transform: none !important; transform-style: flat; height: auto; }
  .off-f, .off-b {
    position: static; inset: auto; backface-visibility: visible;
    -webkit-backface-visibility: visible; transform: none !important;
    flex-direction: row; align-items: center; gap: 14px;
  }
  .off-f {
    border-radius: 14px 14px 0 0; border-bottom: 0;
    box-shadow: 0 2px 10px rgba(23, 23, 23, .07);
  }
  .off-f i { flex: 0 0 auto; }
  .off-b {
    flex-direction: column; align-items: flex-start; gap: 6px;
    border-radius: 0 0 14px 14px; box-shadow: 0 10px 22px -14px rgba(243, 112, 33, .7);
  }
  /* Front shows the role + place; the back shows the full name + address. */
  .off-f small { display: none; }
  .off-b > b { font-size: 15px; }
  .off-b p { font-size: 13.5px; }
  .off-grid.ho { display: block; }
  .off-grid.ho .off-card { height: auto; margin-bottom: 18px; }
}

/* City photo banner on the office card front. Falls back to a light warm gradient
   (.no-img) when no photo exists for that city. */
.off-f .off-ph { position: absolute; inset: 0 0 auto 0; height: 48%; border-radius: 14px 14px 0 0; overflow: hidden; background: linear-gradient(135deg, var(--orange-50), #fff); }
.off-f .off-ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.off-f .off-ph.no-img { background: linear-gradient(135deg, #FFE1C9, var(--orange-50)); }
/* Push the icon + city text just below the banner. */
.off-card .off-f { justify-content: flex-end; padding-top: 0; padding-bottom: 18px; }
.off-f i { position: relative; z-index: 1; margin-top: -24px; background: #fff; box-shadow: 0 2px 8px rgba(23,23,23,.14); }