* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
 }

 :root {
   --warm: #AFA195;
   --warm-light: #D4C8BC;
   --warm-pale: #F2EDE8;
   --warm-deep: #8A7A6E;
   --black: #0F0F0F;
   --charcoal: #1E1E1E;
   --white: #FFFFFF;
   --gold: #C9A96E; --bg-soft: #FEFAF5; --bg-soft: #FEFAF5; 
   --gold-light: #E0C88C;
   --lt-bg: #F7F2EC;
   --lt-bg-alt: #4e2e092e;
   --lt-text: #2A221A;
   --lt-text-muted: #6B5E52;
   --lt-border: rgba(138, 122, 110, 0.2);
   --gold-dark: #B58E4A;
   --shadow-sm: 0 8px 20px rgba(0, 0, 0, 0.05);
   --shadow-md: 0 12px 28px rgba(0, 0, 0, 0.08);
   --transition-smooth: all 0.35s cubic-bezier(0.2, 0.9, 0.4, 1.1);
     --gold:        #C9A96E;
      --gold-light:  #E8D5B0;
      --gold-dark:   #8B6A35;
      --dark:        #0D0D0D;
      --surface:     #141414;
      --card-bg:     #1A1A1A;
      --text-primary:#F5F0E8;
      --text-muted:  #8A8A8A;
      --border:      rgba(201, 169, 110, 0.12);
  --shadow-lg:0 24px 56px rgba(0,0,0,0.14);
  --tr:all 0.38s cubic-bezier(0.22,0.9,0.36,1.05);
  --fd:'Cormorant Garamond',Georgia,serif;
  --fb:'Jost',system-ui,sans-serif;
  --r-sm:12px; --r-md:20px; --r-lg:28px;
 }

 body {
   font-family: 'Jost', sans-serif;
   background: var(--white);
   color: var(--black);
   overflow-x: hidden;
   scroll-behavior: smooth;
 }



    ::-webkit-scrollbar {
            width: 5px
        }

        ::-webkit-scrollbar-track {
            background: var(--lt-bg)
        }

        ::-webkit-scrollbar-thumb {
            background: var(--warm);
            border-radius: 10px
        }






 /* ========== PREMIUM PRELOADER WITH MIRROR DESIGN ========== */
 #preloader {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: linear-gradient(135deg, #0a0a0a 0%, #141210 100%);
   z-index: 9999;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-direction: column;
   gap: 28px;
   transition: opacity 0.7s ease, visibility 0.7s ease;
 }

 .preloader-mirror {
   position: relative;
   width: 110px;
   height: 110px;
   background: linear-gradient(145deg, #2a2a2a, #1a1a1a);
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   box-shadow: 0 20px 35px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.1);
   animation: floatMirror 2s ease-in-out infinite;
 }

 .preloader-mirror::before {
   content: '';
   position: absolute;
   inset: -4px;
   border-radius: 50%;
   background: linear-gradient(135deg, var(--gold), #876b3a);
   z-index: -1;
   filter: blur(6px);
   opacity: 0.6;
   animation: pulseGlow 1.8s infinite;
 }

 .mirror-glass {
   width: 82px;
   height: 82px;
   background: radial-gradient(circle at 30% 35%, #e8dfcf, #b8a889);
   border-radius: 50%;
   position: relative;
   overflow: hidden;
   box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.2), 0 4px 12px rgba(0, 0, 0, 0.2);
 }

 .mirror-glass::after {
   content: '';
   position: absolute;
   top: -50%;
   left: -50%;
   width: 200%;
   height: 200%;
   background: radial-gradient(circle at 30% 35%, rgba(255, 245, 215, 0.6) 0%, rgba(255, 240, 200, 0) 70%);
   animation: shimmer 2.2s infinite;
 }

 .mirror-led-ring {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   width: 96px;
   height: 96px;
   border-radius: 50%;
   border: 2px dashed var(--gold);
   opacity: 0.7;
   animation: rotateRing 4s linear infinite;
 }

 .mirror-led-ring::before {
   content: '';
   position: absolute;
   top: -6px;
   left: 50%;
   width: 10px;
   height: 10px;
   background: var(--gold);
   border-radius: 50%;
   transform: translateX(-50%);
   box-shadow: 0 0 12px var(--gold);
 }

 @keyframes floatMirror {

   0%,
   100% {
     transform: translateY(0);
   }

   50% {
     transform: translateY(-10px);
   }
 }

 @keyframes pulseGlow {

   0%,
   100% {
     opacity: 0.4;
     filter: blur(5px);
   }

   50% {
     opacity: 0.9;
     filter: blur(8px);
   }
 }

 @keyframes shimmer {
   0% {
     transform: translate(-30%, -30%) rotate(0deg);
     opacity: 0.3;
   }

   100% {
     transform: translate(30%, 30%) rotate(20deg);
     opacity: 0;
   }
 }

 @keyframes rotateRing {
   from {
     transform: translate(-50%, -50%) rotate(0deg);
   }

   to {
     transform: translate(-50%, -50%) rotate(360deg);
   }
 }

 .preloader-text {
   font-family: 'Cormorant Garamond', serif;
   font-size: 1.5rem;
   letter-spacing: 5px;
   color: var(--gold);
   text-transform: uppercase;
   font-weight: 500;
   background: linear-gradient(135deg, #e9d6a7, #c9a96e);
   -webkit-background-clip: text;
   background-clip: text;
   color: transparent;
   animation: textFlicker 1.5s ease infinite;
 }

 @keyframes textFlicker {

   0%,
   100% {
     opacity: 0.9;
     letter-spacing: 5px;
   }

   50% {
     opacity: 1;
     letter-spacing: 6px;
     text-shadow: 0 0 6px rgba(201, 169, 110, 0.5);
   }
 }

 .loader-progress {
   width: 180px;
   height: 2px;
   background: rgba(201, 169, 110, 0.2);
   border-radius: 4px;
   overflow: hidden;
   margin-top: 10px;
 }

 .loader-progress-bar {
   width: 0%;
   height: 100%;
   background: linear-gradient(90deg, var(--gold), #e8cf8a);
   animation: loadingProgress 1.8s ease forwards;
 }

 @keyframes loadingProgress {
   0% {
     width: 0%;
   }

   30% {
     width: 45%;
   }

   70% {
     width: 85%;
   }

   100% {
     width: 100%;
   }
 }
/* ══════════════════════════════
   TOPBAR
══════════════════════════════ */
#topbar {
  background: var(--charcoal);
  padding: 9px 0;
  border-bottom: 1px solid rgba(201,169,110,0.18);
}
.tb-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 0 32px;
}
.tb-marquee {
  overflow: hidden;
  flex: 1;
  mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}
.tb-track {
  display: flex;
  gap: 60px;
  white-space: nowrap;
  animation: tbMarquee 28s linear infinite;
  width: max-content;
}
.tb-track span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
  color: var(--warm-light);
}
.tb-ico { color: var(--gold); font-style: normal; }
@keyframes tbMarquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.tb-right { display: flex; gap: 10px; }
.tb-right a {
  color: var(--warm-light);
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(175,161,149,0.12);
  transition: all .25s;
  text-decoration: none;
}
.tb-right a:hover { background: var(--gold); color: #111; transform: translateY(-2px); }
.tb-wa { background: rgba(37,211,102,0.16) !important; color: #4ade80 !important; }
.tb-wa:hover { background: #25d366 !important; color: #fff !important; }

/* ══════════════════════════════
   LOGO BAR
══════════════════════════════ */
#logoBar {
  background: var(--white);
  border-bottom: 1px solid rgba(175,161,149,0.2);
  padding: 10px 0;
  position: sticky;
  top: 0;
  z-index: 1040;
  transition: box-shadow .3s, background .3s;
}
#logoBar.sc {
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
  background: rgba(255,255,255,0.97);
  backdrop-filter: blur(4px);
}
.lb-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 32px;
}
.logo-wrap {
  display: flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
}

.logo-icon  img{
  width: 120px
}
.logo-name {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 700;
  font-size: 1.6rem;
  color: var(--black);
  line-height: 1;
}
.logo-name span { color: var(--gold); }
.logo-sub {
  font-size: .6rem;
  font-weight: 400;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--warm-deep);
  margin-top: 2px;
}
.lb-right { display: flex; align-items: center; gap: 12px; }
.lb-brochure {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 24px;
  border-radius: 50px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  background: linear-gradient(135deg, var(--gold) 0%, #dbb869 100%);
  color: var(--black);
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(201,169,110,0.35);
  transition: all .3s;
}
.lb-brochure:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(201,169,110,0.5);
  color: #1a1a1a;
}
.lb-brochure svg { flex-shrink: 0; }

/* Hamburger */
.mob-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 5px 6px;
  border-radius: 6px;
  transition: background .2s;
}
.mob-toggle:hover { background: rgba(175,161,149,0.15); }
.mob-toggle span {
  display: block;
  width: 22px; height: 2px;
  background: var(--black);
  border-radius: 2px;
  transition: all .35s cubic-bezier(.4,0,.2,1);
}
.mob-toggle span + span { margin-top: 5px; }
.mob-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.mob-toggle.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.mob-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ══════════════════════════════
   MAIN NAV
══════════════════════════════ */
#mainNav {
  background: var(--black);
  position: sticky;
  top: 85px;
  z-index: 1030;
  border-bottom: 1px solid rgba(201,169,110,0.1);
}
.mn-inner {
  display: flex;
  justify-content: center;
  padding: 0 32px;
}
.mn-list {
  display: flex;
  list-style: none;
  margin: 0; padding: 0;
}
.mn-list li { position: relative; }
.mn-list .nav-lk {
  display: block;
  font-size: .78rem;
  font-weight: 500;
  color: rgba(255,255,255,0.8);
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 15px 20px;
  text-decoration: none;
  transition: color .28s;
  position: relative;
}
.mn-list .nav-lk::after {
  content: '';
  position: absolute;
  bottom: 10px; left: 50%;
  width: 0; height: 2px;
  background: var(--gold);
  transform: translateX(-50%);
  transition: width .3s;
  opacity: 0;
}
.mn-list .nav-lk:hover::after,
.mn-list .nav-lk.active::after { width: 55%; opacity: 1; }
.mn-list .nav-lk:hover,
.mn-list .nav-lk.active { color: var(--gold); }

/* Dropdown */
.mn-has-drop { position: relative; }
.mn-drop {
  display: none;
  position: absolute;
  top: 100%; left: 0;
  min-width: 310px;
  background: var(--charcoal);
  border-top: 2px solid var(--gold);
  border-radius: 0 0 12px 12px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.35);
  z-index: 200;
  padding: 6px 0;
  animation: dropFade .2s ease;
}
@keyframes dropFade {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.mn-has-drop:hover > .mn-drop { display: block; }
.mn-drop a {
  display: block;
  padding: 10px 20px;
  font-size: .75rem;
  color: rgba(255,255,255,0.75);
  letter-spacing: .1em;
  text-decoration: none;
  transition: all .2s;
}
.mn-drop a:hover {
  background: rgba(201,169,110,0.15);
  color: var(--gold);
  padding-left: 26px;
}
.drop-arrow {
  font-size: .55rem;
  margin-left: 4px;
  display: inline-block;
  transition: transform .25s;
}
.mn-has-drop:hover .drop-arrow { transform: rotate(180deg); }

.form-submit-note{
  display: none;
}
/* ══════════════════════════════
   MOBILE  ≤ 767px
══════════════════════════════ */
@media (max-width: 767px) { 

  .lb-inner { padding: 0 16px; }
  .lb-brochure span { display: none; }
  .lb-brochure { padding: 8px 14px; gap: 0; }
  .mob-toggle { display: block; }

  /* slide-down panel */
  #mainNav {
    position: fixed;
    top: 65px; left: 0; right: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height .4s cubic-bezier(.4,0,.2,1), opacity .3s;
    opacity: 0;
    pointer-events: none;
    border-bottom: none;
  }
  #mainNav.open {
    max-height: 520px;
    opacity: 1;
    pointer-events: auto;
    z-index: 9999;
    border-bottom: 1px solid rgba(201,169,110,0.12);
  }

  .mn-inner { flex-direction: column; padding: 0; }
  .mn-list  { flex-direction: column; width: 100%; }

  .mn-list .nav-lk {
    padding: 14px 20px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    font-size: .8rem;
  }
  .mn-list .nav-lk::after { display: none; }

  /* Mobile dropdown accordion */
  .mn-has-drop { position: static; }
  .mn-drop {
    display: none !important;
    position: static;
    box-shadow: none;
    border-radius: 0;
    border-top: none;
    padding: 0;
    background: rgba(0,0,0,0.3);
    animation: none;
  }
  .mn-has-drop.mob-open > .mn-drop { display: block !important; }
  .mn-has-drop.mob-open .drop-arrow   { transform: rotate(180deg); }
  .mn-drop a {
    padding: 11px 32px;
    font-size: .75rem;
    border-bottom: 1px solid rgba(255,255,255,0.04);
  }
  .mob-drop-toggle { cursor: pointer; user-select: none; }
}

/* ══════════════════════════════
   TABLET  768–1024px
══════════════════════════════ */
@media (min-width: 768px) and (max-width: 1024px) {
  .mn-list .nav-lk { padding: 14px 13px; font-size: .7rem; }
  .lb-inner { padding: 0 20px; }
}



 /* hero grid */
 .hg-wrap {
   display: grid;
   grid-template-columns: 1.2fr 0.6fr 0.6fr;
   grid-template-rows: 280px 280px;
   gap: 4px;
 }

 .hm {
   grid-row: 1/3;
   position: relative;
   overflow: hidden;
 }

 .hm-imgbg {
   position: absolute;
   inset: 0;
   background-size: cover;
   transition: transform 0.7s;
 }

 .hm:hover .hm-imgbg {
   transform: scale(1.04);
 }

 .hm-overlay {
   position: absolute;
   inset: 0;
   background: linear-gradient(115deg, rgba(10, 8, 6, 0.85) 0%, rgba(15, 12, 8, 0.6) 50%, rgba(0, 0, 0, 0.2) 100%);
 }

 .hm-content {
   position: relative;
   z-index: 2;
   padding: 40px 44px;
   max-width: 440px;
   height: 100%;
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
 }

 .h-tag {
   background: rgba(0, 0, 0, 0.4);
   backdrop-filter: blur(6px);
   width: fit-content;
   padding: 5px 18px;
   border-radius: 50px;
   font-size: 10px;
   color: var(--gold);
   margin-bottom: 18px;
 }

 .h-price{
  color: #fff;
 }

 .h-title {
   font-family: 'Cormorant Garamond', serif;
   font-size: clamp(2rem, 3.8vw, 3rem);
   font-weight: 700;
   color: white;
 }

 .h-price strong {
   font-size: 1.9rem;
   color: var(--gold);
 }

 .btn-hm {
   background: var(--gold);
   color: #111;
   padding: 12px 32px;
   border-radius: 50px;
   font-weight: 600;
   font-size: 11px;
   width: fit-content;
   text-decoration: none;
   transition: 0.25s;
 }

 .btn-hm:hover {
   background: var(--warm-light);
   transform: translateY(-3px);
 }

 .hs {
   position: relative;
   overflow: hidden;
 }

.hs-imgbg {
    width: 100%;
  height: 100%;
  object-fit: contain;   /* no crop */
  object-position: center;
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center top; /* 👈 change this */
  transition: transform 0.55s;
  filter: brightness(0.75);
}

 .hs:hover .hs-imgbg {
   transform: scale(1.05);
 }

 .hs-ov {
   position: absolute;
   inset: 0;
   background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.2) 70%);
 }

 .hs-content {
   position: relative;
   z-index: 2;
   padding: 22px 24px;
   height: 100%;
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
 }

 .s-price {
   color: var(--white);
 }

 .s-tag {
   color: var(--white);
 }

 .s-title {
   font-family: 'Cormorant Garamond', serif;
   font-size: 1.45rem;
   font-weight: 600;
   color: white;
  
 }

 .btn-hs {
   backdrop-filter: blur(8px);
   background: rgba(255, 255, 255, 0.1);
   border: 1px solid rgba(255, 255, 255, 0.3);
   padding: 6px 18px;
   border-radius: 60px;
   font-size: 10px;
   width: fit-content;
   text-decoration: none;
   color: white;
   transition: 0.25s;
 }

 .btn-hs:hover {
   background: var(--gold);
   color: #111;
 }
/* Carousel */
.hg-carousel {
    position: relative;
    overflow: hidden;
}

.hg-slide {
    display: none;
    animation: hgSlideIn 0.55s ease;
}
#formSuccess.visible {
    display: block !important;
}
.hg-slide.active {
    display: block;
}

