/* =============================================================
   Skyline Properties - Landing Page Stylesheet
   Colors are driven by CSS variables set inline in header.php
   from data/config.php - change them there to reskin the site.
   ============================================================= */

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

html { scroll-behavior: smooth; overflow-x: hidden; }

section[id], #home { scroll-margin-top: 90px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

.skip-link {
  position: fixed;
  top: -60px;
  left: 12px;
  z-index: 3000;
  background: var(--color-primary);
  color: #fff;
  padding: 12px 18px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 0.85rem;
  transition: top 0.2s ease;
}
.skip-link:focus { top: 12px; }

.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0%;
  background: var(--color-accent);
  z-index: 3000;
  transition: width 0.1s linear;
}

body {
  font-family: 'Manrope', sans-serif;
  color: var(--color-dark-text);
  background: #fff;
  line-height: 1.6;
  overflow-x: hidden;
}

.legal-layout {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.legal-layout .legal-page,
.legal-layout .state-page {
  flex: 1;
}

h1, h2, h3, h4 {
  font-family: 'Fraunces', serif;
  line-height: 1.25;
  color: var(--color-primary);
}

img { max-width: 100%; display: block; }

a { text-decoration: none; color: inherit; }

ul { list-style: none; }

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 28px;
  border-radius: 4px;
  font-weight: 600;
  font-size: 0.95rem;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all 0.25s ease;
  white-space: nowrap;
  /* Buttons sit on their own solid/outlined background, never on a bare
     photo, so they never need the heavy text-shadow a parent hero/overlay
     text block sets for legibility — without this reset it inherits down
     and makes button labels look soft/blurry instead of crisp. */
  text-shadow: none;
}
.btn--accent {
  background: var(--color-accent);
  color: var(--color-primary);
  box-shadow: 0 8px 20px rgba(201,169,97,0.3);
}
.btn--accent:hover { filter: brightness(1.08); transform: translateY(-2px); box-shadow: 0 12px 26px rgba(201,169,97,0.45); }
.btn--accent:active { transform: translateY(0); box-shadow: 0 4px 12px rgba(201,169,97,0.35); }
.btn--outline {
  background: transparent;
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.btn--outline:hover { background: var(--color-primary); color: #fff; transform: translateY(-2px); }
.btn--outline:active { transform: translateY(0); }
.btn--outline-light {
  background: transparent;
  border-color: #fff;
  color: #fff;
}
.btn--outline-light:hover { background: #fff; color: var(--color-primary); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,0.2); }
.btn--outline-light:active { transform: translateY(0); }
.btn--sm { padding: 9px 16px; font-size: 0.85rem; }
.btn--block { width: 100%; }
.btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
}
.badge--location { background: rgba(255,255,255,0.15); color: #fff; }
.badge--eyebrow {
  background: rgba(201,169,97,0.15);
  border: 1px solid rgba(201,169,97,0.5);
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 0.75rem;
}

/* ---------- Header ---------- */
.site-header {
  background: #fff;
  box-shadow: 0 2px 10px rgba(0,0,0,0.06);
  position: sticky;
  top: 0;
  z-index: 500;
  transition: padding 0.25s ease, box-shadow 0.25s ease;
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  gap: 20px;
  transition: padding 0.25s ease;
}
.site-header.is-scrolled .site-header__inner { padding: 8px 20px; }
.site-header.is-scrolled { box-shadow: 0 6px 20px rgba(0,0,0,0.1); }
.logo img { height: 66px; width: auto; transition: height 0.25s ease; }
.site-header.is-scrolled .logo img { height: 50px; }

.project-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 180px;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
}
.project-logo img {
  height: 72px;
  width: auto;
  display: block;
  background: transparent;
  border: none;
  box-shadow: none;
  filter: none;
}
.project-nav ul { gap: 18px; }
.project-nav a {
  letter-spacing: 0.03em;
  font-weight: 600;
  opacity: 0.9;
}
.project-nav a:hover { opacity: 1; }

.main-nav ul { display: flex; gap: 24px; flex-wrap: wrap; justify-content: flex-end; row-gap: 6px; }
.main-nav a {
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--color-dark-text);
  position: relative;
}
.main-nav a::after {
  content: '';
  position: absolute;
  left: 0; bottom: -4px;
  width: 0; height: 2px;
  background: var(--color-accent);
  transition: width 0.25s ease;
}
.main-nav a:hover::after,
.main-nav a.is-active::after { width: 100%; }
.main-nav a.is-active { color: var(--color-accent); }
.legal-header__nav a::after { display: none; }
.main-nav__logo { display: none; }
.main-nav__close { display: none; }
.main-nav__call { display: none; }

.site-header__actions { display: flex; align-items: center; gap: 16px; }

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
}
.nav-toggle span {
  width: 24px; height: 2px;
  background: var(--color-primary);
  transition: all 0.25s ease;
}

/* ---------- Hero ---------- */
.hero { position: relative; }
.hero__slider {
  position: relative;
  min-height: 640px;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.hero__slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform: scale(1.08);
  transition: opacity 1s ease, transform 7s ease-out;
}
.hero__slide.is-active { opacity: 1; transform: scale(1); }
.hero__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(10,10,20,0.15) 0%, rgba(10,10,20,0.65) 100%),
    linear-gradient(90deg, rgba(10,10,20,0.75) 0%, rgba(10,10,20,0.4) 50%, rgba(10,10,20,0.1) 78%);
}
.hero__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  background: rgba(255,255,255,0.15);
  border: none;
  color: #fff;
  width: 42px; height: 42px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1rem;
  transition: background 0.2s ease;
}
.hero__arrow:hover { background: rgba(255,255,255,0.3); }
.hero__arrow--prev { left: 20px; }
.hero__arrow--next { right: 20px; }
.hero__dots {
  position: absolute;
  bottom: 48px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 5;
}
.hero__dots span {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.4);
  cursor: pointer;
}
.hero__dots span.is-active { background: var(--color-accent); }

.hero__content {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 40px;
  align-items: center;
  width: 100%;
  padding-top: 40px;
  padding-bottom: 40px;
}
.hero__text { color: #fff; text-shadow: 0 2px 20px rgba(0,0,0,0.6), 0 1px 4px rgba(0,0,0,0.8); }
.hero__text h1 { font-size: 3rem; color: #fff; margin: 16px 0 8px; }

/* Single-project hero text: no glass panel - a slim gold accent rule
   marks it instead, legibility carried entirely by the overlay gradient
   and text-shadow above. Cleaner, no dark box sitting on the photo. */
.project-hero__content .hero__text {
  position: relative;
  padding-left: 22px;
  border-left: 3px solid var(--color-accent);
}
.hero__subheading { font-size: 1.3rem; margin-bottom: 10px; }
.hero__desc {
  font-size: 1.05rem;
  line-height: 1.7;
  opacity: 0.92;
  max-width: 480px;
  margin: 14px 0 26px;
}
.hero__trust-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,0.2);
  list-style: none;
  font-size: 0.85rem;
  font-weight: 600;
  opacity: 0.9;
}
.hero__trust-strip li { position: relative; padding-left: 18px; }
.hero__trust-strip li::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--color-accent);
}
.hero__price { margin-bottom: 24px; font-size: 1.05rem; opacity: 0.95; }
.hero__cta-group { display: flex; gap: 14px; flex-wrap: wrap; }

.hero__scroll-cue {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  color: rgba(255,255,255,0.85);
  animation: bounce 2s infinite;
}
@keyframes bounce {
  0%, 100% { transform: translate(-50%, 0); }
  50% { transform: translate(-50%, 8px); }
}

