*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --ink:#0A0A08;--ink2:#1E1D1A;--muted:#7A7469;
  --cream:#F5F1EA;--cream2:#EAE5DA;--white:#FFFFFF;
  --gold:#B08B4E;--gold2:#C9A96E;--gold-pale:#F0E4CC;
  --serif:'Cormorant Garamond',Georgia,serif;
  --sans:'Outfit',system-ui,sans-serif;
  --nav-h:80px;--ease:cubic-bezier(.25,.46,.45,.94);
}
html{scroll-behavior:smooth}
body{font-family:var(--sans);background:var(--cream);color:var(--ink);overflow-x:hidden;-webkit-font-smoothing:antialiased}
.page{display:none;min-height:100vh;padding-top:var(--nav-h)}
.page.active{display:block}

/* NAV */
#nav{
  position:fixed;top:0;left:0;right:0;z-index:200;height:var(--nav-h);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 clamp(1.5rem,5vw,4rem);
  transition:background .35s ease,
             box-shadow .35s ease,
             border-bottom .35s ease,
             transform .3s ease;
  /* Default: transparent — JS sets .bg class on scroll */
  background:transparent;
  border-bottom:1px solid transparent;
  will-change:background,transform;
}
/* scrolled state — solid dark bar, visible separator */
#nav.bg{
  background:rgba(10,10,8,.97);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  box-shadow:0 2px 24px rgba(0,0,0,.45);
  border-bottom:1px solid rgba(176,139,78,.18);
  height:calc(var(--nav-h) - 8px);
}
/* link colours adapt to scrolled state */

#nav.bg .nav-cta{background:var(--gold)!important;color:var(--ink)!important}
#nav.bg .nav-cta:hover{background:var(--gold2)!important}
#nav.bg .hamburger span{background:var(--white)}
.nav-logo{
  display:flex;align-items:center;cursor:pointer;
  text-decoration:none;gap:.625rem;
}
.nav-logo img{height:46px;width:auto;filter:brightness(1.05)}
.nav-logo-txt{
  font-family:var(--serif);font-size:1.1rem;font-weight:700;
  color:var(--white);letter-spacing:.05em;line-height:1;
}
.nav-logo-txt span{display:block;font-size:.6rem;font-weight:400;letter-spacing:.18em;text-transform:uppercase;color:var(--gold2);margin-top:.15rem}
.nav-links{display:flex;gap:2rem;list-style:none;align-items:center}
.nav-links a{
  font-size:.74rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.6);text-decoration:none;cursor:none;
  padding:.25rem 0;
  position:relative;
  transition:color .25s ease;
  background:none !important;
  border-radius:0 !important;
}
.nav-links a:hover{
  color:var(--white);
  background:none !important;
}
.nav-links a.active{
  color:var(--gold);
  background:none !important;
}
/* Subtle underline on active only */
.nav-links a.active::after{
  content:'';
  position:absolute;
  bottom:-3px;left:0;right:0;
  height:1.5px;
  background:var(--gold);
  border-radius:1px;
}
#nav.bg .nav-links a{color:rgba(255,255,255,.65)}
#nav.bg .nav-links a:hover{color:var(--white)}
#nav.bg .nav-links a.active{color:var(--gold)}
#nav.bg .nav-cta{background:var(--gold)!important;color:var(--ink)!important}
#nav.bg .nav-cta:hover{background:var(--gold2)!important}
#nav.bg .hamburger span{background:var(--white)}
.nav-logo{
  display:flex;align-items:center;cursor:pointer;
  text-decoration:none;gap:.625rem;
}
.nav-logo img{height:46px;width:auto;filter:brightness(1.05)}
.nav-logo-txt{
  font-family:var(--serif);font-size:1.1rem;font-weight:700;
  color:var(--white);letter-spacing:.05em;line-height:1;
}
.nav-logo-txt span{display:block;font-size:.6rem;font-weight:400;letter-spacing:.18em;text-transform:uppercase;color:var(--gold2);margin-top:.15rem}
.nav-links{display:flex;gap:2.5rem;list-style:none;align-items:center}
.nav-links a{
  font-size:.74rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.65);text-decoration:none;cursor:pointer;position:relative;padding-bottom:2px;
  transition:color .2s;
}
.nav-links a::after{
  content:'';position:absolute;bottom:0;left:0;right:0;height:1px;
  background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease);
}
.nav-links a:hover,.nav-links a.active{color:var(--white)}
.nav-links a:hover::after,.nav-links a.active::after{transform:scaleX(1)}
.nav-cta{
  background:var(--gold)!important;color:var(--ink)!important;
  padding:.52rem 1.35rem!important;border-radius:2px;
  font-size:.7rem!important;letter-spacing:.12em!important;font-weight:600!important;
}

