/* =====================================================================
   CS Promoters & Builders — components.css
   Reusable pieces: logo, buttons, badges, icons, cards, forms, media.
   ===================================================================== */

/* ------------------------------ Icons ------------------------------- */
.ico { flex-shrink: 0; }
.ico--xs { height: .875rem; width: .875rem; }
.ico--sm { height: 1rem; width: 1rem; }
.ico--md { height: 1.25rem; width: 1.25rem; }
.ico--lg { height: 1.75rem; width: 1.75rem; }
.ico--xl { height: 2.5rem; width: 2.5rem; }
.ico--menu { height: 1.75rem; width: 1.75rem; }

/* ------------------------------ Logo -------------------------------- */
.logo { display: flex; align-items: center; gap: .75rem; }
.logo__emblem { height: 3rem; width: 3rem; flex-shrink: 0; transition: transform .5s ease; }
.logo:hover .logo__emblem { transform: rotate(6deg); }
.logo__text { display: inline-block; line-height: 1; }
.logo__title { display: block; font-size: 1.55rem; font-weight: 700; letter-spacing: -.025em; }
.logo__title-sub { color: #fff; }
.logo--dark .logo__title-sub { color: var(--color-ink); }
.logo__title-sub--light { color: #fff; }
.logo__tag {
  margin-top: .25rem;
  display: block;
  font-size: .6rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .34em;
  color: var(--color-sage);
}
.logo--dark .logo__tag { color: var(--color-leaf); }
.logo__tag--sage { color: var(--color-sage); }

/* ------------------------------ Buttons ----------------------------- */
.btn { display: inline-flex; align-items: center; justify-content: center; transition: background-color .25s ease, transform .25s ease; }
.btn--pill { border-radius: 9999px; }
.btn--gold { background: var(--color-gold); color: var(--color-ink); }
.btn--gold:hover { background: var(--color-gold-light); }
.btn--leaf { background: var(--color-leaf); color: #fff; }
.btn--leaf:hover { background: var(--color-leaf-deep); }

.nav__cta {
  gap: .5rem;
  padding: .75rem 1.25rem;
  font-size: .875rem;
  font-weight: 800;
}
.btn--hero {
  gap: .75rem;
  padding: 1rem 1.75rem;
  font-size: .875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  box-shadow: 0 20px 50px -20px rgba(212,160,23,.75);
}
.btn__arrow { transition: transform .25s ease; }
.group:hover .btn__arrow { transform: translateX(.25rem); }

/* ------------------------------ Navlink ----------------------------- */
.navlink {
  position: relative;
  font-size: .875rem;
  font-weight: 700;
  letter-spacing: .025em;
  color: var(--color-ink2);
  transition: color .25s ease;
}
.navlink:hover { color: var(--color-leaf); }
.navlink::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  height: 2px;
  width: 0;
  background: linear-gradient(90deg, #d4a017, #4caf50);
  transition: width .35s ease;
}
.navlink:hover::after { width: 100%; }

/* ------------------------------ Badges ------------------------------ */
.badge {
  display: inline-flex;
  align-items: center;
  border-radius: 9999px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.badge--gold {
  gap: .75rem;
  border: 1px solid rgba(240,208,120,.45);
  background: rgba(12,26,18,.35);
  padding: .375rem 1rem;
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .3em;
  color: var(--color-gold-light);
}
.badge--light {
  gap: .5rem;
  border: 1px solid rgba(255,255,255,.2);
  background: rgba(255,255,255,.1);
  padding: .375rem 1rem;
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .25em;
  color: rgba(247,244,232,.9);
}
.badge__dot {
  position: relative;
  height: .375rem;
  width: .375rem;
  border-radius: 9999px;
  background: var(--color-leaf-bright);
}

/* --------------------------- Quick fields --------------------------- */
.quickfield { border-radius: .75rem; background: rgba(250,248,240,.95); padding: .75rem 1rem; text-align: left; }
.quickfield__label { display: block; font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .2em; color: var(--color-leaf); }
.quickfield__value {
  margin-top: .125rem;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .875rem;
  font-weight: 600;
  color: var(--color-ink);
}

/* --------------------------- Service card --------------------------- */
.service-card {
  position: relative;
  height: 100%;
  overflow: hidden;
  border-radius: 1rem;
  border: 1px solid var(--color-line);
  background: rgba(250,248,240,.95);
  padding: 2rem;
}
.service-card__n { position: absolute; right: 1.5rem; top: 1.5rem; font-size: 3rem; color: var(--color-line); }
.service-card__icon {
  display: grid;
  height: 3.5rem;
  width: 3.5rem;
  place-items: center;
  border-radius: .75rem;
  background: var(--color-ink);
  color: var(--color-gold-light);
  transition: background-color .3s ease, color .3s ease;
}
.service-card.group:hover .service-card__icon { background: var(--color-leaf); color: #fff; }
.service-card__title { margin-top: 1.5rem; font-size: 1.5rem; font-weight: 600; color: var(--color-ink); }
.service-card__desc { margin-top: .75rem; font-size: .97rem; line-height: 1.625; color: rgba(20,38,28,.75); }
.service-card__bar {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: .25rem;
  transform-origin: left;
  transform: scaleX(0);
  background: linear-gradient(to right, var(--color-gold), var(--color-moss), var(--color-leaf));
  transition: transform .5s ease;
}
.service-card.group:hover .service-card__bar { transform: scaleX(1); }

/* --------------------------- Property card -------------------------- */
.property-card {
  display: flex;
  height: 100%;
  flex-direction: column;
  overflow: hidden;
  border-radius: 1.5rem;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.property-card__media { position: relative; height: 20rem; overflow: hidden; }
.property-card__img { height: 100%; width: 100%; object-fit: cover; transition: transform 1.2s ease; }
.property-card.group:hover .property-card__img { transform: scale(1.1); }
.property-card__media-veil { position: absolute; inset: 0; background: linear-gradient(to top, rgba(12,26,18,.9), rgba(12,26,18,.2), transparent); }
.property-card__tag {
  position: absolute; left: 1rem; top: 1rem;
  border-radius: 9999px;
  background: var(--color-gold);
  padding: .25rem .75rem;
  font-size: .68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--color-ink);
}
.property-card__status {
  position: absolute; right: 1rem; top: 1rem;
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 9999px;
  background: rgba(12,26,18,.45);
  padding: .25rem .75rem;
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--color-ivory);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.property-card__overlay {
  position: absolute; bottom: 1rem; left: 1rem; right: 1rem;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  color: var(--color-ivory);
}
.property-card__type { font-size: .7rem; text-transform: uppercase; letter-spacing: .25em; color: var(--color-gold-light); }
.property-card__name { font-size: 1.5rem; font-weight: 600; line-height: 1.25; }
.property-card__cta-circle {
  display: grid;
  height: 2.75rem;
  width: 2.75rem;
  place-items: center;
  border-radius: 9999px;
  background: var(--color-leaf);
  color: #fff;
  transition: transform .3s ease, background-color .3s ease, color .3s ease;
}
.property-card.group:hover .property-card__cta-circle { transform: rotate(45deg); background: var(--color-gold); color: var(--color-ink); }
.property-card__cta-circle .ico { transform: rotate(-45deg); transition: transform .3s ease; }
.property-card.group:hover .property-card__cta-circle .ico { transform: rotate(0deg); }
.property-card__body { display: flex; flex: 1; flex-direction: column; padding: 1.5rem; color: #fff; }
.property-card__city { display: flex; align-items: center; gap: .5rem; font-size: .875rem; font-weight: 700; color: var(--color-gold-light); }
.property-card__specs {
  margin-top: 1rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .75rem;
  border-top: 1px solid rgba(255,255,255,.1);
  border-bottom: 1px solid rgba(255,255,255,.1);
  padding: 1rem 0;
  font-size: .875rem;
  color: rgba(255,255,255,.82);
}
.property-card__spec { display: flex; align-items: center; gap: .5rem; }
.property-card__price-row { margin-top: 1rem; display: flex; align-items: flex-end; justify-content: space-between; }
.property-card__price-label { font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; color: rgba(255,255,255,.55); }
.property-card__price { font-size: 1.5rem; font-weight: 700; color: #fff; }
.property-card__enquire {
  border-radius: 9999px;
  background: var(--color-gold);
  padding: .5rem 1rem;
  font-size: .75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--color-ink);
  transition: background-color .25s ease;
}
.property-card__enquire:hover { background: var(--color-gold-light); }

/* --------------------------- Location card -------------------------- */
.location-card {
  border-radius: 1rem;
  border: 1px solid rgba(212,160,23,.25);
  background: rgba(20,38,28,.65);
  padding: 1.25rem;
  transition: border-color .25s ease, background-color .25s ease;
}
.location-card:hover { border-color: var(--color-gold); background: rgba(30,58,42,.75); }
.location-card__row { display: flex; align-items: center; justify-content: space-between; }
.location-card__name { font-size: 1.5rem; color: var(--color-ivory); }
.location-card__n { color: var(--color-sage); }
.location-card__sub { margin-top: .25rem; font-size: .7rem; text-transform: uppercase; letter-spacing: .1em; color: rgba(247,244,232,.55); }

/* ---------------------------- Testimonial --------------------------- */
.testimonial {
  display: flex;
  height: 100%;
  flex-direction: column;
  border-radius: 1.5rem;
  border: 1px solid var(--color-line);
  background: rgba(250,248,240,.9);
  padding: 2rem;
}
.testimonial__quote { margin-top: 1.25rem; flex: 1; font-size: 1.125rem; font-style: italic; line-height: 1.625; color: var(--color-ink); }
.testimonial__cap { margin-top: 1.25rem; border-top: 1px solid var(--color-line); padding-top: 1rem; }
.testimonial__name { font-weight: 700; color: var(--color-ink); }
.testimonial__role { font-size: .875rem; color: rgba(20,38,28,.7); }

/* ---------------------------- Filter btn ---------------------------- */
.filter-btn {
  border-radius: 9999px;
  border: 1px solid rgba(255,255,255,.2);
  background: rgba(255,255,255,.08);
  padding: .625rem 1.25rem;
  font-size: .875rem;
  font-weight: 700;
  color: #fff;
  transition: border-color .25s ease, color .25s ease, background-color .25s ease;
}
.filter-btn:hover { border-color: var(--color-gold-light); color: var(--color-gold-light); }
.filter-btn.is-active { border-color: var(--color-gold); background: var(--color-gold); color: var(--color-ink); }

/* --------------------------- Contact card --------------------------- */
.contact-card {
  display: block;
  border-radius: 1rem;
  border: 1px solid rgba(240,208,120,.25);
  background: rgba(12,26,18,.55);
  padding: 1.25rem;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: border-color .25s ease;
}
.contact-card:hover { border-color: var(--color-gold); }
.contact-card__icon { display: grid; height: 2.5rem; width: 2.5rem; place-items: center; border-radius: 9999px; background: rgba(47,107,58,.2); color: var(--color-gold-light); }
.contact-card__label { margin-top: .75rem; font-size: .7rem; text-transform: uppercase; letter-spacing: .1em; color: rgba(247,244,232,.6); }
.contact-card__value { font-size: .875rem; font-weight: 600; color: var(--color-ivory); }

/* --------------------------- Contact form --------------------------- */
.contact-form {
  border-radius: 1.5rem;
  border: 1px solid rgba(240,208,120,.25);
  background: rgba(250,248,240,.95);
  padding: 1.75rem;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.contact-form__title { font-size: 1.5rem; font-weight: 600; color: var(--color-ink); }
.contact-form__sub { margin-top: .25rem; font-size: .875rem; color: rgba(20,38,28,.7); }
.contact-form__grid { margin-top: 1.5rem; display: grid; gap: 1rem; }
.contact-form__message { margin-top: 1rem; }
.contact-form__submit {
  margin-top: 1.5rem;
  width: 100%;
  gap: .75rem;
  padding: 1rem 1.75rem;
  font-size: .875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  border-radius: 9999px;
}
.contact-form__submit-default { display: inline-flex; align-items: center; gap: .75rem; }

.field { display: block; }
.field__label { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .2em; color: var(--color-leaf); }
.field__input {
  margin-top: .375rem;
  width: 100%;
  border-radius: .75rem;
  border: 1px solid var(--color-line);
  background: rgba(244,241,228,.7);
  padding: .75rem 1rem;
  font-size: .875rem;
  color: var(--color-ink);
  outline: none;
  transition: border-color .25s ease, background-color .25s ease;
}
.field__input:focus { border-color: var(--color-leaf); background: var(--color-paper); }
.field__textarea { resize: vertical; }

/* ---------------------------- Float WA ------------------------------ */
.float-wa {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 40;
  display: grid;
  height: 3.5rem;
  width: 3.5rem;
  place-items: center;
  border-radius: 9999px;
  background: #25D366;
  color: #fff;
  box-shadow: 0 15px 40px -10px rgba(37,211,102,.7);
  transition: transform .25s ease;
}
.float-wa:hover { transform: scale(1.1); }
.float-wa__ring { position: absolute; inset: 0; border-radius: 9999px; }

/* --------------------------- Video 3D stage ------------------------- */
.video3d { position: absolute; inset: 0; overflow: hidden; }
.video3d__poster { position: absolute; inset: 0; height: 100%; width: 100%; object-fit: cover; transform: scale(1.02); }
.video3d__layer { position: absolute; inset: -8%; }
.video3d__video { height: 100%; width: 100%; object-fit: cover; }
.video3d__rings { pointer-events: none; position: absolute; inset: 0; display: grid; place-items: center; opacity: .3; }
.ring { grid-area: 1 / 1; border-radius: 9999px; border: 1px solid; }
.ring--gold { height: 72vmax; width: 72vmax; border-color: rgba(240,208,120,.2); }
.ring--sage { height: 50vmax; width: 50vmax; border-color: rgba(168,198,134,.2); }
.ring--gold2 { height: 32vmax; width: 32vmax; border-color: rgba(212,160,23,.25); }

/* ------------------------------ Kolam ------------------------------- */
.kolam { pointer-events: none; position: absolute; }
.kolam--left { left: -4rem; top: 5rem; height: 18rem; width: 18rem; color: rgba(240,208,120,.3); }
.kolam--right { right: -5rem; bottom: 3rem; height: 20rem; width: 20rem; color: rgba(168,198,134,.25); }