:root{
  --bg:#040507;
  --bg2:#07090d;
  --card:#0b0e14;

  --gold-main:#d6be7b;
  --gold-soft:#b79f5b;
  --gold-dark:#8c7740;

  --text:var(--gold-main);
  --muted:rgba(214,190,123,.55);
  --line:rgba(214,190,123,.18);
  --glow:rgba(214,190,123,.35);

  --btn:linear-gradient(135deg,#f1df9f,#c7a95d);
  --btnText:#040507;
}



*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  body{
  font-family: "Source Sans 3", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

h1, h2, h3, h4, h5, h6,
.display{
  font-family: "Playfair Display", serif;
  letter-spacing: 0.02em;
}

  background: radial-gradient(1200px 700px at 20% -10%, rgba(255,255,255,.03), transparent 55%),
              radial-gradient(900px 600px at 110% 10%, rgba(255,255,255,.02), transparent 55%),
              linear-gradient(180deg, #040507, #07090d);
  color:var(--text);
  letter-spacing:.1px;
}
a{color:inherit;text-decoration:none}
.container{width:min(1120px,92%);margin:auto}

/* NAV */
.header-logo{
  height:44px;
  width:auto;
  display:block;
  filter:
    drop-shadow(0 4px 18px rgba(214,190,123,.35));
  transition: filter .4s ease, transform .4s ease;
  position: relative;
}

/* ===== Metallic Shimmer Mode (logo) ===== */

.brand-center{
  position: relative;
  overflow: hidden;
  border-radius: 14px; /* keeps shimmer neat */
}

.header-logo{
  height:44px;
  width:auto;
  display:block;
  filter: drop-shadow(0 4px 18px rgba(214,190,123,.35));
  transition: filter .4s ease, transform .4s ease;
}

/* ===== Metallic Shimmer Mode (FIXED hover sync) ===== */

.brand-center{
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  --shimmerDur: 5.6s;
  --shimmerOpacity: .85;
}

.header-logo{
  height: 44px;
  width: auto;
  display: block;
  filter: drop-shadow(0 4px 18px rgba(214,190,123,.35));
  transition: filter .35s ease, transform .35s ease;
}

/* ===== GUARANTEED METALLIC SHIMMER (center logo) ===== */
.nav .brand-center{
  .nav{
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 100;
  background: linear-gradient(
    180deg,
    rgba(0,0,0,0.75) 0%,
    rgba(0,0,0,0.45) 40%,
    rgba(0,0,0,0.15) 70%,
    rgba(0,0,0,0) 100%
  );
  backdrop-filter: blur(6px);
  border-bottom: none;
}
.nav.scrolled{
  background: rgba(0,0,0,.65);
  backdrop-filter: blur(14px);
}

}

.nav .brand-center .header-logo{
  position: relative;
  z-index: 2;                 /* logo above background */
  height: 44px;
  width: auto;
  display: block;
  filter: drop-shadow(0 4px 18px rgba(214,190,123,.35));
  transition: filter .35s ease, transform .35s ease;
}

/* Shimmer layer sits OVER the logo */
.nav .brand-center::after{
  content:"";
  position: absolute;
  inset: -60% -80%;
  z-index: 3;
  pointer-events: none;
  opacity: var(--shimmerOpacity);

  background: linear-gradient(
    120deg,
    transparent 40%,
    rgba(255,215,140,.10) 46%,
    rgba(255,215,140,.45) 50%,
    rgba(255,215,140,.10) 54%,
    transparent 60%
  );

  transform: translateX(-60%) skewX(-18deg);
  animation: logoShimmer var(--shimmerDur) cubic-bezier(.16,.84,.44,1) infinite;
}

/* Hover = faster + brighter */
.nav .brand-center:hover{
  --shimmerDur: 2.2s;
  --shimmerOpacity: 1;
}

.nav .brand-center:hover .header-logo{
  filter: drop-shadow(0 6px 26px rgba(214,190,123,.55)) brightness(1.08);
  transform: scale(1.03);
}

@keyframes logoShimmer{
  0%   { transform: translateX(-60%) skewX(-18deg); }
  45%  { transform: translateX(60%)  skewX(-18deg); }
  100% { transform: translateX(60%)  skewX(-18deg); }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .nav .brand-center::after{ animation: none; }
}


/* hover = faster + brighter (SYNC guaranteed) */
.brand-center:hover{
  --shimmerDur: 2.4s;
  --shimmerOpacity: 1;
}

.brand-center:hover .header-logo{
  filter:
    drop-shadow(0 6px 26px rgba(214,190,123,.55))
    brightness(1.08);
  transform: scale(1.03);
}

@keyframes logoShimmer{
  0%   { transform: translateX(-55%) skewX(-18deg); }
  45%  { transform: translateX(55%)  skewX(-18deg); }
  100% { transform: translateX(55%)  skewX(-18deg); }
}

@media (prefers-reduced-motion: reduce){
  .brand-center::after{ animation: none; }
}



/* stronger shimmer on hover */
.brand-center:hover .header-logo{
  filter:
    drop-shadow(0 6px 26px rgba(214,190,123,.55))
    brightness(1.08);
  transform: scale(1.03);
}

.brand-center:hover::after{
  opacity: 1;
  animation-duration: 2.4s;
}

@keyframes logoShimmer{
  0%   { transform: translateX(-55%) skewX(-18deg); }
  45%  { transform: translateX(55%)  skewX(-18deg); }
  100% { transform: translateX(55%)  skewX(-18deg); }
}

/* Respect user motion settings */
@media (prefers-reduced-motion: reduce){
  .brand-center::after{ animation: none; }
}

.brand-center:hover::after{
  left:120%;
}

.brand-center:hover .header-logo{
  filter:
    drop-shadow(0 6px 26px rgba(214,190,123,.55))
    brightness(1.08);
  transform: scale(1.03);
}


@media (max-width:768px){
  .header-logo{
    height:34px;
  }
}

.nav-inner{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.brand{display:flex;gap:10px;align-items:center}
.brand-mark{
  width:34px;height:34px;border-radius:12px;
  display:grid;place-items:center;
  border:1px solid var(--line);
  background: linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.02));
}
.brand-text{font-weight:700;letter-spacing:.3px}
.menu{display:flex;gap:18px;align-items:center}
.menu a{opacity:.88}
.menu a:hover{opacity:1}
.nav-3col{
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  align-items:center;
}

.menu.left{
  justify-self:start;
}

.menu.right{
  justify-self:end;
}

.brand-center{
  justify-self:center;
  display:flex;
  align-items:center;
}

.header-logo{
  height:44px;
  width:auto;
  display:block;
  filter:
    drop-shadow(0 4px 18px rgba(214,190,123,.35));
}

@media (max-width: 900px){
  .nav-3col{
    grid-template-columns: auto 1fr auto;
  }

  .brand-center{
    justify-self:start;
  }
}

/* BUTTONS */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:10px 14px;border-radius:14px;
  background:var(--btn); color:var(--btnText);
  font-weight:700; border:1px solid transparent;
  cursor:pointer;
}
.btn.outline{background:transparent;color:var(--text);border-color:var(--line)}
.btn.full{width:100%}

/* HERO */
.hero{border-bottom:1px solid var(--line)}
.hero-grid{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap:22px;
  padding:74px 0 28px;
  align-items:stretch;
}
.kicker{color:var(--muted); margin:0 0 14px; font-size:13px; letter-spacing:.22em; text-transform:uppercase}
.display{
  font-family: "Playfair Display", serif;
  font-size:54px; line-height:1.02;
  margin:0 0 14px;
}
.italic{font-style:italic}
.sub{color:var(--muted); margin:0 0 18px; max-width:60ch}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:18px}