@keyframes hgSlideIn {
    from { opacity: 0; transform: translateX(50px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* Arrows */
.hg-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 18px;
    transition: 0.25s;
}

.hg-arrow:hover {
    background: var(--gold);
    color: #111;
    border-color: var(--gold);
}

.hg-prev { left: 18px; }
.hg-next { right: 18px; }

/* Dots */
.hg-dots {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 10;
}

.hg-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    border: none;
    cursor: pointer;
    transition: background 0.25s, transform 0.25s;
    padding: 0;
}

.hg-dot.active {
    background: var(--gold);
    transform: scale(1.4);
}


 /* ========== REDESIGNED ABOUT US - ELEGANT & MODERN ========== */
 #aboutUs {
   padding: 100px 0;
   background: var(--white);
   position: relative;
   overflow: hidden;
 }

 #aboutUs::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: radial-gradient(circle at 0% 20%, rgba(201, 169, 110, 0.03) 0%, transparent 70%);
   pointer-events: none;
 }

 .about-container {
      /* max-width: 1300px; */

   margin: 0 auto;
   padding: 0 28px;
 }

 .about-header {
   text-align: center;
   margin-bottom: 20px;
 }

 .about-subtitle {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   background: rgba(201, 169, 110, 0.1);
   padding: 6px 20px;
   border-radius: 60px;
   margin-bottom: 20px;
   backdrop-filter: blur(4px);
 }

 .about-subtitle i {
   color: var(--gold);
   font-size: 12px;
 }

 .about-subtitle span {
   font-size: 11px;
   letter-spacing: 3px;
   font-weight: 600;
   text-transform: uppercase;
   color: var(--gold-dark);
 }

 .about-header h1 {
   font-family: 'Cormorant Garamond', serif;
   font-size: 3.2rem;
   font-weight: 700;
   color: var(--black);
   margin-bottom: 16px;
 }

 .about-header h1 span {
   color: var(--gold);
   position: relative;
   display: inline-block;
 }

 .about-header h1 span::after {
   content: '';
   position: absolute;
   bottom: 8px;
   left: 0;
   width: 100%;
   height: 2px;
   background: var(--gold);
   opacity: 0.4;
 }

 .about-header h2 {
   font-family: 'Cormorant Garamond', serif;
   font-size: 3.2rem;
   font-weight: 700;
   color: var(--black);
   margin-bottom: 16px;
 }

 .about-header h2 span {
   color: var(--gold);
   position: relative;
   display: inline-block;
 }

 .about-header h2 span::after {
   content: '';
   position: absolute;
   bottom: 8px;
   left: 0;
   width: 100%;
   height: 2px;
   background: var(--gold);
   opacity: 0.4;
 }

 .about-header>p {
   max-width: 650px;
   margin: 0 auto;
   color: var(--warm-deep);
   font-size: 1rem;
   line-height: 1.6;
 }

 .about-grid-new {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 60px;
   align-items: center;
   margin-bottom: 70px;
 }

 .about-visual {
   position: relative;
   border-radius: 32px;
   overflow: hidden;
   box-shadow: 0 30px 40px -20px rgba(0, 0, 0, 0.2);
 }

 .about-visual img {
   width: 100%;
   height: auto;
   display: block;
   transition: transform 0.5s;
 }

 .about-visual:hover img {
   transform: scale(1.02);
 }

 .about-visual-badge {
   position: absolute;
   bottom: 20px;
   left: 20px;
   background: rgba(0, 0, 0, 0.6);
   backdrop-filter: blur(12px);
   padding: 8px 20px;
   border-radius: 40px;
   color: var(--gold);
   font-size: 12px;
   font-weight: 500;
   letter-spacing: 1px;
 }

 .about-content {
   padding-right: 20px;
 }

 .about-quote {
   font-family: 'Cormorant Garamond', serif;
   font-size: 1.6rem;
   font-style: italic;
   color: var(--black);
   line-height: 1.4;
   margin-bottom: 24px;
   border-left: 3px solid var(--gold);
   padding-left: 28px;
 }

 .about-text {
   color: #5a554e;
   line-height: 1.7;
   margin-bottom: 28px;
   font-size: 0.95rem;
 }

 .about-features-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 20px;
   margin: 32px 0;
 }

 .about-feature {
   display: flex;
   align-items: center;
   gap: 12px;
 }

 .about-feature i {
   font-size: 22px;
   color: var(--gold);
 }

 .about-feature span {
   font-size: 13px;
   font-weight: 500;
   color: var(--black);
 }

 .about-stats-new {
   display: flex;
   gap: 40px;
   margin-top: 30px;
   padding-top: 20px;
   border-top: 1px solid rgba(175, 161, 149, 0.3);
 }

 .stat-new {
   text-align: left;
 }

 .stat-number-new {
   font-size: 2rem;
   font-weight: 800;
   color: var(--gold);
   font-family: 'Cormorant Garamond', serif;
   line-height: 1;
 }

 .stat-label-new {
   font-size: 11px;
   letter-spacing: 1.5px;
   text-transform: uppercase;
   color: var(--warm-deep);
   margin-top: 5px;
 }

 .about-mission {
   background: linear-gradient(115deg, #faf7f2 0%, #f5efe8 100%);
   border-radius: 40px;
   padding: 50px 48px;
   margin-top: 20px;
   display: grid;
   grid-template-columns: 1fr 1.2fr;
   gap: 50px;
   align-items: center;
 }

 .mission-left h3 {
   font-family: 'Cormorant Garamond', serif;
   font-size: 2rem;
   font-weight: 700;
   margin-bottom: 16px;
 }

 .mission-left p {
   color: #5a554e;
   line-height: 1.6;
 }

 .mission-right {
   display: flex;
   gap: 24px;
   justify-content: flex-end;
 }

 .mission-card {
   background: white;
   padding: 24px 20px;
   border-radius: 24px;
   text-align: center;
   flex: 1;
   transition: 0.3s;
   box-shadow: 0 8px 20px rgba(0, 0, 0, 0.02);
   border: 1px solid rgba(201, 169, 110, 0.15);
 }

 .mission-card:hover {
   transform: translateY(-6px);
   border-color: var(--gold);
 }

 .mission-card i {
   font-size: 34px;
   color: var(--gold);
   margin-bottom: 12px;
 }

 .mission-card h4 {
   font-size: 1rem;
   font-weight: 700;
   margin-bottom: 6px;
 }

 .mission-card p {
   font-size: 11px;
   color: var(--warm-deep);
   margin: 0;
 }

 /* express shipping */
 #expressShipping {
   background: linear-gradient(125deg, #0f0e0c 0%, #1c1814 100%);
   padding: 60px 0;
   position: relative;
 }

 .shipping-container {
      /* max-width: 1300px; */

   margin: 0 auto;
   padding: 0 24px;
 }

 .shipping-badge {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   background: rgba(201, 169, 110, 0.15);
   backdrop-filter: blur(8px);
   padding: 8px 20px;
   border-radius: 60px;
   margin-bottom: 32px;
   border: 1px solid rgba(201, 169, 110, 0.3);
 }

 .shipping-badge i {
   font-size: 20px;
   color: var(--gold);
   animation: bounceLight 1.8s infinite;
 }

 @keyframes bounceLight {

   0%,
   100% {
     transform: translateY(0);
   }

   50% {
     transform: translateY(-3px);
   }
 }

 .shipping-badge span {
   font-size: 11px;
   letter-spacing: 2px;
   font-weight: 500;
   color: var(--gold-light);
   text-transform: uppercase;
 }

 .shipping-grid {
   display: grid;
   grid-template-columns: 1.2fr 0.9fr;
   gap: 40px;
   align-items: center;
 }

 .shipping-left h2 {
   font-family: 'Cormorant Garamond', serif;
   font-size: 2.8rem;
   font-weight: 700;
   color: white;
 }

 .shipping-left h2 span {
   color: var(--gold);
   border-bottom: 2px solid var(--gold);
 }

 .shipping-desc {
   color: rgba(255, 255, 255, 0.7);
   margin-bottom: 30px;
 }

 .ship-feat {
   display: flex;
   align-items: center;
   gap: 14px;
   background: rgba(255, 255, 255, 0.03);
   padding: 12px 20px;
   border-radius: 60px;
   margin-bottom: 12px;
   transition: 0.3s;
 }

 .ship-feat:hover {
   background: rgba(201, 169, 110, 0.12);
   transform: translateX(8px);
 }

 .ship-feat i {
   font-size: 24px;
   color: var(--gold);
 }

 .ship-feat div strong {
   color: white;
   font-size: 15px;
   display: block;
 }

 .ship-feat div p {
   color: rgba(255, 255, 255, 0.6);
   font-size: 12px;
   margin: 0;
 }

 .shipping-cta {
   display: inline-flex;
   align-items: center;
   gap: 12px;
   background: var(--gold);
   color: #111;
   padding: 12px 32px;
   border-radius: 50px;
   font-weight: 700;
   text-decoration: none;
   transition: 0.3s;
 }

 .shipping-cta:hover {
   background: #e0bf7a;
   gap: 16px;
 }

 .shipping-right {
   background: linear-gradient(145deg, #25201b, #1a1612);
   border-radius: 32px;
   padding: 32px;
   text-align: center;
   border: 1px solid rgba(201, 169, 110, 0.2);
 }

 .shipping-card-icon {
   font-size: 52px;
   color: var(--gold);
   margin-bottom: 16px;
 }

 .shipping-timer {
   display: flex;
   justify-content: center;
   gap: 20px;
   margin: 24px 0;
 }

 .timer-block {
   background: rgba(0, 0, 0, 0.5);
   border-radius: 16px;
   padding: 12px;
   min-width: 65px;
 }

 .timer-block .num {
   font-size: 28px;
   font-weight: 800;
   color: var(--gold);
   font-family: monospace;
 }

 .shipping-guarantee {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 12px;
   background: rgba(201, 169, 110, 0.1);
   padding: 12px;
   border-radius: 50px;
   margin-top: 20px;
 }

 /* trust bar */
 #trustBar {
   background: var(--warm-pale);
   padding: 40px 0;
 }

 .tr-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 20px;
      /* max-width: 1200px; */

   margin: 0 auto;
 }

 .tr-item {
   display: flex;
   align-items: center;
   gap: 15px;
   padding: 16px;
   background: white;
   border-radius: 60px;
   transition: 0.25s;
 }

 .tr-item:hover {
   transform: translateY(-4px);
   box-shadow: var(--shadow-sm);
 }

 .tr-icon {
   font-size: 28px;
   color: var(--gold);
 }

 .tr-title {
   font-weight: 700;
   font-size: 14px;
   margin: 0;
 }

 .tr-sub {
   font-size: 11px;
   color: var(--warm-deep);
   margin: 0;
 }

 @media (max-width: 991px) {
   .about-grid-new {
     grid-template-columns: 1fr;
     gap: 40px;
     padding:10px;
   }
.philosophy {
    padding: 3rem 1rem !important;
}

.hero {
    height: 58vh !important;

}
   .about-mission {
     grid-template-columns: 1fr;
     padding: 40px 14px;
   }

   .mission-right {
     justify-content: center;
     flex-wrap: wrap;
   }

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

   .tr-grid {
     grid-template-columns: repeat(2, 1fr);
   }

   .hg-wrap {
     grid-template-columns: 1fr 1fr;
     grid-template-rows: 300px 220px 220px;
   }

   .hm {
     grid-column: 1/3;
   }
 }

 @media (max-width: 767px) {
   .hg-wrap {
     grid-template-columns: 1fr;
   }

   .hm {
     grid-column: auto;
   }

   .tb-right {
     display: none;
   }

   #mainNav {
     display: block;
   }

   .about-header h2 {
     font-size: 2.2rem;
   }

   .about-features-grid {
     grid-template-columns: 1fr;
   }

   .about-stats-new {
     flex-wrap: wrap;
     gap: 20px;
   }

   .tr-grid {
     grid-template-columns: repeat(2, 1fr);
   }

   .tr-item 
 {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 7px;
    background: white;
    border-radius: 19px; 
 }

 .about-container {
    /* max-width: 1300px; */
    margin: 0 auto;
    padding: 0 10px;
}

.cta-group .btn-primary-gold, .btn-outline-light{
  font-size: 11px;
}

.cta-strip { 
    padding: 5rem 2rem;
}

  .story {
    display: grid;
    grid-template-columns: 1fr !important;
  }

  .story-text {
    background: var(--lt-bg);
    padding: 2rem 1rem !important;
  }

  .craft {
    padding: 4rem 1rem !important;

  }


  .craft-layout 
 {
    display: grid;
    grid-template-columns: 1fr !important;
 }

 .pillars {
    background: var(--lt-bg-alt);
    padding: 4rem 1rem !important;

 }

  
.pillars-grid {
    display: grid;
    grid-template-columns: 1fr !important;

}


.process {
    padding: 3rem 2rem !important; 
}


.process-inner { 
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr !important;

}

.gallery-sec { 
    padding: 5rem 1rem !important;
}

.gallery-grid {
    display: grid;
    grid-template-columns: 1.3fr 1fr !important;
    grid-template-rows: 360px 280px;
    gap: 4px;
}


