:root{
  --terra:#B46A4D;
  --terra-dark:#8C4E37;
  --cream:#F4ECE4;
  --card:#F7EFE8;
  --ink:#1B1B1B;
  --gold:#D7A13B;
  --shadow: 0 18px 60px rgba(0,0,0,.18);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth; scroll-snap-type:y proximity}
body{
  font-family:'Poppins',sans-serif;
  background: radial-gradient(1200px 700px at 20% -10%, rgba(180,106,77,.35), transparent 60%),
              radial-gradient(900px 600px at 90% 10%, rgba(215,161,59,.20), transparent 55%),
              var(--cream);
  color:var(--ink);
  overflow-x:hidden;
  cursor:none;
}

/* Top progress */
.progress{
  position:fixed; top:0; left:0; height:4px; width:0%;
  background:linear-gradient(90deg, var(--gold), var(--terra-dark));
  z-index:3000;
}

/* Custom cursor */
.cursor{
  position:fixed;
  width:18px;height:18px;border:2px solid rgba(180,106,77,.9);
  border-radius:50%;
  transform:translate(-50%,-50%);
  pointer-events:none;
  z-index:4000;
  transition: width .15s ease, height .15s ease, border-color .15s ease, background .15s ease;
}
.cursor.cursor--link{
  width:42px;height:42px;
  border-color: rgba(215,161,59,.9);
  background: rgba(215,161,59,.08);
}

/* Header */
.topbar{
  position:fixed; top:0; left:0; width:100%;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 60px;
  background:rgba(180,106,77,.92);
  backdrop-filter: blur(10px);
  color:var(--cream);
  z-index:2500;
  border-bottom:1px solid rgba(244,236,228,.25);
}
.brand{font-family:'Playfair Display',serif; font-weight:700; letter-spacing:.12em}
.nav a{
  color:var(--cream);
  text-decoration:none;
  margin-left:26px;
  font-size:14px;
  letter-spacing:.06em;
  opacity:.92;
}
.nav a:hover{opacity:1; text-decoration:underline}

/* Panels */
.panel{
  padding:120px 0;

  scroll-snap-align:start;
}
.panel--alt{
  background:linear-gradient(180deg, rgba(180,106,77,.10), rgba(180,106,77,.02));
}
.panel--hero{
  padding-top:140px;
}
.container{
  width:min(1100px, 92vw);
  margin:0 auto;
}
h2{
  font-family:'Playfair Display',serif;
  font-size:46px;
  color:var(--terra-dark);
  letter-spacing:.02em;
  margin-bottom:10px;
}
.muted{opacity:.75}

/* Hero layout */
.hero-wrap{
  width:min(1200px, 94vw);
  margin:0 auto;
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap:42px;
  align-items:center;
}
.hero-copy .kicker{
  display:inline-block;
  padding:10px 14px;
  border-radius:999px;
  background: rgba(180,106,77,.14);
  border:1px solid rgba(180,106,77,.25);
  color:var(--terra-dark);
  letter-spacing:.08em;
  font-size:12px;
  text-transform:uppercase;
}
.hero-copy h1{
  font-family:'Playfair Display',serif;
  font-size:92px;
  margin:14px 0 10px;
  color:var(--terra-dark);
}
.tagline{opacity:.85; max-width:52ch}
.btn{
  display:inline-block;
  margin-top:22px;
  padding:12px 18px;
  border-radius:12px;
  background:var(--terra-dark);
  color:var(--cream);
  text-decoration:none;
  box-shadow: var(--shadow);
}
.btn:hover{transform:translateY(-1px)}

/* Slides (your portfolio images) */
.slide{
  width:100%;
  border-radius:18px;
  box-shadow: var(--shadow);
  border:1px solid rgba(0,0,0,.08);
  background:var(--card);
}
.mt{margin-top:26px}

/* Footer / contact */
.panel--footer{
  background: linear-gradient(180deg, rgba(180,106,77,.12), rgba(180,106,77,.28));
  padding-bottom:90px;
}
.contact-card{
  margin-top:26px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:18px;
  padding:22px;
  border-radius:18px;
  background: rgba(244,236,228,.70);
  border:1px solid rgba(0,0,0,.08);
  box-shadow: var(--shadow);
}
.label{font-size:12px; opacity:.7; text-transform:uppercase; letter-spacing:.08em; margin-bottom:6px}
.contact-card a{color:var(--terra-dark); text-decoration:none}
.contact-card a:hover{text-decoration:underline}
.tiny{margin-top:18px; font-size:12px; opacity:.7}

/* WhatsApp */
.whatsapp{
  position:fixed;
  bottom:26px; right:26px;
  background:#25D366;
  color:white;
  text-decoration:none;
  padding:12px 18px;
  border-radius:999px;
  box-shadow: var(--shadow);
  z-index:2600;
}

/* Reveal */
.reveal{opacity:0; transform: translateY(60px); filter: blur(6px); transition: 900ms cubic-bezier(.2,.8,.2,1)}
.reveal.active{opacity:1; transform: translateY(0); filter: blur(0)}

/* Responsive */
@media (max-width: 980px){
  .topbar{padding:16px 18px}
  .nav{display:none}
  .hero-wrap{grid-template-columns:1fr; gap:22px}
  .hero-copy h1{font-size:64px}
  h2{font-size:36px}
  .panel{padding:90px 0}
  .panel--hero{padding-top:120px}
  .contact-card{grid-template-columns:1fr}
}


/* =========================
   Elite animations + lightbox
   ========================= */

