/* =========================================================
   K MALL, JODHPUR — Website Stylesheet
   Design system: warm ivory, deep plum, muted gold
   ========================================================= */

:root {
  --cream: #f7f2e8;
  --cream-card: #efe6d3;
  --cream-card-soft: #f1ead9;
  --plum: #3d2536;
  --plum-dark: #2b1a26;
  --plum-line: #5a4152;
  --gold: #b8935a;
  --gold-light: #e8d9b1;
  --charcoal: #2a2320;
  --muted: #8a7f72;
  --muted-on-plum: #c9bac2;
  --hairline: #d9cfbb;
  --white: #ffffff;

  --font-serif: "Cormorant Garamond", "Georgia", serif;
  --font-sans: "Jost", "Helvetica Neue", Arial, sans-serif;

  --container: 1180px;
  --radius: 14px;
  --radius-sm: 8px;
  --shadow-soft: 0 10px 30px -12px rgba(43, 26, 38, 0.25);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--charcoal);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}
/* A wider variant for photo-heavy bands (the two Brands carousels) that
   benefit from using more of the screen than the readable text column
   the rest of the page keeps to. Scales down gracefully on laptop-size
   screens via vw so it never fights the viewport. */
.container-wide {
  max-width: min(94vw, 1720px);
}

section { position: relative; }

.eyebrow {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 14px;
}

h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: 600;
  color: var(--charcoal);
  margin: 0 0 18px;
  line-height: 1.15;
}

h2 { font-size: clamp(30px, 4vw, 42px); }
h3 { font-size: 22px; }

p { margin: 0 0 16px; color: var(--charcoal); }

.lede {
  font-size: 18px;
  color: var(--muted);
  max-width: 640px;
}

.section-head {
  max-width: 720px;
  margin: 0 auto 48px;
  text-align: center;
}
.section-head.left { text-align: left; margin: 0 0 40px; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 30px;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.03em;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.2s ease;
}
.btn-primary {
  background: var(--gold);
  color: var(--plum-dark);
}
.btn-primary:hover { background: var(--gold-light); }
.btn-outline {
  background: transparent;
  border-color: var(--gold-light);
  color: var(--gold-light);
}
.btn-outline:hover { background: rgba(232, 217, 177, 0.12); }
.btn-outline-dark {
  background: transparent;
  border-color: var(--plum);
  color: var(--plum);
}
.btn-outline-dark:hover { background: var(--plum); color: var(--gold-light); }

/* ---------- Header / Nav ---------- */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: rgba(247, 242, 232, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s ease, background 0.3s ease;
}
.site-header.scrolled {
  border-bottom-color: var(--hairline);
}
.nav-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
}
.brand-mark {
  display: flex;
  align-items: center;
  gap: 10px;
}
.brand-mark img { height: 34px; width: auto; }
.brand-mark .word {
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--plum);
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 34px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-links a {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--charcoal);
  padding: 6px 0;
  position: relative;
}
.nav-links a.active { color: var(--gold); }
.nav-cta { display: flex; align-items: center; gap: 16px; }
.nav-cta .btn { padding: 10px 22px; font-size: 12px; }

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
}
.nav-toggle span {
  width: 24px; height: 2px; background: var(--plum); display: block;
}

/* ---------- Hero ---------- */
.hero {
  background: var(--plum);
  color: var(--white);
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: 84px 0 32px;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 82% 18%, rgba(232,217,177,0.10), transparent 45%),
                     radial-gradient(circle at 8% 92%, rgba(232,217,177,0.08), transparent 40%);
  pointer-events: none;
}
.hero-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
}
.hero-tagline {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(16px, 1.7vw, 22px);
  letter-spacing: 0.01em;
  line-height: 1.4;
  color: var(--gold-light);
  max-width: 900px;
  margin: 22px 0 0;
}
.hero .lede { color: var(--muted-on-plum); font-size: 19px; max-width: 520px; }
.hero-ctas { display: flex; justify-content: center; gap: 16px; margin-top: 22px; flex-wrap: wrap; }

.hero-image {
  width: min(92vw, 1220px, calc((100vh - 250px) * 16 / 9.3));
  width: min(92vw, 1220px, calc((100svh - 250px) * 16 / 9.3));
  min-width: 260px;
  max-width: 100%;
  aspect-ratio: 16 / 9.3;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 24px 60px -16px rgba(0, 0, 0, 0.5);
  margin: 0 auto;
}
.hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- Generic section paddings ---------- */
.section { padding: 96px 0; }
.section.alt { background: var(--cream-card-soft); }
.section.dark {
  background: var(--plum);
  color: var(--white);
}
.section.dark h2, .section.dark h3 { color: var(--white); }
.section.dark p { color: var(--muted-on-plum); }

