:root{
  --ink:#0a0d0b;
  --forest:#0b1710;
  --forest2:#101e15;
  --cream:#f3eddf;
  --cream2:#e9dfcb;
  --gold:#c9a76a;
  --gold2:#e1c88e;
  --white:#fff;
  --muted:#aaa89e;
  --darktext:#252b24;
  --ease:cubic-bezier(.2,.8,.2,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ink);color:#fff;font-family:Arial,Helvetica,sans-serif;overflow-x:hidden}
a{text-decoration:none;color:inherit}
button{font:inherit}
.container{width:min(1180px,90%);margin:auto}

/* NAV */
nav{
  position:fixed;left:0;right:0;top:0;z-index:100;
  height:78px;
  background:linear-gradient(180deg,rgba(3,7,5,.76),rgba(3,7,5,.18));
  transition:.45s ease;
}
nav.scrolled{
  background:rgba(5,10,7,.93);
  backdrop-filter:blur(15px);
  border-bottom:1px solid rgba(201,167,106,.18);
}
.nav{height:100%;display:flex;align-items:center;justify-content:space-between}
.brand-logo{width:122px;height:52px;object-fit:contain;object-position:left center}
.navlinks{display:flex;gap:31px;align-items:center}
.navlinks a{
  font-size:10px;letter-spacing:1.8px;text-transform:uppercase;
  position:relative;color:#f5f0e6
}
.navlinks a:after{
  content:"";position:absolute;left:0;bottom:-8px;width:0;height:1px;background:var(--gold);
  transition:.35s var(--ease)
}
.navlinks a:hover{color:var(--gold)}
.navlinks a:hover:after{width:100%}
.menu{display:none;background:none;border:1px solid rgba(201,167,106,.5);color:#fff;width:43px;height:43px}

/* HERO */
.hero{
  min-height:100vh;min-height:100svh;position:relative;display:flex;align-items:center;
  overflow:hidden;padding:100px 0 60px;
}
.hero-bg,.hero-bg div{position:absolute;inset:0}
.hero-bg div{
  background:center/cover no-repeat;
  opacity:0;transform:scale(1.07);
  transition:opacity 1.5s ease,transform 7s ease;
}
.hero-bg div.active{opacity:1;transform:scale(1)}
.hero-overlay{
  position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(4,9,6,.93) 0%,rgba(4,9,6,.73) 35%,rgba(4,9,6,.28) 75%,rgba(4,9,6,.42)),
    linear-gradient(0deg,rgba(4,9,6,.55),transparent 35%);
}
.hero-content{position:relative;z-index:2;max-width:660px}
.eyebrow{font-size:10px;letter-spacing:5px;text-transform:uppercase;color:var(--gold)}
.hero h1{
  font:normal clamp(58px,8vw,101px)/.9 Georgia,serif;
  margin:19px 0 25px;letter-spacing:-3px
}
.italic{font-style:italic;color:var(--gold2)}
.hero-copy{font-size:17px;color:#ddd9ce;max-width:590px;line-height:1.7}
.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:25px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:13px 22px;
  border:1px solid var(--gold);font-size:10px;letter-spacing:2px;text-transform:uppercase;
  position:relative;overflow:hidden;transition:.4s var(--ease)
}
.btn span{position:relative;z-index:1}
.btn:before{
  content:"";position:absolute;inset:0;background:var(--gold);
  transform:translateX(-101%);transition:.45s var(--ease)
}
.btn:hover{color:#10130f;transform:translateY(-3px)}
.btn:hover:before{transform:translateX(0)}
.btn.primary{background:var(--gold);color:#10130f}
.btn.primary:before{background:var(--gold2)}
.hero-meta{
  position:absolute;right:4%;top:50%;transform:translateY(-50%);z-index:3;
  display:flex;flex-direction:column;gap:20px;align-items:flex-end
}
.hero-meta button{
  border:0;background:none;color:rgba(255,255,255,.42);cursor:pointer;font-size:11px;padding:0
}
.hero-meta button.active{color:#fff}
.hero-meta button:after{
  content:"";display:inline-block;width:0;height:1px;background:var(--gold);margin-left:12px;vertical-align:middle;transition:.4s
}
.hero-meta button.active:after{width:25px}
.pause{
  position:absolute;right:4%;bottom:34px;z-index:3;
  width:31px;height:31px;border-radius:50%;border:1px solid rgba(255,255,255,.7);
  background:transparent;color:#fff;font-size:9px;cursor:pointer
}
.scroll{
  position:absolute;left:5%;bottom:0;z-index:3;color:#fff;font-size:8px;letter-spacing:2px;
  display:flex;flex-direction:column;gap:8px
}
.scroll:after{content:"";height:45px;width:1px;background:rgba(255,255,255,.65)}

/* COMMON */
section{padding:96px 0}
.light{background:var(--cream);color:var(--darktext)}
.dark{background:var(--forest)}
.section-head{max-width:600px}
.section-head.center{margin:auto;text-align:center}
.kicker{font-size:10px;letter-spacing:4px;text-transform:uppercase;color:var(--gold)}
h2{
  font:normal clamp(39px,5vw,61px)/1.03 Georgia,serif;
  margin:13px 0 18px;letter-spacing:-1.5px
}
h2 em{color:#a58a58}
.lead{font-size:15px;line-height:1.75;color:#666b60}

/* ABOUT */
.about-layout{display:grid;grid-template-columns:1.15fr 1.4fr;gap:55px;align-items:start}
.about-intro p{max-width:560px}
.about-cards{display:grid;grid-template-columns:repeat(3,1fr);border-left:1px solid rgba(36,46,36,.25)}
.about-card{padding:8px 28px 15px;border-right:1px solid rgba(36,46,36,.25)}
.about-icon{height:42px;color:var(--gold);font-size:29px}
.about-card h3{font-size:11px;letter-spacing:3px;text-transform:uppercase;font-weight:normal}
.about-card p{font-size:13px;line-height:1.65;color:#686c63}

/* SERVICES */
.services-head{display:flex;justify-content:space-between;align-items:end;margin-bottom:28px}
.text-link{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);border-bottom:1px solid var(--gold);padding-bottom:7px}
.service-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.service{
  min-height:120px;padding:21px 18px;border:1px solid rgba(201,167,106,.32);
  background:rgba(255,255,255,.01);transition:.45s var(--ease)
}
.service:hover{transform:translateY(-7px);background:rgba(201,167,106,.06);border-color:var(--gold)}
.service .icon{font-size:25px;color:var(--gold)}
.service h3{font:normal 16px Georgia,serif;margin:13px 0 0}
.service p{font-size:11px;color:#aaa;margin:6px 0 0;line-height:1.5}

/* WORK */
.work-section{background:var(--cream);color:var(--darktext)}
.work-layout{display:grid;grid-template-columns:.72fr 1.6fr;gap:34px;align-items:start}
.work-copy .text-link{color:var(--darktext)}
.work-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr;grid-template-rows:145px 145px;gap:7px}
.work-card{position:relative;overflow:hidden;background:#151b16}
.work-card.featured{grid-row:1/3}
.work-card img{width:100%;height:100%;object-fit:cover;transition:1s var(--ease)}
.work-card:hover img{transform:scale(1.07);filter:brightness(1.08)}
.work-card:after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 45%,rgba(0,0,0,.75))}
.work-caption{position:absolute;z-index:2;left:15px;bottom:13px;color:#fff}
.work-caption strong{display:block;font:normal 17px Georgia,serif}
.work-caption span{font-size:10px;color:#ddd}

/* COLLECTIONS */
.collections{background:var(--cream2);color:var(--darktext)}
.collection-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.collection{
  min-height:190px;position:relative;overflow:hidden;padding:22px;
  color:#fff;background:#101510 center/cover no-repeat
}
.collection:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.8),rgba(0,0,0,.25))}
.collection>*{position:relative;z-index:1}
.collection small{font-size:9px;letter-spacing:3px;color:var(--gold2)}
.collection h3{font:normal 28px Georgia,serif;margin:10px 0}
.collection p{font-size:12px;max-width:280px;color:#eee}
.collection a{position:absolute;left:22px;bottom:20px;font-size:9px;letter-spacing:2px;color:var(--gold2)}

/* TESTIMONIALS */
.testimonials{position:relative;background:#0b120d;overflow:hidden}
.testimonial-grid{display:grid;grid-template-columns:.85fr 1.5fr;gap:60px;align-items:center}
.testimonial-quote{font:italic clamp(25px,3vw,37px)/1.35 Georgia,serif;color:#eee9dd}
.client{margin-top:24px;font-size:10px;letter-spacing:3px;text-transform:uppercase;color:var(--gold)}
.client-role{font-size:11px;color:#aaa;margin-top:5px}
.testimonial-controls{display:flex;gap:8px;margin-top:24px}
.testimonial-controls button{width:8px;height:8px;border:0;border-radius:50%;background:#555;padding:0}
.testimonial-controls button.active{background:var(--gold);transform:scale(1.3)}
.testimonial-slide{display:none}
.testimonial-slide.active{display:block;animation:fadeUp .7s var(--ease)}
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* CONTACT */
.contact{
  background:linear-gradient(120deg,#203225,#0c140e);
  position:relative;overflow:hidden
}
.contact:after{
  content:"";position:absolute;width:520px;height:520px;border-radius:50%;
  border:1px solid rgba(201,167,106,.09);right:-230px;top:-260px
}
.contact-layout{display:grid;grid-template-columns:1.25fr .9fr;gap:70px;align-items:center}
.contact h2{font-size:clamp(43px,6vw,70px)}
.contact-copy{color:#c4c5bd;max-width:480px;font-size:14px}
.contact-details{display:grid;grid-template-columns:1fr;gap:20px}
.detail{border-left:1px solid rgba(201,167,106,.45);padding-left:18px}
.detail span{display:block;color:var(--gold);font-size:9px;letter-spacing:3px;text-transform:uppercase;margin-bottom:6px}
.detail a,.detail p{margin:0;color:#eee;font-size:14px}

/* FOOTER */
footer{padding:25px 0;background:#060a07;border-top:1px solid rgba(201,167,106,.2)}
.footer{display:grid;grid-template-columns:1fr auto 1fr;gap:25px;align-items:center}
.footer-logo{width:85px;height:43px;object-fit:contain;object-position:left}
.footer-center{border-left:1px solid rgba(201,167,106,.3);border-right:1px solid rgba(201,167,106,.3);padding:0 32px;color:#bbb;font-size:11px;line-height:1.7}
.footer-links{display:flex;justify-content:flex-end;gap:22px;font-size:9px;letter-spacing:1.5px;text-transform:uppercase;color:#ccc}
.copyright{font-size:9px;color:#777;margin-top:13px}

/* FLOATING WHATSAPP */
.whatsapp{
  position:fixed;right:20px;bottom:20px;z-index:90;
  width:53px;height:53px;border-radius:50%;background:#25d366;color:#fff;
  display:grid;place-items:center;font-size:23px;box-shadow:0 10px 35px rgba(0,0,0,.35);
  transition:.35s var(--ease)
}
.whatsapp:hover{transform:translateY(-5px) scale(1.05)}

/* REVEAL */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s ease,transform .8s var(--ease)}
.reveal.visible{opacity:1;transform:none}

/* MOBILE */
.mobile-menu{
  position:fixed;inset:78px 0 0;z-index:99;background:rgba(5,10,7,.98);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:25px;
  transform:translateX(100%);transition:.5s var(--ease)
}
.mobile-menu.open{transform:none}
.mobile-menu a{font-size:12px;letter-spacing:3px;text-transform:uppercase}

@media(max-width:900px){
  .navlinks{display:none}.menu{display:block}
  .hero-content{max-width:650px}
  .hero-meta{right:3%}
  .about-layout,.testimonial-grid,.contact-layout{grid-template-columns:1fr;gap:35px}
  .about-cards{border-left:0}
  .about-card{padding-left:15px;padding-right:15px}
  .service-grid{grid-template-columns:repeat(2,1fr)}
  .work-layout{grid-template-columns:1fr}
  .collection-grid{grid-template-columns:1fr 1fr}
  .footer{grid-template-columns:1fr auto}
  .footer-center{display:none}
  .footer-links{justify-content:flex-start}
}
@media(max-width:600px){
  section{padding:70px 0}
  .container{width:89%}
  nav{height:68px}
  .brand-logo{width:98px;height:45px}
  .mobile-menu{inset:68px 0 0}
  .hero{padding:105px 0 75px}
  .hero h1{font-size:57px;letter-spacing:-2px}
  .hero-copy{font-size:15px}
  .hero-overlay{background:linear-gradient(90deg,rgba(4,9,6,.91),rgba(4,9,6,.58))}
  .hero-meta{top:auto;bottom:29px;right:4%;flex-direction:row;gap:8px}
  .hero-meta button{font-size:0}
  .hero-meta button:after{width:7px;height:7px;border-radius:50%;margin:0;background:rgba(255,255,255,.35)}
  .hero-meta button.active:after{width:9px;height:9px;background:var(--gold)}
  .pause{display:none}
  .scroll{display:none}
  .actions{display:block}.btn{width:100%;margin:7px 0 0}
  .about-cards{grid-template-columns:1fr;border-left:0}
  .about-card{border-right:0;border-top:1px solid rgba(36,46,36,.2);padding:20px 0}
  .service-grid,.collection-grid{grid-template-columns:1fr}
  .service{min-height:145px}
  .work-grid{grid-template-columns:1fr 1fr;grid-template-rows:180px 180px 180px}
  .work-card.featured{grid-row:1/3}
  .work-card:nth-child(4){grid-column:1/3}
  .testimonial-quote{font-size:24px}
  .footer{grid-template-columns:1fr}
  .footer-links{flex-wrap:wrap}
  .footer-logo{width:82px}
}
@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}
/* =========================================================
   WORK PAGE — 6 IMAGE EDITORIAL GALLERIES
   ========================================================= */

body.work-page{background:var(--ink)}

.work-page-hero{
  min-height:52vh;
  min-height:52svh;
  display:flex;
  align-items:flex-end;
  padding:125px 0 58px;
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 75% 30%,rgba(201,167,106,.10),transparent 30%),
    linear-gradient(120deg,#0a120d,#16261a 55%,#080d09);
}
.work-page-hero:before{
  content:"";
  position:absolute;
  width:42vw;
  height:42vw;
  max-width:620px;
  max-height:620px;
  right:-12vw;
  top:-18vw;
  border:1px solid rgba(201,167,106,.14);
  border-radius:50%;
}
.work-page-hero .container{position:relative;z-index:2}
.work-page-hero h1{
  font:normal clamp(56px,8vw,100px)/.88 Georgia,serif;
  letter-spacing:-3px;
  margin:15px 0;
}
.work-page-hero p{
  max-width:650px;
  color:#d5d3ca;
  line-height:1.65;
  font-size:15px;
  margin:0;
}
.work-jump{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:25px;
}
.work-jump a{
  border:1px solid rgba(201,167,106,.38);
  padding:9px 13px;
  color:#eee9dd;
  font-size:9px;
  letter-spacing:1.8px;
  text-transform:uppercase;
  transition:.3s var(--ease);
}
.work-jump a:hover{
  background:var(--gold);
  border-color:var(--gold);
  color:#11150f;
}

.work-detail{
  padding:76px 0 82px;
  background:var(--cream);
  color:var(--darktext);
  scroll-margin-top:78px;
}
.work-detail-dark{
  background:var(--forest);
  color:#fff;
}
.work-detail-intro{
  display:grid;
  grid-template-columns:1fr .72fr;
  gap:60px;
  align-items:end;
  margin-bottom:32px;
}
.work-detail-intro h2{
  font-size:clamp(43px,5.4vw,72px);
  line-height:.94;
  margin:12px 0 0;
}
.work-detail-intro .lead{
  max-width:560px;
  margin:0 0 18px;
}
.work-detail-dark .lead{color:#bfc2b8}
.work-contact-link{display:inline-block}

/* Six images are visible in the page instead of hiding the portfolio
   behind a single carousel slide. The first image is deliberately larger. */
.portfolio-grid{
  display:grid;
  grid-template-columns:1.42fr .79fr .79fr;
  grid-template-rows:270px 270px;
  gap:7px;
}
.portfolio-item{
  position:relative;
  display:block;
  overflow:hidden;
  background:#171d18;
  min-width:0;
}
.portfolio-item-large{
  grid-row:1 / 3;
}
.portfolio-item img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .9s var(--ease),filter .6s ease;
}
.portfolio-item:hover img{
  transform:scale(1.045);
  filter:brightness(1.06);
}
.portfolio-item:after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(0deg,rgba(0,0,0,.65),transparent 35%);
  pointer-events:none;
}
.portfolio-item > span{
  position:absolute;
  z-index:2;
  left:14px;
  bottom:12px;
  color:#fff;
  font-size:9px;
  letter-spacing:2px;
}

/* If a Drive ID has not yet been supplied, don't show a broken-image icon. */
.portfolio-item img[src*="YOUR_"]{
  opacity:0;
}
.portfolio-item:has(img[src*="YOUR_"]){
  background:
    linear-gradient(135deg,rgba(201,167,106,.10),transparent),
    repeating-linear-gradient(135deg,#111812 0,#111812 14px,#151d17 14px,#151d17 28px);
}
.portfolio-item:has(img[src*="YOUR_"]):before{
  content:"ADD IMAGE";
  position:absolute;
  z-index:2;
  inset:0;
  display:grid;
  place-items:center;
  color:rgba(225,200,142,.6);
  font-size:9px;
  letter-spacing:3px;
}

/* LIGHTBOX */
.lightbox{
  position:fixed;
  inset:0;
  z-index:300;
  background:rgba(3,6,4,.97);
  display:none;
  align-items:center;
  justify-content:center;
  padding:45px 75px;
}
.lightbox.open{display:flex}
.lightbox-content{
  width:min(1200px,88vw);
  height:min(82vh,850px);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}
.lightbox-content img{
  max-width:100%;
  max-height:calc(100% - 35px);
  object-fit:contain;
  display:block;
}
.lightbox-meta{
  width:100%;
  display:flex;
  justify-content:space-between;
  padding-top:13px;
  color:#aaa;
  font-size:9px;
  letter-spacing:2px;
  text-transform:uppercase;
}
.lightbox-close,
.lightbox-arrow{
  position:absolute;
  z-index:2;
  border:1px solid rgba(255,255,255,.28);
  background:rgba(0,0,0,.25);
  color:#fff;
  cursor:pointer;
  transition:.3s ease;
}
.lightbox-close{
  right:25px;
  top:22px;
  width:42px;
  height:42px;
  font-size:25px;
  line-height:1;
}
.lightbox-arrow{
  top:50%;
  transform:translateY(-50%);
  width:48px;
  height:65px;
  font:normal 42px Georgia,serif;
}
.lightbox-prev{left:22px}
.lightbox-next{right:22px}
.lightbox-close:hover,
.lightbox-arrow:hover{
  border-color:var(--gold);
  color:var(--gold2);
}

.work-back{
  background:#0b120d;
  text-align:center;
  padding:68px 0;
}
.work-back h2{
  max-width:650px;
  margin:10px auto 25px;
}

@media(max-width:900px){
  .work-detail{
    padding:62px 0 66px;
  }
  .work-detail-intro{
    grid-template-columns:1fr;
    gap:15px;
    margin-bottom:24px;
  }
  .portfolio-grid{
    grid-template-columns:1fr 1fr;
    grid-template-rows:310px 210px 210px;
  }
  .portfolio-item-large{
    grid-column:1 / 3;
    grid-row:auto;
  }
  .lightbox{padding:40px 55px}
  .lightbox-content{width:92vw;height:78vh}
}

@media(max-width:600px){
  .work-page-hero{
    min-height:60vh;
    padding:115px 0 45px;
  }
  .work-page-hero h1{
    font-size:57px;
    letter-spacing:-2px;
  }
  .work-page-hero p{font-size:14px}
  .work-jump{gap:6px}
  .work-jump a{padding:8px 10px;font-size:8px}

  .work-detail{
    padding:50px 0 55px;
  }
  .work-detail-intro h2{font-size:46px}
  .portfolio-grid{
    grid-template-columns:1fr 1fr;
    grid-template-rows:240px 175px 175px;
    gap:5px;
  }
  .portfolio-item > span{
    left:10px;
    bottom:9px;
  }

  .lightbox{
    padding:50px 14px 35px;
  }
  .lightbox-content{
    width:100%;
    height:76vh;
  }
  .lightbox-arrow{
    top:auto;
    bottom:8px;
    transform:none;
    width:44px;
    height:44px;
    font-size:32px;
  }
  .lightbox-prev{left:18px}
  .lightbox-next{right:18px}
  .lightbox-close{
    top:12px;
    right:14px;
  }
  .lightbox-meta{
    padding:9px 8px 0;
  }
}