/* Quick enquiry form (in hero) - frosted glass over the hero photo */
.quick-enquiry {
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgba(255,255,255,0.5);
  border-radius: 10px;
  padding: 20px 22px;
  box-shadow: 0 25px 60px rgba(0,0,0,0.3);
  max-width: 340px;
  margin-left: auto;
}
@supports not (backdrop-filter: blur(1px)) {
  .quick-enquiry { background: rgba(255,255,255,0.97); }
}
.footer-enquiry__form {
  position: relative;
  background: #fff;
  border-radius: 10px;
  padding: 18px 20px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.25);
  max-width: 380px;
  margin-left: auto;
}
.quick-enquiry h3 {
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 12px;
  color: var(--color-primary);
}
.footer-enquiry__form h3 {
  font-size: 1.05rem;
  margin-bottom: 10px;
}
.form-group { margin-bottom: 8px; }
.form-group label {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  margin-bottom: 3px;
  color: var(--color-muted-text);
}
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 8px 10px;
  border: 1.5px solid rgba(201,169,97,0.5);
  border-radius: 5px;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--color-dark-text);
  resize: vertical;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.form-group textarea { min-height: 40px; }
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(201,169,97,0.2); }
.form-group input.has-error,
.form-group select.has-error,
.form-group textarea.has-error { border-color: #d64545; }
.form-group input::placeholder,
.form-group textarea::placeholder { color: #767676; opacity: 1; }

.char-counter {
  display: block;
  text-align: right;
  font-size: 0.68rem;
  color: var(--color-muted-text);
  margin-top: 2px;
}
.char-counter.is-near-limit { color: #d64545; }

/* Quick enquiry uses a minimal underline style instead of boxed inputs.
   Labels stay for screen readers (placeholders alone aren't a real label). */
.quick-enquiry .form-group label {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
}
.quick-enquiry .form-group input,
.quick-enquiry .form-group select,
.quick-enquiry .form-group textarea {
  border: none;
  border-bottom: 2px solid rgba(201,169,97,0.6);
  border-radius: 0;
  padding: 6px 2px;
  background: transparent;
  resize: none;
  font-weight: 600;
}
.quick-enquiry .form-group textarea { min-height: 30px; }
.quick-enquiry .btn,
.footer-enquiry__form .btn,
.popup-split__form .btn {
  padding: 9px 20px;
  font-size: 0.85rem;
  border-radius: 24px;
}
.quick-enquiry .form-group input:focus,
.quick-enquiry .form-group select:focus,
.quick-enquiry .form-group textarea:focus {
  border-bottom-color: var(--color-accent);
  box-shadow: none;
}
.quick-enquiry .form-group input.has-error,
.quick-enquiry .form-group select.has-error,
.quick-enquiry .form-group textarea.has-error { border-bottom-color: #d64545; }
.quick-enquiry .btn--accent {
  background: var(--color-primary);
  color: #fff;
  letter-spacing: 0.5px;
}
.quick-enquiry .btn--accent:hover { background: #10101f; }

.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.field-error {
  display: block;
  color: #d64545;
  font-size: 0.68rem;
  font-weight: 600;
  margin-top: 3px;
  min-height: 1em;
}

.btn { position: relative; }
.btn__spinner {
  display: none;
  width: 16px; height: 16px;
  border: 2px solid rgba(255,255,255,0.4);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
.btn.is-loading .btn__label { visibility: hidden; }
.btn.is-loading .btn__spinner {
  display: block;
  position: absolute;
  left: 50%; top: 50%;
  margin: -8px 0 0 -8px;
}
@keyframes spin { to { transform: rotate(360deg); } }

.checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 0.68rem;
  color: var(--color-muted-text);
  margin-bottom: 10px;
  cursor: pointer;
}
.checkbox-label input { margin-top: 3px; }

.form-response {
  margin-top: 6px;
  font-size: 0.82rem;
  font-weight: 600;
  min-height: 1.2em;
}
.form-response.is-success { color: #1a7f37; }
.form-response.is-error { color: #c62828; }

/* ---------- Section heading ---------- */
.section-heading { margin-bottom: 40px; }
.section-heading--center { text-align: center; }
.section-heading__eyebrow {
  display: inline-block;
  color: var(--color-accent);
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-size: 0.8rem;
  margin-bottom: 10px;
}
.section-heading h2 { font-size: 2.1rem; max-width: 700px; }
.section-heading--center h2 { margin: 0 auto; }
.section-heading__sub {
  color: var(--color-muted-text);
  margin-top: 12px;
  font-size: 1rem;
}
.section-heading--center .section-heading__sub { max-width: 550px; margin-left: auto; margin-right: auto; }

/* ---------- Scroll reveal ----------
   Hidden state only applies once JS has confirmed it's running (html.js) and
   will handle un-hiding it. If JS fails/is blocked, .reveal content is never
   hidden in the first place - it just displays normally. See main.js. */
.js .reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* ---------- Projects ---------- */
.projects { padding: 90px 0; background: var(--color-light); }

.project-card {
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,0.06);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  padding: 18px 18px 0;
}
.project-card:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(0,0,0,0.1); }

.project-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.project-card__brand { display: flex; flex-direction: column; line-height: 1.2; }
.project-card__developer {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--color-accent);
}
.project-card__project-name {
  font-family: 'Fraunces', serif;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--color-primary);
}
.project-card__view {
  flex-shrink: 0;
  width: 34px; height: 34px;
  border-radius: 50%;
  border: none;
  background: var(--color-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}
.project-card__view:hover { background: var(--color-accent); color: var(--color-primary); transform: translate(2px,-2px); }

.project-card__image { position: relative; margin: 0 -18px; }
.project-card__image img { width: 100%; height: 200px; object-fit: cover; }
.project-card__badge {
  position: absolute;
  top: 14px; left: 14px;
  background: #c0392b;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 4px;
}
.project-card__body { padding: 20px 0 22px; }
.project-card__location {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--color-accent);
  font-size: 0.82rem;
  font-weight: 600;
  margin-bottom: 10px;
}
.project-card__tagline { font-size: 1.1rem; font-weight: 700; margin-bottom: 10px; color: var(--color-primary); }
.project-card__price, .project-card__plan { font-size: 0.88rem; margin-bottom: 4px; color: var(--color-muted-text); }
.project-card__features { margin: 16px 0 20px; }
.project-card__features li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  margin-bottom: 8px;
  color: var(--color-dark-text);
}
.project-card__features svg { color: var(--color-accent); flex-shrink: 0; }

/* Featured (main) project - bigger, side-by-side on desktop */
.projects__featured { margin-bottom: 56px; }
.project-card--featured {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 0 32px;
  padding: 24px 24px 0;
}
.project-card--featured .project-card__top,
.project-card--featured .project-card__body { grid-column: 2; }
.project-card--featured .project-card__image {
  grid-column: 1;
  grid-row: 1 / span 2;
  margin: -24px 0 -24px -24px;
  border-radius: 10px 0 0 10px;
}
.project-card--featured .project-card__image img { height: 100%; min-height: 380px; }
.project-card--featured .project-card__project-name { font-size: 2rem; }
.project-card--featured .project-card__tagline { font-size: 1.3rem; }
.project-card--featured .project-card__body { display: flex; flex-direction: column; justify-content: center; padding: 24px 0; }

/* "More Projects" carousel - pure auto-scroll, no manual arrows, so there's
   no sense of a "first" or "last" card; it just loops continuously. */
.projects__carousel-heading { margin-bottom: 24px; }
.projects__carousel-heading h3 { font-size: 1.5rem; }
.projects-carousel { position: relative; }
.projects-carousel__viewport { overflow: hidden; }
.projects-carousel__track {
  display: flex;
  gap: 24px;
  transition: transform 0.7s ease-in-out;
}
.projects-carousel__slide { flex: 0 0 calc((100% - 48px) / 3); min-width: 0; }

/* ---------- Trusted developers logo marquee ----------
   Pure CSS animation (not the JS clone-carousel used elsewhere): the logo
   list is duplicated once in the markup and the track animates from 0 to
   -50%, so the loop point is invisible and motion never pauses/steps -
   there's no way to tell which logo is "first" or "last". */
.trusted-brands { padding: 64px 0 72px; background: #fff; overflow: hidden; }
.trusted-brands .section-heading { margin-bottom: 0; }
.trusted-brands .section-heading h2 {
  position: relative;
  padding-bottom: 22px;
}
.trusted-brands .section-heading h2::after {
  content: '';
  position: absolute;
  bottom: 0; left: 50%;
  transform: translateX(-50%);
  width: 56px; height: 3px;
  background: var(--color-accent);
  border-radius: 2px;
}
.logo-marquee {
  position: relative;
  overflow: hidden;
  margin-top: 44px;
}
.logo-marquee::before,
.logo-marquee::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 90px;
  z-index: 2;
  pointer-events: none;
}
.logo-marquee::before { left: 0; background: linear-gradient(90deg, #fff, rgba(255,255,255,0)); }
.logo-marquee::after { right: 0; background: linear-gradient(270deg, #fff, rgba(255,255,255,0)); }
.logo-marquee__track {
  display: flex;
  align-items: center;
  gap: 48px;
  width: max-content;
  animation: logo-marquee 30s linear infinite;
}
.logo-marquee:hover .logo-marquee__track { animation-play-state: paused; }
.logo-marquee__item {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  min-width: 90px;
}
.logo-marquee__item img {
  max-height: 100%;
  max-width: 130px;
  width: auto;
  object-fit: contain;
}
@keyframes logo-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .logo-marquee__track { animation: none; }
}

/* ---------- Gallery ---------- */
.gallery { padding: 90px 0; }
.gallery__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.gallery__item {
  position: relative;
  border: none;
  padding: 0;
  cursor: pointer;
  border-radius: 8px;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background: none;
}
.gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; }
.gallery__item:hover img { transform: scale(1.06); }
.gallery__overlay {
  position: absolute;
  inset: 0;
  background: rgba(26,26,46,0.45);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.gallery__item:hover .gallery__overlay,
.gallery__item:focus-visible .gallery__overlay { opacity: 1; }

/* Auto-scrolling gallery carousel (single-project pages with too few/many
   photos for a fixed grid) - same seamless clone-based loop as "More Projects". */
.gallery-carousel__viewport { overflow: hidden; }
.gallery-carousel__track {
  display: flex;
  gap: 16px;
  transition: transform 1.1s ease-in-out;
}
.gallery-carousel__slide { flex: 0 0 calc((100% - 48px) / 4); min-width: 0; }
.gallery-carousel__slide .gallery__item { width: 100%; }

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: none;
  align-items: center;
  justify-content: center;
}
.lightbox.is-open { display: flex; }
.lightbox__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.88); }
.lightbox img {
  position: relative;
  max-width: 85vw;
  max-height: 85vh;
  border-radius: 6px;
  z-index: 1;
}
.lightbox__close {
  position: absolute;
  top: 24px; right: 32px;
  background: none;
  border: none;
  color: #fff;
  font-size: 2.2rem;
  cursor: pointer;
  z-index: 2;
}
.lightbox__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  background: rgba(255,255,255,0.15);
  border: none;
  color: #fff;
  width: 46px; height: 46px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1.1rem;
  transition: background 0.2s ease;
}
.lightbox__arrow:hover { background: rgba(255,255,255,0.3); }
.lightbox__arrow--prev { left: 24px; }
.lightbox__arrow--next { right: 24px; }
.lightbox__counter {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  font-size: 0.85rem;
  z-index: 2;
  background: rgba(0,0,0,0.4);
  padding: 4px 14px;
  border-radius: 20px;
}

/* ---------- About ---------- */
/* Top padding trimmed: the Projects section right above shares this same
   light background and already ends with its own 90px of padding, so a
   full 90px here doubled up into a large blank gap before "About Us". */
.about { padding: 30px 0 90px; background: var(--color-light); }
.about__inner {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 50px;
  align-items: center;
}
.about__image { position: relative; z-index: 0; }
/* Dot-grid tucked mostly behind the image's bottom-right corner - the
   image (a plain in-flow element) naturally paints above a negative
   z-index pseudo-element, so only the portion past the image's edge
   peeks out into the blank space beside the stats. */
.about__image::after {
  content: '';
  position: absolute;
  right: -18px;
  bottom: -18px;
  width: 170px;
  height: 140px;
  background-image: radial-gradient(circle, rgba(201,169,97,0.35) 1.6px, transparent 1.6px);
  background-size: 15px 15px;
  pointer-events: none;
  z-index: -1;
}
.about__image img { border-radius: 10px; width: 100%; height: 460px; object-fit: cover; }
.about__content h2 { font-size: 2.1rem; margin-bottom: 18px; }
.about__content p { color: var(--color-muted-text); margin-bottom: 16px; text-align: justify; text-justify: inter-word; }
.about__stats { display: flex; gap: 40px; margin-top: 28px; }
.stat__number { display: block; font-family: 'Fraunces', serif; font-size: 2rem; color: var(--color-accent); font-weight: 700; }
.stat__label { font-size: 0.85rem; color: var(--color-muted-text); }

/* ---------- Footer enquiry ---------- */
.footer-enquiry { padding: 70px 0; }
.footer-enquiry__inner {
  position: relative;
  z-index: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: start;
}
/* Dot-grid anchored to the grid container (not the form card itself) -
   grid items always paint above their container's own background/negative
   z-index content regardless of the item's own position, so the opaque
   form card correctly covers the overlapping portion here. Positioned
   from the container's right edge to line up with the form's left edge
   (the form right-aligns via margin-left:auto, capped at max-width:380px). */
.footer-enquiry__inner::before {
  content: '';
  position: absolute;
  right: 232px;
  bottom: -18px;
  width: 170px;
  height: 130px;
  background-image: radial-gradient(circle, rgba(201,169,97,0.3) 1.6px, transparent 1.6px);
  background-size: 15px 15px;
  pointer-events: none;
  z-index: -1;
}
.footer-enquiry__text h2 { font-size: 2.2rem; margin-bottom: 12px; }
.footer-enquiry__text > p { color: var(--color-muted-text); margin-bottom: 24px; }
.footer-enquiry__actions { display: flex; gap: 14px; flex-wrap: wrap; }
.footer-enquiry__perks { margin-top: 32px; }
.footer-enquiry__perks li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--color-dark-text);
  margin-bottom: 16px;
}
.footer-enquiry__perks svg {
  flex-shrink: 0;
  color: var(--color-accent);
  background: rgba(201,169,97,0.12);
  border-radius: 50%;
  padding: 5px;
  width: 28px;
  height: 28px;
  box-sizing: border-box;
}
.footer-enquiry__form { border: 1px solid #eee; }

.footer-enquiry__contact-list { margin-top: 32px; }
.footer-enquiry__contact-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.92rem;
  margin-bottom: 12px;
}
.footer-enquiry__contact-list svg { color: var(--color-accent); flex-shrink: 0; margin-top: 2px; }
.footer-enquiry__contact-list a { color: var(--color-dark-text); line-height: 1.5; }
.footer-enquiry__contact-list a:hover { color: var(--color-accent); }

