:root {
  --maroon: #8B1A2B;
  --maroon-dark: #6d1322;
  --gold: #d4a24a;
  --gold-soft: #ecc981;
  --cream: #faf7f2;
  --ink: #2b2028;
  --muted: #8a7a82;
  --line: #ece0d3;
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* ---- Woven fabric textures (pure CSS, no image files) ---- */
  /* Silk: fine vertical warp threads → satin sheen */
  --silk: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%22200%22%20height=%22200%22%3E%3Cfilter%20id=%22s%22%3E%3CfeTurbulence%20type=%22fractalNoise%22%20baseFrequency=%220.006%200.12%22%20numOctaves=%223%22%20stitchTiles=%22stitch%22/%3E%3CfeColorMatrix%20type=%22saturate%22%20values=%220%22/%3E%3C/filter%3E%3Crect%20width=%22200%22%20height=%22200%22%20filter=%22url(%23s)%22/%3E%3C/svg%3E");
  /* Cotton: even plain-weave grain → matte cloth */
  --cotton: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%22160%22%20height=%22160%22%3E%3Cfilter%20id=%22c%22%3E%3CfeTurbulence%20type=%22fractalNoise%22%20baseFrequency=%220.11%22%20numOctaves=%222%22%20stitchTiles=%22stitch%22/%3E%3CfeColorMatrix%20type=%22saturate%22%20values=%220%22/%3E%3C/filter%3E%3Crect%20width=%22160%22%20height=%22160%22%20filter=%22url(%23c)%22/%3E%3C/svg%3E");
  /* Booti: a woven gold jaali/booti motif (like a saree body print) */
  --booti: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%22120%22%20height=%22120%22%3E%3Cg%20fill=%22none%22%20stroke=%22%23d4a24a%22%20stroke-opacity=%220.33%22%20stroke-width=%221.1%22%3E%3Cpath%20d=%22M60%2012%20L108%2060%20L60%20108%20L12%2060%20Z%22/%3E%3C/g%3E%3Ccircle%20cx=%2260%22%20cy=%2260%22%20r=%224.5%22%20fill=%22%23d4a24a%22%20fill-opacity=%220.28%22/%3E%3Ccircle%20cx=%220%22%20cy=%220%22%20r=%224.5%22%20fill=%22%23d4a24a%22%20fill-opacity=%220.28%22/%3E%3Ccircle%20cx=%22120%22%20cy=%22120%22%20r=%224.5%22%20fill=%22%23d4a24a%22%20fill-opacity=%220.28%22/%3E%3C/svg%3E");
  /* Scalloped drape hems (one tile = one downward scallop) */
  --scallop-maroon: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%2260%22%20height=%2228%22%3E%3Cpath%20d=%22M0%200%20H60%20V13%20A30%2015%200%200%201%200%2013%20Z%22%20fill=%22%238B1A2B%22/%3E%3C/svg%3E");
  --scallop-cream: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%2260%22%20height=%2228%22%3E%3Cpath%20d=%22M0%200%20H60%20V13%20A30%2015%200%200%201%200%2013%20Z%22%20fill=%22%23faf7f2%22/%3E%3C/svg%3E");
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  color: var(--ink);
  background-color: var(--cream);
  /* Static gold booti weave — normal scroll (no fixed attachment = no jank) */
  background-image: var(--booti);
  background-size: 120px 120px;
  line-height: 1.6;
  font-weight: 300;
}
img { max-width: 100%; display: block; }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.1; }

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 12px;
  font-weight: 500;
  color: var(--gold);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  padding: 12px 26px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  border: 1.5px solid transparent;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--maroon); color: #fff; box-shadow: 0 6px 18px rgba(139,26,43,.28); }
