/* ================================================

   BEZZIE — ALL SECTIONS CSS

   ================================================ */



/* ─── 2. STORY TRANSITION ─── */

#story {

  position:relative; min-height:100vh;

  display:flex; align-items:center; justify-content:center;

  background:linear-gradient(180deg,var(--midnight-deep) 0%,var(--midnight-1) 50%,var(--midnight-2) 100%);

  overflow:hidden; padding:10vh 5%;

}

.story-clouds {

  position:absolute; inset:0; pointer-events:none; overflow:hidden;

}

.cloud-layer {

  position:absolute; width:200%; height:60%;

  background:radial-gradient(ellipse at 50% 80%, rgba(19,40,71,0.6) 0%, transparent 70%);

  animation:cloudDrift 12s ease-in-out infinite;

}

.cloud-layer:nth-child(2) { top:20%; animation-delay:-6s; animation-duration:18s; opacity:0.5; }

.cloud-layer:nth-child(3) { top:40%; animation-delay:-3s; animation-duration:22s; opacity:0.3; }

.story-content { position:relative; z-index:2; width:100%; max-width:900px; text-align:center; }
.story-intro {

  font-family:var(--font-serif); font-size:clamp(0.9rem,1.5vw,1.1rem);

  letter-spacing:0.04em; color:rgba(244,228,166,0.6); margin-bottom:3rem;
  font-style:italic; line-height:1.9; font-weight:400;

}

.story-headline {

  font-family:var(--font-serif); font-weight:700;

  font-size:clamp(2.5rem,6vw,5.5rem); line-height:1.08;

  letter-spacing:-0.01em; color:var(--gold-pale); max-width:900px; margin:0 auto 1.5rem;
}

.story-headline em { color:var(--gold-mid); font-style:italic; }

.story-body {

  font-family:var(--font-serif); font-size:clamp(1.05rem,2vw,1.45rem);

  font-weight:400; line-height:1.85; color:rgba(244,228,166,0.72);

  max-width:700px; margin:0 auto 3rem;

}

.story-particles { position:absolute; inset:0; pointer-events:none; z-index:1; }



/* ─── 3. MYTHOLOGY BRAND ─── */

#mythology {

  position:relative; padding:12vh 5%;

  background:linear-gradient(180deg,var(--midnight-2) 0%,var(--midnight-1) 100%);

  overflow:hidden;

}

.myth-bg-lines {

  position:absolute; inset:0; pointer-events:none; opacity:0.06;

  background-image:

    repeating-linear-gradient(90deg,var(--gold-mid) 0px,transparent 1px,transparent 80px,var(--gold-mid) 81px),

    repeating-linear-gradient(0deg,var(--gold-mid) 0px,transparent 1px,transparent 80px,var(--gold-mid) 81px);

}

.myth-grid {

  display:grid; grid-template-columns:1fr 1fr; gap:8vw;

  align-items:center; max-width:1300px; margin:0 auto;

  position:relative; z-index:2;

}

.myth-left { padding:4rem 0; }

.myth-number {

  font-family:var(--font-display); font-size:8rem; font-weight:400;

  color:rgba(184,134,11,0.08); line-height:1; margin-bottom:-2rem;

  letter-spacing:-0.05em;

}

.myth-title {

  font-family:var(--font-serif); font-weight:700;

  font-size:clamp(2rem,4vw,3.5rem); line-height:1.1;

  color:var(--gold-pale); margin-bottom:2rem;

}

.myth-title em { color:var(--gold-mid); font-style:italic; display:block; }

.myth-text {

  font-family:var(--font-sans); font-size:0.92rem; font-weight:400; line-height:1.95;

  color:rgba(244,228,166,0.62); margin-bottom:1.5rem;

}

.myth-text strong { color:var(--gold-light); font-weight:500; }

.myth-pillars {

  position:relative; height:500px;

  display:flex; align-items:flex-end; justify-content:center; gap:2rem;

}

.pillar {

  width:60px; background:linear-gradient(180deg,var(--gold-dark) 0%,rgba(184,134,11,0.3) 100%);

  border-top:3px solid var(--gold-mid); position:relative;

  box-shadow:0 0 20px rgba(212,175,55,0.1);

}

.pillar::before {

  content:''; position:absolute; top:-20px; left:-8px; right:-8px; height:20px;

  background:linear-gradient(180deg,rgba(212,175,55,0.4),var(--gold-dark));

}

.pillar:nth-child(1) { height:60%; }

.pillar:nth-child(2) { height:85%; }

.pillar:nth-child(3) { height:100%; }

.pillar:nth-child(4) { height:85%; }

.pillar:nth-child(5) { height:60%; }