/* ---------- Site footer ---------- */
.site-footer { background: var(--color-primary); color: rgba(255,255,255,0.65); padding: 40px 0 0; }
.site-footer__divider { border-top: 1px solid rgba(255,255,255,0.12); }
.site-footer__disclaimer { padding: 18px 0; }
.site-footer__disclaimer p {
  font-size: 0.76rem;
  line-height: 1.7;
  color: rgba(255,255,255,0.5);
  max-width: 900px;
}
.site-footer__disclaimer strong { color: rgba(255,255,255,0.7); }
.site-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 0.85rem;
  padding: 22px 0;
}
.site-footer__meta p { margin: 0; }
.site-footer__rera { font-size: 0.78rem; opacity: 0.8; margin-top: 4px; }
.site-footer__link { text-decoration: underline; }
.site-footer__legal-links { display: flex; gap: 18px; }

/* ---------- Sticky bar ---------- */
.sticky-bar {
  position: fixed;
  right: 20px;
  bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 900;
}
.sticky-bar__btn {
  position: relative;
  width: 54px; height: 54px;
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow: 0 8px 20px rgba(0,0,0,0.25);
  transition: transform 0.2s ease, opacity 0.2s ease;
  cursor: pointer;
}
.sticky-bar__btn:hover { transform: scale(1.08); }
.sticky-bar__btn--whatsapp { background: #25d366; }
.sticky-bar__btn--call { background: var(--color-primary); }
.sticky-bar__btn--top {
  background: #fff;
  color: var(--color-primary);
  border: 1px solid #eee;
  width: 44px; height: 44px;
  align-self: flex-end;
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
}
.sticky-bar__btn--top.is-visible { opacity: 1; pointer-events: auto; transform: translateY(0); }

.sticky-bar__pulse {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #25d366;
  opacity: 0.6;
  animation: pulse-ring 2.2s ease-out infinite;
  z-index: -1;
}
@keyframes pulse-ring {
  0% { transform: scale(1); opacity: 0.5; }
  80% { transform: scale(1.6); opacity: 0; }
  100% { transform: scale(1.6); opacity: 0; }
}

.has-tooltip { position: relative; }
.has-tooltip::after {
  content: attr(data-tooltip);
  position: absolute;
  right: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%);
  background: var(--color-primary);
  color: #fff;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 0.78rem;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.has-tooltip:hover::after { opacity: 1; }

/* ---------- Modal ---------- */
body.modal-open { overflow: hidden; }
.modal {
  position: fixed;
  inset: 0;
  z-index: 1500;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.modal.is-open { display: flex; }
.modal__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.6); }
.modal__dialog {
  position: relative;
  background: #fff;
  border-radius: 16px;
  max-width: 460px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  z-index: 1;
  box-shadow: 0 40px 90px rgba(10,10,20,0.4);
}
.modal__image { width: 100%; height: 160px; object-fit: cover; border-radius: 10px 10px 0 0; }
.modal__body { padding: 26px; }
.modal__body h3 { margin-bottom: 6px; }
.modal__body > p { color: var(--color-muted-text); font-size: 0.88rem; margin-bottom: 18px; }
.modal__close {
  position: absolute;
  top: 12px; right: 12px;
  width: 34px; height: 34px;
  border-radius: 50%;
  border: none;
  background: rgba(0,0,0,0.5);
  color: #fff;
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
  transition: background 0.2s ease, transform 0.2s ease;
}
.modal__close:hover { background: var(--color-accent); color: var(--color-primary); transform: rotate(90deg); }

