/* ============================================================
   ISHWAR SAREES — cinematic luxury experience
   ============================================================ */

:root {
  /* palette — deep forest, antique gold, champagne, burgundy */
  --void-0: #040906;
  --void-1: #0d1c13;
  --green-deep: #0f1d15;
  --green: #14251b;
  --green-soft: #1d3527;
  --gold-deep: #8a6420;
  --gold: #c9a35f;
  --gold-light: #eccf8b;
  --gold-spark: #f9ecc4;
  --champagne: #d9c08a;
  --cream: #efe4c8;
  --cream-hi: #f7efdc;
  --cream-dim: rgba(238, 228, 205, 0.62);
  --burg-deep: #200910;
  --burg: #4d1a24;
  --burg-mid: #6b2b36;
  --burg-hi: #86404c;
  --sale: #c2554e;
  --ink-on-gold: #241a0c;

  --serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --serif-i: 'Cormorant Garamond', Georgia, serif;
  --sans: 'Montserrat', 'Segoe UI', Arial, sans-serif;

  --ease: cubic-bezier(0.22, 0.61, 0.21, 1);
  --ease-io: cubic-bezier(0.77, 0, 0.18, 1);

  --content-x: 6.4vw;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--green-deep);
  color: var(--cream);
  font-family: var(--sans);
  font-weight: 400;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.is-loading { overflow: hidden; }

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { background: none; border: 0; color: inherit; font: inherit; cursor: pointer; }

::selection { background: rgba(201, 163, 95, 0.35); color: var(--cream-hi); }

/* ============================================================
   CINEMA — the void, the light
   ============================================================ */
#cinema { display: none; }
.cin-ambient {
  position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 50% 56%, var(--void-1) 0%, #081109 48%, var(--void-0) 100%);
}
.cin-floor {
  position: absolute; left: 0; right: 0; top: 54%; height: 26%;
  background: radial-gradient(58% 62% at 50% 12%, rgba(214, 165, 84, 0.10) 0%, rgba(214, 165, 84, 0.03) 45%, transparent 72%);
  opacity: 0;
}
.cin-flare { position: absolute; left: 50%; top: 50%; }
.cin-flare span { position: absolute; display: block; opacity: 0; }
.flare-line {
  width: 46vw; height: 2px;
  transform: translate(-50%, -50%) scaleX(0.12);
  background: linear-gradient(90deg, transparent 0%, rgba(233, 190, 106, 0.35) 22%, #f4d98d 50%, rgba(233, 190, 106, 0.35) 78%, transparent 100%);
  box-shadow: 0 0 22px 3px rgba(233, 190, 106, 0.35);
  filter: blur(0.4px);
}
.flare-vert {
  width: 2px; height: 26vh;
  transform: translate(-50%, -50%) scaleY(0.1);
  background: linear-gradient(180deg, transparent 0%, rgba(244, 217, 141, 0.75) 50%, transparent 100%);
  box-shadow: 0 0 18px 2px rgba(233, 190, 106, 0.28);
  filter: blur(0.4px);
}
.flare-core {
  width: 14px; height: 14px; border-radius: 50%;
  transform: translate(-50%, -50%) scale(0.4);
  background: radial-gradient(circle, #fff8e2 0%, #f4d98d 38%, rgba(244, 217, 141, 0) 72%);
  box-shadow:
    0 0 18px 6px rgba(246, 224, 158, 0.55),
    0 0 60px 22px rgba(219, 168, 84, 0.30),
    0 0 140px 60px rgba(190, 138, 60, 0.16);
}

#dust { display: none; }

/* ============================================================
   CURTAINS — burgundy velvet
   ============================================================ */
#curtains {
  position: absolute; top: 0; left: 0; width: 100%; height: 100vh; height: 100svh; z-index: 40;
  overflow: hidden;
  pointer-events: none;
  visibility: visible;           /* the closed curtain is the opening backdrop */
}
.curtain {
  position: absolute; top: -2vh; bottom: -3vh; width: 56vw;
  will-change: transform;
}
.c-left  { left: -1vw; }
.c-right { right: -1vw; }

.curtain .folds { position: absolute; inset: 0; display: flex; }
.curtain .folds i {
  flex: 1 1 0; height: 100%;
  background: linear-gradient(90deg,
    #1c0509 0%, #3c1119 16%, #5b2029 34%, #713039 48%,
    #5f2530 62%, #381018 82%, #200709 100%);
  will-change: transform;
}
/* organic fold width variation */
.curtain .folds i:nth-child(1) { flex-grow: 1.18; }
.curtain .folds i:nth-child(2) { flex-grow: 0.88; }
.curtain .folds i:nth-child(3) { flex-grow: 1.06; }
.curtain .folds i:nth-child(4) { flex-grow: 0.98; }
.curtain .folds i:nth-child(5) { flex-grow: 1.24; }
.curtain .folds i:nth-child(6) { flex-grow: 0.9; }
.curtain .folds i:nth-child(7) { flex-grow: 1.1; }

/* velvet grain + vertical light */
.curtain .drape-light {
  position: absolute; inset: 0;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 0.86 0 0 0 0 0.7 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)'/%3E%3C/svg%3E"),
    linear-gradient(180deg, rgba(255, 214, 150, 0.09) 0%, rgba(255, 214, 150, 0.02) 22%, rgba(0, 0, 0, 0) 55%, rgba(8, 1, 2, 0.35) 100%);
}
.curtain .hem {
  position: absolute; left: 0; right: 0; bottom: 0; height: 16%;
  background: linear-gradient(180deg, transparent 0%, rgba(10, 2, 4, 0.5) 78%, rgba(8, 1, 3, 0.72) 100%);
}
.curtain .edge-shade { position: absolute; top: 0; bottom: 0; width: 9%; }
.c-left .edge-shade {
  right: 0;
  background: linear-gradient(270deg, rgba(5, 0, 1, 0.72) 0%, transparent 100%);
}
.c-right .edge-shade {
  left: 0;
  background: linear-gradient(90deg, rgba(5, 0, 1, 0.72) 0%, transparent 100%);
}

/* soft shadow the curtains cast on the scene */
.curtain-shadow {
  position: absolute; top: 0; bottom: 0; width: 12vw;
  opacity: 0.85; will-change: transform;
}
.cs-left  { left: 55vw; background: linear-gradient(90deg, rgba(4, 8, 5, 0.62) 0%, transparent 100%); }
.cs-right { right: 55vw; background: linear-gradient(270deg, rgba(4, 8, 5, 0.62) 0%, transparent 100%); }

/* warm light blooming through the crack */
.curtain-glow {
  position: absolute; left: 50%; top: 50%;
  width: 18vw; height: 120vh;
  transform: translate(-50%, -50%) scaleX(0.06);
  background: radial-gradient(46% 50% at 50% 50%, rgba(255, 226, 166, 0.34) 0%, rgba(255, 210, 130, 0.12) 45%, transparent 75%);
  opacity: 0;
  will-change: transform, opacity;
}

/* ============================================================
   HEADER — desktop editorial / tablet compact / mobile immersive
   ============================================================ */
:root {
  --hdr-h: clamp(104px, 12vh, 132px);
  --hdr-h-solid: clamp(76px, 8.4vh, 92px);
  --logo-h: clamp(88px, 9.8vh, 112px);
  --logo-h-solid: clamp(58px, 6.2vh, 70px);
  --hdr-x: clamp(22px, 3.2vw, 64px);
  --nav-gap: clamp(26px, 2.8vw, 54px);
  --util-gap: clamp(10px, 1.15vw, 20px);
}

#header {
  position: absolute; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  column-gap: clamp(16px, 2vw, 40px);
  height: var(--hdr-h);
  padding: 0 var(--hdr-x);
  transition: height 0.5s var(--ease), background 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
/* the logo is pinned to the exact centre of the viewport, never to the
   space left over between the navigation groups */
.brand-slot {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2; line-height: 0;
  pointer-events: none;
}
.brand-slot .brand { pointer-events: auto; }
.nav-side { display: flex; align-items: center; gap: clamp(13px, 1.4vw, 28px); }
/* Each nav group is anchored to the TRUE centre of the header, offset by half
   the logo plus one gap. Group widths differ, so anchoring them independently
   (rather than centring one cluster) is what keeps both gaps identical. */
.nav-center { display: contents; }
.logo-space { display: none; }
#header { --logo-half: calc(var(--logo-h) * 0.5925); }
.nav-l, .nav-r {
  position: absolute; top: 50%;
  transform: translateY(-50%);
  z-index: 1;
}
.nav-l { right: calc(50% + var(--logo-half) + var(--nav-gap)); }
.nav-r { left:  calc(50% + var(--logo-half) + var(--nav-gap)); }
.nav-utils { margin-left: auto; }
body.is-ready #header { position: fixed; }

#header::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(9, 16, 11, 0.62) 0%, rgba(9, 16, 11, 0.18) 58%, rgba(9, 16, 11, 0) 100%);
  opacity: 1; transition: opacity 0.5s var(--ease);
  pointer-events: none;
}
#header::after {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background: rgba(11, 21, 14, 0.9);
  backdrop-filter: blur(16px) saturate(1.05);
  -webkit-backdrop-filter: blur(16px) saturate(1.05);
  box-shadow: 0 1px 0 rgba(201, 163, 95, 0.16);
  opacity: 0; transition: opacity 0.5s var(--ease);
  pointer-events: none;
}
#header.is-solid { height: var(--hdr-h-solid); }
#header.is-solid::after { opacity: 1; }
#header.is-solid::before { opacity: 0; }
/* an open overlay always gets the solid sheet so type stays legible */
#header.has-overlay::after { opacity: 1; }
body.is-loading #header::before,
body.is-loading #header::after { opacity: 0; }

/* ---------- brand ---------- */
.brand { display: block; line-height: 0; will-change: transform; }
body.is-loading .brand { pointer-events: none; }
#brandLogo {
  display: block;
  height: var(--logo-h); width: auto;
  transition: height 0.5s var(--ease);
}
#header.is-solid #brandLogo { height: var(--logo-h-solid); }

/* ---------- primary navigation ---------- */
.nav-side a {
  position: relative;
  display: block;
  padding: 10px 0;
  font-size: clamp(10px, 0.76vw, 13px);
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(240, 232, 210, 0.96);
  white-space: nowrap;
  opacity: 0; transform: translateY(-10px);
  transition: color 0.3s var(--ease), opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
body.is-ready .nav-side a { opacity: 1; transform: none; }
.nav-side a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 2px;
  height: 1px; background: var(--gold);
  transform: scaleX(0); transform-origin: left center;
  transition: transform 0.3s var(--ease-io);
}
.nav-side a:hover, .nav-side a.is-open { color: var(--gold-light); }
.nav-side a:hover::after, .nav-side a.is-open::after { transform: scaleX(1); }
.nav-side a:nth-child(1) { transition-delay: 0.02s; }
.nav-side a:nth-child(2) { transition-delay: 0.07s; }
.nav-side a:nth-child(3) { transition-delay: 0.12s; }
.nav-side a:nth-child(4) { transition-delay: 0.17s; }
.nav-side a:nth-child(5) { transition-delay: 0.22s; }
.nav-side a:nth-child(6) { transition-delay: 0.27s; }