.pillar-arch {

  position:absolute; top:0; left:-30px; right:-30px;

  height:80px; border:2px solid rgba(212,175,55,0.3);

  border-bottom:none; border-radius:100px 100px 0 0;

}

.myth-moon {

  position:absolute; top:10%; right:10%;

  width:100px; height:100px; border-radius:50%;

  background:radial-gradient(circle at 35% 35%,rgba(244,228,166,0.15),transparent 60%);

  border:1px solid rgba(212,175,55,0.2);

  box-shadow:0 0 40px rgba(212,175,55,0.08);

  animation:glowPulse 6s ease-in-out infinite;

}

.myth-mandala {

  position:absolute; bottom:5%; left:5%; width:200px; height:200px;

  opacity:0.06; border-radius:50%;

  background:

    conic-gradient(from 0deg,transparent 0deg,rgba(212,175,55,1) 1deg,transparent 2deg,

    transparent 44deg,rgba(212,175,55,1) 45deg,transparent 46deg,

    transparent 89deg,rgba(212,175,55,1) 90deg,transparent 91deg,

    transparent 134deg,rgba(212,175,55,1) 135deg,transparent 136deg,

    transparent 179deg,rgba(212,175,55,1) 180deg,transparent 181deg,

    transparent 224deg,rgba(212,175,55,1) 225deg,transparent 226deg,

    transparent 269deg,rgba(212,175,55,1) 270deg,transparent 271deg,

    transparent 314deg,rgba(212,175,55,1) 315deg,transparent 316deg,transparent 360deg);

  animation:portalSpin 60s linear infinite;

}

@media(max-width:900px) {

  .myth-grid { grid-template-columns:1fr; }

  .myth-pillars { height:300px; }

  .myth-moon { width:60px; height:60px; }

}



/* ─── 4. SERVICES ─── */

#services {

  position:relative; padding:10vh 5%;

  background:linear-gradient(180deg,var(--midnight-1) 0%,var(--midnight-deep) 100%);

  overflow:hidden;

}

.services-header { text-align:center; max-width:800px; margin:0 auto 8rem; }

.services-header h2 {

  font-family:var(--font-serif); font-weight:300;

  font-size:clamp(2.5rem,5vw,4.5rem); line-height:1.1;

  color:var(--gold-pale);

}

.services-header h2 em { color:var(--gold-mid); font-style:italic; }

.service-chapter {

  display:grid; grid-template-columns:80px 1fr 1fr; gap:0 4vw;

  align-items:center; padding:5vh 0;

  border-top:1px solid rgba(212,175,55,0.08);

  max-width:1300px; margin:0 auto;

  position:relative; z-index:2;

}

.service-chapter:last-child { border-bottom:1px solid rgba(212,175,55,0.08); }

.service-chapter-link {
  position:absolute;
  inset:0;
  z-index:4;
}

.service-chapter-link:focus-visible {
  outline:1px solid var(--gold-mid);
  outline-offset:6px;
}

.service-chapter:has(.service-chapter-link) {
  cursor:none;
}

.service-num {
  font-family:var(--font-display); font-size:4rem; font-weight:400;

  color:rgba(184,134,11,0.2); line-height:1; letter-spacing:0.02em;

}

.service-body { padding:1rem 0; }

.service-title {

  font-family:var(--font-serif); font-size:clamp(1.5rem,3vw,2.5rem);

  font-weight:600; color:var(--gold-pale); margin:0.5rem 0 1rem; line-height:1.2;

}

.service-desc { font-family:var(--font-sans); font-size:0.88rem; font-weight:400; line-height:1.9; color:rgba(244,228,166,0.6); }

.service-visual {

  height:320px; overflow:hidden; position:relative;

  border:1px solid rgba(212,175,55,0.12);

  box-shadow:0 4px 40px rgba(0,0,0,0.4);

}

.service-visual-inner {

  width:100%; height:100%;

  background:var(--midnight-deep);

  display:flex; align-items:center; justify-content:center;

  overflow:hidden; position:relative;

}