/* ---------- About ---------- */
.about-copy-centered {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}
.about-copy-centered p { font-size: 17px; color: var(--charcoal); }
.chip-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 28px; }
.chip {
  background: var(--plum);
  color: var(--gold-light);
  font-size: 13px;
  font-weight: 500;
  padding: 10px 20px;
  border-radius: 999px;
}

/* ---------- Brands: World's Best ---------- */
.world-brands-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin: 0 auto 40px;
}
.world-brands-head h2 { margin: 0; text-align: center; white-space: nowrap; }
.world-brands-head .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 1.5px solid var(--gold);
  flex: none;
}
.world-brands-head .line {
  flex: 1 1 80px;
  max-width: 160px;
  height: 1px;
  background: var(--hairline);
}
/* ---------- Brands: World's Best peek carousel ---------- */
/* Photos already carry each brand's own logo baked in, so slides are just
   a clean framed photo — no overlay treatment needed. Three slides sit
   large in the centre with the neighbouring two peeking in at the edges.
   Slide width is a plain CSS percentage (not JS-computed) so sizing is
   resolved identically by every browser's layout engine — the peek
   offset itself is still computed in JS, but only from each slide's own
   rendered offsetLeft/offsetWidth, never from container clientWidth or
   parsed computed-style values, which is what let this silently render
   at zero size in Safari before. */
.world-carousel {
  display: flex;
  align-items: center;
  gap: 14px;
}
.world-carousel-viewport {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
}
.world-carousel-track {
  display: flex;
  align-items: flex-start;
  gap: 24px;
}
/* Height is driven by the classic padding-top box (based on the slide's
   OWN width, resolved after flex-basis sizing) rather than the `aspect-ratio`
   property. Some WebKit/Safari versions don't correctly size a flex item's
   cross axis from `aspect-ratio` when the row also has (default) stretch
   alignment — the item stretches to the row's height instead, which is what
   was cropping these photos toward square. The padding-top technique has no
   such ambiguity: it works identically in every browser. */
.world-slide {
  flex: 0 0 74%;
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}
.world-slide::before {
  content: "";
  display: block;
  padding-top: 75%; /* 3 / 4 = 4:3 */
}
.world-slide img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@media (min-width: 860px) {
  .world-slide { flex-basis: 29%; }
}
.brands-divider {
  height: 1px;
  background: var(--hairline);
  margin: 64px 0 56px;
}