.nav-cta:hover{background:var(--gold2)!important;color:var(--ink)!important}
.hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;background:none;border:none;padding:4px}
.hamburger span{display:block;width:22px;height:1.5px;background:var(--white);transition:.35s}
.hamburger.open span:nth-child(1){transform:rotate(45deg) translate(4.5px,4.5px)}
.hamburger.open span:nth-child(2){opacity:0;transform:scaleX(0)}
.hamburger.open span:nth-child(3){transform:rotate(-45deg) translate(4.5px,-4.5px)}
.mobile-nav{
  position:fixed;inset:0;background:var(--ink);z-index:190;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(1.5rem,4vh,2.5rem);
  transform:translateX(100%);transition:transform .45s var(--ease);
  padding:2rem;
  overflow-y:auto;
}
.mobile-nav.open{transform:translateX(0)}
.mobile-nav a{
  font-family:var(--serif);font-size:clamp(1.75rem,6vw,2.5rem);font-weight:600;
  color:var(--white);text-decoration:none;cursor:pointer;transition:color .2s;
  text-align:center;width:100%;padding:.25rem 0;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.mobile-nav a:last-child{border-bottom:none}
.mobile-nav a:hover{color:var(--gold)}
.mobile-nav-close{
  position:absolute;top:1.25rem;right:1.25rem;
  background:none;border:1px solid rgba(255,255,255,.15);
  color:var(--white);font-size:1.25rem;
  width:40px;height:40px;border-radius:50%;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .2s;
}
.mobile-nav-close:hover{background:rgba(255,255,255,.1)}

/* HERO */
.hero{
  min-height:100vh;display:grid;grid-template-columns:1fr 1fr;
  margin-top:calc(-1 * var(--nav-h));
  position:relative;
}
/* Ken Burns cinematic background */
.hero-bg{
  position:absolute;inset:0;z-index:0;overflow:hidden;
}
.hero-bg img{
  width:100%;height:100%;object-fit:cover;object-position:center;
  animation:kenburns 18s ease-in-out infinite alternate;
  transform-origin:center center;
  will-change:transform;
}
@keyframes kenburns{
  0%   { transform:scale(1.08) translate(-2%, 1%); }
  25%  { transform:scale(1.12) translate(1%, -1%); }
  50%  { transform:scale(1.06) translate(-1%, 2%); }
  75%  { transform:scale(1.1)  translate(2%, 0%); }
  100% { transform:scale(1.08) translate(-1%, -2%); }
}
.hero-bg-overlay{
  position:absolute;inset:0;
  background:linear-gradient(
    105deg,
    rgba(10,10,8,.88) 0%,
    rgba(10,10,8,.75) 40%,
    rgba(10,10,8,.35) 70%,
    rgba(10,10,8,.15) 100%
  );
  z-index:1;
}
@media(max-width:960px){
  .hero-bg-overlay{
    background:linear-gradient(
      180deg,
      rgba(10,10,8,.75) 0%,
      rgba(10,10,8,.82) 60%,
      rgba(10,10,8,.92) 100%
    );
  }
}
.hero-l{
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:clamp(6rem,10vw,9rem) clamp(2rem,5vw,4rem) clamp(3.5rem,5vw,5.5rem);
  background:transparent;position:relative;z-index:3;
}
.hero-l::before{
  content:'NK';position:absolute;
  font-family:var(--serif);font-size:28rem;font-weight:700;
  color:rgba(255,255,255,.025);line-height:1;
  top:50%;left:-2rem;transform:translateY(-50%);
  pointer-events:none;user-select:none;letter-spacing:-.05em;
}
.eyebrow{
  font-size:.63rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold);display:flex;align-items:center;gap:.8rem;margin-bottom:2rem;
}
.eyebrow::before{content:'';width:28px;height:1px;background:var(--gold);flex-shrink:0}
h1.hero-h{
  font-family:var(--serif);font-size:clamp(3rem,5.5vw,5.25rem);
  line-height:1.04;font-weight:600;letter-spacing:-.02em;margin-bottom:1.75rem;
  color:var(--white);
}
h1.hero-h em{font-style:italic;color:var(--gold)}
.hero-p{font-size:1rem;color:rgba(255,255,255,.48);line-height:1.85;font-weight:300;max-width:420px;margin-bottom:2.5rem}
.hero-btns{display:flex;gap:.875rem;flex-wrap:wrap}
.btn{
  display:inline-block;text-decoration:none;border-radius:2px;
  font-family:var(--sans);font-size:.74rem;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;cursor:pointer;
  padding:.875rem 1.875rem;border:1px solid transparent;
  transition:all .25s var(--ease);
}
.btn-gold{background:var(--gold);color:var(--ink);border-color:var(--gold)}
.btn-gold:hover{background:var(--gold2);transform:translateY(-2px)}
.btn-outline-w{background:transparent;color:var(--white);border-color:rgba(255,255,255,.28)}
.btn-outline-w:hover{background:rgba(255,255,255,.08);transform:translateY(-2px)}
.btn-dark{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.btn-dark:hover{background:var(--gold);border-color:var(--gold);color:var(--ink);transform:translateY(-2px)}
.btn-ghost{background:transparent;color:var(--ink);border-color:rgba(0,0,0,.25)}
.btn-ghost:hover{background:var(--ink);color:var(--cream);transform:translateY(-2px)}
.hero-stats{
  display:flex;gap:2.5rem;margin-top:3.5rem;
  padding-top:2.5rem;border-top:1px solid rgba(255,255,255,.08);
}
.stat-n{font-family:var(--serif);font-size:2.25rem;font-weight:700;line-height:1;color:var(--white)}
.stat-l{font-size:.62rem;color:rgba(255,255,255,.38);text-transform:uppercase;letter-spacing:.1em;margin-top:.2rem}
.hero-r{
  position:relative;overflow:hidden;
}
.lic-tag{
  position:absolute;top:calc(var(--nav-h) + 1.5rem);right:0;z-index:10;
  background:var(--gold);color:var(--ink);
  font-size:.6rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  padding:.5rem 1.5rem .5rem 1rem;clip-path:polygon(0 0,100% 0,100% 100%,8% 100%);
}

/* SECTIONS */
.sec{padding:clamp(4rem,9vw,8rem) clamp(1.5rem,6vw,5rem)}
.sec-dark{background:var(--ink);color:var(--white)}
.sec-cream2{background:var(--cream2)}
.sec-white{background:var(--white)}
.lbl{
  font-size:.62rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold);display:flex;align-items:center;gap:.7rem;margin-bottom:.875rem;
}
.lbl::after{content:'';width:24px;height:1px;background:var(--gold);flex-shrink:0}
.lbl-lt::after{background:var(--gold2)}
.lbl-lt{color:var(--gold2)}
.h2{
  font-family:var(--serif);font-size:clamp(1.875rem,3.5vw,3rem);
  font-weight:600;line-height:1.1;letter-spacing:-.02em;margin-bottom:.875rem;
}
.h2 em{font-style:italic;color:var(--gold)}
.h2-lt em{color:var(--gold2)}
.body-t{font-size:.9375rem;line-height:1.85;color:var(--muted);font-weight:300;max-width:520px}
.body-lt{color:rgba(255,255,255,.42)}

