/* Landing page composition */
.brand-txt { line-height: 1.25; }
.hero-copy .tagline {
  margin-top: 14px;
  font-size: clamp(15px, 2.2vw, 24px);
  letter-spacing: 0.06em;
  opacity: 0.9;
}
.hero-copy .sub { margin-top: 26px; }
.hero-copy .eyebrow { margin-bottom: 26px; }

.doors { margin-top: 10px; }
.doors .eyebrow { margin-bottom: 24px; }

.strip { margin-top: clamp(30px, 6vh, 58px); }
.strip a { display: block; }
.strip .ar { font-size: 11.5px; }

footer { margin-top: clamp(34px, 7vh, 70px); }
.legal .ar { display: inline; font-size: 10.5px; letter-spacing: 0; text-transform: none; }

/* hover preview: the seal tilts with the pointer on desktop */
@media (hover: hover) and (min-width: 901px) {
  .seal { transition: transform 0.6s var(--ease); }
  .seal.tilt img.seal-img { transition: transform 0.35s ease-out; }
}

/* ---- collection preview band ---- */
.preview { padding: clamp(18px, 4vh, 34px) 0 clamp(30px, 6vh, 54px); }
.preview-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 26px; }
.preview-all {
  font-size: 10.5px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold);
  border-bottom: 1px solid var(--line); padding-bottom: 4px; white-space: nowrap;
  transition: color 0.4s var(--ease), border-color 0.4s var(--ease);
}
.preview-all .ar { display: inline; font-size: 11px; letter-spacing: 0; text-transform: none; opacity: 0.75; }
.preview-all:hover { color: var(--gold-lit); border-color: var(--gold); }
.stones {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: clamp(12px, 2vw, 26px);
}
.stone { display: block; }
.stone img {
  width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 50%;
  border: 1px solid var(--line-soft);
  transition: transform 0.6s var(--ease), border-color 0.5s var(--ease), box-shadow 0.6s var(--ease);
}
.stone:hover img { transform: translateY(-6px) scale(1.02); border-color: var(--gold); box-shadow: 0 22px 40px -20px rgba(0,0,0,0.9); }
.stone .en { display: block; font-family: var(--ui); font-size: 12px; letter-spacing: 0.05em; color: #e6dfd0; margin-top: 12px; }
.stone .ar { display: block; font-family: var(--ar); font-size: 11px; color: var(--gold); opacity: 0.8; margin-top: 2px; direction: rtl; }
@media (max-width: 900px) { .stones { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) {
  .stones { grid-template-columns: repeat(2, 1fr); }
  .topbar { flex-wrap: wrap; gap: 10px; }
  .nav { width: 100%; justify-content: flex-start; gap: 16px; }
  .nav a { font-size: 9.5px; letter-spacing: 0.12em; }
  .brand b { font-size: 11px; letter-spacing: 0.18em; }
}