/* ---------- Auto-popup: split layout (image beside form on desktop, stacked on mobile) ---------- */
.popup-split {
  max-width: 720px;
  display: flex;
  align-items: stretch;
  padding: 0;
  /* The split box itself never scrolls - only .popup-split__form does (see
     below), so the image on the left stays put instead of scrolling away
     with the form. This also fixes the earlier bug where the shorthand
     "overflow: hidden" here silently cancelled .modal__dialog's own
     overflow-y:auto (equal specificity, this rule comes later), making the
     whole popup un-scrollable whenever content exceeded the 90vh cap. */
  overflow: hidden;
}
.popup-split__close {
  background: rgba(255,255,255,0.9);
  color: var(--color-primary);
}
.popup-split__image {
  flex: 0 0 50%;
  position: relative;
}
.popup-split__image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.popup-split__form {
  position: relative;
  flex: 1 1 50%;
  /* min-height:0 overrides the flex-item default (min-height:auto), which
     otherwise refuses to shrink below the form's own content height and
     would just grow the whole dialog past 90vh instead of scrolling. */
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 28px 26px 24px;
}
.popup-split__form::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--color-accent), var(--color-primary));
}
.popup-split__form h3 { font-size: 1.25rem; margin-bottom: 4px; }
.popup-split__subtitle {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--color-muted-text);
  font-size: 0.8rem;
  margin-bottom: 16px;
}
.popup-split__subtitle::before {
  content: '';
  width: 14px; height: 2px;
  background: var(--color-accent);
  flex-shrink: 0;
}
.popup-split__trust {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 12px;
  font-size: 0.72rem;
  color: var(--color-muted-text);
}
.popup-split__trust svg { color: var(--color-accent); flex-shrink: 0; }

@media (max-width: 768px) {
  /* The base .popup-split sets overflow:hidden to clip the image's corners
     on desktop, but on mobile the stacked image+form regularly runs taller
     than max-height - that same overflow:hidden was clipping the bottom of
     the form (message field, consent checkbox, submit button) instead of
     letting it scroll, so the button was there but unreachable. Kept as a
     safety net, but the popup is also shrunk below so scrolling shouldn't
     normally be needed at all. */
  .popup-split { flex-direction: column; max-height: 92vh; overflow-x: hidden; overflow-y: auto; }
  .popup-split__image { flex: 0 0 90px; }
  /* On the stacked mobile layout the whole card scrolls as one unit (set
     above) rather than just the form, so the form's own scroll is turned
     back off here to avoid a confusing nested scroll area. */
  .popup-split__form { overflow-y: visible; padding: 14px 16px; }
  .popup-split__form h3 { margin-bottom: 2px; }
  .popup-split__subtitle { margin-bottom: 8px; }
  .popup-split__form .form-group { margin-bottom: 6px; }
  .popup-split__form .form-group textarea { min-height: 28px; }
  .popup-split__form .checkbox-label { margin-bottom: 6px; }
}
@media (max-width: 480px) {
  .popup-split__image { flex-basis: 70px; }
  .popup-split__form { padding: 10px 12px; }
  .popup-split__form h3 { font-size: 1.05rem; }
  .popup-split__subtitle { font-size: 0.72rem; margin-bottom: 6px; }
}

/* ---------- Single-project page (e.g. brigade-granada.php) ---------- */

/* Overview: 8 bordered stat cards on navy */
.overview {
  position: relative;
  padding: 90px 0 100px;
  background: linear-gradient(160deg, #1a1a2e 0%, #12121f 100%);
  overflow: hidden;
}
.overview::before {
  content: '';
  position: absolute;
  top: -180px; right: -120px;
  width: 420px; height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201,169,97,0.14) 0%, transparent 70%);
  pointer-events: none;
}
.overview::after {
  content: '';
  position: absolute;
  bottom: -160px; left: -120px;
  width: 380px; height: 380px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201,169,97,0.07) 0%, transparent 70%);
  pointer-events: none;
}
.overview .section-heading__eyebrow { color: var(--color-accent); }
.overview .section-heading h2 { color: #fff; }
.overview__grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.overview-card {
  position: relative;
  background: linear-gradient(160deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  border: 1px solid rgba(201,169,97,0.25);
  border-radius: 14px;
  padding: 30px 20px;
  text-align: center;
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(0,0,0,0.25);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease, background 0.3s ease;
}
.overview-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--color-accent), transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.overview-card:hover {
  border-color: var(--color-accent);
  background: linear-gradient(160deg, rgba(201,169,97,0.16), rgba(255,255,255,0.03));
  transform: translateY(-6px);
  box-shadow: 0 24px 50px rgba(201,169,97,0.22);
}
.overview-card:hover::before { opacity: 1; }
.overview-card__icon {
  position: relative;
  display: block;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--color-accent);
  /* margin:auto (not inline-block+text-align) so this stays centered even
     though the generic ".overview-card span { display:block }" rule below
     - more specific than this one alone - always wins the display property. */
  margin: 0 auto 18px;
  box-shadow: 0 10px 24px rgba(201,169,97,0.4);
}
.overview-card__icon svg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  stroke: var(--color-primary);
  fill: none;
}
.overview-card strong {
  display: block;
  font-family: 'Fraunces', serif;
  color: #fff;
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 10px;
  letter-spacing: 0.2px;
}
.overview-card__divider {
  display: block;
  width: 28px;
  height: 2px;
  margin: 0 auto 10px;
  background: rgba(201,169,97,0.5);
}
.overview-card span {
  display: block;
  color: rgba(201,169,97,0.8);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
}