/* ---------- Shared carousel arrow buttons ---------- */
.carousel-arrow {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--hairline);
  background: var(--cream);
  color: var(--plum);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
  padding: 0;
}
.carousel-arrow:hover {
  background: var(--plum);
  border-color: var(--plum);
  color: var(--cream);
}
.carousel-arrow:active { transform: scale(0.94); }
.carousel-arrow--sm { width: 34px; height: 34px; }
.carousel-arrow--sm svg { width: 15px; height: 15px; }
.logo-carousel-row {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* ---------- Brands: rotating directory ---------- */
.logo-carousel {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  position: relative;
  padding: 12px 0;
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.logo-track {
  display: flex;
  align-items: center;
  gap: 76px;
  width: max-content;
}
.logo-mini-card {
  flex: 0 0 auto;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.logo-mini-card img { height: 100%; width: auto; max-width: 200px; object-fit: contain; }
/* A few source logos (Forest Essentials, Nykd by Nykaa) carry a lot of
   internal whitespace, so at the shared card height their visible mark
   reads smaller than neighbours like SAMSUNG or SKECHERS. Give those a
   taller box so the glyph itself lands at a comparable visual size. */
.logo-mini-card.logo-mini-card--lg { height: 88px; }
.logo-mini-card.logo-mini-card--lg img { max-width: 250px; }
.logo-mini-card .wordmark {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 600;
  font-size: 21px;
  color: var(--plum);
  white-space: nowrap;
}
.soon-badge-sm {
  position: absolute;
  top: -11px; right: -8px;
  background: var(--plum);
  color: var(--gold-light);
  font-size: 7px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 3px 6px;
  border-radius: 999px;
  white-space: nowrap;
}

/* ---------- Contact ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 56px;
}
.contact-info-card {
  background: var(--cream-card);
  border-radius: var(--radius);
  padding: 36px;
}
.contact-info-row {
  display: flex;
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid var(--hairline);
}
.contact-info-row:last-child { border-bottom: none; }
.contact-info-row .k {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  min-width: 92px;
  padding-top: 2px;
}
.contact-info-row .v { color: var(--plum); font-weight: 500; font-size: 15px; }
.contact-info-row .v a:hover { color: var(--gold); }
.map-embed {
  margin-top: 24px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--hairline);
}
.map-embed iframe { width: 100%; height: 220px; border: 0; display: block; }

.contact-form { display: grid; gap: 18px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { display: grid; gap: 8px; }
.field label {
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}
.field input, .field select, .field textarea {
  font-family: var(--font-sans);
  font-size: 15px;
  padding: 13px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--hairline);
  background: var(--white);
  color: var(--charcoal);
}
.field textarea { resize: vertical; min-height: 110px; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--gold);
}
.form-note { font-size: 12.5px; color: var(--muted); margin-top: -4px; }
.form-success {
  display: none;
  background: var(--cream-card);
  border: 1px solid var(--gold);
  border-radius: var(--radius-sm);
  padding: 16px 18px;
  font-size: 14px;
  color: var(--plum);
}

/* ---------- FAQ ---------- */
.faq-list {
  max-width: 760px;
  margin: 0 auto;
}
.faq-item {
  border-bottom: 1px solid var(--hairline);
}
.faq-item:first-child { border-top: 1px solid var(--hairline); }
.faq-item summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 2px;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(17px, 2vw, 20px);
  color: var(--plum);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::marker { content: ""; }
.faq-item summary .faq-icon {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--gold);
  color: var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
  transition: transform 0.2s ease;
}
.faq-item[open] summary .faq-icon { transform: rotate(45deg); }
.faq-answer {
  padding: 0 2px 22px;
  max-width: 640px;
}
.faq-answer p { margin: 0; color: var(--muted); font-size: 15px; }
.faq-answer a { color: var(--plum); font-weight: 500; border-bottom: 1px solid var(--gold); }
.faq-answer a:hover { color: var(--gold); }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--plum-dark);
  color: var(--muted-on-plum);
  padding: 64px 0 28px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--plum-line);
}
.footer-brand img { height: 44px; margin-bottom: 16px; }
.footer-brand p { color: var(--muted-on-plum); font-size: 14px; max-width: 300px; }
.footer-col h4 {
  color: var(--gold-light);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-family: var(--font-sans);
  font-weight: 600;
  margin-bottom: 18px;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.footer-col a { font-size: 14px; color: var(--muted-on-plum); }
.footer-col a:hover { color: var(--gold-light); }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 24px;
  font-size: 12.5px;
  color: var(--plum-line);
  flex-wrap: wrap;
  gap: 10px;
}
.footer-bottom a { color: var(--plum-line); }
.footer-bottom a:hover { color: var(--gold-light); }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .nav-links, .nav-cta .btn-outline-dark { display: none; }
  .nav-toggle { display: flex; }
  .contact-grid { grid-template-columns: 1fr; gap: 40px; }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .form-row { grid-template-columns: 1fr; }
  .world-brands-head .line { max-width: 60px; }
}

@media (max-width: 640px) {
  .section { padding: 64px 0; }
  .hero { padding: 140px 0 64px; }
  .world-brands-head { flex-wrap: wrap; }
  .world-brands-head h2 { white-space: normal; order: -1; flex: 0 0 100%; margin-bottom: 8px; }
  .world-brands-head .line, .world-brands-head .dot { display: none; }
  .world-carousel, .logo-carousel-row { gap: 6px; }
  .world-carousel-track { gap: 12px; }
  .carousel-arrow { width: 36px; height: 36px; }
  .carousel-arrow svg { width: 16px; height: 16px; }
}

/* Mobile nav panel */
.mobile-nav {
  position: fixed;
  inset: 0;
  background: var(--plum);
  z-index: 99;
  display: none;
  flex-direction: column;
  padding: 100px 32px 40px;
}
.mobile-nav.open { display: flex; }
.mobile-nav a {
  color: var(--white);
  font-family: var(--font-serif);
  font-size: 26px;
  padding: 14px 0;
  border-bottom: 1px solid var(--plum-line);
}
.mobile-nav .btn { margin-top: 24px; align-self: flex-start; }