/* =====================================================
   RAREPRISM — Luxury Crystal Chandeliers
   Stylesheet | © 2026 RAREPRISM Atelier, Dubai
   ===================================================== */

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

:root{
  --black:#0a0a0a;
  --charcoal:#141414;
  --graphite:#1d1d1f;
  --titanium:#2a2a2c;
  --steel:#3a3a3c;
  --platinum:#c8c8cc;
  --silver:#a0a0a4;
  --white:#f5f5f7;
  --champagne:#d4af7a;
  --champagne-dark:#a88656;
}

html{scroll-behavior:smooth;background:#0a0a0a}
body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  background:var(--black);
  color:var(--white);
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
.serif{font-family:'Cormorant Garamond',Georgia,serif;font-weight:300;letter-spacing:0.01em}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none;transition:all .3s ease}

/* ============ UTILITY ============ */
.container{max-width:1400px;margin:0 auto}
.centered-block{text-align:center;max-width:800px;margin:0 auto}
.centered{margin:0 auto}
.mb30{margin-bottom:30px}
.mt10{margin-top:10px}
.mt20{margin-top:20px}
.mt24{margin-top:24px}
.mt60{margin-top:60px}
.muted-body{color:var(--platinum);font-weight:300;line-height:1.8}

/* ============ NAVIGATION ============ */
nav{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  padding:24px 60px;
  background:rgba(10,10,10,.6);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid rgba(255,255,255,.05);
  display:flex;justify-content:space-between;align-items:center;
  transition:padding .3s ease,background .3s ease;
}
nav.scrolled{padding:16px 60px;background:rgba(10,10,10,.92)}
.logo{
  font-family:'Cormorant Garamond',serif;
  font-size:24px;font-weight:500;letter-spacing:.4em;color:var(--white);
}
.logo span{color:var(--champagne)}
.nav-menu{display:flex;gap:38px;list-style:none}
.nav-menu a{
  font-size:11px;letter-spacing:.25em;text-transform:uppercase;
  color:var(--platinum);font-weight:400;position:relative;padding:8px 0;
}
.nav-menu a:hover{color:var(--white)}
.nav-menu a::after{
  content:'';position:absolute;bottom:0;left:0;width:0;height:1px;
  background:var(--champagne);transition:width .4s ease;
}
.nav-menu a:hover::after{width:100%}
.nav-cta{
  font-size:11px;letter-spacing:.25em;text-transform:uppercase;
  padding:12px 26px;border:1px solid var(--champagne);color:var(--champagne);
  transition:all .3s ease;
}
.nav-cta:hover{background:var(--champagne);color:var(--black)}
.hamburger{display:none;background:none;border:none;color:var(--white);font-size:24px;cursor:pointer}

/* ============ HERO (Pure Black, Chandelier Lights Up) ============ */
.hero{
  position:relative;
  height:100vh;
  min-height:720px;
  width:100%;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  background:#000;
  isolation:isolate;
}

/* The black stage that contains everything */
.hero-stage{
  position:absolute;
  inset:0;
  background:#000;
  z-index:1;
  overflow:hidden;
}

/* Soft radial glow that grows behind the chandelier */
.hero-glow{
  position:absolute;
  top:50%;
  right:14%;
  transform:translate(50%,-50%);
  width:75vh;
  height:75vh;
  border-radius:50%;
  background:radial-gradient(circle,
    rgba(255,210,150,.32) 0%,
    rgba(255,180,110,.18) 28%,
    rgba(212,175,122,.08) 55%,
    rgba(0,0,0,0) 75%);
  filter:blur(8px);
  opacity:0;
  animation:heroGlowOn 2.6s cubic-bezier(.16,.84,.44,1) 1s forwards,
            heroGlowBreathe 6s ease-in-out 4s infinite;
  z-index:1;
}

/* The chandelier image */
.hero-chandelier{
  position:absolute;
  top:50%;
  right:6%;
  transform:translateY(-50%) scale(.96);
  height:115%;
  width:auto;
  max-width:65%;
  object-fit:contain;
  filter:brightness(.18) contrast(1.05) saturate(.7);
  opacity:.55;
  animation:heroChandelierLightUp 3.4s cubic-bezier(.16,.84,.44,1) 1.3s forwards,
            heroChandelierBreathe 7s ease-in-out 5s infinite;
  z-index:2;
  pointer-events:none;
}