.hero-stats{display:flex;gap:18px;flex-wrap:wrap}
.stat{
  padding:12px 14px;border-radius:16px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.03);
}
.stat-num{font-weight:800}
.stat-label{color:var(--muted); font-size:12px}

.hero-media{display:grid}
.hero-frame{
  border-radius:24px;
  border:1px solid var(--line);
  background: linear-gradient(135deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
  overflow:hidden;
  position:relative;
}
.hero-placeholder{
  height:100%;
  min-height:420px;
  background:
    radial-gradient(700px 400px at 20% 20%, rgba(255,255,255,.10), transparent 60%),
    radial-gradient(700px 400px at 90% 70%, rgba(255,255,255,.07), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
  position:relative;
}
.grain{
  position:absolute; inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
  opacity:.22;
  pointer-events:none;
}
.hero-badge{
  position:absolute; top:16px; left:16px;
  padding:10px 12px; border-radius:999px;
  border:1px solid var(--line);
  background: rgba(7,9,12,.45);
  backdrop-filter: blur(10px);
  font-size:12px; color:var(--text);
  display:flex; align-items:center; gap:8px;
}
.dot{width:8px;height:8px;border-radius:99px;background:rgba(255,255,255,.85); box-shadow:0 0 18px var(--glow)}
.hero-caption{
  position:absolute; bottom:16px; left:16px; right:16px;
  border:1px solid var(--line);
  background: rgba(7,9,12,.45);
  backdrop-filter: blur(10px);
  border-radius:18px;
  padding:14px 14px;
}
.cap-title{font-weight:800}
.cap-sub{color:var(--muted); font-size:13px; margin-top:4px}

/* MARQUEE */
.marquee{border-top:1px solid var(--line); overflow:hidden}
.marquee-track{
  display:flex; gap:16px; padding:12px 0;
  white-space:nowrap;
  color:var(--muted);
  animation: marquee 18s linear infinite;
}
.marquee-track span{opacity:.95}
@keyframes marquee{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}

/* SECTIONS */
.section{padding:64px 0}
.section.alt{
  background: linear-gradient(180deg, rgba(255,255,255,.015), rgba(255,255,255,.005));
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.section-head{display:flex; align-items:flex-end; justify-content:space-between; gap:18px; margin-bottom:18px}
h2{
  font-family:"Playfair Display", serif;
  font-size:34px; margin:0;
}
.muted{color:var(--muted)}
.tiny{font-size:12px}

/* OLD SAMPLE WORK CARDS (your earlier demo grid) */
.work-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:14px;
}
.work-card{
  border-radius:22px;
  border:1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.005));
  overflow:hidden;
}
.work-card.wide{grid-column: 1 / -1}
.work-thumb{
  height:260px;
  background:
    radial-gradient(600px 360px at 20% 20%, rgba(255,255,255,.10), transparent 55%),
    linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border-bottom:1px solid var(--line);
}
.work-thumb.t2{
  background:
    radial-gradient(600px 360px at 85% 30%, rgba(255,255,255,.10), transparent 55%),
    linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
}
.work-thumb.t3{
  height:320px;
  background:
    radial-gradient(700px 420px at 50% 60%, rgba(255,255,255,.11), transparent 58%),
    linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
}
.work-meta{padding:14px 16px}
.work-meta h3{margin:0 0 6px}
.work-meta p{margin:0;color:var(--muted)}

/* SERVICES CARDS */
.cards{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:14px;
}
.card{
  padding:18px;
  border-radius:20px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.02);
}
.card h3{margin:0 0 10px}
.card p{margin:0;color:var(--muted)}

/* STUDIO */
.studio{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap:14px;
  align-items:start;
}
.bullet{display:flex; gap:12px; align-items:flex-start; margin-top:14px}
.bullet-line{width:34px;height:1px;background:rgba(255,255,255,.22); margin-top:12px}
.bullet-text{color:var(--muted)}
.bullet-text strong{color:var(--text)}

.studio-panel{
  border:1px solid var(--line);
  background: rgba(255,255,255,.02);
  border-radius:22px;
  overflow:hidden;
}
.panel-top{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px; border-bottom:1px solid var(--line);
}
.tag{
  font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  padding:6px 10px; border-radius:999px;
  border:1px solid var(--line); background:rgba(255,255,255,.02);
}
.panel-body{padding:16px}

/* CONTACT */
.contact-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:14px;
}
.contact-box{
  padding:18px;
  border-radius:20px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.02);
}
.contact-form{
  padding:18px;
  border-radius:20px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.02);
}
input,textarea{
  width:100%;
  margin:8px 0;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.03);
  color:var(--text);
  outline:none;
}
textarea{min-height:120px; resize:vertical}

/* FOOTER */
.footer{padding:24px 0}
.footer-inner{display:flex; justify-content:space-between; align-items:center; gap:12px}

/* FULL SCREEN 3D HERO */
.hero-3d{
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: #05070b;
  border-bottom: 1px solid var(--line);
}
#threeCanvas{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 1;
}
.hero3d-overlay{
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
  pointer-events: none;
  padding: 0 16px;
  z-index: 2;
}
.hero3d-overlay .display{
  font-size: clamp(42px, 7vw, 92px);
}
.hero3d-overlay .sub{
  color: var(--muted);
  margin-top: 12px;
  font-size: 13px;
  letter-spacing: .22em;
  text-transform: uppercase;
}

/* Fallback if WebGL fails */
.fallback-hero{
  position:absolute;
  inset:0;
  display:none;
  background:
    radial-gradient(900px 520px at 25% 15%, rgba(255,255,255,.10), transparent 60%),
    radial-gradient(700px 480px at 85% 70%, rgba(255,255,255,.08), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)),
    #05070b;
  z-index: 2;
}
body.no-webgl .fallback-hero{ display:block; }
body.no-webgl #threeCanvas{ display:none; }

/* SELECTED WORKS (REAL IMAGE) */
.works{
  padding: clamp(80px, 10vw, 160px) 0;
}
.works-grid{
  margin-top: 48px;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 18px;
}
.work-item{
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  background: #0b0e14;
}
.work-item.large{
  grid-column: span 12;
  aspect-ratio: 16 / 9;
}
.work-item img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.02);
  transition: transform 1.2s cubic-bezier(.16,.84,.44,1);
}
.work-item:hover img{
  transform: scale(1.08);
}

/* RESPONSIVE */
@media (max-width: 950px){
  .hero-grid{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr}
  .studio{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
  .work-grid{grid-template-columns:1fr}
  .display{font-size:42px}
}
/* --- Force correct 3D layering --- */
.hero-3d { position: relative; }

.hero-3d .fallback-hero{
  display:block !important;    /* always show as background */
  z-index:0;
}

#threeCanvas{
  z-index:1;
}

