/* ============================================================
   Rumaiz Interiors — HOME PAGE CSS  (index.html only)
   ============================================================
   Load after shared.css:
     <link rel="stylesheet" href="css/shared.css" />
     <link rel="stylesheet" href="css/page-home.css" />
   ============================================================ */

/* ── Hero section wrapper ──────────────────────────────────── */
.hero-section {
  position: relative;
  overflow: hidden;
  margin-top: -4rem; /* pull behind sticky navbar */
}
@media (min-width: 768px) { .hero-section { margin-top: -5rem; } }

/* ── Mobile hero ───────────────────────────────────────────── */
.hero-mobile {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 600px;
  overflow: hidden;
}
@media (min-width: 1024px) { .hero-mobile { display: none; } }

.hero-mobile img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.92) sepia(0.08) hue-rotate(-6deg); }

.hero-mobile-scrim1 {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    oklch(0.095 0.016 55 / 0.55),
    oklch(0.095 0.016 55 / 0.25) 50%,
    oklch(0.095 0.016 55 / 0.9)
  );
}
.hero-mobile-scrim2 {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(14, 8, 5, 0.65), transparent 50%);
}

.hero-mobile-text {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.5rem 1.5rem 7rem;
  color: var(--ivory);
  text-shadow: 0 2px 18px rgba(10, 6, 3, 0.45);
}
.hero-mobile-text .eyebrow {
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.35em;
  color: color-mix(in srgb, var(--ivory) 75%, transparent);
  margin-bottom: 1rem;
}
.hero-mobile-text .hero-heading      { font-size: clamp(2rem, 8vw, 3rem); color: var(--ivory); font-family: var(--font-serif); font-weight: 500; letter-spacing: -0.01em; line-height: 1.1; }
.hero-mobile-text .hero-heading em   { font-style: italic; color: var(--gold-bright); }
.hero-mobile-text p {
  margin-top: 1.25rem;
  font-size: 0.9375rem;
  color: color-mix(in srgb, var(--ivory) 85%, transparent);
  max-width: 28rem;
  line-height: 1.6;
}

.hero-mobile-btns {
  margin-top: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
@media (min-width: 640px) { .hero-mobile-btns { flex-direction: row; } }

/* ── Hero button variants (mobile) ────────────────────────── */
.btn-ivory {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 9999px;
  background: var(--gold-brushed);
  background-size: 220% 220%;
  border: 1px solid oklch(0.838 0.120 84 / 0.4);
  padding: 1rem 1.75rem;
  font-size: 1rem;
  font-weight: 500;
  color: var(--primary-foreground);
  box-shadow: var(--shadow-luxe), var(--shadow-gold-glow), var(--gold-bevel);
  transition: transform 0.4s var(--ease-luxe), background-position 0.8s var(--ease-luxe), box-shadow 0.4s var(--ease-luxe);
  text-shadow: none;
}
.btn-ivory:hover { transform: translateY(-2px); background-position: 100% 0%; }
.btn-ivory:active { transform: scale(0.97); }

.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 9999px;
  border: 1px solid color-mix(in srgb, var(--ivory) 60%, transparent);
  background: rgba(232, 218, 196, 0.06);
  backdrop-filter: blur(6px) saturate(1.1);
  padding: 1rem 1.75rem;
  font-size: 1rem;
  color: var(--ivory);
  transition: transform 0.4s var(--ease-luxe), background 0.4s ease, border-color 0.4s ease;
}
.btn-ghost:hover { transform: translateY(-2px); background: rgba(232, 218, 196, 0.1); border-color: color-mix(in srgb, var(--ivory) 80%, transparent); }
.btn-ghost:active { transform: scale(0.97); }

/* ── Desktop hero ──────────────────────────────────────────── */
.hero-desktop {
  display: none;
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 700px;
  align-items: center;
  overflow: hidden;
  background: var(--background);
}
@media (min-width: 1024px) { .hero-desktop { display: flex; } }

.hero-text-panel {
  position: relative;
  z-index: 10;
  width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 6rem 3rem 6rem 8vw;
}
.hero-text-panel .eyebrow {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: var(--warm-brown);
  margin-bottom: 1.25rem;
}
.hero-text-panel .hero-heading      { font-size: clamp(3rem, 5vw, 4.5rem); color: var(--deep-brown); font-family: var(--font-serif); font-weight: 500; letter-spacing: -0.01em; line-height: 1.1; }
.hero-text-panel .hero-heading em   { font-style: italic; color: var(--gold-bright); }
.hero-text-panel p {
  margin-top: 1.75rem;
  font-size: 1.125rem;
  color: oklch(0.94 0.018 75 / 0.65);
  max-width: 28rem;
  line-height: 1.6;
}

.hero-desktop-btns {
  margin-top: 2.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.hero-img-panel {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  width: 52%;
}
.hero-img-panel img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.92) sepia(0.08) hue-rotate(-6deg); }
.hero-img-panel::before {
  content: "";
  position: absolute;
  inset-y: 0;
  left: 0;
  width: 8rem;
  background: linear-gradient(to right, var(--background), transparent);
  z-index: 1;
}
/* subtle ambient vignette for a more atmospheric, layered photograph */
.hero-img-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  box-shadow: inset 0 0 10rem 2rem oklch(0.095 0.016 55 / 0.35);
  background: radial-gradient(120% 90% at 75% 15%, oklch(0.838 0.120 84 / 0.06), transparent 55%);
  pointer-events: none;
}

/* ── Why Choose Us section ─────────────────────────────────── */
.why-section {
  background:
    radial-gradient(50rem 24rem at 15% 0%, oklch(0.630 0.121 69 / 0.04), transparent 60%),
    oklch(0.235 0.028 55 / 0.7);
}

.why-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 640px)  { .why-grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; } }
@media (min-width: 1024px) { .why-grid { grid-template-columns: repeat(4, 1fr); } }