.btn-primary:hover { background: var(--maroon-dark); }
.btn-outline { border-color: var(--maroon); color: var(--maroon); background: transparent; }
.btn-outline:hover { background: var(--maroon); color: #fff; }
.btn-ghost { border-color: rgba(255,255,255,.55); color: #fff; padding: 8px 18px; }
.btn-ghost:hover { background: rgba(255,255,255,.15); }

/* ---------- Opening logo splash ---------- */
/* Big centered logo → shrinks into the header corner on scroll (js/site.js).
   JS sets the logo's size/position each frame; these are the at-rest defaults. */
.intro { position: fixed; inset: 0; z-index: 40; pointer-events: none; }
.intro-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 90% at 50% 38%, rgba(232, 176, 75, .16), transparent 60%),
    linear-gradient(160deg, var(--cream) 0%, #f2e8d9 100%);
  will-change: opacity;
}
/* The logo is a wide, transparent gold+black lockup shown bare on the cream
   backdrop (as designed) at its natural aspect ratio. */
.intro-logo {
  position: fixed; left: 50%; top: 44%; margin: 0;
  width: min(82vw, 420px); height: auto;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 12px 26px rgba(123, 30, 58, .12));
  will-change: width, left, top, opacity;
}
.intro-hint {
  position: fixed; left: 50%; bottom: 42px; transform: translateX(-50%);
  color: rgba(139, 26, 43, .6);
  font-family: var(--sans); font-size: 12px; font-weight: 500;
  letter-spacing: .28em; text-transform: uppercase;
  animation: introBounce 1.8s ease-in-out infinite;
}
@keyframes introBounce {
  0%, 100% { transform: translate(-50%, 0); }
  50% { transform: translate(-50%, 7px); }
}
/* Dedicated scroll room for the splash so the hero isn't scrolled past under it. */
.intro-spacer { height: 62vh; }
@media (prefers-reduced-motion: reduce) { .intro, .intro-spacer { display: none; } }

