/* ============================================================
   KAHANI JUNCTION — Brand Design System
   Midnight Black / Temple Gold / Sindoor Red / Cream
   ============================================================ */

:root {
  --black:       #0D0C0A;
  --black-soft:  #15130F;
  --black-card:  #181610;
  --gold:        #C9A84C;
  --gold-dim:    rgba(201,168,76,0.3);
  --gold-faint:  rgba(201,168,76,0.1);
  --red:         #CC2200;
  --red-hover:   #A81A00;
  --cream:       #F5EFE0;
  --cream-dim:   rgba(245,239,224,0.7);
  --cream-faint: rgba(245,239,224,0.45);
  --font-wordmark: 'Cinzel', serif;
  --font-display:  'Cormorant Garamond', serif;
  --font-body:     'Outfit', sans-serif;
  --container: 1180px;
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  background:var(--black);
  color:var(--cream-dim);
  font-family:var(--font-body);
  font-weight:400;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img { max-width:100%; display:block; }
a { color:inherit; text-decoration:none; }

.wrap {
  max-width:var(--container);
  margin:0 auto;
  padding:0 32px;
}

/* ---------- Typography ---------- */
h1,h2,h3,h4 {
  font-family:var(--font-display);
  font-weight:500;
  font-style:italic;
  color:var(--gold);
  line-height:1.15;
}
.eyebrow {
  font-family:var(--font-body);
  font-weight:500;
  font-size:12px;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--gold);
  opacity:0.75;
  display:block;
  margin-bottom:18px;
}
.lede {
  font-family:var(--font-body);
  font-size:18px;
  color:var(--cream-dim);
  max-width:620px;
  line-height:1.75;
}

/* ---------- Buttons ---------- */
.btn {
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--font-body);
  font-weight:500;
  font-size:14px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  padding:16px 34px;
  border:2px solid transparent;
  cursor:pointer;
  transition:all 0.2s ease;
  white-space:nowrap;
}
.btn-primary { background:var(--red); color:var(--cream); border-color:var(--red); }
.btn-primary:hover { background:var(--red-hover); border-color:var(--red-hover); }
.btn-outline { background:transparent; color:var(--cream); border-color:var(--gold-dim); }
.btn-outline:hover { border-color:var(--gold); color:var(--gold); }

/* ---------- Logo ---------- */
.logo-link { display:flex; align-items:center; text-decoration:none; flex-shrink:0; }
.logo-img  { height:54px; width:auto; display:block; }

/* ---------- Header / Nav ---------- */
header {
  position:sticky;
  top:0;
  z-index:100;
  background:rgba(13,12,10,0.95);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(201,168,76,0.12);
}
.nav-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 32px;
  max-width:var(--container);
  margin:0 auto;
  gap:16px;
}
nav.primary {
  display:flex;
  align-items:center;
  gap:32px;
}
nav.primary a {
  font-size:14px;
  font-weight:400;
  color:var(--cream-dim);
  position:relative;
  padding-bottom:4px;
  transition:color 0.2s;
  white-space:nowrap;
}
nav.primary a:hover,
nav.primary a.active { color:var(--gold); }
nav.primary a.active::after {
  content:'';
  position:absolute;
  bottom:-6px; left:0;
  width:100%; height:1px;
  background:var(--gold);
}
.nav-cta { flex-shrink:0; }
.nav-toggle {
  display:none;
  background:none;
  border:none;
  color:var(--gold);
  font-size:26px;
  cursor:pointer;
  padding:4px;
  line-height:1;
}

/* Mobile nav */
@media (max-width:900px) {
  nav.primary { display:none; }
  .nav-cta    { display:none; }
  .nav-toggle { display:block; }
  .nav-row    { padding:14px 20px; }
  .logo-img   { height:42px; }
}
@media (max-width:480px) {
  .logo-img { height:36px; }
  .nav-row  { padding:12px 16px; }
}

/* Mobile nav drawer */
.mobile-nav {
  display:none;
  flex-direction:column;
  background:rgba(13,12,10,0.98);
  border-top:1px solid var(--gold-dim);
  padding:24px 24px 32px;
  gap:0;
}
.mobile-nav.open { display:flex; }
.mobile-nav a {
  font-family:var(--font-body);
  font-size:17px;
  color:var(--cream-dim);
  padding:14px 0;
  border-bottom:1px solid rgba(201,168,76,0.1);
  display:block;
}
.mobile-nav a:last-child { border-bottom:none; }
.mobile-nav a:hover { color:var(--gold); }
.mobile-nav .btn {
  margin-top:20px;
  width:100%;
  justify-content:center;
  font-size:14px;
  padding:14px 20px;
}

