/* ════════════════════════════════════════════════════
   SECTIONS — Global section styles, Philosophy,
   Process Steps, Duality, Glossary, Configurator,
   Craftsmanship, Weddings, Collection, Personas
   ════════════════════════════════════════════════════ */

/* ── Global ──────────────────────────────────────── */
.section{padding:8rem 0;position:relative}
.section--dark{background:var(--navy)}
.section--obsidian{background:var(--black)}

.section-tag{
  display:block;font-size:.65rem;letter-spacing:.5em;text-transform:uppercase;
  color:var(--gold);margin-bottom:1rem;
}
.gold-line::before{
  content:'';display:inline-block;width:32px;height:1px;
  background:var(--gold);vertical-align:middle;margin-right:12px;
}
.section-headline{
  font-family:var(--serif);font-size:clamp(1.8rem,4vw,3.2rem);
  line-height:1.15;margin-bottom:1.5rem;
  opacity:0;transform:translateY(40px);
  will-change:transform,opacity;
}
.section-headline.center,.section-body.center{text-align:center}
.section-body{
  font-weight:300;font-size:1.05rem;max-width:680px;
  margin:0 auto 3rem;opacity:.82;line-height:1.8;
}

/* ── Split Grid (Philosophy) ─────────────────────── */
.split-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:4rem;
  align-items:start;margin-bottom:5rem;
}
.philosophy-list{list-style:none;margin:1.5rem 0}
.philosophy-list li{
  margin-bottom:1.25rem;padding-left:1rem;
  border-left:2px solid var(--gold-dim);
}
.philosophy-list strong{display:block;color:var(--gold);font-size:.85rem;letter-spacing:.15em;margin-bottom:.15rem}
.pull-quote{
  font-family:var(--serif);font-style:italic;font-size:1.15rem;
  color:var(--gold);border:none;margin-top:2rem;line-height:1.7;
}

/* ── Process Steps ───────────────────────────────── */
.process-steps{
  display:grid;grid-template-columns:repeat(3,1fr);gap:2.5rem;
  text-align:center;
}
.step{padding:2rem 1.5rem;border:1px solid var(--gold-dim);transition:border-color .4s, transform .4s var(--ease), box-shadow .4s}
.step:hover{border-color:var(--gold);transform:translateY(-4px);box-shadow:0 15px 40px rgba(212,175,55,.08)}
.step-num{
  font-family:var(--serif);font-size:2rem;color:var(--gold);
  display:block;margin-bottom:.75rem;
}
.step h3{font-family:var(--serif);font-size:1.2rem;margin-bottom:.5rem}
.step p{font-weight:300;font-size:.92rem;opacity:.75}