/* Premium emblem field for all sacred visuals */
.sacred-visual {
  isolation:isolate;
  perspective:900px;
  background:
    radial-gradient(circle at 50% 42%, rgba(212,175,55,0.12), transparent 44%),
    linear-gradient(145deg, var(--midnight-1), var(--midnight-deep) 62%);
}
.sacred-visual::before {
  content:'';
  position:absolute; inset:0; z-index:0;
  background:
    repeating-linear-gradient(90deg, transparent 0 38px, rgba(212,175,55,0.045) 39px, transparent 40px),
    repeating-linear-gradient(0deg, transparent 0 38px, rgba(212,175,55,0.035) 39px, transparent 40px),
    radial-gradient(circle at 50% 48%, transparent 0 32%, rgba(212,175,55,0.08) 33%, transparent 34%);
  opacity:0.7;
  pointer-events:none;
}
.sacred-visual::after {
  content:'';
  position:absolute; inset:0; z-index:3;
  background:linear-gradient(0deg, rgba(5,8,20,0.45) 0%, transparent 35%);
  pointer-events:none;
}
.luxury-emblem {
  --metal:linear-gradient(135deg, var(--gold-dark) 0%, var(--gold-light) 28%, var(--gold-mid) 48%, var(--gold-pale) 63%, var(--gold-dark) 100%);
  --edge:rgba(244,228,166,0.72);
  --shade:rgba(184,134,11,0.54);
  --logo-size:100%;
  width:clamp(190px,64%,285px);
  aspect-ratio:1;
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:center;
  transform-style:preserve-3d;
  filter:drop-shadow(0 20px 34px rgba(0,0,0,0.5)) drop-shadow(0 0 18px rgba(212,175,55,0.18));
  transition:transform 0.9s var(--ease-out), filter 0.9s ease;
}
.luxury-emblem span,
.luxury-emblem span::before,
.luxury-emblem span::after {
  position:absolute;
  display:block;
  box-sizing:border-box;
}
.luxury-emblem::before {
  content:'';
  position:absolute; inset:-7%;
  border:1px solid rgba(212,175,55,0.18);
  border-radius:18px;
  background:
    radial-gradient(circle at 50% 42%, rgba(244,228,166,0.2), rgba(212,175,55,0.08) 34%, transparent 66%),
    linear-gradient(145deg, rgba(244,228,166,0.07), rgba(5,8,20,0.08));
  box-shadow:inset 0 0 34px rgba(244,228,166,0.08), 0 0 46px rgba(212,175,55,0.14);
  opacity:0.72;
  animation:sacredLogoBreath 7s ease-in-out infinite alternate;
}
.luxury-emblem::after {
  content:'';
  position:absolute;
  inset:-18%;
  z-index:4;
  background:linear-gradient(115deg, transparent 36%, rgba(244,228,166,0.0) 43%, rgba(244,228,166,0.48) 49%, rgba(244,228,166,0.0) 56%, transparent 64%);
  transform:translateX(-72%) rotate(8deg);
  opacity:0;
  pointer-events:none;
}
.emblem-halo {
  inset:5%;
  border:1px solid rgba(212,175,55,0.34);
  border-radius:50%;
  box-shadow:inset 0 0 30px rgba(212,175,55,0.08), 0 0 40px rgba(212,175,55,0.08);
}
.emblem-halo::before {
  content:'';
  inset:10%;
  border:1px solid rgba(244,228,166,0.16);
  border-radius:50%;
}
.emblem-grid {
  inset:22%;
  background:
    linear-gradient(90deg, transparent 48%, rgba(244,228,166,0.18) 49% 51%, transparent 52%),
    linear-gradient(0deg, transparent 48%, rgba(244,228,166,0.18) 49% 51%, transparent 52%);
  opacity:0.74;
}
.emblem-diamond {
  left:43%;
  top:43%;
  width:14%;
  aspect-ratio:1;
  background:var(--metal);
  transform:rotate(45deg);
  box-shadow:inset 1px 1px 0 var(--edge), inset -5px -5px 14px rgba(5,8,20,0.28), 0 0 20px rgba(212,175,55,0.22);
}
.service-chapter:hover .luxury-emblem {
  transform:translateY(-3px) scale(1.03);
  filter:drop-shadow(0 24px 38px rgba(0,0,0,0.55)) drop-shadow(0 0 30px rgba(212,175,55,0.34));
}
.service-chapter:hover .luxury-emblem::before {
  opacity:0.96;
  box-shadow:inset 0 0 42px rgba(244,228,166,0.12), 0 0 62px rgba(212,175,55,0.24);
}
.service-chapter:hover .luxury-emblem::after {
  animation:emblemSweep 1.2s var(--ease-out) both;
}
.service-chapter:hover .emblem-halo {
  border-color:rgba(244,228,166,0.52);
  box-shadow:inset 0 0 36px rgba(212,175,55,0.14), 0 0 54px rgba(212,175,55,0.22);
}
.sacred-logo-img {
  position:relative;
  z-index:2;
  width:var(--logo-size);
  height:var(--logo-size);
  display:block;
  object-fit:contain;
  object-position:center;
  transform:translateY(0) scale(1);
  transform-origin:center;
  filter:drop-shadow(0 12px 20px rgba(0,0,0,0.46));
  transition:transform 0.9s var(--ease-out), filter 0.9s ease;
  will-change:transform;
}
.service-chapter:hover .sacred-logo-img {
  transform:translateY(-3px) scale(1.03);
  filter:drop-shadow(0 16px 24px rgba(0,0,0,0.5)) drop-shadow(0 0 16px rgba(244,228,166,0.16));
}
.emblem-rudra { --logo-size:98%; }
.emblem-kailash { --logo-size:96%; }
.emblem-celestial { --logo-size:100%; }
.emblem-vishwakarma { --logo-size:99%; }
.emblem-somnath { --logo-size:98%; }
.emblem-execution { --logo-size:94%; }
.rudra-foundation {
  left:22%;
  bottom:18%;
  width:56%;
  height:15%;
  background:var(--metal);
  clip-path:polygon(10% 0, 90% 0, 100% 100%, 0 100%);
  box-shadow:inset 2px 2px 0 var(--edge), inset -10px -8px 18px rgba(5,8,20,0.3);
}
.rudra-foundation::before {
  content:'';
  left:15%;
  top:42%;
  width:70%;
  height:1px;
  background:rgba(5,8,20,0.38);
  box-shadow:0 -13px 0 rgba(244,228,166,0.22), 0 13px 0 rgba(244,228,166,0.12);
}
.rudra-pillar {
  left:42%;
  bottom:31%;
  width:16%;
  height:43%;
  background:linear-gradient(90deg, var(--gold-dark), var(--gold-pale) 38%, var(--gold-mid) 63%, var(--shade));
  box-shadow:inset 2px 0 0 rgba(244,228,166,0.42), inset -8px 0 18px rgba(5,8,20,0.26), 0 0 20px rgba(212,175,55,0.18);
}
.rudra-pillar::before,
.rudra-pillar::after {
  content:'';
  left:-38%;
  width:176%;
  height:10%;
  background:var(--metal);
  box-shadow:inset 2px 1px 0 var(--edge), inset -7px -5px 12px rgba(5,8,20,0.25);
}
.rudra-pillar::before { top:-9%; }
.rudra-pillar::after { bottom:-8%; }
.rudra-trishul {
  left:49%;
  top:13%;
  width:2.4%;
  height:60%;
  background:var(--metal);
  box-shadow:0 0 18px rgba(212,175,55,0.22);
}
.rudra-trishul::before {
  content:'';
  left:-970%;
  top:0;
  width:2040%;
  height:38%;
  border:4px solid var(--gold-light);
  border-bottom:0;
  border-radius:50% 50% 0 0;
  filter:drop-shadow(0 0 8px rgba(212,175,55,0.22));
}
.rudra-trishul::after {
  content:'';
  left:-220%;
  top:-4%;
  width:540%;
  height:18%;
  background:var(--metal);
  clip-path:polygon(50% 0, 100% 100%, 0 100%);
}
.kailash-mountain {
  left:17%;
  top:24%;
  width:66%;
  height:34%;
  background:var(--metal);
  clip-path:polygon(0 100%, 22% 48%, 35% 66%, 51% 18%, 65% 58%, 78% 38%, 100% 100%);
  box-shadow:inset 2px 2px 0 var(--edge), inset -10px -10px 18px rgba(5,8,20,0.26), 0 0 26px rgba(212,175,55,0.18);
}
.kailash-arch {
  bottom:24%;
  width:25%;
  height:44%;
  border:6px solid var(--gold-mid);
  border-bottom-width:10px;
  border-radius:50% 50% 3px 3px;
  background:linear-gradient(180deg, rgba(244,228,166,0.1), rgba(184,134,11,0.14));
  box-shadow:inset 0 0 18px rgba(244,228,166,0.12), 0 0 18px rgba(212,175,55,0.12);
}
.arch-left { left:19%; transform:scale(0.82); }
.arch-center { left:37.5%; z-index:2; }
.arch-right { right:19%; transform:scale(0.82); }
.somnath-crescent {
  right:22%;
  top:17%;
  width:25%;
  aspect-ratio:1;
  border-radius:50%;
  background:var(--gold-light);
  box-shadow:0 0 28px rgba(212,175,55,0.24);
}
.somnath-crescent::after {
  content:'';
  left:28%;
  top:-2%;
  width:100%;
  height:100%;
  border-radius:50%;
  background:var(--midnight-deep);
}
.somnath-sanctuary {
  left:27%;
  bottom:25%;
  width:46%;
  height:43%;
  border:7px solid var(--gold-mid);
  border-bottom-width:12px;
  border-radius:48% 48% 5px 5px;
  background:linear-gradient(180deg, rgba(244,228,166,0.10), rgba(184,134,11,0.12));
  box-shadow:inset 0 0 22px rgba(244,228,166,0.12), 0 0 26px rgba(212,175,55,0.14);
}
.somnath-bed {
  left:34%;
  bottom:30%;
  width:32%;
  height:13%;
  background:var(--metal);
  border-radius:2px;
  box-shadow:inset 2px 1px 0 var(--edge), inset -7px -5px 12px rgba(5,8,20,0.24);
}
.somnath-bed::before {
  content:'';
  left:5%;
  bottom:92%;
  width:18%;
  height:55%;
  background:var(--metal);
  border-radius:50% 50% 3px 3px;
}
.bhairava-shield {
  left:26%;
  top:17%;
  width:48%;
  height:66%;
  background:linear-gradient(135deg, var(--gold-dark), var(--gold-pale) 34%, var(--gold-mid) 57%, var(--gold-dark));
  clip-path:polygon(50% 0, 92% 14%, 82% 66%, 50% 100%, 18% 66%, 8% 14%);
  box-shadow:inset 3px 3px 0 rgba(244,228,166,0.52), inset -14px -16px 24px rgba(5,8,20,0.34), 0 0 30px rgba(212,175,55,0.2);
}
.bhairava-shield::after {
  content:'';
  inset:12%;
  background:linear-gradient(145deg, rgba(5,8,20,0.58), rgba(5,8,20,0.18));
  clip-path:polygon(50% 0, 90% 15%, 79% 64%, 50% 94%, 21% 64%, 10% 15%);
}
.bhairava-core {
  left:43%;
  top:35%;
  width:14%;
  height:30%;
  background:var(--metal);
  clip-path:polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  box-shadow:0 0 24px rgba(212,175,55,0.28);
}
.bhairava-line {
  top:48%;
  width:58%;
  height:3px;
  background:var(--metal);
  transform-origin:center;
}
.bhairava-line.line-one { left:21%; transform:rotate(34deg); }
.bhairava-line.line-two { left:21%; transform:rotate(-34deg); }
.tripura-swatch {
  width:38%;
  height:54%;
  top:25%;
  border:1px solid rgba(244,228,166,0.42);
  box-shadow:inset 2px 2px 0 rgba(244,228,166,0.28), inset -12px -12px 20px rgba(5,8,20,0.24), 0 14px 26px rgba(0,0,0,0.32);
}
.swatch-marble {
  left:24%;
  transform:rotate(-11deg);
  background:
    linear-gradient(135deg, rgba(244,228,166,0.34), transparent 26%),
    repeating-linear-gradient(145deg, rgba(244,228,166,0.26) 0 2px, transparent 2px 18px),
    var(--metal);
}
.swatch-brass {
  left:34%;
  z-index:2;
  transform:rotate(0deg) translateY(-4%);
  background:
    repeating-linear-gradient(90deg, rgba(5,8,20,0.16) 0 1px, transparent 1px 8px),
    var(--metal);
}
.swatch-stone {
  right:24%;
  transform:rotate(11deg);
  background:
    radial-gradient(circle at 30% 30%, rgba(244,228,166,0.22), transparent 16%),
    radial-gradient(circle at 70% 68%, rgba(5,8,20,0.18), transparent 18%),
    var(--metal);
}
.tripura-ring {
  left:31%;
  top:17%;
  width:38%;
  aspect-ratio:1;
  border:2px solid rgba(244,228,166,0.26);
  border-radius:50%;
}
.execution-frame {
  left:24%;
  top:20%;
  width:52%;
  height:58%;
  border:6px solid var(--gold-mid);
  border-bottom-width:11px;
  background:linear-gradient(180deg, rgba(244,228,166,0.08), rgba(184,134,11,0.12));
  box-shadow:inset 0 0 24px rgba(244,228,166,0.12), 0 0 24px rgba(212,175,55,0.14);
}
.execution-column {
  top:31%;
  width:8%;
  height:43%;
  background:var(--metal);
  box-shadow:inset 2px 0 0 var(--edge), inset -5px 0 12px rgba(5,8,20,0.22);
}
.column-left { left:33%; }
.column-right { right:33%; }
.execution-keystone {
  left:42%;
  top:15%;
  width:16%;
  height:16%;
  background:var(--metal);
  clip-path:polygon(50% 0, 100% 42%, 82% 100%, 18% 100%, 0 42%);
  box-shadow:inset 2px 2px 0 var(--edge), inset -6px -6px 12px rgba(5,8,20,0.24), 0 0 22px rgba(212,175,55,0.24);
}
@keyframes emblemSweep {
  0% { opacity:0; transform:translateX(-72%) rotate(8deg); }
  18% { opacity:0.75; }
  100% { opacity:0; transform:translateX(72%) rotate(8deg); }
}
@keyframes sacredLogoBreath {
  0% { opacity:0.62; transform:scale(0.985); }
  100% { opacity:0.82; transform:scale(1.015); }
}