/* ---------- utilities ---------- */
.nav-utils { display: flex; align-items: center; gap: var(--util-gap); }
.util-wrap { position: relative; }
.util {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;         /* comfortable touch target */
  color: rgba(240, 232, 210, 0.96);
  opacity: 0; transform: translateY(-10px);
  transition: color 0.3s var(--ease), opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
body.is-ready .util { opacity: 1; transform: none; }
.util svg {
  width: 21px; height: 21px;
  fill: none; stroke: currentColor; stroke-width: 1.35;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform 0.35s var(--ease);
}
.util:hover { color: var(--gold-light); }
.util:hover svg { transform: translateY(-2px); }
.util-wrap:nth-of-type(1) .util { transition-delay: 0.34s; }
.util-wrap:nth-of-type(2) .util { transition-delay: 0.39s; }
.util-wrap:nth-of-type(3) .util { transition-delay: 0.44s; }
#searchBtn { transition-delay: 0.3s; }

.count {
  position: absolute; top: 5px; right: 3px;
  min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 999px;
  background: var(--gold); color: var(--ink-on-gold);
  font-size: 9.5px; font-weight: 500; letter-spacing: 0.02em;
  display: none; align-items: center; justify-content: center;
  transform-origin: 50% 50%;
}
.count.is-on { display: inline-flex; }

/* ---------- popovers (account / wishlist / bag) ---------- */
.pop {
  position: absolute; top: calc(100% + 12px); right: 0;
  width: 232px;
  padding: 20px 20px 18px;
  background: linear-gradient(180deg, rgba(17, 30, 20, 0.98), rgba(12, 22, 15, 0.99));
  border: 1px solid rgba(201, 163, 95, 0.34);
  box-shadow: 0 24px 60px rgba(4, 10, 6, 0.55);
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity 0.28s var(--ease), transform 0.28s var(--ease), visibility 0.28s;
  z-index: 5;
}
.pop.is-open { opacity: 1; visibility: visible; transform: none; }
.pop-head {
  font-size: 9.5px; letter-spacing: 0.34em; text-indent: 0.34em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 14px;
}
.pop a[role="menuitem"], .mini-pop a:not(.pop-cta) {
  display: block; padding: 8px 0;
  font-size: 13px; letter-spacing: 0.04em;
  color: rgba(238, 230, 208, 0.96);
  transition: color 0.28s var(--ease), transform 0.28s var(--ease);
}
.pop a[role="menuitem"]:hover { color: var(--gold-light); transform: translateX(3px); }
.pop-rule { display: block; height: 1px; margin: 14px 0; background: rgba(201, 163, 95, 0.24); }
.pop-cta {
  position: relative; display: flex; align-items: center; justify-content: center;
  height: 42px; margin-top: 4px;
  border: 1px solid rgba(201, 163, 95, 0.8);
  font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--gold-light); overflow: hidden;
}
.pop-cta .fill {
  position: absolute; inset: 0;
  background: linear-gradient(100deg, #d5b06a, #bd9351);
  transform: scaleX(0); transform-origin: left center;
  transition: transform 0.6s var(--ease-io);
}
.pop-cta .lbl { position: relative; z-index: 1; transition: color 0.4s var(--ease); }
.pop-cta:hover { color: var(--ink-on-gold); }
.pop-cta:hover .fill { transform: scaleX(1); }
.pop-alt {
  display: block; margin-top: 10px; text-align: center;
  font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(226, 214, 184, 0.84);
}
.pop-alt:hover { color: var(--gold-light); }
.pop-empty {
  font-family: var(--serif);
  font-size: 14px; line-height: 1.65; color: rgba(233, 224, 200, 0.96);
  margin-bottom: 16px;
}
.pop-empty em { font-family: var(--serif-i); font-style: italic; color: rgba(201, 163, 95, 0.96); font-size: 13px; }

/* ---------- mega menu ---------- */
.mega {
  position: absolute; left: 0; right: 0; top: 100%;
  visibility: hidden;
  z-index: 4;
}
.mega.is-open { visibility: visible; }
.mega-sheet {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(15, 27, 18, 0.985) 0%, rgba(11, 21, 14, 0.99) 100%);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-top: 1px solid rgba(201, 163, 95, 0.22);
  box-shadow: 0 30px 70px rgba(4, 10, 6, 0.5);
  transform-origin: top center;
  opacity: 0;
}
.mega-inner {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) clamp(210px, 17vw, 290px);
  gap: clamp(20px, 2.6vw, 54px);
  width: min(94vw, 1560px);
  margin: 0 auto;
  padding: clamp(30px, 3.4vh, 48px) 0 clamp(34px, 3.8vh, 54px);
}
.mg-col { min-width: 0; }
.mg-col h4 {
  font-size: 10px; letter-spacing: 0.3em; text-indent: 0.3em; text-transform: uppercase;
  font-weight: 500; color: var(--gold);
  margin-bottom: 12px;
}
.mg-col > i {
  display: block; width: 26px; height: 1px; background: rgba(201, 163, 95, 0.6);
  margin-bottom: 16px;
}
.mg-col a {
  position: relative;
  display: block; padding: 7px 0;
  font-size: 13.5px; letter-spacing: 0.035em;
  color: rgba(238, 230, 208, 0.96);
  transition: color 0.28s var(--ease), transform 0.28s var(--ease);
  width: fit-content;
}
.mg-col a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 1px;
  background: var(--gold); transform: scaleX(0); transform-origin: left center;
  transition: transform 0.32s var(--ease-io);
}
.mg-col a:hover { color: var(--gold-light); transform: translateX(3px); }
.mg-col a:hover::after { transform: scaleX(1); }

.mg-promo { position: relative; overflow: hidden; border: 1px solid rgba(201, 163, 95, 0.3); }
.mg-promo img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform 1s var(--ease);
}
.mg-promo:hover img { transform: scale(1.05); }
.mg-promo span {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(8, 14, 9, 0.1) 40%, rgba(8, 14, 9, 0.86) 100%);
}
.mg-promo b, .mg-promo em {
  position: absolute; left: 8%; z-index: 2; display: block;
}
.mg-promo b {
  bottom: 22%;
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(15px, 1.2vw, 21px); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--cream-hi);
}
.mg-promo em {
  bottom: 12%;
  font-family: var(--serif-i); font-style: italic;
  font-size: 13px; color: rgba(233, 224, 200, 0.96);
}

/* ---------- search ---------- */
.search-panel {
  position: absolute; left: 0; right: 0; top: 100%;
  visibility: hidden; z-index: 6;
  background: linear-gradient(180deg, rgba(15, 27, 18, 0.985), rgba(11, 21, 14, 0.99));
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-top: 1px solid rgba(201, 163, 95, 0.22);
  box-shadow: 0 30px 70px rgba(4, 10, 6, 0.5);
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.45s var(--ease-io), visibility 0.45s;
}
.search-panel.is-open { visibility: visible; clip-path: inset(0 0 0 0); }
.sp-inner { width: min(92vw, 1100px); margin: 0 auto; padding: clamp(28px, 3.4vh, 46px) 0 clamp(30px, 4vh, 52px); }
.sp-form { display: flex; align-items: center; gap: 16px; border-bottom: 1px solid rgba(201, 163, 95, 0.4); padding-bottom: 14px; }
.sp-ic { width: 22px; height: 22px; flex: 0 0 auto; fill: none; stroke: var(--gold); stroke-width: 1.35; stroke-linecap: round; }
.sp-form input {
  flex: 1; min-width: 0;
  background: none; border: 0; outline: none;
  font-family: var(--serif);
  font-size: clamp(19px, 2.1vw, 34px);
  color: var(--cream-hi);
  letter-spacing: 0.01em;
}
.sp-form input::placeholder { color: rgba(226, 214, 184, 0.56); }
.sp-form input::-webkit-search-cancel-button { display: none; }
.sp-close {
  flex: 0 0 auto; width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  color: rgba(238, 230, 208, 0.89);
  transition: color 0.3s var(--ease), transform 0.3s var(--ease);
}
.sp-close svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; }
.sp-close:hover { color: var(--gold-light); transform: rotate(90deg); }
.sp-body { margin-top: clamp(20px, 2.6vh, 34px); }
.sp-label {
  font-size: 9.5px; letter-spacing: 0.34em; text-indent: 0.34em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 16px;
}
.sp-list { display: flex; flex-wrap: wrap; gap: 10px 12px; }
.sp-list a {
  display: inline-flex; align-items: center; min-height: 38px;
  padding: 0 16px;
  border: 1px solid rgba(201, 163, 95, 0.32);
  font-size: 12px; letter-spacing: 0.1em;
  color: rgba(238, 230, 208, 0.96);
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.sp-list a:hover { color: var(--ink-on-gold); background: var(--gold); border-color: var(--gold); }
/* which collection a suggestion belongs to — "Sarees" lives under both Women
   and Kalakaari, and the two lead to different sections */
.sp-list a .sp-ctx {
  margin-left: 9px; padding-left: 9px;
  border-left: 1px solid rgba(201, 163, 95, 0.32);
  font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(201, 163, 95, 0.94);
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.sp-list a:hover .sp-ctx { color: rgba(40, 30, 12, 0.92); border-left-color: rgba(40, 30, 12, 0.48); }
.sp-list .sp-none {
  font-family: var(--serif-i); font-style: italic;
  color: rgba(226, 214, 184, 0.74); font-size: 15px; border: 0; padding: 0;
}

/* ---------- hamburger ---------- */
.menu-btn {
  display: none;
  width: 44px; height: 44px;
  position: relative; z-index: 130;
  opacity: 0; pointer-events: none;
  transition: opacity 0.7s var(--ease) 0.28s;
}
body.is-ready .menu-btn { opacity: 1; pointer-events: auto; }
.menu-btn span {
  position: absolute; left: 11px; width: 22px; height: 1.5px;
  background: var(--cream);
  transition: transform 0.42s var(--ease-io), top 0.42s var(--ease-io), opacity 0.3s;
}
.menu-btn span:nth-child(1) { top: 18px; }
.menu-btn span:nth-child(2) { top: 25px; }
.menu-btn.is-open span:nth-child(1) { top: 21.5px; transform: rotate(45deg); }
.menu-btn.is-open span:nth-child(2) { top: 21.5px; transform: rotate(-45deg); }

/* ============================================================
   MOBILE / TABLET NAVIGATION DRAWER
   ============================================================ */
#mobileNav {
  position: fixed; inset: 0; z-index: 120;
  display: flex; flex-direction: column;
  background:
    radial-gradient(120% 70% at 12% 0%, rgba(32, 58, 40, 0.96) 0%, transparent 62%),
    linear-gradient(168deg, #12261a 0%, #0c1810 62%, #0a140d 100%);
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  opacity: 0; visibility: hidden;
  transition: opacity 0.42s var(--ease), visibility 0.42s;
}
#mobileNav.is-open { opacity: 1; visibility: visible; }

.mn-top {
  flex: 0 0 auto;
  display: grid; grid-template-columns: 44px 1fr 44px; align-items: center;
  gap: 10px;
  height: 84px;
  padding: 0 clamp(14px, 4vw, 26px);
  border-bottom: 1px solid rgba(201, 163, 95, 0.16);
}
.mn-back, .mn-close {
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  color: rgba(238, 230, 208, 0.96);
  transition: color 0.3s var(--ease), opacity 0.3s var(--ease);
}
.mn-back svg { width: 20px; height: 14px; }
.mn-close svg { width: 19px; height: 19px; }
.mn-back svg, .mn-close svg { fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.mn-back { opacity: 0; pointer-events: none; }
#mobileNav.has-back .mn-back { opacity: 1; pointer-events: auto; }
.mn-back:hover, .mn-close:hover { color: var(--gold-light); }
.mn-title {
  text-align: center; min-width: 0;
  font-size: 11px; letter-spacing: 0.3em; text-indent: 0.3em; text-transform: uppercase;
  color: var(--cream-hi);
}
.mn-emblem { height: 46px; width: auto; display: inline-block; vertical-align: middle; }

.mn-stage { position: relative; flex: 1 1 auto; overflow: hidden; }
.mn-panel {
  position: absolute; inset: 0;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: clamp(18px, 4vh, 34px) clamp(20px, 6vw, 46px) 24px;
}
.mn-panel a, .mn-panel button {
  position: relative;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  width: 100%;
  min-height: 56px;
  padding: 6px 0;
  text-align: left;
  color: var(--cream);
  border-bottom: 1px solid rgba(201, 163, 95, 0.13);
}
.mn-panel .mn-l0 {
  font-family: var(--serif);
  font-size: clamp(25px, 6.4vw, 34px);
  letter-spacing: 0.015em;
  min-height: 62px;
}
.mn-panel .mn-l1 {
  font-family: var(--serif);
  font-size: clamp(20px, 5.2vw, 26px);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.mn-panel .mn-l2 {
  font-size: clamp(14px, 3.9vw, 16px);
  letter-spacing: 0.09em;
  color: rgba(238, 230, 208, 0.96);
}
.mn-panel .chev { flex: 0 0 auto; width: 15px; height: 15px; color: var(--gold); }
.mn-panel .chev svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.mn-panel a:active, .mn-panel button:active { color: var(--gold-light); }
.mn-lead {
  display: block !important;
  border: 0 !important; min-height: 0 !important;
  font-size: 9.5px !important; letter-spacing: 0.34em; text-indent: 0.34em; text-transform: uppercase;
  color: var(--gold) !important;
  margin-bottom: 10px; padding: 0 !important;
}

.mn-foot {
  flex: 0 0 auto;
  padding: 16px clamp(20px, 6vw, 46px) calc(20px + env(safe-area-inset-bottom));
  border-top: 1px solid rgba(201, 163, 95, 0.16);
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
}
.mn-foot .mn-acct {
  font-size: 10.5px; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--gold-light);
  min-height: 44px; display: inline-flex; align-items: center;
}
.mn-foot p { font-size: 9px; letter-spacing: 0.26em; text-transform: uppercase; color: rgba(226, 214, 184, 0.64); }

/* ============================================================
   HEADER — TABLET (compact luxury: menu · logo · utilities)
   ============================================================ */
@media (max-width: 1199px) {
  :root {
    --hdr-h: clamp(92px, 10.5vh, 108px);
    --hdr-h-solid: clamp(72px, 8vh, 84px);
    --logo-h: clamp(74px, 8.4vh, 92px);
    --logo-h-solid: clamp(56px, 6vh, 66px);
  }
  .menu-btn { display: block; }
  .nav-center { display: none; }
  .mega { display: none; }
  #acctWrap { display: none; }          /* account lives in the drawer on touch layouts */
  .pop { right: -6px; }
}

/* ============================================================
   HEADER — MOBILE (immersive: menu · logo · search + bag)
   ============================================================ */
@media (max-width: 767px) {
  :root {
    --hdr-h: 84px;
    --hdr-h-solid: 68px;
    --logo-h: 64px;
    --logo-h-solid: 50px;
    --hdr-x: 14px;
    --util-gap: 2px;
  }
  #header {
    height: calc(var(--hdr-h) + env(safe-area-inset-top));
    padding-top: env(safe-area-inset-top);
    padding-left: max(var(--hdr-x), env(safe-area-inset-left));
    padding-right: max(var(--hdr-x), env(safe-area-inset-right));
  }
  #header.is-solid { height: calc(var(--hdr-h-solid) + env(safe-area-inset-top)); }
  #wishWrap { display: none; }          /* mobile keeps only search + bag */
  .search-panel { position: fixed; top: 0; bottom: 0; height: 100dvh; }
  .sp-inner { padding-top: calc(28px + env(safe-area-inset-top)); }
  .sp-form input { font-size: 20px; }
  .pop { position: fixed; left: 14px; right: 14px; top: auto; bottom: 14px; width: auto; }
  .mn-top { height: 72px; }
  .mn-emblem { height: 40px; }
}

@media (max-width: 360px) {
  :root { --logo-h: 56px; --hdr-h: 78px; }
  .mn-panel .mn-l0 { font-size: 23px; min-height: 56px; }
}

/* ============================================================
   HERO
   ============================================================ */
#hero {
  position: relative;
  height: 100vh; height: 100svh;
  overflow: hidden;
  background: var(--green-deep);
  touch-action: pan-y;
}

.slide {
  position: absolute; inset: 0;
  visibility: hidden;
  will-change: transform;
}
.slide.is-active { visibility: visible; }

.slide .img-wrap {
  position: absolute; inset: 0;
  overflow: hidden;
}
.slide picture { position: absolute; inset: 0; display: block; }
.slide img {
  width: 100%; height: 100%;
  object-fit: cover;
  will-change: transform;
}
.s-women img { object-position: 62% 30%; }
.s-men img   { object-position: 58% 30%; }

.slide .veil {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(6, 12, 8, 0.55) 0%, rgba(6, 12, 8, 0.25) 100%);
  opacity: 0;
  pointer-events: none;
  will-change: opacity;
}