/* SERVICES */
.svc-head{display:grid;grid-template-columns:1fr 1fr;gap:4rem;margin-bottom:3.5rem;align-items:end}
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px}
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px}
.svc-card{
  background:var(--white);
  padding:2.25rem 1.875rem;
  position:relative;overflow:hidden;
  cursor:default;
  /* 3D tilt base */
  transform-style:preserve-3d;
  transform:perspective(800px) rotateX(0deg) rotateY(0deg) translateZ(0);
  transition:transform .12s ease, box-shadow .3s ease;
  will-change:transform;
}
/* Gold top bar */
.svc-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg, var(--gold), var(--gold2), var(--gold));
  transform:scaleX(0);transform-origin:left;
  transition:transform .4s var(--ease);
  z-index:2;
}
.svc-card:hover::before{transform:scaleX(1)}
/* Shimmer sweep on hover */
.svc-card::after{
  content:'';
  position:absolute;inset:0;
  background:linear-gradient(
    115deg,
    transparent 0%,
    transparent 40%,
    rgba(176,139,78,.07) 50%,
    transparent 60%,
    transparent 100%
  );
  background-size:200% 100%;
  background-position:200% 0;
  transition:background-position .6s ease;
  pointer-events:none;z-index:1;
}
.svc-card:hover::after{background-position:-20% 0}
/* Glow shadow on hover */
.svc-card:hover{
  box-shadow:
    0 8px 32px rgba(176,139,78,.12),
    0 2px 8px rgba(0,0,0,.08),
    0 0 0 1px rgba(176,139,78,.12);
  z-index:2;
}
/* Icon lift */
.svc-ic{
  width:44px;height:44px;
  background:var(--gold-pale);border-radius:2px;
  display:flex;align-items:center;justify-content:center;
  font-size:1.25rem;margin-bottom:1.25rem;
  transition:transform .3s var(--ease), background .3s;
  position:relative;z-index:2;
}
.svc-card:hover .svc-ic{
  transform:scale(1.15) rotate(-4deg);
  background:var(--gold);
}
.svc-n{
  font-family:var(--serif);font-size:4rem;font-weight:700;
  color:rgba(0,0,0,.04);position:absolute;top:.75rem;right:1.25rem;
  line-height:1;user-select:none;
  transition:color .3s, transform .3s;
}
.svc-card:hover .svc-n{color:rgba(176,139,78,.08);transform:scale(1.05)}
.svc-name{
  font-family:var(--serif);font-size:1.2rem;font-weight:600;
  margin-bottom:.625rem;color:var(--ink);
  position:relative;z-index:2;
  transition:color .25s;
}
.svc-card:hover .svc-name{color:var(--gold)}
.svc-desc{
  font-size:.83rem;line-height:1.72;color:var(--muted);
  position:relative;z-index:2;
  transition:color .25s;
}
.svc-card:hover .svc-desc{color:var(--ink2)}
/* Arrow hint on hover */
.svc-arrow{
  display:inline-flex;align-items:center;gap:.4rem;
  font-size:.72rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--gold);margin-top:.875rem;
  opacity:0;transform:translateX(-8px);
  transition:opacity .3s, transform .3s;
  position:relative;z-index:2;
  cursor:pointer;
}
.svc-card:hover .svc-arrow{opacity:1;transform:translateX(0)}

/* PROCESS */
.proc{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:4rem;position:relative}
.proc::before{content:'';position:absolute;top:27px;left:12%;right:12%;height:1px;background:rgba(176,139,78,.28)}
.step{text-align:center;padding:0 1.25rem;position:relative;z-index:1}
.step-ring{
  width:54px;height:54px;border-radius:50%;
  border:1px solid rgba(176,139,78,.4);background:var(--ink);
  margin:0 auto 1.375rem;display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-size:1.1rem;font-weight:700;color:var(--gold);
  transition:background .3s,border-color .3s;
}
.step:hover .step-ring{background:var(--gold);color:var(--ink);border-color:var(--gold)}
.step-name{font-weight:600;font-size:.875rem;margin-bottom:.45rem;color:var(--white)}
.step-desc{font-size:.78rem;color:rgba(255,255,255,.38);line-height:1.65}

/* ABOUT */
.ab-split{display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:center}
.ab-vis{position:relative;aspect-ratio:3/4;background:var(--ink2);border-radius:4px;overflow:hidden}
.ab-vis-bg{position:absolute;inset:0;background:linear-gradient(155deg,#2a2316,#161310)}
.ab-badge{
  position:absolute;top:1.25rem;right:1.25rem;
  background:rgba(10,10,8,.78);
  backdrop-filter:blur(10px);
  border:1px solid rgba(176,139,78,.4);
  border-radius:4px;
  color:var(--white);
  padding:.875rem 1.125rem;
  text-align:center;
  z-index:4;
}
.ab-badge strong{display:block;font-family:var(--serif);font-size:2rem;font-weight:700;line-height:1;color:var(--gold)}
.ab-badge small{font-size:.6rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.6);margin-top:.25rem;display:block}
.feat-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;margin-top:2.5rem}
.feat{display:flex;gap:.875rem;align-items:flex-start}
.feat-ic{
  width:36px;height:36px;flex-shrink:0;border-radius:2px;
  background:rgba(176,139,78,.1);border:1px solid rgba(176,139,78,.22);
  display:flex;align-items:center;justify-content:center;font-size:.9rem;margin-top:.05rem;
}
.feat-t{font-size:.84rem;color:var(--muted);line-height:1.55}
.feat-t strong{display:block;color:var(--ink);font-weight:600;margin-bottom:.1rem}

