/* The same technical Fira Sans family already used by UBazar Flux headings. */
@font-face {
  font-family: UFPeople;
  src: url('fonts/FiraSans-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: UFPeople;
  src: url('fonts/FiraSans-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: UFPeople;
  src: url('fonts/FiraSans-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
/* UBazar Flux 1.0.102: unified contact links and modern headings for the editorial page.
   Intentionally shares the same uf-contact-luxe classes as 1.0.98 so existing
   Gutenberg content and user-entered email addresses remain unchanged. */
.uf-contact-luxe,
.editor-styles-wrapper .uf-contact-luxe {
  --uf-contact-black: #171717;
  --uf-contact-muted: #666;
  --uf-contact-stroke: #e7e7e7;
  display: block;
  width: 100% !important;
  max-width: 1240px !important;
  min-width: 0;
  margin: 0 auto !important;
  padding: 46px 24px 68px !important;
  color: var(--uf-contact-black) !important;
  background: #fff !important;
  box-sizing: border-box;
  overflow: visible;
  position: relative;
  isolation: auto;
  border-top: 1px solid var(--uf-contact-stroke);
}
.uf-contact-luxe *, .editor-styles-wrapper .uf-contact-luxe * { box-sizing: border-box; }
/* The OUTER Group can also add a width-limited Gutenberg inner container. */
.uf-contact-luxe > .wp-block-group__inner-container,
.editor-styles-wrapper .uf-contact-luxe > .block-editor-inner-blocks {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Every nested group must be full-width; Gutenberg sometimes injects an extra wrapper. */
.uf-contact-luxe .uf-contact-inner,
.uf-contact-luxe .uf-contact-inner > .wp-block-group__inner-container,
.editor-styles-wrapper .uf-contact-luxe .uf-contact-inner,
.editor-styles-wrapper .uf-contact-luxe .uf-contact-inner > .block-editor-inner-blocks {
  display: block;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.uf-contact-luxe .uf-contact-hero,
.editor-styles-wrapper .uf-contact-luxe .uf-contact-hero {
  min-height: 0 !important;
  padding: 0 !important;
  max-width: 890px !important;
  margin: 0 auto 28px !important;
  text-align: center;
  position: relative;
}
/* Explicitly remove the large photographic banner of version 1.0.98. */
.uf-contact-luxe .uf-contact-hero::before,
.uf-contact-luxe .uf-contact-hero::after { content: none !important; display: none !important; }
.uf-contact-luxe .uf-contact-eyebrow {
  color: #777 !important;
  font: 10px/1.45 Arial, Helvetica, sans-serif !important;
  letter-spacing: .25em;
  margin: 0 0 13px !important;
  text-transform: uppercase;
}
.uf-contact-luxe .uf-contact-heading {
  font-family: UFPeople, 'Fira Sans', Arial, Helvetica, sans-serif !important;
  color: #111 !important;
  font-weight: 300 !important;
  letter-spacing: -.025em !important;
  font-size: clamp(30px, 3vw, 43px) !important;
  line-height: 1.18 !important;
  margin: 0 auto 14px !important;
  max-width: 850px !important;
}
.uf-contact-luxe .uf-contact-intro {
  color: #6b6b6b !important;
  font: 14px/1.65 Arial, Helvetica, sans-serif !important;
  max-width: 720px !important;
  margin: 0 auto !important;
}
/* One wide row of four cards on desktop. Keep support for legacy and modern WP markup.
   In legacy WP, .wp-block-group__inner-container is the ONLY direct grid child.
   Without grid-column:1/-1 it occupies just the first track: the live left-shift bug. */
.uf-contact-luxe .uf-contact-cards,
.uf-contact-luxe .uf-contact-cards > .wp-block-group__inner-container,
.editor-styles-wrapper .uf-contact-cards > .block-editor-inner-blocks > .block-editor-block-list__layout {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  align-items: stretch !important;
  gap: 16px !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 !important;
}
/* Force an intermediary WP group wrapper to span all four tracks. */
.uf-contact-luxe .uf-contact-cards > .wp-block-group__inner-container,
.editor-styles-wrapper .uf-contact-cards > .block-editor-inner-blocks {
  grid-column: 1 / -1 !important;
  grid-row: auto !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 !important;
}
.editor-styles-wrapper .uf-contact-cards > .block-editor-inner-blocks { display: block !important; }
.uf-contact-luxe .uf-contact-card,
.uf-contact-luxe .uf-contact-cards > .wp-block-group__inner-container > .uf-contact-card {
  display: flex !important;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  min-width: 0;
  max-width: none !important;
  min-height: 264px;
  margin: 0 !important;
  padding: 26px 23px 24px !important;
  background: #fafafa !important;
  border: 1px solid var(--uf-contact-stroke) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: #171717 !important;
  transition: background .18s ease, border-color .18s ease;
}
.uf-contact-luxe .uf-contact-card:hover { background: #f6f6f6 !important; border-color: #d4d4d4 !important; }
/* Classic WP inserts wp-block-group__inner-container inside each card.
   Make that wrapper a full-height flex column as well, so emails line up. */
.uf-contact-luxe .uf-contact-card > *,
.editor-styles-wrapper .uf-contact-luxe .uf-contact-card > * { width: 100%; max-width: none !important; }
.uf-contact-luxe .uf-contact-card > .wp-block-group__inner-container,
.editor-styles-wrapper .uf-contact-luxe .uf-contact-card > .block-editor-inner-blocks,
.editor-styles-wrapper .uf-contact-luxe .uf-contact-card > .block-editor-inner-blocks > .block-editor-block-list__layout {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  flex: 1 1 auto !important;
}
/* In Gutenberg the editable p is wrapped in a block-editor wrapper. */
.editor-styles-wrapper .uf-contact-luxe .uf-contact-card
  .block-editor-block-list__layout > .wp-block:has(> .uf-contact-email) {
  margin-top: auto !important;
}

.uf-contact-luxe .uf-contact-number {
  font: 10px/1.4 Arial, Helvetica, sans-serif !important;
  letter-spacing: .18em;
  color: #838383 !important;
  margin: 0 0 11px !important;
  text-transform: uppercase;
}
.uf-contact-luxe .uf-contact-card-title {
  color: #161616 !important;
  font: 400 clamp(19px, 1.48vw, 22px)/1.27 UFPeople, Arial, Helvetica, sans-serif !important;
  letter-spacing: -.018em !important;
  overflow-wrap: normal !important;
  hyphens: none !important;
  margin: 0 0 14px !important;
}
.uf-contact-luxe .uf-contact-card-description {
  color: #646464 !important;
  font: 13px/1.64 Arial, Helvetica, sans-serif !important;
  margin: 0 0 15px !important;
}
/* All email rows use one visual treatment, whether originally typed as
   an ordinary paragraph or as a link in Gutenberg. The PHP renderer normalises
   existing front-end content; editor-only DOM marks new email paragraphs. */
.uf-contact-luxe .uf-contact-card .uf-contact-email,
.editor-styles-wrapper .uf-contact-luxe .uf-contact-card .uf-contact-email {
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  text-align: center !important;
  width: 100% !important;
  min-width: 0 !important;
  position: relative !important;
  margin: auto 0 0 !important;
  padding: 16px 0 0 !important;
  color: #111 !important;
  font: 700 14px/1.45 UFPeople, 'Fira Sans', Arial, Helvetica, sans-serif !important;
  letter-spacing: -.018em !important;
  white-space: nowrap !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}
.uf-contact-luxe .uf-contact-card .uf-contact-email a,
.editor-styles-wrapper .uf-contact-luxe .uf-contact-card .uf-contact-email a {
  display: inline-block !important;
  flex: 0 1 auto !important;
  min-width: 0 !important;
  color: #111 !important;
  font: inherit !important;
  line-height: inherit !important;
  white-space: nowrap !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  text-decoration: none !important;
  border-bottom: 1px solid #777 !important;
  padding-bottom: 2px !important;
}
.uf-contact-luxe .uf-contact-card .uf-contact-email::after,
.editor-styles-wrapper .uf-contact-luxe .uf-contact-card .uf-contact-email::after {
  content: '↗' !important;
  display: inline-block !important;
  position: absolute !important;
  bottom: 3px !important;
  right: 0 !important;
  width: 17px !important;
  flex: none !important;
  text-align: right !important;
  color: #111 !important;
  font: 18px/1 Arial, Helvetica, sans-serif !important;
  pointer-events: none;
}
.uf-contact-luxe .uf-contact-email a:hover { border-bottom-color: #111 !important; }
.uf-contact-luxe .uf-contact-email a:focus-visible { outline: 2px solid #111; outline-offset: 3px; }
/* Empty placeholders must not occupy the aligned email row. */
.uf-contact-luxe .uf-contact-email-pending:not(:has(a)) {
  color: #8b8b8b !important;
  font-weight: 400 !important;
}
.uf-contact-luxe .uf-contact-email-pending:not(:has(a))::after { content: none !important; }
body:not(.wp-admin) .uf-contact-luxe .uf-contact-email-pending:not(:has(a)) {
  display: none !important;
}
/* If a user inserted a new paragraph instead of editing the placeholder,
   hide the empty placeholder in the Gutenberg visual editor as well. */
.editor-styles-wrapper .uf-contact-luxe .uf-contact-card:has(p.uf-contact-email:not(.uf-contact-email-pending))
  .uf-contact-email-pending:not(:has(a)) {
  opacity: .35 !important;
}
.uf-contact-luxe .uf-contact-footnote {
  font: 12px/1.6 Arial, Helvetica, sans-serif !important;
  color: #818181 !important;
  text-align: center;
  margin: 23px auto 0 !important;
  max-width: 790px !important;
}
@media (max-width: 1080px) {
  .uf-contact-luxe .uf-contact-cards,
  .uf-contact-luxe .uf-contact-cards > .wp-block-group__inner-container,
  .editor-styles-wrapper .uf-contact-cards > .block-editor-inner-blocks > .block-editor-block-list__layout {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 660px) {
  .uf-contact-luxe, .editor-styles-wrapper .uf-contact-luxe {
    padding: 34px 18px 45px !important;
  }
  .uf-contact-luxe .uf-contact-hero { margin-bottom: 25px !important; }
  .uf-contact-luxe .uf-contact-cards,
  .uf-contact-luxe .uf-contact-cards > .wp-block-group__inner-container,
  .editor-styles-wrapper .uf-contact-cards > .block-editor-inner-blocks > .block-editor-block-list__layout {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
  }
  .uf-contact-luxe .uf-contact-card,
  .uf-contact-luxe .uf-contact-cards > .wp-block-group__inner-container > .uf-contact-card {
    min-height: 0 !important;
    padding: 22px 23px !important;
  }
  .uf-contact-luxe .uf-contact-heading { font-size: clamp(29px, 7.3vw, 38px) !important; }
}
@media (max-width: 420px) {
  .uf-contact-luxe, .editor-styles-wrapper .uf-contact-luxe { padding: 28px 12px 36px !important; }
  .uf-contact-luxe .uf-contact-intro { font-size: 13px !important; }
  .uf-contact-luxe .uf-contact-card { padding: 20px 19px !important; }
  .uf-contact-luxe .uf-contact-card-title { font-size: 21px !important; }
}

@media (max-width: 390px) {
  .uf-contact-luxe .uf-contact-card .uf-contact-email,
  .editor-styles-wrapper .uf-contact-luxe .uf-contact-card .uf-contact-email {
    font-size: 13px !important;
  }
}