.service-icon { font-size:3rem; opacity:0.4; filter:drop-shadow(0 0 10px rgba(212,175,55,0.3)); }

@media(max-width:768px) {

  .service-chapter { grid-template-columns:40px 1fr; grid-template-rows:auto auto; gap:1rem; }

  .service-visual { grid-column:span 2; }

}



/* ─── 5. FEATURED PROJECTS ─── */

#projects {

  position:relative;

  background:var(--midnight-deep);

  overflow:hidden;

}

.projects-header { padding:10vh 5% 6vh; text-align:center; }

.projects-header h2 {

  font-family:var(--font-serif); font-weight:300;

  font-size:clamp(2.5rem,5vw,4.5rem); color:var(--gold-pale);

}

.projects-header h2 em { color:var(--gold-mid); font-style:italic; }

.project-panel {

  position:relative; height:85vh; min-height:550px;

  overflow:hidden; cursor:none;

}

.project-panel:nth-child(even) .project-info { margin-left:auto; }

.project-img {

  position:absolute; inset:0; width:100%; height:100%;

  object-fit:cover; transform:scale(1.1);

  transition:transform 1.2s var(--ease-out);

  filter:brightness(0.4) saturate(0.7);

}

.project-panel:hover .project-img { transform:scale(1.05); filter:brightness(0.5) saturate(0.8); }

