.page-loader.loaded { opacity: 0; visibility: hidden; pointer-events: none; }

.loader-logo { font-family: var(--font-serif); font-size: 2rem; font-weight: 300; letter-spacing: .1em; animation: loaderPulse 1.4s ease-in-out infinite; }

.loader-logo span { color: var(--gold); }

.loader-line { width: 160px; height: 1px; background: var(--border); position: relative; overflow: hidden; }

.loader-line::after { content: ''; position: absolute; inset: 0; background: var(--gold); transform: translateX(-100%); animation: loaderSlide 1.1s var(--ease-out) forwards; }

@keyframes loaderPulse { 0%,100%{opacity:.3} 50%{opacity:1} }

@keyframes loaderSlide { to { transform: translateX(0); } }

/* ═══════════════════════════════════════════════════════════════════
   FOOTER — editorial, organised, fully responsive (shared: index + full)
   Base padding/background live in utilities.css; this file owns the grid,
   columns, links, social row and the device-safe bottom clearance.
   ═══════════════════════════════════════════════════════════════════ */
footer { position: relative; padding-bottom: calc(40px + env(safe-area-inset-bottom, 0px)); }
/* hairline gold seam across the very top of the footer */
footer::before {
  content: '';
  position: absolute;
  top: -1px; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201, 169, 110, .5), transparent);
  pointer-events: none;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.8fr 1fr 1fr 1.1fr;
  gap: clamp(30px, 4vw, 64px);
  margin-bottom: clamp(36px, 5vw, 56px);
}

.footer-brand-name {
  font-family: var(--font-serif);
  font-size: clamp(1.55rem, 2.4vw, 2rem);
  font-weight: 400;
  margin-bottom: 16px;
  letter-spacing: .03em;
  color: var(--off-white);
}
.footer-brand-name span { color: var(--gold); }

.footer-tagline { font-size: .86rem; color: var(--muted); line-height: 1.8; max-width: 300px; }

.footer-reg {
  margin-top: 20px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: .66rem;
  color: rgba(240, 237, 232, .4);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.footer-reg::before {
  content: '';
  width: 6px; height: 6px;
  background: var(--gold);
  border-radius: 50%;
  flex-shrink: 0;
  animation: footerDotPulse 1.7s ease-in-out infinite;
}
@keyframes footerDotPulse {
  0%, 100% { opacity: .55; transform: scale(1); box-shadow: 0 0 0 0 rgba(201, 169, 110, 0); }
  50%      { opacity: 1;  transform: scale(1.15); box-shadow: 0 0 0 6px rgba(201, 169, 110, .08); }
}

.footer-col-title {
  font-size: .64rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 20px;
  font-weight: 600;
}

.footer-links { list-style: none; display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; }
.footer-links a {
  position: relative;
  font-size: .86rem;
  color: var(--muted);
  transition: color .3s var(--ease-out), padding-inline-start .3s var(--ease-out);
}
.footer-links a::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: 50%;
  width: 8px; height: 1px;
  background: var(--gold);
  transform: translateY(-50%) scaleX(0);
  transform-origin: left center;
  transition: transform .3s var(--ease-out);
}
[dir="rtl"] .footer-links a::before { transform-origin: right center; }
.footer-links a:hover,
.footer-links a:focus-visible { color: var(--off-white); padding-inline-start: 14px; }
.footer-links a:hover::before,
.footer-links a:focus-visible::before { transform: translateY(-50%) scaleX(1); }

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 28px;
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
  gap: 18px;
}
.footer-copy { font-size: .76rem; color: var(--muted); }
.footer-copy span { color: var(--gold); }

.footer-socials { display: flex; gap: 12px; }
.footer-social {
  width: 38px; height: 38px;
  border: 1px solid var(--border);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--muted);
  transition: color .3s, border-color .3s, background .3s, transform .3s var(--ease-out);
}
.footer-social:hover,
.footer-social:focus-visible {
  border-color: var(--gold);
  color: var(--black);
  background: var(--gold);
  transform: translateY(-3px);
}

/* Back-to-top (level indicator) */
.back-top.visible { opacity: 1; pointer-events: all; transform: translateY(0); }
.back-top:hover { transform: translateY(-4px); background: var(--gold-light); }

/* Insurance for narrow folds + OS-level large-font scaling (Samsung):
   any footer line may wrap rather than push the layout sideways. */
footer li, footer p, footer a, .footer-tagline { overflow-wrap: break-word; }