.why {
    background: var(--black);
    padding: 3rem 1rem !important; 
}

 }



    /* ========== PARENT WRAPPER ========== */
    .about-hero-section {
      /* CSS variables (matching your warm/gold palette) */
      --black: #0F0F0F;
      --white: #FFFFFF;
      --gold: #C9A96E;
      --gold-light: #E0C88C;
      --warm: #AFA195;
    }

    /* Hero container (renamed class) */
    .about-hero-section .lm-hero {
      height: 62vh; 
      min-height: 380px;
      position: relative;
      display: flex;
      align-items: flex-end;
      overflow: hidden;
      background: var(--black);
    }

    /* Background image with gradient */
    .about-hero-section .lm-hero-bg {
      position: absolute;
      inset: 0;
      background: 
        linear-gradient(180deg, rgba(15,15,15,.2) 0%, rgba(15,15,15,.6) 50%, rgba(15,15,15,1) 100%),
        url('/assets/image/banner/sub-banner.png') center/cover no-repeat;
      animation: aboutHeroZoom 14s ease-out forwards;
    }

    @keyframes aboutHeroZoom {
      0% { transform: scale(1); }
      100% { transform: scale(1.08); }
    }

    /* Content container */
    .about-hero-section .lm-hero-content {
      position: relative;
      width: 100%;
         /* max-width: 1200px; */

      margin: 0 auto;
      padding: 0 4rem 5rem;
      animation: aboutHeroFadeUp 1s .2s both;
    }

    @keyframes aboutHeroFadeUp {
      from {
        opacity: 0;
        transform: translateY(30px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    /* Eyebrow text */
    .about-hero-section .lm-hero-eyebrow {
      font-size: 11px;
      letter-spacing: 3px;
      text-transform: uppercase;
      color: var(--gold);
      margin-bottom: 1rem;
    }

    /* Main title */
    .about-hero-section .lm-hero-title {
      font-family: 'Cormorant Garamond', serif;
      font-size: clamp(2.4rem, 6vw, 5rem);
      font-weight: 300;
      line-height: 1.05;
      color: var(--white);
    }

    .about-hero-section .lm-hero-title em {
      font-style: italic;
      color: var(--gold-light);
    }

    /* Subtitle */
    .about-hero-section .lm-hero-sub {
      font-size: 14px;
      color: var(--warm);
      max-width: 500px;
      margin-top: 1.2rem;
    }

    /* Decorative rule */
    .about-hero-section .lm-hero-rule {
      width: 60px;
      height: 1px;
      background: var(--gold);
      margin: 1.6rem 0 0;
    }

    /* Responsive adjustments */
    @media (max-width: 768px) {
      .about-hero-section .lm-hero-content {
        padding: 0 1.5rem 3rem;
      }
      .about-hero-section .lm-hero-title {
        font-size: 2.4rem;
      }
          

         .about-hero-section .lm-hero {
      height: 45vh; 
      min-height: 380px;
      position: relative;
      display: flex;
      align-items: flex-end;
      overflow: hidden;
      background: var(--black);
    }

    /* Background image with gradient */
    .about-hero-section .lm-hero-bg {
      position: absolute;
      inset: 0;
      background: 
        linear-gradient(180deg, rgba(15,15,15,.2) 0%, rgba(15,15,15,.6) 50%, rgba(15,15,15,1) 100%),
        url('/assets/image/banner/sub-banner.png') center/cover no-repeat;
      animation: aboutHeroZoom 14s ease-out forwards;
    }
    }
    

    


 /* mirrorelite section */


 /* ========== MIRROR MANUFACTURER SECTION — CUSTOM DESIGN FOCUS ========== */
 #mirrorEliteSection {
   background: radial-gradient(ellipse at 70% 30%, #0f1219 0%, #07090c 100%);
   padding: 80px 0;
   position: relative;
   overflow: hidden;
   border-top: 1px solid rgba(220, 200, 150, 0.2);
   border-bottom: 1px solid rgba(220, 200, 150, 0.15);
 }

 #mirrorEliteSection::before {
   content: '';
   position: absolute;
   inset: 0;
   background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 800" opacity="0.1"><path fill="none" d="M0 0h800v800H0z"/><path fill="%23dbb87a" d="M456 178c-24-13-52-14-78-3-26 11-48 32-63 56-15 24-23 53-25 82-2 29 2 58 12 85 10 26 27 50 49 68 22 18 48 29 76 33 28 4 56 0 82-9 26-9 49-25 66-46 18-21 29-47 32-74 3-27-1-55-10-80-9-25-24-47-43-64-19-17-42-28-67-33-25-5-51-4-74 5z" transform="translate(210 120) scale(0.7)"/><path fill="%23c9a96e" d="M320 240c-15 0-29 8-37 20-8 12-12 27-12 42 0 15 4 30 12 42 8 12 22 20 37 20 15 0 29-8 37-20 8-12 12-27 12-42 0-15-4-30-12-42-8-12-22-20-37-20z" transform="translate(530 300) scale(0.8)"/></svg>');
   background-repeat: repeat;
   background-size: 180px;
   opacity: 0.2;
   pointer-events: none;
 }

 .mirror-container {
   max-width: 1350px;
   margin: 0 auto;
   padding: 0 32px;
   position: relative;
   z-index: 3;
 }

 /* badge */
 .mirror-badge {
   display: inline-flex;
   align-items: center;
   gap: 12px;
   background: rgba(219, 184, 122, 0.12);
   backdrop-filter: blur(6px);
   padding: 8px 24px;
   border-radius: 60px;
   margin-bottom: 36px;
   border: 1px solid rgba(219, 184, 122, 0.35);
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
 }

 .mirror-badge i {
   font-size: 22px;
   color: #e2c28b;
   filter: drop-shadow(0 0 4px rgba(226, 194, 139, 0.4));
   animation: subtlePulse 2s infinite;
 }

 @keyframes subtlePulse {
   0% {
     transform: scale(1);
     opacity: 0.9;
   }

   50% {
     transform: scale(1.08);
     opacity: 1;
     text-shadow: 0 0 6px rgba(226, 194, 139, 0.5);
   }

   100% {
     transform: scale(1);
     opacity: 0.9;
   }
 }

 .mirror-badge span {
   font-size: 12px;
   letter-spacing: 2.2px;
   font-weight: 600;
   color: #ebd6b0;
   text-transform: uppercase;
   font-family: 'Inter', sans-serif;
 }

 /* grid 2 columns */
 .mirror-showcase-grid {
   display: grid;
   grid-template-columns: 1.2fr 0.9fr;
   gap: 48px;
   align-items: center;
 }

 /* LEFT SIDE */
 .mirror-info h2 {
   font-family: 'Cormorant Garamond', serif;
   font-size: 3.4rem;
   font-weight: 700;
   color: #ffffff;
   line-height: 1.2;
   margin-bottom: 16px;
   letter-spacing: -0.02em;
 }

 .mirror-info h2 .accent-gold {
   color: #e2c28b;
   border-bottom: 2px solid #e2c28b;
   display: inline-block;
   padding-bottom: 2px;
 }

 .tagline {
   color: rgba(245, 235, 210, 0.8);
   font-size: 1rem;
   line-height: 1.5;
   margin-bottom: 28px;
   font-weight: 400;
   border-left: 3px solid #e2c28b;
   padding-left: 18px;
 }

 .feature-list {
   display: flex;
   flex-direction: column;
   gap: 16px;
   margin: 32px 0 36px;
 }

 .mirror-feature {
   display: flex;
   align-items: center;
   gap: 18px;
   background: rgba(255, 255, 255, 0.02);
   backdrop-filter: blur(2px);
   padding: 12px 18px;
   border-radius: 48px;
   transition: all 0.25s ease;
   border: 1px solid rgba(226, 194, 139, 0.1);
 }

 .mirror-feature:hover {
   background: rgba(226, 194, 139, 0.08);
   transform: translateX(10px);
   border-color: rgba(226, 194, 139, 0.4);
 }

 .mirror-feature i {
   font-size: 28px;
   color: #e2c28b;
   width: 40px;
   text-align: center;
 }

 .mirror-feature div strong {
   color: white;
   font-size: 1rem;
   font-weight: 600;
   letter-spacing: -0.2px;
 }

 .mirror-feature div p {
   color: rgba(255, 248, 225, 0.65);
   font-size: 13px;
   margin-top: 4px;
 }

 .cta-group {
   display: flex;
   flex-wrap: wrap;
   gap: 18px;
   margin-top: 12px;
 }

 .btn-primary-gold {
   background: linear-gradient(105deg, #e2c28b 0%, #c9a45f 100%);
   color: #0c0b0a;
   border: none;
   padding: 12px 34px;
   border-radius: 50px;
   font-weight: 700;
   font-size: 14px;
   letter-spacing: 0.6px;
   display: inline-flex;
   align-items: center;
   gap: 12px;
   transition: all 0.3s;
   text-decoration: none;
   box-shadow: 0 6px 14px rgba(0, 0, 0, 0.2);
 }

 .btn-primary-gold:hover {
   background: linear-gradient(105deg, #f5daa4, #dcb56d);
   transform: scale(1.02);
   gap: 16px;
   color: #020202;
   box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
 }

 .btn-outline-light {
   background: transparent;
   border: 1.5px solid rgba(226, 194, 139, 0.7);
   color: #ebd6b0;
   padding: 12px 28px;
   border-radius: 50px;
   font-weight: 600;
   font-size: 14px;
   text-decoration: none;
   transition: 0.25s;
   display: inline-flex;
   align-items: center;
   gap: 8px;
 }

 .btn-outline-light:hover {
   background: rgba(226, 194, 139, 0.15);
   border-color: #e2c28b;
   color: #f9efda;
   transform: translateY(-2px);
 }

 /* RIGHT SIDE — CUSTOM DESIGN HUB (completely redesigned) */
 .prestige-card {
   background: linear-gradient(145deg, #1f1e1c, #141311);
   border-radius: 44px;
   padding: 36px 28px;
   text-align: center;
   backdrop-filter: blur(4px);
   box-shadow: 0 30px 40px -20px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(255, 255, 240, 0.05);
   border: 1px solid rgba(226, 194, 139, 0.3);
   transition: transform 0.2s;
 }

 .prestige-card:hover {
   transform: translateY(-5px);
   border-color: rgba(226, 194, 139, 0.5);
 }

 .mirror-icon-glow {
   font-size: 62px;
   color: #e2c28b;
   filter: drop-shadow(0 0 8px rgba(226, 194, 139, 0.6));
   margin-bottom: 8px;
 }

 .prestige-card h3 {
   font-family: 'Cormorant Garamond', serif;
   font-size: 1.9rem;
   color: white;
   margin: 12px 0 8px;
   font-weight: 700;
 }

 .card-sub {
   font-size: 13px;
   color: #bba87a;
   text-transform: uppercase;
   letter-spacing: 2px;
   margin-bottom: 18px;
 }

 /* Custom design grid features */
 .custom-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 14px;
   margin: 20px 0 18px;
   text-align: left;
 }

 .custom-item {
   background: rgba(0, 0, 0, 0.35);
   border-radius: 24px;
   padding: 10px 12px;
   display: flex;
   align-items: center;
   gap: 12px;
   transition: 0.2s;
   border: 1px solid rgba(226, 194, 139, 0.15);
 }

 .custom-item i {
   font-size: 22px;
   color: #e2c28b;
   min-width: 32px;
   text-align: center;
 }

 .custom-item span {
   font-size: 12px;
   font-weight: 500;
   color: #f2e5cb;
   line-height: 1.3;
 }

 .custom-item:hover {
   background: rgba(226, 194, 139, 0.12);
   border-color: rgba(226, 194, 139, 0.4);
 }

 .highlight-badge {
   background: rgba(226, 194, 139, 0.1);
   border-radius: 40px;
   padding: 12px 12px;
   margin: 18px 0 12px;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 12px;
   font-size: 13px;
   font-weight: 600;
   color: #eadbba;
 }

 .highlight-badge i {
   color: #e2c28b;
   font-size: 18px;
 }

 .dealer-stats {
   display: flex;
   justify-content: center;
   gap: 24px;
   margin: 18px 0 8px;
   border-top: 1px dashed rgba(226, 194, 139, 0.25);
   padding-top: 20px;
 }

 .stat-item {
   text-align: center;
 }

 .stat-number {
   font-size: 22px;
   font-weight: 800;
   color: #e2c28b;
   font-family: monospace;
 }

 .stat-label {
   font-size: 9px;
   letter-spacing: 1px;
   color: #b9aa83;
 }

 .supply-highlight {
   margin-top: 16px;
   font-size: 11px;
   color: #cbbf96;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 16px;
   flex-wrap: wrap;
 }

 .supply-highlight i {
   font-size: 14px;
   color: #e2c28b;
 }

 @media (max-width: 950px) {
   .mirror-showcase-grid {
     grid-template-columns: 1fr;
     gap: 40px;
   }

   .mirror-info h2 {
     font-size: 1.7rem;
   }

   .mirror-container {
     padding: 0 6px;
   }

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

 @media (max-width: 550px) {

   .btn-primary-gold,
   .btn-outline-light {
     padding: 10px 18px;
     font-size: 12px;
   }
   .hg-wrap {
        grid-template-columns: 1fr;
        grid-template-rows: 301px 210px 399px 399px 399px 399px;
    }

   .cta-strip 
 {
    background: var(--charcoal);
    padding: 3rem 2rem !important;
 }
   .mirror-feature i {
     font-size: 22px;
     width: 32px;
   }

   .dealer-stats {
     gap: 16px;
   }

   .stat-number {
     font-size: 18px;
   }
 }

 /* mirrorelite section */




















 /* ========== PRODUCT SECTION – LED LIGHT MIRRORS ========== */
 /* ========== SECTION - LIGHT ECOMMERCE ========== */
 .mirror-shop {
   background: linear-gradient(145deg, #ffffff 0%, #fefaf5 100%);
   padding: 80px 0;
   position: relative;
 }

 

 /* header */
 .shop-header {
   text-align: center;
   margin-bottom: 56px;
 }

 .shop-header h2 {
   font-family: 'Playfair Display', serif;
   font-size: 3rem;
   font-weight: 700;
   background: linear-gradient(135deg, #2c2418 0%, #9b7a3e 100%);
   background-clip: text;
   -webkit-background-clip: text;
   color: transparent;
   letter-spacing: -0.3px;
 }

 .shop-header h2 span {
   background: none;
   color: #b8860b;
   border-bottom: 2px solid #d4af37;
   display: inline-block;
   padding-bottom: 6px;
 }

 .shop-header p {
   color: #6b5a46;
   font-size: 1rem;
   margin-top: 16px;
   max-width: 580px;
   margin-left: auto;
   margin-right: auto;
 }

 /* tabs */
 .filter-tabs {
   display: flex;
   justify-content: center;
   flex-wrap: wrap;
   gap: 12px;
   margin-bottom: 48px;
 }

 .filter-btn {
   background: #ffffff;
   border: 1px solid #e7dfd1;
   font-size: 0.85rem;
   font-weight: 600;
   padding: 10px 28px;
   border-radius: 60px;
   color: #5a4a32;
   cursor: pointer;
   transition: all 0.25s;
   font-family: 'Inter', sans-serif;
   letter-spacing: 0.4px;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
 }

 .filter-btn i {
   margin-right: 8px;
   font-size: 1rem;
 }

 .filter-btn:hover {
   background: #fef5e8;
   border-color: #d4af37;
   transform: translateY(-2px);
 }

 .filter-btn.active {
   background: #d4af37;
   border-color: #d4af37;
   color: #1e1912;
   box-shadow: 0 8px 18px rgba(212, 175, 55, 0.25);
 }

 /* product grid */
 .product-collection {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
   gap: 32px;
 }

 /* cards */
 .product-card {
   background: #ffffff;
   border-radius: 28px;
   overflow: hidden;
   transition: all 0.35s cubic-bezier(0.2, 0.9, 0.4, 1.1);
   box-shadow: 0 12px 28px -8px rgba(0, 0, 0, 0.05);
   border: 1px solid #f0e9df;
 }

 .product-card:hover {
   transform: translateY(-6px);
   box-shadow: 0 28px 38px -14px rgba(0, 0, 0, 0.12);
   border-color: #e0cfb2;
 }

 .mirror-visual {
   background: #fefbf6;
   text-align: center;
   position: relative;
   overflow: hidden;
   height: 250px;
   display: flex;
   align-items: center;
   justify-content: center;
   border-bottom: 1px solid #f0e5d8;
 }

 .mirror-visual img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform 0.35s ease;
 }

 .product-card:hover .mirror-visual img {
   transform: scale(1.03);
 }

 .badge-new {
   position: absolute;
   top: 14px;
   left: 14px;
   background: #d4af37;
   color: #1f1b12;
   font-size: 10px;
   font-weight: 800;
   padding: 5px 12px;
   border-radius: 40px;
   letter-spacing: 1px;
   box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
   z-index: 2;
 }

 .product-details {
   padding: 22px 20px 26px;
   text-align: left;
 }

 .product-title {
   font-family: 'Playfair Display', serif;
   font-size: 1.4rem;
   font-weight: 700;
   color: #2e2a22;
   margin-bottom: 6px;
 }

 .product-category {
   font-size: 11px;
   letter-spacing: 1px;
   color: #b8860b;
   text-transform: uppercase;
   background: #fef5e8;
   display: inline-block;
   padding: 3px 12px;
   border-radius: 50px;
   margin-bottom: 12px;
 }

 .product-description {
   font-size: 13px;
   color: #6f6452;
   line-height: 1.45;
   margin-bottom: 16px;
 }

 .price-row {
   display: flex;
   align-items: baseline;
   gap: 10px;
   margin-bottom: 20px;
 }

 .current-price {
   font-size: 1.65rem;
   font-weight: 800;
   color: #b1621a;
   font-family: monospace;
 }

 .old-price {
   font-size: 13px;
   color: #aa9b82;
   text-decoration: line-through;
 }

 .action-btn {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   background: #fcf7f0;
   border: 1px solid #e3d5c0;
   padding: 9px 20px;
   border-radius: 50px;
   font-weight: 600;
   font-size: 13px;
   color: #6b4e28;
   cursor: pointer;
   transition: all 0.2s;
   text-decoration: none;
 }

 .action-btn i {
   font-size: 15px;
 }

 .action-btn:hover {
   background: #d4af37;
   border-color: #d4af37;
   color: #1f1a10;
   gap: 14px;
 }

 /* hide for filter & extra products */
 .product-card.hide-card {
   display: none;
 }

 .extra-product {
   display: block;
 }

 /* "View More" button container */
 .view-more-wrapper {
   text-align: center;
   margin-top: 52px;
 }

 .view-more-btn {
   background: transparent;
   border: 2px solid #d4af37;
   padding: 14px 42px;
   border-radius: 60px;
   font-weight: 700;
   font-size: 0.95rem;
   color: #6b4e28;
   cursor: pointer;
   transition: all 0.3s;
   display: inline-flex;
   align-items: center;
   gap: 12px;
   font-family: 'Inter', sans-serif;
   background: #ffffff;
   box-shadow: 0 4px 10px rgba(0, 0, 0, 0.02);
 }

 .view-more-btn i {
   font-size: 1.2rem;
   transition: transform 0.2s;
 }

 .view-more-btn:hover {
   background: #d4af37;
   border-color: #d4af37;
   color: #1f1a10;
   gap: 16px;
   box-shadow: 0 12px 20px -8px rgba(212, 175, 55, 0.4);
 }

 .view-more-btn:hover i {
   transform: translateX(4px);
 }

 /* initial hidden extra products */
 .extra-product {
   display: block;
 }

 /* responsive */
 @media (max-width: 700px) {
 

   .filter-btn {
     padding: 7px 18px;
     font-size: 0.7rem;
   }

   .product-collection {
     gap: 20px;
   }

   .mirror-visual {
     height: 210px;
   }
 }








 /* ========== REDESIGNED GALLERY – MASONRY STYLE WITH IMMERSIVE EFFECT ========== */
 .gallery-showcase {
   background: linear-gradient(145deg, #ffffff 0%, #fefaf5 100%);
   padding: 80px 0;
   position: relative;
 }

 .gallery-showcase .container {
   margin: 0 auto;
   padding: 0 28px;
 }

 /* header */
 .gallery-head {
   text-align: center;
   margin-bottom: 56px;
 }

 .gallery-head h2 {
   font-family: 'Playfair Display', serif;
   font-size: 2.8rem;
   font-weight: 700;
   background: linear-gradient(135deg, #2c2418 0%, #9b7a3e 100%);
   background-clip: text;
   -webkit-background-clip: text;
   color: transparent;
   letter-spacing: -0.3px;
 }

 .gallery-head h2 span {
   background: none;
   color: #b8860b;
   border-bottom: 2px solid #d4af37;
   display: inline-block;
   padding-bottom: 6px;
 }

 .gallery-head p {
   color: #6b5a46;
   font-size: 1rem;
   margin-top: 16px;
   max-width: 600px;
   margin-left: auto;
   margin-right: auto;
 }

 /* masonry grid using CSS columns */
 .masonry-grid {
   column-count: 3;
   column-gap: 28px;
 }

 .masonry-item {
   break-inside: avoid;
   margin-bottom: 28px;
   position: relative;
   border-radius: 28px;
   overflow: hidden;
   cursor: pointer;
   transition: all 0.3s ease;
   box-shadow: 0 12px 24px -10px rgba(0, 0, 0, 0.08);
 }

 .masonry-item:hover {
   transform: translateY(-4px);
   box-shadow: 0 20px 30px -12px rgba(0, 0, 0, 0.15);
 }

 .masonry-img {
   width: 100%;
   display: block;
   transition: transform 0.5s ease;
   border-radius: 28px;
 }

 .masonry-item:hover .masonry-img {
   transform: scale(1.02);
 }

 /* overlay info (elegant) */
 .item-info {
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
   padding: 24px 20px 16px;
   color: white;
   opacity: 0;
   transform: translateY(20px);
   transition: all 0.3s ease;
   border-radius: 0 0 28px 28px;
 }

 .masonry-item:hover .item-info {
   opacity: 1;
   transform: translateY(0);
 }

 .item-info h4 {
   font-family: 'Playfair Display', serif;
   font-size: 1.3rem;
   font-weight: 600;
   margin-bottom: 4px;
 }

 .item-info p {
   font-size: 12px;
   opacity: 0.9;
 }

 .badge-category {
   position: absolute;
   top: 16px;
   left: 16px;
   background: #d4af37;
   color: #1f1b12;
   font-size: 10px;
   font-weight: 700;
   padding: 5px 12px;
   border-radius: 40px;
   letter-spacing: 0.5px;
   z-index: 2;
   box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
 }

 /* fullscreen overlay (lightbox) */
 .fullscreen-overlay {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, 0.94);
   backdrop-filter: blur(12px);
   z-index: 1000;
   display: flex;
   align-items: center;
   justify-content: center;
   visibility: hidden;
   opacity: 0;
   transition: visibility 0.2s, opacity 0.2s;
 }

 .fullscreen-overlay.active {
   visibility: visible;
   opacity: 1;
 }

 .fs-container {
   max-width: 90vw;
   max-height: 85vh;
   position: relative;
 }

 .fs-image {
   width: auto;
   max-width: 100%;
   max-height: 85vh;
   border-radius: 24px;
   box-shadow: 0 25px 45px rgba(0, 0, 0, 0.3);
   border: 2px solid rgba(212, 175, 55, 0.4);
 }

 .fs-close {
   position: absolute;
   top: -45px;
   right: -10px;
   background: none;
   border: none;
   font-size: 36px;
   color: #d4af37;
   cursor: pointer;
   transition: transform 0.2s;
 }

 .fs-close:hover {
   transform: scale(1.1);
 }

 .fs-caption {
   text-align: center;
   margin-top: 20px;
   color: #f5e2b0;
   font-size: 14px;
   font-weight: 500;
 }
 

 /* responsive columns */
 @media (max-width: 1100px) {
   .masonry-grid {
     column-count: 2;
   }
   
.product-spec {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
}
 }

 @media (max-width: 600px) {
   .masonry-grid {
     column-count: 1;
   }

   .gallery-showcase.container {
     padding: 0 20px;
   }

   .gallery-head h2 {
     font-size: 2.2rem;
   }
 }







 /* ========== BLOG SECTION – LIGHT & SOPHISTICATED ========== */
 .blog-section {
   background: linear-gradient(145deg, #ffffff 0%, #fefaf5 100%);
   padding: 80px 0;
   position: relative;
 }

 .blog-section .container {

   margin: 0 auto;
   padding: 0 28px;
 }

 /* header */
 .blog-header {
   text-align: center;
   margin-bottom: 56px;
 }

 .blog-header h2 {
   font-family: 'Playfair Display', serif;
   font-size: 2.8rem;
   font-weight: 700;
   background: linear-gradient(135deg, #2c2418 0%, #9b7a3e 100%);
   background-clip: text;
   -webkit-background-clip: text;
   color: transparent;
   letter-spacing: -0.3px;
 }

 .blog-header h2 span {
   background: none;
   color: #b8860b;
   border-bottom: 2px solid #d4af37;
   display: inline-block;
   padding-bottom: 6px;
 }

 .blog-header p {
   color: #6b5a46;
   font-size: 1rem;
   margin-top: 16px;
   max-width: 580px;
   margin-left: auto;
   margin-right: auto;
 }

 /* blog grid */
 .blog-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
   gap: 36px;
 }

 /* blog card */
 .blog-card {
   background: #ffffff;
   border-radius: 28px;
   overflow: hidden;
   transition: all 0.35s cubic-bezier(0.2, 0.9, 0.4, 1.1);
   box-shadow: 0 12px 28px -8px rgba(0, 0, 0, 0.05);
   border: 1px solid #f0e9df;
 }

 .blog-card:hover {
   transform: translateY(-8px);
   box-shadow: 0 28px 38px -14px rgba(0, 0, 0, 0.12);
   border-color: #e0cfb2;
 }

 .blog-img {
   position: relative;
   overflow: hidden;
   height: 220px;
 }

 .blog-img img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform 0.4s ease;
 }

 .blog-card:hover .blog-img img {
   transform: scale(1.05);
 }

 .blog-category {
   position: absolute;
   bottom: 16px;
   left: 16px;
   background: #d4af37;
   color: #1f1b12;
   font-size: 11px;
   font-weight: 700;
   padding: 5px 14px;
   border-radius: 40px;
   letter-spacing: 0.5px;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
   z-index: 2;
 }

 .blog-content {
   padding: 24px 24px 28px;
 }

 .blog-meta {
   display: flex;
   align-items: center;
   gap: 16px;
   margin-bottom: 12px;
   font-size: 12px;
   color: #9b8c6f;
 }

 .blog-meta i {
   margin-right: 4px;
   font-size: 12px;
   color: #d4af37;
 }

 .blog-title {
   font-family: 'Playfair Display', serif;
   font-size: 1.5rem;
   font-weight: 700;
   color: #2e2a22;
   margin-bottom: 12px;
   line-height: 1.3;
 }

 .blog-excerpt {
   font-size: 14px;
   color: #6f6452;
   line-height: 1.5;
   margin-bottom: 20px;
 }

 .read-more {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   background: transparent;
   border: none;
   font-weight: 600;
   font-size: 13px;
   color: #b8860b;
   cursor: pointer;
   transition: all 0.2s;
   padding: 0;
   text-decoration: none;
 }

 .read-more i {
   font-size: 14px;
   transition: transform 0.2s;
 }

 .read-more:hover {
   color: #8b6914;
   gap: 14px;
 }

 .read-more:hover i {
   transform: translateX(4px);
 }

 /* responsive */
 @media (max-width: 750px) {

   .blog-grid {
     gap: 24px;
   }

   .blog-header h2 {
     font-size: 2.2rem;
   }

   .blog-title {
     font-size: 1.3rem;
   }
 }








 /* ========== FOOTER  ========== */
 .footer-custom {
   background: var(--charcoal);
   /* deep dark base */
   color: var(--warm-light);
   border-top: 2px solid var(--gold);
   margin-top: auto;
 }

 .footer-inner {
   max-width: 1280px;
   margin: 0 auto;
   padding: 3rem 2rem 2rem;
 }

 /* grid layout: 4 columns responsive */
 .footer-grid {
   display: grid;
   grid-template-columns: 1.2fr 0.8fr 2.0fr 1.2fr;
   gap: 2rem;
   margin-bottom: 2.5rem;
 }

 /* brand column */
 .brand-area .footer-logo {
   font-size: 1.9rem;
   font-weight: 700;
   letter-spacing: -0.02em;
   background: linear-gradient(130deg, var(--gold-light), var(--gold));
   background-clip: text;
   -webkit-background-clip: text;
   color: transparent;
   display: inline-block;
   margin-bottom: 1rem;
 }

 .brand-area .footer-logo img {
   width: 150px;
 }

 .brand-description {
   color: var(--warm);
   line-height: 1.5;
   font-size: 0.9rem;
   margin-bottom: 1.2rem;
 }

 .contact-info-item {
   display: flex;
   align-items: center;
   gap: 0.7rem;
   font-size: 0.85rem;
   color: var(--warm-light);
   margin-bottom: 0.7rem;
 }

 .contact-info-item i {
   color: var(--gold);
   width: 1.3rem;
   font-size: 0.95rem;
 }

 /* footer headings */
 .footer-nav h4 {
   color: var(--gold-light);
   font-weight: 600;
   font-size: 1rem;
   margin-bottom: 1.3rem;
   letter-spacing: -0.2px;
   position: relative;
   display: inline-block;
 }

 .footer-nav h4:after {
   content: '';
   position: absolute;
   bottom: -6px;
   left: 0;
   width: 32px;
   height: 2px;
   background: var(--gold);
   border-radius: 2px;
 }

 .footer-nav ul {
   list-style: none;
   padding: 0;
 }

 .footer-nav li {
   margin-bottom: 0.65rem;
 }

 .footer-nav a {
   text-decoration: none;
   color: var(--warm);
   font-size: 0.85rem;
   transition: all 0.2s ease;
   display: inline-flex;
   align-items: center;
   gap: 6px;
 }

 .footer-nav a i {
   font-size: 0.7rem;
   color: var(--gold);
   opacity: 0.7;
 }

 .footer-nav a:hover {
   color: var(--gold-light);
   transform: translateX(4px);
 }

 .footer-nav a:hover i {
   opacity: 1;
   transform: translateX(2px);
 }

 /* newsletter and social area */
 .newsletter-area p {
   font-size: 0.85rem;
   color: var(--warm);
   margin-bottom: 1rem;
 }

 .newsletter-group {
   display: flex;
   background: rgba(255, 255, 255, 0.05);
   border: 1px solid var(--warm-deep);
   border-radius: 60px;
   padding: 0.2rem 0.2rem 0.2rem 1rem;
   transition: all 0.2s;
   margin-bottom: 1.5rem;
 }

 .newsletter-group:focus-within {
   border-color: var(--gold);
   box-shadow: 0 0 0 2px rgba(201, 169, 110, 0.25);
   background: rgba(0, 0, 0, 0.2);
 }

 .newsletter-group input {
   flex: 1;
   background: transparent;
   border: none;
   padding: 0.7rem 0;
   font-size: 0.85rem;
   outline: none;
   color: var(--white);
   font-family: 'Inter', sans-serif;
 }

 .newsletter-group input::placeholder {
   color: var(--warm-deep);
 }

 .subscribe-btn {
   background: var(--gold);
   border: none;
   border-radius: 60px;
   padding: 0.5rem 1.3rem;
   font-weight: 500;
   font-size: 0.8rem;
   color: var(--charcoal);
   cursor: pointer;
   transition: all 0.2s;
   display: inline-flex;
   align-items: center;
   gap: 6px;
   font-family: 'Inter', sans-serif;
 }

 .subscribe-btn i {
   font-size: 0.7rem;
 }

 .subscribe-btn:hover {
   background: var(--gold-dark);
   color: var(--white);
   transform: scale(0.97);
 }

 .social-icons {
   display: flex;
   gap: 1rem;
   flex-wrap: wrap;
   margin-top: 0.5rem;
 }

 .social-icons a {
   background: rgba(255, 255, 255, 0.05);
   width: 36px;
   height: 36px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   border-radius: 50%;
   color: var(--warm-light);
   font-size: 1.1rem;
   transition: all 0.25s;
 }

 .social-icons a:hover {
   background: var(--gold);
   color: var(--charcoal);
   transform: translateY(-3px);
 }

 /* bottom bar */
 .footer-bottom {
   border-top: 1px solid rgba(167, 139, 110, 0.25);
   padding-top: 1.8rem;
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
   align-items: center;
   gap: 1rem;
   font-size: 0.8rem;
 }

 .copyright {
   color: var(--warm-deep);
 }

 .legal-links {
   display: flex;
   gap: 1.8rem;
   flex-wrap: wrap;
 }

 .legal-links a {
   color: var(--warm);
   text-decoration: none;
   transition: color 0.2s;
 }

 .legal-links a:hover {
   color: var(--gold-light);
 }

 .heart {
   color: var(--gold);
 }

 /* responsive adjustments */
 @media screen and (max-width: 960px) {
   .footer-grid {
     grid-template-columns: repeat(2, 1fr);
     gap: 2rem;
   }
 }

 @media screen and (max-width: 640px) {
   .footer-grid {
     grid-template-columns: 1fr;
     gap: 2rem;
   }

   .footer-inner {
     padding:2rem .5rem 1.8rem; 
   }

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

   .legal-links {
     justify-content: center;
   }
 }



 /* about css  */

 /* ── SHARED ── */
 .gold-rule {
   width: 50px;
   height: 1px;
   background: var(--gold);
   margin: 1.4rem 0;
 }

 .gold-rule--center {
   margin-left: auto;
   margin-right: auto;
 }

 .gold-rule--dk {
   background: var(--gold-dark);
 }

 .lbl-dk {
   font-size: 0.68rem;
   letter-spacing: 0.32em;
   text-transform: uppercase;
   color: var(--gold);
   margin-bottom: 0.9rem;
 }

 .ttl-dk {
   font-family: 'Cormorant Garamond', serif;
   font-size: clamp(2rem, 3.8vw, 3.2rem);
   font-weight: 300;
   line-height: 1.12;
   color: var(--white);
 }

 .ttl-dk em {
   font-style: italic;
   color: var(--gold-light);
 }

 .bdy-dk {
   font-size: 0.93rem;
   line-height: 2;
   color: var(--warm-light);
   max-width: 520px;
 }

 .lbl-lt {
   font-size: 0.68rem;
   letter-spacing: 0.32em;
   text-transform: uppercase;
   color: var(--gold-dark);
   margin-bottom: 0.9rem;
 }

 .ttl-lt {
   font-family: 'Cormorant Garamond', serif;
   font-size: clamp(2rem, 3.8vw, 3.2rem);
   font-weight: 300;
   line-height: 1.12;
   color: #fff;
 }

 .ttl-lt em {
   font-style: italic;
   color: var(--gold-dark);
 }

 .bdy-lt {
   font-size: 0.93rem;
   line-height: 2;
   color: #fff;
   max-width: 520px;
 }

 /* ══ 1. HERO · DARK ══ */
 .hero {
   height: 100vh;
   position: relative;
   display: flex;
   align-items: flex-end;
   justify-content: center;
   overflow: hidden;
   background: var(--black);
 }

 .hero-bg {
   position: absolute;
   inset: 0;
   background: linear-gradient(180deg, rgba(15, 15, 15, .25) 0%, rgba(15, 15, 15, .65) 55%, rgba(15, 15, 15, 1) 100%),
     url('https://images.unsplash.com/photo-1618220179428-22790b461013?w=1600&q=80') center/cover no-repeat;
   animation: heroZoom 16s ease-out forwards;
 }

 .hero-content {
   position: relative;
   text-align: center;
   padding: 0 2rem 8rem;
   animation: fadeUp 1.2s .3s both;
 }

 .hero-eyebrow {
   font-size: .7rem;
   letter-spacing: .3em;
   text-transform: uppercase;
   color: var(--gold);
   margin-bottom: 1.4rem;
 }

 .hero-title {
   font-family: 'Cormorant Garamond', serif;
   font-size: clamp(3rem, 8vw, 7rem);
   font-weight: 300;
   line-height: 1.05;
   color: var(--white);
   margin-bottom: 1.6rem;
 }

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

 .hero-sub {
   font-size: .88rem;
   letter-spacing: .08em;
   color: var(--warm-light);
   max-width: 400px;
   margin: 0 auto;
   line-height: 2;
 }

 .hero-rule {
   width: 60px;
   height: 1px;
   background: var(--gold);
   margin: 2rem auto 0;
 }

 /* ══ 2. STORY · LIGHT ══ */
 .story {
   display: grid;
   grid-template-columns: 1fr 1fr;
   min-height: 88vh;
 }

 .story-img {
   position: relative;
   overflow: hidden;
   background: var(--lt-bg-alt);
 }

 .story-img img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
   transition: transform .9s ease;
 }

 .story-img:hover img {
   transform: scale(1.05);
 }

 .story-img-tint {
   position: absolute;
   inset: 0;
   background: linear-gradient(135deg, rgba(201, 169, 110, .08) 0%, transparent 55%);
 }

 .story-text {
   background: #b28a5d87;
   padding: 7rem 5rem;
   display: flex;
   flex-direction: column;
   justify-content: center;
 }

 .decade-badge {
   display: inline-flex;
   align-items: center;
   gap: .6rem;
   border: 1px solid rgba(181, 142, 74, .5);
   padding: .45rem 1.1rem;
   font-size: .7rem;
   letter-spacing: .22em;
   text-transform: uppercase;
   color: var(--gold-dark);
   margin-bottom: 2.2rem;
   width: fit-content;
 }

 /* ══ 3. CRAFT · DARK ══ */
 .craft {
   padding: 8rem 4rem;
   background: var(--charcoal);
   position: relative;
 }

 .craft::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   height: 1px;
   background: linear-gradient(90deg, transparent, rgba(201, 169, 110, .4), transparent);
 }

 .craft-inner {
      /* max-width: 1200px; */

   margin: 0 auto;
 }

 .craft-layout {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 5rem;
   align-items: center;
 }

 .craft-imgs {
   display: grid;
   grid-template-columns: 1.2fr 1fr;
   grid-template-rows: 280px 210px;
   gap: 10px;
 }

 .craft-img {
   overflow: hidden;
   position: relative;
 }

 .craft-img img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
   transition: transform .7s ease;
 }

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

 .craft-img:first-child {
   grid-row: span 2;
 }

 .craft-img-lbl {
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   padding: .8rem 1rem;
   background: linear-gradient(0deg, rgba(15, 15, 15, .85) 0%, transparent 100%);
   font-size: .68rem;
   letter-spacing: .22em;
   text-transform: uppercase;
   color: var(--gold-light);
 }

 /* ══ 4. PILLARS · LIGHT ══ */
 .pillars {
   background: var(--lt-bg-alt);
   padding: 7rem 4rem;
   position: relative;
 }

 .pillars::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   height: 1px;
   background: linear-gradient(90deg, transparent, rgba(181, 142, 74, .35), transparent);
 }

 .pillars-inner {
      /* max-width: 1200px; */

   margin: 0 auto;
 }

 .pillars-hdr {
   text-align: center;
   margin-bottom: 4rem;
 }

 .pillars-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 1.5rem;
 }

 .pillar-card {
   background: var(--white);
   padding: 2.8rem 2.2rem;
   border: 1px solid var(--lt-border);
   position: relative;
   overflow: hidden;
   transition: box-shadow .4s, transform .3s;
 }

 .pillar-card::after {
   content: '';
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   height: 2px;
   background: var(--gold);
   transform: scaleX(0);
   transform-origin: left;
   transition: transform .5s ease;
 }

 .pillar-card:hover::after {
   transform: scaleX(1);
 }

 .pillar-card:hover {
   box-shadow: 0 12px 40px rgba(138, 122, 110, .15);
   transform: translateY(-3px);
 }

 .pillar-num {
   font-family: 'Cormorant Garamond', serif;
   font-size: 3.2rem;
   font-weight: 300;
   color: rgba(181, 142, 74, .2);
   line-height: 1;
   margin-bottom: 1rem;
   transition: color .4s;
 }

 .pillar-card:hover .pillar-num {
   color: rgba(181, 142, 74, .4);
 }

 .pillar-ttl {
   font-family: 'Cormorant Garamond', serif;
   font-size: 1.4rem;
   font-weight: 400;
   color: var(--lt-text);
   margin-bottom: .7rem;
 }

 .pillar-txt {
   font-size: .86rem;
   line-height: 1.9;
   color: var(--lt-text-muted);
 }

 /* ══ 5. PROCESS · DARK ══ */
 .process {
   padding: 8rem 4rem;
   background: var(--black);
 }

 .process-inner {
      /* max-width: 1200px; */

   margin: 0 auto;
   display: grid;
   grid-template-columns: 1fr 1.3fr;
   gap: 6rem;
   align-items: center;
 }

 .process-steps {
   display: flex;
   flex-direction: column;
   gap: 0;
   margin-top: 2.5rem;
 }

 .process-step {
   display: flex;
   gap: 1.4rem;
   align-items: flex-start;
   padding: 1.8rem 0;
   border-bottom: 1px solid rgba(175, 161, 149, .12);
 }

 .process-step:last-child {
   border-bottom: none;
 }

 .step-num {
   font-family: 'Cormorant Garamond', serif;
   font-size: 1rem;
   color: var(--gold);
   min-width: 28px;
   padding-top: 3px;
 }

 .step-content h4 {
   font-family: 'Cormorant Garamond', serif;
   font-size: 1.15rem;
   font-weight: 400;
   color: var(--white);
   margin-bottom: .35rem;
 }

 .step-content p {
   font-size: .86rem;
   line-height: 1.85;
   color: var(--warm);
 }

 .process-img {
   position: relative;
   height: 580px;
   overflow: hidden;
 }

 .process-img img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
 }

 .process-corner {
   position: absolute;
   bottom: 0;
   left: 0;
   width: 140px;
   height: 140px;
   border-left: 2px solid var(--gold);
   border-bottom: 2px solid var(--gold);
   pointer-events: none;
 }

 /* ══ 6. STATS · LIGHT ══ */
 .stats {
   background: var(--lt-bg);
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   border-top: 1px solid var(--lt-border);
   border-bottom: 1px solid var(--lt-border);
 }

 .stat-item {
   text-align: center;
   padding: 4rem 2rem;
   border-right: 1px solid var(--lt-border);
   transition: background .35s;
 }

 .stat-item:last-child {
   border-right: none;
 }

 .stat-item:hover {
   background: var(--lt-bg-alt);
 }

 .stat-num {
   font-family: 'Cormorant Garamond', serif;
   font-size: 3rem;
   font-weight: 300;
   color: var(--gold-dark);
   line-height: 1;
   margin-bottom: .6rem;
 }

 .stat-lbl {
   font-size: .7rem;
   letter-spacing: .22em;
   text-transform: uppercase;
   color: var(--lt-text-muted);
 }

 /* ══ 7. PHILOSOPHY · DARK ══ */
 .philosophy {
   padding: 9rem 4rem;
   background: var(--charcoal);
   text-align: center;
   position: relative;
   overflow: hidden;
 }

 .philosophy::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   height: 1px;
   background: linear-gradient(90deg, transparent, rgba(201, 169, 110, .4), transparent);
 }

 .philosophy-wm {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   font-family: 'Cormorant Garamond', serif;
   font-size: 18vw;
   font-weight: 300;
   color: rgba(201, 169, 110, .04);
   white-space: nowrap;
   pointer-events: none;
   user-select: none;
   letter-spacing: .1em;
 }

 .philosophy-inner {
   position: relative;
   max-width: 720px;
   margin: 0 auto;
 }

 .philosophy-quote {
   font-family: 'Cormorant Garamond', serif;
   font-size: clamp(1.55rem, 3.2vw, 2.5rem);
   font-weight: 300;
   font-style: italic;
   line-height: 1.5;
   color: var(--white);
   margin: 1.8rem 0 1.4rem;
 }

 .philosophy-quote span {
   color: var(--gold-light);
 }

 .philosophy-bdy {
   font-size: .92rem;
   line-height: 2;
   color: var(--warm-light);
 }

 /* ══ 8. GALLERY · LIGHT ══ */
 .gallery-sec {
   background: var(--lt-bg-alt);
   padding: 7rem 4rem;
 }

 .gallery-sec-inner {
      /* max-width: 1200px; */

   margin: 0 auto;
 }

 .gallery-hdr {
   margin-bottom: 3rem;
 }

 .gallery-grid {
   display: grid;
   grid-template-columns: 1.3fr 1fr 1fr;
   grid-template-rows: 360px 280px;
   gap: 4px;
 }

 .gallery-item {
   overflow: hidden;
   position: relative;
 }

 .gallery-item img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
   transition: transform .8s ease;
 }

 .gallery-item:hover img {
   transform: scale(1.08);
 }

 .gallery-item:first-child {
   grid-row: span 2;
 }

 .gallery-ovr {
   position: absolute;
   inset: 0;
   background: rgba(42, 34, 26, 0);
   transition: background .5s;
   display: flex;
   align-items: flex-end;
   padding: 1.2rem;
 }

 .gallery-item:hover .gallery-ovr {
   background: rgba(42, 34, 26, .42);
 }

 .gallery-cap {
   font-size: .7rem;
   letter-spacing: .22em;
   text-transform: uppercase;
   color: var(--warm-pale);
   opacity: 0;
   transform: translateY(6px);
   transition: opacity .4s, transform .4s;
 }

 .gallery-item:hover .gallery-cap {
   opacity: 1;
   transform: translateY(0);
 }

 /* ══ 9. WHY US · DARK ══ */
 .why {
   background: var(--black);
   padding: 8rem 4rem;
 }

 .why-inner {

   margin: 0 auto;
   display: flex; 
   flex-wrap: wrap;
   gap: 5rem;
   align-items: center;
 }

 .why-features {
   display: flex;
   flex-direction: column;
   gap: 1rem;
   margin-top: 2.2rem;
 }

 .why-feature {
   display: flex;
   gap: 1.2rem;
   align-items: flex-start;
   padding: 1.4rem;
   border: 1px solid rgba(201, 169, 110, .1);
   transition: border-color .4s, background .4s;
 }

 .why-feature:hover {
   border-color: rgba(201, 169, 110, .35);
   background: rgba(201, 169, 110, .04);
 }

 .why-icon {
   width: 30px;
   height: 30px;
   border: 1px solid rgba(201, 169, 110, .45);
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
   margin-top: 3px;
 }

 .why-icon svg {
   width: 13px;
   height: 13px;
   fill: var(--gold);
 }

 .why-ft-ttl {
   font-family: 'Cormorant Garamond', serif;
   font-size: 1.05rem;
   color: var(--white);
   margin-bottom: .25rem;
 }

 .why-ft-txt {
   font-size: .85rem;
   line-height: 1.85;
   color: var(--warm);
 }

 .why-img {
   position: relative;
   height: 580px;
 }

 .why-img img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
 }

 .why-frame {
   position: absolute;
   top: -10px;
   right: -10px;
   bottom: 10px;
   left: 10px;
   border: 1px solid rgba(201, 169, 110, .28);
   pointer-events: none;
   z-index: -1;
 }

 /* ══ 10. CTA · LIGHT ══ */
 .cta {
   padding: 8rem 4rem;
   background: var(--lt-bg);
   text-align: center;
   position: relative;
 }

 .cta::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   height: 1px;
   background: linear-gradient(90deg, transparent, rgba(181, 142, 74, .4), transparent);
 }

 .cta-inner {
   max-width: 640px;
   margin: 0 auto;
 }

 .cta-bdy {
   font-size: .92rem;
   line-height: 2;
   color: var(--lt-text-muted);
   margin: 0 auto;
 }

 .cta-btn {
   display: inline-block;
   margin-top: 2.5rem;
   padding: .95rem 3rem;
   border: 1px solid var(--gold-dark);
   font-size: .73rem;
   letter-spacing: .26em;
   text-transform: uppercase;
   color: var(--gold-dark);
   text-decoration: none;
   transition: background .4s, color .4s;
 }

 .cta-btn:hover {
   background: var(--gold-dark);
   color: var(--white);
 }

 /* about css  */









 /* enuiry section  */
 /* ══════════════════════════
   ① HERO BANNER · DARK
══════════════════════════ */

 /* ========== RENAMED HERO SECTION ========== */
 .consult-hero {
   height: 62vh;
   min-height: 480px;
   position: relative;
   display: flex;
   align-items: flex-end;
   overflow: hidden;
   background: var(--black);
 }

 /* Background image + gradient overlay */
 .consult-hero-bg {
   position: absolute;
   inset: 0;
   background:
     linear-gradient(180deg, rgba(15, 15, 15, .2) 0%, rgba(15, 15, 15, .6) 50%, rgba(15, 15, 15, 1) 100%),
     url('https://images.unsplash.com/photo-1618220179428-22790b461013?w=1600&q=80') center/cover no-repeat;
   animation: heroZoom 14s ease-out forwards;
 }

 @keyframes heroZoom {
   0% {
     transform: scale(1);
   }

   100% {
     transform: scale(1.08);
   }
 }

 /* Content container */
 .consult-hero-content {
   position: relative;
   width: 100%;
      /* max-width: 1200px; */

   margin: 0 auto;
   padding: 0 4rem 5rem;
   animation: fadeUp 1s 0.2s both;
 }

 @keyframes fadeUp {
   from {
     opacity: 0;
     transform: translateY(30px);
   }

   to {
     opacity: 1;
     transform: translateY(0);
   }
 }

 /* Breadcrumb */
 .consult-hero-breadcrumb {
   display: flex;
   align-items: center;
   gap: 0.6rem;
   font-size: 0.68rem;
   letter-spacing: 0.22em;
   text-transform: uppercase;
   color: var(--warm);
   margin-bottom: 1.2rem;
   flex-wrap: wrap;
 }

 .consult-hero-breadcrumb span {
   color: var(--gold);
 }
 .hero-breadcrumb span{
   color: var(--gold);

 }

 .consult-hero-breadcrumb-sep {
   color: rgba(175, 161, 149, 0.4);
 }

 /* Title */
 .consult-hero-title {
   font-family: 'Cormorant Garamond', serif;
   font-size: clamp(2.4rem, 6vw, 5rem);
   font-weight: 300;
   line-height: 1.05;
   color: var(--white);
 }

 .consult-hero-title em {
   font-style: italic;
   color: var(--gold-light);
 }

 /* Decorative rule */
 .consult-hero-rule {
   width: 60px;
   height: 1px;
   background: var(--gold);
   margin: 1.6rem 0 0;
 }

 .mob-toggle-custom{
  display: none;
 }

 /* ========== RESPONSIVE ADJUSTMENTS ========== */
 @media (max-width: 768px) {
   .consult-hero {
     height: 55vh;
     /* slightly shorter on tablets */
     min-height: 420px;
     align-items: center;
     /* center content vertically on smaller screens */
   }
   .stats {
    background: var(--lt-bg);
    display: grid;
    
   grid-template-columns: repeat(2, 1fr);
   }

   .consult-hero-content {
     padding: 0 2rem 3rem;
   }

   .consult-hero-breadcrumb {
     font-size: 0.6rem;
     gap: 0.4rem;
     margin-bottom: 1rem;
   }

   .consult-hero-title {
     font-weight: 400;
     letter-spacing: -0.01em;
   }

   .consult-hero-rule {
     margin: 1.2rem 0 0;
     width: 48px;
   }
 }

 @media (max-width: 480px) {
   .consult-hero {
     height: 65vh;
     /* more height for very small devices to avoid crowding */
     min-height: 380px;
     align-items: flex-end;
     /* back to bottom alignment for better readability */
   }

   .consult-hero-content {
     padding: 0 1.5rem 2.5rem;
   }

   .consult-hero-breadcrumb {
     font-size: 0.55rem;
     letter-spacing: 0.2em;
   }

   .consult-hero-title {
     font-size: clamp(1.8rem, 7vw, 2.8rem);
     line-height: 1.2;
   }
 }

 /* Optional: maintain animation performance */
 @media (prefers-reduced-motion: reduce) {
   .consult-hero-bg {
     animation: none;
   }

   .consult-hero-content {
     animation: none;
     opacity: 1;
     transform: none;
   }
 }

 /* ══════════════════════════
   ② PRODUCT SPOTLIGHT · LIGHT
══════════════════════════ */
 .product-sec {
   background: var(--lt-bg);
   padding: 7rem 4rem;
   position: relative;
 }

 .product-sec::after {
   content: '';
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   height: 1px;
   background: linear-gradient(90deg, transparent, rgba(181, 142, 74, .3), transparent);
 }

 .product-inner { 
   margin: 0 auto;
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 5rem;
   align-items: start;
 }

 .product-gallery {
   position: relative;
 }

 .product-main-img {
   position: relative;
   overflow: hidden;
   aspect-ratio: 4/5;
 }

 .product-main-img img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
   transition: transform .9s ease;
 }

 .product-main-img:hover img {
   transform: scale(1.04);
 }

 .product-img-badge {
   position: absolute;
   top: 1.2rem;
   left: 1.2rem;
   background: var(--black);
   color: var(--gold);
   font-size: .62rem;
   letter-spacing: .22em;
   text-transform: uppercase;
   padding: .4rem .9rem;
 }

 .product-thumbs {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 8px;
   margin-top: 8px;
 }

 .product-thumb {
   overflow: hidden;
   aspect-ratio: 1;
   cursor: pointer;
   opacity: .65;
   transition: opacity .3s;
   border: 1px solid transparent;
 }

 .product-thumb.active,
 .product-thumb:hover {
   opacity: 1;
   border-color: var(--gold-dark);
 }

 .product-thumb img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
 }

 .product-details {
   padding-top: 1rem;
 }

 .product-category {
   font-size: .67rem;
   letter-spacing: .28em;
   text-transform: uppercase;
   color: var(--gold-dark);
   margin-bottom: .7rem;
 }

 .product-name {
   font-family: 'Cormorant Garamond', serif;
   font-size: clamp(1.8rem, 3.5vw, 2.8rem);
   font-weight: 400;
   line-height: 1.1;
   color: var(--lt-text);
   margin-bottom: .5rem;
 }

 .product-sub {
   font-size: .85rem;
   letter-spacing: .08em;
   color: var(--lt-text-muted);
   margin-bottom: 1.5rem;
 }

 .product-price-row {
   display: flex;
   align-items: baseline;
   gap: 1rem;
   margin-bottom: 1.8rem;
   padding-bottom: 1.8rem;
   border-bottom: 1px solid var(--lt-border);
 }

 .product-price {
   font-family: 'Cormorant Garamond', serif;
   font-size: 2.2rem;
   font-weight: 400;
   color: var(--lt-text);
 }

 .product-price-note {
   font-size: .75rem;
   letter-spacing: .1em;
   color: var(--lt-text-muted);
 }

 .product-tags {
   display: flex;
   flex-wrap: wrap;
   gap: .6rem;
   margin-bottom: 1.8rem;
 }

 .product-tag {
   font-size: .65rem;
   letter-spacing: .15em;
   text-transform: uppercase;
   padding: .35rem .8rem;
   border: 1px solid var(--lt-border);
   color: var(--lt-text-muted);
 }

 .product-specs {
   display: flex;
   flex-direction: column;
   gap: 0;
 }

 .product-spec {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: .85rem 0;
   border-bottom: 1px solid var(--lt-border);
 }

 .product-spec:first-child {
   border-top: 1px solid var(--lt-border);
 }

 .spec-key {
   font-size: .72rem;
   letter-spacing: .18em;
   text-transform: uppercase;
   color: var(--lt-text-muted);
 }

 .spec-val {
   font-size: .88rem;
   color: var(--lt-text);
   font-weight: 400;
 }




 /* ══════════════════════════
   ③ WHY ENQUIRE · DARK
══════════════════════════ */
 .why-enquire {
   background: var(--charcoal);
   padding: 6rem 4rem;
   position: relative;
 }

 .why-enquire::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   height: 1px;
   background: linear-gradient(90deg, transparent, rgba(201, 169, 110, .4), transparent);
 }

 .why-inner {
   margin: 0 auto;
 }

 .why-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 1.5rem;
   margin-top: 3.5rem;
 }

 .why-card {
   padding: 2.2rem 1.8rem;
   border: 1px solid rgba(201, 169, 110, .1);
   position: relative;
   overflow: hidden;
   transition: border-color .4s, background .4s;
 }

 .why-card::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   height: 1px;
   background: var(--gold);
   transform: scaleX(0);
   transform-origin: left;
   transition: transform .5s;
 }

 .why-card:hover::before {
   transform: scaleX(1);
 }

 .why-card:hover {
   border-color: rgba(201, 169, 110, .28);
   background: rgba(201, 169, 110, .04);
 }

 .why-card-icon {
   width: 38px;
   height: 38px;
   border: 1px solid rgba(201, 169, 110, .35);
   display: flex;
   align-items: center;
   justify-content: center;
   margin-bottom: 1.2rem;
 }

 .why-card-icon svg {
   width: 16px;
   height: 16px;
   fill: var(--gold);
 }

 .why-card-ttl {
   font-family: 'Cormorant Garamond', serif;
   font-size: 1.1rem;
   color: var(--white);
   margin-bottom: .5rem;
 }

 .why-card-txt {
   font-size: .83rem;
   line-height: 1.85;
   color: var(--warm);
 }


 @media (max-width:760px) {
   .product-inner { 
   margin: 0 auto;
   display: grid;
   grid-template-columns: 1fr;
   }

   .product-sec { 
    padding: 5rem  1rem; 
}
.form-sec { 
    padding: 2rem 1rem !important;
}

.form-inner { 
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr !important;
    gap: 5rem;
    align-items: start;
}

.form-aside{
  display: none;
}


 }

 /* ══════════════════════════
   ④ ENQUIRY FORM · LIGHT
══════════════════════════ */
 .form-sec {
   background: var(--charcoal);
   padding: 7rem 4rem;
 }

 .form-inner {
      /* max-width: 1200px; */

   margin: 0 auto;
   display: grid;
   grid-template-columns: 1fr 1.5fr;
   gap: 5rem;
   align-items: start;
 }

 .form-aside {
   position: sticky;
   top: 8rem;
 }

 .form-aside-img {
   position: relative;
   overflow: hidden;
   aspect-ratio: 3/4;
   margin-bottom: 2rem;
 }

 .form-aside-img img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
 }

 .form-aside-img-corner {
   position: absolute;
   bottom: 0;
   right: 0;
   width: 80px;
   height: 80px;
   border-right: 2px solid var(--gold-dark);
   border-bottom: 2px solid var(--gold-dark);
   pointer-events: none;
 }

 .form-contact-list {
   display: flex;
   flex-direction: column;
   gap: 1rem;
 }

 .form-contact-item {
   display: flex;
   gap: .9rem;
   align-items: flex-start;
 }

 .form-contact-icon {
   width: 28px;
   height: 28px;
   border: 1px solid var(--lt-border);
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
   margin-top: 2px;
 }

 .form-contact-icon svg {
   width: 12px;
   height: 12px;
   fill: var(--gold-dark);
 }

 .form-contact-label {
   font-size: .65rem;
   letter-spacing: .2em;
   text-transform: uppercase;
   color: #fff;
   margin-bottom: .2rem;
 }

 .form-contact-val {
   font-size: .88rem;
   color: #fff;

 }

 /* ── FORM ITSELF ── */
 .enquiry-form {
   background: var(--white);
   padding: 3rem 2rem 2.5rem ;
   border: 1px solid var(--lt-border);
 }

 .form-title {
   font-family: 'Cormorant Garamond', serif;
   font-size: 1.8rem;
   font-weight: 400;
   color: var(--lt-text);
   margin-bottom: .4rem;
 }

 .form-subtitle {
   font-size: .83rem;
   color: var(--lt-text-muted);
   margin-bottom: 2.5rem;
   line-height: 1.7;
 }

 .form-row {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 1.2rem;
 }

 .form-group {
   margin-bottom: 1.5rem;
   position: relative;
 }

 .form-label {
   display: block;
   font-size: .67rem;
   letter-spacing: .2em;
   text-transform: uppercase;
   color: black;
   margin-bottom: .6rem;
   transition: color .3s;
 }

 .form-label .req {
   color: var(--gold-dark);
   margin-left: .2rem;
 }

 .form-input,
 .form-select,
 .form-textarea {
   width: 100%;
   font-family: 'Jost', sans-serif;
   font-weight: 300;
   font-size: .9rem;
   color: var(--lt-text);
   background: transparent;
   border: none;
   border-bottom: 1px solid var(--lt-border);
   padding: .7rem 0;
   outline: none;
   transition: border-color .3s;
   appearance: none;
   -webkit-appearance: none;
 }

 .form-select {
   cursor: pointer;
   background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23B58E4A'/%3E%3C/svg%3E") no-repeat right .2rem center;
   padding-right: 1.5rem;
 }

 .form-textarea {
   resize: vertical;
   min-height: 110px;
   padding-top: .7rem;
   line-height: 1.7;
 }

 .form-input:focus,
 .form-select:focus,
 .form-textarea:focus {
   border-color: var(--gold-dark);
 }

 .form-group:focus-within .form-label {
   color: var(--gold-dark);
 }

 /* validation states */
 .form-input.is-error,
 .form-select.is-error,
 .form-textarea.is-error {
   border-color: var(--error);
 }

 .form-group:focus-within .form-input.is-error,
 .form-group:focus-within .form-select.is-error,
 .form-group:focus-within .form-textarea.is-error {
   border-color: var(--error);
 }

 .form-group.is-valid .form-input,
 .form-group.is-valid .form-select,
 .form-group.is-valid .form-textarea {
   border-color: var(--success);
 }

 .form-error-msg {
   display: none;
   font-size: .72rem;
   color: var(--error);
   margin-top: .4rem;
   letter-spacing: .03em;
   animation: slideDown .2s ease;
 }

 .form-group.show-error .form-error-msg {
   display: block;
 }

 .form-valid-tick {
   position: absolute;
   right: 0;
   top: 2.35rem;
   width: 14px;
   height: 14px;
   opacity: 0;
   transition: opacity .3s;
 }

 .form-valid-tick svg {
   width: 14px;
   height: 14px;
 }

 .form-group.is-valid .form-valid-tick {
   opacity: 1;
   animation: checkPop .3s ease;
 }

 /* checkboxes */
 .form-check-group {
   display: flex;
   flex-direction: column;
   gap: .7rem;
   margin-bottom: 1.5rem;
 }

 .form-check {
   display: flex;
   align-items: center;
   gap: .75rem;
   cursor: pointer;
 }

 .form-check input[type=checkbox] {
   display: none;
 }

 .check-box {
   width: 16px;
   height: 16px;
   border: 1px solid var(--lt-border);
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
   transition: border-color .3s, background .3s;
 }

 .form-check input[type=checkbox]:checked+.check-box {
   background: var(--gold-dark);
   border-color: var(--gold-dark);
 }

 .check-box::after {
   content: '';
   width: 8px;
   height: 8px;
   background: var(--white);
   clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
   opacity: 0;
   transition: opacity .2s;
 }

 .form-check input[type=checkbox]:checked+.check-box::after {
   opacity: 1;
 }

 .check-label {
   font-size: .83rem;
   color: var(--lt-text-muted);
 }

 /* submit btn */
 .form-submit-wrap {
   margin-top: 2rem;
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 1.5rem;
 }

 .form-submit-btn {
   display: inline-flex;
   align-items: center;
   gap: .8rem;
   padding: 1rem 2.8rem;
   background: var(--black);
   color: var(--gold-light);
   font-family: 'Jost', sans-serif;
   font-size: .73rem;
   letter-spacing: .25em;
   text-transform: uppercase;
   border: none;
   cursor: pointer;
   transition: background .4s, color .4s;
   position: relative;
   overflow: hidden;
 }

 .form-submit-btn::after {
   content: '';
   position: absolute;
   inset: 0;
   background: var(--gold-dark); 
   transform: scaleX(0);
   transform-origin: left;
   transition: transform .4s ease;
   z-index: 0;
 }

 .form-submit-btn:hover::after {
   transform: scaleX(1);
 }

 .form-submit-btn span,
 .form-submit-btn svg {
   position: relative;
   z-index: 1;
 }

 .form-submit-btn svg {
   width: 14px;
   height: 14px;
   fill: none;
   stroke: currentColor;
   stroke-width: 1.5;
 }

 .form-submit-note {
   font-size: .75rem;
   color: var(--lt-text-muted);
   line-height: 1.6;
 }

 /* success state */
 .form-success {
   display: none;
   text-align: center;
   padding: 3rem 2rem;
 }

 .form-success.visible {
   display: block;
   animation: fadeUp .5s ease;
 }

 .success-circle {
   width: 72px;
   height: 72px;
   border: 1px solid var(--success);
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   margin: 0 auto 1.5rem;
   animation: checkPop .5s .1s both;
 }

 .success-circle svg {
   width: 28px;
   height: 28px;
   fill: none;
   stroke: var(--success);
   stroke-width: 1.5;
 }

 .success-title {
   font-family: 'Cormorant Garamond', serif;
   font-size: 1.8rem;
   color: var(--lt-text);
   margin-bottom: .6rem;
 }

 .success-msg {
   font-size: .88rem;
   line-height: 1.85;
   color: var(--lt-text-muted);
 }

 /* ══════════════════════════
   ⑤ TESTIMONIALS · DARK
══════════════════════════ */

 /* section base (same as original, but with refined responsive padding) */
 .testimonials {
   background: var(--black);
   padding: 6rem 4rem;
   position: relative;
   overflow: hidden;
 }

 .testimonials::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   height: 1px;
   background: linear-gradient(90deg, transparent, rgba(201, 169, 110, .4), transparent);
 }

 .test-inner {
   max-width: 1400px;
   margin: 0 auto;
   position: relative;
 }

 /* labels & headings (consistent with luxury dark aesthetic) */
 .lbl-dk {
   font-size: 0.75rem;
   letter-spacing: 0.2em;
   text-transform: uppercase;
   color: var(--gold);
   margin-bottom: 0.75rem;
   font-weight: 400;
   opacity: 0.85;
 }

 .ttl-dk {
   font-size: 2.8rem;
   font-family: 'Cormorant Garamond', serif;
   font-weight: 400;
   color: var(--white);
   margin: 0 0 0.75rem 0;
   line-height: 1.2;
 }

 .ttl-dk em {
   font-style: italic;
   color: var(--gold);
   font-weight: 500;
 }

 /* ---------- TESTIMONIAL CARD (enhanced, same original style) ---------- */
 .test-card {
   padding: 2.5rem 2rem;
   border: 1px solid rgba(201, 169, 110, 0.12);
   position: relative;
   transition: border-color 0.4s ease, transform 0.3s ease;
   background: rgba(10, 10, 10, 0.7);
   backdrop-filter: blur(0px);
   height: 100%;
   display: flex;
   flex-direction: column;
   border-radius: 2px;
 }

 .test-card:hover {
   border-color: rgba(201, 169, 110, 0.32);
   background: rgba(15, 15, 15, 0.9);
 }

 .test-stars {
   display: flex;
   gap: 4px;
   margin-bottom: 1.2rem;
 }

 .test-star {
   width: 12px;
   height: 12px;
   background: var(--gold);
   clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
 }

 .test-quote {
   font-family: 'Cormorant Garamond', serif;
   font-size: 1.1rem;
   font-style: italic;
   line-height: 1.65;
   color: var(--warm-light);
   margin-bottom: 1.5rem;
   flex: 1;
 }

 .test-author {
   display: flex;
   align-items: center;
   gap: 0.8rem;
   margin-top: 0.5rem;
 }

 .test-avatar {
   width: 42px;
   height: 42px;
   border-radius: 50%;
   overflow: hidden;
   border: 1px solid rgba(201, 169, 110, 0.4);
 }

 .test-avatar img {
   width: 100%;
   height: 100%;
   object-fit: cover;
 }

 .test-name {
   font-size: 0.85rem;
   color: var(--white);
   font-weight: 500;
   letter-spacing: 0.01em;
   margin-bottom: 0.2rem;
 }

 .test-loc {
   font-size: 0.7rem;
   color: var(--warm-deep);
   letter-spacing: 0.08em;
   text-transform: uppercase;
 }

 .test-open-quote {
   position: absolute;
   top: 1.2rem;
   right: 1.8rem;
   font-family: 'Cormorant Garamond', serif;
   font-size: 4.2rem;
   color: rgba(201, 169, 110, 0.12);
   line-height: 1;
   pointer-events: none;
   transition: color 0.3s;
 }

 .test-card:hover .test-open-quote {
   color: rgba(201, 169, 110, 0.22);
 }

 /* ---------- OWL CAROUSEL CUSTOM OVERRIDES (responsiveness + elegance) ---------- */
 .testimonials-slider {
   margin-top: 2.5rem;
   position: relative;
 }

 /* spacing between cards - mimics original gap */
 .testimonials-slider .owl-item {
   padding: 0 12px;
 }

 /* remove default background on theme */
 .owl-theme .owl-nav {
   margin-top: 2.2rem;
 }

 .owl-theme .owl-nav [class*='owl-'] {
   background: transparent;
   border: 1px solid rgba(201, 169, 110, 0.5);
   border-radius: 50%;
   width: 44px;
   height: 44px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   font-size: 1.8rem;
   font-weight: 400;
   color: var(--gold);
   margin: 0 8px;
   transition: all 0.25s ease;
 }

 .owl-theme .owl-nav [class*='owl-']:hover {
   background: rgba(201, 169, 110, 0.12);
   border-color: var(--gold);
   color: var(--white);
   transform: scale(1.02);
 }

 /* dots styling — refined */
 .owl-theme .owl-dots .owl-dot span {
   background: rgba(201, 169, 110, 0.3);
   width: 8px;
   height: 8px;
   margin: 5px 6px;
   transition: all 0.2s;
 }

 .owl-theme .owl-dots .owl-dot.active span,
 .owl-theme .owl-dots .owl-dot:hover span {
   background: var(--gold);
   transform: scale(1.2);
   box-shadow: 0 0 6px rgba(201, 169, 110, 0.6);
 }

 .owl-theme .owl-dots {
   margin-top: 2rem;
 }

 /* prevent overflow on small devices */
 .owl-carousel .owl-stage-outer {
   overflow: visible;
 }

 /* ---------- RESPONSIVE FINE-TUNING (padding & layout) ---------- */
 @media (max-width: 1024px) {
   .testimonials {
     padding: 4rem 2rem;
   }

   .ttl-dk {
     font-size: 2.3rem;
   }
 }

 @media (max-width: 768px) {
   .testimonials {
     padding: 3rem 1.2rem;
   }

   .ttl-dk {
     font-size: 2rem;
   }

   .lbl-dk {
     font-size: 0.7rem;
   }

   .test-card {
     padding: 1.8rem 1.5rem;
   }

   .test-quote {
     font-size: 1rem;
   }

   .test-open-quote {
     font-size: 3.5rem;
     top: 1rem;
     right: 1.2rem;
   }

   .owl-theme .owl-nav [class*='owl-'] {
     width: 38px;
     height: 38px;
     font-size: 1.5rem;
   }
 }

 @media (max-width: 480px) {
   .testimonials {
     padding: 2.5rem 1rem;
   }

   .ttl-dk {
     font-size: 1.8rem;
   }

   .test-card {
     padding: 1.5rem 1.2rem;
   }

   .test-quote {
     font-size: 0.95rem;
   }

   .test-name {
     font-size: 0.8rem;
   }
 }



 /* ensure the carousel container respects spacing, no overflow */
 .owl-carousel .owl-item {
   display: flex;
   flex-direction: column;
   height: auto;
 }

 .test-card {
   height: 100%;
   width: 100%;
 }

 /* overwrite owl default margin on inner stage to mimic original grid gap perfectly */
 .testimonials-slider {
   margin-left: -12px;
   margin-right: -12px;
   width: calc(100% + 24px);
 }

 .testimonials-slider .owl-stage-outer {
   padding: 4px 0;
 }

 /* fix for very small screens: no horizontal scroll due to negative margin */
 @media (max-width: 600px) {
   .testimonials-slider {
     margin-left: 0px;
     margin-right: 0px;
     width: 100%;
   }

   .owl-carousel .owl-item {
     padding: 0 6px !important;
   }
 }

 /* preserve original spacing on larger screens */
 @media (min-width: 601px) {
   .owl-carousel .owl-item {
     padding: 0 12px !important;
   }
 }

 /* ensure that nav buttons and dots don't shift on small width */
 .owl-theme .owl-nav.disabled+.owl-dots {
   margin-top: 1.8rem;
 }

 /* fine-tune gold highlights */
 .test-card .test-star {
   opacity: 1;
 }

 /* ══════════════════════════
   ⑥ RELATED PRODUCTS · LIGHT
══════════════════════════ */
 .related {
   background: var(--lt-bg);
   padding: 6rem 4rem;
 }

 .related-inner {
      /* max-width: 1200px; */

   margin: 0 auto;
 }

 .related-hdr {
   display: flex;
   justify-content: space-between;
   align-items: flex-end;
   margin-bottom: 3rem;
 }

 .related-link {
   font-size: .72rem;
   letter-spacing: .2em;
   text-transform: uppercase;
   color: var(--gold-dark);
   text-decoration: none;
   border-bottom: 1px solid rgba(181, 142, 74, .4);
   padding-bottom: 2px;
   transition: border-color .3s;
 }

 .related-link:hover {
   border-color: var(--gold-dark);
 }

 .related-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 1.5rem;
 }

 .related-card {
   cursor: pointer;
 }

 .related-card-img {
   overflow: hidden;
   aspect-ratio: 4/5;
   position: relative;
   margin-bottom: 1rem;
 }

 .related-card-img img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
   transition: transform .7s ease;
 }

 .related-card:hover .related-card-img img {
   transform: scale(1.07);
 }

 .related-card-ovr {
   position: absolute;
   inset: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   background: rgba(42, 34, 26, 0);
   transition: background .4s;
 }

 .related-card:hover .related-card-ovr {
   background: rgba(42, 34, 26, .38);
 }

 .related-card-btn {
   font-size: .65rem;
   letter-spacing: .22em;
   text-transform: uppercase;
   color: var(--white);
   border: 1px solid rgba(255, 255, 255, .6);
   padding: .5rem 1.2rem;
   opacity: 0;
   transform: translateY(8px);
   transition: opacity .3s, transform .3s;
 }

 .related-card:hover .related-card-btn {
   opacity: 1;
   transform: translateY(0);
 }

 .related-card-name {
   font-family: 'Cormorant Garamond', serif;
   font-size: 1.15rem;
   color: var(--lt-text);
   margin-bottom: .25rem;
 }

 .related-card-price {
   font-size: .83rem;
   color: var(--gold-dark);
 }

 /* ══════════════════════════
   ⑦ CTA STRIP · DARK
══════════════════════════ */
 .cta-strip {
   background: var(--charcoal);
   padding: 5rem 4rem;
   text-align: center;
   position: relative;
 }

 .cta-strip::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   height: 1px;
   background: linear-gradient(90deg, transparent, rgba(201, 169, 110, .4), transparent);
 }

 .cta-strip-inner {
   max-width: 600px;
   margin: 0 auto;
 }

 .cta-strip-btns {
   display: flex;
   gap: 1rem;
   justify-content: center;
   margin-top: 2.5rem;
   flex-wrap: wrap;
 }

 .cta-btn-primary {
   display: inline-block;
   padding: 1rem 2.8rem;
   background: var(--gold);
   color: var(--black);
   font-size: .73rem;
   letter-spacing: .24em;
   text-transform: uppercase;
   text-decoration: none;
   transition: background .3s;
 }

 .cta-btn-primary:hover {
   background: var(--gold-light);
 }

 .cta-btn-outline {
   display: inline-block;
   padding: 1rem 2.8rem;
   border: 1px solid rgba(201, 169, 110, .5);
   color: var(--gold);
   font-size: .73rem;
   letter-spacing: .24em;
   text-transform: uppercase;
   text-decoration: none;
   transition: border-color .3s, color .3s;
 }

 .cta-btn-outline:hover {
   border-color: var(--gold);
   color: var(--gold-light);
 }

 /* enuiry section  */







 /* contact */




 /* ── PAGE WRAPPER (new parent class) ── */
 .contact-page-wrapper {
   position: relative;
   z-index: 2;
   margin: 0 auto;
   padding: 0 2rem;
 }

 /* ── HERO (renamed from .hero to .contact-hero) ── */
 .contact-hero {
   background: var(--charcoal);
   padding: 5rem 2rem 4rem;
   position: relative;
   overflow: hidden;
   margin-bottom: 2rem;
 }

 .contact-hero::before {
   content: '';
   position: absolute;
   top: -40%;
   right: -10%;
   width: 600px;
   height: 600px;
   border-radius: 50%;
   background: radial-gradient(circle, rgba(201, 169, 110, 0.12) 0%, transparent 65%);
   pointer-events: none;
 }

 .contact-hero::after {
   content: '';
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   height: 1px;
   background: linear-gradient(90deg, transparent, var(--gold), transparent);
 }

 .hero-inner {
   max-width: 1100px;
   margin: 0 auto;
   display: flex;
   align-items: flex-end;
   justify-content: space-between;
   gap: 2rem;
 }

 .hero-label {
   font-size: 11px;
   font-weight: 500;
   letter-spacing: 3px;
   text-transform: uppercase;
   color: var(--gold);
   margin-bottom: 1rem;
   display: flex;
   align-items: center;
   gap: 10px;
 }

 .hero-label::before {
   content: '';
   display: block;
   width: 28px;
   height: 1px;
   background: var(--gold);
 }

 .hero-title {
   font-family: 'Cormorant Garamond', serif;
   font-size: clamp(3rem, 6vw, 5rem);
   font-weight: 600;
   color: var(--white);
   line-height: 1.05;
   letter-spacing: -1px;
 }

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

 .hero-sub {
   font-size: 14px;
   color: var(--warm);
   max-width: 280px;
   line-height: 1.7;
   text-align: right;
 }

 /* ── MAIN LAYOUT ── */
 .main {
   max-width: 1100px;
   margin: 0 auto;
   padding: 2rem 0 4rem;
   display: grid;
   grid-template-columns: 1fr 1.5fr;
   gap: 4rem;
   align-items: start;
 }

 /* ── LEFT INFO PANEL ── */
 .info-panel {
   position: sticky;
   top: 2rem;
 }

 .info-card {
   background: var(--white);
   border-radius: 20px;
   padding: 2.2rem;
   border: 1px solid var(--warm-light);
   box-shadow: var(--shadow-sm);
   margin-bottom: 1.2rem;
 }

 .info-card-title {
   font-family: 'Cormorant Garamond', serif;
   font-size: 22px;
   font-weight: 600;
   color: var(--charcoal);
   margin-bottom: 1.6rem;
   padding-bottom: 1rem;
   border-bottom: 1px solid var(--warm-pale);
 }

 .contact-item {
   display: flex;
   align-items: flex-start;
   gap: 14px;
   margin-bottom: 1.4rem;
 }

 .contact-item:last-child {
   margin-bottom: 0;
 }

 .ci-icon {
   width: 42px;
   height: 42px;
   flex-shrink: 0;
   border-radius: 12px;
   background: var(--warm-pale);
   border: 1px solid var(--warm-light);
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--gold-dark);
   font-size: 17px;
   transition: var(--transition-smooth);
 }

 .contact-item:hover .ci-icon {
   background: var(--gold);
   border-color: var(--gold);
   color: var(--white);
   transform: scale(1.05);
 }

 .ci-label {
   font-size: 10px;
   font-weight: 500;
   text-transform: uppercase;
   letter-spacing: 1.5px;
   color: var(--warm-deep);
   margin-bottom: 3px;
 }

 .ci-value {
   font-size: 14px;
   color: var(--charcoal);
   font-weight: 400;
   line-height: 1.5;
 }

 .ci-value a {
   color: var(--charcoal);
   text-decoration: none;
   transition: color .2s;
 }

 .ci-value a:hover {
   color: var(--gold-dark);
 }

 /* Hours card */
 .hours-card {
   background: var(--charcoal);
   border-radius: 20px;
   padding: 1.8rem 2.2rem;
   border: 1px solid rgba(201, 169, 110, 0.2);
 }

 .hours-title {
   font-family: 'Cormorant Garamond', serif;
   font-size: 18px;
   font-weight: 600;
   color: var(--gold-light);
   margin-bottom: 1.2rem;
   display: flex;
   align-items: center;
   gap: 8px;
 }

 .hours-row {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 8px 0;
   border-bottom: 1px solid rgba(255, 255, 255, 0.06);
   font-size: 13px;
 }

 .hours-row:last-child {
   border-bottom: none;
 }

 .hours-day {
   color: var(--warm);
 }

 .hours-time {
   color: var(--white);
   font-weight: 500;
 }

 .hours-closed {
   color: #e5484d;
 }

 /* whatsapp badge */
 .wa-badge {
   display: flex;
   align-items: center;
   gap: 10px;
   background: #25D366;
   color: #fff;
   border-radius: 12px;
   padding: 12px 16px;
   font-size: 13px;
   font-weight: 600;
   margin-top: 1.2rem;
   cursor: pointer;
   text-decoration: none;
   transition: var(--transition-smooth);
   box-shadow: 0 6px 20px rgba(37, 211, 102, 0.25);
 }

 .wa-badge:hover {
   transform: translateY(-2px);
   box-shadow: 0 10px 28px rgba(37, 211, 102, 0.35);
   background: #1ebe5b;
 }

 .wa-badge svg {
   width: 22px;
   height: 22px;
   flex-shrink: 0;
 }

 /* ── RIGHT FORM PANEL ── */
 .form-panel {
   background: var(--white);
   border-radius: 24px;
   padding: 2.8rem;
   border: 1px solid var(--warm-light);
   box-shadow: var(--shadow-md);
   position: relative;
   overflow: hidden;
 }

 .form-panel::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   height: 4px;
   background: linear-gradient(90deg, var(--gold-dark), var(--gold-light), var(--gold-dark));
 }

 .form-heading {
   font-family: 'Cormorant Garamond', serif;
   font-size: 30px;
   font-weight: 600;
   color: var(--charcoal);
   margin-bottom: 6px;
   letter-spacing: -0.5px;
 }

 .form-subheading {
   font-size: 13px;
   color: var(--warm-deep);
   margin-bottom: 2rem;
   line-height: 1.6;
   display: flex;
   align-items: center;
   gap: 8px;
 }

 .form-subheading svg {
   color: #25D366;
   flex-shrink: 0;
 }

 /* form rows */
 .form-row {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 16px;
 }

 /* field */
 .f-field {
   margin-bottom: 1.2rem;
 }

 .f-label {
   font-size: 11px;
   font-weight: 500;
   text-transform: uppercase;
   letter-spacing: 1.2px;
   color: var(--warm-deep);
   margin-bottom: 7px;
   display: flex;
   align-items: center;
   gap: 6px;
 }

 .f-label svg {
   color: var(--gold);
 }

 .f-wrap {
   position: relative;
 }

 .f-input,
 .f-select,
 .f-textarea {
   width: 100%;
   background: var(--warm-pale);
   border: 1.5px solid var(--warm-light);
   border-radius: 12px;
   padding: 12px 16px;
   font-family: 'DM Sans', sans-serif;
   font-size: 14px;
   color: var(--charcoal);
   outline: none;
   transition: var(--transition-smooth);
   -webkit-appearance: none;
 }

 .f-input::placeholder,
 .f-textarea::placeholder {
   color: var(--warm);
   font-weight: 300;
 }

 .f-input:focus,
 .f-select:focus,
 .f-textarea:focus {
   border-color: var(--gold);
   background: var(--white);
   box-shadow: 0 0 0 3.5px rgba(201, 169, 110, 0.15);
 }

 .f-input:hover,
 .f-select:hover,
 .f-textarea:hover {
   border-color: var(--warm-deep);
 }

 .f-select {
   cursor: pointer;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238A7A6E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
   background-repeat: no-repeat;
   background-position: right 14px center;
   padding-right: 40px;
 }

 .f-textarea {
   resize: vertical;
   min-height: 120px;
   line-height: 1.6;
 }

 /* char counter */
 .f-count {
   font-size: 10px;
   color: var(--warm);
   text-align: right;
   margin-top: 4px;
 }

 /* phone row */
 .phone-row {
   display: flex;
   gap: 0;
 }

 .phone-prefix {
   background: var(--warm-pale);
   border: 1.5px solid var(--warm-light);
   border-right: none;
   border-radius: 12px 0 0 12px;
   padding: 12px 14px;
   font-size: 14px;
   color: var(--charcoal);
   font-weight: 500;
   display: flex;
   align-items: center;
   white-space: nowrap;
   flex-shrink: 0;
 }

 .phone-row .f-input {
   border-radius: 0 12px 12px 0;
 }

 /* submit */
 .f-submit {
   width: 100%;
   background: var(--charcoal);
   color: var(--white);
   border: none;
   border-radius: 14px;
   padding: 15px 24px;
   font-family: 'DM Sans', sans-serif;
   font-size: 15px;
   font-weight: 500;
   cursor: pointer;
   letter-spacing: 0.3px;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 12px;
   transition: var(--transition-smooth);
   position: relative;
   overflow: hidden;
   margin-top: 1.6rem;
   box-shadow: 0 8px 24px rgba(15, 15, 15, 0.2);
 }

 .f-submit::before {
   content: '';
   position: absolute;
   inset: 0;
   background: linear-gradient(135deg, rgba(201, 169, 110, 0.15) 0%, transparent 60%);
   pointer-events: none;
 }

 .f-submit:hover {
   background: var(--black);
   transform: translateY(-2px);
   box-shadow: 0 14px 36px rgba(15, 15, 15, 0.28);
 }

 .f-submit:active {
   transform: scale(0.98);
 }

 .f-submit-icon {
   width: 34px;
   height: 34px;
   background: #25D366;
   border-radius: 8px;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
   transition: transform .2s;
 }

 .f-submit:hover .f-submit-icon {
   transform: scale(1.1) rotate(-5deg);
 }

 /* privacy note */
 .f-privacy {
   text-align: center;
   font-size: 11px;
   color: var(--warm);
   margin-top: 1rem;
   line-height: 1.6;
 }

 .f-privacy a {
   color: var(--warm-deep);
   text-decoration: none;
   border-bottom: 1px solid var(--warm-light);
 }

 /* success toast */
 .toast {
   display: none;
   position: fixed;
   top: 24px;
   right: 24px;
   background: var(--charcoal);
   color: var(--white);
   border: 1px solid rgba(201, 169, 110, 0.3);
   border-radius: 14px;
   padding: 16px 20px;
   font-size: 14px;
   font-weight: 500;
   box-shadow: 0 20px 50px rgba(0, 0, 0, 0.18);
   z-index: 9999;
   display: flex;
   align-items: center;
   gap: 12px;
   animation: toastIn .4s cubic-bezier(.2, .9, .4, 1.1) both;
   max-width: 320px;
 }

 .toast.hidden {
   display: none !important;
 }

 @keyframes toastIn {
   from {
     opacity: 0;
     transform: translateY(-12px) scale(0.96);
   }

   to {
     opacity: 1;
     transform: none;
   }
 }

 /* decorative quote */
 .deco-quote {
   text-align: center;
   font-family: 'Cormorant Garamond', serif;
   font-size: clamp(15px, 2vw, 18px);
   font-style: italic;
   color: var(--warm-deep);
   max-width: 600px;
   margin: 2rem auto 2rem;
   padding: 0 1rem;
   line-height: 1.7;
 }

 .deco-quote::before {
   content: '"';
   font-size: 3em;
   color: var(--gold);
   line-height: 0;
   vertical-align: -0.4em;
   margin-right: 4px;
 }

 .deco-quote::after {
   content: '"';
   font-size: 3em;
   color: var(--gold);
   line-height: 0;
   vertical-align: -0.4em;
   margin-left: 4px;
 }

 /* divider */
 .section-divider {
   max-width: 1100px;
   margin: 0 auto;
   display: flex;
   align-items: center;
   gap: 20px;
   padding: 0 0 1rem;
 }

 .sd-line {
   flex: 1;
   height: 1px;
   background: var(--warm-light);
 }

 .sd-diamond {
   width: 10px;
   height: 10px;
   background: var(--gold);
   transform: rotate(45deg);
 }

 /* RESPONSIVE */
 @media (max-width: 900px) {
   .hero-inner {
     flex-direction: column;
     align-items: flex-start;
   }

   .hero-sub {
     text-align: left;
   }

   .main {
     grid-template-columns: 1fr;
     gap: 2.5rem;
   }

   .info-panel {
     position: static;
   }

   .form-row {
     grid-template-columns: 1fr;
   }

   .contact-page-wrapper {
     padding: 0 1.5rem;
   }
 }

 @media (max-width: 600px) {
   .contact-hero {
     padding: 3rem 1.5rem;
   }

   .form-panel {
     padding: 2rem 1.4rem;
   }

   .info-card {
     padding: 1.6rem;
   }

   .hero-title {
     font-size: 2.6rem;
   }
 }

 /* field error state */
 .f-input.error,
 .f-select.error,
 .f-textarea.error {
   border-color: #e5484d;
   box-shadow: 0 0 0 3px rgba(229, 72, 77, 0.1);
 }

 /* animations */
 .fade-in {
   animation: fadeUp .6s cubic-bezier(.2, .9, .4, 1) both;
 }

 .fade-in-d1 {
   animation-delay: .1s;
 }

 .fade-in-d2 {
   animation-delay: .2s;
 }

 .fade-in-d3 {
   animation-delay: .3s;
 }

 @keyframes fadeUp {
   from {
     opacity: 0;
     transform: translateY(20px);
   }

   to {
     opacity: 1;
     transform: none;
   }
 }

 /* contact */
















 
    /* ----- FLOATING CHAT ICON (right side) ----- */
    .chat-icon {
      position: fixed;
      bottom: 24px;
      right: 24px;
      width: 60px;
      height: 60px;
      background: #25D366;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
      transition: all 0.2s ease;
      z-index: 1050;
    }
    .chat-icon i {
      font-size: 32px;
      color: white;
    }
    .chat-icon:hover {
      transform: scale(1.05);
      background: #1ebe5b;
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
    }

    /* ----- FLOATING CALL ICON (left side) ----- */
    .call-icon {
      position: fixed;
      bottom: 24px;
      left: 24px;
      width: 60px;
      height: 60px;
      background: #075E54;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
      transition: all 0.2s ease;
      z-index: 1000;
      text-decoration: none;
    }
    .call-icon i {
      font-size: 28px;
      color: white;
    }
    .call-icon:hover {
      transform: scale(1.05);
      background: #054a3e;
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
    }

    /* ----- CHAT WIDGET (initially hidden, opens on icon click) ----- */
    .chat-widget {
      position: fixed;
      bottom: 100px;
      right: 24px;
      width: 360px;
      max-width: calc(100vw - 48px);
      background: #fff;
      border-radius: 24px;
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
      display: none;
      flex-direction: column;
      overflow: hidden;
      z-index: 1001;
      border: 1px solid rgba(0,0,0,0.08);
    }
    .chat-widget.open {
      display: flex;
      animation: slideUp 0.25s cubic-bezier(0.2, 0.9, 0.4, 1.1) forwards;
    }
    @keyframes slideUp {
      from {
        opacity: 0;
        transform: translateY(20px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    /* Header */
    .chat-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 14px 18px;
      background: #075E54;
      color: white;
    }
    .chat-logo {
      display: flex;
      align-items: center;
      gap: 12px;
    }
    .chat-logo img {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      object-fit: cover;
      background: white;
      padding: 2px;
    }
    .chat-online p {
      margin: 0;
      line-height: 1.2;
    }
    .chat-online p:first-child {
      font-weight: 600;
      font-size: 15px;
    }
    .chat-online p:last-child {
      font-size: 11px;
      opacity: 0.85;
    }
    .chat-close {
      cursor: pointer;
      width: 32px;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      transition: background 0.2s;
    }
    .chat-close:hover {
      background: rgba(255,255,255,0.2);
    }

    /* Messages container */
    .chat-middle {
      background: #E5DDD5;
      padding: 16px;
      height: 305px;
      overflow-y: auto;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    /* bot message (welcome/info) */
    .bot-message, .user-message {
      max-width: 85%;
      padding: 10px 14px;
      border-radius: 18px;
      font-size: 14px;
      line-height: 1.4;
      word-wrap: break-word;
    }
    .bot-message {
      background: white;
      color: #111;
      align-self: flex-start;
      border-top-left-radius: 4px;
      box-shadow: 0 1px 1px rgba(0,0,0,0.05);
    }
    .user-message {
      background: #DCF8C6;
      color: #111;
      align-self: flex-end;
      border-top-right-radius: 4px;
    }
    /* prompt buttons */
    .prompt-options {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin: 8px 0 4px;
    }
    .prompt-options button {
      background: #fff;
      border: 1px solid #25D366;
      border-radius: 40px;
      padding: 8px 16px;
      font-size: 12px;
      font-weight: 500;
      cursor: pointer;
      transition: 0.2s;
      color: #075E54;
    }
    .prompt-options button:hover {
      background: #25D366;
      color: white;
      border-color: #25D366;
    }
    /* input area */
    .input-box {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 12px 16px;
      background: #f0f2f5;
      border-top: 1px solid #e0e0e0;
    }
    .input-box input {
      flex: 1;
      border: none;
      background: white;
      border-radius: 30px;
      padding: 10px 16px;
      font-size: 14px;
      outline: none;
      border: 1px solid #ddd;
    }
    .input-box input:focus {
      border-color: #25D366;
    }
    .send-btn {
      background: #25D366;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: 0.2s;
      color: white;
    }
    .send-btn:hover {
      background: #1ebe5b;
      transform: scale(1.03);
    }
    .message-time {
      font-size: 9px;
      color: #888;
      margin-top: 4px;
      text-align: right;
    }
    .chat-middle::-webkit-scrollbar {
      width: 5px;
    }
    .chat-middle::-webkit-scrollbar-track {
      background: #ddd;
    }
    .chat-middle::-webkit-scrollbar-thumb {
      background: #075E54;
      border-radius: 10px;
    }

    @media (max-width: 480px) {
      .chat-widget {
        bottom: 80px;
        right: 16px;
        width: 320px;
      }
      .chat-icon {
        width: 54px;
        height: 54px;
        bottom: 18px;
        right: 18px;
      }
      .call-icon {
        width: 54px;
        height: 54px;
        bottom: 18px;
        left: 18px;
      }
    }




     /* submit + success */
    .submit-area {
      margin-top: 2.2rem;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 1rem;
    }
    .wa-button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      background: #128C7E;
      border: none;
      border-radius: 3px;
      padding: 14px 32px;
      font-family: 'Inter', sans-serif;
      font-size: 13px;
      font-weight: 600;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: white;
      cursor: pointer;
      transition: all 0.2s;
      box-shadow: 0 4px 12px rgba(18,140,126,0.25);
      min-width: 240px;
    }
    .wa-button:hover {
      background: #25D366;
      transform: translateY(-1px);
    }
    .wa-icon {
      width: 20px;
      height: 20px;
      fill: white;
    }
    .note {
      font-size: 11px;
      color: #7D6E5D;
      text-align: center;
    }

    /* SUCCESS BANNER (exactly as requested) */
    .success-banner {
      display: none;
      text-align: center;
      background: #FEFCF8;
      border: 1px solid #EDE4D8;
      border-radius: 24px;
      padding: 2rem 1.5rem;
      margin-top: 1rem;
    }
    .wa-check {
      width: 64px;
      height: 64px;
      background: #25D366;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 20px;
      animation: popIn 0.4s cubic-bezier(0.2, 0.9, 0.4, 1.1);
    }
    @keyframes popIn {
      0% { transform: scale(0); opacity: 0; }
      70% { transform: scale(1.1); }
      100% { transform: scale(1); opacity: 1; }
    }
    .success-banner h3 {
      font-family: 'Cormorant Garamond', serif;
      font-size: 28px;
      font-weight: 400;
      margin-bottom: 8px;
      color: #2F7D5C;
    }
    .success-banner p {
      font-size: 14px;
      color: #5C5348;
      line-height: 1.5;
    }








    /* gold text utility (unchanged class but we keep & style) */
    .gold-text {
      color: var(--gold);
      font-weight: 500;
    }

    /* ─── RENAMED: LUXURY HEADER (formerly .page-header-custom) ─── */
    .luxury-header {
      background: var(--surface);
      border-bottom: 1px solid var(--border-light);
      position: relative;
      overflow: hidden;
      border-radius: 28px;
    }
    .luxury-header::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: radial-gradient(ellipse 70% 40% at 50% 0%, rgba(184,139,74,0.06) 0%, transparent 70%);
      pointer-events: none;
    }

    /* renamed eyebrow -> luxury-eyebrow */
    .luxury-eyebrow {
      font-size: 11px;
      letter-spacing: 0.28em;
      text-transform: uppercase;
      color: var(--gold);
      display: inline-flex;
      align-items: center;
      gap: 14px;
    }
    .luxury-eyebrow::before,
    .luxury-eyebrow::after {
      content: '';
      width: 44px;
      height: 0.5px;
      background: var(--gold);
      opacity: 0.5;
    }

    /* ----- RENAMED: FRAME CARD (premium design, formerly .product-card) ----- */
    .frame-card {
      position: relative;
      overflow: hidden;
      border-radius: 20px;
      background: var(--surface);
      transition: all 0.3s cubic-bezier(0.2, 0, 0, 1);
      box-shadow: var(--shadow-sm);
      aspect-ratio: 4 / 5;
    }
    .frame-card:hover {
      transform: translateY(-5px);
      box-shadow: var(--shadow-hover);
    }

    /* renamed .card-img -> .frame-image */
    .frame-image {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.7s ease;
    }
    .frame-card:hover .frame-image {
      transform: scale(1.05);
    }

    /* renamed .card-overlay -> .frame-overlay */
    .frame-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(to top, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.2) 45%, transparent 80%);
      z-index: 1;
      border-radius: 20px;
    }

    /* renamed .card-content -> .frame-content */
    .frame-content {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      padding: 1.5rem;
      z-index: 2;
      color: white;
    }

    /* renamed .tag -> .frame-tag */
    .frame-tag {
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--gold-light);
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 8px;
    }
    .frame-tag::before {
      content: '';
      width: 22px;
      height: 0.5px;
      background: var(--gold-light);
    }

    /* renamed .card-title -> .frame-title */
    .frame-title {
      font-family: 'Cormorant Garamond', serif;
      font-size: 1.4rem;
      font-weight: 400;
      margin-bottom: 12px;
      line-height: 1.25;
    }

    /* renamed .btn-outline-gold -> .frame-btn */
    .frame-btn {
      border: 0.5px solid rgba(208, 168, 110, 0.7);
      background: rgba(0, 0, 0, 0.3);
      backdrop-filter: blur(4px);
      color: #F7EFE0;
      font-size: 10px;
      letter-spacing: 0.18em;
      padding: 6px 14px;
      border-radius: 40px;
      text-transform: uppercase;
      transition: all 0.2s;
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }
    .frame-btn:hover {
      background: var(--gold);
      border-color: var(--gold);
      color: #1E1C19;
    }

    /* renamed .badge-collection -> .frame-badge */
    .frame-badge {
      position: absolute;
      top: 18px;
      right: 18px;
      background: rgba(26, 24, 21, 0.7);
      backdrop-filter: blur(8px);
      border: 0.5px solid rgba(184, 139, 74, 0.6);
      color: var(--gold-light);
      font-size: 8px;
      padding: 5px 12px;
      border-radius: 40px;
      letter-spacing: 0.14em;
      z-index: 3;
      font-weight: 500;
      text-transform: uppercase;
    }

    /* renamed .footer-strip -> .footer-luxury-strip */
    .footer-luxury-strip {
      border-top: 1px solid var(--border-light);
      margin-top: 3rem;
      padding-top: 1.8rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 1rem;
    }

    /* renamed .counter-text -> .counter-stats */
    .counter-stats {
      font-size: 13px;
      color: var(--text-muted);
    }

    /* renamed .btn-outline-dark-gold -> .footer-request-btn */
    .footer-request-btn {
      border: 1px solid var(--border-light);
      background: transparent;
      color: var(--gold);
      border-radius: 40px;
      padding: 10px 28px;
      font-size: 11px;
      letter-spacing: 0.18em;
      transition: all 0.2s;
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }
    .footer-request-btn:hover {
      background: var(--gold-soft);
      border-color: var(--gold);
      color: var(--gold);
    }

    /* renamed .arrow-svg -> .icon-arrow (same signature) */
    .icon-arrow {
      width: 12px;
      height: 12px;
      stroke: currentColor;
      fill: none;
      stroke-width: 1.5;
      stroke-linecap: round;
    }

    /* fallback gradient (renamed from .img-fallback-safe) */
   

    /* responsiveness for frame title */
    @media (max-width: 768px) {
      .frame-title { font-size: 1.2rem; }
      .frame-content { padding: 1.2rem; }
      .stat-item
 {
    text-align: center;
    padding: 2rem 0rem;
 }

 .cta-group { 
    gap: 4px; 
}
.prestige-card { 
  margin: 15px;
    padding: 24px 11px;
}
    }








    /* enquiry 2  */

      .lm-wrapper {
            --lm-gold: #c8a45c;
            --lm-gold-light: #e0bc7a;
            --lm-bg-dark: #0c0c0e;
            --lm-text-light: #f0ede8;
            --lm-text-muted: #a6a29b;
            --lm-border-dim: rgba(200, 164, 92, 0.2);
            --lm-shadow: 0 20px 35px -12px rgba(0,0,0,0.5);

            background: radial-gradient(circle at 20% 30%, #111112, #050506);
            font-family: 'Inter', sans-serif;
            color: var(--lm-text-light);
            min-height: 100vh;
            display: flex;
            flex-direction: column;
        }

        .lm-navbar {
            background: rgba(12,12,14,0.85);
            backdrop-filter: blur(16px);
            border-bottom: 1px solid var(--lm-border-dim);
            padding: 1rem 0;
        }
        .lm-navbar-brand {
            font-family: 'Playfair Display', serif;
            font-size: 1.8rem;
            font-weight: 700;
            background: linear-gradient(135deg, #fff, var(--lm-gold-light));
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            text-decoration: none;
        }
        .lm-navbar-brand i {
            background: none;
            -webkit-background-clip: unset;
            color: var(--lm-gold);
            margin-right: 6px;
        }
        .lm-back-link {
            color: var(--lm-text-muted);
            text-decoration: none;
            font-weight: 500;
            transition: 0.2s;
        }
        .lm-back-link:hover { color: var(--lm-gold-light); }

        .lm-card {
            background: rgba(20,20,24,0.85);
            backdrop-filter: blur(12px);
            border: 1px solid var(--lm-border-dim);
            border-radius: 32px;
            padding: 2rem;
            box-shadow: var(--lm-shadow);
           
            margin: 2rem auto;
        }
        

        .lm-form-label {
            font-size: 0.7rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.8px;
            color: var(--lm-text-muted);
            margin-bottom: 0.3rem;
        }
        .lm-form-control {
            background: #1c1c22;
            border: 1px solid #2c2c32;
            color: #f0ede8;
            border-radius: 40px;
            padding: 10px 18px;
            font-size: 0.9rem;
            width: 100%;
        }
        .lm-form-control:focus {
            border-color: var(--lm-gold);
            box-shadow: 0 0 0 3px rgba(200,164,92,0.2);
            background: #22222a;
            outline: none;
        }
        textarea.lm-form-control {
            border-radius: 24px;
            resize: vertical;
        }
        .lm-btn-gold {
            background: linear-gradient(100deg, var(--lm-gold), var(--lm-gold-light));
            border: none;
            border-radius: 50px;
            padding: 12px 24px;
            font-weight: 800;
            font-size: 0.9rem;
            color: #0a0a0c;
            width: 100%;
            transition: 0.2s;
        }
        .lm-btn-gold:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(200,164,92,0.3);
        }
        .lm-invalid-feedback {
            font-size: 0.7rem;
            color: #e0a080;
            margin-left: 1rem;
            margin-top: 0.25rem;
        }
        .lm-toast {
            background: #1e1e24f2;
            backdrop-filter: blur(12px);
            border-left: 4px solid var(--lm-gold);
        }
        @media (max-width: 600px) {
            .lm-card { padding: 1.25rem; margin: 1rem 0rem; }
            .logo-icon img {
    width: 80px;
}
        }


      /* ============================================
   Professional Redesign for .lm-aluminium-module
   Premium, modern, and cohesive with Hari Style
   ============================================ */

.lm-aluminium-module {
    /* Color palette – refined gold & neutral tones */
    --gold-primary: #C89D5C;
    --gold-dark: #A67C45;
    --gold-light: #F5E7D3;
    --text-dark: #1E1A17;
    --text-muted: #5E554A;
    --bg-card: #FFFFFF;
    --bg-soft: #FEFAF5;
    --border-light: #E9E2D9;
    --shadow-sm: 0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.02);
    --shadow-md: 0 20px 30px -12px rgba(0, 0, 0, 0.1);
    --shadow-hover: 0 25px 40px -14px rgba(0, 0, 0, 0.15);
    --transition: all 0.4s cubic-bezier(0.2, 0.95, 0.4, 1);
}