.project-overlay {

  position:absolute; inset:0;

  background:

    linear-gradient(120deg,rgba(5,8,20,0.92) 0%,rgba(5,8,20,0.5) 50%,transparent 100%);

}

.project-panel:nth-child(even) .project-overlay {

  background:linear-gradient(240deg,rgba(5,8,20,0.92) 0%,rgba(5,8,20,0.5) 50%,transparent 100%);

}

.project-info {

  position:absolute; bottom:10%; left:6%;

  max-width:500px; z-index:2;

}

.project-num {

  font-family:var(--font-display); font-size:6rem; font-weight:400;

  color:rgba(212,175,55,0.1); line-height:1; margin-bottom:-1.5rem;

  letter-spacing:0.02em;

}

.project-name {

  font-family:var(--font-serif); font-size:clamp(2rem,4vw,3.5rem);

  font-weight:700; color:var(--gold-pale); line-height:1.1; margin-bottom:1rem;

}

.project-type {

  font-family:var(--font-sans); font-size:0.6rem; letter-spacing:0.35em;

  text-transform:uppercase; color:var(--gold-dark); margin-bottom:0.5rem;

}

.project-desc { font-family:var(--font-sans); font-size:0.88rem; font-weight:400; color:rgba(244,228,166,0.62); line-height:1.85; }