.hero3d-overlay{
  z-index:2;
}
/* ------------------------------
   SCROLL STORY (Pinned)
------------------------------- */
.story{
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(900px 520px at 20% 10%, rgba(255,255,255,.06), transparent 60%),
    radial-gradient(700px 480px at 85% 70%, rgba(255,255,255,.04), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
}

.story-grid{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 22px;
  align-items: start;
  padding: clamp(80px, 10vw, 140px) 0;
}

.story-left h2{ margin: 10px 0 10px; }
.story-left .muted{ max-width: 50ch; }

.story-progress{
  margin-top: 22px;
  height: 2px;
  width: min(420px, 100%);
  background: rgba(255,255,255,.10);
  border-radius: 999px;
  overflow:hidden;
}
.story-progress span{
  display:block;
  height:100%;
  width:0%;
  background: rgba(255,255,255,.85);
}

.story-right{
  display:grid;
  align-items:center;
}

.story-card{
  border-radius: 22px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.03);
  box-shadow: 0 18px 60px rgba(0,0,0,.35);
  padding: 22px;
  min-height: 240px;
}

.story-step{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display:grid;
  place-items:center;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.03);
  font-weight: 800;
  margin-bottom: 14px;
}

.story-card h3{ margin: 0 0 10px; }
.story-card p{ margin: 0; }

@media (max-width: 950px){
  .story-grid{ grid-template-columns: 1fr; }
  .story-card{ min-height: 220px; }
}
.story-card, .hero-3d, .works-grid { 
  will-change: transform; 
}
/* 3D services overlay */
.exp-services{
  position:absolute;
  inset:0;
  z-index:3;
  pointer-events:none;
  display:flex;
  align-items:flex-end;
  justify-content:flex-start;
  padding: clamp(18px, 4vw, 42px);
}

.exp-card{
  width: min(520px, 92vw);
  border-radius: 22px;
  border: 1px solid var(--line);
  background: rgba(7,9,12,.55);
  backdrop-filter: blur(12px);
  padding: 18px 18px;
  box-shadow: 0 18px 60px rgba(0,0,0,.35);
  opacity: 0;
  transform: translateY(14px);
}

.exp-num{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display:grid;
  place-items:center;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.03);
  font-weight: 800;
  margin-bottom: 12px;
}

.exp-card h3{ margin:0 0 8px; }
.exp-card p{ margin:0; color: var(--muted); }
/* 3D Service Indicator */
.exp-indicator{
  position:absolute;
  left: clamp(18px, 4vw, 42px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  display:flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: auto; /* clickable */
}

.exp-dot{
  appearance:none;
  border: 1px solid var(--line);
  background: rgba(7,9,12,.35);
  backdrop-filter: blur(10px);
  color: rgba(255,255,255,.65);
  width: 46px;
  height: 46px;
  border-radius: 16px;
  font-weight: 800;
  letter-spacing: .06em;
  cursor: pointer;
  transition: transform .35s cubic-bezier(.16,.84,.44,1),
              background .35s cubic-bezier(.16,.84,.44,1),
              color .35s cubic-bezier(.16,.84,.44,1),
              border-color .35s cubic-bezier(.16,.84,.44,1);
}

.exp-dot:hover{
  transform: translateY(-2px);
  color: rgba(255,255,255,.85);
  background: rgba(7,9,12,.55);
}

.exp-dot.is-active{
  color: #07090c;
  background: rgba(255,255,255,.92);
  border-color: rgba(255,255,255,.35);
}

/* Mobile: move indicator to bottom center */
@media (max-width: 950px){
  .exp-indicator{
    top: auto;
    bottom: 18px;
    left: 50%;
    transform: translateX(-50%);
    flex-direction: row;
    gap: 10px;
  }
  .exp-dot{ width: 44px; height: 44px; border-radius: 14px; }
}
/* Loader full screen */
#loader{
  position: fixed;
  inset: 0;
  background: #040507;
  display: grid;
  place-items: center;
  z-index: 999999;
}

/* Big cinematic logo */
.loader-logo{
  width: min(420px, 70vw);   /* Big but responsive */
  height: auto;
  opacity: 0;
  transform: scale(0.85) translateY(20px);
  filter: drop-shadow(0 0 40px rgba(216,194,138,.15));
}


/* Cinematic text reveal base */
.reveal{
  opacity: 0;
  transform: translateY(18px);
  filter: blur(6px);
  will-change: transform, opacity, filter;
}
/* Magnetic elements */
.magnetic{
  display: inline-flex;
  will-change: transform;
  transform: translate3d(0,0,0);
}
/* ==============================
   LUXURY CUSTOM CURSOR
============================== */

body{
  cursor: none;
}

/* inner dot */
.cursor-dot{
  width: 8px;
  height: 8px;
  background: radial-gradient(circle, #f5e7b5, #c7a95d);
  border-radius: 50%;
  position: fixed;
  z-index: 9999;
  pointer-events: none;
  transform: translate(-50%, -50%);
}

/* outer cinematic ring */
.cursor-ring{
  width: 42px;
  height: 42px;
  border: 1px solid rgba(214,190,123,.55);
  border-radius: 50%;
  position: fixed;
  z-index: 9998;
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition: width .25s ease, height .25s ease, border .25s ease;
}

/* hover expansion */
.cursor-hover .cursor-ring{
  width: 70px;
  height: 70px;
  border: 1px solid rgba(214,190,123,.9);
}

/* click feedback */
.cursor-click .cursor-ring{
  width: 30px;
  height: 30px;
  border-color: rgba(214,190,123,1);
}

/* hide on mobile */
@media (max-width: 900px){
  .cursor-dot,.cursor-ring{ display:none; }
  body{ cursor: auto; }
}
/* HERO SLIDESHOW */
.hero-slideshow{
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
}

.hero-slide{
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform: scale(1.05);
  transition: opacity 1.6s ease, transform 6s ease;
}

.hero-slide.is-active{
  opacity: 1;
  transform: scale(1);
}

/* Dark luxury overlay */
.hero-slideshow::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.65), rgba(0,0,0,.55));
}

.hero-fullscreen{
  position: relative;
  height: 100vh;
  min-height: 100vh;
  overflow: hidden;
}

.hero-fullscreen .container{
  position: relative;
  z-index: 3;
}

.hero-slideshow{
  position: absolute;
  inset: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
}

.hero-slide{
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform: scale(1.08);
  transition:
    opacity 1.4s cubic-bezier(.16,.84,.44,1),
    transform 6s cubic-bezier(.16,.84,.44,1);
}

.hero-slide.is-active{
  opacity: 1;
  transform: scale(1);
}

/* cinematic dark overlay */
.hero-slideshow::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.65));
  z-index:2;
}
.hero-fullscreen .hero-grid{
  position: relative;
  z-index: 4;
  height: 100vh;
  align-items: center;
  padding-top: 80px;
}
/* HERO must be relative so background positions correctly */
.hero.hero-fullscreen{
  position: relative;
  min-height: 100vh;
  overflow: hidden;
}

/* Background slideshow layer */
.hero-bg{
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.hero-bg-slide{
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform: scale(1.07);
  transition: opacity 1.2s ease, transform 6s ease;
}

.hero-bg-slide.is-active{
  opacity: 1;
  transform: scale(1.02);
}

/* Black+gold cinematic overlay */
.hero-bg::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.78));
}

