/* ── High Jewelry Page ── */
.hj-hero {
  position: relative; height: 100vh; min-height: 600px; overflow: hidden;
  margin-top: 58px; background: #0a0a0a;
}
.hj-hero video, .hj-hero img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 30%;
}
.hj-hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.6) 100%);
}
.hj-hero-content {
  position: absolute; bottom: 0; left: 0; right: 0;
  z-index: 2; padding: 60px 60px 80px; text-align: center;
}
.hj-hero-eyebrow {
  display: block; font-size: 10px; font-weight: 600; letter-spacing: .32em;
  text-transform: uppercase; color: #d4af70; margin-bottom: 18px;
  animation: fadeUp .8s .1s both;
}
.hj-hero-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 68px; font-weight: 300; color: #fff; line-height: 1.08;
  letter-spacing: .03em; margin-bottom: 20px;
  animation: fadeUp .9s .2s both;
}
.hj-hero-subtitle {
  font-size: 14px; font-weight: 300; color: rgba(255,255,255,.75);
  line-height: 1.8; max-width: 520px; margin: 0 auto 32px;
  animation: fadeUp .9s .35s both;
}
.hj-hero-cta { animation: fadeUp .9s .5s both; display: inline-block; }

/* ── Intro Section ── */
.hj-intro {
  padding: 80px 40px; max-width: 860px; margin: 0 auto; text-align: center;
}
.hj-intro-eyebrow {
  font-size: 9px; font-weight: 700; letter-spacing: .28em; text-transform: uppercase;
  color: #b8973a; margin-bottom: 16px; display: block;
}
.hj-intro-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 42px; font-weight: 300; color: #1a1a1a; line-height: 1.2; margin-bottom: 20px;
}
.hj-intro-text { font-size: 14px; font-weight: 300; color: #666; line-height: 1.95; }

/* ── Pieces Grid ── */
.hj-pieces-section { padding: 0 40px 80px; max-width: 1200px; margin: 0 auto; }
.hj-pieces-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 3px; }
.hj-piece {
  position: relative; overflow: hidden; cursor: pointer;
  aspect-ratio: 3/4; background: #f0ece4;
}
.hj-piece.wide { grid-column: span 2; aspect-ratio: 16/7; }
.hj-piece img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .8s cubic-bezier(.25,.46,.45,.94);
}
.hj-piece:hover img { transform: scale(1.06); }
.hj-piece-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.65) 0%, transparent 50%);
  opacity: 0; transition: opacity .4s;
}
.hj-piece:hover .hj-piece-overlay { opacity: 1; }
.hj-piece-info {
  position: absolute; bottom: 28px; left: 28px; z-index: 2;
  transform: translateY(10px); opacity: 0; transition: all .4s;
}
.hj-piece:hover .hj-piece-info { transform: translateY(0); opacity: 1; }
.hj-piece-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 20px; font-weight: 300; color: #fff; margin-bottom: 4px;
}
.hj-piece-stones { font-size: 11px; color: rgba(255,255,255,.75); letter-spacing: .06em; }

/* ── The Process ── */
.hj-process { background: #f5f3f0; padding: 80px 40px; }
.hj-process-inner { max-width: 1100px; margin: 0 auto; }
.hj-process-header { text-align: center; margin-bottom: 52px; }
.hj-process-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 38px; font-weight: 300; color: #1a1a1a; margin-bottom: 12px;
}
.hj-process-sub { font-size: 13px; color: #888; max-width: 480px; margin: 0 auto; line-height: 1.8; }
.hj-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.hj-step { padding: 32px 28px; border-right: 1px solid #e0dbd3; position: relative; }
.hj-step:last-child { border-right: none; }
.hj-step-num {
  font-family: 'Cormorant Garamond', serif;
  font-size: 52px; font-weight: 300; color: #e0dbd3; line-height: 1; margin-bottom: 14px;
}
.hj-step-title { font-size: 13px; font-weight: 600; letter-spacing: .06em; color: #1a1a1a; margin-bottom: 8px; }
.hj-step-text { font-size: 12px; font-weight: 300; color: #777; line-height: 1.7; }

/* ── Private Appointment CTA ── */
.hj-appt {
  padding: 100px 40px; background: #1a1a1a;
  display: grid; grid-template-columns: 1fr 1fr; gap: 0; align-items: center;
}
.hj-appt-left { padding-right: 60px; }
.hj-appt-eyebrow { font-size: 9px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: #b8973a; margin-bottom: 16px; display: block; }
.hj-appt-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 44px; font-weight: 300; color: #fff; line-height: 1.15; margin-bottom: 20px;
}
.hj-appt-text { font-size: 13px; font-weight: 300; color: rgba(255,255,255,.65); line-height: 1.85; margin-bottom: 32px; }
.hj-appt-right {
  padding: 48px; background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.12);
}
.hj-appt-right h3 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px; font-weight: 400; color: #fff; margin-bottom: 24px;
}
.hj-form-input {
  width: 100%; padding: 13px 16px; background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.2); color: #fff; font-family: 'Poppins', sans-serif;
  font-size: 12px; outline: none; transition: border-color .2s; margin-bottom: 12px;
}
.hj-form-input::placeholder { color: rgba(255,255,255,.4); }
.hj-form-input:focus { border-color: #b8973a; }
.hj-form-select { appearance: none; }

/* ── Responsive ── */
@media (max-width: 900px) {
  .hj-hero-title { font-size: 44px; }
  .hj-hero-content { padding: 40px 28px 60px; }
  .hj-pieces-grid { grid-template-columns: 1fr; }
  .hj-piece.wide { grid-column: span 1; aspect-ratio: 3/2; }
  .hj-steps { grid-template-columns: 1fr 1fr; }
  .hj-step { border-right: none; border-bottom: 1px solid #e0dbd3; }
  .hj-appt { grid-template-columns: 1fr; padding: 60px 28px; }
  .hj-appt-left { padding-right: 0; margin-bottom: 36px; }
}
@media (max-width: 640px) {
  .hj-hero-title { font-size: 32px; }
  .hj-intro { padding: 52px 24px; }
  .hj-intro-title { font-size: 30px; }
  .hj-pieces-section { padding: 0 0 60px; }
  .hj-process { padding: 52px 24px; }
  .hj-steps { grid-template-columns: 1fr; }
}