.project-cta {

  display:inline-flex; align-items:center; gap:0.6rem;

  margin-top:1.5rem; font-family:var(--font-sans); font-size:0.65rem;

  letter-spacing:0.25em; text-transform:uppercase; color:var(--gold-mid);

  border-bottom:1px solid rgba(212,175,55,0.3); padding-bottom:0.3rem;

  transition:gap 0.3s ease, border-color 0.3s ease;

}

.project-panel:hover .project-cta { gap:1rem; border-color:var(--gold-mid); }



/* ─── 6. EXPERIENCE QUOTE ─── */

#experience {

  position:relative; min-height:100vh;

  display:flex; align-items:center; justify-content:center;

  background:linear-gradient(180deg,var(--midnight-deep) 0%,var(--navy-1) 50%,var(--midnight-deep) 100%);

  overflow:hidden; padding:10vh 5%;

}

.exp-bg-canvas { position:absolute; inset:0; z-index:1; pointer-events:none; }

.exp-content { position:relative; z-index:2; text-align:center; max-width:950px; }

.exp-quote-mark {

  font-family:var(--font-serif); font-size:8rem; line-height:0.5;

  color:rgba(212,175,55,0.12); display:block; margin-bottom:2rem;

}

.exp-quote {

  font-family:var(--font-serif); font-weight:700;

  font-size:clamp(2rem,5vw,4.5rem); line-height:1.3;

  color:var(--gold-pale); letter-spacing:-0.01em;

}

.exp-quote em { color:var(--gold-mid); font-style:italic; display:block; }