/* ------- slide content ------- */
.slide-content {
  position: absolute;
  left: var(--content-x);
  top: 26.4vh;
  max-width: 46vw;
  z-index: 5;
}
.s-men .slide-content { top: 29.8vh; }

.eyebrow {
  display: flex; align-items: center;
  gap: 1.4vw;
  font-size: clamp(10px, 0.72vw, 14px);
  font-weight: 400;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: #d6c496;
  margin-bottom: 2.2vh;
}
.eb-line {
  display: block; width: clamp(34px, 3.4vw, 64px); height: 1px;
  background: rgba(201, 163, 95, 0.85);
  transform-origin: left center;
}

.headline {
  font-family: var(--serif);
  font-weight: 400;
  color: #f0e5c6;
  line-height: 1.06;
  letter-spacing: 0.004em;
  font-size: clamp(38px, 4.35vw, 150px);
  margin-bottom: 2.6vh;
  text-wrap: balance;
}
.hl-men {
  font-weight: 500;
  text-transform: uppercase;
  font-size: clamp(33px, 3.94vw, 136px);
  letter-spacing: 0.012em;
  line-height: 1.12;
  color: #f0ebdd;
}

.tagline {
  font-family: var(--serif-i);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(19px, 1.55vw, 36px);
  color: #eadfc0;
  margin-bottom: 3.6vh;
}
.subcopy {
  font-family: var(--sans);
  font-weight: 400;
  font-size: clamp(14px, 1.12vw, 25px);
  line-height: 1.68;
  color: #e8e2d4;
  max-width: 28em;
  margin-bottom: 3.6vh;
}

/* staged entrance of content (class-driven so hover styles never fight inline styles) */
.slide-content .eyebrow,
.slide-content .headline,
.slide-content .tagline,
.slide-content .subcopy,
.slide-content .cta-row {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}
.slide-content .eb-line { transform: scaleX(0); transition: transform 1s var(--ease-io) 0.35s; }
.slide-content.in .eyebrow,
.slide-content.in .headline,
.slide-content.in .tagline,
.slide-content.in .subcopy,
.slide-content.in .cta-row { opacity: 1; transform: translateY(0); }
.slide-content.in .eb-line { transform: scaleX(1); }
.slide-content.in .eyebrow  { transition-delay: 0.05s; }
.slide-content.in .headline { transition-delay: 0.22s; }
.slide-content.in .tagline,
.slide-content.in .subcopy  { transition-delay: 0.42s; }
.slide-content.in .cta-row  { transition-delay: 0.58s; }
/* exit — leaves with the image, same direction, no delays */
.slide-content.out .eyebrow,
.slide-content.out .headline,
.slide-content.out .tagline,
.slide-content.out .subcopy,
.slide-content.out .cta-row {
  opacity: 0; transform: translateX(var(--exit-x, -34px));
  transition: opacity 0.55s var(--ease-io), transform 0.55s var(--ease-io);
}

/* ------- CTA buttons ------- */
.cta-row {
  display: flex; align-items: center;
  gap: clamp(12px, 1vw, 22px);
  flex-wrap: wrap;
}
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  height: clamp(44px, 3vw, 56px);
  padding: 0 clamp(20px, 1.9vw, 38px);
  font-size: clamp(10px, 0.75vw, 13.5px);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  overflow: hidden;
  white-space: nowrap;
}
.btn .fill {
  position: absolute; inset: 0;
  background: linear-gradient(100deg, #d5b06a 0%, #c9a35f 55%, #bd9351 100%);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.85s var(--ease-io);
  will-change: transform;
}
.btn .lbl, .btn .arrow { position: relative; z-index: 1; transition: color 0.5s var(--ease); }
.btn .arrow {
  width: clamp(22px, 1.7vw, 30px);
  margin-left: 1.1em;
  display: inline-flex;
  transition: color 0.5s var(--ease), transform 0.45s var(--ease);
}
.btn .arrow svg {
  width: 100%;
  fill: none; stroke: currentColor; stroke-width: 1.2;
  stroke-linecap: round; stroke-linejoin: round;
}
.btn:hover .arrow { transform: translateX(5px); }

/* primary: gold, filled on entrance (left -> right), drains L->R on hover */
.btn-primary { border: 1px solid rgba(201, 163, 95, 0.95); color: var(--cream); }
.slide-content.in .btn-primary .fill { transform: scaleX(1); transition-delay: 0.85s; }
.slide-content.in .btn-primary { color: var(--ink-on-gold); transition: opacity .9s var(--ease), transform .9s var(--ease), color 0.5s var(--ease) 1.05s; }
.slide-content.in .btn-primary:hover { color: var(--gold-light); transition-delay: 0s; }
.slide-content.in .btn-primary:hover .fill { transform: scaleX(0); transform-origin: right center; transition-delay: 0s; }

/* ghost: hairline, fills gold L->R on hover */
.btn-ghost { border: 1px solid rgba(240, 230, 208, 0.55); color: #eee5cd; }
.btn-ghost:hover { color: var(--ink-on-gold); border-color: rgba(201, 163, 95, 0.95); }
.btn-ghost:hover .fill { transform: scaleX(1); }

/* ------- hero furniture ------- */
.hero-rail {
  position: absolute;
  right: 3.6vw; top: 21.5vh;
  z-index: 5;
  text-align: center;
  opacity: 0; transform: translateY(18px);
  transition: opacity 1s var(--ease) 0.2s, transform 1s var(--ease) 0.2s;
}
body.is-ready .hero-rail { opacity: 1; transform: none; }
.hero-rail p {
  display: flex; flex-direction: column; gap: 1.5vh;
  font-size: clamp(9px, 0.66vw, 13px);
  font-weight: 400;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(244, 236, 216, 0.96);
}
.rail-line {
  display: block; width: 1px; height: 7.2vh;
  margin: 2.6vh auto 0;
  background: rgba(244, 236, 216, 0.75);
  transform-origin: top center;
}

.hero-indicators {
  position: absolute;
  left: 3.6vw; bottom: 5.8vh;
  z-index: 5;
  display: flex; align-items: center;
  gap: clamp(16px, 1.6vw, 30px);
  opacity: 0;
  transition: opacity 1s var(--ease) 0.35s;
}
body.is-ready .hero-indicators { opacity: 1; }
.ind {
  display: inline-flex; align-items: center;
  font-size: clamp(11px, 0.78vw, 14px);
  letter-spacing: 0.14em;
  color: rgba(239, 228, 200, 0.69);
  transition: color 0.5s var(--ease);
  padding: 6px 0;
}
.ind .bar {
  display: block;
  width: 0; height: 1px;
  margin-left: 0;
  background: var(--gold);
  transition: width 0.9s var(--ease-io), margin 0.9s var(--ease-io);
}
.ind.is-on { color: var(--gold-light); }
.ind.is-on .bar { width: clamp(48px, 5vw, 92px); margin-left: 14px; }
.ind:hover { color: var(--gold-light); }

.hero-desc {
  position: absolute;
  right: 3.6vw; bottom: 6vh;
  z-index: 5;
  font-size: clamp(9px, 0.68vw, 13px);
  font-weight: 400;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(244, 236, 216, 0.96);
  opacity: 0;
  transition: opacity 1s var(--ease) 0.45s;
}
body.is-ready .hero-desc { opacity: 1; }
.hero-desc span { display: block; transition: opacity 0.6s var(--ease); }
.hero-desc .hd-men { position: absolute; right: 0; top: 0; opacity: 0; }
#hero.show-men .hd-women { opacity: 0; }
#hero.show-men .hd-men { opacity: 1; }

/* ============================================================
   SCROLL REVEALS
   ============================================================ */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

/* ============================================================
   SKIP
   ============================================================ */
#skipIntro {
  position: absolute;
  right: 4vw; bottom: 4.4vh;
  z-index: 110;
  font-size: 10px; letter-spacing: 0.42em; text-indent: 0.42em;
  text-transform: uppercase;
  color: rgba(238, 228, 205, 0.69);
  padding: 8px 2px;
  border-bottom: 1px solid rgba(238, 228, 205, 0.28);
  opacity: 0; visibility: hidden;
  transition: opacity 0.8s var(--ease), color 0.4s, border-color 0.4s, visibility 0.8s;
}
#skipIntro.is-shown { opacity: 1; visibility: visible; }
#skipIntro:hover { color: var(--gold-light); border-color: var(--gold); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1100px) {
  .slide-content { max-width: 66vw; }
  .headline { font-size: clamp(40px, 6.4vw, 92px); }
  .hl-men { font-size: clamp(34px, 5.6vw, 80px); }
  .hero-rail { display: none; }
}

@media (max-width: 700px) {
  :root { --content-x: 7.5vw; }


  /* portrait art direction — the mobile plates are composed for this frame */
  .s-women img { object-position: 69% 22%; }
  .s-men img   { object-position: 55% 25%; }
  .slide .veil { opacity: 1 !important;
    background: linear-gradient(180deg, rgba(6,12,8,0.30) 0%, rgba(6,12,8,0.02) 34%, rgba(6,12,8,0.18) 58%, rgba(7,13,9,0.78) 100%); }

  .slide-content { top: auto; bottom: calc(13.5vh + env(safe-area-inset-bottom)); max-width: 86vw; }
  .s-men .slide-content { top: auto; bottom: calc(13.5vh + env(safe-area-inset-bottom)); }

  .eyebrow { margin-bottom: 1.7vh; letter-spacing: 0.28em; font-size: 10px; }
  .eb-line { width: 34px; }
  .headline { font-size: clamp(36px, 11vw, 48px); margin-bottom: 1.6vh; line-height: 1.08; }
  .hl-men { font-size: clamp(28px, 8.6vw, 40px); line-height: 1.16; }
  .tagline { font-size: clamp(18px, 5.4vw, 22px); margin-bottom: 2.8vh; }
  .subcopy { margin-bottom: 2.8vh; font-size: 14px; line-height: 1.6; max-width: 94%; }
  .cta-row { flex-direction: column; align-items: flex-start; gap: 12px; }
  .btn { height: 48px; padding: 0 22px; font-size: 10.5px; width: min(70vw, 268px); justify-content: space-between; }

  .hero-indicators { left: var(--content-x); bottom: calc(4.6vh + env(safe-area-inset-bottom)); }
  .ind.is-on .bar { width: 44px; }
  .hero-desc { display: none; }

  /* velvet reads broader on a narrow stage */
  .curtain .folds i:nth-child(6), .curtain .folds i:nth-child(7) { display: none; }
  .curtain-glow { width: 40vw; }

  #skipIntro { right: 7vw; bottom: calc(4.2vh + env(safe-area-inset-bottom)); }

  #story { padding: 13vh 8vw 11vh; }
  .st-rule { height: 7vh; margin: 4vh auto; }
  .col-row { grid-template-columns: 38px 1fr auto; padding: 2.5vh 0; }
  footer { padding: 9vh 8vw calc(4vh + env(safe-area-inset-bottom)); }
}

/* touch devices — press feedback instead of hover */
@media (hover: none) {
  .btn { transition: transform 0.25s var(--ease); }
  .btn:active { transform: scale(0.98); }
  .btn:active .arrow { transform: translateX(4px); }
}
/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.2s !important;
    transition-delay: 0s !important;
  }
  #cinema, #curtains, #dust, #skipIntro { display: none !important; }
  .reveal { opacity: 1; transform: none; }
}







/* ============================================================
   SHARED SECTION LANGUAGE
   ============================================================ */
:root {
  --g-explore: #f1ead9;
  --g-women: #2c4a35;
  --g-kala: #1a2f22;
  --g-best: #2e4c38;
  --g-craft: #1c2e1b;
  --g-story: #17281c;
  --g-footer: #1d2e1c;
  --ink: #2b2b25;
}

section { position: relative; }