/* REVIEWS */
.rev-top{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:3.5rem;gap:2rem;flex-wrap:wrap}
.rating-pill{
  display:flex;align-items:center;gap:1rem;
  background:var(--gold-pale);border:1px solid rgba(176,139,78,.22);
  padding:.875rem 1.5rem;border-radius:2px;flex-shrink:0;
  transition:box-shadow .2s, border-color .2s, transform .2s;
}
.rating-pill:hover{
  box-shadow:0 4px 16px rgba(176,139,78,.2);
  border-color:rgba(176,139,78,.5);
  transform:translateY(-2px);
}
.r-score{font-family:var(--serif);font-size:2.5rem;font-weight:700;color:var(--ink);line-height:1}
.r-stars{color:var(--gold);font-size:1rem;letter-spacing:.06em}
.r-lbl{font-size:.62rem;color:var(--muted);letter-spacing:.06em;text-transform:uppercase;margin-top:.15rem}
.slider-wrap{overflow:hidden}
.slider-track{display:flex;transition:transform .55s var(--ease)}
.slide{flex:0 0 100%;display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
.rev-card{background:var(--cream2);padding:1.875rem;position:relative;border-radius:2px}
.rev-g{position:absolute;top:1.25rem;right:1.25rem;font-size:.55rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:700}
.rev-g::before{content:'G ';color:#4285F4}
.rev-stars{color:var(--gold);font-size:.875rem;letter-spacing:.08em;margin-bottom:.875rem}
.rev-text{font-size:.9375rem;line-height:1.75;color:var(--ink2);font-style:italic;margin-bottom:1.375rem;font-family:var(--serif)}
.rev-auth{display:flex;align-items:center;gap:.75rem}
.rev-av{
  width:38px;height:38px;border-radius:50%;
  background:var(--gold-pale);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:.78rem;color:var(--gold);
}
.rev-name{font-weight:600;font-size:.8rem;color:var(--ink)}
.rev-proj{font-size:.7rem;color:var(--muted)}
.slider-foot{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem;margin-top:2rem}
.s-nav{display:flex;gap:.75rem}
.s-btn{
  width:44px;height:44px;border-radius:50%;border:1px solid rgba(0,0,0,.15);
  background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;
  font-size:1rem;color:var(--ink);transition:all .2s;
}
.s-btn:hover{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.s-dots{display:flex;gap:.5rem;align-items:center}
.dot{width:6px;height:6px;border-radius:50%;background:rgba(0,0,0,.18);cursor:pointer;transition:all .3s}
.dot.active{background:var(--gold);width:22px;border-radius:3px}

/* GALLERY */
.g-item{position:relative;overflow:hidden;background:var(--ink2);aspect-ratio:4/3;cursor:pointer}
.g-item.tall{grid-row:span 2;aspect-ratio:auto}
.g-b,.g-a{position:absolute;inset:0;transition:opacity .5s var(--ease)}
.g-b{opacity:1}.g-a{opacity:0}
.g-item:hover .g-b{opacity:0}.g-item:hover .g-a{opacity:1}
.g-lbl{
  position:absolute;bottom:0;left:0;right:0;z-index:2;
  padding:.875rem 1rem;
  background:linear-gradient(transparent,rgba(0,0,0,.72));
  display:flex;justify-content:space-between;align-items:flex-end;
}
.g-proj{font-size:.62rem;color:rgba(255,255,255,.72);letter-spacing:.1em;text-transform:uppercase}
.g-tag{font-size:.58rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:.25rem .6rem;border-radius:1px}
.g-ba{background:rgba(255,255,255,.15);color:rgba(255,255,255,.7)}
.g-af{background:var(--gold);color:var(--ink)}

/* AREA */
.area-split{display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:center}
.map-box{aspect-ratio:1;background:var(--ink);border-radius:4px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.cities{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.75rem}
.c-pill{
  background:var(--white);border:1px solid rgba(176,139,78,.22);
  color:var(--ink2);padding:.4rem .875rem;border-radius:2px;font-size:.78rem;font-weight:500;
  transition:all .2s;
}
.c-pill:hover{background:var(--gold-pale);border-color:var(--gold)}

/* CTA */
.cta-sec{
  background:var(--ink);color:var(--white);text-align:center;position:relative;overflow:hidden;
}
.cta-sec::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 70% 60% at 30% 50%,rgba(176,139,78,.1),transparent 70%),
             radial-gradient(ellipse 70% 60% at 70% 50%,rgba(176,139,78,.07),transparent 70%);
}
.cta-btns{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;margin-top:2.5rem}
.cta-bar{
  display:flex;justify-content:center;gap:3.5rem;flex-wrap:wrap;
  margin-top:3rem;padding-top:3rem;border-top:1px solid rgba(255,255,255,.08);
}
.ci-l{font-size:.58rem;text-transform:uppercase;letter-spacing:.14em;color:rgba(255,255,255,.28);margin-bottom:.25rem}
.ci-v{font-size:1rem;font-weight:500}

/* CONTACT */
.con-grid{display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:start}
.form-g{margin-bottom:1.25rem}
.form-g label{display:block;font-size:.68rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;margin-bottom:.5rem;color:var(--ink2)}
.form-g input,.form-g select,.form-g textarea{
  width:100%;padding:.875rem 1rem;
  border:1px solid rgba(0,0,0,.12);
  background:var(--white);
  border-radius:2px;font-family:var(--sans);font-size:.9375rem;
  color:var(--ink);outline:none;transition:border-color .2s, box-shadow .2s;
  -webkit-appearance:none;
}
.form-g input::placeholder,.form-g textarea::placeholder{color:var(--muted)}
.form-g input:focus,.form-g select:focus,.form-g textarea:focus{
  border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(176,139,78,.12);
}
.form-g textarea{resize:vertical;min-height:140px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.con-info{display:flex;flex-direction:column;gap:1.5rem;margin-top:2rem}
.ci-row{display:flex;gap:1rem;align-items:flex-start}
.ci-ic{
  width:42px;height:42px;flex-shrink:0;border-radius:2px;
  background:var(--gold-pale);border:1px solid rgba(176,139,78,.2);
  display:flex;align-items:center;justify-content:center;font-size:1rem;
}
.ci-txt small{font-size:.6rem;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);display:block;margin-bottom:.2rem}
.ci-txt strong{font-size:.9375rem;color:var(--ink);font-weight:500}

/* SOCIAL */
.ig-btn{
  display:inline-flex;align-items:center;gap:.625rem;
  background:linear-gradient(135deg,#833ab4,#fd1d1d,#fcb045);
  color:#fff;padding:.625rem 1.25rem;border-radius:24px;
  text-decoration:none;font-size:.75rem;font-weight:600;letter-spacing:.04em;
  transition:opacity .2s,transform .2s;
}
.ig-btn:hover{opacity:.88;transform:translateY(-1px)}
.ig-ic{font-size:1rem}

/* FOOTER */
footer{
  background:#060605;color:rgba(255,255,255,.28);
  padding:2.5rem clamp(1.5rem,6vw,5rem);
}
.footer-top{
  display:flex;align-items:flex-start;justify-content:space-between;
  flex-wrap:wrap;gap:2rem;padding-bottom:2rem;
  border-bottom:1px solid rgba(255,255,255,.06);margin-bottom:2rem;
}
.f-brand{}
.f-brand-logo{height:50px;width:auto;margin-bottom:.75rem;opacity:.9}
.f-brand-tagline{font-size:.72rem;color:rgba(255,255,255,.3);letter-spacing:.06em;line-height:1.6;max-width:200px}
.f-cols{display:flex;gap:4rem;flex-wrap:wrap}
.f-col-title{font-size:.6rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.4);margin-bottom:1rem}
.f-col a{display:block;color:rgba(255,255,255,.28);text-decoration:none;cursor:pointer;font-size:.8rem;margin-bottom:.5rem;transition:color .2s}
.f-col a:hover{color:var(--gold)}
.f-col p{font-size:.8rem;color:rgba(255,255,255,.28);line-height:1.6}
.footer-bot{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem;font-size:.74rem}
.f-social{display:flex;gap:.75rem}
.f-social a{
  width:34px;height:34px;border-radius:50%;
  border:1px solid rgba(255,255,255,.12);
  display:flex;align-items:center;justify-content:center;
  color:rgba(255,255,255,.35);font-size:.875rem;text-decoration:none;
  transition:all .2s;
}
.f-social a:hover{background:var(--gold);border-color:var(--gold);color:var(--ink)}

/* ANIMS */
@keyframes fadeUp{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}
@keyframes slideLeft{from{opacity:0;transform:translateX(-48px)}to{opacity:1;transform:translateX(0)}}
@keyframes slideRight{from{opacity:0;transform:translateX(48px)}to{opacity:1;transform:translateX(0)}}
@keyframes scaleIn{from{opacity:0;transform:scale(.82)}to{opacity:1;transform:scale(1)}}
/* prevent FOUC on data-scroll elements */
[data-scroll]{will-change:transform,opacity}
@keyframes pulse-dot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(1.3)}}
.fu{animation:fadeUp .7s var(--ease) both}
.d1{animation-delay:.08s}.d2{animation-delay:.2s}.d3{animation-delay:.34s}.d4{animation-delay:.5s}