/* Light rays radiating outward from the chandelier */
.hero-rays{
  position:absolute;
  top:50%;
  right:14%;
  transform:translate(50%,-50%);
  width:90vh;
  height:90vh;
  z-index:1;
  opacity:0;
  animation:heroRaysOn 2s ease-out 2.4s forwards;
}
.hero-rays span{
  position:absolute;
  top:50%;left:50%;
  width:140%;
  height:1px;
  background:linear-gradient(90deg,
    transparent 0%,
    rgba(255,210,150,.0) 30%,
    rgba(255,210,150,.22) 50%,
    rgba(255,210,150,.0) 70%,
    transparent 100%);
  transform-origin:left center;
  filter:blur(.8px);
}
.hero-rays span:nth-child(1){transform:translate(-50%,-50%) rotate(0deg)}
.hero-rays span:nth-child(2){transform:translate(-50%,-50%) rotate(30deg)}
.hero-rays span:nth-child(3){transform:translate(-50%,-50%) rotate(60deg)}
.hero-rays span:nth-child(4){transform:translate(-50%,-50%) rotate(90deg)}
.hero-rays span:nth-child(5){transform:translate(-50%,-50%) rotate(120deg)}
.hero-rays span:nth-child(6){transform:translate(-50%,-50%) rotate(150deg)}

/* Vignette on top so text is readable */
.hero::after{
  content:'';
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,rgba(0,0,0,.85) 0%,rgba(0,0,0,.6) 30%,rgba(0,0,0,0) 55%,rgba(0,0,0,0) 100%),
    linear-gradient(180deg,rgba(0,0,0,.2) 0%,rgba(0,0,0,.5) 100%);
  z-index:3;
  pointer-events:none;
}

.hero-content{
  position:relative;
  z-index:4;
  text-align:left;
  padding:0 80px;
  max-width:780px;
  margin-left:6%;
  animation:fadeUp 1.4s ease .6s both;
}

/* ----- Hero Animations ----- */
@keyframes heroGlowOn{
  0%{opacity:0;transform:translate(50%,-50%) scale(.5)}
  100%{opacity:1;transform:translate(50%,-50%) scale(1)}
}
@keyframes heroGlowBreathe{
  0%,100%{opacity:1;transform:translate(50%,-50%) scale(1)}
  50%{opacity:.85;transform:translate(50%,-50%) scale(1.05)}
}
@keyframes heroChandelierLightUp{
  0%{filter:brightness(.18) contrast(1.05) saturate(.7);opacity:.55;transform:translateY(-50%) scale(.96)}
  35%{filter:brightness(.45) contrast(1.08) saturate(.85);opacity:.78}
  70%{filter:brightness(.85) contrast(1.1) saturate(1);opacity:.95}
  100%{filter:brightness(1.05) contrast(1.08) saturate(1.05);opacity:1;transform:translateY(-50%) scale(1)}
}
@keyframes heroChandelierBreathe{
  0%,100%{filter:brightness(1.05) contrast(1.08) saturate(1.05)}
  50%{filter:brightness(1.15) contrast(1.1) saturate(1.1)}
}
@keyframes heroRaysOn{
  0%{opacity:0}
  100%{opacity:.6}
}
.hero-eyebrow{
  font-size:12px;letter-spacing:.5em;text-transform:uppercase;
  color:var(--champagne);margin-bottom:32px;
  opacity:0;
  animation:fadeUp 1.2s ease 1.0s both;
}
.hero h1{
  font-family:'Cormorant Garamond',serif;font-weight:300;
  font-size:clamp(42px,7vw,96px);line-height:.95;letter-spacing:-.02em;
  margin-bottom:28px;
  opacity:0;
  animation:fadeUp 1.4s ease 1.3s both;
}
.hero h1 i{color:var(--champagne);font-weight:300}
.hero-sub{
  font-size:clamp(15px,1.4vw,18px);color:var(--platinum);font-weight:300;
  max-width:560px;margin:0 0 50px;letter-spacing:.04em;line-height:1.7;
  opacity:0;
  animation:fadeUp 1.4s ease 1.7s both;
}
.hero-ctas{
  display:flex;gap:20px;justify-content:flex-start;flex-wrap:wrap;
  opacity:0;
  animation:fadeUp 1.4s ease 2.1s both;
}
.btn{
  display:inline-block;padding:18px 42px;font-size:11px;letter-spacing:.3em;
  text-transform:uppercase;font-weight:500;border:1px solid transparent;
  cursor:pointer;transition:all .4s ease;font-family:inherit;
}
.btn-primary{background:var(--champagne);color:var(--black);border-color:var(--champagne)}
.btn-primary:hover{background:transparent;color:var(--champagne)}
.btn-ghost{background:transparent;color:var(--white);border-color:rgba(255,255,255,.4)}
.btn-ghost:hover{border-color:var(--white);background:rgba(255,255,255,.05)}
.scroll-indicator{
  position:absolute;bottom:32px;left:50%;transform:translateX(-50%);z-index:3;
  color:var(--platinum);font-size:10px;letter-spacing:.4em;text-transform:uppercase;
  animation:bounce 2.5s infinite;
}
.scroll-indicator::after{
  content:'';display:block;width:1px;height:32px;background:var(--platinum);
  margin:14px auto 0;
}