.sec-head {
  position: relative; z-index: 4;
  text-align: center;
  max-width: 900px;
  margin: 0 auto;
  padding: 0 6vw;
}
.sh-eyebrow {
  font-size: clamp(10px, 0.72vw, 14px);
  letter-spacing: 0.42em; text-indent: 0.42em;
  text-transform: uppercase;
  font-weight: 400;
  color: var(--gold);
  margin-bottom: 2.4vh;
}
.sh-title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(30px, 3.4vw, 62px);
  letter-spacing: 0.04em;
  line-height: 1.16;
  text-transform: uppercase;
  color: var(--cream-hi);
}
.sh-orna {
  position: relative;
  display: block; width: clamp(150px, 13vw, 220px); height: 9px;
  margin: 2.6vh auto;
}
.sh-orna::before, .sh-orna::after {
  content: ""; position: absolute; top: 4px; width: calc(50% - 16px); height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201, 163, 95, 0.85));
}
.sh-orna::before { left: 0; }
.sh-orna::after { right: 0; transform: scaleX(-1); }
.sh-orna b { position: absolute; left: 50%; top: 1px; width: 7px; height: 7px; transform: translateX(-50%) rotate(45deg); background: var(--gold); }
.sh-sub {
  font-family: var(--serif);
  font-size: clamp(15px, 1.15vw, 22px);
  color: rgba(240, 232, 212, 0.96);
  letter-spacing: 0.02em;
}
.sh-sub.sh-caps {
  font-family: var(--sans);
  font-size: clamp(10px, 0.72vw, 13px);
  letter-spacing: 0.34em; text-indent: 0.34em;
  text-transform: uppercase;
  color: #8d867a;
}
.sh-dark .sh-title { color: var(--ink); }
.sh-dark .sh-eyebrow { color: #a2916f; }

/* outlined gold CTA — fill travels left to right, button never moves */
.cta {
  position: relative;
  display: inline-flex; align-items: center;
  height: clamp(42px, 3vw, 54px);
  padding: 0 clamp(18px, 1.6vw, 30px);
  border: 1px solid rgba(201, 163, 95, 0.8);
  font-size: clamp(10px, 0.7vw, 12.5px);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-light);
  overflow: hidden;
  white-space: nowrap;
}
.cta .fill {
  position: absolute; inset: 0;
  background: linear-gradient(100deg, #d5b06a, #c9a35f 60%, #bd9351);
  transform: scaleX(0); transform-origin: left center;
  transition: transform 0.7s var(--ease-io);
}
.cta .lbl, .cta .arrow { position: relative; z-index: 1; transition: color 0.45s var(--ease); }
.cta .arrow { width: clamp(22px, 1.6vw, 28px); margin-left: 1em; display: inline-flex; transition: color 0.45s var(--ease), transform 0.4s var(--ease); }
.cta .arrow svg { width: 100%; fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.cta:hover { color: var(--ink-on-gold); }
.cta:hover .fill { transform: scaleX(1); }
.cta:hover .arrow { transform: translateX(5px); }

/* vertical side rails */
.rail {
  position: absolute; top: 12vh; z-index: 4;
  display: flex; flex-direction: column; gap: 1.6vh;
}
.rail-left { left: 3vw; align-items: flex-start; }
.rail-right { right: 3vw; align-items: flex-end; }
.rail p { display: flex; flex-direction: column; gap: 1vh; }
.rail-left p { align-items: flex-start; }
.rail-right p { align-items: flex-end; }
.rail span {
  font-size: clamp(9px, 0.62vw, 11.5px);
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: rgba(222, 209, 176, 0.96);
  white-space: nowrap;
}
.rail .lotus { width: clamp(26px, 2vw, 38px); }
.rail-rule { display: block; width: 1px; height: 9vh; background: linear-gradient(180deg, rgba(201,163,95,.7), transparent); }
.lotus { fill: none; stroke: var(--gold); stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }

/* corner descriptors */
.corner {
  position: absolute; bottom: 5vh; z-index: 4;
  display: flex; flex-direction: column; gap: 0.9vh;
}
.corner-bl { left: 3vw; align-items: flex-start; }
.corner-br { right: 3vw; align-items: flex-end; }
.corner span {
  font-size: clamp(9px, 0.62vw, 11.5px);
  letter-spacing: 0.34em; text-transform: uppercase;
  color: rgba(222, 209, 176, 0.94);
}
.corner .lotus { width: 30px; margin-bottom: 0.6vh; }
.corner-orna { display: block; width: clamp(90px, 8vw, 150px); height: 1px; margin-bottom: 1vh;
  background: linear-gradient(90deg, transparent, rgba(201,163,95,.8)); position: relative; }
.corner-orna::after { content: ""; position: absolute; right: 26%; top: -3px; width: 6px; height: 6px; transform: rotate(45deg); background: var(--gold); }

/* ============================================================
   S02 · EXPLORE — one continuous green scene, two editorial cards
   ============================================================ */
#explore { background: linear-gradient(180deg, #31503a 0%, #2a4531 55%, #223a28 100%); overflow: hidden; }
.x-stage {
  position: relative;
  aspect-ratio: 1672 / 941;
  container-type: inline-size;
  overflow: hidden;
}
.x-stage::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 9%; z-index: 2;
  background: linear-gradient(180deg, rgba(10, 15, 9, 0.5), rgba(10, 15, 9, 0)); pointer-events: none; }
.x-bgwrap { position: absolute; inset: 0; z-index: 0; display: block; overflow: hidden; }
.x-bg { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; will-change: transform; }

.x-head { position: absolute; left: 0; right: 0; top: 6.4%; z-index: 3; text-align: center; }
.x-eyebrow {
  display: flex; align-items: center; justify-content: center;
  gap: 1.55cqw;
  font-size: clamp(9px, 1.08cqw, 19px);
  letter-spacing: 0.44em; text-indent: 0.44em;
  text-transform: uppercase;
  font-weight: 400;
  color: #dcd0ae;
}
.x-eyebrow i { display: block; width: 8.7cqw; height: 1px; background: rgba(214, 190, 140, 0.75); transform-origin: center; }
.x-head h2 {
  margin-top: 1.6cqw;
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(21px, 3.44cqw, 60px);
  letter-spacing: 0.045em;
  text-transform: uppercase;
  color: #efe8d4;
}
.x-sub {
  margin-top: 0.9cqw;
  font-family: var(--serif-i); font-style: italic;
  font-size: clamp(12px, 1.72cqw, 30px);
  color: #e7d9b6;
}

.x-card {
  position: absolute;
  top: 29.44%; height: 55.58%;
  border-radius: clamp(8px, 1cqw, 17px);
  border: 1px solid rgba(206, 170, 100, 0.8);
  overflow: hidden;
  container-type: inline-size;
  box-shadow: 0 2.2cqw 4.5cqw rgba(6, 11, 7, 0.5);
  transition: border-color 0.6s var(--ease), box-shadow 0.6s var(--ease);
  will-change: transform;
}
.x-women { left: 3.89%; width: 45.75%; }
.x-kala { left: 50.72%; width: 45.69%; }
.x-card:hover { border-color: rgba(236, 207, 139, 1); box-shadow: 0 2.6cqw 5.4cqw rgba(6, 11, 7, 0.65); }
.x-card > img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--ease);
  will-change: transform;
}
.x-card:hover > img { transform: scale(1.035) translateX(-0.5%); }
.x-card::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, rgba(9, 14, 10, 0.28) 0%, rgba(9, 14, 10, 0) 46%);
  opacity: 0.9; transition: opacity 0.6s var(--ease); }
.x-card:hover::after { opacity: 0.55; }