/* Make hero content sit above background */
.hero .container,
.hero .marquee{
  position: relative;
  z-index: 2;
}
/* ===== Header Gradient (override) ===== */
.nav{
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 9999;

  background: linear-gradient(
    180deg,
    rgba(0,0,0,0.78) 0%,
    rgba(0,0,0,0.42) 45%,
    rgba(0,0,0,0.12) 75%,
    rgba(0,0,0,0) 100%
  ) !important;

  border-bottom: none !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* When you scroll down */
.nav.scrolled{
  background: rgba(0,0,0,0.70) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* Push content down because nav is fixed */
body{
  padding-top: 74px; /* adjust if header taller */
}
/* Luxury nav link underline */
.nav .menu a{
  position: relative;
  padding: 10px 2px;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.nav .menu a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:6px;
  width:0%;
  height:1px;
  background: rgba(214,190,123,.85);
  box-shadow: 0 0 18px rgba(214,190,123,.35);
  transition: width .45s cubic-bezier(.16,.84,.44,1);
}

.nav .menu a:hover::after{
  width:100%;
}
.nav-phone{
  font-weight: 500;
  letter-spacing: .14em;
  font-size: 12px;
  color: var(--gold-main);
  opacity: .9;
  transition: opacity .3s ease, text-shadow .3s ease;
}

.nav-phone:hover{
  opacity: 1;
  text-shadow: 0 0 14px rgba(214,190,123,.45);
}
.nav-3col{
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  align-items:center;
}

.menu.left{ justify-self:flex-start; display:flex; gap:22px; }
.menu.right{ justify-self:flex-end; display:flex; gap:18px; align-items:center; }

.brand-center img{
  height:56px;
}
/* ===== NKEY Style Header ===== */
.nav{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9999;

  background: linear-gradient(
    180deg,
    rgba(0,0,0,0.85) 0%,
    rgba(0,0,0,0.55) 35%,
    rgba(0,0,0,0.22) 65%,
    rgba(0,0,0,0.05) 85%,
    rgba(0,0,0,0) 100%
  );

  border: none;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background .5s ease, backdrop-filter .5s ease;
}

/* Scroll state — becomes more solid */
.nav.scrolled{
  background: linear-gradient(
    180deg,
    rgba(0,0,0,0.92) 0%,
    rgba(0,0,0,0.85) 100%
  );
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
/* ===== NKEY EXACT HEADER STYLE ===== */
.nav{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9999;

  height: 120px;

  background: linear-gradient(
    180deg,
    rgba(0,0,0,0.88) 0%,
    rgba(0,0,0,0.78) 25%,
    rgba(0,0,0,0.60) 50%,
    rgba(0,0,0,0.35) 70%,
    rgba(0,0,0,0.15) 85%,
    rgba(0,0,0,0.05) 92%,
    rgba(0,0,0,0.0) 100%
  );

  border: none;
  backdrop-filter: none;
}


/* ===== NKEY BLENDED HEADER (NO BAR) ===== */
.nav{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9999;

  background: linear-gradient(
    180deg,
    rgba(0,0,0,0.55) 0%,
    rgba(0,0,0,0.35) 25%,
    rgba(0,0,0,0.18) 45%,
    rgba(0,0,0,0.08) 65%,
    rgba(0,0,0,0.03) 80%,
    rgba(0,0,0,0.0) 100%
  );

  border: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
/* ==============================
   NKEY BLENDED HEADER (FORCE)
============================== */

.nav{
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 99999;

  background: linear-gradient(
    180deg,
    rgba(0,0,0,0.55) 0%,
    rgba(0,0,0,0.30) 35%,
    rgba(0,0,0,0.12) 60%,
    rgba(0,0,0,0.04) 80%,
    rgba(0,0,0,0.00) 100%
  ) !important;

  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* REMOVE ANY BAR FEEL */
.nav *{
  background: transparent !important;
}

/* Make hero slide behind header */
.hero.hero-fullscreen{
  margin-top: -90px;
  padding-top: 90px;
}
/* ======================================
   FORCE NKEY BLENDED HEADER (NO BAR)
====================================== */

.nav{
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 99999 !important;

  background: linear-gradient(
    180deg,
    rgba(0,0,0,0.55) 0%,
    rgba(0,0,0,0.32) 30%,
    rgba(0,0,0,0.15) 55%,
    rgba(0,0,0,0.06) 75%,
    rgba(0,0,0,0.00) 100%
  ) !important;

  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Kill ANY solid backgrounds inside header */
.nav *{
  background: transparent !important;
}

/* Let hero image slide under header */
.hero.hero-fullscreen{
  margin-top: -100px !important;
  padding-top: 100px !important;
}

/* Kill any scroll-based header changes */
.nav.scrolled{
  background: linear-gradient(
    180deg,
    rgba(0,0,0,0.55) 0%,
    rgba(0,0,0,0.32) 30%,
    rgba(0,0,0,0.15) 55%,
    rgba(0,0,0,0.06) 75%,
    rgba(0,0,0,0.00) 100%
  ) !important;
}
/* Header button → turn into luxury text */
.nav .btn{
  background: transparent !important;
  color: var(--gold-main) !important;
  border: none !important;
  padding: 0 !important;
  font-weight: 400;
  letter-spacing: .14em;
  text-transform: uppercase;
  box-shadow: none !important;
}

/* Hover glow like other links */
.nav .btn:hover{
  text-shadow: 0 0 14px rgba(216,194,138,.45);
}
/* Hide header while loader is active */
body.loading .nav{
  opacity: 0;
  pointer-events: none;
  transform: translateY(-20px);
}
/* ==============================
   FORCE BIG CINEMATIC LOADER LOGO
============================== */

#loader{
  position: fixed !important;
  inset: 0 !important;
  background: #040507 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 9999999 !important;
}

#loader .loader-inner{
  display:flex;
  align-items:center;
  justify-content:center;
}

#loader .loader-logo{
  width: 420px !important;   /* BIG size */
  max-width: 80vw !important;
  height: auto !important;
  opacity: 0;
  transform: scale(0.85) translateY(25px);
  filter: drop-shadow(0 0 45px rgba(216,194,138,.22));
}
/* ==============================
   NKEY STYLE ABOUT SECTION
============================== */

.about-nkey{
  padding: clamp(120px, 12vw, 180px) 0;
  background: radial-gradient(1200px 600px at 20% 0%, rgba(216,194,138,.04), transparent 60%);
}

.about-grid{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap: clamp(40px, 6vw, 120px);
  align-items:flex-start;
}

.about-left .display{
  font-size: clamp(40px, 6vw, 78px);
  line-height:1.05;
}

.about-intro{
  margin-top:24px;
  max-width:52ch;
  font-size:15px;
  color: var(--muted);
  line-height:1.7;
}

.about-right{
  display:flex;
  flex-direction:column;
  gap:28px;
}

.about-card{
  padding:28px 28px 32px;
  border-left: 1px solid rgba(216,194,138,.25);
  background: linear-gradient(90deg, rgba(216,194,138,.05), transparent);
}

.about-card h3{
  font-family: "Canela", serif;
  font-size:22px;
  margin-bottom:10px;
  letter-spacing:.06em;
  text-transform: uppercase;
}

.about-card p{
  font-size:14px;
  color: var(--muted);
  line-height:1.8;
}

/* Responsive */
@media(max-width: 900px){
  .about-grid{
    grid-template-columns:1fr;
  }
}
/* ===== NKEY underline hover (FORCE) ===== */
.nav .nav-link{
  position: relative !important;
  display: inline-block !important;
  background: transparent !important;
  color: var(--gold-main) !important;
  border: none !important;
  padding: 8px 2px !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  font-weight: 400 !important;
  opacity: .9;
}

.nav .nav-link::after{
  content:"" !important;
  position:absolute !important;
  left:0 !important;
  bottom:2px !important;
  width:0% !important;
  height:1px !important;
  background: rgba(216,194,138,.9) !important;
  box-shadow: 0 0 18px rgba(216,194,138,.35) !important;
  transition: width .45s cubic-bezier(.16,.84,.44,1) !important;
}

.nav .nav-link:hover{ opacity: 1; }
.nav .nav-link:hover::after{ width:100% !important; }

/* Optional CTA (still matches gold) */
.nav .nav-cta{
  color: var(--gold-main) !important;
  text-transform: uppercase;
  letter-spacing: .18em;
  padding: 8px 2px;
}
/* =========================================
   FORCE NKEY BLENDED HEADER (NO BAR)
========================================= */

.nav{
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 99999;

  background: linear-gradient(
    180deg,
    rgba(0,0,0,0.55) 0%,
    rgba(0,0,0,0.30) 35%,
    rgba(0,0,0,0.12) 60%,
    rgba(0,0,0,0.04) 80%,
    rgba(0,0,0,0.00) 100%
  ) !important;

  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.nav *{
  background: transparent !important;
}

.hero.hero-fullscreen{
  margin-top: -100px !important;
  padding-top: 100px !important;
}

/* =========================================
   HEADER NAV LINKS + UNDERLINE
========================================= */

.nav .nav-link,
.nav .nav-cta{
  position: relative;
  color: var(--gold-main) !important;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 400;
  font-size: 12px;
  padding: 8px 2px;
}

.nav .nav-link::after{
  content:"";
  position:absolute;
  left:0;
  bottom:2px;
  width:0%;
  height:1px;
  background: rgba(216,194,138,.9);
  box-shadow: 0 0 18px rgba(216,194,138,.35);
  transition: width .45s cubic-bezier(.16,.84,.44,1);
}

.nav .nav-link:hover::after{
  width:100%;
}

/* =========================================
   BIG CINEMATIC LOGO (HEADER)
========================================= */

.brand-center img{
  height: 56px !important;
  filter: drop-shadow(0 6px 26px rgba(214,190,123,.45));
}

/* =========================================
   FORCE BIG CINEMATIC LOADER
========================================= */

#loader{
  position: fixed;
  inset: 0;
  background: #040507;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999999;
}

#loader .loader-logo{
  width: 420px !important;
  max-width: 80vw;
  height: auto;
  filter: drop-shadow(0 0 55px rgba(216,194,138,.25));
  animation: loaderReveal 1.4s cubic-bezier(.16,.84,.44,1) forwards;
}

@keyframes loaderReveal{
  from{
    opacity:0;
    transform: scale(.82) translateY(30px);
  }
  to{
    opacity:1;
    transform: scale(1) translateY(0);
  }
}

/* =========================================
   HIDE HEADER WHILE LOADING
========================================= */

body.loading .nav{
  opacity: 0;
  pointer-events: none;
  transform: translateY(-20px);
}

/* =========================================
   MAGNETIC + SHIMMER SYNC FIX
========================================= */

.brand-center{
  position: relative;
  overflow: hidden;
}

.brand-center::after{
  content:"";
  position:absolute;
  inset:-60% -80%;
  background: linear-gradient(
    120deg,
    transparent 40%,
    rgba(255,215,140,.10) 46%,
    rgba(255,215,140,.45) 50%,
    rgba(255,215,140,.10) 54%,
    transparent 60%
  );
  transform: translateX(-60%) skewX(-18deg);
  animation: logoShimmer 5.6s cubic-bezier(.16,.84,.44,1) infinite;
  pointer-events:none;
}

.brand-center:hover::after{
  animation-duration: 2.2s;
}

@keyframes logoShimmer{
  0%   { transform: translateX(-60%) skewX(-18deg); }
  45%  { transform: translateX(60%)  skewX(-18deg); }
  100% { transform: translateX(60%)  skewX(-18deg); }
}
/* Force hero slideshow visibility */
#heroSlideshow, #heroBg{
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
}

.hero-slide, .hero-bg-slide{
  position: absolute !important;
  inset: 0 !important;
  background-size: cover !important;
  background-position: center !important;
  opacity: 0 !important;
  transition: opacity 1.2s ease !important;
}

.hero-slide.is-active, .hero-bg-slide.is-active{
  opacity: 1 !important;
}
body.loading {
  overflow: hidden;
}

#loader {
  pointer-events: all;
}

