/* ==========================================================================
   THE PRIVATE OFFICE — WEBSITE
   brand.css — Official visual-identity layer (approved logo board direction)

   Recreated artwork (vector-derived from the approved official seal):
     • assets/img/brand/brand-crest-official-(512|1024).png — circular seal medallion
     • assets/img/brand/brand-falcon-icon-(256|512).png     — seal-centre icon (khatam lattice + rosette; filenames retained for stable references)
     • assets/img/favicon.svg                               — seal-centre favicon glyph
     • assets/img/apple-touch-icon.png                      — touch tile (seal-centre icon on navy)
   Applications: loading veil, header/footer medallions, hero seal rows, tab/touch icons.
   Existing typography, colors, spacing and layout are NOT modified here.
   ========================================================================== */

/* ----------------------------------------------------------- loading veil --
   Shown while the page paints (js unavailable → never rendered). Fades and
   removes itself; honours prefers-reduced-motion. Sits above all layers. */
html:not(.js) .po-loader { display: none; }
.po-loader {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  background: var(--navy-900, #081326);
  color: var(--ivory-100);
  transition: opacity 450ms ease, visibility 0s 450ms;
}
.po-loader--done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.po-loader__mark { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.po-loader__crest {
  width: 108px;
  height: 108px;
  object-fit: contain;
  animation: po-loader-rise 700ms var(--ease-standard, ease) both;
}
.po-loader__name {
  font-family: var(--font-sub, Georgia, serif);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold-400, #D8BB82);
  animation: po-loader-fade 700ms ease 120ms both;
}
.po-loader__ar {
  font-size: 1rem;
  color: var(--gold-500, #C6A15B);
  letter-spacing: 0;                 /* Arabic is never letterspaced */
  animation: po-loader-fade 700ms ease 200ms both;
}
@keyframes po-loader-rise {
  from { opacity: 0; transform: translateY(10px) scale(0.99); }
  to   { opacity: 1; transform: none; }
}
@keyframes po-loader-fade {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .po-loader { transition: none; }
  .po-loader__crest, .po-loader__name, .po-loader__ar { animation: none; }
}

/* ----------------------------------------------------------- hero seal row --
   Small institutional identity row inserted at the top of navy heroes on the
   brand-applied pages (contact, verification, business, media-centre).
   Gold artwork on navy — matches the board's "gold on navy" variation. */
.po-brand-mark {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 22px;
}
.po-brand-mark img {
  width: 54px;
  height: 54px;
  flex: none;
  object-fit: contain;
  display: block;
}
.po-brand-mark__ar {
  color: var(--gold-300, #E7D2A6);
  font-size: 1.0625rem;
  line-height: 1.4;
  letter-spacing: 0;                 /* Arabic is never letterspaced */
}
@media (max-width: 640px) {
  .po-brand-mark { margin-bottom: 16px; }
  .po-brand-mark img { width: 44px; height: 44px; }
}

/* ------------------------------------------------------- footer crest chip */
.gf__crest {
  width: 52px;
  height: 52px;
  object-fit: contain;
  display: block;
}

/* ---------------------------------------------------- header crest (shared) --
   Header uses the same recoloured crest inside the existing circular ring.
   Rules live here so the server-mounted injection stays minimal: pages load
   brand.css once via the GlobalFooter mount; the header's [data-brand-crest]
   upgrade in assets/js/brand.js moves away from the legacy text monogram. */
.brand__crest {
  display: none;                     /* revealed only once upgraded by JS */
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: none;
  padding: 5px;
  border: 1px solid rgba(198, 161, 91, 0.65);
  border-radius: 999px;
  background: rgba(8, 19, 38, 0.35);
  transition: border-color var(--dur-2, 250ms), background var(--dur-2, 250ms);
}
.brand__crest img { width: 100%; height: 100%; object-fit: contain; display: block; }
.brand:hover .brand__crest { border-color: var(--gold-400, #D8BB82); background: rgba(8, 19, 38, 0.55); }
html.js .brand[data-brand-crest] .brand__crest { display: inline-flex; }
html.js .brand[data-brand-crest] .brand__mono { display: none; }
@media (max-width: 430px) { .brand__crest { width: 38px; height: 38px; padding: 4px; } }
.mobile-nav__bar .brand__crest { width: 40px; height: 40px; }