/* RESPONSIVE */

/* ═══════════════════════════════════════════
   TABLET  ≤ 960px
═══════════════════════════════════════════ */
@media(max-width:960px){
  /* Nav */
  .nav-links{display:none}
  .hamburger{display:flex}

  /* Hero — stack vertically */
  .hero{grid-template-columns:1fr;min-height:auto}
  .hero-l{
    padding:calc(var(--nav-h) + 3rem) 1.75rem 3rem;
    min-height:auto;
  }
  .hero-l::before{display:none}
  .hero-r{
    min-height:56vw;
    padding:1.5rem 1.75rem 2rem !important;
    justify-content:flex-end;
  }
  /* Hide floating card on tablet, show compact version */
  .hero-r > div:last-child{
    max-width:100% !important;
    margin-left:0 !important;
    padding:1rem 1.25rem !important;
  }
  .hero-stats{
    gap:1.75rem;
    padding-top:2rem;
    margin-top:2.5rem;
  }

  /* Splits → single column */
  .ab-split,.area-split,.con-grid,.svc-head{
    grid-template-columns:1fr;gap:2rem;
  }
  .ab-vis{display:block}

  /* Services */
  .svc-grid{grid-template-columns:1fr 1fr;gap:2px}

  /* Process */
  .proc{grid-template-columns:1fr 1fr;gap:2.5rem}
  .proc::before{display:none}

  /* Reviews slider — 1 card per slide */
  .slide{grid-template-columns:1fr}

  /* Gallery grids */
  .g-item.tall{grid-row:span 1;aspect-ratio:4/3}

  /* CTA bar */
  .cta-bar{gap:2rem}

  /* Footer */
  .footer-top{flex-direction:column;gap:2rem}
  .f-cols{gap:2rem;flex-direction:column}

  /* Form */
  .con-grid{gap:2.5rem}

  /* Map box */
  .map-box{aspect-ratio:16/9;max-height:300px}

  /* Carousel */
  .car-slide{flex:0 0 72vw;height:48vw}
}