/* ============ PRESS BAR ============ */
.press{
  padding:50px 60px;background:var(--charcoal);
  border-top:1px solid rgba(255,255,255,.05);border-bottom:1px solid rgba(255,255,255,.05);
}
.press-inner{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:30px;max-width:1400px;margin:0 auto}
.press-label{font-size:10px;letter-spacing:.4em;text-transform:uppercase;color:var(--silver)}
.press-logos{display:flex;gap:50px;flex-wrap:wrap;align-items:center}
.press-logos span{
  font-family:'Cormorant Garamond',serif;font-size:18px;color:var(--platinum);
  font-style:italic;font-weight:400;opacity:.6;transition:opacity .3s;
}
.press-logos span:hover{opacity:1}

/* ============ SECTION BASE ============ */
section{padding:120px 60px;position:relative}
.section-eyebrow{
  font-size:11px;letter-spacing:.5em;text-transform:uppercase;
  color:var(--champagne);margin-bottom:24px;
}
.section-title{
  font-family:'Cormorant Garamond',serif;font-weight:300;
  font-size:clamp(36px,5vw,68px);line-height:1.05;letter-spacing:-.01em;
  margin-bottom:32px;
}
.section-title i{color:var(--champagne);font-weight:300}
.section-lead{
  font-size:17px;color:var(--platinum);max-width:680px;font-weight:300;line-height:1.8;
}