body:not(.loading) #loader {
  pointer-events: none;
}
/* ===============================
   FLOATING WHATSAPP BUTTON (PREMIUM)
=============================== */

.whatsapp-float{
  position: fixed;
  right: 26px;
  bottom: 26px;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #25D366, #0fa958 70%);
  display: grid;
  place-items: center;
  z-index: 9999;
  box-shadow: 0 12px 30px rgba(37,211,102,.45);
  transition: transform .35s ease, box-shadow .35s ease;
}

.whatsapp-float:hover{
  transform: scale(1.08);
  box-shadow: 0 18px 46px rgba(37,211,102,.65);
}

.wa-icon{
  width: 30px;
  height: 30px;
  fill: #fff;
}

@media (max-width:768px){
  .whatsapp-float{
    right: 18px;
    bottom: 18px;
    width: 56px;
    height: 56px;
  }
}
/* ===============================
   GOLD SAND OVERLAY
=============================== */
#sandCanvas{
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9998; /* below loader (9999999) but above site */
  opacity: .75;  /* adjust intensity */
  mix-blend-mode: screen; /* luxury glow on dark */
}

/* If you want sand visible even over loader, raise above loader:
   set z-index: 10000000; (but it may distract on loader)
*/
/* ===============================
   PROJECTS GALLERY (LUXURY)
=============================== */
.projects{
  padding: clamp(90px, 10vw, 150px) 0;
  position: relative;
}

.projects .section-head{
  margin-bottom: 26px;
}

.projects-grid{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 18px;
}

.proj-card{
  grid-column: span 4;
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.02);
  transform: translateZ(0);
}

.proj-card img{
  width: 100%;
  height: 420px;
  object-fit: cover;
  display: block;
  transform: scale(1.04);
  transition: transform 1.1s cubic-bezier(.16,.84,.44,1);
  filter: saturate(0.95) contrast(1.05);
}

.proj-card:hover img{
  transform: scale(1.12);
}

.proj-meta{
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 14px;
  padding: 14px 14px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: rgba(0,0,0,.38);
  backdrop-filter: blur(10px);
}

.proj-title{
  font-family: "Canela", serif;
  font-size: 18px;
  letter-spacing: .02em;
}

