/* ============================================================
   DEHLEEZ — Homepage ("Threshold") section styles.
   Ported verbatim from the design reference (index.html inline <style>).
   Loaded only on the front page.
   ============================================================ */

/* ---------- Homepage hero (Threshold) ---------- */
.hero { display: grid; grid-template-columns: 0.92fr 1.08fr; min-height: 620px; }
.hero-left { background: var(--deep-red); color: var(--cream-100); position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center; padding: 72px clamp(40px, 5vw, 84px); }
.hero-left .water { position: absolute; right: -40px; bottom: -36px; width: 320px; height: auto; opacity: 1; }
.hero-left .water path { fill: none; stroke: rgba(201,162,75,0.16); stroke-width: 2; }
.hero-stamp { width: 84px; height: 84px; margin-bottom: 26px; }
.hero-left h1 { font-size: clamp(38px, 4.6vw, 60px); color: var(--cream-50); margin: 18px 0 20px; line-height: 1.04; }
.hero-left p.lead { color: rgba(251,243,226,0.82); max-width: 420px; margin: 0 0 32px; }
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; }
.hero-right { position: relative; background: var(--cream-100); display: flex; align-items: center; justify-content: center; overflow: hidden;
  background-image: radial-gradient(circle at 1px 1px, rgba(164,30,34,0.05) 1px, transparent 0); background-size: 22px 22px; }
.hero-arch { position: relative; width: clamp(300px, 30vw, 440px); height: clamp(400px, 40vw, 580px); }
.hero-arch .spice-ph { position: absolute; inset: 0; }
.hero-pack { position: absolute; right: clamp(10px, 3vw, 56px); bottom: 0; height: clamp(280px, 32vw, 400px); z-index: 4;
  filter: drop-shadow(0 22px 34px rgba(63,30,12,0.30)); }
.hero-note { position: absolute; left: 40px; bottom: 34px; z-index: 5; display: flex; align-items: center; gap: 10px;
  background: rgba(251,243,226,0.92); border: 1px solid var(--cream-300); padding: 9px 14px; border-radius: 999px; backdrop-filter: blur(4px); }
.hero-note .veg { width: 16px; height: 16px; }
.hero-note span { font: var(--weight-semi) 12.5px/1 var(--font-body); color: var(--charcoal); }

/* ---------- Featured categories ---------- */
.cats { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.catcard { position: relative; border-radius: var(--radius-lg); overflow: hidden; min-height: 380px; display: flex; align-items: flex-end;
  padding: 36px; color: var(--cream-50); text-decoration: none; isolation: isolate; }
.catcard .bg { position: absolute; inset: 0; z-index: -2; transition: transform .5s; }
.catcard::after { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(43,15,8,0) 30%, rgba(43,15,8,0.78) 100%); }
.catcard:hover .bg { transform: scale(1.05); }
.catcard .ct-arch { position: absolute; top: 22px; left: 22px; width: 54px; height: 60px; z-index: 1; opacity: .9; }
.catcard .ct-arch path { fill: none; stroke: var(--gold-400); stroke-width: 5; }
.catcard-body { position: relative; z-index: 1; }
.catcard .eyebrow { color: var(--gold-400); }
.catcard h3 { font-size: 32px; color: var(--cream-50); margin: 12px 0 8px; }
.catcard p { color: rgba(251,243,226,0.85); font-size: 14.5px; margin: 0 0 16px; max-width: 340px; }

/* ---------- Magic band ---------- */
.magic { background: var(--primary-red); color: var(--cream-50); position: relative; overflow: hidden; }
.magic .wrap { display: grid; grid-template-columns: 1.1fr 0.9fr; align-items: center; gap: 48px; padding: clamp(56px,7vw,88px) 32px; }
.magic-arch { position: absolute; right: -60px; top: 50%; transform: translateY(-50%); width: 420px; height: 520px; opacity: .14; }
.magic-arch path { fill: none; stroke: var(--cream-50); stroke-width: 2; }
.magic h2 { font-size: clamp(32px,4vw,52px); color: var(--cream-50); line-height: 1.05; }
.magic p { color: rgba(251,243,226,0.85); max-width: 440px; margin: 18px 0 28px; }
.magic-visual { position: relative; display: flex; justify-content: center; }
.magic-visual .arch-img { width: 320px; height: 400px; position: relative; }
.magic-visual .arch-img .spice-ph { position: absolute; inset: 0; }

/* ---------- Heritage block ---------- */
.heritage { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px,5vw,80px); align-items: center; }
.heritage-media { position: relative; }
.heritage-media .arch-img { width: 100%; max-width: 440px; height: 520px; position: relative; margin: 0 auto; }
.heritage-media .arch-img .spice-ph { position: absolute; inset: 0; }
.heritage-stamp { position: absolute; right: 8px; bottom: -26px; width: 110px; height: 110px; background: var(--cream-100); border-radius: 50%; padding: 6px; box-shadow: var(--shadow-md); }
.heritage h2 { font-size: var(--fs-h2); margin: 16px 0 20px; }
.heritage .quote { font-family: var(--font-display); font-size: 24px; line-height: 1.4; color: var(--charcoal); border-left: 3px solid var(--gold-500); padding-left: 22px; margin: 26px 0; }
.stat-row { display: flex; gap: 40px; margin-top: 30px; }
.stat .n { font: 400 38px/1 var(--font-display); color: var(--primary-red); }
.stat .l { font: var(--weight-med) 13px/1.3 var(--font-body); color: var(--text-muted); margin-top: 6px; }

/* section wraps on homepage */
.hero + .trustband + .section .wrap, .section .wrap { max-width: var(--container); margin: 0 auto; padding-left: 32px; padding-right: 32px; }

@media (max-width: 860px){
  .hero { grid-template-columns: 1fr; }
  .hero-left { padding: 44px 24px 48px; }
  .hero-right { min-height: 440px; }
  .cats { grid-template-columns: 1fr; }
  .magic .wrap { grid-template-columns: 1fr; gap: 28px; }
  .magic-visual { display: none; }
  .heritage { grid-template-columns: 1fr; }
  .heritage-media { order: -1; }
  .heritage-media .arch-img { height: 420px; }
  .stat-row { gap: 28px; }
}