/* ============ PILLARS ============ */
.pillars{background:var(--black)}
.pillars-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:60px;margin-top:80px}
.pillar{padding:50px 32px;border:1px solid rgba(255,255,255,.06);transition:all .5s ease;background:var(--graphite)}
.pillar:hover{border-color:var(--champagne);transform:translateY(-8px);background:#1f1f21}
.pillar-num{font-size:14px;color:var(--champagne);letter-spacing:.3em;margin-bottom:24px}
.pillar h3{font-family:'Cormorant Garamond',serif;font-size:32px;font-weight:400;margin-bottom:18px;line-height:1.2}
.pillar p{color:var(--platinum);font-size:15px;line-height:1.8;font-weight:300}

/* ============ STORY ============ */
.story{background:var(--charcoal)}
.story-grid{display:grid;grid-template-columns:1fr 1fr;gap:100px;align-items:center}
.story-img{
  position:relative;
  aspect-ratio:4/5;
  background:#000;
  border:1px solid rgba(212,175,122,.18);
  padding:40px;
  transition:border-color .6s ease, transform .8s ease;
  overflow:hidden;
}
.story-img::before{
  content:'';
  position:absolute;
  inset:14px;
  border:1px solid rgba(212,175,122,.10);
  pointer-events:none;
  z-index:1;
}
.story-img img{
  width:100%;
  height:100%;
  object-fit:contain;
  transition:transform 1.4s ease;
  position:relative;
  z-index:2;
}
.story-img:hover{border-color:rgba(212,175,122,.45);transform:translateY(-4px)}
.story-img:hover img{transform:scale(1.04)}
@media (max-width:640px){
  .story-img{padding:24px}
  .story-img::before{inset:10px}
}
.quote{
  font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:300;
  font-size:28px;line-height:1.5;color:var(--white);padding:40px 0;
  border-top:1px solid rgba(212,175,122,.3);border-bottom:1px solid rgba(212,175,122,.3);
  margin:40px 0;
}
.quote::before{content:'"';color:var(--champagne);font-size:48px;display:block;line-height:0;margin-bottom:20px}

/* ============ PROCESS ============ */
.process{background:var(--black)}
.process-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;margin-top:80px}
.step{padding:40px 26px;background:var(--graphite);border:1px solid rgba(255,255,255,.05);transition:all .4s ease;position:relative}
.step:hover{border-color:var(--champagne);background:#1f1f21}
.step-num{
  font-family:'Cormorant Garamond',serif;font-size:64px;font-weight:300;
  color:var(--champagne);line-height:1;margin-bottom:24px;opacity:.7;
}
.step h4{font-family:'Cormorant Garamond',serif;font-size:24px;font-weight:400;margin-bottom:14px}
.step p{font-size:14px;color:var(--platinum);font-weight:300;line-height:1.7}

/* ============ SMART TECH ============ */
.smart{background:var(--charcoal);position:relative;overflow:hidden}
.smart-video-wrap{margin:60px 0;aspect-ratio:16/9;overflow:hidden;border:1px solid rgba(255,255,255,.08)}
.smart-video-wrap video,.smart-video-wrap img{width:100%;height:100%;object-fit:cover}
.features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:60px}
.feature{padding:32px 24px;background:var(--graphite);border:1px solid rgba(255,255,255,.05);transition:all .4s}
.feature:hover{border-color:var(--champagne);background:#1f1f21}
.feature-icon{font-size:28px;color:var(--champagne);margin-bottom:16px}
.feature h5{font-family:'Cormorant Garamond',serif;font-size:22px;font-weight:500;margin-bottom:10px}
.feature p{font-size:13px;color:var(--platinum);font-weight:300;line-height:1.7}

.scenes{margin-top:80px}
.scenes h3{font-family:'Cormorant Garamond',serif;font-size:36px;font-weight:300;margin-bottom:40px;text-align:center}
.scene-row{display:grid;grid-template-columns:repeat(5,1fr);gap:20px}
.scene{
  aspect-ratio:3/4;padding:30px 20px;display:flex;flex-direction:column;justify-content:flex-end;
  position:relative;overflow:hidden;cursor:pointer;transition:all .5s ease;
}
.scene:hover{transform:translateY(-6px)}
.scene-1{background:linear-gradient(180deg,#1a1a1a 0%,#c89545 100%)}
.scene-2{background:linear-gradient(180deg,#0a0a14 0%,#1e3a8a 100%)}
.scene-3{background:linear-gradient(180deg,#1a0a0a 0%,#d4602a 100%)}
.scene-4{background:linear-gradient(180deg,#0a1a14 0%,#5a8a6a 100%)}
.scene-5{background:linear-gradient(180deg,#1a0a14 0%,#8a3a6a 100%)}
.scene h6{font-family:'Cormorant Garamond',serif;font-size:22px;font-weight:500;color:var(--white)}
.scene p{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.7);margin-top:6px}

/* ============ MATERIAL & CRYSTAL LIBRARY ============ */
.materials{background:var(--black);padding-bottom:140px}
.mt80{margin-top:80px}
.mt120{margin-top:140px}

/* ----- Editorial Hero Image ----- */
.library-hero{
  position:relative;
  margin:60px 0 0;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
  background:#050505;
  aspect-ratio:16/8;
}
.library-hero img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform 2.2s cubic-bezier(.2,.7,.2,1);
}
.library-hero:hover img{transform:scale(1.03)}
.library-hero-overlay{
  position:absolute;
  left:48px;
  bottom:40px;
  z-index:2;
  max-width:60%;
}
.library-hero-eyebrow{
  font-size:10px;
  letter-spacing:.5em;
  text-transform:uppercase;
  color:var(--champagne);
  margin-bottom:14px;
}
.library-hero-title{
  font-family:'Cormorant Garamond',serif;
  font-weight:300;
  font-size:clamp(28px,3.4vw,52px);
  line-height:1.05;
  letter-spacing:-.01em;
  color:var(--white);
}
.library-hero-title i{color:var(--champagne);font-weight:300}
.library-hero::after{
  content:'';
  position:absolute;
  left:0;right:0;bottom:0;
  height:55%;
  background:linear-gradient(180deg,transparent 0%,rgba(10,10,10,.78) 100%);
  z-index:1;
  pointer-events:none;
}

/* ----- Metal Finish Card Grid ----- */
.finish-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:1px;
  margin-top:60px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.04);
}
.finish-card{
  background:var(--graphite);
  padding:36px 24px 32px;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  transition:background .5s ease, transform .5s ease;
  cursor:pointer;
  position:relative;
  overflow:hidden;
}
.finish-card::before{
  content:'';
  position:absolute;left:0;right:0;bottom:0;
  height:2px;
  background:var(--champagne);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .6s ease;
}
.finish-card:hover{background:#1f1f21;transform:translateY(-3px)}
.finish-card:hover::before{transform:scaleX(1)}

.finish-swatch{
  width:14px;
  height:88px;
  border-radius:1px;
  margin-bottom:24px;
  position:relative;
  box-shadow:0 8px 22px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.08);
  transition:transform .5s ease;
}
.finish-card:hover .finish-swatch{transform:translateY(-2px) scale(1.04)}
.finish-swatch::before{
  content:'';
  position:absolute;
  top:4px;left:50%;transform:translateX(-50%);
  width:3px;height:3px;
  border-radius:50%;
  background:rgba(0,0,0,.55);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.15);
}
.finish-swatch::after{
  content:'';
  position:absolute;inset:0;
  background:linear-gradient(115deg,rgba(255,255,255,.35) 0%,transparent 30%,transparent 70%,rgba(255,255,255,.15) 100%);
  border-radius:1px;
  pointer-events:none;
}
.finish-info{display:flex;flex-direction:column;align-items:center}
.finish-num{
  font-family:'Cormorant Garamond',serif;
  font-size:11px;
  letter-spacing:.3em;
  color:var(--champagne);
  margin-bottom:10px;
  font-style:italic;
}
.finish-card h5{font-family:'Cormorant Garamond',serif;font-size:20px;font-weight:500;margin-bottom:6px;color:var(--white)}
.finish-card p{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--silver);font-weight:300}

/* metal swatch colors */
.m-mirror-gold{background:linear-gradient(180deg,#fff5d4 0%,#f0d68a 30%,#d4af37 65%,#8a6f1f 100%)}
.m-satin-gold{background:linear-gradient(180deg,#e8d4a0 0%,#d4b878 50%,#8a7340 100%)}
.m-rose-gold{background:linear-gradient(180deg,#f5d4c4 0%,#d4a08a 50%,#8a5f4a 100%)}
.m-champ-gold{background:linear-gradient(180deg,#f0e0c0 0%,#d4bc8c 50%,#8a7050 100%)}
.m-antique-gold{background:linear-gradient(180deg,#b8985a 0%,#8a7040 50%,#4a3820 100%)}
.m-brass{background:linear-gradient(180deg,#d4b878 0%,#a88a48 50%,#6a5828 100%)}
.m-gunmetal{background:linear-gradient(180deg,#3a3a3c 0%,#1a1a1c 50%,#0a0a0c 100%)}
.m-nickel{background:linear-gradient(180deg,#e0e0e4 0%,#a8a8ac 50%,#5a5a5e 100%)}
.m-chrome{background:linear-gradient(180deg,#f0f0f4 0%,#c0c0c8 50%,#707074 100%)}
.m-bronze{background:linear-gradient(180deg,#a87848 0%,#6a4828 50%,#3a2818 100%)}

/* ----- Crystal Card Grid ----- */
.crystal-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:1px;
  margin-top:60px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.04);
}
.crystal-card{
  background:var(--graphite);
  padding:46px 24px 36px;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  transition:background .5s ease, transform .5s ease;
  cursor:pointer;
  position:relative;
  overflow:hidden;
}
.crystal-card::before{
  content:'';
  position:absolute;left:0;right:0;bottom:0;
  height:2px;
  background:var(--champagne);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .6s ease;
}
.crystal-card:hover{background:#1f1f21;transform:translateY(-3px)}
.crystal-card:hover::before{transform:scaleX(1)}

.crystal-swatch{
  width:96px;
  height:96px;
  margin-bottom:28px;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  filter:drop-shadow(0 10px 22px rgba(0,0,0,.65));
  transition:transform .5s ease;
}
.crystal-card:hover .crystal-swatch{transform:translateY(-3px) rotate(2deg)}

.crystal-shape{
  display:block;
  width:72px;
  height:72px;
  position:relative;
}
.shape-square{
  transform:rotate(45deg);
  width:60px;height:60px;
  background:inherit;
  border-radius:6px;
}
.shape-drop{
  width:34px;
  height:88px;
  background:inherit;
  clip-path:polygon(50% 0%,100% 50%,50% 100%,0% 50%);
}
.shape-teardrop{
  width:60px;
  height:80px;
  background:inherit;
  border-radius:50% 50% 50% 50% / 60% 60% 40% 40%;
  transform:translateY(-3px);
}
.shape-pear{
  width:56px;
  height:78px;
  background:inherit;
  border-radius:50% 50% 50% 50% / 65% 65% 35% 35%;
  transform:rotate(-8deg);
}

/* crystal swatch (color fill applied via parent gradient) */
.c-clear .crystal-shape{background:linear-gradient(135deg,#ffffff 0%,#dde9f0 40%,#a8c4d4 100%)}
.c-golden .crystal-shape{background:linear-gradient(135deg,#fff2c8 0%,#e0bc62 45%,#9a7826 100%)}
.c-champ .crystal-shape{background:linear-gradient(135deg,#faead0 0%,#d8be8e 45%,#8e7458 100%)}
.c-smoky .crystal-shape{background:linear-gradient(135deg,#a8a8a8 0%,#5a5a5a 50%,#2a2a2a 100%)}
.c-aurora .crystal-shape{background:linear-gradient(135deg,#c8a8d4 0%,#7898d4 30%,#a8d4b8 60%,#e6b8c8 100%)}
.c-aurora .crystal-shape{box-shadow:0 0 18px rgba(168,148,212,.25)}

.crystal-info{display:flex;flex-direction:column;align-items:center}
.crystal-card h5{font-family:'Cormorant Garamond',serif;font-size:20px;font-weight:500;margin-bottom:6px;color:var(--white)}
.crystal-card p{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--silver);font-weight:300}

/* ----- Library Responsive ----- */
@media (max-width:1024px){
  .finish-grid,.crystal-grid{grid-template-columns:repeat(2,1fr)}
  .library-hero-overlay{left:30px;bottom:28px;max-width:80%}
  .mt120{margin-top:90px}
}
@media (max-width:640px){
  .finish-grid,.crystal-grid{grid-template-columns:repeat(2,1fr)}
  .library-hero{aspect-ratio:4/3}
  .library-hero-overlay{left:20px;bottom:20px;right:20px;max-width:100%}
  .library-hero-title{font-size:24px}
  .finish-swatch{height:72px;width:12px}
  .crystal-swatch{width:72px;height:72px}
  .crystal-shape{width:60px;height:60px}
  .finish-card{padding:30px 14px 26px}
  .crystal-card{padding:34px 14px 28px}
  .finish-card h5,.crystal-card h5{font-size:17px}
}

/* ============ COLLECTIONS (3×3 luxury grid) ============ */
.collections{background:var(--charcoal)}
.collections-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:36px;
  margin-top:80px;
}
.collection{
  position:relative;
  background:#000;
  border:1px solid rgba(212,175,122,.18);
  padding:0;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  transition:border-color .6s ease, transform .6s ease, box-shadow .6s ease;
}
.collection:hover{
  border-color:rgba(212,175,122,.55);
  transform:translateY(-6px);
  box-shadow:0 24px 60px -20px rgba(212,175,122,.22), 0 0 0 1px rgba(212,175,122,.2);
}

/* Inner double border line */
.collection::before{
  content:'';
  position:absolute;
  inset:12px;
  border:1px solid rgba(212,175,122,.08);
  pointer-events:none;
  z-index:3;
  transition:border-color .6s ease;
}
.collection:hover::before{border-color:rgba(212,175,122,.22)}

/* Chandelier image area with generous padding */
.collection img{
  width:100%;
  aspect-ratio:1/1;
  object-fit:contain;
  padding:48px 40px 28px;
  background:radial-gradient(ellipse at center 55%,
    rgba(212,175,122,.05) 0%,
    rgba(0,0,0,0) 60%);
  opacity:.92;
  transition:transform 1.4s ease, opacity .6s ease, padding .6s ease;
  position:relative;
  z-index:1;
}
.collection:hover img{
  transform:scale(1.06);
  opacity:1;
}

/* Info block sits beneath the image, not overlaid */
.collection-info{
  position:relative;
  z-index:2;
  padding:0 36px 36px;
  text-align:center;
  background:transparent;
}
.collection-num{
  font-size:10px;
  letter-spacing:.4em;
  color:var(--champagne);
  margin-bottom:14px;
  text-transform:uppercase;
  font-style:italic;
  font-family:'Cormorant Garamond',serif;
}
.collection h3{
  font-family:'Cormorant Garamond',serif;
  font-size:30px;
  font-weight:400;
  margin-bottom:10px;
  color:var(--white);
  letter-spacing:.01em;
}
.collection p{
  font-size:13px;
  color:var(--platinum);
  font-weight:300;
  line-height:1.7;
  font-style:italic;
  margin-bottom:22px;
  min-height:44px;
}
.collection-cta{
  font-size:10px;
  letter-spacing:.35em;
  text-transform:uppercase;
  color:var(--champagne);
  border-bottom:1px solid rgba(212,175,122,.4);
  padding-bottom:4px;
  display:inline-block;
  transition:border-color .4s ease, letter-spacing .4s ease;
}
.collection:hover .collection-cta{
  border-color:var(--champagne);
  letter-spacing:.45em;
}

/* ============ PROJECTS ============ */
.projects{background:var(--black)}
.proj-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-top:80px}
.proj{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--graphite)}
.proj img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s;opacity:.6}
.proj:hover img{transform:scale(1.08);opacity:.9}
.proj-info{position:absolute;bottom:32px;left:32px;right:32px;z-index:2}
.proj-loc{font-size:10px;letter-spacing:.4em;text-transform:uppercase;color:var(--champagne);margin-bottom:8px}
.proj h4{font-family:'Cormorant Garamond',serif;font-size:26px;font-weight:400}

/* ============ CONFIGURATOR ============ */
.configurator{background:var(--charcoal)}
.config-box{
  background:var(--graphite);padding:60px;border:1px solid rgba(212,175,122,.3);
  margin-top:60px;counter-reset:step-counter;
}
.config-step{margin-bottom:50px}
.config-step h4{
  font-family:'Cormorant Garamond',serif;font-size:24px;font-weight:400;margin-bottom:20px;
  display:flex;align-items:center;gap:16px;
}
.config-step h4::before{
  content:counter(step-counter);counter-increment:step-counter;
  font-size:14px;color:var(--champagne);border:1px solid var(--champagne);
  width:32px;height:32px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
}
.config-options{display:flex;flex-wrap:wrap;gap:14px}
.opt{padding:12px 22px;border:1px solid rgba(255,255,255,.15);font-size:13px;letter-spacing:.05em;cursor:pointer;transition:all .3s;background:transparent;color:var(--platinum);font-family:inherit}
.opt:hover{border-color:var(--champagne);color:var(--champagne)}
.opt.selected{background:var(--champagne);color:var(--black);border-color:var(--champagne)}

/* ============ CONTACT ============ */
.contact{background:var(--black)}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;margin-top:80px}
.contact-info h4{font-family:'Cormorant Garamond',serif;font-size:28px;font-weight:400;margin-bottom:20px}
.contact-info p{color:var(--platinum);margin-bottom:14px;font-weight:300}
.contact-info .label{font-size:10px;letter-spacing:.4em;text-transform:uppercase;color:var(--champagne);margin-bottom:6px}
.contact form{display:flex;flex-direction:column;gap:22px}
.contact input,.contact textarea,.contact select{
  background:transparent;border:none;border-bottom:1px solid rgba(255,255,255,.2);
  color:var(--white);padding:14px 0;font-size:14px;font-family:inherit;outline:none;
  width:100%;
}
.contact input:focus,.contact textarea:focus{border-bottom-color:var(--champagne)}
.contact textarea{resize:vertical;min-height:100px}
.contact label{font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--silver);display:block;margin-bottom:4px}

/* ============ FOOTER ============ */
footer{background:#050505;padding:80px 60px 40px;border-top:1px solid rgba(255,255,255,.05)}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr;gap:60px;margin-bottom:60px}
.foot-brand h3{font-family:'Cormorant Garamond',serif;font-size:36px;font-weight:400;letter-spacing:.3em;margin-bottom:18px}
.foot-brand p{color:var(--silver);font-size:13px;line-height:1.8;font-weight:300;max-width:280px}
.foot-col h6{font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--champagne);margin-bottom:24px}
.foot-col ul{list-style:none}
.foot-col li{margin-bottom:12px}
.foot-col a{font-size:13px;color:var(--platinum);font-weight:300}
.foot-col a:hover{color:var(--white)}
.foot-bottom{border-top:1px solid rgba(255,255,255,.05);padding-top:30px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:20px}
.foot-bottom p{font-size:11px;color:var(--silver);letter-spacing:.05em}

/* ============ ANIMATIONS ============ */
@keyframes fadeUp{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:translateY(0)}}
@keyframes bounce{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(10px)}}
.reveal{opacity:0;transform:translateY(40px);transition:opacity 1s ease,transform 1s ease}
.reveal.in{opacity:1;transform:translateY(0)}

/* ============ SPARKLES ============ */
.sparkles{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.spark{position:absolute;width:2px;height:2px;background:var(--white);border-radius:50%;opacity:0;animation:sparkle 3s infinite}
@keyframes sparkle{0%,100%{opacity:0;transform:scale(0)}50%{opacity:1;transform:scale(1.5)}}

/* ============ MOBILE MENU OPEN STATE ============ */
.nav-menu.mobile-open{
  display:flex !important;
  position:fixed;top:70px;left:0;right:0;
  flex-direction:column;
  background:rgba(10,10,10,.98);
  padding:30px;gap:20px;
  border-bottom:1px solid rgba(255,255,255,.08);
}

/* ============ RESPONSIVE ============ */
@media (max-width: 1024px){
  nav{padding:20px 30px}
  section{padding:80px 30px}
  .nav-menu{display:none}
  .hamburger{display:block}
  .nav-cta{display:none}
  .hero{justify-content:center;text-align:center}
  .hero-content{margin-left:0;padding:0 30px;text-align:center;max-width:100%}
  .hero-content .hero-ctas{justify-content:center}
  .hero-sub{margin:0 auto 50px}
  .hero-chandelier{right:50%;transform:translate(50%,-50%) scale(.96);max-width:90%;height:80%;opacity:.35}
  .hero-glow{right:50%;width:60vh;height:60vh}
  .hero-rays{right:50%;width:75vh;height:75vh}
  .hero::after{background:linear-gradient(180deg,rgba(0,0,0,.4) 0%,rgba(0,0,0,.8) 100%)}
  @keyframes heroChandelierLightUp{
    0%{filter:brightness(.18) contrast(1.05) saturate(.7);opacity:.25;transform:translate(50%,-50%) scale(.94)}
    100%{filter:brightness(.95) contrast(1.08) saturate(1);opacity:.45;transform:translate(50%,-50%) scale(1)}
  }
  @keyframes heroChandelierBreathe{
    0%,100%{filter:brightness(.95) contrast(1.08) saturate(1);opacity:.45}
    50%{filter:brightness(1.05) contrast(1.1) saturate(1.05);opacity:.55}
  }
  .pillars-grid,.process-grid,.features-grid,.proj-grid{grid-template-columns:repeat(2,1fr)}
  .story-grid,.contact-grid{grid-template-columns:1fr;gap:50px}
  .collections-grid{grid-template-columns:repeat(2,1fr);gap:24px}
  .collection img{padding:36px 30px 22px}
  .collection-info{padding:0 28px 30px}
  .collection h3{font-size:26px}
  .foot-grid{grid-template-columns:1fr 1fr;gap:40px}
  .scene-row{grid-template-columns:repeat(3,1fr)}
  .swatch{flex:0 0 140px}
  .swatch-color{width:140px;height:140px}
  .config-box{padding:30px}
  .press{padding:40px 30px}
  footer{padding:60px 30px 30px}
}
@media (max-width: 640px){
  nav{padding:16px 20px}
  section{padding:60px 20px}
  .hero{min-height:620px}
  .press{padding:40px 20px}
  footer{padding:60px 20px 30px}
  .pillars-grid,.process-grid,.features-grid,.proj-grid{grid-template-columns:1fr}
  .collections-grid{grid-template-columns:1fr;gap:20px}
  .collection img{padding:28px 24px 16px}
  .collection-info{padding:0 24px 26px}
  .scene-row{grid-template-columns:repeat(2,1fr)}
  .foot-grid{grid-template-columns:1fr;gap:30px}
  .hero-ctas{flex-direction:column;width:100%}
  .btn{width:100%}
  .press-logos{gap:24px}
  .press-logos span{font-size:14px}
  .story-grid,.contact-grid{gap:40px}
}