.proj-sub{
  margin-top: 6px;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Featured layout like NKEY */
.proj-card:nth-child(1){
  grid-column: span 8;
}
.proj-card:nth-child(1) img{
  height: 520px;
}
.proj-card:nth-child(2){
  grid-column: span 4;
}
.proj-card:nth-child(2) img{
  height: 520px;
}

@media (max-width: 1000px){
  .proj-card{ grid-column: span 6; }
  .proj-card img{ height: 360px; }
  .proj-card:nth-child(1),
  .proj-card:nth-child(2){
    grid-column: span 12;
  }
  .proj-card:nth-child(1) img,
  .proj-card:nth-child(2) img{
    height: 420px;
  }
}

@media (max-width: 620px){
  .proj-card{ grid-column: span 12; }
  .proj-card img{ height: 360px; }
}
.display{
  font-weight: 600;
  line-height: 1.05;
}

.kicker{
  font-family: "Source Sans 3", sans-serif;
  letter-spacing: 0.28em;
  font-weight: 500;
  text-transform: uppercase;
}

.sub, p{
  line-height: 1.65;
  font-weight: 400;
}
/* ===============================
   PROJECTS FULL PAGE GALLERY
=============================== */

.projects-page{
  padding: clamp(110px, 12vw, 170px) 0 120px;
}

.gallery-grid{
  margin-top: 50px;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 20px;
}

.gallery-grid img{
  grid-column: span 4;
  width: 100%;
  height: 420px;
  object-fit: cover;
  border-radius: 22px;
  border: 1px solid var(--line);
  transition: transform 1.2s cubic-bezier(.16,.84,.44,1);
}

.gallery-grid img:hover{
  transform: scale(1.07);
}

.gallery-grid img:nth-child(1){
  grid-column: span 8;
  height: 520px;
}

.gallery-grid img:nth-child(2){
  grid-column: span 4;
  height: 520px;
}

@media (max-width:1000px){
  .gallery-grid img{
    grid-column: span 6;
    height: 360px;
  }
  .gallery-grid img:nth-child(1),
  .gallery-grid img:nth-child(2){
    grid-column: span 12;
    height: 420px;
  }
}

@media (max-width:620px){
  .gallery-grid img{
    grid-column: span 12;
    height: 320px;
  }
}
/* ===============================
   CINEMATIC PROJECT GALLERY
=============================== */

.projects-cine{
  padding: clamp(100px, 12vw, 160px) 0 80px;
  overflow: hidden;
}

.projects-track{
  margin-top: 50px;
  display: flex;
  gap: 26px;
  padding-left: max(4vw, 22px);
  padding-right: max(4vw, 22px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

.projects-track::-webkit-scrollbar{
  display: none;
}

.project-card{
  flex: 0 0 auto;
  width: min(78vw, 520px);
  height: 70vh;
  max-height: 640px;
  border-radius: 26px;
  overflow: hidden;
  position: relative;
  scroll-snap-align: center;
  border: 1px solid var(--line);
}

.project-card img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.6s cubic-bezier(.16,.84,.44,1);
}

.project-card:hover img{
  transform: scale(1.12);
}

.project-card span{
  position: absolute;
  left: 18px;
  bottom: 18px;
  padding: 10px 14px;
  border-radius: 16px;
  background: rgba(0,0,0,.55);
  border: 1px solid var(--line);
  backdrop-filter: blur(12px);
  font-family: "Playfair Display", serif;
  font-size: 16px;
  letter-spacing: .02em;
}

/* Mobile tuning */
@media (max-width:768px){
  .project-card{
    width: 86vw;
    height: 60vh;
  }
}
/* ===============================
   SCROLL CONTROLLED PROJECT GALLERY
=============================== */

.projects-scroll{
  position: relative;
  height: 220vh; /* controls scroll length */
}

.projects-pin{
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}

.projects-head{
  position: absolute;
  top: 90px;
  left: 6vw;
  z-index: 5;
}

.projects-track{
  display: flex;
  gap: 26px;
  padding-left: 40vw;
  padding-right: 40vw;
  will-change: transform;
}

.project-card{
  flex: 0 0 auto;
  width: min(70vw, 520px);
  height: 68vh;
  border-radius: 26px;
  overflow: hidden;
  position: relative;
  border: 1px solid var(--line);
  background: #000;
}

.project-card img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.8s cubic-bezier(.16,.84,.44,1);
}

.project-card:hover img{
  transform: scale(1.12);
}

.project-card span{
  position: absolute;
  left: 18px;
  bottom: 18px;
  padding: 10px 14px;
  border-radius: 16px;
  background: rgba(0,0,0,.55);
  border: 1px solid var(--line);
  backdrop-filter: blur(12px);
  font-family: "Playfair Display", serif;
  font-size: 16px;
}

/* Mobile */
@media (max-width:768px){
  .projects-scroll{ height: 160vh; }
  .projects-track{ padding-left: 18vw; padding-right: 18vw; }
  .project-card{ width: 86vw; height: 60vh; }
}
/* ===============================
   PROJECTS (GSAP PIN ONLY)
=============================== */

.projects-scroll{
  position: relative;
  overflow: hidden;
  padding: 0;           /* IMPORTANT */
}

.projects-pin{
  height: 100vh;        /* pinned viewport */
  position: relative;   /* NOT sticky */
  display: flex;
  align-items: center;
}

.projects-head{
  position: absolute;
  top: 0px;
  left: 6vw;
  z-index: 5;
}

.projects-track{
  display: flex;
  gap: 26px;
  padding-left: 18vw;   /* adjust to show more */
  padding-right: 18vw;
  will-change: transform;
}

.project-card{
  flex: 0 0 auto;
  width: min(58vw, 460px);
  height: 68vh;
  border-radius: 26px;
  overflow: hidden;
  position: relative;
  border: 1px solid var(--line);
  background: #000;
}

.project-card img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1.8s cubic-bezier(.16,.84,.44,1);
}

.project-card:hover img{
  transform: scale(1.10);
}

.project-card span{
  position: absolute;
  left: 18px;
  bottom: 18px;
  padding: 10px 14px;
  border-radius: 16px;
  background: rgba(0,0,0,.55);
  border: 1px solid var(--line);
  backdrop-filter: blur(12px);
  font-family: "Playfair Display", serif;
  font-size: 16px;
}

@media (max-width:768px){
  .project-card{ width: 82vw; height: 60vh; }
  .projects-track{ padding-left: 8vw; padding-right: 8vw; }
}
/* ===============================
   FOOTER (NKEY STYLE)
=============================== */
.footer-nkey{
  position: relative;
  padding: clamp(80px, 9vw, 120px) 0 40px;
  background:
    radial-gradient(900px 520px at 18% 10%, rgba(216,194,138,.08), transparent 60%),
    radial-gradient(700px 480px at 85% 70%, rgba(216,194,138,.06), transparent 62%),
    linear-gradient(180deg, rgba(0,0,0,.0), rgba(0,0,0,.35));
  border-top: 1px solid var(--line);
  overflow: hidden;
}

.footer-grid{
  display: grid;
  grid-template-columns: 1fr 1.2fr 1fr;
  gap: 42px;
  align-items: start;
}

.footer-title{
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}

.footer-title h3{
  margin: 0;
  font-family: "Playfair Display", serif;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: .02em;
}

.footer-line{
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(216,194,138,.35), transparent);
  opacity: .8;
}

.footer-list{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 14px;
  color: var(--muted);
}

.footer-list li{
  display: flex;
  gap: 12px;
  align-items: flex-start;
  line-height: 1.6;
}

.footer-list a{
  color: var(--text);
  opacity: .78;
  transition: opacity .25s ease;
}

.footer-list a:hover{ opacity: 1; }

.footer-list .ico{
  width: 24px;
  opacity: .9;
  color: var(--text);
}

.footer-center{
  text-align: center;
  padding-top: 6px;
}

.footer-logo{
  width: min(240px, 60%);
  height: auto;
  display: block;
  margin: 0 auto 16px;
  filter: drop-shadow(0 0 22px rgba(216,194,138,.15));
}

.footer-desc{
  margin: 0 auto 18px;
  max-width: 46ch;
  color: var(--muted);
  line-height: 1.7;
}

.footer-social{
  display: flex;
  justify-content: center;
  gap: 10px;
}

.social-btn{
  width: 42px;
  height: 42px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  background: rgba(0,0,0,.28);
  color: var(--text);
  opacity: .85;
  transition: transform .25s ease, opacity .25s ease, border-color .25s ease;
  backdrop-filter: blur(10px);
}
.social-btn:hover{
  opacity: 1;
  transform: translateY(-2px);
  border-color: rgba(216,194,138,.38);
}

.footer-right .footer-form{
  display: grid;
  gap: 12px;
  margin-top: 14px;
}