/* Highlights: 3-col grid with dividers, white bg */
.highlights { padding: 90px 0; background: var(--color-light); }
.highlights__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1100px;
  margin: 0 auto;
}
.highlight-cell {
  position: relative;
  background: #fff;
  border-radius: 14px;
  border-left: 3px solid var(--color-accent);
  padding: 30px 26px 26px;
  text-align: left;
  overflow: hidden;
  box-shadow: 0 10px 28px rgba(0,0,0,0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.highlight-cell::after {
  position: absolute;
  content: '';
  top: 24px;
  right: 26px;
  width: 34px;
  height: 2px;
  background: var(--color-accent);
  opacity: 0.65;
  transition: width 0.3s ease, opacity 0.3s ease;
}
.highlight-cell:hover { transform: translateY(-5px); box-shadow: 0 20px 44px rgba(0,0,0,0.1); }
.highlight-cell:hover::after { width: 54px; opacity: 1; }
.highlight-cell__icon {
  position: relative;
  display: inline-block;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--color-primary);
  margin-bottom: 18px;
  z-index: 1;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.highlight-cell:hover .highlight-cell__icon { transform: translateY(-2px); box-shadow: 0 8px 16px rgba(20,20,40,0.2); }
.highlight-cell__icon svg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  stroke: var(--color-accent);
  fill: none;
}
.highlight-cell p {
  position: relative;
  z-index: 1;
  font-size: 0.94rem;
  font-weight: 600;
  color: var(--color-dark-text);
  margin: 0;
  line-height: 1.55;
}

/* Price list: full-width table with a per-row action column */
.price-list { padding: 90px 0; }
.price-list__table-wrap {
  overflow-x: auto;
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.08);
}
.price-list__table { width: 100%; border-collapse: collapse; background: #fff; min-width: 640px; }
.price-list__table th, .price-list__table td { padding: 18px 24px; text-align: left; font-size: 0.92rem; border-bottom: 1px solid #eee; }
.price-list__table thead th {
  background: var(--color-primary);
  color: #fff;
  font-weight: 600;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: none;
}
.price-list__table tbody tr:nth-child(even) { background: var(--color-light); }
.price-list__table tbody tr:hover { background: rgba(201,169,97,0.1); }
.price-list__table tbody tr:last-child td { border-bottom: none; }
.price-list__table tbody td:nth-child(3) { font-weight: 700; color: var(--color-primary); font-family: 'Fraunces', serif; font-size: 1.15rem; }
/* Fraunces (the serif display font used for the price figure) renders "*"
   as an oddly-shaped, oddly-placed glyph next to plain numerals - swap
   back to the body sans-serif just for the asterisk so it reads as a
   normal, consistent star instead of looking like a typo. */
.price-list__star { font-family: 'Manrope', sans-serif; font-weight: 600; font-size: 0.85em; }
.price-list__config { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-weight: 600; }
.price-list__config svg { color: var(--color-accent); flex-shrink: 0; }
.price-list__badge {
  background: var(--color-primary);
  color: var(--color-accent);
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 3px 10px;
  border-radius: 20px;
}
.price-list__row--popular { background: rgba(201,169,97,0.08) !important; position: relative; }
.price-list__row--popular td:first-child { box-shadow: inset 3px 0 0 var(--color-accent); }

.developer { padding: 90px 0; background: var(--color-light); }
.developer__inner { display: grid; grid-template-columns: 1fr 1.1fr; gap: 50px; align-items: center; }
.developer__image { position: relative; }
.developer__image img { border-radius: 10px; width: 100%; height: 400px; object-fit: cover; }
.developer__image::after {
  content: '';
  position: absolute;
  inset: 16px -16px -16px 16px;
  border: 2px solid var(--color-accent);
  border-radius: 10px;
  z-index: -1;
}
.developer__badge {
  position: absolute;
  bottom: -20px;
  right: -20px;
  background: var(--color-accent);
  color: var(--color-primary);
  border-radius: 50%;
  width: 90px; height: 90px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 30px rgba(201,169,97,0.4);
  z-index: 1;
}
.developer__badge strong { font-family: 'Fraunces', serif; font-size: 1.4rem; font-weight: 700; line-height: 1.1; }
.developer__badge span { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.5px; }
.developer__content h2 { font-size: 2rem; margin-bottom: 18px; }
.developer__content p { color: var(--color-muted-text); margin-bottom: 28px; }
.developer__stats { position: relative; z-index: 0; display: flex; gap: 16px; flex-wrap: wrap; }
/* Dot-grid tucked mostly behind the last stat card's right edge - the
   cards are normal flex items so they naturally paint above a negative
   z-index pseudo-element, leaving only the portion past the card's edge
   visible in the blank strip beside it. */
.developer__stats::after {
  content: '';
  position: absolute;
  top: 50%;
  right: -20px;
  transform: translateY(-50%);
  width: 140px;
  height: 130px;
  background-image: radial-gradient(circle, rgba(201,169,97,0.3) 1.6px, transparent 1.6px);
  background-size: 15px 15px;
  pointer-events: none;
  z-index: -1;
}
.developer__stats > div {
  flex: 1 1 140px;
  background: #fff;
  border: 1px solid rgba(201,169,97,0.25);
  border-radius: 12px;
  padding: 20px 16px;
  text-align: center;
  box-shadow: 0 10px 26px rgba(0,0,0,0.05);
}
.developer__stats strong { display: block; font-family: 'Fraunces', serif; font-size: 1.8rem; color: var(--color-accent); font-weight: 700; margin-bottom: 4px; }
.developer__stats span { font-size: 0.78rem; color: var(--color-muted-text); }

.developer-cta {
  position: relative;
  background: linear-gradient(160deg, #1a1a2e 0%, #12121f 100%);
  color: #fff;
  padding: 64px 0;
  overflow: hidden;
}
.developer-cta::before {
  content: '';
  position: absolute;
  top: -140px; right: -80px;
  width: 380px; height: 380px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201,169,97,0.14) 0%, transparent 70%);
  pointer-events: none;
}
.developer-cta__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  flex-wrap: wrap;
}
.developer-cta__eyebrow {
  display: block;
  margin-bottom: 12px;
  color: var(--color-accent);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.developer-cta__inner h2 { color: #fff; font-size: 1.9rem; margin-bottom: 8px; }
.developer-cta__inner p { color: rgba(255,255,255,0.65); }
.developer-cta__actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  padding-left: 34px;
  border-left: 1px solid rgba(201,169,97,0.35);
}

/* Sticky vertical "Enquire Now" tab on the right edge */
.sticky-enquire-tab {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  writing-mode: vertical-rl;
  background: var(--color-accent);
  color: var(--color-primary);
  border: none;
  padding: 18px 12px;
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  z-index: 800;
  border-radius: 8px 0 0 8px;
  box-shadow: -6px 0 20px rgba(0,0,0,0.18);
  transition: filter 0.2s ease, padding 0.2s ease;
}
.sticky-enquire-tab:hover { filter: brightness(1.08); padding-right: 16px; }

@media (max-width: 992px) {
  .overview__grid { grid-template-columns: repeat(2, 1fr); }
  .highlights__grid { grid-template-columns: repeat(2, 1fr); max-width: 640px; }
  .developer__inner { grid-template-columns: 1fr; }
  .developer__content { order: -1; }
  .developer__image img { height: 280px; }
  .developer__image::after { display: none; }
  .developer__stats::after { display: none; }
}
@media (max-width: 768px) {
  .overview { padding: 60px 0; }
  .overview__grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .overview-card { padding: 22px 12px; }
  .highlights { padding: 60px 0; }
  .highlights__grid { grid-template-columns: 1fr; max-width: 420px; }
  .price-list { padding: 60px 0; }
  .developer { padding: 60px 0; }
  .developer-cta { padding: 40px 0; }
  .developer-cta__inner { text-align: center; justify-content: center; }
  .developer-cta__actions { justify-content: center; padding: 22px 0 0; border-left: 0; border-top: 1px solid rgba(201,169,97,0.35); }
  .developer__stats { justify-content: center; gap: 28px; }
  .sticky-enquire-tab { display: none; }
  .lifestyle-band { min-height: 380px; padding: 60px 0; background-attachment: scroll; background-position: center 65%; }
  .lifestyle-band__inner h2 { font-size: 1.7rem; }
  .lifestyle-band__inner p { font-size: 0.95rem; }
  .lifestyle-band__chips { gap: 10px; }
  .lifestyle-band__chips span { padding: 8px 16px; font-size: 0.76rem; }
}

/* ---------- 404 / Thank You state pages ---------- */
.state-page {
  min-height: 60vh;
  display: flex;
  align-items: center;
  padding: 80px 0;
}
.state-page__inner {
  max-width: 560px;
  margin: 0 auto;
  text-align: center;
}
.state-page__code {
  display: block;
  font-family: 'Fraunces', serif;
  font-size: 5rem;
  font-weight: 700;
  color: var(--color-accent);
  line-height: 1;
  margin-bottom: 10px;
}
.state-page__check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 84px; height: 84px;
  border-radius: 50%;
  background: var(--color-light);
  color: #1a7f37;
  margin-bottom: 20px;
}
.state-page h1 { font-size: 2rem; margin-bottom: 14px; }
.state-page p { color: var(--color-muted-text); margin-bottom: 8px; }
.state-page__meta { font-size: 0.9rem; margin-bottom: 26px; }
.state-page__actions {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 26px;
}