/* ═══════════════════════════════════════════
   MOBILE  ≤ 600px
═══════════════════════════════════════════ */
@media(max-width:600px){
  :root{--nav-h:64px}
  #p-blog .sec > div[style*="grid-template-columns:repeat(3"]{grid-template-columns:1fr !important}

  /* Hero */
  .hero-l{padding:calc(var(--nav-h) + 2rem) 1.25rem 2.5rem}
  h1.hero-h{font-size:clamp(2.4rem,8.5vw,3.5rem)}
  .hero-p{font-size:.9375rem;margin-bottom:2rem}
  .hero-btns{gap:.625rem}
  .btn{padding:.8rem 1.5rem;font-size:.7rem}
  .hero-stats{gap:1.25rem;flex-wrap:wrap}
  .stat-n{font-size:1.875rem}
  .hero-r{min-height:52vw;padding:1rem 1.25rem 1.5rem !important}
  /* Hide floating project card on small phones */
  .hero-r > div:last-child{display:none}

  /* Nav logo */
  .nav-logo-txt{display:none}
  .nav-logo img{height:38px}

  /* Services */
  .svc-grid{grid-template-columns:1fr;gap:2px}
  .svc-card{padding:1.75rem 1.5rem}

  /* Process */
  .proc{grid-template-columns:1fr;gap:2rem}

  /* Reviews */
  .rev-top{flex-direction:column;align-items:flex-start}
  .rating-pill{width:100%;justify-content:center}
  .rev-card{padding:1.5rem}
  .rev-text{font-size:.875rem}
  .slider-foot{flex-direction:column;gap:.875rem;align-items:flex-start}
  .s-dots{margin-top:0}

  /* Gallery grids */
  .g-item{aspect-ratio:4/3}
  .g-item.tall{grid-row:span 1;aspect-ratio:4/3}

  /* Section headings */
  .h2{font-size:clamp(1.7rem,6.5vw,2.25rem)}
  .lbl{font-size:.6rem}

  /* CTA */
  .cta-btns{flex-direction:column;align-items:center}
  .cta-btns .btn{width:100%;text-align:center;max-width:320px}
  .cta-bar{flex-direction:column;gap:1.5rem;align-items:center;text-align:center}

  /* Contact form */
  .form-row{grid-template-columns:1fr}
  .con-grid{gap:2rem}

  /* Sections padding */
  .sec{padding:clamp(3rem,7vw,5rem) 1.25rem}

  /* About features */
  .feat-grid{grid-template-columns:1fr}

  /* Footer */
  .footer-top{padding-bottom:1.5rem}
  footer{flex-direction:column;align-items:flex-start;gap:1.25rem;text-align:left}
  .f-links{flex-direction:column;gap:.75rem}
  .f-cols{flex-direction:column}

  /* Carousel */
  .car-slide{flex:0 0 84vw;height:54vw}
  .carousel-header{flex-direction:column;align-items:flex-start}

  /* Cities */
  .cities{gap:.375rem}
  .c-pill{font-size:.72rem;padding:.35rem .75rem}

  /* Map */
  .map-box{aspect-ratio:4/3;max-height:240px}

  /* Lic tag smaller */
  .lic-tag{font-size:.55rem;padding:.4rem 1.25rem .4rem .875rem}

  /* Mobile nav bigger tap targets */
  .mobile-nav a{font-size:2rem}
}

/* ═══════════════════════════════════════════
   SMALL PHONES  ≤ 400px
═══════════════════════════════════════════ */
@media(max-width:400px){
  h1.hero-h{font-size:2.2rem}
  .hero-stats{gap:1rem}
  .stat-n{font-size:1.625rem}
  .stat-l{font-size:.58rem}
  .btn{padding:.75rem 1.2rem;font-size:.68rem}
  .sec{padding:2.5rem 1rem}
  .svc-card{padding:1.5rem 1.25rem}
  .rev-card{padding:1.25rem}
  .car-slide{flex:0 0 90vw;height:58vw}
  .form-g input,.form-g select,.form-g textarea{font-size:.9rem}
}

/* ══ SERVICES CAROUSEL — Brightstone style ══ */
.carousel-section{
  background:var(--ink);padding:0;overflow:hidden;position:relative;
}
.carousel-header{
  padding:clamp(3rem,6vw,5rem) clamp(1.5rem,6vw,5rem) 2.5rem;
  display:flex;align-items:flex-end;justify-content:space-between;
  flex-wrap:wrap;gap:1.5rem;position:relative;z-index:2;
}
/* Track viewport — shows peek of neighbouring slides */
.carousel-track-wrap{
  overflow:hidden;
  padding:0 clamp(1rem,4vw,3rem);
  padding-bottom:clamp(2.5rem,5vw,4rem);
  position:relative;
}
.carousel-track{
  display:flex;
  gap:20px;
  transition:transform .6s cubic-bezier(.25,.46,.45,.94);
  will-change:transform;
  cursor:grab;
}
.carousel-track.dragging{ cursor:grabbing; transition:none; }
/* Each slide: fixed width so peek shows */
.car-slide{
  flex:0 0 min(680px, 76vw);
  height:clamp(320px,50vw,520px);
  border-radius:6px;
  overflow:hidden;
  position:relative;
  transition:transform .5s ease, opacity .5s ease, box-shadow .5s ease;
  opacity:.55;
  transform:scale(.94);
  box-shadow:none;
}
.car-slide.active{
  opacity:1;
  transform:scale(1);
  box-shadow:0 24px 64px rgba(0,0,0,.5);
}
.car-slide.adjacent{ opacity:.7; transform:scale(.96); }
.car-img{
  width:100%;height:100%;object-fit:cover;object-position:center;
  transition:transform .7s ease;
  will-change:transform;
}
.car-slide.active .car-img:hover{ transform:scale(1.04); }
.car-overlay{
  position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(10,10,8,.88) 0%,rgba(10,10,8,.1) 55%,transparent 100%);
  transition:opacity .4s;
}
.car-slide:not(.active) .car-overlay{ background:rgba(10,10,8,.35); }
.car-caption{
  position:absolute;bottom:0;left:0;right:0;
  padding:1.75rem 1.5rem;
  transform:translateY(8px);opacity:0;
  transition:transform .4s ease, opacity .4s ease;
}
.car-slide.active .car-caption{ transform:translateY(0);opacity:1; }
.car-tag{
  font-size:.6rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold);margin-bottom:.5rem;
}
.car-title{
  font-family:var(--serif);font-size:clamp(1.1rem,2.5vw,1.5rem);font-weight:600;
  color:var(--white);line-height:1.2;
}
/* Nav row */
.carousel-nav{
  display:flex;align-items:center;justify-content:space-between;
  padding:1.5rem clamp(1rem,4vw,3rem) 0;
}
.car-dots{display:flex;gap:.5rem;align-items:center}
.car-dot{
  height:2px;background:rgba(255,255,255,.25);border-radius:1px;
  cursor:pointer;transition:all .35s ease;
}
.car-dot.active{background:var(--gold);width:28px !important;}
.car-arrows{display:flex;gap:.875rem}
.car-arrow{
  width:48px;height:48px;border-radius:50%;
  border:1px solid rgba(255,255,255,.2);background:transparent;
  color:var(--white);font-size:1.1rem;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all .25s ease;
}
.car-arrow:hover{background:var(--gold);border-color:var(--gold);color:var(--ink);}
@media(max-width:768px){
  .car-slide{flex:0 0 84vw;height:56vw}
  .carousel-track-wrap{padding:0 8vw 2rem}
}
@media(max-width:480px){
  .car-slide{flex:0 0 90vw;height:60vw}
  .carousel-track-wrap{padding:0 5vw 2rem}
}