/* Container spacing */
.lm-aluminium-module .lm-container {
    padding-top: 3rem;
    padding-bottom: 2rem;
}

/* Card styling – luxurious and airy */
.lm-aluminium-module .lm-card {
    background: var(--bg-card);
    border-radius: 2rem;
    padding: 2.2rem;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-light);
    transition: var(--transition);
    height: 100%;
    backdrop-filter: blur(0px);
    position: relative;
    overflow: hidden;
}

.lm-aluminium-module .lm-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 5px;
    background: linear-gradient(90deg, var(--gold-primary), var(--gold-light));
    opacity: 0;
    transition: var(--transition);
}

.lm-aluminium-module .lm-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-hover);
    border-color: transparent;
}

.lm-aluminium-module .lm-card:hover::before {
    opacity: 1;
}

/* Typography – elegant & readable */
.lm-aluminium-module .lm-title {
    font-family: 'Playfair Display', serif;
    font-size: 1.9rem;
    font-weight: 600;
    background: linear-gradient(135deg, var(--gold-primary), var(--gold-dark));
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    margin-bottom: 1.2rem;
    letter-spacing: -0.01em;
    line-height: 1.3;
}

.lm-aluminium-module .lm-subtitle {
    font-size: 1.55rem;
    font-weight: 600;
    color: var(--gold-primary);
    font-family: 'Playfair Display', serif;
    margin-bottom: 1.2rem;
    letter-spacing: -0.3px;
}