/* Thank-you page: premium success variant */
.state-page--success {
  position: relative;
  min-height: 80vh;
  padding: 70px 0;
  background: linear-gradient(160deg, #1a1a2e 0%, #12121f 100%);
  overflow: hidden;
}
.state-page__glow {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.state-page__glow--1 {
  top: -180px; right: -120px;
  width: 420px; height: 420px;
  background: radial-gradient(circle, rgba(201,169,97,0.16) 0%, transparent 70%);
}
.state-page__glow--2 {
  bottom: -160px; left: -120px;
  width: 380px; height: 380px;
  background: radial-gradient(circle, rgba(201,169,97,0.08) 0%, transparent 70%);
}
.state-page--success .state-page__inner { position: relative; max-width: 620px; }
.state-page__card {
  background: #fff;
  border-radius: 20px;
  padding: 56px 48px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.35);
}
.state-page--success .state-page__check {
  position: relative;
  width: 84px; height: 84px;
  background: var(--color-accent);
  color: var(--color-primary);
  box-shadow: 0 12px 28px rgba(201,169,97,0.4);
}
.state-page__check-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--color-accent);
  opacity: 0.6;
  animation: pulse-ring 2.2s ease-out infinite;
}
.state-page--success .section-heading__eyebrow { display: block; margin-bottom: 10px; }
.state-page--success h1 { font-size: 2.1rem; }
.state-page__steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin: 32px 0 8px;
  padding-top: 26px;
  border-top: 1px solid rgba(26,26,46,0.1);
}
.state-page__step { text-align: center; }
.state-page__step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-accent);
  font-family: 'Fraunces', serif;
  font-weight: 600;
  margin-bottom: 10px;
}
.state-page__step p { font-size: 0.85rem; margin-bottom: 0; }

/* ---------- Legal page ---------- */
.legal-page { padding: 60px 0 90px; background: var(--color-light); min-height: 50vh; }
.legal-page .container {
  max-width: 820px;
  background: #fff;
  border-radius: 14px;
  padding: 48px 56px;
  box-shadow: 0 16px 50px rgba(0,0,0,0.06);
}
.legal-page h1 { margin-bottom: 24px; font-size: 2rem; }
.legal-page h3 { margin: 30px 0 10px; font-size: 1.1rem; }
.legal-page p, .legal-page li { color: var(--color-dark-text); opacity: 0.82; font-size: 0.95rem; line-height: 1.75; margin-bottom: 14px; }

@media (max-width: 768px) {
  .legal-page { padding: 40px 0 60px; }
  .legal-page .container { padding: 32px 24px; border-radius: 10px; }
  .legal-page h1 { font-size: 1.6rem; }
}

/* ---------- Toasts ---------- */
.toast-stack {
  position: fixed;
  top: 90px;
  right: 20px;
  z-index: 3500;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 320px;
}
.toast {
  background: #fff;
  border-left: 4px solid #1a7f37;
  box-shadow: 0 10px 30px rgba(0,0,0,0.15);
  border-radius: 6px;
  padding: 14px 16px;
  font-size: 0.85rem;
  color: var(--color-dark-text);
  animation: toast-in 0.3s ease;
}
.toast.toast--error { border-left-color: #d64545; }
@keyframes toast-in {
  from { opacity: 0; transform: translateX(20px); }
  to { opacity: 1; transform: translateX(0); }
}
.toast.is-leaving { animation: toast-out 0.3s ease forwards; }
@keyframes toast-out {
  to { opacity: 0; transform: translateX(20px); }
}

/* ---------- Trust strip ---------- */
.trust-strip {
  background: var(--color-primary);
  padding: 36px 0;
}
.trust-strip__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  text-align: center;
}
.trust-strip__number {
  display: block;
  font-family: 'Fraunces', serif;
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--color-accent);
}
.trust-strip__label {
  color: rgba(255,255,255,0.75);
  font-size: 0.85rem;
}

/* ---------- Lifestyle statement band ---------- */
/* A full-bleed editorial moment between the two icon-grid sections
   (Highlights, Amenities) so the page doesn't read as three consecutive
   card grids in a row - big photo, a short line, no icons or cards. */
.lifestyle-band {
  position: relative;
  min-height: 460px;
  display: flex;
  align-items: center;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  overflow: hidden;
}
.lifestyle-band__overlay {
  position: absolute;
  inset: 0;
  /* A radial vignette centered on the text (for guaranteed contrast right
     where it matters) layered under a lighter top-to-bottom gradient (so
     the photo itself still reads clearly toward the edges). */
  background:
    radial-gradient(ellipse 60% 80% at center, rgba(10,10,20,0.55) 0%, rgba(10,10,20,0.15) 70%),
    linear-gradient(180deg, rgba(10,10,20,0.55) 0%, rgba(10,10,20,0.3) 50%, rgba(10,10,20,0.6) 100%);
}
.lifestyle-band__inner {
  position: relative;
  z-index: 1;
  max-width: 680px;
  margin: 0 auto;
  text-align: center;
  color: #fff;
  text-shadow: 0 2px 18px rgba(0,0,0,0.75), 0 1px 6px rgba(0,0,0,0.85);
}
.lifestyle-band__inner .section-heading__eyebrow {
  color: var(--color-accent);
  text-shadow: 0 1px 10px rgba(0,0,0,0.9), 0 1px 3px rgba(0,0,0,0.95);
}
.lifestyle-band__inner h2 {
  color: #fff;
  font-size: 2.3rem;
  margin: 14px 0 20px;
  line-height: 1.25;
}
.lifestyle-band__inner p {
  color: rgba(255,255,255,0.85);
  font-size: 1.05rem;
  line-height: 1.7;
  margin-bottom: 32px;
}
.lifestyle-band__chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}
.lifestyle-band__chips span {
  padding: 9px 20px;
  border: 1px solid rgba(201,169,97,0.5);
  border-radius: 20px;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.3px;
  background: rgba(201,169,97,0.1);
}

/* ---------- Amenities ---------- */
.amenities { padding: 90px 0; }
.amenities__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
}
.amenity-card {
  background: var(--color-light);
  border: 1px solid rgba(201,169,97,0.2);
  border-radius: 10px;
  padding: 30px 16px;
  text-align: center;
  box-shadow: 0 8px 24px rgba(0,0,0,0.05);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.amenity-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 34px rgba(201,169,97,0.22);
  border-color: var(--color-accent);
}
.amenity-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 68px; height: 68px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--color-accent);
  color: var(--color-accent);
  margin-bottom: 16px;
  box-shadow: 0 4px 12px rgba(201,169,97,0.2);
}
.amenity-card__label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
}