/* ── Duality Grid (Tailoring) ────────────────────── */
.duality-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:2.5rem;
  margin:3rem 0 4rem;
}
.duality-card{
  padding:2.5rem;border:1px solid var(--gold-dim);
  transition:transform .6s var(--ease), border-color .4s, box-shadow .4s;
  will-change:transform;
  overflow:hidden;
}
.duality-card:hover{transform:translateY(-8px);border-color:var(--gold);box-shadow:0 20px 60px rgba(212,175,55,.08)}
.duality-img{width:100%;height:220px;margin-bottom:1.5rem;overflow:hidden}
.duality-img--bw{background:linear-gradient(135deg,#222,#444);filter:grayscale(1)}
.duality-img--gold{
  background:linear-gradient(135deg,rgba(212,175,55,.15),rgba(212,175,55,.05));
  border:1px solid var(--gold-dim);
}
.duality-card h3{font-family:var(--serif);font-size:1.1rem;margin-bottom:.5rem}
.duality-card p{font-weight:300;font-size:.92rem;opacity:.75}

/* ── Interactive Glossary ────────────────────────── */
.glossary-title{
  text-align:center;font-family:var(--serif);font-size:1.3rem;
  margin-bottom:2rem;color:var(--gold);
}
.glossary-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.25rem}
.glossary-item{
  padding:1.5rem;border:1px solid var(--gold-dim);text-align:left;
  transition:background .4s, border-color .4s, transform .4s var(--ease);
  cursor:pointer;
}
.glossary-item:hover,.glossary-item.active{
  background:rgba(212,175,55,.06);border-color:var(--gold);
  transform:translateX(6px);
}
.glossary-label{
  display:block;font-size:.8rem;letter-spacing:.18em;text-transform:uppercase;
  margin-bottom:.5rem;
}
.glossary-detail{
  display:block;font-weight:300;font-size:.92rem;
  max-height:0;overflow:hidden;opacity:0;
  transition:max-height .5s var(--ease), opacity .4s;
}
.glossary-item.active .glossary-detail{max-height:100px;opacity:.85}

/* ── Configurator ────────────────────────────────── */
.configurator{margin:3rem 0 4rem}
.config-step{
  padding:2.5rem;border:1px solid var(--gold-dim);
  margin-bottom:1.5rem;opacity:.5;transition:opacity .5s;
}
.config-step.active{opacity:1;border-color:var(--gold)}
.config-step:hover{opacity:1;border-color:var(--gold)}
.config-step .step-num{font-family:var(--serif);font-size:1.5rem;color:var(--gold)}
.config-step h3{font-family:var(--serif);font-size:1.15rem;margin:.75rem 0 .5rem}

.config-choices{display:flex;gap:1rem;flex-wrap:wrap;margin-top:1rem}
.choice-btn{
  padding:.65rem 1.5rem;border:1px solid var(--gold-dim);
  font-size:.72rem;letter-spacing:.15em;text-transform:uppercase;
  transition:all .3s;
}
.choice-btn:hover,.choice-btn.selected{
  background:var(--gold);color:var(--black);border-color:var(--gold);
}
.config-features{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:1rem}
.feature h4{font-family:var(--serif);font-size:1rem;color:var(--gold);margin-bottom:.35rem}
.feature p{font-weight:300;font-size:.88rem;opacity:.75}

/* ── Before / After Slider ───────────────────────── */
.ba-slider{
  position:relative;width:100%;max-width:700px;height:420px;
  margin:3rem auto;overflow:hidden;border:1px solid var(--gold-dim);
  user-select:none;
  -webkit-user-select:none;
  touch-action:none;
}
.ba-before,.ba-after{position:absolute;inset:0;pointer-events:none}
.ba-before{background:linear-gradient(135deg,#1a1a1a,#2a2a2a);clip-path:inset(0 50% 0 0);z-index:2}
.ba-after{background:linear-gradient(135deg,var(--navy),#0d2a3f)}
.ba-silhouette{
  position:absolute;bottom:0;left:50%;transform:translateX(-50%);
  width:180px;height:360px;
}
.ba-silhouette--before{
  background:linear-gradient(0deg,#333 0%,#555 100%);
  clip-path:polygon(30% 0,70% 0,75% 40%,80% 100%,20% 100%,25% 40%);
  opacity:.6;
}
.ba-silhouette--after{
  background:linear-gradient(0deg,var(--gold) 0%,#c7a52e 100%);
  clip-path:polygon(32% 0,68% 0,72% 40%,76% 100%,24% 100%,28% 40%);
  opacity:.9;filter:drop-shadow(0 0 40px rgba(212,175,55,.3));
}
.ba-label{
  position:absolute;top:1.5rem;z-index:5;
  font-size:.65rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--gold);pointer-events:none;
}
.ba-label--left{left:1.5rem}
.ba-label--right{right:1.5rem}
.ba-range{
  position:absolute;inset:0;width:100%;height:100%;
  opacity:0;cursor:ew-resize;z-index:20;
}
.ba-divider{
  position:absolute;top:0;bottom:0;left:50%;width:2px;
  background:var(--gold);z-index:5;pointer-events:none;
  transition:left 0s;
}
.ba-divider::after{
  content:'⟷';position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:36px;height:36px;
  display:flex;align-items:center;justify-content:center;
  background:var(--gold);color:var(--black);font-size:.7rem;
  border-radius:50%;
}

/* ── Craftsmanship Grid ──────────────────────────── */
.craft-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}
.craft-card{
  text-align:center;padding:3rem 2rem;
  border:1px solid var(--gold-dim);
  transition:transform .6s var(--ease), border-color .4s, box-shadow .4s;
  will-change:transform;
}
.craft-card:hover{
  transform:translateY(-10px);border-color:var(--gold);
  box-shadow:0 30px 80px rgba(212,175,55,.1);
}
.craft-icon{width:48px;height:48px;margin:0 auto 1.5rem;color:var(--gold)}
.craft-card h3{font-family:var(--serif);font-size:1.05rem;margin-bottom:.5rem}
.craft-card p{font-weight:300;font-size:.9rem;opacity:.75}

/* ── Wedding Section ─────────────────────────────── */
.wedding-vision{
  max-width:640px;margin:3rem auto 0;text-align:center;
  padding:3rem;border:1px solid var(--gold-dim);
  transition:border-color .4s;
}
.wedding-vision:hover{border-color:var(--gold)}
.vision-icon{font-size:1.8rem;color:var(--gold);margin-bottom:1rem}
.wedding-vision h3{font-family:var(--serif);font-size:1.15rem;margin-bottom:.75rem}
.wedding-vision p{font-weight:300;font-size:.95rem;opacity:.8}

/* ── Persona Filters & Cards ─────────────────────── */
.persona-filters{
  display:flex;gap:3rem;justify-content:center;flex-wrap:wrap;
  margin-bottom:2.5rem;
}
.filter-group h4{
  font-size:.7rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--gold);margin-bottom:.75rem;text-align:center;
}
.filter-buttons{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:center}
.filter-btn{
  padding:.45rem 1.1rem;border:1px solid var(--gold-dim);
  font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;
  transition:all .3s;
}
.filter-btn:hover,.filter-btn.active{
  background:var(--gold);color:var(--black);border-color:var(--gold);
}

.ai-suggestion{
  max-width:640px;margin:0 auto 3rem;padding:1.5rem 2rem;
  border:1px solid var(--gold);
  background:rgba(212,175,55,.04);
  text-align:center;
}
.ai-badge{
  display:inline-block;font-size:.6rem;letter-spacing:.3em;
  color:var(--gold);margin-bottom:.5rem;
}
.ai-suggestion p{font-weight:300;font-size:.95rem;opacity:.85}

/* WebGL viewport */
.webgl-viewport{
  position:relative;width:100%;max-width:600px;height:400px;
  margin:0 auto 4rem;border:1px solid var(--gold-dim);
  overflow:hidden;
}
#suitCanvas{width:100%!important;height:100%!important}
.canvas-hint{
  position:absolute;bottom:.75rem;left:50%;transform:translateX(-50%);
  font-size:.65rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold);opacity:.6;
}

.personas-title{
  text-align:center;font-family:var(--serif);font-size:1.4rem;
  margin-bottom:2.5rem;
}
.personas-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;width:100%}
.persona-card{
  text-align:center;padding:3rem 2rem;
  border:1px solid var(--gold-dim);
  transition:transform .6s var(--ease), border-color .4s, box-shadow .4s;
  transform-style:preserve-3d;
  will-change:transform;
}
.persona-card:hover{border-color:var(--gold);box-shadow:0 20px 60px rgba(212,175,55,.08)}
.persona-num{
  font-family:var(--serif);font-size:2.5rem;color:var(--gold);
  display:block;margin-bottom:1rem;
}
.persona-card h4{
  font-family:var(--serif);font-size:1rem;letter-spacing:.15em;
  margin-bottom:.75rem;
}
.persona-card p{font-weight:300;font-size:.9rem;opacity:.75}