/* ══ CUSTOM CURSOR ══ */
@media(hover:hover) and (pointer:fine){
  body{ cursor:none; }
  a, button, [onclick], label, select,
  .car-slide, .blog-card, .g-item, .svc-card,
  .car-arrow, .car-dot, .hamburger, .nav-links a {
    cursor:none;
  }
  input, textarea {
    cursor:text;
  }
  #cursor{
    position:fixed;
    z-index:99999;
    pointer-events:none;
    top:0; left:0;
    /* dot position is set via JS left/top directly */
  }
  #cursor-dot{
    position:fixed;
    width:9px; height:9px;
    background:var(--gold);
    border-radius:50%;
    transform:translate(-50%,-50%);
    z-index:99999;
    pointer-events:none;
    transition:width .2s ease, height .2s ease, background .2s ease, opacity .2s ease;
    will-change:left,top;
  }
  #cursor-ring{
    position:fixed;
    width:38px; height:38px;
    border:1.5px solid rgba(176,139,78,.7);
    border-radius:50%;
    transform:translate(-50%,-50%);
    z-index:99998;
    pointer-events:none;
    transition:width .3s ease, height .3s ease, opacity .3s ease, border-color .3s ease;
    opacity:.75;
    will-change:left,top;
  }
  /* Over links / buttons */
  body.cur-link #cursor-dot{
    width:44px; height:44px;
    background:rgba(176,139,78,.15);
    border:1.5px solid rgba(176,139,78,.5);
  }
  body.cur-link #cursor-ring{
    opacity:0; width:0; height:0;
  }
  /* Over inputs */
  body.cur-text #cursor-dot{
    width:2px; height:22px;
    border-radius:1px;
    background:var(--gold);
  }
  body.cur-text #cursor-ring{ opacity:0; }
  /* Clicking */
  body.cur-click #cursor-dot{
    width:16px; height:16px;
    background:var(--gold);
    opacity:.6;
  }
}
/* ══ BUTTON ARROW SLIDE EFFECT ══ */
.btn{
  position:relative;overflow:hidden;
  display:inline-flex;align-items:center;gap:0;
}
.btn .btn-arrow{
  display:inline-block;
  max-width:0;overflow:hidden;
  transition:max-width .35s ease, margin .35s ease;
  white-space:nowrap;margin-left:0;
  font-size:.85em;
}
.btn:hover .btn-arrow{
  max-width:24px;margin-left:.5rem;
}
/* Shine sweep on primary buttons */
.btn-gold::after,.btn-dark::after{
  content:'';
  position:absolute;top:0;left:-75%;
  width:50%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.15),transparent);
  transform:skewX(-20deg);
  transition:left .55s ease;
}
.btn-gold:hover::after,.btn-dark:hover::after{ left:125%; }
.ab-vis{aspect-ratio:3/4}
        @keyframes ab-slide-0{
      0%{opacity:0}
      0.0%{opacity:0}
      1.8%{opacity:1}
      8.2%{opacity:1}
      10.0%{opacity:0}
      100%{opacity:0}
    }
@keyframes ab-slide-1{
      0%{opacity:0}
      10.0%{opacity:0}
      11.8%{opacity:1}
      18.2%{opacity:1}
      20.0%{opacity:0}
      100%{opacity:0}
    }
@keyframes ab-slide-2{
      0%{opacity:0}
      20.0%{opacity:0}
      21.8%{opacity:1}
      28.2%{opacity:1}
      30.0%{opacity:0}
      100%{opacity:0}
    }
@keyframes ab-slide-3{
      0%{opacity:0}
      30.0%{opacity:0}
      31.8%{opacity:1}
      38.2%{opacity:1}
      40.0%{opacity:0}
      100%{opacity:0}
    }
@keyframes ab-slide-4{
      0%{opacity:0}
      40.0%{opacity:0}
      41.8%{opacity:1}
      48.2%{opacity:1}
      50.0%{opacity:0}
      100%{opacity:0}
    }
@keyframes ab-slide-5{
      0%{opacity:0}
      50.0%{opacity:0}
      51.8%{opacity:1}
      58.2%{opacity:1}
      60.0%{opacity:0}
      100%{opacity:0}
    }