/* ---------- Section spacing ---------- */
section { padding:100px 0; position:relative; }
section.tight { padding:60px 0; }
.bg-soft { background:var(--black-soft); }

.section-head {
  text-align:center;
  max-width:720px;
  margin:0 auto 56px;
}
.section-head h2 { font-size:40px; margin-bottom:16px; }
.section-head p  { color:var(--cream-faint); font-size:16px; }

hr.rule {
  border:none;
  height:1px;
  background:linear-gradient(to right, transparent, var(--gold-dim), transparent);
  margin:0;
}

/* ---------- Hero ---------- */
.hero {
  position:relative;
  min-height:780px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  overflow:hidden;
  background:var(--black-soft);
}
.hero-bg-img {
  position:absolute;
  top:0; left:0;
  width:100%; height:100%;
  object-fit:cover;
  object-position:center 60%;
  z-index:0;
  opacity:0.58;
}
.hero-overlay {
  position:absolute;
  inset:0;
  background:linear-gradient(to bottom, rgba(13,12,10,0.45) 0%, rgba(13,12,10,0.25) 50%, rgba(13,12,10,0.65) 100%);
  z-index:1;
}
.hero-content {
  position:relative;
  z-index:2;
  max-width:860px;
  padding:0 24px;
}
.hero h1 {
  font-size:62px;
  margin-bottom:24px;
  text-shadow:0 4px 30px rgba(0,0,0,0.5);
}
.hero .lede { margin:0 auto 36px; font-size:19px; color:var(--cream); }

@media (max-width:768px) {
  .hero { min-height:560px; }
  .hero h1 { font-size:36px; }
  .hero .lede { font-size:15px; }
}
@media (max-width:480px) {
  .hero { min-height:480px; }
  .hero h1 { font-size:30px; }
}

/* ---------- Stats ---------- */
.stat-row {
  display:flex;
  flex-wrap:wrap;
  border:1px solid rgba(201,168,76,0.15);
}
.stat-block {
  flex:1 1 200px;
  background:var(--black);
  padding:44px 30px;
  text-align:center;
  border-right:1px solid rgba(201,168,76,0.15);
}
.stat-block:last-child { border-right:none; }
.stat-num {
  font-family:var(--font-display);
  font-style:italic;
  font-size:52px;
  color:var(--gold);
  line-height:1;
  margin-bottom:10px;
}
.stat-label {
  font-size:12px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--cream-faint);
}
@media (max-width:600px) {
  .stat-block { border-right:none; border-bottom:1px solid rgba(201,168,76,0.15); }
  .stat-block:last-child { border-bottom:none; }
  .stat-num { font-size:40px; }
}

/* ---------- Two column split ---------- */
.split {
  display:flex;
  flex-wrap:wrap;
  gap:60px;
  align-items:center;
}
.split-text { flex:1 1 340px; }
.split-img  { flex:1 1 340px; }
.split.reverse .split-img { order:-1; }
.split-text h2 { font-size:38px; margin-bottom:20px; }
.split-text p  { margin-bottom:16px; color:var(--cream-dim); font-size:16px; }

@media (max-width:768px) {
  .split { gap:32px; }
  .split.reverse .split-img { order:0; }
}

/* ---------- Cards ---------- */
.card-grid {
  display:flex;
  flex-wrap:wrap;
  gap:24px;
}
.card-grid > * { flex:1 1 280px; }

.card {
  border:1px solid var(--gold-dim);
  padding:32px;
  background:var(--black-card);
}
.card .tag {
  display:inline-block;
  font-size:11px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  padding:4px 10px;
  background:rgba(204,34,0,0.18);
  color:#E8704D;
  margin-bottom:16px;
  font-family:var(--font-body);
}
.card h3 {
  font-family:var(--font-body);
  font-style:normal;
  color:var(--cream);
  font-size:19px;
  font-weight:500;
  margin-bottom:6px;
}
.card .meta { font-size:14px; color:var(--gold); margin-bottom:10px; }
.card p { font-size:14px; color:var(--cream-faint); }