.lm-aluminium-module .lm-spec-title {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 1.2rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--gold-light);
    display: inline-block;
}

.lm-aluminium-module .lm-trust-title {
    font-size: 1.9rem;
    font-weight: 600;
    color: var(--text-dark);
    font-family: 'Playfair Display', serif;
    margin-bottom: 1rem;
    letter-spacing: -0.3px;
}

/* Benefit list – clean checkmarks */
.lm-aluminium-module .lm-benefit-list {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.lm-aluminium-module .lm-benefit-list li {
    margin-bottom: 1rem;
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
    font-size: 1rem;
    color: var(--text-muted);
    line-height: 1.4;
}

.lm-aluminium-module .lm-benefit-list li i {
    color: var(--gold-primary);
    font-size: 1.25rem;
    flex-shrink: 0;
    margin-top: 0.1rem;
}

.lm-aluminium-module .lm-benefit-list li strong {
    color: var(--text-dark);
    font-weight: 600;
}

/* Specifications table – clean and borderless */
.lm-aluminium-module .lm-spec-table {
    width: 100%;
    font-size: 0.95rem;
    border-collapse: separate;
    border-spacing: 0;
}

.lm-aluminium-module .lm-spec-table tr td {
    padding: 0.9rem 0.2rem 0.9rem 0;
    border-bottom: 1px solid var(--border-light);
    vertical-align: top;
}

.lm-aluminium-module .lm-spec-table tr td:first-child {
    font-weight: 700;
    color: var(--gold-dark);
    width: 40%;
    font-size: 0.9rem;
    letter-spacing: -0.2px;
}

.lm-aluminium-module .lm-spec-table tr:last-child td {
    border-bottom: none;
}

.lm-aluminium-module .lm-spec-table tr:hover td {
    background-color: transparent;
}

/* Badge group – modern pill styling */
.lm-aluminium-module .lm-badge-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    margin-top: 1.5rem;
}