.footer-form input{
  width: 100%;
  padding: 14px 14px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: rgba(0,0,0,.25);
  color: var(--text);
  outline: none;
}

.footer-btn{
  border-radius: 16px;
}

.footer-bottom{
  margin-top: 46px;
  text-align: center;
}

.footer-divider{
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(216,194,138,.28), transparent);
  margin-bottom: 18px;
  opacity: .8;
}

/* Back-to-top button (bottom-right) */
.to-top{
  position: absolute;
  right: 22px;
  bottom: 22px;
  width: 52px;
  height: 52px;
  border-radius: 999px;
  border: 1px solid rgba(216,194,138,.35);
  background: rgba(0,0,0,.35);
  color: var(--text);
  cursor: pointer;
  backdrop-filter: blur(10px);
  transition: transform .25s ease, border-color .25s ease, opacity .25s ease;
  opacity: .9;
}
.to-top:hover{
  transform: translateY(-2px);
  border-color: rgba(216,194,138,.55);
  opacity: 1;
}

/* Responsive */
@media (max-width: 980px){
  .footer-grid{
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .footer-center{ text-align: left; }
  .footer-social{ justify-content: flex-start; }
  .footer-logo{ margin-left: 0; }
}
/* ===============================
   CONTACT (NKEY STYLE)
=============================== */
.contact-nkey{
  position: relative;
  padding: clamp(90px, 10vw, 150px) 0;
  background:
    radial-gradient(900px 520px at 20% 10%, rgba(216,194,138,.06), transparent 60%),
    radial-gradient(700px 480px at 85% 70%, rgba(216,194,138,.05), transparent 62%),
    rgba(0,0,0,.0);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}

/* subtle vignette */
.contact-nkey:before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.55));
  pointer-events:none;
}

/* corner geometry */
.contact-decor{
  position:absolute;
  width: 320px;
  height: 320px;
  border: 1px solid rgba(216,194,138,.18);
  transform: rotate(45deg);
  opacity: .35;
  filter: blur(.0px);
  pointer-events:none;
  z-index: 0;
}
.contact-decor-left{ left: -180px; top: 180px; }
.contact-decor-right{ right: -180px; top: 140px; opacity:.22; }

.contact-wrap{ position: relative; z-index: 1; }

.contact-top{
  text-align:center;
  margin-bottom: 54px;
}

.contact-top-line{
  height: 2px;
  width: min(1100px, 92%);
  margin: 0 auto 28px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.75), transparent);
  opacity: .7;
}

.contact-title{
  margin: 0;
  font-family: "Playfair Display", serif;
  font-size: clamp(44px, 6vw, 78px);
  letter-spacing: .02em;
  line-height: 1.0;
  color: var(--text);
  text-transform: uppercase;
}
.contact-title span{
  font-style: italic;
  letter-spacing: .01em;
}

.contact-sub{
  margin: 22px 0 14px;
  color: rgba(255,255,255,.82);
  opacity: .9;
  font-family: "Source Sans Pro", system-ui, sans-serif;
  letter-spacing: .02em;
  line-height: 1.35;
  font-size: 18px;
}

.contact-diamond{
  width: 10px;
  height: 10px;
  margin: 10px auto 0;
  background: rgba(216,194,138,.95);
  transform: rotate(45deg);
  box-shadow: 0 0 18px rgba(216,194,138,.28);
}

.contact-form-nkey{
  width: min(1080px, 92%);
  margin: 0 auto;
}

.contact-grid-nkey{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 34px 56px;
  align-items: end;
}

/* fields */
.field label{
  display:block;
  font-size: 14px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgb(255, 255, 255);
  margin-bottom: 10px;
}

.field input,
.field select{
  width: 100%;
  padding: 12px 4px 14px;
  border: none;
  border-bottom: 1px solid rgba(255,255,255,.18);
  background: transparent;
  color: rgb(255, 255, 255);
  outline: none;
  font-size: 18px;
}

.field input::placeholder{ color: rgba(255,255,255,.35); }

.field select{
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(255,255,255,.6) 50%),
    linear-gradient(135deg, rgba(0, 0, 0, 0) 50%, transparent 50%);
  background-position:
    calc(100% - 14px) 58%,
    calc(100% - 8px) 58%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

.field.full{ grid-column: 1 / -1; }

.field-split{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 34px;
}

/* SEND button */
.contact-send{
  width: min(240px, 72%);
  height: 86px;
  margin: 10px auto 0;
  display: grid;
  place-items: center;
  border-radius: 0;
  border: 1px solid rgba(216,194,138,.35);
  background: rgba(0,0,0,.15);
  color: rgba(255,255,255,.9);
  font-family: "Source Sans Pro", system-ui, sans-serif;
  letter-spacing: .22em;
  font-size: 14px;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform .25s ease, border-color .25s ease, background .25s ease;
}

.contact-send:hover{
  transform: translateY(-2px);
  border-color: rgba(216,194,138,.55);
  background: rgba(216,194,138,.08);
}

@media (max-width: 900px){
  .contact-grid-nkey{ grid-template-columns: 1fr; gap: 26px; }
  .field-split{ grid-template-columns: 1fr; }
  .contact-send{ width: 100%; }
}
/* ===============================
   PREMIUM SELECT DROPDOWN STYLE
=============================== */

.field select{
  background-color: rgba(0,0,0,.92);
  color: var(--gold-main);
  border-bottom: 1px solid rgba(216,194,138,.35);
  cursor: pointer;
}

/* Dropdown option list */
.field select option{
  background: #050608;
  color: #d8c28a;
  padding: 12px;
  font-size: 15px;
}

/* Hover / Selected option */
.field select option:hover,
.field select option:checked{
  background: linear-gradient(90deg, #bfa35e, #e7d39a);
  color: #050608;
  font-weight: 600;
}

/* Remove ugly blue highlight in Chrome */
.field select:focus{
  outline: none;
  border-bottom-color: #e7d39a;
}

/* Firefox fix */
select:-moz-focusring {
  color: transparent;
  text-shadow: 0 0 0 #d8c28a;
}
/* ===============================
   PREMIUM FOOTER SOCIAL ICONS
=============================== */

.footer-social{
  display:flex;
  justify-content:center;
  gap:18px;
  margin-top:28px;
}

.social-btn{
  width:48px;
  height:48px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  border:1px solid rgba(216,194,138,.35);
  color: var(--gold-main);
  font-size:18px;
  transition: all .35s cubic-bezier(.19,1,.22,1);
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.04), transparent 60%);
}

