/* ===== Royal Premium Theme (Home only) — Mobile Responsive (No Blur) ===== */
:root{
  --ink:#0f1320;        /* deep charcoal */
  --ink-2:#1b2233;
  --gold:#c9a227;       /* royal gold */
  --gold-2:#b28c1f;
  --ivory:#f7f4ef;      /* soft ivory */
  --soft:#faf7f2;
  --line:#e7dec9;       /* warm line */
  --white:#fff;
  --muted:#6a6f7a;
  /* optional: set --bg via inline style on .hero-royal; fallback color here */
  --bg:#222; 
}

/* Page base */
.home.royal{
  background:
    radial-gradient(1200px 420px at 8% -10%, rgba(201,162,39,.12), transparent 60%),
    radial-gradient(1100px 420px at 100% -10%, rgba(15,19,32,.08), transparent 60%),
    var(--ivory);
  color:var(--ink);
  font-family:Inter, system-ui, -apple-system, Segoe UI, Arial;
  position:relative;
}

/* subtle damask texture (pattern only, no blur) */
.home.royal::before{
  content:"";
  position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.06;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%230f1320' fill-opacity='.9' d='M200 40c16 30 48 43 90 45-24 24-45 50-45 95-45 2-68 22-90 48-12-33-20-66 5-95 24-29 40-56 40-93z'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}

/* Headings */
h1,h2,h3,h4{ font-family:"Playfair Display", serif; letter-spacing:.3px }

/* Section header */
.sec-head{ text-align:center; padding:14px 16px 8px }
.sec-head h2{ font-size:clamp(24px,4vw,36px); margin:0 0 6px; color:var(--ink) }
.sec-head p{ color:var(--muted); margin:0 }

/* Buttons */
.btn{ display:inline-block; text-decoration:none; font-weight:900; padding:12px 20px; border-radius:999px; transition:.2s }
.btn.gold{ background:linear-gradient(180deg, var(--gold), var(--gold-2)); color:#fff; box-shadow:0 12px 28px rgba(201,162,39,.35) }
.btn.gold:hover{ filter:brightness(.95); transform:translateY(-2px) } /* no blur */
.btn.ghost{ border:2px solid #fff; color:#fff }
.btn.ghost-dark{ border:2px solid var(--ink); color:var(--ink) }
.center{text-align:center}

/* ========== HERO ========== */
.hero-royal{
  position:relative; padding:30px 16px 24px;
  background:
    linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,.15) 55%, rgba(0,0,0,.45)),
    var(--bg) center/cover no-repeat; /* set --bg on element for image */
}
.hero-wrap{
  width:min(1200px,94%); margin:0 auto;
  display:grid; grid-template-columns:1.1fr 1fr; gap:22px;
}
.hero-copy{ color:#fff; padding:18px; } /* blur removed */
.hero-copy .eyebrow{ text-transform:uppercase; letter-spacing:3px; font-weight:800; opacity:.95 }
.hero-copy h1{ font-size:clamp(28px,5.6vw,52px); line-height:1.05; margin:.3rem 0 .5rem }
.hero-copy .lead{ color:#e7e8ec; max-width:56ch }
.cta-row{ display:flex; gap:12px; flex-wrap:wrap; margin-top:12px }
.badges{ display:flex; gap:10px; flex-wrap:wrap; margin:12px 0 4px; padding:0; list-style:none }
.badges li{ background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.35); color:#fff; font-weight:800; border-radius:999px; padding:6px 10px }
.tiny{ color:#e7e8ec; opacity:.9 }
.hero-media{ display:grid; place-items:center; padding:12px }
.frame{ background:rgba(255,255,255,.85); border:1.5px solid rgba(255,255,255,.55); border-radius:16px; padding:10px; box-shadow:0 18px 40px rgba(0,0,0,.25) }
.frame img{ width:100%; height:360px; object-fit:cover; border-radius:12px }

/* HERO responsive */
@media (max-width:1024px){
  .hero-wrap{ grid-template-columns:1fr; gap:16px; }
  .frame img{ height:300px; }
}
@media (max-width:560px){
  .hero-royal{ padding:24px 14px; }
  .hero-copy{ padding:12px; }
  .cta-row .btn{ width:100%; text-align:center; }
  .frame{ padding:8px; }
  .frame img{ height:240px; }
}

/* ========== OCCASIONS ========== */
.occasions{ padding:36px 16px 8px }
.oc-grid{
  width:min(1200px,94%); margin:10px auto 0;
  display:grid; grid-template-columns:repeat(3,1fr); gap:16px;
}
.oc-card{ position:relative; border:1.5px solid var(--line); border-radius:16px; overflow:hidden; background:#fff; box-shadow:0 12px 28px rgba(0,0,0,.06); transition:transform .25s ease, box-shadow .25s ease }
.oc-card:hover{ transform:translateY(-6px); box-shadow:0 22px 44px rgba(0,0,0,.12) }
.oc-card img{ width:100%; height:220px; object-fit:cover }
.oc-card h3{ margin:0; padding:12px 14px; font-size:1.1rem; color:var(--ink-2) }
.oc-card .num{ position:absolute; top:10px; left:12px; background:linear-gradient(180deg, var(--gold), var(--gold-2)); color:#fff; font-weight:900; border-radius:999px; padding:6px 10px; font-size:.9rem; box-shadow:0 8px 18px rgba(201,162,39,.35) }

@media (max-width:900px){ .oc-grid{ grid-template-columns:1fr 1fr } }
@media (max-width:560px){
  .occasions{ padding:28px 12px 8px; }
  .oc-grid{ width:min(1200px,96%); grid-template-columns:1fr; gap:14px; }
  .oc-card img{ height:200px; }
}

/* ========== ROYAL SERVICES (8 cards) ========== */
.services-royal{
  padding:40px 16px; background:var(--soft);
  border-top:1.5px solid var(--line); border-bottom:1.5px solid var(--line)
}
.srv-grid{
  width:min(1200px,94%); margin:10px auto 0;
  display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); gap:16px;
}
.srv-card{ background:#fff; border-radius:16px; border:1.5px solid var(--line); box-shadow:0 10px 24px rgba(0,0,0,.06); padding:20px; text-align:center; transition:transform .25s, box-shadow .25s }
.srv-card:hover{ transform:translateY(-6px); box-shadow:0 18px 36px rgba(0,0,0,.10) }
.srv-card .icon{ font-size:36px; line-height:1; margin-bottom:10px }
.srv-card h3{ margin:6px 0 6px; color:var(--ink-2) }
.srv-card p{ margin:0; color:var(--muted) }

@media (max-width:560px){
  .services-royal{ padding:32px 12px; }
  .srv-grid{ width:min(1200px,96%); gap:14px; }
  .srv-card{ padding:16px; }
  .srv-card .icon{ font-size:30px; }
}

/* ========== PROCESS ========== */
.process{ padding:30px 16px }
.steps{
  width:min(1200px,94%); margin:10px auto 0;
  display:grid; grid-template-columns:repeat(4,1fr); gap:16px;
}
.step{ background:#fff; border:1.5px solid var(--line); border-radius:16px; padding:14px; box-shadow:0 10px 24px rgba(0,0,0,.06) }
.step .icon{ font-size:26px; display:inline-grid; place-items:center; width:44px; height:44px; border-radius:50%; background:#fff9e2; border:1px solid #eadfbf; color:#6b560c; font-weight:900; margin-bottom:6px }
.step h4{ margin:4px 0; color:var(--ink-2) }
.step p{ margin:0; color:var(--muted) }

@media (max-width:900px){ .steps{ grid-template-columns:1fr 1fr } }
@media (max-width:560px){
  .process{ padding:26px 12px; }
  .steps{ width:min(1200px,96%); grid-template-columns:1fr; gap:14px; }
}

/* ========== UDAIPUR COVERAGE ========== */
.udaipur{ padding:26px 16px }
.chips{
  width:min(1200px,94%); margin:10px auto 12px;
  display:flex; gap:10px; flex-wrap:wrap; justify-content:center
}
.chips span{ border:1px dashed var(--line); padding:8px 12px; border-radius:999px; background:#fff; color:#var(--ink-2); font-weight:700 }
.map-row{
  width:min(1200px,94%); margin:0 auto;
  display:grid; grid-template-columns:2fr 1fr; gap:16px
}
.map-row iframe{ width:100%; height:300px; border:0; border-radius:16px; box-shadow:0 12px 28px rgba(0,0,0,.06); border:1.5px solid var(--line) }
.map-cta{ background:#fff; border:1.5px solid var(--line); border-radius:16px; padding:16px; display:grid; place-content:center; text-align:center; box-shadow:0 10px 24px rgba(0,0,0,.06) }
.map-cta h3{ margin:0 0 6px }
.map-cta p{ margin:0 0 10px; color:#var(--muted) }

@media (max-width:900px){
  .map-row{ grid-template-columns:1fr }
  .map-row iframe{ height:260px }
}
@media (max-width:560px){
  .udaipur{ padding:22px 12px }
  .map-row{ width:min(1200px,96%) }
  .map-row iframe{ height:240px }
}

/* ========== CTA ========== */
.cta-royal{
  padding:30px 16px 40px; text-align:center;
  background:radial-gradient(800px 280px at 10% -10%, rgba(201,162,39,.18), transparent 60%), #fff;
  border-top:1.5px solid var(--line)
}
.cta-royal h3{ font-size:clamp(20px,3.4vw,28px); margin:0 0 12px }
.cta-buttons{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap }

@media (max-width:560px){
  .cta-royal{ padding:26px 12px 34px }
  .cta-buttons .btn{ width:100%; max-width:420px }
}