.lm-aluminium-module .lm-badge {
    background: var(--gold-light);
    color: var(--gold-dark);
    font-weight: 600;
    border-radius: 40px;
    padding: 0.4rem 1.2rem;
    font-size: 0.8rem;
    letter-spacing: -0.2px;
    transition: var(--transition);
    border: 1px solid rgba(200, 157, 92, 0.2);
}

.lm-aluminium-module .lm-badge:hover {
    background: var(--gold-primary);
    color: white;
    border-color: var(--gold-primary);
    transform: translateY(-2px);
}

/* Button – refined gold gradient */
.lm-aluminium-module .lm-btn-gold {
    background: linear-gradient(135deg, var(--gold-primary), var(--gold-dark));
    border: none;
    border-radius: 60px;
    padding: 0.7rem 1.8rem;
    font-weight: 600;
    font-size: 0.95rem;
    color: white;
    transition: var(--transition);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

.lm-aluminium-module .lm-btn-gold:hover {
    background: linear-gradient(135deg, var(--gold-dark), var(--gold-primary));
    transform: translateY(-3px);
    box-shadow: 0 8px 18px rgba(200, 157, 92, 0.25);
    color: white;
}

/* Application list – custom checkmark */
.lm-aluminium-module .lm-app-list {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.lm-aluminium-module .lm-app-list li {
    margin-bottom: 0.8rem;
    padding-left: 1.8rem;
    position: relative;
    color: var(--text-muted);
    line-height: 1.4;
}

.lm-aluminium-module .lm-app-list li::before {
    content: "✓";
    color: var(--gold-primary);
    font-weight: 700;
    position: absolute;
    left: 0;
    top: 0;
    font-size: 1rem;
}

/* Delivery info box – subtle and elegant */
.lm-aluminium-module .lm-delivery-box {
    background: var(--bg-soft);
    border-left: 4px solid var(--gold-primary);
    padding: 1.2rem 1.2rem 1rem 1.5rem;
    border-radius: 1.2rem;
    font-size: 0.9rem;
    margin-top: 1.5rem;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
}

.lm-aluminium-module .lm-delivery-box i {
    color: var(--gold-primary);
    margin-right: 0.5rem;
    font-size: 1.1rem;
}

.lm-aluminium-module .lm-delivery-box:hover {
    transform: translateX(4px);
    background: white;
}

/* Trust section – icon + text */
.lm-aluminium-module .lm-icon-lg {
    font-size: 2.5rem;
    color: var(--gold-primary);
    transition: var(--transition);
    display: inline-block;
}

.lm-aluminium-module .col-md-3:hover .lm-icon-lg {
    transform: scale(1.1);
    color: var(--gold-dark);
}

.lm-aluminium-module .lm-card-center {
    text-align: center;
    background: linear-gradient(145deg, #FFFFFF, var(--bg-soft));
}

/* Responsive adjustments */
@media (max-width: 992px) {
    .lm-aluminium-module .lm-title {
        font-size: 1.7rem;
    }
    .lm-aluminium-module .lm-trust-title {
        font-size: 1.7rem;
    }
    .lm-aluminium-module .lm-card {
        padding: 1.8rem;
    }
}

@media (max-width: 768px) {
    .lm-aluminium-module .lm-container {
        padding-top: 2rem;
        padding-bottom: 1rem;
    }
    .lm-aluminium-module .lm-card {
        padding: 1.5rem;
        border-radius: 1.5rem;
    }
    .lm-aluminium-module .lm-title {
        font-size: 1.5rem;
    }
    .lm-aluminium-module .lm-spec-title {
        font-size: 1.3rem;
    }
    .lm-aluminium-module .lm-spec-table tr td {
        display: block;
        width: 100%;
        padding: 0.6rem 0;
    }
    .lm-aluminium-module .lm-spec-table tr td:first-child {
        border-bottom: none;
        padding-bottom: 0.2rem;
    }
    .lm-aluminium-module .lm-badge-group {
        gap: 0.5rem;
    }
    .lm-aluminium-module .lm-benefit-list li {
        font-size: 0.9rem;
    }
}























/* location page  */

        /* ─── HERO ──────────────────────────────────────── */
        .hs-hero {
            position: relative;
           
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            background:   linear-gradient(160deg, rgba(10, 7, 3, .78) 0%, rgba(22, 15, 6, .58) 50%, rgba(10, 7, 3, .85) 100%),
                #0F0F0F;
            overflow: hidden;
            padding-bottom: 120px;
        }

        .hs-hero::before {
            content: '';
            position: absolute;
            inset: 0;
            background: repeating-linear-gradient(-52deg, transparent, transparent 100px, rgba(201, 169, 110, .025) 100px, rgba(201, 169, 110, .025) 101px);
            pointer-events: none;
        }

        .hs-hero::after {
            content: '';
            position: absolute;
            inset: 0;
            background: radial-gradient(ellipse 70% 55% at 50% 105%, rgba(201, 169, 110, .10) 0%, transparent 65%);
            pointer-events: none;
        }

        /* Hero — inner content wrapper */
        .hs-hero__content {
            position: relative;
            z-index: 2;
            width: 100%;
            max-width: 860px;
            padding: 2rem 1.25rem 1.5rem;
        }

        /* Hero — badge */
        .hs-hero__badge {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: rgba(201, 169, 110, .13);
            border: 1px solid rgba(201, 169, 110, .32);
            color: var(--gold-light);
            font-size: .72rem;
            font-weight: 500;
            letter-spacing: .15em;
            text-transform: uppercase;
            padding: .48rem 1.1rem;
            border-radius: 40px;
            margin-bottom: 1.4rem;
            animation: fadeDown .85s ease both;
        }

        .hs-hero__badge-dot {
            width: 6px;
            height: 6px;
            background: var(--gold);
            border-radius: 50%;
            animation: pulse 2s infinite;
            flex-shrink: 0;
        }

        /* Hero — h1 */
        .hs-hero__title {
            font-family: var(--fd);
            font-size: clamp(2rem, 6vw, 3.4rem);
            font-weight: 500;
            line-height: 1.1;
            color: var(--warm-pale);
            margin-bottom: 1.1rem;
            text-shadow: 0 4px 30px rgba(0, 0, 0, .5);
            animation: fadeUp 1s ease .15s both;
        }
        a{
          text-decoration: none;
        }

        .hs-hero__title em {
            font-style: italic;
            color: var(--gold-light);
        }

        /* Hero — sub-paragraph */
        .hs-hero__subtitle {
            font-size: clamp(.88rem, 2.5vw, 1.05rem);
            font-weight: 300;
            color: var(--warm-light);
            max-width: 600px;
            margin: 0 auto 2rem;
            letter-spacing: .02em;
            animation: fadeUp 1s ease .28s both;
        }

        /* Hero — CTA row */
        .hs-hero__actions {
            display: flex;
            gap: .75rem;
            justify-content: center;
            flex-wrap: wrap;
            animation: fadeUp 1s ease .42s both;
        }

        /* ─── BUTTONS ───────────────────────────────────── */
        .hs-btn--primary {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: var(--gold);
            color: var(--black);
            padding: .9rem 2rem;
            font-family: var(--fb);
            font-size: .85rem;
            font-weight: 600;
            letter-spacing: .06em;
            text-transform: uppercase;
            border-radius: 50px;
            border: none;
            cursor: pointer;
            transition: var(--tr);
            box-shadow: 0 8px 28px rgba(201, 169, 110, .4);
        }

        .hs-btn--primary:hover {
            background: var(--gold-light);
            transform: translateY(-2px);
            box-shadow: 0 14px 36px rgba(201, 169, 110, .5);
            color: var(--black);
        }

        .hs-btn--outline {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: transparent;
            color: var(--warm-pale);
            padding: .9rem 2rem;
            font-family: var(--fb);
            font-size: .85rem;
            font-weight: 500;
            letter-spacing: .06em;
            text-transform: uppercase;
            border-radius: 50px;
            border: 1px solid rgba(212, 200, 188, .38);
            cursor: pointer;
            transition: var(--tr);
        }

        .hs-btn--outline:hover {
            border-color: var(--gold);
            color: var(--gold-light);
            background: rgba(201, 169, 110, .07);
        }

        /* ─── TRUST STRIP ───────────────────────────────── */
        .hs-trust {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            display: flex;
            justify-content: space-around;
            flex-wrap: wrap;
            padding: .9rem 1rem;
            background: rgba(10, 7, 3, .65);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border-top: 1px solid rgba(201, 169, 110, .12);
            z-index: 3;
        }

        .hs-trust__item {
            display: flex;
            align-items: center;
            gap: 8px;
            color: var(--warm-light);
            font-size: .78rem;
            font-weight: 300;
            letter-spacing: .03em;
            padding: .35rem .9rem;
            border-right: 1px solid rgba(201, 169, 110, .1);
            white-space: nowrap;
        }

        .hs-trust__item:last-child {
            border-right: none;
        }

        .hs-trust__icon {
            width: 28px;
            height: 28px;
            border-radius: 50%;
            background: rgba(201, 169, 110, .13);
            border: 1px solid rgba(201, 169, 110, .28);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            flex-shrink: 0;
        }

        .hs-trust__label {
            color: var(--warm-pale);
            font-weight: 500;
            display: block;
            font-size: .8rem;
            line-height: 1.2;
        }

        /* ─── SECTION BASE ──────────────────────────────── */
        .hs-section {
            background: var(--white);
            border-radius: var(--r-lg);
            padding: 3rem 2.5rem;
            box-shadow: var(--shadow-sm);
            border: 1px solid var(--lt-border);
            margin-bottom: 2rem;
            position: relative;
            overflow: hidden;
        }

        .hs-section::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 4px;
            height: 65%;
            background: linear-gradient(to bottom, var(--gold), transparent);
            border-radius: 4px 0 0 0;
        }

        .hs-section--alt {
            background: var(--lt-bg);
            border-color: rgba(138, 122, 110, .12);
        }

        .hs-section--dark {
            background: var(--charcoal);
            border-color: rgba(201, 169, 110, .14);
        }

        .hs-section--dark::before {
            background: linear-gradient(to bottom, var(--gold-light), transparent);
        }

        /* ─── TYPOGRAPHY ────────────────────────────────── */
        .hs-eyebrow {
            font-size: .7rem;
            font-weight: 600;
            letter-spacing: .2em;
            text-transform: uppercase;
            color: var(--gold-dark);
            margin-bottom: .5rem;
        }

        .hs-section--dark .hs-eyebrow {
            color: var(--gold);
        }

        .hs-section-title {
            font-family: var(--fd);
            font-size: clamp(1.7rem, 3.5vw, 2.5rem);
            font-weight: 500;
            color: var(--lt-text);
            line-height: 1.2;
            margin-bottom: 1.2rem;
        }

        .hs-section--dark .hs-section-title {
            color: var(--warm-pale);
        }

        .hs-section-subtitle {
            font-family: var(--fd);
            font-size: 1.25rem;
            font-weight: 500;
            color: var(--charcoal);
            margin: 1.8rem 0 .55rem;
        }

        .hs-section-body {
            color: var(--lt-text-muted);
            margin-bottom: 1rem;
            font-weight: 300;
            font-size: .95rem;
        }

        .hs-section--dark .hs-section-body {
            color: rgba(212, 200, 188, .75);
        }

        /* ─── STATS ─────────────────────────────────────── */
        .hs-stats {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 1rem;
            margin: 2.2rem 0;
        }

        .hs-stats__card {
            text-align: center;
            padding: 1.4rem 1rem;
            background: linear-gradient(135deg, var(--charcoal) 0%, #2a2015 100%);
            border-radius: var(--r-md);
            border: 1px solid rgba(201, 169, 110, .2);
        }

        .hs-stats__number {
            font-family: var(--fd);
            font-size: 2.2rem;
            font-weight: 600;
            color: var(--gold-light);
            line-height: 1;
            margin-bottom: .25rem;
        }

        .hs-stats__label {
            font-size: .75rem;
            color: var(--warm-light);
            letter-spacing: .06em;
            font-weight: 300;
        }

        /* ─── INTRO / ABOUT ─────────────────────────────── */
        .hs-about__grid {
            display: grid;
            grid-template-columns: 1fr 1.5fr;
            gap: 2.5rem;
            align-items: start;
        }

        .hs-about__visual {
            border-radius: var(--r-md);
            overflow: hidden;
            box-shadow: var(--shadow-md);
            border: 1px solid rgba(201, 169, 110, .2);
            background: #161210;
            position: sticky;
            top: 90px;
        }

        .hs-about__visual svg {
            display: block;
            width: 100%;
            height: auto;
        }

        .hs-about__text {
            /* text column */
        }

        .hs-about__title {
            font-family: var(--fd);
            font-size: clamp(1.7rem, 3.5vw, 2.5rem);
            font-weight: 500;
            color: var(--lt-text);
            line-height: 1.2;
            margin-bottom: 1.2rem;
        }

        .hs-about__body {
            color: var(--lt-text-muted);
            margin-bottom: 1rem;
            font-weight: 300;
            font-size: .95rem;
        }

        .hs-about__link {
            color: var(--gold-dark);
            border-bottom: 1px solid rgba(201, 169, 110, .3);
            padding-bottom: 1px;
        }

        /* ─── GALLERY ───────────────────────────────────── */
        .hs-gallery {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
            gap: 1.2rem;
            margin-top: 1.4rem;
        }

        .hs-gallery__item {
            border-radius: var(--r-md);
            overflow: hidden;
            box-shadow: var(--shadow-sm);
            border: 1px solid var(--lt-border);
            transition: var(--tr);
            background: var(--lt-bg);
            position: relative;
        }

        .hs-gallery__item:hover {
            transform: translateY(-6px);
            box-shadow: var(--shadow-lg);
        }

        .hs-gallery__item img {
            width: 100%;
            height: 240px;
            object-fit: cover;
            transition: transform .6s ease;
        }

        .hs-gallery__item:hover img {
            transform: scale(1.05);
        }

        .hs-gallery__label {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            padding: 1.1rem 1rem .9rem;
            background: linear-gradient(to top, rgba(15, 11, 7, .85), transparent);
            color: var(--warm-pale);
            font-size: .85rem;
            font-style: italic;
        }

        /* Gallery card inner parts */
        .hs-gallery__visual {
            background: #0F0D0A;
            padding: 2rem 1.5rem 1.5rem;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 1rem;
        }

        .hs-gallery__chips {
            display: flex;
            flex-wrap: wrap;
            gap: .4rem;
            justify-content: center;
        }

        .hs-gallery__chip {
            background: rgba(201, 169, 110, .15);
            border: 1px solid rgba(201, 169, 110, .3);
            color: #E0C88C;
            font-size: .68rem;
            font-weight: 500;
            letter-spacing: .07em;
            padding: .25rem .7rem;
            border-radius: 20px;
        }

        .hs-gallery__caption {
            padding: 1rem 1.2rem;
            background: var(--lt-bg);
            border-top: 1px solid var(--lt-border);
        }

        .hs-gallery__caption-title {
            font-family: var(--fd);
            font-size: 1rem;
            color: var(--lt-text);
            display: block;
            margin-bottom: .25rem;
            font-weight: 500;
        }

        .hs-gallery__caption-desc {
            font-size: .82rem;
            color: var(--lt-text-muted);
            font-weight: 300;
        }

        /* ─── FEATURES ──────────────────────────────────── */
        .hs-features__grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 1rem;
            margin-top: 1.4rem;
        }

        .hs-features__card {
            background: var(--lt-bg);
            border: 1px solid var(--lt-border);
            border-radius: var(--r-md);
            padding: 1.3rem 1.4rem;
            display: flex;
            gap: .9rem;
            align-items: flex-start;
            transition: var(--tr);
        }

        .hs-features__card:hover {
            background: var(--white);
            box-shadow: var(--shadow-sm);
            border-color: rgba(201, 169, 110, .3);
            transform: translateY(-2px);
        }

        .hs-features__icon {
            width: 42px;
            height: 42px;
            border-radius: 12px;
            background: rgba(201, 169, 110, .12);
            border: 1px solid rgba(201, 169, 110, .25);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.15rem;
            flex-shrink: 0;
        }

        .hs-features__body {
            /* feature text wrapper */
        }

        .hs-features__name {
            font-family: var(--fd);
            font-size: 1rem;
            font-weight: 500;
            color: var(--lt-text);
            margin-bottom: .28rem;
        }

        .hs-features__desc {
            margin: 0;
            font-size: .86rem;
            color: var(--lt-text-muted);
            font-weight: 300;
        }

        /* ─── PRICING ───────────────────────────────────── */
        .hs-pricing__grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
            gap: 1rem;
            margin-top: 1.4rem;
        }

        .hs-pricing__card {
            border-radius: var(--r-md);
            border: 1px solid var(--lt-border);
            padding: 1.7rem 1.3rem;
            background: var(--white);
            text-align: center;
            transition: var(--tr);
            position: relative;
            overflow: hidden;
        }

        .hs-pricing__card--featured {
            border-color: var(--gold);
            background: linear-gradient(160deg, rgba(201, 169, 110, .07) 0%, var(--white) 100%);
            box-shadow: 0 0 0 1px var(--gold), var(--shadow-md);
        }

        .hs-pricing__badge {
            position: absolute;
            top: 0;
            right: 0;
            background: var(--gold);
            color: var(--black);
            font-size: .65rem;
            font-weight: 700;
            letter-spacing: .1em;
            text-transform: uppercase;
            padding: .28rem .85rem;
            border-radius: 0 var(--r-md) 0 10px;
        }

        .hs-pricing__card:hover {
            transform: translateY(-4px);
            box-shadow: var(--shadow-md);
        }

        .hs-pricing__name {
            font-size: .75rem;
            font-weight: 500;
            letter-spacing: .12em;
            text-transform: uppercase;
            color: var(--warm-deep);
            margin-bottom: .4rem;
        }

        .hs-pricing__size {
            font-family: var(--fd);
            font-size: .92rem;
            color: var(--lt-text-muted);
            margin-bottom: .7rem;
        }

        .hs-pricing__amount {
            font-family: var(--fd);
            font-size: 1.9rem;
            font-weight: 600;
            color: var(--lt-text);
            line-height: 1;
            margin-bottom: .2rem;
            display: none;
        }

        .hs-contact__info a{
          color: var(--lt-text);
        }

        .hs-pricing__incl {
            font-size: .75rem;
            color: var(--gold-dark);
            margin-bottom: .9rem;
        }

        .hs-pricing__features {
            list-style: none;
            text-align: left;
            border-top: 1px solid var(--lt-border);
            padding-top: .85rem;
            display: flex;
            flex-direction: column;
            gap: .35rem;
        }

        .hs-pricing__feature-item {
            font-size: .8rem;
            color: var(--lt-text-muted);
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .hs-pricing__feature-item::before {
            content: '✦';
            color: var(--gold);
            font-size: .52rem;
            flex-shrink: 0;
        }

        /* ─── WHY US ────────────────────────────────────── */
        .hs-why__grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1rem;
            margin-top: 1.8rem;
        }

        .hs-why__item {
            display: flex;
            gap: .9rem;
            padding: 1.1rem 1.3rem;
            background: var(--lt-bg);
            border-radius: var(--r-sm);
            border: 1px solid var(--lt-border);
            align-items: flex-start;
            transition: var(--tr);
        }

        .hs-why__item:hover {
            background: var(--white);
            box-shadow: var(--shadow-sm);
            transform: translateX(3px);
        }

        .hs-why__number {
            font-family: var(--fd);
            font-size: 1.7rem;
            font-weight: 600;
            color: var(--gold);
            opacity: .5;
            line-height: 1;
            flex-shrink: 0;
            width: 30px;
        }

        .hs-why__body {
            /* text wrapper */
        }

        .hs-why__heading {
            font-family: var(--fd);
            font-size: 1rem;
            font-weight: 500;
            color: var(--warm-pale);
            margin-bottom: .3rem;
        }

        .hs-why__desc {
            margin: 0;
            font-size: .96rem;
            color: var(--gold-dark);
            font-weight: 500;
        }

        /* ─── COVERAGE ──────────────────────────────────── */
        .hs-coverage__wrap {
            display: flex;
            flex-wrap: wrap;
            gap: .65rem;
            margin-top: 1.4rem;
        }

        .hs-coverage__tag {
            background: var(--lt-bg);
            border: 1px solid var(--lt-border);
            border-radius: 9px;
            padding: .5rem .95rem;
            font-size: .83rem;
            color: var(--lt-text-muted);
            display: inline-flex;
            align-items: center;
            gap: 6px;
            transition: var(--tr);
            text-decoration: none;
        }

        .hs-coverage__tag::before {
            content: '◆';
            color: var(--gold);
            font-size: .48rem;
            flex-shrink: 0;
        }

        .hs-coverage__tag:hover {
            background: rgba(201, 169, 110, .1);
            border-color: rgba(201, 169, 110, .32);
            color: var(--lt-text);
        }

        .hs-coverage__note {
            margin-top: 1.1rem;
            font-size: .85rem;
            color: var(--lt-text-muted);
            font-weight: 300;
        }

        /* ─── FAQ ───────────────────────────────────────── */
        .hs-faq__list {
            display: flex;
            flex-direction: column;
            gap: .7rem;
            margin-top: 1.4rem;
        }

        .hs-faq__item {
            border: 1px solid var(--lt-border);
            border-radius: var(--r-sm);
            overflow: hidden;
            background: var(--white);
            transition: box-shadow .3s;
        }

        .hs-faq__item:hover {
            box-shadow: var(--shadow-sm);
        }

        .hs-faq__question {
            width: 100%;
            background: none;
            border: none;
            text-align: left;
            padding: 1.1rem 1.4rem;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 1rem;
            font-family: var(--fd);
            font-size: 1rem;
            font-weight: 500;
            color: var(--lt-text);
            transition: background .25s;
        }

        .hs-faq__question:hover {
            background: var(--lt-bg);
        }

        .hs-faq__question[aria-expanded="true"] {
            background: var(--lt-bg);
            color: var(--gold-dark);
        }

        .hs-faq__arrow {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            background: rgba(201, 169, 110, .12);
            border: 1px solid rgba(201, 169, 110, .25);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: .72rem;
            color: var(--gold-dark);
            flex-shrink: 0;
            transition: transform .35s ease;
        }

        .hs-faq__question[aria-expanded="true"] .hs-faq__arrow {
            transform: rotate(180deg);
        }

        .hs-faq__answer {
            max-height: 0;
            overflow: hidden;
            transition: max-height .48s cubic-bezier(.2, .9, .36, 1);
        }

        .hs-faq__answer.open {
            max-height: 600px;
        }

        .hs-faq__answer-inner {
            padding: .15rem 1.4rem 1.15rem;
            color: var(--lt-text-muted);
            font-size: .91rem;
            line-height: 1.75;
        }

        .hs-faq__answer-inner a {
            color: var(--gold-dark);
            border-bottom: 1px solid rgba(201, 169, 110, .3);
        }

        .hs-faq__answer-inner a:hover {
            color: var(--gold);
            border-color: var(--gold);
        }

        /* ─── TESTIMONIALS ──────────────────────────────── */
        .hs-reviews__grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 1.2rem;
            margin-top: 1.8rem;
        }

        .hs-reviews__card {
            background: var(--lt-bg);
            border-radius: var(--r-md);
            padding: 1.7rem;
            border: 1px solid var(--lt-border);
            position: relative;
            transition: var(--tr);
        }

        .hs-reviews__card::before {
            content: '\201C';
            position: absolute;
            top: .8rem;
            right: 1.2rem;
            font-family: var(--fd);
            font-size: 5rem;
            color: var(--gold);
            opacity: .13;
            line-height: 1;
        }

        .hs-reviews__card:hover {
            background: var(--white);
            box-shadow: var(--shadow-md);
            transform: translateY(-3px);
        }

        .hs-reviews__stars {
            display: flex;
            gap: 3px;
            margin-bottom: .7rem;
        }

        .hs-reviews__star {
            color: var(--gold);
            font-size: .85rem;
        }

        .hs-reviews__quote {
            font-family: var(--fd);
            font-size: .97rem;
            font-style: italic;
            color: var(--lt-text);
            line-height: 1.62;
            margin-bottom: .9rem;
        }

        .hs-reviews__footer {
            display: flex;
            align-items: center;
            gap: 9px;
        }

        .hs-reviews__avatar {
            width: 34px;
            height: 34px;
            border-radius: 50%;
            background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: var(--fd);
            font-size: .95rem;
            font-weight: 600;
            color: var(--black);
            flex-shrink: 0;
        }

        .hs-reviews__name {
            font-size: .83rem;
            font-weight: 500;
            color: var(--lt-text);
        }

        .hs-reviews__location {
            font-size: .73rem;
            color: var(--lt-text-muted);
        }

        /* ─── INTERNAL LINKS ────────────────────────────── */
        .hs-guides__grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
            gap: 1rem;
            margin-top: 1.4rem;
        }

        .hs-guides__card {
            background: var(--lt-bg);
            border: 1px solid var(--lt-border);
            border-radius: var(--r-md);
            padding: 1.3rem 1.4rem;
            display: flex;
            flex-direction: column;
            gap: .45rem;
            transition: var(--tr);
            text-decoration: none;
        }

        .hs-guides__card:hover {
            background: var(--white);
            box-shadow: var(--shadow-sm);
            border-color: rgba(201, 169, 110, .3);
            transform: translateY(-2px);
        }

        .hs-guides__label {
            font-size: .67rem;
            font-weight: 600;
            letter-spacing: .16em;
            text-transform: uppercase;
            color: var(--gold-dark);
        }

        .hs-guides__title {
            font-family: var(--fd);
            font-size: 1.02rem;
            font-weight: 500;
            color: var(--lt-text);
            line-height: 1.3;
        }

        .hs-guides__desc {
            font-size: .82rem;
            color: var(--lt-text-muted);
            font-weight: 300;
            line-height: 1.6;
        }

        .hs-guides__arrow {
            font-size: .8rem;
            color: var(--gold);
            font-weight: 500;
            margin-top: .1rem;
        }

        /* ─── CTA BANNER ────────────────────────────────── */
        .hs-cta {
            background: linear-gradient(130deg, #130e06 0%, var(--charcoal) 50%, #1a1208 100%);
            border-radius: var(--r-lg);
            padding: 3.5rem 2.5rem;
            text-align: center;
            border: 1px solid rgba(201, 169, 110, .2);
            position: relative;
            overflow: hidden;
            margin-bottom: 2rem;
        }

        .hs-cta::before {
            content: '';
            position: absolute;
            inset: 0;
            background:
                radial-gradient(ellipse 65% 55% at 30% 50%, rgba(201, 169, 110, .08) 0%, transparent 70%),
                radial-gradient(ellipse 55% 65% at 75% 50%, rgba(201, 169, 110, .05) 0%, transparent 70%);
            pointer-events: none;
        }

        .hs-cta__eyebrow {
            font-size: .7rem;
            font-weight: 600;
            letter-spacing: .2em;
            text-transform: uppercase;
            color: var(--gold);
            margin-bottom: .5rem;
        }

        .hs-cta__title {
            font-family: var(--fd);
            font-size: clamp(1.7rem, 3.5vw, 2.5rem);
            font-weight: 500;
            color: var(--warm-pale);
            margin-bottom: .5rem;
        }

        .hs-cta__title em {
            color: var(--gold-light);
            font-style: italic;
        }

        .hs-cta__body {
            color: var(--warm-light);
            font-weight: 300;
            max-width: 560px;
            margin: 0 auto .5rem;
            font-size: .95rem;
        }

        .hs-cta__phone {
            display: inline-block;
            font-family: var(--fd);
            font-size: clamp(1.7rem, 5vw, 2.4rem);
            font-weight: 600;
            color: var(--gold-light);
            margin: .7rem 0;
            letter-spacing: .02em;
            transition: color .25s;
        }

        .hs-cta__phone:hover {
            color: var(--gold);
        }

        .hs-cta__actions {
            display: flex;
            gap: .9rem;
            justify-content: center;
            flex-wrap: wrap;
            margin-top: 1.4rem;
        }

        .hs-cta__note {
            font-size: .76rem;
            color: rgba(212, 200, 188, .6);
            margin-top: .9rem;
        }

        /* ─── CONTACT ───────────────────────────────────── */
        .hs-contact__layout {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 2.5rem;
            align-items: start;
        }

        .hs-contact__row {
            display: flex;
            align-items: flex-start;
            gap: .8rem;
            padding: .75rem 0;
            border-bottom: 1px solid var(--lt-border);
        }

        .hs-contact__row:last-child {
            border-bottom: none;
        }

        .hs-contact__icon {
            width: 33px;
            height: 33px;
            border-radius: 9px;
            background: rgba(201, 169, 110, .1);
            border: 1px solid rgba(201, 169, 110, .2);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 13px;
            flex-shrink: 0;
        }

        .hs-contact__detail dt {
            font-size: .68rem;
            font-weight: 600;
            letter-spacing: .1em;
            text-transform: uppercase;
            color: var(--warm-deep);
            margin-bottom: 2px;
        }

        .hs-contact__detail dd {
            font-size: .9rem;
            color: var(--lt-text);
            margin: 0;
        }

        .hs-hours__heading {
            font-family: var(--fd);
            font-size: 1.25rem;
            font-weight: 500;
            color: var(--charcoal);
            margin: 1.4rem 0 .6rem;
        }

        .hs-hours__grid {
            display: grid;
            gap: .55rem;
            margin-top: .9rem;
        }

        .hs-hours__item {
            background: var(--lt-bg);
            border-radius: 10px;
            padding: .65rem 1rem;
            border: 1px solid var(--lt-border);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .hs-hours__day {
            font-size: .78rem;
            font-weight: 500;
            color: var(--lt-text-muted);
        }

        .hs-hours__time {
            font-size: .86rem;
            color: var(--lt-text);
        }

        .hs-contact__note {
            font-size: .82rem;
            margin-top: .85rem;
            color: var(--lt-text-muted);
            font-weight: 300;
        }

        /* Map block */
        .hs-map {
            border-radius: var(--r-md);
            overflow: hidden;
            box-shadow: var(--shadow-sm);
            border: 1px solid var(--lt-border);
        }

        .hs-map__inner {
            height: 240px;
            background: var(--lt-bg);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 10px;
            color: var(--warm);
            font-size: .84rem;
        }

        .hs-map__inner svg {
            opacity: .4;
        }

        .hs-map__caption {
            padding: .75rem 1rem;
            background: var(--lt-bg);
            font-size: .8rem;
            color: var(--warm-deep);
            font-style: italic;
            text-align: center;
            border-top: 1px solid var(--lt-border);
        }

        /* ─── WA FLOAT ──────────────────────────────────── */
        .hs-wa-float {
            position: fixed;
            bottom: 1.5rem;
            right: 1.5rem;
            width: 52px;
            height: 52px;
            background: #25d366;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 6px 22px rgba(37, 211, 102, .45);
            z-index: 200;
            text-decoration: none;
            transition: transform .3s, box-shadow .3s;
        }

        .hs-wa-float:hover {
            transform: scale(1.12);
            box-shadow: 0 10px 30px rgba(37, 211, 102, .6);
        }

        .hs-wa-float svg {
            width: 26px;
            height: 26px;
            fill: #fff;
        }

        /* ─── ANIMATIONS ────────────────────────────────── */
        @keyframes pulse {
            0%, 100% { opacity: 1; transform: scale(1) }
            50% { opacity: .4; transform: scale(.75) }
        }

        @keyframes fadeUp {
            from { opacity: 0; transform: translateY(22px) }
            to { opacity: 1; transform: translateY(0) }
        }

        @keyframes fadeDown {
            from { opacity: 0; transform: translateY(-14px) }
            to { opacity: 1; transform: translateY(0) }
        }

        .reveal {
            opacity: 0;
            transform: translateY(18px);
            transition: opacity .72s ease, transform .72s ease;
        }

        .reveal.visible {
            opacity: 1;
            transform: translateY(0);
        }

        /* ─── RESPONSIVE ────────────────────────────────── */
        @media(max-width:900px) {
            .hs-about__grid,
            .hs-contact__layout,
            .hs-why__grid {
                grid-template-columns: 1fr;
            }

            .hs-stats {
                grid-template-columns: repeat(2, 1fr);
            }

            .hs-about__visual {
                position: relative;
                top: 0;
            }
        }

        @media(max-width:600px) {
            .hs-hero {
                padding-bottom: 0;
                min-height: auto;
                padding-top: 3.5rem;
            }

            .hs-hero__content {
                padding: 1.5rem 1rem 1.25rem;
            }

            .hs-hero__badge {
                font-size: .65rem;
                padding: .42rem .9rem;
                margin-bottom: 1rem;
            }

            .hs-trust {
                position: static;
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 0;
                border-top: 1px solid rgba(201, 169, 110, .14);
                padding: .6rem .5rem;
                margin-top: 0;
                backdrop-filter: none;
                -webkit-backdrop-filter: none;
            }

            .hs-trust__item {
                border-right: none;
                border-bottom: 1px solid rgba(201, 169, 110, .1);
                padding: .55rem .7rem;
                gap: 7px;
                font-size: .75rem;
            }

            .hs-trust__item:nth-child(odd) {
                border-right: 1px solid rgba(201, 169, 110, .1);
            }

            .hs-trust__item:nth-last-child(-n+2) {
                border-bottom: none;
            }

            .hs-trust__icon {
                width: 24px;
                height: 24px;
                font-size: 11px;
            }

            .hs-trust__label {
                font-size: .76rem;
            }

            .hs-section {
                padding: 1.75rem 1.1rem;
                border-radius: 18px;
            }

            .hs-section::before {
                display: none;
            }

            .hs-section-title {
                font-size: 1.6rem;
            }

            .hs-stats {
                grid-template-columns: repeat(2, 1fr);
                gap: .65rem;
            }

            .hs-cta {
                padding: 2rem 1.2rem;
                border-radius: 18px;
            }

            .hs-why__grid {
                grid-template-columns: 1fr;
            }

            .hs-hero__actions {
                gap: .6rem;
            }

            .hs-btn--primary,
            .hs-btn--outline {
                padding: .8rem 1.5rem;
                font-size: .8rem;
            }

            .container {
                padding: 0 1rem;
            }
        }

        @media(max-width:370px) {
            .hs-trust {
                grid-template-columns: 1fr;
            }

            .hs-trust__item:nth-child(odd) {
                border-right: none;
            }

            .hs-trust__item:nth-last-child(-n+2) {
                border-bottom: 1px solid rgba(201, 169, 110, .1);
            }

            .hs-trust__item:last-child {
                border-bottom: none;
            }
        }
/* location page  */




/* blog detail page */
  .blog-container .blog-content h2 {
    margin-top: 2.5rem;
    margin-bottom: 1rem;
    color: var(--gold-dark);
    font-weight: 600;
}

.blog-container .blog-content h3 {
    margin-top: 1.8rem;
    margin-bottom: 0.8rem;
    font-weight: 600;
}

.blog-container .blog-content p {
    line-height: 1.7;
    color: var(--text-muted);
    margin-bottom: 1.2rem;
}

.blog-container .blog-content ul,
.blog-container .blog-content ol {
    margin-bottom: 1.2rem;
    padding-left: 1.5rem;
}

.blog-container .blog-content li {
    margin-bottom: 0.5rem;
    color: var(--text-muted);
}

.blog-container .blog-content table {
    width: 100%;
    margin: 1.5rem 0;
    border-collapse: collapse;
    background: var(--bg-soft);
    border-radius: 1rem;
    overflow: hidden;
}

.blog-container .blog-content th,
.blog-container .blog-content td {
    border: 1px solid var(--border-light);
    padding: 0.75rem;
    text-align: left;
}

.blog-container .blog-content th {
    background: var(--gold-light);
    color: var(--text-dark);
}

.blog-container .tip-box {
    background: var(--gold-light);
    border-left: 5px solid var(--gold);
    padding: 1.2rem 1.5rem;
    border-radius: 1rem;
    margin: 2rem 0;
}

.blog-container .faq-item {
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--border-light);
    padding-bottom: 1rem;
}

.blog-container .faq-question {
    font-weight: 700;
    color: var(--gold-dark);
    margin-bottom: 0.5rem;
    font-size: 1.1rem;
}

.blog-container .cta-box {
    background: linear-gradient(135deg, #1E1A17 0%, #2A221A 100%);
    color: white;
    padding: 2rem;
    border-radius: 1.5rem;
    text-align: center;
    margin: 2rem 0;
}

.blog-container .cta-box h3 {
    color: var(--gold);
    margin-bottom: 1rem;
}

.blog-container .cta-box .btn-gold {
    background: var(--gold);
    color: var(--text-dark);
    padding: 0.75rem 2rem;
    border-radius: 40px;
    font-weight: 600;
    text-decoration: none;
    display: inline-block;
    transition: 0.3s;
}

.blog-container .cta-box .btn-gold:hover {
    background: var(--gold-dark);
    color: white;
    transform: translateY(-2px);
}

.blog-container .related-links {
    background: var(--bg-soft);
    padding: 1.5rem;
    border-radius: 1rem;
    margin-top: 2rem;
}

.blog-container .related-links a {
    color: var(--gold-dark);
    text-decoration: none;
}

.blog-container .related-links a:hover {
    text-decoration: underline;
}

.blog-container footer {
    background: #1a1a1a;
    color: #ccc;
    padding: 2rem 0;
    margin-top: 3rem;
    text-align: center;
}

.blog-container .location-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 1rem;
}

.blog-container .location-links a {
    background: var(--gold-light);
    color: var(--gold-dark);
    padding: 0.4rem 0.8rem;
    border-radius: 20px;
    font-size: 0.85rem;
    text-decoration: none;
    transition: background 0.2s;
}

.blog-container .location-links a:hover {
    background: var(--gold);
    color: #fff;
}

/* Image responsiveness */
.blog-container .blog-content img {
    max-width: 100%;
    height: auto;
    border-radius: 1rem;
    margin: 2rem 0;
}

/* Mobile adjustments */
@media (max-width: 576px) {
    .blog-container .blog-header {
        padding: 2rem 0 1.5rem;
    }

    .blog-container .blog-header h1 {
        font-size: 2rem;
    }

    .blog-container {
        padding: 1rem 1rem;
    }
}

.blog-container .blog-header {
    background: linear-gradient(135deg, var(--bg-soft) 0%, #ffffff 100%);
    padding: 4rem 0 2rem;
    border-bottom: 1px solid var(--border-light);
}
/* blog detail page */










.location-tab-section{
      margin-bottom: 30px;
}

 .nav-tabs {
      border-bottom: 2px solid #eee;
      flex-wrap: nowrap;
      overflow-x: auto;
      white-space: nowrap;
      -webkit-overflow-scrolling: touch;
    
    }
    .nav-tabs .nav-link {
      border: none;
      color: var(--text-muted);
      font-weight: 500;
      padding: 0.75rem 1.2rem;
      margin-right: 0.2rem;
      transition: all 0.3s;
    }
    .nav-tabs .nav-link:hover {
      color: var(--gold-dark);
      background: var(--gold-light);
      border-radius: 10px 10px 0 0;
    }
    .nav-tabs .nav-link.active {
      color: #fff;
      background: var(--gold);
      border-radius: 12px 12px 0 0;
      font-weight: 600;
      border: none;
    }
    .tab-content {
      margin-top: 1.5rem;
    }
    .tab-pane {
      opacity: 0;
      transition: opacity 0.25s ease;
    }
    .tab-pane.show.active {
      opacity: 1;
    }
    .area-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
      gap: 0.8rem;
    }
    .area-card {
      background: white;
      border: 1px solid #e9e2d9;
      border-radius: 12px;
      padding: 1.2rem;
      text-align: center;
      transition: transform 0.3s, box-shadow 0.3s;
      text-decoration: none;
      color: var(--text-dark);
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 500;
    }
    .area-card:hover {
      transform: translateY(-3px);
      box-shadow: 0 6px 20px rgba(0,0,0,0.08);
      border-color: var(--gold);
    }
    .area-card i {
      margin-right: 6px;
      color: var(--gold);
    }
    /* Scrollbar styling for nav-tabs */
    .nav-tabs::-webkit-scrollbar { height: 4px; }
    .nav-tabs::-webkit-scrollbar-thumb { background: var(--gold); border-radius: 10px; }
    .nav-tabs::-webkit-scrollbar-track { background: #f5f5f5; }