/* ---------- Gallery grid ---------- */
.gallery-grid {
  display:flex;
  flex-wrap:wrap;
  gap:14px;
}
.gallery-grid > * { flex:1 1 220px; }

@media (max-width:480px) {
  .gallery-grid { gap:8px; }
  .gallery-grid > * { flex:1 1 140px; }
}

/* ---------- Logo strip ---------- */
.logo-strip {
  display:flex;
  justify-content:center;
  align-items:center;
  gap:56px;
  flex-wrap:wrap;
  opacity:0.85;
}
.logo-chip {
  font-family:var(--font-body);
  font-size:15px;
  color:var(--cream-faint);
  letter-spacing:0.04em;
  border-bottom:1px solid var(--gold-dim);
  padding-bottom:6px;
}

/* ---------- Testimonials ---------- */
.quote-block {
  max-width:640px;
  margin:0 auto 36px;
  text-align:center;
}
.quote-block p {
  font-family:var(--font-display);
  font-style:italic;
  font-size:24px;
  color:var(--gold);
  line-height:1.5;
  margin-bottom:14px;
}
.quote-block .attrib {
  font-family:var(--font-body);
  font-size:13px;
  color:var(--cream-faint);
  letter-spacing:0.03em;
}
@media (max-width:600px) {
  .quote-block p { font-size:19px; }
}

/* ---------- CTA banner ---------- */
.cta-banner {
  text-align:center;
  background:linear-gradient(180deg, var(--black-soft), var(--black));
  border-top:1px solid rgba(201,168,76,0.15);
  border-bottom:1px solid rgba(201,168,76,0.15);
}
.cta-banner h2 { font-size:38px; margin-bottom:28px; }
.cta-buttons {
  display:flex;
  justify-content:center;
  gap:16px;
  flex-wrap:wrap;
}
@media (max-width:600px) {
  .cta-banner h2 { font-size:28px; }
  .cta-buttons .btn { width:100%; justify-content:center; }
}

/* ---------- Form ---------- */
.ghl-form-shell {
  border:1px solid var(--gold-dim);
  padding:0;
  max-width:580px;
  margin:0 auto;
  background:transparent;
}
.form-placeholder {
  border:1px dashed var(--gold-dim);
  padding:40px 24px;
  text-align:center;
  font-size:13px;
  color:var(--gold-dim);
  letter-spacing:0.05em;
  text-transform:uppercase;
  line-height:1.8;
}

/* ---------- Footer ---------- */
footer {
  border-top:1px solid rgba(201,168,76,0.12);
  padding:64px 0 32px;
  background:var(--black-soft);
}
.footer-grid {
  display:flex;
  flex-wrap:wrap;
  gap:40px;
  margin-bottom:48px;
}
.footer-col { flex:1 1 160px; }
.footer-col h4 {
  font-family:var(--font-body);
  font-style:normal;
  color:var(--cream);
  font-size:13px;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:0.1em;
  margin-bottom:16px;
}
.footer-col a,
.footer-col p {
  display:block;
  font-size:14px;
  color:var(--cream-faint);
  margin-bottom:10px;
}
.footer-col a:hover { color:var(--gold); }
.footer-tagline {
  font-family:var(--font-display);
  font-style:italic;
  color:var(--gold);
  font-size:15px;
  margin-top:14px;
  line-height:1.6;
}
.footer-bottom {
  text-align:center;
  font-size:13px;
  color:var(--cream-faint);
  padding-top:28px;
  border-top:1px solid rgba(201,168,76,0.08);
}
.footer-bottom p { margin-bottom:5px; }

/* ---------- Image slots (pending placeholders) ---------- */
.img-slot {
  position:relative;
  background:var(--black-card);
  border:1px dashed var(--gold-dim);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.img-slot img {
  width:100%; height:100%;
  object-fit:cover;
  position:absolute; inset:0;
}
.slot-label {
  position:relative; z-index:1;
  text-align:center;
  font-family:var(--font-body);
  font-size:11px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--gold-dim);
  padding:20px;
  line-height:1.8;
}

/* ---------- Utility ---------- */
.center { text-align:center; }
.mt-40 { margin-top:40px; }
.mb-40 { margin-bottom:40px; }