.exp-author {

  font-family:var(--font-sans); font-size:0.65rem; font-weight:600; letter-spacing:0.42em;

  text-transform:uppercase; color:var(--gold-dark); margin-top:3rem;

}



/* ─── 7. TESTIMONIALS ─── */

#testimonials {

  position:relative; padding:10vh 5%;

  background:linear-gradient(180deg,var(--midnight-deep) 0%,var(--midnight-1) 100%);

  overflow:hidden;

}

.testimonials-header { text-align:center; margin-bottom:6rem; }

.testimonials-header h2 {

  font-family:var(--font-serif); font-weight:300;

  font-size:clamp(2rem,4vw,3.5rem); color:var(--gold-pale);

}

.testimonials-grid {

  display:grid; grid-template-columns:repeat(3,1fr); gap:2rem;

  max-width:1300px; margin:0 auto;

}

.inscription {

  position:relative; padding:3rem 2.5rem;

  background:linear-gradient(135deg,rgba(19,40,71,0.5),rgba(8,19,31,0.8));

  border:1px solid rgba(212,175,55,0.15);

  animation:borderGlow 4s ease-in-out infinite;

  transition:transform 0.5s var(--ease-out), box-shadow 0.5s ease;

}

.inscription:nth-child(2) { animation-delay:-2s; }

.inscription:nth-child(3) { animation-delay:-4s; }

.inscription:hover {

  transform:translateY(-8px);

  box-shadow:0 20px 60px rgba(0,0,0,0.5), 0 0 40px rgba(212,175,55,0.08);

}

.inscription::before,.inscription::after {

  content:''; position:absolute; background:var(--gold-mid);

}

.inscription::before { top:0; left:20px; right:20px; height:1px; box-shadow:0 0 8px rgba(212,175,55,0.5); }

.inscription::after  { bottom:0; left:20px; right:20px; height:1px; box-shadow:0 0 8px rgba(212,175,55,0.5); }

.inscription-corner {

  position:absolute; width:12px; height:12px;

  border-color:var(--gold-mid); border-style:solid; border-width:0;

}

.inscription-corner.tl { top:-1px; left:-1px; border-top-width:2px; border-left-width:2px; }

.inscription-corner.tr { top:-1px; right:-1px; border-top-width:2px; border-right-width:2px; }

.inscription-corner.bl { bottom:-1px; left:-1px; border-bottom-width:2px; border-left-width:2px; }

.inscription-corner.br { bottom:-1px; right:-1px; border-bottom-width:2px; border-right-width:2px; }

.inscription-stars { color:var(--gold-mid); font-size:0.75rem; letter-spacing:0.2em; margin-bottom:1.5rem; }

.inscription-text {

  font-family:var(--font-serif); font-size:1.05rem; font-weight:400;

  font-style:italic; line-height:1.8; color:rgba(244,228,166,0.82); margin-bottom:2rem;

}

.inscription-author { font-family:var(--font-sans); font-size:0.65rem; font-weight:600; letter-spacing:0.28em; text-transform:uppercase; color:var(--gold-dark); }

.inscription-project { font-family:var(--font-serif); font-size:0.8rem; color:rgba(244,228,166,0.4); font-style:italic; margin-top:0.25rem; }

@media(max-width:900px) { .testimonials-grid { grid-template-columns:1fr; } }



/* ─── 8. PROCESS ─── */

#process {

  position:relative; padding:10vh 5%;

  background:linear-gradient(180deg,var(--midnight-1) 0%,var(--midnight-2) 100%);

  overflow:hidden;

}

.process-header { text-align:center; margin-bottom:8rem; }

.process-header h2 {

  font-family:var(--font-serif); font-weight:300;

  font-size:clamp(2rem,4vw,3.5rem); color:var(--gold-pale);

}

.process-timeline {

  position:relative; max-width:900px; margin:0 auto;

  padding-left:100px;

}

.timeline-line {

  position:absolute; left:40px; top:0; bottom:0; width:1px;

  background:rgba(212,175,55,0.1); overflow:hidden;

}

.timeline-line-fill {

  width:100%; height:0;

  background:linear-gradient(180deg,var(--gold-dark),var(--gold-mid));

  box-shadow:0 0 8px rgba(212,175,55,0.4);

}

.process-step { position:relative; padding:0 0 5rem; }

.process-step:last-child { padding-bottom:0; }

.step-marker {

  position:absolute; left:-72px; top:0;

  width:48px; height:48px; border-radius:50%;

  border:1px solid var(--gold-mid);

  background:var(--midnight-deep);

  display:flex; align-items:center; justify-content:center;

  box-shadow:0 0 20px rgba(212,175,55,0.2), 0 0 40px rgba(212,175,55,0.08);

  transition:transform 0.4s var(--ease-out), box-shadow 0.4s ease;

}