.amenities--dark {
  position: relative;
  background: linear-gradient(160deg, #1a1a2e 0%, #12121f 100%);
  overflow: hidden;
}
.amenities--dark::before {
  content: '';
  position: absolute;
  top: -160px; left: -100px;
  width: 420px; height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201,169,97,0.12) 0%, transparent 70%);
  pointer-events: none;
}
.amenities--dark .section-heading__sub { color: rgba(255,255,255,0.6); }
.amenities--dark .section-heading h2 { color: #fff; }
.amenities--dark .amenity-card {
  position: relative;
  background: linear-gradient(160deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015));
  border: 1px solid rgba(201,169,97,0.25);
  box-shadow: 0 10px 26px rgba(0,0,0,0.2);
}
.amenities--dark .amenity-card:hover {
  border-color: var(--color-accent);
  background: linear-gradient(160deg, rgba(201,169,97,0.14), rgba(255,255,255,0.02));
  box-shadow: 0 20px 44px rgba(201,169,97,0.25);
}
.amenities--dark .amenity-card__icon {
  background: var(--color-accent);
  border: none;
  color: var(--color-primary);
  box-shadow: 0 10px 22px rgba(201,169,97,0.35);
}
.amenities--dark .amenity-card:hover .amenity-card__icon { box-shadow: 0 14px 30px rgba(201,169,97,0.55); }
.amenities--dark .amenity-card__label { color: #fff; }

/* ---------- Floor plans ---------- */
.floorplans { padding: 90px 0; background: var(--color-primary); }
.floorplans .section-heading__sub { color: rgba(255,255,255,0.6); }
.floorplans .section-heading h2 { color: #fff; }
.floorplan-tabs__nav {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 40px;
}
.floorplan-tabs__btn {
  padding: 12px 26px;
  border-radius: 30px;
  border: 2px solid rgba(255,255,255,0.2);
  background: transparent;
  color: #fff;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.2s ease;
}
.floorplan-tabs__btn:hover { border-color: var(--color-accent); }
.floorplan-tabs__btn.is-active {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-primary);
}
.floorplan-tabs__panel {
  display: none;
  grid-template-columns: 1.1fr 1fr;
  gap: 50px;
  align-items: center;
}
.floorplan-tabs__panel.is-active { display: grid; }
.floorplan-tabs__image {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.15);
  box-shadow: 0 20px 50px rgba(0,0,0,0.3);
  cursor: pointer;
  background: none;
}
.floorplan-tabs__image img {
  display: block;
  width: 100%;
  filter: blur(9px) saturate(0.85);
  transform: scale(1.06);
  transition: filter 0.3s ease, transform 0.3s ease;
}
.floorplan-tabs__image:hover img { filter: blur(7px) saturate(0.9); }
.floorplan-tabs__lock {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: rgba(26,26,46,0.6);
  color: #fff;
  text-align: center;
  padding: 20px;
  transition: background 0.3s ease;
}
.floorplan-tabs__image:hover .floorplan-tabs__lock { background: rgba(26,26,46,0.75); }
.floorplan-tabs__lock svg { color: var(--color-accent); }
.floorplan-tabs__lock span:last-child {
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.3px;
  max-width: 220px;
}
.floorplan-tabs__info {
  position: relative;
  background: linear-gradient(160deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015));
  border: 1px solid rgba(201,169,97,0.25);
  border-radius: 14px;
  padding: 40px;
  overflow: hidden;
  box-shadow: 0 12px 32px rgba(0,0,0,0.2);
}
.floorplan-tabs__watermark {
  position: absolute;
  top: -20px; right: 10px;
  font-family: 'Fraunces', serif;
  font-size: 6rem;
  font-weight: 700;
  color: rgba(255,255,255,0.04);
  line-height: 1;
  pointer-events: none;
}
.floorplan-tabs__info .section-heading__eyebrow { position: relative; }
.floorplan-tabs__info h3 { position: relative; font-size: 1.6rem; margin-bottom: 22px; color: #fff; }
.floorplan-tabs__info ul { position: relative; margin-bottom: 28px; }
.floorplan-tabs__info li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255,255,255,0.12);
  font-size: 0.92rem;
  color: rgba(255,255,255,0.6);
}
.floorplan-tabs__info li:last-child { border-bottom: none; }
.floorplan-tabs__info li span { display: flex; align-items: center; gap: 10px; }
.floorplan-tabs__info li svg { color: var(--color-accent); flex-shrink: 0; }
.floorplan-tabs__info li strong { color: #fff; font-family: 'Fraunces', serif; font-size: 1rem; }
.floorplan-tabs__actions { position: relative; display: flex; gap: 14px; flex-wrap: wrap; }

/* ---------- Location ---------- */
.location {
  position: relative;
  padding: 90px 0;
  background: linear-gradient(160deg, #1a1a2e 0%, #12121f 100%);
  overflow: hidden;
}
.location::before {
  content: '';
  position: absolute;
  top: -160px; right: -100px;
  width: 420px; height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201,169,97,0.12) 0%, transparent 70%);
  pointer-events: none;
}
.location .section-heading__sub { color: rgba(255,255,255,0.6); }
.location .section-heading h2 { color: #fff; }

/* A route/timeline motif instead of another card grid - each destination
   is a "stop" along a vertical gold line, two columns of stops side by
   side. No embedded map: the exact site location isn't finalized yet. */
.location__timeline {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 60px;
  max-width: 880px;
  margin: 0 auto;
}
.location-stop {
  position: relative;
  padding: 0 0 40px 40px;
}
.location-stop::before {
  content: '';
  position: absolute;
  left: 9px; top: 24px; bottom: -16px;
  width: 1px;
  background: linear-gradient(180deg, rgba(201,169,97,0.5), rgba(201,169,97,0.1));
}
.location-stop:nth-last-child(-n+1)::before,
.location-stop:nth-last-child(-n+2)::before { display: none; }
.location-stop__dot {
  position: absolute;
  left: 0; top: 2px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--color-accent);
  border: 3px solid #12121f;
  box-shadow: 0 0 0 2px rgba(201,169,97,0.45);
}
.location-stop__time {
  display: block;
  font-family: 'Fraunces', serif;
  font-weight: 600;
  color: var(--color-accent);
  font-size: 1.05rem;
  margin-bottom: 2px;
}
.location-stop__label { display: block; color: rgba(255,255,255,0.65); font-size: 0.88rem; }

/* ---------- Testimonials ---------- */
.testimonials { padding: 90px 0; }
.testimonial-slider { position: relative; }
.testimonial-slider__track {
  position: relative;
  max-width: 640px;
  margin: 0 auto;
  min-height: 300px;
}
.testimonial-card {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.5s ease;
  background: var(--color-light);
  border-radius: 12px;
  padding: 40px;
  text-align: center;
}
.testimonial-card.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  position: relative;
}
.testimonial-card__stars {
  display: flex;
  justify-content: center;
  gap: 4px;
  color: var(--color-accent);
  margin-bottom: 18px;
}
.testimonial-card__quote {
  font-size: 1.05rem;
  font-style: italic;
  color: var(--color-dark-text);
  margin-bottom: 24px;
  line-height: 1.7;
}
.testimonial-card__author {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.testimonial-card__author img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; }
.testimonial-card__author div { text-align: left; }
.testimonial-card__author strong { display: block; font-size: 0.92rem; }
.testimonial-card__author span { font-size: 0.78rem; color: var(--color-muted-text); }
.testimonial-slider__dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 28px;
}
.testimonial-slider__dots span {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #ddd;
  cursor: pointer;
}
.testimonial-slider__dots span.is-active { background: var(--color-accent); }