@keyframes ab-slide-6{
      0%{opacity:0}
      60.0%{opacity:0}
      61.8%{opacity:1}
      68.2%{opacity:1}
      70.0%{opacity:0}
      100%{opacity:0}
    }
@keyframes ab-slide-7{
      0%{opacity:0}
      70.0%{opacity:0}
      71.8%{opacity:1}
      78.2%{opacity:1}
      80.0%{opacity:0}
      100%{opacity:0}
    }
@keyframes ab-slide-8{
      0%{opacity:0}
      80.0%{opacity:0}
      81.8%{opacity:1}
      88.2%{opacity:1}
      90.0%{opacity:0}
      100%{opacity:0}
    }
@keyframes ab-slide-9{
      0%{opacity:0}
      90.0%{opacity:0}
      91.8%{opacity:1}
      98.2%{opacity:1}
      100.0%{opacity:0}
      100%{opacity:0}
    }
        @keyframes ab-counter-badge{
          0%,100%{opacity:1}50%{opacity:.75}
        }
@keyframes pr1{0%{r:11;opacity:.85}100%{r:32;opacity:0}}
              @keyframes pr2{0%{r:11;opacity:.55}100%{r:28;opacity:0}}
              @keyframes pdot{0%,100%{opacity:1}50%{opacity:.55}}
              @keyframes prsm{0%{r:7;opacity:.75}100%{r:20;opacity:0}}
              @keyframes pdsm{0%,100%{opacity:.9}50%{opacity:.4}}
              @keyframes prxs{0%{r:5;opacity:.65}100%{r:14;opacity:0}}
              @keyframes pdxs{0%,100%{opacity:.85}50%{opacity:.35}}
              .r1{animation:pr1 2s ease-out infinite}
              .r2{animation:pr2 2s ease-out infinite;animation-delay:.7s}
              .dg{animation:pdot 2s ease-in-out infinite}
              .rsm{animation:prsm 2.4s ease-out infinite}
              .dsm{animation:pdsm 2.4s ease-in-out infinite}
              .rxs{animation:prxs 2.8s ease-out infinite}
              .dxs{animation:pdxs 2.8s ease-in-out infinite}

/* ── BLOG CARDS ── */
.blog-card{
  background:var(--white);border-radius:4px;overflow:hidden;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease);
}
.blog-card:hover{
  transform:translateY(-5px);
  box-shadow:0 20px 50px rgba(0,0,0,.12);
}
.blog-card:hover div[style*="height:200px"] img{
  transform:scale(1.06);
}
/* ── BLOG PAGE BG — Brightstone cream ── */
#p-blog > .sec:first-child{
  background:var(--cream) !important;
}
#p-blog .sec > p.lbl{margin-bottom:.5rem}
/* Blog grid responsive */
@media(max-width:960px){
  #p-blog .sec > div[style*="repeat(3"]{grid-template-columns:1fr 1fr !important}
}
@media(max-width:600px){
  #p-blog .sec > div[style*="repeat(3"]{grid-template-columns:1fr !important}
}
/* ── CONTACT FORM DARK CARD ── */
#contactForm .form-g label{color:rgba(255,255,255,.65) !important}
#contactForm .form-g input,
#contactForm .form-g select,
#contactForm .form-g textarea{
  background:rgba(255,255,255,.06) !important;
  border-color:rgba(176,139,78,.25) !important;
  color:var(--white) !important;
}
#contactForm .form-g input::placeholder,
#contactForm .form-g textarea::placeholder{color:rgba(255,255,255,.3) !important}
#contactForm .form-g input:focus,
#contactForm .form-g select:focus,
#contactForm .form-g textarea:focus{
  border-color:var(--gold) !important;
  background:rgba(176,139,78,.08) !important;
  box-shadow:0 0 0 3px rgba(176,139,78,.15) !important;
}
#contactForm .form-g select option{background:var(--ink);color:var(--white)}
#contactForm p[style*="color:var(--muted)"]{color:rgba(255,255,255,.35) !important}
#captcha-question{color:rgba(255,255,255,.7) !important}
#captcha-hint{color:rgba(255,255,255,.4) !important}

/* ══════════════════════════════════════════
   GALLERY PAGE FIXES
══════════════════════════════════════════ */

/* DESKTOP: Remove hover de todos os itens da galeria
   (evita imagem preta e o efeito antes/depois indesejado) */
#p-gallery .g-item:hover .g-b{opacity:1!important}
#p-gallery .g-item:hover .g-a{opacity:0!important}

/* MOBILE: Grids da galeria viram carrossel deslizável */
@media(max-width:600px){
  #p-gallery [style*="1fr 1fr"],
  #p-gallery [style*="repeat(3,1fr)"]{
    display:flex!important;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    scroll-behavior:smooth;
    gap:3px;
  }
  #p-gallery [style*="1fr 1fr"]::-webkit-scrollbar,
  #p-gallery [style*="repeat(3,1fr)"]::-webkit-scrollbar{display:none}
  #p-gallery [style*="1fr 1fr"] .g-item,
  #p-gallery [style*="repeat(3,1fr)"] .g-item{
    flex:0 0 85vw!important;
    width:85vw!important;
    scroll-snap-align:start;
    aspect-ratio:4/3!important;
    min-width:0;
  }
}
/* ══ CAROUSEL CENTERING FIX ══ */
/* Switch track-wrap to native scroll with CSS snap — eliminates JS offset math errors */
.carousel-track-wrap{
  overflow-x:auto!important;
  overflow-y:hidden!important;
  scroll-snap-type:x mandatory!important;
  scrollbar-width:none!important;
  -webkit-overflow-scrolling:touch;
}
.carousel-track-wrap::-webkit-scrollbar{display:none!important}
.carousel-track{transform:none!important;transition:none!important;cursor:default!important}
.car-slide{scroll-snap-align:center!important}