/* Preloader */
#preloader{
  position:fixed; inset:0;
  background: radial-gradient(1000px 700px at 20% -10%, rgba(180,106,77,.55), transparent 60%),
              radial-gradient(900px 600px at 90% 10%, rgba(215,161,59,.25), transparent 55%),
              var(--cream);
  display:grid; place-items:center;
  z-index:9999;
  transition: opacity 450ms ease, visibility 450ms ease;
}
#preloader.hide{opacity:0; visibility:hidden}
.loader-card{
  width:min(520px, 88vw);
  padding:28px 26px;
  border-radius:22px;
  background: rgba(247,239,232,.72);
  box-shadow: var(--shadow);
  border:1px solid rgba(180,106,77,.22);
  backdrop-filter: blur(10px);
}
.loader-mark{display:flex; align-items:center; gap:12px; margin-bottom:14px}
.loader-dot{
  width:14px; height:14px; border-radius:999px;
  background: linear-gradient(135deg, var(--terra), var(--gold));
  box-shadow: 0 10px 24px rgba(180,106,77,.35);
  animation: pulse 1.2s ease-in-out infinite;
}
.loader-name{
  font-family:'Playfair Display', serif;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-weight:700;
}
.loader-bar{
  height:10px;
  border-radius:999px;
  background: rgba(180,106,77,.14);
  overflow:hidden;
  border:1px solid rgba(180,106,77,.20);
}
.loader-bar span{
  display:block; height:100%;
  width:35%;
  border-radius:999px;
  background: linear-gradient(90deg, var(--terra), var(--gold), var(--terra));
  animation: loadmove 1.1s ease-in-out infinite;
}
.loader-sub{margin-top:12px; color: rgba(27,27,27,.65); font-size:14px}

@keyframes loadmove{
  0%{transform: translateX(-60%)}
  50%{transform: translateX(140%)}
  100%{transform: translateX(320%)}
}
@keyframes pulse{
  0%,100%{transform: scale(1); opacity:.9}
  50%{transform: scale(1.35); opacity:1}
}

/* Hero entrance */
.panel--hero .hero-media img{
  transform: scale(1.04);
  clip-path: inset(0 0 100% 0 round 18px);
  animation: heroReveal 1100ms cubic-bezier(.2,.8,.2,1) 300ms forwards;
}
@keyframes heroReveal{
  to{clip-path: inset(0 0 0 0 round 18px); transform: scale(1)}
}
.scroll-hint{
  margin-top:14px;
  display:inline-flex; align-items:center; gap:10px;
  color: rgba(27,27,27,.65);
  font-size:13px;
}
.scroll-hint::before{
  content:"";
  width:38px; height:1px;
  background: rgba(180,106,77,.45);
}
.scroll-hint::after{
  content:"↓";
  color: var(--terra);
  animation: floaty 1.4s ease-in-out infinite;
}
@keyframes floaty{
  0%,100%{transform: translateY(0)}
  50%{transform: translateY(5px)}
}

/* Slide polish */
.slide{
  will-change: transform, box-shadow;
  transition: transform 350ms cubic-bezier(.2,.8,.2,1), box-shadow 350ms ease;
}
.slide:hover{
  transform: translateY(-6px) scale(1.01);
  box-shadow: 0 24px 80px rgba(0,0,0,.20);
}

/* Stagger in images when section reveals */
.reveal .slide{opacity:0; transform: translateY(18px) scale(.99); filter: blur(2px)}
.reveal.active .slide{
  opacity:1; transform: translateY(0) scale(1); filter: blur(0);
  transition: 700ms cubic-bezier(.2,.8,.2,1);
}

/* Lightbox */
.lightbox{position:fixed; inset:0; z-index:9998; display:none}
.lightbox.open{display:block}
.lightbox__backdrop{position:absolute; inset:0; background: rgba(18,18,18,.62); backdrop-filter: blur(6px)}
.lightbox__panel{
  position:absolute; inset:0;
  display:grid;
  place-items:center;
  padding:22px;
}
.lightbox__figure{
  width:min(1100px, 92vw);
  max-height:84vh;
  border-radius:18px;
  overflow:hidden;
  background: rgba(247,239,232,.92);
  border:1px solid rgba(180,106,77,.25);
  box-shadow: 0 28px 120px rgba(0,0,0,.45);
  transform: translateY(10px) scale(.98);
  opacity:0;
  animation: pop 260ms ease forwards;
}
@keyframes pop{to{transform: translateY(0) scale(1); opacity:1}}
.lightbox__img{display:block; width:100%; height:auto; max-height:74vh; object-fit:contain; background: #111}
.lightbox__cap{
  padding:14px 16px;
  font-size:13px;
  color: rgba(27,27,27,.72);
  border-top:1px solid rgba(180,106,77,.14);
}
.lightbox__close{
  position:fixed; top:16px; right:18px;
  width:44px; height:44px; border-radius:999px;
  border:1px solid rgba(255,255,255,.22);
  color:#fff; background: rgba(0,0,0,.35);
  font-size:26px; line-height:1;
  cursor:pointer;
}
.lightbox__nav{
  position:fixed;
  top:50%; transform: translateY(-50%);
  width:52px; height:52px; border-radius:999px;
  border:1px solid rgba(255,255,255,.22);
  color:#fff; background: rgba(0,0,0,.35);
  font-size:34px; line-height:1;
  cursor:pointer;
}
.lightbox__nav--prev{left:16px}
.lightbox__nav--next{right:16px}
.lightbox__hint{
  position:fixed; bottom:16px; left:50%;
  transform: translateX(-50%);
  padding:10px 14px;
  border-radius:999px;
  background: rgba(0,0,0,.35);
  color: rgba(255,255,255,.85);
  border:1px solid rgba(255,255,255,.18);
  font-size:12px;
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .reveal, .reveal .slide, .panel--hero .hero-media img{transition:none!important; animation:none!important}
  .scroll-hint::after{animation:none}
}