/* ---------- FAQ ---------- */
.faq { padding: 90px 0; background: var(--color-light); }
.faq-list { max-width: 820px; margin: 0 auto; }
.faq-item {
  background: linear-gradient(160deg, #1a1a2e 0%, #12121f 100%);
  border-left: 3px solid var(--color-accent);
  border-radius: 12px;
  margin-bottom: 18px;
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(10,10,20,0.18);
  transition: box-shadow 0.45s ease, transform 0.45s ease;
}
.faq-item:hover { box-shadow: 0 14px 30px rgba(10,10,20,0.24); }
.faq-item.is-open { box-shadow: 0 16px 34px rgba(10,10,20,0.28); }
.faq-item__question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 26px;
  background: none;
  border: none;
  text-align: left;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  color: #fff;
  transition: background-color 0.35s ease;
}
.faq-item__question:hover { background: rgba(255,255,255,0.035); }
.faq-item__icon {
  position: relative;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid var(--color-accent);
}
.faq-item__icon::before,
.faq-item__icon::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--color-accent);
  transform: translate(-50%, -50%);
}
.faq-item__icon::before { width: 12px; height: 2px; }
.faq-item__icon::after { width: 2px; height: 12px; transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease; }
.faq-item.is-open .faq-item__icon::after { transform: translate(-50%, -50%) scaleY(0); opacity: 0; }
.faq-item__answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.faq-item__answer p {
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.3s ease 0.08s, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.faq-item.is-open .faq-item__answer p { opacity: 1; transform: translateY(0); }
.faq-item__answer p {
  padding: 4px 26px 24px;
  margin-top: 4px;
  border-top: 1px solid rgba(255,255,255,0.3);
  padding-top: 16px;
  color: rgba(255,255,255,0.9);
  font-size: 0.92rem;
  line-height: 1.7;
}

/* =============================================================
   Responsive
   ============================================================= */
@media (max-width: 992px) {
  .hero__content { grid-template-columns: 1fr; }
  .hero__text h1 { font-size: 2.3rem; }
  .quick-enquiry { max-width: 420px; margin-left: 0; }
  .footer-enquiry__form { max-width: 420px; margin-left: 0; }
  .project-card--featured { grid-template-columns: 1fr; padding: 0; }
  .project-card--featured .project-card__top,
  .project-card--featured .project-card__body { grid-column: 1; padding-left: 18px; padding-right: 18px; }
  .project-card--featured .project-card__top { padding-top: 18px; }
  .project-card--featured .project-card__image { grid-row: auto; margin: 0; border-radius: 0; }
  .project-card--featured .project-card__image img { height: 260px; min-height: 0; }
  .projects-carousel__slide { flex-basis: calc((100% - 24px) / 2); }
  .gallery-carousel__slide { flex-basis: calc((100% - 16px) / 2); }
  .about__inner, .footer-enquiry__inner { grid-template-columns: 1fr; }
  .about__content { order: -1; }
  .about__image img { height: 300px; }
  .about__image::after,
  .footer-enquiry__inner::before { display: none; }
  .gallery__grid { grid-template-columns: repeat(2, 1fr); }
  .amenities__grid { grid-template-columns: repeat(3, 1fr); }
  .trust-strip__grid { grid-template-columns: repeat(2, 1fr); gap: 28px; }
  .floorplan-tabs__panel { grid-template-columns: 1fr; }
  .floorplan-tabs__panel .floorplan-tabs__image { order: -1; }
}

@media (max-width: 768px) {
  body.nav-open { overflow: hidden; }
  .main-nav {
    position: fixed;
    top: 0; right: -85%;
    width: 85%;
    max-width: 320px;
    height: 100vh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    background: #fff;
    box-shadow: -8px 0 30px rgba(0,0,0,0.18);
    transition: right 0.3s ease;
    padding: 28px 28px 32px;
    z-index: 600;
    overflow-y: auto;
  }
  .main-nav.is-open { right: 0; }
  .main-nav__close {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: flex-end;
    width: 38px; height: 38px;
    border: none;
    background: var(--color-light);
    color: var(--color-primary);
    border-radius: 50%;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    margin-bottom: 20px;
  }
  .main-nav__logo {
    display: block;
    align-self: center;
    height: 58px;
    width: auto;
    max-width: 190px;
    object-fit: contain;
    margin-bottom: 28px;
  }
  .main-nav ul { flex-direction: column; justify-content: flex-start; gap: 4px; flex: 1; }
  .main-nav ul li { border-bottom: 1px solid var(--color-light); }
  .main-nav a { display: block; padding: 14px 4px; font-size: 1.05rem; }
  .main-nav__call {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 24px;
    padding: 13px;
    border-radius: 4px;
    background: var(--color-accent);
    color: var(--color-primary);
    font-weight: 700;
  }
  .nav-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(10,10,20,0.55);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
    z-index: 590;
  }
  .nav-backdrop.is-open { opacity: 1; visibility: visible; }
  .nav-toggle { display: flex; }
  .site-header__actions a.btn { display: none; }
  .projects-carousel__slide { flex-basis: 100%; }
  .gallery-carousel__slide { flex-basis: 100%; }
  .hero__slider { min-height: 88vh; padding: 50px 0 40px; }
  .hero__slide { background-position: center 30%; }
  .hero__text h1 { font-size: 1.9rem; }
  .section-heading h2 { font-size: 1.6rem; }
  .trusted-brands { padding: 42px 0 48px; }
  .logo-marquee { margin-top: 28px; }
  .logo-marquee__track { gap: 40px; animation-duration: 20s; }
  .logo-marquee__item { height: 36px; }
  .logo-marquee__item img { max-width: 100px; }
  .logo-marquee::before, .logo-marquee::after { width: 50px; }
  .amenities__grid { grid-template-columns: repeat(2, 1fr); }
  .gallery__grid { grid-template-columns: repeat(2, 1fr); }
  .lightbox__arrow { width: 38px; height: 38px; }
  .lightbox__arrow--prev { left: 10px; }
  .lightbox__arrow--next { right: 10px; }
  .toast-stack { left: 12px; right: 12px; max-width: none; top: auto; bottom: 90px; }
  .sticky-bar { right: 14px; bottom: 14px; }
  .sticky-bar__btn { width: 48px; height: 48px; }
  .has-tooltip::after { display: none; }
  .about__stats { flex-wrap: wrap; gap: 24px; }
  .site-footer__bottom { flex-direction: column; text-align: center; gap: 18px; }
  .site-footer__legal-links { justify-content: center; width: 100%; }

  /* Only 2 stats fit per row on a phone - a lone 3rd one wrapping to its
     own row looks broken, so it's hidden here (still shown on desktop). */
  .developer__stats > div:nth-child(3),
  .about__stats > .stat:nth-child(3) { display: none; }

  /* Keep paired CTA buttons side by side on phones instead of stacking -
     each shares the row equally and its label wraps if it needs to. */
  .hero__cta-group,
  .floorplan-tabs__actions {
    flex-wrap: nowrap;
    gap: 10px;
  }
  .hero__cta-group .btn,
  .floorplan-tabs__actions .btn {
    flex: 1 1 0;
    min-width: 0;
    padding: 12px 10px;
    font-size: 0.82rem;
    white-space: normal;
    text-align: center;
  }

  /* iOS Safari auto-zooms into any input/textarea/select with font-size
     under 16px on focus - a jarring, disorienting jump on every form on
     the page. 16px sidesteps it; the desktop-only 0.85rem stays untouched. */
  .form-group input,
  .form-group select,
  .form-group textarea { font-size: 16px; }
}

/* Extra-small phones (320-480px) */
@media (max-width: 480px) {
  .container { padding: 0 16px; }
  .hero__text h1 { font-size: 1.6rem; }
  .hero__subheading { font-size: 1.05rem; }
  .hero__price { font-size: 0.92rem; }
  .hero__desc { font-size: 0.95rem; max-width: 100%; }
  .hero__trust-strip { font-size: 0.78rem; gap: 8px 14px; }
  .lifestyle-band { min-height: 320px; }
  .lifestyle-band__inner h2 { font-size: 1.4rem; }
  .lifestyle-band__inner p { font-size: 0.88rem; margin-bottom: 22px; }
  .lifestyle-band__chips span { padding: 7px 13px; font-size: 0.72rem; }
  .quick-enquiry { padding: 16px 16px; max-width: 100%; margin-left: 0; }
  .footer-enquiry__form { padding: 16px 16px; max-width: 100%; margin-left: 0; }
  .section-heading h2 { font-size: 1.4rem; }
  .amenities__grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .amenity-card { padding: 20px 10px; }
  .location__timeline { grid-template-columns: 1fr; }
  .location-stop::before { display: block; }
  .location-stop:last-child::before { display: none; }
  .trust-strip__grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .trust-strip__number { font-size: 1.7rem; }
  .testimonial-card { padding: 26px 20px; }
  .floorplan-tabs__btn { padding: 10px 18px; font-size: 0.82rem; }
  .modal__body { padding: 20px; }
  .modal__image { height: 130px; }
  .state-page__code { font-size: 3.4rem; }
  .state-page h1 { font-size: 1.5rem; }
  .state-page__actions .btn { width: 100%; }
  .state-page__card { padding: 36px 22px; }
  .state-page__steps { grid-template-columns: 1fr; gap: 16px; text-align: left; }
  .state-page__step { display: flex; align-items: center; gap: 12px; text-align: left; }
  .state-page__step-num { margin-bottom: 0; flex-shrink: 0; }
  .about__stats { flex-wrap: wrap; }
  .footer-enquiry__text h2 { font-size: 1.7rem; }
}