/* ---------- Header ---------- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px clamp(18px, 5vw, 56px);
  transition: background .25s ease, padding .25s ease, box-shadow .25s ease;
}
.site-header.scrolled {
  background: linear-gradient(135deg, var(--maroon-dark), var(--maroon));
  padding-top: 10px; padding-bottom: 10px;
  box-shadow: 0 4px 20px rgba(0,0,0,.18);
}
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: #fff; }
.brand-mark {
  width: 52px; height: 52px; border-radius: 12px; object-fit: contain;
  background: #fff; padding: 4px; box-shadow: 0 2px 12px rgba(0,0,0,.22);
}
.brand-text strong { font-family: var(--serif); font-size: 22px; font-weight: 700; display: block; line-height: 1; color: #fff; }
.brand-text small { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; opacity: .85; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex; align-items: center;
  padding: 120px clamp(18px, 5vw, 56px) 80px;
  overflow: hidden;
  color: #fff;
}
/* Backdrop. Drop /images/hero.jpg and it auto-shows on top of the gradient. */
.hero-photo {
  position: absolute; inset: 0;
  background:
    image-set("/images/hero.jpg" 1x) center / cover no-repeat,
    linear-gradient(115deg, transparent 32%, rgba(255,255,255,.07) 49%, rgba(255,255,255,.11) 52%, transparent 72%),
    var(--silk),
    radial-gradient(120% 90% at 78% 20%, rgba(212,162,74,.40), transparent 55%),
    linear-gradient(135deg, var(--maroon-dark) 0%, var(--maroon) 55%, #a12437 100%);
  background-size: cover, cover, 200px 200px, cover, cover;
  background-blend-mode: normal, screen, soft-light, normal, normal;
}
.hero-photo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(43,32,40,.62) 0%, rgba(43,32,40,.30) 45%, transparent 75%);
}
/* ---------- Scroll reveal + motion ---------- */
.reveal { opacity: 0; transform: translateY(28px) scale(.985); transform-origin: 50% 0; transition: opacity .7s ease, transform .85s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: none; }
.highlights .highlight:nth-child(2) { transition-delay: .09s; }
.highlights .highlight:nth-child(3) { transition-delay: .18s; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none; }
  .hero-photo::before { animation: none; }
}
.hero-inner { position: relative; max-width: 640px; }
.hero .eyebrow { color: var(--gold-soft); }
.hero h1 {
  font-size: clamp(38px, 6vw, 72px);
  margin: 14px 0 18px;
  letter-spacing: -.5px;
}
.hero h1 em { color: var(--gold); font-style: italic; }
.lead { font-size: clamp(16px, 2vw, 19px); max-width: 46ch; opacity: .92; font-weight: 300; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.hero .btn-outline { border-color: rgba(255,255,255,.7); color: #fff; }
.hero .btn-outline:hover { background: #fff; color: var(--maroon); }

/* ---------- Scalloped drape dividers ---------- */
/* Maroon hero drapes down over the cream highlights */
.highlights { position: relative; }
.highlights::before {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 28px; z-index: 2;
  pointer-events: none;
  background: var(--scallop-maroon) top left repeat-x;
  background-size: 60px 28px;
}
/* Cream body drapes down over the maroon showroom section */
.visit { position: relative; }
.visit::before {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 28px; z-index: 2;
  pointer-events: none;
  background: var(--scallop-cream) top left repeat-x;
  background-size: 60px 28px;
}

/* ---------- Highlights ---------- */
.highlights {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  padding: clamp(60px, 8vw, 96px) clamp(18px, 5vw, 56px) clamp(48px, 8vw, 90px);
  max-width: 1120px; margin: 0 auto;
}
.highlight {
  position: relative;
  background-color: #fff; background-image: var(--cotton);
  background-size: 160px 160px; background-blend-mode: soft-light;
  border: 1px solid var(--line); border-radius: 18px;
  padding: 34px 26px 32px; text-align: center;
  box-shadow: 0 8px 30px rgba(139,26,43,.05);
  overflow: hidden;
}
/* Zari (gold thread) border along the top, like a saree edge */
.highlight::before {
  content: ""; position: absolute; left: 22px; right: 22px; top: 0; height: 3px;
  border-radius: 0 0 3px 3px;
  background: linear-gradient(90deg, transparent, var(--gold) 18%, var(--gold-soft) 50%, var(--gold) 82%, transparent);
}
.hl-icon {
  display: inline-grid; place-items: center;
  width: 54px; height: 54px; border-radius: 50%;
  background: linear-gradient(135deg, var(--gold), var(--gold-soft));
  color: var(--maroon-dark); font-size: 22px; font-weight: 600;
  margin-bottom: 16px;
}
.highlight h3 { font-size: 24px; color: var(--maroon); margin-bottom: 8px; }
.highlight p { font-size: 14.5px; color: var(--muted); }

/* ---------- Section head ---------- */
.section-head { text-align: center; margin-bottom: 42px; }
.section-head h2 {
  font-size: clamp(30px, 4.5vw, 46px); color: var(--ink); margin-top: 6px;
  position: relative; display: inline-block;
}
/* Zari thread that draws itself under the heading as the section reveals */
.section-head h2::after {
  content: ""; position: absolute; left: 50%; bottom: -14px; transform: translateX(-50%);
  width: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), var(--gold-soft), var(--gold), transparent);
  transition: width .9s ease .25s;
}
.section-head.in h2::after { width: 120px; }

/* ---------- Gallery ---------- */
.gallery { padding: clamp(24px, 4vw, 40px) clamp(18px, 5vw, 56px) clamp(48px, 8vw, 90px); max-width: 1120px; margin: 0 auto; }
.gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.tile {
  position: relative; aspect-ratio: 3/4; border-radius: 16px; overflow: hidden;
  display: flex; align-items: flex-end;
  background-size: cover; background-position: center;
  box-shadow: 0 10px 30px rgba(139,26,43,.12);
  transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease;
}
.tile:hover { transform: translateY(-6px) scale(1.015); box-shadow: 0 20px 44px rgba(139,26,43,.24); }
/* Drop /images/saree-N.jpg and it auto-shows on top of the gradient placeholder.
   Until then each tile shows a woven fabric matching its label. */
.tile-1 { /* Festive Silk — lustrous warp sheen */
  background: image-set("/images/saree-1.jpg" 1x) center/cover no-repeat, var(--silk), linear-gradient(160deg, #a12437, #6d1322);
  background-size: cover, 200px 200px, cover; background-blend-mode: normal, soft-light, normal;
}
.tile-2 { /* Designer Party-wear — golden shimmer silk */
  background: image-set("/images/saree-2.jpg" 1x) center/cover no-repeat, var(--silk), linear-gradient(160deg, #c39447, #8B1A2B);
  background-size: cover, 200px 200px, cover; background-blend-mode: normal, soft-light, normal;
}
.tile-3 { /* Banarasi Classics — deep brocade weave */
  background: image-set("/images/saree-3.jpg" 1x) center/cover no-repeat, var(--cotton), linear-gradient(160deg, #7a1526, #2b2028);
  background-size: cover, 160px 160px, cover; background-blend-mode: normal, overlay, normal;
}
.tile-4 { /* Everyday Fancy — matte cotton */
  background: image-set("/images/saree-4.jpg" 1x) center/cover no-repeat, var(--cotton), linear-gradient(160deg, #b06340, #8B1A2B);
  background-size: cover, 160px 160px, cover; background-blend-mode: normal, soft-light, normal;
}
.tile::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 30% 25%, rgba(212,162,74,.28) 0 6px, transparent 7px),
    radial-gradient(circle at 70% 55%, rgba(255,255,255,.12) 0 4px, transparent 5px),
    radial-gradient(circle at 45% 80%, rgba(212,162,74,.18) 0 5px, transparent 6px);
  background-size: 70px 70px;
}
.tile figcaption {
  position: relative; z-index: 1; width: 100%;
  padding: 16px; color: #fff; font-family: var(--serif); font-size: 20px; font-weight: 600;
  background: linear-gradient(transparent, rgba(0,0,0,.5));
}
.gallery-note { text-align: center; color: var(--muted); margin-top: 26px; font-size: 15px; }

/* ---------- Visit + Map ---------- */
.visit {
  background:
    var(--silk),
    radial-gradient(120% 80% at 20% 10%, rgba(212,162,74,.30), transparent 55%),
    linear-gradient(135deg, var(--maroon-dark), var(--maroon));
  background-size: 200px 200px, cover, cover;
  background-blend-mode: soft-light, normal, normal;
  color: #fff; text-align: center;
  padding: clamp(56px, 9vw, 100px) clamp(18px, 5vw, 56px) 0;
}
.visit-inner { padding-bottom: clamp(40px, 6vw, 64px); }
.visit h2 { font-size: clamp(30px, 4.5vw, 48px); margin: 6px 0 20px; }
.visit .eyebrow { color: var(--gold-soft); }
.visit-addr { font-size: 18px; line-height: 1.9; opacity: .95; }
.visit-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin: 30px 0 18px; }
.visit .btn-outline { border-color: rgba(255,255,255,.6); color: #fff; }
.visit .btn-outline:hover { background: #fff; color: var(--maroon); }
.visit-hours { font-size: 14px; opacity: .8; letter-spacing: .04em; }
.visit-serves { max-width: 620px; margin: 16px auto 0; font-size: 13px; line-height: 1.7; opacity: .72; }

/* Interactive 3D storefront card */
.storefront { max-width: 1120px; margin: 0 auto clamp(38px, 6vw, 58px); }
.storefront-stage { perspective: 1100px; display: flex; justify-content: center; }
.storefront-card {
  position: relative; margin: 0;
  width: min(400px, 82vw); aspect-ratio: 627 / 1017;
  border-radius: 18px; overflow: hidden;
  border: 5px solid rgba(255,255,255,.92);
  box-shadow: 0 26px 60px rgba(0,0,0,.42);
  background: linear-gradient(160deg, #7a1526, #2b2028);
  transform-style: preserve-3d; will-change: transform;
  transition: transform .3s ease, box-shadow .3s ease;
}
.storefront-card img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; transition: opacity .5s ease; }
.storefront-card img.loaded { opacity: 1; }
/* Moving glass highlight for the "3D display case" feel */
.storefront-shine {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(130deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 32%);
  mix-blend-mode: screen;
}
.storefront-cap {
  text-align: center; color: #fff; opacity: .92;
  margin-top: 16px; font-family: var(--serif); font-size: 21px; letter-spacing: .3px;
}
/* Whole card is a tappable link to the shop's Google Maps location. */
.storefront-link { display: block; text-decoration: none; color: inherit; cursor: pointer; }
/* "Tap to open" pill sitting on the card. */
.storefront-badge {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
  z-index: 2; white-space: nowrap;
  background: rgba(43,32,40,.82); color: #fff;
  font-family: var(--sans); font-size: 12.5px; font-weight: 500; letter-spacing: .02em;
  padding: 8px 15px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.28);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  box-shadow: 0 4px 14px rgba(0,0,0,.32);
  transition: background .2s ease, transform .2s ease;
}
.storefront-link:hover .storefront-badge { background: var(--maroon); transform: translateX(-50%) translateY(-2px); }
.storefront-link:hover .storefront-cap { opacity: 1; }

/* ---------- Footer ---------- */
.site-footer { background: var(--ink); color: #fff; text-align: center; padding: 34px 20px; }
.site-footer p { font-size: 14px; }
.site-footer strong { font-family: var(--serif); font-size: 17px; }
.site-footer .muted { color: #a99ba3; margin-top: 6px; font-size: 12.5px; }

/* ---------- Responsive ---------- */
@media (max-width: 820px) {
  .highlights { grid-template-columns: 1fr; }
  .gallery-grid { grid-template-columns: 1fr 1fr; }
  .header-cta { display: none; }
}
@media (max-width: 480px) {
  .gallery-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .hero { padding-top: 96px; }
  .brand-text strong { font-size: 19px; }
}