.social-btn:hover{
  transform: translateY(-6px) scale(1.08);
  border-color: #e7d39a;
  color: #050608;
  background: linear-gradient(135deg,#e7d39a,#bfa35e);
  box-shadow: 0 0 28px rgba(216,194,138,.45);
}

/* WhatsApp special accent */
.social-btn.whatsapp{
  border-color: rgba(37,211,102,.6);
  color: #25D366;
}

.social-btn.whatsapp:hover{
  background: linear-gradient(135deg,#25D366,#128C7E);
  border-color:#25D366;
  box-shadow: 0 0 35px rgba(37,211,102,.55);
  color:white;
}
/* FIX: keep newsletter UP (tight layout) */
.footer-center{
  display:grid;
  justify-items:center;
  gap:14px;              /* controls spacing between blocks */
}

.footer-center .footer-social{
  margin-top: 6px !important;
  margin-bottom: 0 !important;
}

.footer-center .newsletter{
  margin-top: 0 !important;
}

.footer-center .newsletter h3{
  margin: 10px 0 6px !important;
}

.footer-center .newsletter p{
  margin: 0 0 14px !important;
}
.footer-grid{
  display:grid;
  grid-template-columns: 1fr 1.2fr 1fr;
  align-items:center;
  gap:60px;
}

.footer-left{
  justify-self:start;
}

.footer-center{
  justify-self:center;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:18px;
}

.footer-right{
  justify-self:end;
  text-align:right;
  max-width:320px;
}
.footer-right .newsletter{
  display:flex;
  flex-direction:column;
  gap:16px;
}

.footer-right input{
  width:100%;
}

.footer-right button{
  width:100%;
}
@media (max-width:900px){
  .footer-grid{
    grid-template-columns:1fr;
    text-align:center;
    gap:50px;
  }

  .footer-left,
  .footer-center,
  .footer-right{
    justify-self:center;
    text-align:center;
  }
}
/* ===============================
   WHERE ARE WE — PREMIUM MAP
=============================== */

.where-we{
  padding:140px 0;
  border-top:1px solid rgba(216,194,138,.15);
  background:
    radial-gradient(900px 600px at 20% 20%, rgba(216,194,138,.04), transparent 60%),
    #050608;
}

.where-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  align-items:center;
  gap:80px;
}

.where-text{
  max-width:520px;
}

.where-city{
  margin-top:22px;
  display:flex;
  align-items:center;
  gap:12px;
  font-size:18px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--gold-main);
}

.city-dot{
  width:12px;
  height:12px;
  border-radius:50%;
  background:#e7d39a;
  box-shadow:0 0 20px rgba(216,194,138,.9);
}

/* Map */

.uae-map{
  position:relative;
  max-width:420px;
  margin-left:auto;
}

.uae-map img{
  width:100%;
  opacity:.85;
}

/* Dubai glowing dot */

.dubai-glow{
  position:absolute;
  width:14px;
  height:14px;
  background:#e7d39a;
  border-radius:50%;
  left:58%;
  top:43%;
  box-shadow:
    0 0 0 rgba(216,194,138,.8),
    0 0 30px rgba(216,194,138,.8),
    0 0 60px rgba(216,194,138,.6);
  animation: dubaiPulse 2.5s infinite;
}

@keyframes dubaiPulse{
  0%   { transform:scale(.9); opacity:.6; }
  50%  { transform:scale(1.25); opacity:1; }
  100% { transform:scale(.9); opacity:.6; }
}

/* Responsive */
@media(max-width:900px){
  .where-grid{
    grid-template-columns:1fr;
    text-align:center;
  }

  .uae-map{
    margin:auto;
  }
}
/* ===============================
   CINEMATIC SECTION TRANSITIONS
=============================== */

.cinematic{
  position: relative;
}

.cine-line{
  height: 1px;
  width: 0%;
  margin: 0 auto 28px;
  background: linear-gradient(90deg, transparent, rgba(216,194,138,.75), transparent);
  opacity: .85;
  transform-origin: center;
}

/* default hidden state (JS will animate to visible) */
.cine-hidden{
  opacity: 0;
  transform: translateY(26px);
  filter: blur(10px);
  will-change: transform, opacity, filter;
}

.cine-in{
  opacity: 1;
  transform: translateY(0);
  filter: blur(0px);
}

/* optional: slight “cinema lift” on large headings */
.cine-title{
  will-change: transform;
}
body{
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  letter-spacing: .01em;
}

h1,h2,h3,.display{
  font-family: 'Canela', serif;
  font-weight: 400;
  letter-spacing: -.01em;
}
.reveal{
  opacity: 0;
  transform: translateY(60px);
  filter: blur(6px);
}
/* ===============================
   REVIEWS — PREMIUM
=============================== */
.reviews{
  padding: 140px 0;
  border-top: 1px solid rgba(216,194,138,.14);
  background:
    radial-gradient(900px 620px at 25% 20%, rgba(216,194,138,.05), transparent 60%),
    radial-gradient(700px 520px at 85% 70%, rgba(216,194,138,.035), transparent 60%),
    #050608;
}

.reviews .section-head{
  max-width: 820px;
  margin-bottom: 34px;
}

.reviews-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.review-card{
  border: 1px solid rgba(216,194,138,.16);
  background: rgba(255,255,255,.02);
  border-radius: 22px;
  padding: 22px;
  backdrop-filter: blur(8px);
  transition: transform .5s cubic-bezier(.16,.84,.44,1), border-color .5s, background .5s;
}

.review-card:hover{
  transform: translateY(-6px);
  border-color: rgba(216,194,138,.28);
  background: rgba(255,255,255,.03);
}

.review-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom: 14px;
}

.stars{
  display:flex;
  gap: 4px;
  font-size: 14px;
  letter-spacing: 2px;
  color: var(--gold-main, #d8c28a);
  text-shadow: 0 0 18px rgba(216,194,138,.22);
}

.review-badge{
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(216,194,138,.18);
  background: rgba(216,194,138,.06);
  color: rgba(216,194,138,.85);
}

.review-text{
  margin: 0 0 18px;
  line-height: 1.7;
  color: rgba(216,194,138,.78);
}

.review-footer{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid rgba(216,194,138,.12);
}

.review-name{
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 12px;
  color: rgba(216,194,138,.92);
}

.review-loc{
  font-size: 12px;
  opacity: .9;
}

@media (max-width: 980px){
  .reviews-grid{ grid-template-columns: 1fr; }
}
/* TRUST COUNTERS */
.trust{
  padding: 120px 0;
  background: linear-gradient(180deg, rgba(255,255,255,.02), transparent);
  border-top: 1px solid rgba(216,194,138,.15);
  border-bottom: 1px solid rgba(216,194,138,.15);
}

.trust-grid{
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 48px;
  text-align: center;
}

.trust-item{
  position: relative;
}

.trust-number{
  font-family: "Playfair Display", serif;
  font-size: clamp(44px, 5vw, 72px);
  font-weight: 600;
  color: var(--gold-main);
  letter-spacing: .04em;
  margin-bottom: 12px;
}

.trust-item p{
  text-transform: uppercase;
  letter-spacing: .28em;
  font-size: 12px;
  color: var(--muted);
}

@media(max-width:900px){
  .trust-grid{
    grid-template-columns: repeat(2,1fr);
    gap: 36px;
  }
}
/* ===============================
   WHY CHOOSE US — LUXURY
=============================== */

.why-nkey{
  padding: clamp(100px, 14vw, 180px) 0;
  background: radial-gradient(1200px 600px at 15% 10%, rgba(216,194,138,.06), transparent 60%),
              linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
}

.why-grid{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: clamp(36px, 6vw, 90px);
  align-items:start;
}

.why-left .display{
  font-size: clamp(38px, 5vw, 68px);
}

.why-left .sub{
  max-width: 55ch;
}

.why-right{
  display:grid;
  gap:16px;
}

.why-card{
  position:relative;
  padding:22px 24px;
  border-radius:22px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.02);
  backdrop-filter: blur(10px);
  transition: all .45s cubic-bezier(.16,.84,.44,1);
}

.why-card span{
  position:absolute;
  top:18px;
  right:22px;
  font-size:13px;
  letter-spacing:.18em;
  color:var(--muted);
}

.why-card:hover{
  transform: translateY(-6px) scale(1.02);
  border-color: rgba(216,194,138,.55);
  box-shadow: 0 25px 60px rgba(0,0,0,.45);
}

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