.process-step:hover .step-marker {

  transform:scale(1.2);

  box-shadow:0 0 30px rgba(212,175,55,0.4), 0 0 60px rgba(212,175,55,0.15);

}

.step-marker svg { width:20px; height:20px; }

.step-num {

  position:absolute; left:-90px; top:12px;

  font-family:var(--font-sans); font-size:0.62rem; font-weight:600;

  letter-spacing:0.2em; color:rgba(184,134,11,0.4);

}

.step-title {

  font-family:var(--font-serif); font-size:clamp(1.4rem,3vw,2.2rem);

  font-weight:600; color:var(--gold-pale); margin-bottom:0.75rem; line-height:1.2;

}

.step-title em { color:var(--gold-mid); font-style:italic; }

.step-desc { font-family:var(--font-sans); font-size:0.88rem; font-weight:400; line-height:1.9; color:rgba(244,228,166,0.62); max-width:550px; }

@media(max-width:768px) {

  .process-timeline { padding-left:60px; }

  .timeline-line { left:20px; }

  .step-marker { left:-48px; width:36px; height:36px; }

  .step-num { display:none; }

}



/* ─── 9. FOOTER ─── */

#footer {

  position:relative; overflow:hidden;

  background:linear-gradient(180deg,var(--midnight-2) 0%,var(--midnight-deep) 40%,#020510 100%);

  padding:12vh 5% 4vh;

}

.footer-temple {

  position:absolute; bottom:0; left:0; right:0; height:200px;

  pointer-events:none; opacity:0.07;

  background:

    linear-gradient(180deg,transparent 0%,rgba(212,175,55,0.05) 100%);

}

.footer-top {

  display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:4vw;

  max-width:1300px; margin:0 auto; padding-bottom:6rem;

  border-bottom:1px solid rgba(212,175,55,0.08);

  position:relative; z-index:2;

}

.footer-brand h2 {

  font-family:var(--font-display); font-size:clamp(2.2rem,4vw,3.2rem);

  font-weight:400; letter-spacing:0.15em; color:var(--gold-mid); margin-bottom:0.5rem;

}

.footer-brand p {

  font-family:var(--font-serif); font-size:0.95rem; font-style:italic; font-weight:400;

  color:rgba(244,228,166,0.55); margin-bottom:2rem; line-height:1.8;

}

.footer-col h4 {

  font-family:var(--font-sans); font-size:0.6rem; letter-spacing:0.35em;

  text-transform:uppercase; color:var(--gold-dark); margin-bottom:1.5rem;

}

.footer-col ul { list-style:none; }

.footer-col ul li { margin-bottom:0.85rem; }

.footer-col ul li a {

  font-family:var(--font-sans); font-size:0.82rem;

  color:rgba(244,228,166,0.5); transition:color 0.3s ease;

}

.footer-col ul li a:hover { color:var(--gold-mid); }

.footer-socials { display:flex; gap:1rem; flex-wrap:wrap; }

.social-link {

  width:40px; height:40px; border-radius:50%;

  border:1px solid rgba(212,175,55,0.2);

  display:flex; align-items:center; justify-content:center;

  color:rgba(244,228,166,0.5); font-size:0.8rem;

  transition:all 0.3s ease;

}

.social-link:hover {

  border-color:var(--gold-mid); color:var(--gold-mid);

  box-shadow:0 0 15px rgba(212,175,55,0.2);

}

.footer-bottom {

  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap;

  gap:1rem; padding-top:2rem; max-width:1300px; margin:0 auto;

  position:relative; z-index:2;

}

.footer-copy { font-family:var(--font-sans); font-size:0.72rem; color:rgba(244,228,166,0.3); letter-spacing:0.1em; }

.footer-whatsapp {

  display:inline-flex; align-items:center; gap:0.75rem;

  padding:0.85rem 2rem; background:rgba(37,211,102,0.1);

  border:1px solid rgba(37,211,102,0.3); color:#25D366;

  font-family:var(--font-sans); font-size:0.65rem; letter-spacing:0.2em;

  text-transform:uppercase; transition:all 0.4s ease; cursor:none;

}

.footer-whatsapp:hover { background:rgba(37,211,102,0.2); box-shadow:0 0 20px rgba(37,211,102,0.15); }

@media(max-width:900px) {

  .footer-top { grid-template-columns:1fr 1fr; }

}

@media(max-width:600px) {

  .footer-top { grid-template-columns:1fr; }

  .footer-bottom { flex-direction:column; text-align:center; }

}