.x-copy { position: absolute; z-index: 2; left: 5.6cqw; top: 10.6cqw; max-width: 44cqw; }
.x-copy h3 {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(21px, 7.2cqw, 58px);
  line-height: 1;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  color: #f3edda;
}
.x-rule { display: block; width: 5.9cqw; height: 1px; background: #c9a35f; margin: 2.7cqw 0 3.8cqw 0.3cqw; }
.x-copy p {
  font-family: var(--serif);
  font-size: clamp(12.5px, 3.42cqw, 27px);
  line-height: 1.52;
  color: #efe6cd;
}
.x-copy p em { font-family: var(--serif-i); font-style: italic; }
.x-copy .cta {
  margin-top: 4.5cqw;
  height: 6.9cqw;
  padding: 0 2.9cqw;
  font-size: 1.85cqw;
  letter-spacing: 0.24em;
  border-color: rgba(206, 170, 100, 0.96);
}
.x-copy .cta .arrow { width: 3.1cqw; margin-left: 1.6cqw; }

.x-bridge { position: relative; height: clamp(90px, 14vh, 170px); margin-top: -1px;
  background: linear-gradient(180deg, rgba(34, 30, 18, 0) 0%, rgba(28, 38, 20, 0.72) 45%, #16240f 100%); }
/* ============================================================
   S03 · NEW COLLECTIONS FOR WOMEN — arched campaign panels
   ============================================================ */
#women-new {
  background: linear-gradient(170deg, #1e2817 0%, #223019 55%, #16200f 100%);
  padding: clamp(80px, 12vh, 150px) 0 clamp(70px, 10vh, 120px);
  overflow: hidden;
  isolation: isolate;
}
/* the supplied sunlit environment, present at every breakpoint */
.w-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.w-bg picture { position: absolute; inset: 0; display: block; }
.w-bg img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 50%;
  will-change: transform;
}
.w-bg-scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(12, 20, 12, 0.68) 0%, rgba(12, 20, 12, 0.22) 26%, rgba(12, 20, 12, 0.10) 52%, rgba(10, 17, 10, 0.42) 100%),
    radial-gradient(58% 42% at 50% 16%, rgba(8, 14, 9, 0.42), transparent 70%);
}
#women-new > *:not(.w-bg) { position: relative; z-index: 2; }
#women-new .sec-head { margin-bottom: clamp(44px, 7vh, 90px); }
.w-track {
  position: relative; z-index: 3;
  display: flex; justify-content: center;
  gap: clamp(16px, 1.6vw, 30px);
  width: min(92vw, 1400px);
  margin: 0 auto;
  outline: none;
}
.w-card {
  position: relative;
  flex: 1 1 0;
  max-width: 430px;
  aspect-ratio: 397 / 551;
  border-radius: 999px 999px 16px 16px;
  border: 1px solid rgba(214, 178, 110, 0.65);
  overflow: hidden;
  isolation: isolate;
  transition: border-color 0.5s var(--ease), box-shadow 0.6s var(--ease);
  box-shadow: 0 26px 60px rgba(10, 18, 12, 0.35);
}
.w-card:hover, .w-card.is-focus { border-color: rgba(236, 207, 139, 0.95); box-shadow: 0 34px 80px rgba(10, 18, 12, 0.5); }
.w-card.is-focus > img { transform: scale(1.04); }
.w-card > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); will-change: transform; }
.w-card:hover > img { transform: scale(1.04); }
.w-scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(10, 16, 11, 0) 40%, rgba(10, 16, 11, 0.55) 64%, rgba(7, 11, 8, 0.94) 100%); }
.w-caption { position: absolute; z-index: 2; left: 6%; right: 6%; bottom: 5.5%; text-align: center; }
.w-kicker {
  font-size: clamp(9px, 0.66vw, 12px);
  letter-spacing: 0.4em; text-indent: 0.4em; text-transform: uppercase;
  color: var(--gold-light);
  margin-bottom: 1.1vh;
}
.w-caption h3 {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(24px, 2.1vw, 38px);
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--cream-hi);
  margin-bottom: 0.8vh;
}
.w-line { font-family: var(--serif); font-size: clamp(13px, 1vw, 18px); color: rgba(240, 232, 212, 0.95); margin-bottom: 2vh; }
.w-caption .cta { height: clamp(38px, 2.7vw, 48px); padding: 0 clamp(16px, 1.4vw, 26px); }
.w-nav {
  position: relative; z-index: 3;
  display: flex; align-items: center; justify-content: center;
  gap: clamp(18px, 2vw, 34px);
  margin: clamp(30px, 5vh, 60px) auto 0;
}
.w-btn {
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid rgba(222, 209, 176, 0.55);
  color: var(--cream);
  display: inline-flex; align-items: center; justify-content: center;
  transition: border-color 0.4s, color 0.4s, background 0.4s;
}
.w-btn svg { width: 40%; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.w-btn:hover { border-color: var(--gold); color: var(--gold-light); background: rgba(201, 163, 95, 0.08); }
.w-count { display: flex; align-items: center; gap: 14px; font-size: 12.5px; letter-spacing: 0.18em; color: rgba(238, 228, 205, 0.96); }
.w-count i { display: block; width: 44px; height: 1px; background: rgba(201, 163, 95, 0.7); }
.w-floor { position: relative; margin-top: clamp(28px, 4.5vh, 56px); }
.w-floor img { width: 100%; height: clamp(90px, 16vh, 180px); object-fit: cover; object-position: 50% 30%; display: block;
  -webkit-mask-image: linear-gradient(transparent, #000 34%); mask-image: linear-gradient(transparent, #000 34%); }

/* ============================================================
   S04 · KALAKAARI — one room, replicated from the reference.
   Every position is a percentage of the 1536x1024 source frame,
   every word is live HTML.
   ============================================================ */
#kalakaari { background: #16240f; overflow: hidden; }
.k-stage {
  position: relative;
  aspect-ratio: 1536 / 1024;
  container-type: inline-size;
  overflow: hidden;
}
.k-room { position: absolute; inset: 0; z-index: 0; }
.k-room picture { position: absolute; inset: 0; display: block; }
.k-room img { width: 100%; height: 100%; object-fit: cover; will-change: transform; }

/* ---------- side rails ---------- */
.k-rail { position: absolute; z-index: 3; display: flex; flex-direction: column; }
.k-rail p { display: flex; flex-direction: column; gap: 1.15cqw; }
.k-rail span {
  font-size: clamp(8px, 0.72cqw, 13px);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(226, 214, 184, 0.96);
  white-space: nowrap;
}
.k-rail-line { display: block; width: 1px; background: linear-gradient(180deg, rgba(201,163,95,.75), transparent); }
.k-rail-l { left: 2.08%; top: 3.4%; align-items: flex-start; }
.k-rail-l .k-rail-line { height: 10.2cqw; margin-left: 2.3cqw; }
.k-rail-l .lotus { width: 2.6cqw; margin: 2.4cqw 0 1.9cqw; }
.k-rail-r { right: 2.67%; top: 3.4%; align-items: flex-end; text-align: right; }
.k-rail-r .k-rail-line { height: 3.2cqw; margin-right: 0; }
.k-rail-r p { margin-top: 1.1cqw; align-items: flex-end; }

/* ---------- heading ---------- */
.k-head { position: absolute; z-index: 3; left: 0; right: 0; top: 4.6%; text-align: center; }
.k-eyebrow {
  font-size: clamp(8px, 0.84cqw, 15px);
  letter-spacing: 0.46em; text-indent: 0.46em;
  text-transform: uppercase;
  color: #cbb684;
}
.k-head h2 {
  margin-top: 1.05cqw;
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(20px, 2.92cqw, 52px);
  letter-spacing: 0.028em;
  line-height: 1;
  text-transform: uppercase;
  color: #f2ecdc;
}
.k-orna { position: relative; display: block; width: 11.4cqw; height: 1px; margin: 1.5cqw auto 1.35cqw;
  background: linear-gradient(90deg, transparent, rgba(201,163,95,.85) 22%, rgba(201,163,95,.85) 78%, transparent); }
.k-orna b { position: absolute; left: 50%; top: -0.28cqw; width: 0.56cqw; height: 0.56cqw;
  transform: translateX(-50%) rotate(45deg); background: #c9a35f; }
.k-sub {
  font-family: var(--serif);
  font-size: clamp(11px, 1.26cqw, 23px);
  color: #ece3cb;
}

/* ---------- editorial lede over the photograph ---------- */
.k-lede { position: absolute; z-index: 3; left: 2.99%; top: 62.6%; width: 26cqw; }
.k-quote {
  font-family: var(--serif-i); font-style: italic;
  font-size: clamp(14px, 1.72cqw, 31px);
  line-height: 1.42;
  color: #f2ecdc;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);
}
.k-qrule { display: block; width: 2.2cqw; height: 1px; background: rgba(226,214,184,.75); margin: 1.5cqw 0 1.6cqw; }
.k-cta { height: 3.26cqw; padding: 0 1.9cqw; }
.k-cta .lbl { font-size: clamp(8px, 0.8cqw, 14px); letter-spacing: 0.24em; }
.k-cta .arrow { width: 1.75cqw; margin-left: 1.4cqw; }
.k-cta .arrow svg { stroke-width: 1.1; }

/* ---------- the three panels ---------- */
.k-panels { display: contents; }   /* desktop: panels position against the stage */
.k-panel {
  position: absolute; z-index: 3;
  top: 23.24%; height: 58.59%;
  overflow: hidden;
  border: 1px solid rgba(198, 162, 96, 0.55);
  box-shadow: 0 1.4cqw 3.4cqw rgba(5, 12, 8, 0.45);
  transition: border-color 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
.k-p1 { left: 38.87%; width: 18.16%; }
.k-p2 { left: 58.14%; width: 19.01%; }
.k-p3 { left: 78.32%; width: 19.34%; }
.k-panel:hover { border-color: rgba(236, 207, 139, 0.95); box-shadow: 0 2cqw 4.4cqw rgba(5, 12, 8, 0.6); }
.k-panel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform 1s var(--ease); will-change: transform; }
.k-panel:hover img { transform: scale(1.05); }
.k-scrim { position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(9,14,10,0) 44%, rgba(9,14,10,.62) 64%, rgba(6,10,7,.94) 84%); }
.k-cap { position: absolute; left: 7.5%; right: 7.5%; bottom: 4.5%; z-index: 1; display: block; }
.k-cap h3 {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(12px, 1.46cqw, 26px);
  letter-spacing: 0.035em; line-height: 1.16;
  text-transform: uppercase;
  color: #f2ecdc;
  margin-bottom: 0.5cqw;
}
.k-cap p { font-family: var(--serif); font-size: clamp(9px, 0.92cqw, 17px); color: #e6ddc4; margin-bottom: 1.15cqw; }
.k-go {
  width: 2.3cqw; height: 2.3cqw; min-width: 20px; min-height: 20px;
  border: 1px solid rgba(238,228,205,.72); border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: #eee4cd;
  transition: background .4s, color .4s, border-color .4s, transform .4s var(--ease);
}
.k-go svg { width: 52%; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.k-panel:hover .k-go { background: var(--gold); border-color: var(--gold); color: var(--ink-on-gold); transform: translateX(3px); }

/* ---------- closing CTA + corner marks ---------- */
.k-all { position: absolute; z-index: 3; left: 39.91%; top: 86.72%; }
.k-all .cta { height: 3cqw; padding: 0 2.1cqw; }
.k-all .cta .lbl { font-size: clamp(8px, 0.8cqw, 14px); letter-spacing: 0.24em; }
.k-all .cta .arrow { width: 1.75cqw; margin-left: 1.5cqw; }
.k-corner { position: absolute; z-index: 3; display: flex; flex-direction: column; gap: 0.95cqw; }
.k-corner span {
  font-size: clamp(8px, 0.72cqw, 13px);
  letter-spacing: 0.3em; text-transform: uppercase;
  color: rgba(226, 214, 184, 0.94);
  white-space: nowrap;
}
.k-corner-l { left: 3.58%; top: 86.5%; align-items: flex-start; }
.k-corner-r { right: 3.65%; top: 85.9%; align-items: flex-end; text-align: right; }
.k-corner-orna { display: block; width: 7cqw; height: 1px; margin-bottom: 0.9cqw;
  background: linear-gradient(90deg, transparent, rgba(201,163,95,.8)); position: relative; }
.k-corner-orna::after { content: ""; position: absolute; right: 26%; top: -0.2cqw; width: 0.45cqw; height: 0.45cqw;
  transform: rotate(45deg); background: #c9a35f; }

/* ---------- mobile: the same room, recomposed ---------- */
@media (max-width: 767px) {
  .k-stage {
    aspect-ratio: auto;
    display: flex; flex-direction: column;
    padding: 11vh 0 9vh;
    gap: 6vw;
    container-type: normal;
  }
  .k-room { position: absolute; inset: 0; }
  .k-room img { object-position: 30% 50%; }
  .k-rail, .k-corner { display: none; }
  .k-head { position: static; padding: 0 7vw; }
  .k-eyebrow { font-size: 10px; }
  .k-head h2 { font-size: clamp(26px, 7.4vw, 34px); margin-top: 12px; }
  .k-orna { width: 150px; margin: 16px auto 14px; }
  .k-orna b { top: -3px; width: 6px; height: 6px; }
  .k-sub { font-size: 14px; }
  .k-lede { position: static; width: auto; padding: 0 7vw; }
  .k-quote { font-size: clamp(19px, 5.6vw, 26px); }
  .k-qrule { width: 34px; margin: 14px 0 16px; }
  .k-cta, .k-all .cta { height: 46px; padding: 0 20px; }
  .k-cta .lbl, .k-all .cta .lbl { font-size: 10px; }
  .k-cta .arrow, .k-all .cta .arrow { width: 22px; margin-left: 14px; }
  .k-panel { position: static; top: auto; left: auto; width: auto; height: auto; aspect-ratio: 279 / 597; }
  .k-cap h3 { font-size: 17px; }
  .k-cap p { font-size: 12.5px; margin-bottom: 12px; }
  .k-go { width: 30px; height: 30px; }
  .k-all { position: static; padding: 0 7vw; }
}

/* ============================================================
   S05 · BEST SELLERS — one room, replicated from the reference.
   Positions are percentages of the 1536x1024 source frame.
   ============================================================ */
#best { background: #223018; overflow: hidden; }
.b-stage {
  position: relative;
  aspect-ratio: 1536 / 1024;
  container-type: inline-size;
  overflow: hidden;
}
.b-room { position: absolute; inset: 0; z-index: 0; }
.b-room picture { position: absolute; inset: 0; display: block; }
.b-room img { width: 100%; height: 100%; object-fit: cover; will-change: transform; }
/* soft pool behind the heading — lifts the type and settles the plate */
.b-stage::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 26%; z-index: 1;
  pointer-events: none;
  background: radial-gradient(58% 100% at 50% 0%, rgba(10, 20, 10, 0.5), transparent 72%);
}

/* ---------- rails ---------- */
.b-rail { position: absolute; z-index: 3; display: flex; flex-direction: column; }
.b-rail p { display: flex; flex-direction: column; gap: 1.1cqw; }
.b-rail span {
  font-size: clamp(8px, 0.72cqw, 13px);
  letter-spacing: 0.3em; text-transform: uppercase;
  color: rgba(226, 214, 184, 0.96); white-space: nowrap;
}
.b-rail-line { display: block; width: 1px; background: linear-gradient(180deg, rgba(201,163,95,.75), transparent); }
.b-rail-l { left: 3.25%; top: 6.3%; align-items: flex-start; }
.b-rail-l .b-rail-line { height: 2.2cqw; margin-bottom: 1.1cqw; }
.b-rail-r { right: 3.25%; top: 6.3%; align-items: flex-end; text-align: right; }
.b-rail-r .b-rail-line { height: 2.2cqw; margin-bottom: 1.1cqw; }

/* ---------- heading ---------- */
.b-head { position: absolute; z-index: 3; left: 0; right: 0; top: 5.4%; text-align: center; }
.b-eyebrow {
  font-size: clamp(8px, 0.86cqw, 15px);
  letter-spacing: 0.46em; text-indent: 0.46em; text-transform: uppercase;
  color: #cbb684;
}
.b-head h2 {
  margin-top: 1.1cqw;
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(22px, 3.15cqw, 56px);
  letter-spacing: 0.03em; line-height: 1; text-transform: uppercase;
  color: #f4eee0;
}
.b-orna { position: relative; display: block; width: 10.5cqw; height: 1px; margin: 1.45cqw auto 1.3cqw;
  background: linear-gradient(90deg, transparent, rgba(201,163,95,.85) 22%, rgba(201,163,95,.85) 78%, transparent); }
.b-orna b { position: absolute; left: 50%; top: -0.28cqw; width: 0.56cqw; height: 0.56cqw;
  transform: translateX(-50%) rotate(45deg); background: #c9a35f; }
.b-sub { font-family: var(--serif); font-size: clamp(11px, 1.28cqw, 23px); color: #ece3cb; }

/* ---------- the four cards ---------- */
.b-card {
  position: absolute; z-index: 3;
  overflow: hidden;
  border: 1px solid rgba(198, 162, 96, 0.45);
  box-shadow: 0 1.2cqw 3cqw rgba(6, 14, 8, 0.42);
  transition: border-color .5s var(--ease), box-shadow .5s var(--ease);
}
.b-c1 { left: 2.93%; top: 21.48%; width: 30.27%; height: 58.79%; }
.b-c2 { left: 34.18%; top: 21.48%; width: 34.96%; height: 28.13%; }
.b-c3 { left: 34.18%; top: 51.07%; width: 34.96%; height: 29.20%; }
.b-c4 { left: 70.05%; top: 21.48%; width: 27.21%; height: 58.79%; }
.b-card:hover { border-color: rgba(236, 207, 139, 0.96); box-shadow: 0 1.8cqw 4cqw rgba(6, 14, 8, 0.58); }
.b-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform 1s var(--ease); will-change: transform; }
.b-card:hover img { transform: scale(1.04); }
/* light wash so the ivory typography reads, exactly as the reference does */
.b-veil { position: absolute; inset: 0;
  background: linear-gradient(104deg, rgba(238,232,214,.9) 0%, rgba(238,232,214,.62) 22%, rgba(238,232,214,0) 52%); }
.b-c4 .b-veil { background: linear-gradient(104deg, rgba(10,16,10,.86) 0%, rgba(10,16,10,.55) 24%, rgba(10,16,10,0) 54%); }

.b-txt { position: absolute; left: 6.2%; top: 5.5%; z-index: 2; display: block; max-width: 58%; }
.b-c2 .b-txt, .b-c3 .b-txt { top: 11%; max-width: 42%; }
.b-no {
  display: inline-flex; align-items: center; gap: 0.7cqw;
  font-size: clamp(9px, 0.95cqw, 17px); letter-spacing: 0.12em;
  color: #4d463a; margin-bottom: 1.1cqw;
}
.b-no::after { content: ""; width: 2.2cqw; height: 1px; background: rgba(77, 70, 58, .55); }
.b-txt h3 {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(14px, 1.72cqw, 31px);
  line-height: 1.14; color: #241f16; margin-bottom: 0.85cqw;
}
.b-txt p { font-family: var(--serif); font-size: clamp(10px, 1.02cqw, 18px); line-height: 1.42; color: #4d463a; }
.b-c4 .b-no { color: rgba(226, 214, 184, 0.96); }
.b-c4 .b-no::after { background: rgba(226,214,184,.5); }
.b-c4 .b-txt h3 { color: #f4eee0; }
.b-c4 .b-txt p { color: rgba(233, 224, 200, 0.96); }

.b-shop {
  position: absolute; left: 6.2%; bottom: 5.5%; z-index: 2;
  display: inline-flex; align-items: center; gap: 0.9cqw;
  font-size: clamp(8px, 0.78cqw, 14px); letter-spacing: 0.26em; text-transform: uppercase;
  color: #2e2a20;
}
.b-c1 .b-shop { flex-direction: row; }
.b-c4 .b-shop { color: rgba(240, 232, 212, 0.96); }
.b-shop-flow { position: absolute; bottom: auto; top: 44%; left: 6.2%; flex-direction: column; align-items: flex-start; gap: 0.8cqw; }
.b-c2 .b-shop, .b-c3 .b-shop { flex-direction: column; align-items: flex-start; gap: 0.7cqw; }
.b-go {
  width: 2.3cqw; height: 2.3cqw; min-width: 22px; min-height: 22px;
  border: 1px solid currentColor; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .4s, color .4s, border-color .4s, transform .4s var(--ease);
}
.b-go svg { width: 52%; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.b-card:hover .b-go { background: var(--gold); border-color: var(--gold); color: var(--ink-on-gold); transform: translateX(3px); }

.b-badge {
  position: absolute; right: 4%; top: 6%; z-index: 3;
  width: 5.6cqw; height: 5.6cqw; min-width: 54px; min-height: 54px;
  border-radius: 50%; background: #f6f0e0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.35cqw;
  box-shadow: 0 0.7cqw 1.8cqw rgba(10, 16, 11, 0.3);
}
.b-badge span {
  font-size: clamp(7px, 0.62cqw, 11px); letter-spacing: 0.2em; text-indent: 0.2em;
  text-transform: uppercase; text-align: center; line-height: 1.5; color: #3a3428;
}
.b-badge i { width: 1.7cqw; height: 1px; background: rgba(160,130,70,.8); position: relative; }
.b-badge i::after { content: ""; position: absolute; left: 50%; top: -0.16cqw; width: 0.34cqw; height: 0.34cqw;
  transform: translateX(-50%) rotate(45deg); background: #b99552; }

/* ---------- closing CTA + corner marks ---------- */
.b-all { position: absolute; z-index: 3; left: 39.97%; top: 83.79%; }
.b-all .cta { height: 3cqw; padding: 0 2.1cqw; }
.b-all .cta .lbl { font-size: clamp(8px, 0.8cqw, 14px); letter-spacing: 0.24em; }
.b-all .cta .arrow { width: 1.75cqw; margin-left: 1.5cqw; }
.b-corner { position: absolute; z-index: 3; display: flex; flex-direction: column; gap: 0.9cqw; }
.b-corner span {
  font-size: clamp(8px, 0.72cqw, 13px);
  letter-spacing: 0.3em; text-transform: uppercase;
  color: rgba(226, 214, 184, 0.94); white-space: nowrap;
}
.b-corner .lotus { width: 2.5cqw; margin-bottom: 0.7cqw; }
.b-corner-l { left: 4.69%; top: 84.5%; align-items: flex-start; }
.b-corner-r { right: 3.26%; top: 86.4%; align-items: flex-end; text-align: right; }
.b-corner-orna { display: block; width: 7cqw; height: 1px; margin-bottom: 0.85cqw;
  background: linear-gradient(90deg, transparent, rgba(201,163,95,.8)); position: relative; }
.b-corner-orna::after { content: ""; position: absolute; right: 26%; top: -0.2cqw; width: 0.45cqw; height: 0.45cqw;
  transform: rotate(45deg); background: #c9a35f; }

/* ---------- mobile ---------- */
@media (max-width: 767px) {
  .b-stage {
    aspect-ratio: auto; display: flex; flex-direction: column;
    padding: 11vh 0 9vh; gap: 5vw; container-type: normal;
  }
  .b-stage::before { height: 22%; }
  .b-room img { object-position: 40% 50%; }
  .b-rail, .b-corner { display: none; }
  .b-head { position: static; padding: 0 7vw; }
  .b-eyebrow { font-size: 10px; }
  .b-head h2 { font-size: clamp(27px, 7.8vw, 36px); margin-top: 12px; }
  .b-orna { width: 150px; margin: 16px auto 14px; }
  .b-orna b { top: -3px; width: 6px; height: 6px; }
  .b-sub { font-size: 14px; }
  .b-card { width: auto; }
  .b-txt, .b-c2 .b-txt, .b-c3 .b-txt { top: 8%; max-width: 54%; }
  .b-no { font-size: 11px; margin-bottom: 8px; }
  .b-no::after { width: 22px; }
  .b-txt h3 { font-size: 19px; margin-bottom: 7px; }
  .b-txt p { font-size: 13px; }
  .b-shop, .b-shop-flow { position: absolute; top: auto; bottom: 6%; left: 6.2%; flex-direction: row; align-items: center; gap: 10px; font-size: 10px; }
  .b-go { width: 30px; height: 30px; }
  .b-badge { width: 58px; height: 58px; gap: 3px; }
  .b-badge span { font-size: 8px; }
  .b-badge i { width: 18px; }
  .b-badge i::after { top: -2px; width: 4px; height: 4px; }
  .b-all { position: static; padding: 0 7vw; }
  .b-all .cta { height: 46px; padding: 0 20px; }
  .b-all .cta .lbl { font-size: 10px; }
  .b-all .cta .arrow { width: 22px; margin-left: 14px; }
}

/* ============================================================
   S06 · CRAFTSMANSHIP SEAL
   ============================================================ */
#craft {
  background: linear-gradient(180deg, #21351f 0%, var(--g-craft) 100%);
  padding: clamp(48px, 8vh, 90px) 6vw;
}
.c-orna { position: relative; display: block; width: min(100%, 1500px); height: 1px; margin: 0 auto;
  background: linear-gradient(90deg, transparent, rgba(201, 163, 95, 0.5) 18%, rgba(201, 163, 95, 0.5) 82%, transparent); }
.c-orna::after { content: ""; position: absolute; left: 50%; top: -4px; width: 8px; height: 8px; transform: translateX(-50%) rotate(45deg);
  background: var(--g-craft); border: 1px solid var(--gold); }
.c-row {
  display: flex; align-items: center; justify-content: center;
  /* 100% of the section's content box, not 90vw — the section is padded 6vw,
     so a vw width overruns the right padding and the row leans. The cap still
     holds on wide screens, where margin:auto centres it. */
  width: min(100%, 1400px);
  margin: clamp(34px, 5.5vh, 64px) auto;
}
.c-item {
  flex: 1 1 0;
  display: flex; flex-direction: column; align-items: center; gap: 1.8vh;
  padding: 0 2vw;
  text-align: center;
}
.c-item svg { height: clamp(30px, 2.6vw, 44px); width: auto; color: var(--gold);
  filter: drop-shadow(0 0 10px rgba(201, 163, 95, 0.25));
  transition: filter 0.5s var(--ease), transform 0.5s var(--ease); }
.c-item:hover svg { filter: drop-shadow(0 0 16px rgba(228, 188, 110, 0.6)); transform: translateY(-3px); }
.c-item svg path, .c-item svg rect, .c-item svg circle { fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.c-item p { display: flex; flex-direction: column; gap: 5px; }
.c-item p span {
  font-size: clamp(9.5px, 0.7vw, 12.5px);
  letter-spacing: 0.3em; text-indent: 0.3em; text-transform: uppercase;
  color: rgba(226, 214, 184, 0.96);
}
.c-sep { width: 1px; align-self: stretch; background: linear-gradient(180deg, transparent, rgba(201, 163, 95, 0.4), transparent); }

/* ============================================================
   S07 · EDITORIAL STORY
   ============================================================ */
#storyEd {
  background:
    radial-gradient(50% 60% at 86% 20%, rgba(190, 160, 90, 0.07), transparent 60%),
    linear-gradient(172deg, #1d3021 0%, var(--g-story) 60%, #132118 100%);
  padding: clamp(90px, 14vh, 170px) 6vw;
  overflow: hidden;
}
.se-grid {
  display: grid;
  grid-template-columns: 46fr 54fr;
  gap: clamp(34px, 4.5vw, 90px);
  align-items: center;
  /* see .c-row — fill the padded content box, keep the cap for wide screens */
  width: min(100%, 1360px);
  margin: 0 auto;
}
.se-media { position: relative; }
.se-frame { position: absolute; inset: 4.5% -4.5% -4.5% 4.5%; border: 1px solid rgba(201, 163, 95, 0.45); pointer-events: none; }
.se-mask { position: relative; overflow: hidden; aspect-ratio: 40 / 51; box-shadow: 0 36px 90px rgba(4, 10, 6, 0.6); }
.se-mask img { width: 100%; height: 108%; object-fit: cover; will-change: transform; }
.se-copy .sh-eyebrow { margin-bottom: 2.8vh; }
.se-copy h2 {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(34px, 3.5vw, 64px);
  line-height: 1.14;
  color: var(--cream-hi);
}
.se-copy h2 em { font-family: var(--serif-i); font-style: italic; font-weight: 400; color: var(--gold-light); }
.se-rule { display: block; width: 56px; height: 1px; background: var(--gold); margin: 3.4vh 0; }
.se-para {
  font-size: clamp(13.5px, 1.05vw, 19px);
  line-height: 1.85;
  letter-spacing: 0.02em;
  color: rgba(233, 224, 200, 0.96);
  max-width: 34em;
  margin-bottom: 2.2vh;
}
.se-para-2 { font-family: var(--serif-i); font-style: italic; color: var(--gold-light); font-size: clamp(15px, 1.2vw, 22px); }
.se-copy .cta { margin-top: 2.4vh; }

/* ============================================================
   FOOTER
   ============================================================ */
#footer {
  position: relative;
  background:
    radial-gradient(46% 30% at 8% 0%, rgba(80, 110, 70, 0.25), transparent 60%),
    radial-gradient(40% 26% at 94% 2%, rgba(150, 140, 90, 0.12), transparent 60%),
    linear-gradient(178deg, #24391f 0%, var(--g-footer) 40%, #141f12 100%);
  overflow: hidden;
  color: var(--cream);
}
.f-leaves { position: absolute; left: 0; top: 0; width: min(30vw, 360px); opacity: 0.5; pointer-events: none;
  -webkit-mask-image: radial-gradient(100% 100% at 0% 0%, #000 40%, transparent 78%);
  mask-image: radial-gradient(100% 100% at 0% 0%, #000 40%, transparent 78%); }
.f-arch { position: absolute; right: 0; top: 0; width: min(28vw, 330px); opacity: 0.55; pointer-events: none;
  -webkit-mask-image: radial-gradient(110% 110% at 100% 0%, #000 42%, transparent 80%);
  mask-image: radial-gradient(110% 110% at 100% 0%, #000 42%, transparent 80%); }
.f-statement {
  position: relative; z-index: 2;
  text-align: center;
  padding: clamp(70px, 10vh, 120px) 6vw 0;
}
.f-statement .lotus { width: 34px; margin-bottom: 2.4vh; }
.f-st-line { font-size: clamp(13px, 1.05vw, 19px); letter-spacing: 0.42em; text-indent: 0.42em; text-transform: uppercase; color: var(--cream-hi); }
.f-st-line2 { margin-top: 1vh; font-size: clamp(11px, 0.85vw, 15px); color: rgba(238, 228, 205, 0.94); }
.f-st-rule { display: block; width: 1px; height: 7vh; margin: 3vh auto; background: linear-gradient(180deg, rgba(201,163,95,.8), transparent); }
.f-st-copy { font-family: var(--serif); font-size: clamp(13.5px, 1.05vw, 19px); line-height: 1.7; color: rgba(238, 230, 208, 0.96); }
.f-main {
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: 1.35fr 0.8fr 0.85fr 0.95fr 1.3fr;
  gap: clamp(24px, 3vw, 60px);
  width: min(92vw, 1480px);
  margin: clamp(60px, 9vh, 110px) auto clamp(50px, 8vh, 90px);
}
.f-brand { position: relative; }
.f-aura { display: none; }
#footLogo { position: relative; height: clamp(150px, 15vw, 210px); width: auto; margin-bottom: 3vh; }
.f-about { font-size: clamp(12.5px, 0.92vw, 16px); line-height: 1.8; color: rgba(233, 224, 200, 0.96); max-width: 30em; margin-bottom: 3vh; }
.f-script { font-family: 'Great Vibes', var(--serif-i), cursive; font-size: clamp(26px, 2.2vw, 40px); line-height: 1.15;
  color: var(--gold-light); }
.f-script span { display: block; padding-left: 1.2em; }
.f-script-rule { display: block; width: 120px; height: 1px; background: linear-gradient(90deg, rgba(201,163,95,.7), transparent); margin-top: 2vh; }
.f-col h4, .f-news h4 {
  font-size: clamp(10.5px, 0.78vw, 14px); letter-spacing: 0.3em; text-transform: uppercase;
  font-weight: 500; color: var(--cream-hi);
  margin-bottom: 1.2vh;
}
.f-col > i, .f-news > i { display: block; width: 26px; height: 1px; background: var(--gold); margin-bottom: 2.6vh; }
.f-col { display: flex; flex-direction: column; }
.f-col a {
  font-family: var(--serif);
  font-size: clamp(13.5px, 1vw, 18px);
  color: rgba(236, 228, 206, 0.96);
  padding: 0.9vh 0;
  width: fit-content;
  position: relative;
  transition: color 0.35s;
}
.f-col a::after { content: ""; position: absolute; left: 0; bottom: 4px; height: 1px; width: 100%;
  background: var(--gold); transform: scaleX(0); transform-origin: left center; transition: transform 0.45s var(--ease-io); }
.f-col a:hover { color: var(--gold-light); }
.f-col a:hover::after { transform: scaleX(1); }
.f-news p { font-size: clamp(12.5px, 0.9vw, 15.5px); line-height: 1.75; color: rgba(233, 224, 200, 0.96); margin-bottom: 2.4vh; }
.f-field { position: relative; display: flex; }
.f-field input {
  flex: 1;
  height: clamp(46px, 3.4vw, 56px);
  padding: 0 62px 0 22px;
  border-radius: 999px;
  border: 1px solid rgba(201, 163, 95, 0.55);
  background: rgba(10, 17, 11, 0.35);
  color: var(--cream-hi);
  font-family: var(--sans); font-size: 13.5px; letter-spacing: 0.03em;
  outline: none;
  transition: border-color 0.4s, background 0.4s;
}
.f-field input::placeholder { color: rgba(226, 214, 184, 0.69); }
.f-field input:focus { border-color: var(--gold-light); background: rgba(10, 17, 11, 0.55); }
.f-field button {
  position: absolute; right: 5px; top: 50%; transform: translateY(-50%);
  width: clamp(38px, 2.8vw, 46px); height: clamp(38px, 2.8vw, 46px);
  border-radius: 50%;
  background: linear-gradient(120deg, #d5b06a, #bd9351);
  color: var(--ink-on-gold);
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform 0.4s var(--ease), box-shadow 0.4s;
}
.f-field button svg { width: 42%; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.f-field button:hover { transform: translateY(-50%) translateX(2px); box-shadow: 0 6px 18px rgba(201, 163, 95, 0.35); }
.f-agree {
  display: flex; align-items: center; gap: 10px;
  margin-top: 1.8vh;
  font-size: 11.5px; letter-spacing: 0.03em;
  color: rgba(226, 214, 184, 0.84);
  cursor: pointer;
  position: relative;
}
.f-agree input { position: absolute; opacity: 0; }
.f-agree span { width: 14px; height: 14px; border: 1px solid rgba(201, 163, 95, 0.6); flex: 0 0 auto; position: relative; transition: background 0.3s; }
.f-agree input:checked + span { background: var(--gold); }
.f-agree input:checked + span::after { content: ""; position: absolute; left: 4px; top: 1px; width: 4px; height: 8px;
  border: solid var(--ink-on-gold); border-width: 0 1.5px 1.5px 0; transform: rotate(42deg); }
.f-news.is-done .f-field, .f-news.is-done .f-agree { display: none; }
.f-thanks { display: none; font-family: var(--serif-i); font-style: italic; font-size: 19px; color: var(--gold-light); }
.f-news.is-done .f-thanks { display: block; }
.f-social { display: flex; gap: 12px; margin-top: 3vh; }
.f-social a {
  width: clamp(38px, 2.9vw, 46px); height: clamp(38px, 2.9vw, 46px);
  border: 1px solid rgba(201, 163, 95, 0.5); border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: rgba(236, 228, 206, 0.96);
  transition: color 0.4s, border-color 0.4s, background 0.4s, transform 0.4s var(--ease);
}
.f-social svg { width: 44%; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.f-social a:hover { color: var(--ink-on-gold); background: var(--gold); border-color: var(--gold); transform: translateY(-3px); }
.f-orna { position: relative; display: block; width: min(92vw, 1480px); height: 1px; margin: 0 auto;
  background: linear-gradient(90deg, transparent, rgba(201, 163, 95, 0.45) 15%, rgba(201, 163, 95, 0.45) 85%, transparent); }
.f-orna::after { content: ""; position: absolute; left: 50%; top: -5px; width: 10px; height: 10px; transform: translateX(-50%) rotate(45deg);
  background: var(--g-footer); border: 1px solid var(--gold); }
.f-bottom {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  gap: 1.6vh;
  width: min(92vw, 1480px);
  margin: 0 auto;
  padding: clamp(26px, 4vh, 44px) 0 clamp(30px, 5vh, 50px);
  font-size: clamp(10.5px, 0.78vw, 13px);
  letter-spacing: 0.06em;
  color: rgba(226, 214, 184, 0.74);
}
.f-orna-btm { margin: 0.4vh auto; }
.f-bottom-row {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 2vh 3vw;
  width: 100%;
  text-align: left;
}
.f-credit { display: block; margin-top: 4px; font-size: 0.92em; color: rgba(226, 214, 184, 0.5); }
.f-credit a { color: rgba(226, 214, 184, 0.68); transition: color 0.35s; }
.f-credit a:hover { color: var(--gold-light); }
.f-bottom nav { display: flex; align-items: center; gap: 14px; }
.f-bottom nav i { color: rgba(201, 163, 95, 0.54); font-style: normal; }
.f-bottom nav a { transition: color 0.35s; }
.f-bottom nav a:hover { color: var(--gold-light); }
.f-region { display: inline-flex; align-items: center; gap: 6px; }
.f-region svg { width: 9px; fill: none; stroke: currentColor; stroke-width: 1.4; }
#backTop { display: flex; flex-direction: column; align-items: center; gap: 8px; color: rgba(226, 214, 184, 0.89); }
.bt-circle {
  width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid rgba(201, 163, 95, 0.55);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.4s, color 0.4s, transform 0.4s var(--ease);
}
.bt-circle svg { width: 34%; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
#backTop:hover .bt-circle { background: var(--gold); color: var(--ink-on-gold); transform: translateY(-3px); }
.bt-label { font-size: 9px; letter-spacing: 0.32em; text-indent: 0.32em; text-transform: uppercase; }

/* ============================================================
   SECTIONS · RESPONSIVE
   ============================================================ */
@media (max-width: 1100px) {
  .rail, .corner { display: none; }
  .f-main { grid-template-columns: 1fr 1fr; }
  .f-brand { grid-column: span 2; }
  .f-news { grid-column: span 2; }
}
@media (max-width: 700px) {
  .sec-head { padding: 0 8vw; }
  .sh-title { font-size: clamp(26px, 7.6vw, 34px); }
  .sh-sub { font-size: 14px; }

  #explore { padding: 0; }
  .x-stage { aspect-ratio: auto; display: flex; flex-direction: column; padding: 9vh 5vw 9vh; gap: 5.5vw; }
  /* the room stays: same artwork, portrait framing */
  .x-bg { object-position: 4% 50%; }
  .x-head { position: static; z-index: 3; }
  .x-card { position: relative; z-index: 2; width: 100%; height: auto; top: auto; left: auto; aspect-ratio: 765 / 523; }
  .x-copy { top: 8.5cqw; max-width: 46cqw; }
  .x-copy .cta { height: 42px; padding: 0 18px; font-size: 10px; letter-spacing: 0.2em; margin-top: 16px; }
  .x-copy .cta .arrow { width: 20px; margin-left: 12px; }
  .x-rule { margin: 10px 0 12px; }

  #women-new { padding-top: 12vh; }
  .w-bg img { object-position: 38% 50%; }
  .w-bg-scrim { background:
    linear-gradient(180deg, rgba(12, 20, 12, 0.7) 0%, rgba(12, 20, 12, 0.3) 24%, rgba(12, 20, 12, 0.18) 55%, rgba(10, 17, 10, 0.5) 100%); }
  .w-track { justify-content: flex-start; }
  .w-nav { margin-top: 2.5vh; }



  .c-row { flex-wrap: wrap; gap: 4.5vh 0; margin: 4.5vh auto; }
  .c-item { flex: 1 1 50%; padding: 0 4vw; }
  .c-sep { display: none; }

  #storyEd { padding: 12vh 7.5vw; }
  .se-grid { grid-template-columns: 1fr; gap: 6vh; }

  /* The footer already carries 8vw of side padding, so these blocks must fill
     its content box. At their desktop 92vw they were 8vw wider than the box and
     spilled past the right padding, leaving every line flush to the screen. */
  .f-main, .f-bottom { width: 100%; }
  .f-main { grid-template-columns: 1fr 1fr; gap: 5vh 6vw; }
  .f-brand, .f-news { grid-column: span 2; }
  #footLogo { height: 130px; }
  #backTop { flex-direction: row; }
}






















/* ============================================================
   HERO-ONLY STAGE — everything below the hero is out of the build
   ============================================================ */
body.hero-only #explore,
body.hero-only #women-new,
body.hero-only #kalakaari,
body.hero-only #best,
body.hero-only #craft,
body.hero-only #storyEd,
body.hero-only #footer { display: none !important; }
body.hero-only { overflow: hidden; }
body.hero-only main { height: 100vh; height: 100svh; }



/* ---------- keep both nav groups clear of the centred logo ---------- */
@media (min-width: 1200px) {
  .nav-utils { gap: 6px; }
  .util { width: 38px; }
}
/* the wishlist lives in the account menu until there is room for its own icon */
@media (min-width: 1200px) and (max-width: 1439px) {
  #wishWrap { display: none; }
}




/* anchor targets clear the fixed header instead of hiding beneath it */
main > section[id], footer[id] { scroll-margin-top: calc(var(--hdr-h-solid) + 14px); }
#hero { scroll-margin-top: 0; }






/* ============================================================
   SECTION SEAMS — adjacent photographic scenes meet on a shared
   deep tone so the page reads as one continuous world
   ============================================================ */
#hero::after,
#women-new::before, #women-new::after,
#explore .x-stage::after,
#kalakaari .k-stage::before, #kalakaari .k-stage::after {
  content: ""; position: absolute; left: 0; right: 0;
  pointer-events: none;
}
/* seams sit above the photography but beneath every word and button */
#hero::after { z-index: 4; }
#women-new::before, #women-new::after { z-index: 1; }
#explore .x-stage::after { z-index: 1; }
#kalakaari .k-stage::before, #kalakaari .k-stage::after { z-index: 1; }
.x-card { z-index: 2; }
#hero::after {
  bottom: 0; height: clamp(70px, 9vh, 130px);
  background: linear-gradient(180deg, rgba(15, 26, 16, 0) 0%, rgba(15, 26, 16, 0.55) 70%, rgba(15, 26, 16, 0.9) 100%);
}
#women-new::before {
  top: 0; height: clamp(70px, 9vh, 130px);
  background: linear-gradient(0deg, rgba(15, 26, 16, 0) 0%, rgba(15, 26, 16, 0.6) 68%, rgba(15, 26, 16, 0.92) 100%);
}
#women-new::after {
  bottom: 0; height: clamp(70px, 9vh, 130px);
  background: linear-gradient(180deg, rgba(15, 26, 16, 0) 0%, rgba(15, 26, 16, 0.5) 68%, rgba(15, 26, 16, 0.88) 100%);
}
#explore .x-stage::after {
  bottom: 0; height: clamp(60px, 7vh, 110px);
  background: linear-gradient(180deg, rgba(15, 26, 16, 0) 0%, rgba(15, 26, 16, 0.45) 72%, rgba(15, 26, 16, 0.8) 100%);
}
#kalakaari .k-stage::before {
  top: 0; height: clamp(70px, 9vh, 130px);
  background: linear-gradient(0deg, rgba(15, 26, 16, 0) 0%, rgba(15, 26, 16, 0.55) 68%, rgba(15, 26, 16, 0.9) 100%);
}
#kalakaari .k-stage::after {
  bottom: 0; height: clamp(70px, 9vh, 130px);
  background: linear-gradient(180deg, rgba(15, 26, 16, 0) 0%, rgba(15, 26, 16, 0.5) 68%, rgba(15, 26, 16, 0.9) 100%);
}
#women-new, #kalakaari { position: relative; }



/* ============================================================
   MOBILE EXPERIENCE — its own composition and interaction model
   ============================================================ */

/* Best Sellers cards behave like the other sections on desktop */
.b-cards { display: contents; }

@media (max-width: 767px) {
  /* ---------- shared swipe-row behaviour ---------- */
  .w-track, .k-panels, .b-cards {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;   /* never trap vertical scrolling */
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .w-track::-webkit-scrollbar,
  .k-panels::-webkit-scrollbar,
  .b-cards::-webkit-scrollbar { display: none; width: 0; height: 0; }

  /* each row leaves the next card partly visible so the swipe is obvious */
  .w-track { width: 100%; padding: 0 7vw 2vh; gap: 4vw; scroll-padding-left: 7vw; }
  .w-card  { flex: 0 0 76vw; max-width: none; scroll-snap-align: start; }

  .k-panels { margin: 0; padding: 0 7vw 1vh; gap: 4vw; scroll-padding-left: 7vw; }
  .k-panel  { flex: 0 0 68vw; scroll-snap-align: start; }

  .b-cards { padding: 0 7vw 1vh; gap: 4vw; scroll-padding-left: 7vw; }
  .b-card {
    position: static; top: auto; left: auto; height: auto;
    margin: 0;
    flex: 0 0 78vw;
    aspect-ratio: 78 / 78;
    scroll-snap-align: start;
  }
  .b-c2, .b-c3 { aspect-ratio: 78 / 60; }

  /* the card nearest the start of the row reads as the active one */
  .w-card, .k-panel, .b-card { transition: opacity .45s var(--ease), transform .45s var(--ease); }
  .w-track.is-swiping .w-card:not(.is-near),
  .k-panels.is-swiping .k-panel:not(.is-near),
  .b-cards.is-swiping .b-card:not(.is-near) { opacity: 0.72; }

  /* ---------- touch feedback (no hover on these devices) ---------- */
  .w-card:active, .k-panel:active, .b-card:active, .x-card:active { transform: scale(0.985); }
  .cta:active, .btn:active, .pop-cta:active { transform: scale(0.978); }
  .k-go:active, .b-go:active, .xt-go:active { transform: scale(0.9); }
  .util:active svg, .menu-btn:active span { opacity: 0.65; }
  .util-wish.is-liked svg { color: var(--gold-light); }

  /* ---------- scroll-linked section ornaments ---------- */
  .sh-orna, .k-orna, .b-orna { will-change: transform; }

  /* ---------- tap targets ----------
     Every control a thumb has to find is at least 44px on its short edge.
     The Kalakaari and Best Sellers CTAs already sit at 46px, so the rest of
     the page's CTAs are brought up to meet them — one consistent button. */
  .cta, .pop-cta { min-height: 46px; }
  /* search suggestions are inside a panel, so a closed-panel audit misses them */
  .sp-list a { min-height: 44px; }
  .pop a { min-height: 44px; display: flex; align-items: center; }
  #skipIntro { min-height: 44px; padding: 0 16px; }

  /* the footer link lists are dense; space them so a tap is unambiguous */
  .f-col a { display: flex; align-items: center; min-height: 44px; min-width: 44px; padding: 0; }
  .f-col a::after { bottom: 22%; }
  .f-field button { min-width: 46px; min-height: 46px; }

  /* social icons and the legal row are the smallest things in the footer */
  .f-social a { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  .f-bottom nav { flex-wrap: wrap; row-gap: 0; column-gap: 18px; }
  .f-bottom nav a { display: inline-flex; align-items: center; min-height: 44px; }
  /* the legal row wraps on a phone, which strands a "|" at the end of a line —
     drop the separators and let the column gap do the separating */
  .f-bottom nav i { display: none; }

  /* iOS zooms the whole page when a focused field is under 16px — the
     newsletter input is the only one that was, and it has room for 16px. */
  #newsEmail { font-size: 16px; }
  /* let the search field claim its whole row instead of a 27px band inside it */
  #searchInput { align-self: stretch; }

  /* ---------- hero CTA legibility ----------
     The primary label is dark ink meant to sit on the gold fill. On the narrow
     portrait crop the CTA row lands over the lit drape rather than the dark
     floor, so the label must not commit to dark until the fill is all the way
     home (fill runs 0.85s -> 1.70s). Desktop keeps its earlier, overlapping cue. */
  .slide-content.in .btn-primary {
    transition: opacity .9s var(--ease), transform .9s var(--ease),
                color .3s var(--ease) 1.66s;
  }
}

/* ============================================================
   REDUCED MOTION — mobile keeps the layout, drops the movement
   ============================================================ */
@media (prefers-reduced-motion: reduce) and (max-width: 767px) {
  .w-track, .k-panels, .b-cards { scroll-behavior: auto; }
  .w-card, .k-panel, .b-card { transition: none; opacity: 1 !important; }
}


/* ============================================================
   MOBILE MENU — WARM IVORY VARIATION
   Same structure, spacing, content and motion as before; only the
   colour treatment and a few ornamental details change, following
   the reference plate in menu.PNG.
   ============================================================ */
#mobileNav {
  --mn-ivory:    #F3EBDD;   /* warm ivory  — the ground            */
  --mn-ivory-hi: #FBF6EC;   /* lifted ivory — glow behind the mark */
  --mn-ivory-lo: #EDE2CE;   /* settled ivory — lower edge          */
  --mn-forest:   #17261B;   /* deep forest — depth and press state */
  --mn-gold:     #B89A62;
  --mn-gold-ink: #7C6132;   /* gold as TEXT — the decorative gold is too light to read small */
  --mn-walnut:   #3B3025;   /* rich walnut — the typography        */

  background:
    radial-gradient(88% 42% at 50% -4%, var(--mn-ivory-hi) 0%, rgba(251, 246, 236, 0) 64%),
    linear-gradient(172deg, #F7F1E6 0%, var(--mn-ivory) 46%, var(--mn-ivory-lo) 100%);
  color: var(--mn-walnut);
}

/* soft depth at the edges — the reference reads like a lit card,
   not a flat fill */
#mobileNav::before,
#mobileNav::after {
  content: "";
  position: absolute;
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0.55;
}
/* botanical flourish, upper left — kept inside the header band so it
   never crosses the navigation type */
#mobileNav::before {
  left: -5%; top: -1%;
  width: 48%; height: 21%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cg stroke='%23D8CAB0' stroke-width='1.4' fill='none' stroke-linecap='round'%3E%3Cpath d='M0 18 C 46 14, 86 34, 110 70 C 130 100, 140 140, 142 196'/%3E%3Cpath d='M22 20 C 30 40, 30 56, 22 70'/%3E%3Cpath d='M62 32 C 72 52, 72 68, 62 84'/%3E%3Cpath d='M100 62 C 112 82, 114 100, 106 116'/%3E%3Cpath d='M126 106 C 136 124, 138 142, 132 158'/%3E%3C/g%3E%3Cg fill='%23DED2BC'%3E%3Cellipse rx='17' ry='6.5' transform='translate(30,44) rotate(58)'/%3E%3Cellipse rx='19' ry='7' transform='translate(70,60) rotate(62)'/%3E%3Cellipse rx='18' ry='6.5' transform='translate(110,92) rotate(56)'/%3E%3Cellipse rx='16' ry='6' transform='translate(134,134) rotate(60)'/%3E%3Cellipse rx='14' ry='5.5' transform='translate(14,8) rotate(24)'/%3E%3Cellipse rx='15' ry='5.5' transform='translate(52,20) rotate(18)'/%3E%3Cellipse rx='14' ry='5' transform='translate(92,44) rotate(26)'/%3E%3C/g%3E%3C/svg%3E");
  background-position: left top;
}
/* the same vine, turned, in the open space below the list */
#mobileNav::after {
  right: -8%; bottom: 9%;
  width: 60%; height: 30%;
  transform: rotate(180deg);
  opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cg stroke='%23D8CAB0' stroke-width='1.4' fill='none' stroke-linecap='round'%3E%3Cpath d='M0 18 C 46 14, 86 34, 110 70 C 130 100, 140 140, 142 196'/%3E%3Cpath d='M22 20 C 30 40, 30 56, 22 70'/%3E%3Cpath d='M62 32 C 72 52, 72 68, 62 84'/%3E%3Cpath d='M100 62 C 112 82, 114 100, 106 116'/%3E%3Cpath d='M126 106 C 136 124, 138 142, 132 158'/%3E%3C/g%3E%3Cg fill='%23DED2BC'%3E%3Cellipse rx='17' ry='6.5' transform='translate(30,44) rotate(58)'/%3E%3Cellipse rx='19' ry='7' transform='translate(70,60) rotate(62)'/%3E%3Cellipse rx='18' ry='6.5' transform='translate(110,92) rotate(56)'/%3E%3Cellipse rx='16' ry='6' transform='translate(134,134) rotate(60)'/%3E%3Cellipse rx='14' ry='5.5' transform='translate(14,8) rotate(24)'/%3E%3Cellipse rx='15' ry='5.5' transform='translate(52,20) rotate(18)'/%3E%3Cellipse rx='14' ry='5' transform='translate(92,44) rotate(26)'/%3E%3C/g%3E%3C/svg%3E");
  background-position: left top;
}
/* the menu's own chrome sits above the flourishes */
#mobileNav > * { position: relative; z-index: 1; }

/* ---------- header row ---------- */
/* the reference carries no rule under the mark — the logo simply
   sits on the cream */
#mobileNav .mn-top { border-bottom: 0; }
#mobileNav .mn-back,
#mobileNav .mn-close { color: var(--mn-gold); }
#mobileNav .mn-back svg,
#mobileNav .mn-close svg { stroke-width: 1.5; }
#mobileNav .mn-back:hover,
#mobileNav .mn-close:hover,
#mobileNav .mn-back:active,
#mobileNav .mn-close:active { color: var(--mn-forest); }
#mobileNav .mn-title { color: var(--mn-walnut); }

/* ---------- the list ---------- */
#mobileNav .mn-panel a,
#mobileNav .mn-panel button {
  color: var(--mn-walnut);
  border-bottom: 1px solid rgba(184, 154, 98, 0.42);
}
#mobileNav .mn-panel .mn-l2 { color: rgba(59, 48, 37, 0.92); }
#mobileNav .mn-panel .chev { color: var(--mn-gold); }
#mobileNav .mn-panel a:active,
#mobileNav .mn-panel button:active { color: var(--mn-forest); }
#mobileNav .mn-panel a:active .chev,
#mobileNav .mn-panel button:active .chev { color: var(--mn-walnut); }
#mobileNav .mn-lead { color: var(--mn-gold) !important; }

/* ---------- footer ---------- */
#mobileNav .mn-foot {
  border-top: 1px solid rgba(184, 154, 98, 0.42);
}
/* the reference marks its closing rule with a small gold lozenge */
#mobileNav .mn-foot::before {
  content: "";
  position: absolute;
  left: 50%; top: 0;
  width: 7px; height: 7px;
  transform: translate(-50%, -50%) rotate(45deg);
  background: var(--mn-gold);
  box-shadow: 0 0 0 4px var(--mn-ivory);
}
#mobileNav .mn-foot { position: relative; }
#mobileNav .mn-foot .mn-acct { color: var(--mn-gold); }
#mobileNav .mn-foot .mn-acct:active { color: var(--mn-forest); }
#mobileNav .mn-foot p { color: rgba(59, 48, 37, 0.8); }

/* ============================================================
   DESKTOP MEGA MENU — WARM IVORY VARIATION
   The same palette the mobile menu uses, so both navigation
   surfaces read as one system. Structure, grid, content and the
   GSAP open/close timeline are untouched.
   ============================================================ */
:root {
  --mn-ivory:    #F3EBDD;
  --mn-ivory-hi: #FBF6EC;
  --mn-ivory-lo: #EDE2CE;
  --mn-forest:   #17261B;
  --mn-gold:     #B89A62;
  --mn-gold-ink: #7C6132;   /* gold used as TEXT — the decorative gold is too light to read at small sizes */
  --mn-walnut:   #3B3025;
}

.mega-sheet {
  background: linear-gradient(180deg, #F7F1E6 0%, var(--mn-ivory) 52%, var(--mn-ivory-lo) 100%);
  border-top: 1px solid rgba(184, 154, 98, 0.55);
  box-shadow: 0 26px 60px rgba(45, 34, 20, 0.22);
}
/* a whisper of the same vine, tucked into the bottom-left corner
   where no column type sits */
.mega-sheet::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 22%; height: 62%;
  pointer-events: none;
  opacity: 0.5;
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: contain;
  transform: rotate(180deg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cg stroke='%23D8CAB0' stroke-width='1.4' fill='none' stroke-linecap='round'%3E%3Cpath d='M0 18 C 46 14, 86 34, 110 70 C 130 100, 140 140, 142 196'/%3E%3Cpath d='M22 20 C 30 40, 30 56, 22 70'/%3E%3Cpath d='M62 32 C 72 52, 72 68, 62 84'/%3E%3Cpath d='M100 62 C 112 82, 114 100, 106 116'/%3E%3Cpath d='M126 106 C 136 124, 138 142, 132 158'/%3E%3C/g%3E%3Cg fill='%23DED2BC'%3E%3Cellipse rx='17' ry='6.5' transform='translate(30,44) rotate(58)'/%3E%3Cellipse rx='19' ry='7' transform='translate(70,60) rotate(62)'/%3E%3Cellipse rx='18' ry='6.5' transform='translate(110,92) rotate(56)'/%3E%3Cellipse rx='16' ry='6' transform='translate(134,134) rotate(60)'/%3E%3Cellipse rx='14' ry='5.5' transform='translate(14,8) rotate(24)'/%3E%3Cellipse rx='15' ry='5.5' transform='translate(52,20) rotate(18)'/%3E%3Cellipse rx='14' ry='5' transform='translate(92,44) rotate(26)'/%3E%3C/g%3E%3C/svg%3E");
}
.mega-inner { z-index: 1; }

.mg-col h4 { color: var(--mn-gold); }
.mg-col > i { background: rgba(184, 154, 98, 0.7); }
.mg-col a { color: var(--mn-walnut); }
.mg-col a::after { background: var(--mn-gold); }
.mg-col a:hover { color: var(--mn-forest); }

/* the promo stays a photograph with its own dark scrim — that contrast
   against the ivory is what the reference plate does too */
.mg-promo { border-color: rgba(184, 154, 98, 0.69); }

/* ============================================================
   LEGIBILITY PASS
   Same typeface, same hierarchy, same palette roles — only the
   weight and contrast change so every line is comfortably
   readable. Decorative gold stays #B89A62; gold used as TEXT
   moves to --mn-gold-ink, which is the same hue read darker.
   ============================================================ */
body { font-weight: 400; }

/* letterspaced small caps need more weight to hold at small sizes */
.mn-lead, .mn-foot .mn-acct, .mg-col h4,
.k-eyebrow, .b-eyebrow, .x-eyebrow, .sh-st-line,
.f-col h4, .f-news h4, .c-item span, .b-corner span, .k-corner span,
.hero-desc, .eyebrow, .sp-label { font-weight: 500; }

/* gold text -> readable gold */
.mn-lead, .mn-foot .mn-acct, .mg-col h4,
.k-eyebrow, .b-eyebrow, .sp-list a .sp-ctx, .sp-label { color: var(--mn-gold-ink) !important; }
#mobileNav .mn-lead, #mobileNav .mn-foot .mn-acct { color: var(--mn-gold-ink) !important; }

/* body copy and nav sit at full ink */
.nav-side a, .mn-panel a, .mn-panel button, .f-col a { font-weight: 400; }
.cta .lbl, .btn .lbl, .pop-cta .lbl, .sh-cta, .sh-ghost { font-weight: 500; }