/* ==========================================================
   MAGNOOLIA DESIGN SYSTEM
   Premium A-energy-class residential development, Vaela, Kiili
   ========================================================== */

/* ----------------------------------------------------------
   1. CSS VARIABLES ? COLOR SYSTEM
   ---------------------------------------------------------- */
:root {
  /* Core palette */
  --mg-black:       #111111;
  --mg-charcoal:    #1C1C1A;
  --mg-warm-dark:   #2A2622;
  --mg-stone:       #8D867C;
  --mg-warm-grey:   #D8D2C8;
  --mg-soft-grey:   #F3F1EC;
  --mg-off-white:   #FAF8F3;
  --mg-white:       #FFFFFF;

  /* Accent */
  --mg-wood:        #B88756;
  --mg-muted-gold:  #C6A36A;
  --mg-gold-light:  #E2C992;

  /* Nature */
  --mg-forest:      #3F5A44;
  --mg-sage:        #8A9A82;
  --mg-sage-light:  #C2CCBA;

  /* UI */
  --mg-border:      rgba(28, 28, 26, 0.12);
  --mg-border-dark: rgba(28, 28, 26, 0.25);
  --mg-shadow:      rgba(17, 17, 17, 0.10);
  --mg-shadow-md:   rgba(17, 17, 17, 0.16);
  --mg-shadow-lg:   rgba(17, 17, 17, 0.22);

  /* Phase 10 aliases for unified premium system */
  --mg-bg: #FAF8F3;
  --mg-bg-soft: #F3F1EC;
  --mg-dark: #1C1C1A;
  --mg-dark-2: #2A2622;
  --mg-gold: #C6A36A;
  --mg-gold-soft: #E2C992;
  --mg-text: #1C1C1A;
  --mg-muted: #8D867C;
  --mg-radius-sm: 8px;
  --mg-radius-md: 14px;
  --mg-radius-lg: 22px;
  --mg-radius-xl: 32px;
  --mg-shadow-soft: 0 8px 22px rgba(17, 17, 17, 0.08);
  --mg-shadow-premium: 0 16px 46px rgba(17, 17, 17, 0.13);
  --mg-section-y-desktop: 104px;
  --mg-section-y-mobile: 72px;

  /* Status */
  --mg-status-available: #3F5A44;
  --mg-status-reserved:  #B88756;
  --mg-status-sold:      #8D867C;

  /* ----------------------------------------------------------
     2. TYPOGRAPHY
     ---------------------------------------------------------- */
  --font-heading: 'Inter', 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:    'Inter', 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Mono', monospace;

  --text-xs:   0.75rem;   /* 12px */
  --text-sm:   0.875rem;  /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-lg:   1.125rem;  /* 18px */
  --text-xl:   1.25rem;   /* 20px */
  --text-2xl:  1.5rem;    /* 24px */
  --text-3xl:  1.875rem;  /* 30px */
  --text-4xl:  2.25rem;   /* 36px */
  --text-5xl:  3rem;      /* 48px */
  --text-hero: 3.75rem;   /* 60px */

  --lh-tight:  1.15;
  --lh-snug:   1.3;
  --lh-normal: 1.6;
  --lh-loose:  1.8;

  --fw-light:   300;
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;

  /* ----------------------------------------------------------
     3. SPACING & LAYOUT
     ---------------------------------------------------------- */
  --container-max:  1240px;
  --container-wide: 1440px;
  --container-px:   24px;

  --section-y-sm: 56px;
  --section-y-md: 88px;
  --section-y-lg: 120px;

  --radius-sm:  8px;
  --radius-md:  14px;
  --radius-lg:  22px;
  --radius-xl:  32px;
  --radius-full:999px;

  --gap-xs: 8px;
  --gap-sm: 16px;
  --gap-md: 24px;
  --gap-lg: 40px;
  --gap-xl: 64px;

  /* ----------------------------------------------------------
     4. TRANSITIONS
     ---------------------------------------------------------- */
  --transition-fast: 160ms ease;
  --transition-base: 260ms ease;
  --transition-slow: 400ms ease;
}

/* ----------------------------------------------------------
   5. RESET / BASE OVERRIDES
   ---------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--lh-normal);
  color: var(--mg-charcoal);
  background: var(--mg-off-white);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  line-height: var(--lh-tight);
  font-weight: var(--fw-semibold);
  color: var(--mg-black);
  margin-bottom: 0.5em;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-fast);
}



:focus-visible {
  outline: 2px solid var(--mg-muted-gold);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* ----------------------------------------------------------
   6. LAYOUT UTILITIES
   ---------------------------------------------------------- */
.mg-container {
  width: 100%;
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-px);
  padding-right: var(--container-px);
}

.mg-container--wide {
  max-width: var(--container-wide);
}

.mg-section {
  padding-top: var(--section-y-lg);
  padding-bottom: var(--section-y-lg);
}

.mg-section--sm {
  padding-top: var(--section-y-sm);
  padding-bottom: var(--section-y-sm);
}

.mg-section--md {
  padding-top: var(--section-y-md);
  padding-bottom: var(--section-y-md);
}

.mg-section--dark   { background: var(--mg-charcoal); color: var(--mg-warm-grey); }
.mg-section--black  { background: var(--mg-black); color: var(--mg-warm-grey); }
.mg-section--soft   { background: var(--mg-soft-grey); }
.mg-section--white  { background: var(--mg-white); }
.mg-section--nature { background: var(--mg-forest); color: var(--mg-off-white); }

.section-space {
  padding-top: var(--mg-section-y-desktop);
  padding-bottom: var(--mg-section-y-desktop);
}
@media (max-width: 767px) {
  .section-space {
    padding-top: var(--mg-section-y-mobile);
    padding-bottom: var(--mg-section-y-mobile);
  }
}

/* Eyebrow label */
.mg-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mg-muted-gold);
  margin-bottom: 16px;
}
.mg-eyebrow::before {
  content: '';
  display: block;
  width: 28px;
  height: 1px;
  background: var(--mg-muted-gold);
}

.mg-section__title {
  font-size: clamp(var(--text-2xl), 3.5vw, var(--text-4xl));
  font-weight: var(--fw-semibold);
  color: var(--mg-black);
  line-height: var(--lh-snug);
  max-width: 680px;
}

.mg-section__title--centered { margin-left: auto; margin-right: auto; text-align: center; }

.mg-section__lead {
  font-size: var(--text-lg);
  color: var(--mg-stone);
  line-height: var(--lh-loose);
  max-width: 600px;
  margin-top: 16px;
}

.mg-section__lead--centered { margin-left: auto; margin-right: auto; text-align: center; }

/* ----------------------------------------------------------
   7. BUTTONS
   ---------------------------------------------------------- */
.mg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.04em;
  border-radius: var(--radius-sm);
  border: 2px solid transparent;
  cursor: pointer;
  transition:
    background var(--transition-base),
    color var(--transition-base),
    border-color var(--transition-base),
    box-shadow var(--transition-base),
    transform var(--transition-fast);
  white-space: nowrap;
  line-height: 1;
  text-decoration: none;
}

.mg-btn:hover  { transform: translateY(-1px); }
.mg-btn:active { transform: translateY(0); }

/* Primary */
.mg-btn--primary {
  background: var(--mg-charcoal);
  color: var(--mg-off-white);
  border-color: var(--mg-charcoal);
}
.mg-btn--primary:hover {
  background: var(--mg-black);
  border-color: var(--mg-black);
  box-shadow: 0 6px 20px var(--mg-shadow-md);
}

/* Secondary */
.mg-btn--secondary {
  background: transparent;
  color: var(--mg-charcoal);
  border-color: var(--mg-charcoal);
}
.mg-btn--secondary:hover {
  background: var(--mg-charcoal);
  color: var(--mg-off-white);
}

/* Gold/wood accent */
.mg-btn--gold {
  background: var(--mg-muted-gold);
  color: var(--mg-black);
  border-color: var(--mg-muted-gold);
}
.mg-btn--gold:hover {
  background: var(--mg-wood);
  border-color: var(--mg-wood);
  box-shadow: 0 6px 20px rgba(184, 135, 86, 0.3);
}

/* Light (for dark backgrounds) */
.mg-btn--light {
  background: var(--mg-off-white);
  color: var(--mg-charcoal);
  border-color: var(--mg-off-white);
}
.mg-btn--light:hover {
  background: var(--mg-white);
  box-shadow: 0 6px 20px var(--mg-shadow);
}

/* Ghost (for dark backgrounds) */
.mg-btn--ghost {
  background: transparent;
  color: var(--mg-off-white);
  border-color: rgba(250,248,243,0.4);
}
.mg-btn--ghost:hover {
  background: rgba(250,248,243,0.1);
  border-color: var(--mg-off-white);
}

/* Dark (for light backgrounds) */
.mg-btn--dark {
  background: var(--mg-black);
  color: var(--mg-off-white);
  border-color: var(--mg-black);
}
.mg-btn--dark:hover {
  background: var(--mg-charcoal);
  border-color: var(--mg-charcoal);
  box-shadow: 0 6px 20px var(--mg-shadow-md);
}

/* Link style */
.mg-btn--link {
  background: transparent;
  color: var(--mg-charcoal);
  border: none;
  padding-left: 0;
  padding-right: 0;
  border-bottom: 1px solid var(--mg-charcoal);
  border-radius: 0;
}
.mg-btn--link:hover { color: var(--mg-muted-gold); border-color: var(--mg-muted-gold); }

/* Sizes */
.mg-btn--sm { padding: 10px 20px; font-size: var(--text-xs); }
.mg-btn--lg { padding: 18px 36px; font-size: var(--text-base); }
.mg-btn--xl { padding: 20px 44px; font-size: var(--text-lg); }

/* Icon button */
.mg-btn--icon {
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: var(--radius-full);
}

/* ----------------------------------------------------------
   8. BADGES / STATUS
   ---------------------------------------------------------- */
.mg-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.mg-badge--available {
  background: rgba(63, 90, 68, 0.12);
  color: var(--mg-status-available);
  border: 1px solid rgba(63, 90, 68, 0.25);
}
.mg-badge--reserved {
  background: rgba(184, 135, 86, 0.12);
  color: var(--mg-status-reserved);
  border: 1px solid rgba(184, 135, 86, 0.25);
}
.mg-badge--sold {
  background: rgba(141, 134, 124, 0.12);
  color: var(--mg-status-sold);
  border: 1px solid rgba(141, 134, 124, 0.25);
}
.mg-badge--new {
  background: var(--mg-charcoal);
  color: var(--mg-gold-light);
  border: 1px solid var(--mg-charcoal);
}
.mg-badge--energy {
  background: rgba(63, 90, 68, 0.08);
  color: var(--mg-forest);
  border: 1px solid rgba(63, 90, 68, 0.2);
}

/* ----------------------------------------------------------
   9. CARDS
   ---------------------------------------------------------- */

/* Base card */
.mg-card {
  background: var(--mg-white);
  border: 1px solid var(--mg-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}
.mg-card:hover {
  box-shadow: 0 12px 40px var(--mg-shadow-md);
  transform: translateY(-3px);
}

/* Fact card */
.mg-fact-card {
  background: var(--mg-white);
  border: 1px solid var(--mg-border);
  border-radius: var(--radius-md);
  padding: 28px 24px;
  text-align: center;
  transition: box-shadow var(--transition-base);
}
.mg-fact-card:hover {
  box-shadow: 0 8px 32px var(--mg-shadow);
}
.mg-fact-card__value {
  display: block;
  font-size: var(--text-3xl);
  font-weight: var(--fw-bold);
  color: var(--mg-black);
  line-height: 1;
  margin-bottom: 6px;
}
.mg-fact-card__label {
  font-size: var(--text-sm);
  color: var(--mg-stone);
  font-weight: var(--fw-medium);
}

/* Benefit card */
.mg-benefit-card {
  padding: 32px 28px;
  background: var(--mg-white);
  border: 1px solid var(--mg-border);
  border-radius: var(--radius-lg);
  transition: box-shadow var(--transition-base), border-color var(--transition-base);
}
.mg-benefit-card:hover {
  box-shadow: 0 8px 32px var(--mg-shadow);
  border-color: var(--mg-muted-gold);
}
.mg-benefit-card__icon {
  width: 48px;
  height: 48px;
  background: var(--mg-soft-grey);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  color: var(--mg-forest);
  font-size: 20px;
  transition: background var(--transition-base);
}
.mg-benefit-card:hover .mg-benefit-card__icon {
  background: rgba(63, 90, 68, 0.1);
}
.mg-benefit-card__title {
  font-size: var(--text-lg);
  font-weight: var(--fw-semibold);
  color: var(--mg-black);
  margin-bottom: 10px;
}
.mg-benefit-card__text {
  font-size: var(--text-sm);
  color: var(--mg-stone);
  line-height: var(--lh-loose);
  margin: 0;
}

/* Unit card */
.mg-unit-card {
  background: var(--mg-white);
  border: 1px solid var(--mg-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}
.mg-unit-card:hover {
  box-shadow: 0 12px 40px var(--mg-shadow-md);
  transform: translateY(-4px);
}
.mg-unit-card__image {
  aspect-ratio: 16/9;
  overflow: hidden;
  background: var(--mg-soft-grey);
}
.mg-unit-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}
.mg-unit-card:hover .mg-unit-card__image img { transform: scale(1.04); }
.mg-unit-card__body { padding: 24px; }
.mg-unit-card__title { font-size: var(--text-xl); font-weight: var(--fw-semibold); margin: 8px 0; }
.mg-unit-card__meta {
  display: flex;
  gap: 20px;
  font-size: var(--text-sm);
  color: var(--mg-stone);
  margin-bottom: 16px;
}
.mg-unit-card__price {
  font-size: var(--text-2xl);
  font-weight: var(--fw-bold);
  color: var(--mg-black);
}

/* Contact card */
.mg-contact-card {
  background: var(--mg-white);
  border: 1px solid var(--mg-border);
  border-radius: var(--radius-lg);
  padding: 32px;
  text-align: center;
}
.mg-contact-card__photo {
  width: 96px;
  height: 96px;
  border-radius: var(--radius-full);
  overflow: hidden;
  margin: 0 auto 16px;
  background: var(--mg-soft-grey);
}
.mg-contact-card__photo img { width: 100%; height: 100%; object-fit: cover; }
.mg-contact-card__name { font-size: var(--text-xl); font-weight: var(--fw-semibold); margin-bottom: 4px; }
.mg-contact-card__role { font-size: var(--text-sm); color: var(--mg-stone); margin-bottom: 20px; }
.mg-contact-card__contacts { display: flex; flex-direction: column; gap: 8px; }
.mg-contact-card__contacts a {
  font-size: var(--text-sm);
  color: var(--mg-charcoal);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: color var(--transition-fast);
}
.mg-contact-card__contacts a:hover { color: var(--mg-muted-gold); }

/* Trust card */
.mg-trust-card {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 24px;
  background: var(--mg-white);
  border: 1px solid var(--mg-border);
  border-radius: var(--radius-md);
}
.mg-trust-card__icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  background: var(--mg-soft-grey);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--mg-forest);
  font-size: 18px;
}
.mg-trust-card__text { font-size: var(--text-sm); color: var(--mg-stone); margin: 0; }
.mg-trust-card__title { font-size: var(--text-base); font-weight: var(--fw-semibold); margin-bottom: 4px; }

/* Info card */
.mg-info-card {
  padding: 24px 20px;
  border-left: 3px solid var(--mg-muted-gold);
  background: var(--mg-soft-grey);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

/* CTA panel */
.mg-cta-panel {
  background: var(--mg-charcoal);
  color: var(--mg-off-white);
  border-radius: var(--radius-xl);
  padding: 56px 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}
.mg-cta-panel__title {
  font-size: clamp(var(--text-xl), 2.5vw, var(--text-3xl));
  font-weight: var(--fw-semibold);
  color: var(--mg-off-white);
  margin: 0;
}
.mg-cta-panel__sub {
  font-size: var(--text-base);
  color: var(--mg-warm-grey);
  margin-top: 8px;
}
.mg-cta-panel__actions { display: flex; gap: 12px; flex-shrink: 0; flex-wrap: wrap; }

/* ----------------------------------------------------------
   10. FACTS BAR
   ---------------------------------------------------------- */
.mg-facts-bar {
  background: var(--mg-charcoal);
  padding: 48px 0;
  position: relative;
  overflow: hidden;
}
.mg-facts-bar::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.02'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.mg-facts-bar__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  position: relative;
}
.mg-facts-bar__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 20px;
  text-align: center;
  border-right: 1px solid rgba(255,255,255,0.08);
  gap: 8px;
}
.mg-facts-bar__item:last-child { border-right: none; }
.mg-facts-bar__icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  background: rgba(198, 163, 106, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--mg-muted-gold);
  font-size: 18px;
  margin-bottom: 4px;
}
.mg-facts-bar__value {
  font-size: var(--text-2xl);
  font-weight: var(--fw-bold);
  color: var(--mg-off-white);
  line-height: 1;
}
.mg-facts-bar__label {
  font-size: var(--text-xs);
  color: var(--mg-warm-grey);
  font-weight: var(--fw-medium);
  letter-spacing: 0.05em;
}

/* ----------------------------------------------------------
   11. HEADER
   ---------------------------------------------------------- */

/* HIDE the old Zoomvilla topbar */
.topbar { display: none !important; }

/* Magnoolia header */
.mg-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(250, 248, 243, 0.97);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--mg-border);
  transition: box-shadow var(--transition-base);
}
.mg-header--scrolled { box-shadow: 0 2px 20px var(--mg-shadow); }

.mg-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
  gap: 32px;
}

/* Logo area */
.mg-header__logo { flex-shrink: 0; text-decoration: none; }
.mg-header__logo-wordmark {
  display: flex;
  flex-direction: column;
  line-height: 1;
  text-decoration: none;
}
.mg-header__logo-wordmark .logo-name {
  font-size: 1.5rem;
  font-weight: var(--fw-bold);
  color: var(--mg-black);
  letter-spacing: -0.02em;
}
.mg-header__logo-wordmark .logo-tagline {
  font-size: 0.65rem;
  font-weight: var(--fw-medium);
  color: var(--mg-stone);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-top: 2px;
}

/* Nav */
.mg-header__nav { display: flex; align-items: center; gap: 0; flex: 1; justify-content: center; }
.mg-header__nav ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 2px; }
.mg-header__nav ul li a {
  display: block;
  padding: 8px 14px;
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--mg-charcoal);
  border-radius: var(--radius-sm);
  transition: background var(--transition-fast), color var(--transition-fast);
  text-decoration: none;
  white-space: nowrap;
}
.mg-header__nav ul li a:hover, .mg-header__nav ul li.active a {
  background: var(--mg-soft-grey);
  color: var(--mg-black);
}
.mg-header__nav ul li.current a {
  color: var(--mg-muted-gold);
  font-weight: var(--fw-semibold);
}

/* Right side */
.mg-header__right {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}

/* Lang switcher in header */
.mg-lang-switcher {
  display: flex;
  gap: 2px;
  align-items: center;
}
.mg-lang-switcher a {
  padding: 4px 8px;
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.05em;
  color: var(--mg-stone);
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
  text-decoration: none;
}
.mg-lang-switcher a:hover       { color: var(--mg-charcoal); background: var(--mg-soft-grey); }
.mg-lang-switcher a.active      { color: var(--mg-charcoal); font-weight: var(--fw-bold); }

/* Mobile hamburger */
.mg-header__hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  gap: 5px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px;
}
.mg-header__hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--mg-charcoal);
  border-radius: 2px;
  transition: all var(--transition-base);
}

/* Mobile nav drawer */
.mg-mobile-nav {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 999;
  background: var(--mg-white);
  padding: 24px;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform var(--transition-slow);
}
.mg-mobile-nav.open { transform: translateX(0); }
.mg-mobile-nav__header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 32px; }
.mg-mobile-nav__close {
  background: transparent;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: var(--mg-charcoal);
  padding: 4px;
}
.mg-mobile-nav ul { list-style: none; padding: 0; margin: 0 0 32px; }
.mg-mobile-nav ul li { border-bottom: 1px solid var(--mg-border); }
.mg-mobile-nav ul li a {
  display: block;
  padding: 16px 4px;
  font-size: var(--text-lg);
  font-weight: var(--fw-medium);
  color: var(--mg-charcoal);
}
.mg-mobile-nav__footer { display: flex; flex-direction: column; gap: 12px; }
.mg-mobile-nav__langs { display: flex; gap: 8px; margin-bottom: 8px; }

/* ----------------------------------------------------------
   12. HERO SECTION
   ---------------------------------------------------------- */
.mg-hero {
  position: relative;
  min-height: min(92vh, 820px);
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--mg-warm-dark);
  background-image: linear-gradient(135deg, #1C1C1A 0%, #2A2622 60%, #3F5A44 100%);
}

.mg-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.mg-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.4;
}
.mg-hero__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    rgba(17, 17, 17, 0.85) 0%,
    rgba(28, 28, 26, 0.65) 50%,
    rgba(28, 28, 26, 0.2) 100%
  );
}

.mg-hero__content {
  position: relative;
  z-index: 1;
  max-width: 700px;
  padding: var(--section-y-md) 0;
}

.mg-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mg-muted-gold);
  margin-bottom: 20px;
}
.mg-hero__eyebrow::before {
  content: '';
  display: block;
  width: 28px;
  height: 1px;
  background: var(--mg-muted-gold);
}

.mg-hero__title {
  font-size: clamp(var(--text-3xl), 5.5vw, var(--text-hero));
  font-weight: var(--fw-semibold);
  color: var(--mg-white);
  line-height: var(--lh-tight);
  margin-bottom: 24px;
  letter-spacing: -0.02em;
}
.mg-hero__title strong {
  color: var(--mg-muted-gold);
  font-weight: inherit;
}

.mg-hero__lead {
  font-size: clamp(var(--text-base), 1.8vw, var(--text-lg));
  color: rgba(250, 248, 243, 0.8);
  line-height: var(--lh-loose);
  max-width: 540px;
  margin-bottom: 40px;
}

.mg-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 56px;
}

.mg-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  padding-top: 32px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.mg-hero__meta-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mg-hero__meta-item .value {
  font-size: var(--text-xl);
  font-weight: var(--fw-bold);
  color: var(--mg-white);
}

.mg-hero__meta-item .label {
  font-size: var(--text-xs);
  color: rgba(250, 248, 243, 0.6);
  letter-spacing: 0.05em;
}

/* Location badge */
.mg-hero__location {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-xs);
  color: rgba(250, 248, 243, 0.7);
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: var(--radius-full);
  padding: 6px 14px;
  margin-bottom: 20px;
}

/* ----------------------------------------------------------
   13. FOOTER
   ---------------------------------------------------------- */
.mg-footer {
  background: var(--mg-charcoal);
  color: var(--mg-warm-grey);
  padding-top: 72px;
}

.mg-footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 48px 40px;
  padding-bottom: 56px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.mg-footer__logo-col .mg-footer__brand {
  font-size: 1.5rem;
  font-weight: var(--fw-bold);
  color: var(--mg-white);
  letter-spacing: -0.02em;
  display: block;
  margin-bottom: 6px;
}
.mg-footer__logo-col .mg-footer__tagline {
  font-size: var(--text-xs);
  font-weight: var(--fw-medium);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mg-muted-gold);
  margin-bottom: 18px;
  display: block;
}

.mg-footer__desc {
  font-size: var(--text-sm);
  color: rgba(216, 210, 200, 0.7);
  line-height: var(--lh-loose);
  margin-bottom: 24px;
  max-width: 280px;
}

.mg-footer__col-title {
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mg-white);
  margin-bottom: 20px;
  display: block;
}

.mg-footer__links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mg-footer__links li a {
  font-size: var(--text-sm);
  color: rgba(216, 210, 200, 0.7);
  text-decoration: none;
  transition: color var(--transition-fast);
}
.mg-footer__links li a:hover { color: var(--mg-muted-gold); }

.mg-footer__contact-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--text-sm);
  color: rgba(216, 210, 200, 0.7);
  margin-bottom: 12px;
  transition: color var(--transition-fast);
  text-decoration: none;
}
.mg-footer__contact-item:hover { color: var(--mg-muted-gold); }
.mg-footer__contact-item i { color: var(--mg-muted-gold); font-size: 14px; width: 16px; text-align: center; }

.mg-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0;
  gap: 16px;
  flex-wrap: wrap;
}
.mg-footer__copy {
  font-size: var(--text-xs);
  color: rgba(216, 210, 200, 0.5);
}
.mg-footer__bottom-links {
  display: flex;
  gap: 20px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.mg-footer__bottom-links a {
  font-size: var(--text-xs);
  color: rgba(216, 210, 200, 0.5);
  transition: color var(--transition-fast);
}
.mg-footer__bottom-links a:hover { color: var(--mg-warm-grey); }

.mg-footer__langs {
  display: flex;
  gap: 4px;
}
.mg-footer__langs a {
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  color: rgba(216, 210, 200, 0.5);
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
}
.mg-footer__langs a:hover, .mg-footer__langs a.active {
  color: var(--mg-off-white);
  background: rgba(255,255,255,0.06);
}

/* ----------------------------------------------------------
   14. MOBILE STICKY CTA
   ---------------------------------------------------------- */
.mg-sticky-cta {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 998;
  background: var(--mg-charcoal);
  border-top: 1px solid rgba(255,255,255,0.1);
  padding: 12px 16px;
  gap: 8px;
}
.mg-sticky-cta .mg-btn { flex: 1; justify-content: center; padding: 14px 12px; font-size: var(--text-xs); }

/* ----------------------------------------------------------
   15. SECTION PATTERNS ? HOME PAGE
   ---------------------------------------------------------- */

/* Miks Magnoolia */
.mg-about-section { }
.mg-about-section__image-wrap {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  aspect-ratio: 4/5;
  background: var(--mg-soft-grey);
}
.mg-about-section__image-wrap img { width: 100%; height: 100%; object-fit: cover; }
.mg-about-section__badge {
  position: absolute;
  bottom: 24px;
  right: 24px;
  background: var(--mg-charcoal);
  color: var(--mg-off-white);
  padding: 16px 20px;
  border-radius: var(--radius-md);
  text-align: center;
}
.mg-about-section__badge-value { font-size: var(--text-2xl); font-weight: var(--fw-bold); color: var(--mg-muted-gold); }
.mg-about-section__badge-label { font-size: var(--text-xs); letter-spacing: 0.08em; text-transform: uppercase; }

.mg-about-features { list-style: none; padding: 0; margin: 28px 0; display: flex; flex-direction: column; gap: 12px; }
.mg-about-features li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: var(--text-sm);
  color: var(--mg-charcoal);
}
.mg-about-features li i {
  color: var(--mg-forest);
  margin-top: 1px;
  flex-shrink: 0;
}

/* Benefits grid */
.mg-benefits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
}

/* Placeholder section */
.mg-placeholder-section {
  border: 2px dashed var(--mg-border-dark);
  border-radius: var(--radius-lg);
  padding: 56px 40px;
  text-align: center;
  background: var(--mg-soft-grey);
  margin: 0;
}
.mg-placeholder-section__label {
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mg-muted-gold);
  margin-bottom: 12px;
}
.mg-placeholder-section__title {
  font-size: var(--text-xl);
  font-weight: var(--fw-semibold);
  color: var(--mg-stone);
  margin-bottom: 8px;
}
.mg-placeholder-section__note {
  font-size: var(--text-sm);
  color: var(--mg-warm-grey);
}

/* ----------------------------------------------------------
   16. STYLEGUIDE PAGE
   ---------------------------------------------------------- */
.mg-styleguide-header {
  background: var(--mg-warm-dark);
  color: var(--mg-off-white);
  padding: 48px 0;
  margin-bottom: 0;
}
.mg-styleguide-header h1 { color: var(--mg-off-white); font-size: var(--text-4xl); margin-bottom: 8px; }
.mg-styleguide-header p { color: var(--mg-warm-grey); margin: 0; }

.mg-sg-section { padding: 56px 0; border-bottom: 1px solid var(--mg-border); }
.mg-sg-section:last-child { border-bottom: none; }

.mg-sg-section__title {
  font-size: var(--text-2xl);
  font-weight: var(--fw-semibold);
  color: var(--mg-black);
  margin-bottom: 32px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--mg-muted-gold);
  display: inline-block;
}

.mg-sg-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}

.mg-sg-swatch {
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--mg-border);
}
.mg-sg-swatch__color {
  height: 72px;
}
.mg-sg-swatch__info {
  padding: 10px 12px;
  background: var(--mg-white);
}
.mg-sg-swatch__name { font-size: var(--text-xs); font-weight: var(--fw-semibold); color: var(--mg-charcoal); }
.mg-sg-swatch__hex  { font-size: var(--text-xs); color: var(--mg-stone); font-family: var(--font-mono); }

.mg-sg-type-sample { margin-bottom: 20px; }
.mg-sg-type-label {
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mg-stone);
  margin-bottom: 6px;
}

.mg-sg-btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-bottom: 16px;
}

/* ----------------------------------------------------------
   17. TYPOGRAPHY UTILITIES
   ---------------------------------------------------------- */
.mg-text-xs    { font-size: var(--text-xs); }
.mg-text-sm    { font-size: var(--text-sm); }
.mg-text-base  { font-size: var(--text-base); }
.mg-text-lg    { font-size: var(--text-lg); }
.mg-text-xl    { font-size: var(--text-xl); }
.mg-text-2xl   { font-size: var(--text-2xl); }
.mg-text-3xl   { font-size: var(--text-3xl); }
.mg-text-4xl   { font-size: var(--text-4xl); }
.mg-text-5xl   { font-size: var(--text-5xl); }

.mg-fw-light    { font-weight: var(--fw-light); }
.mg-fw-regular  { font-weight: var(--fw-regular); }
.mg-fw-medium   { font-weight: var(--fw-medium); }
.mg-fw-semibold { font-weight: var(--fw-semibold); }
.mg-fw-bold     { font-weight: var(--fw-bold); }

.mg-text-gold   { color: var(--mg-muted-gold); }
.mg-text-stone  { color: var(--mg-stone) !important; }
.mg-text-muted  { color: var(--mg-warm-grey); }
.mg-text-white  { color: var(--mg-white) !important; }
.mg-text-forest { color: var(--mg-forest); }

/* ----------------------------------------------------------
   18. IMAGE FRAME
   ---------------------------------------------------------- */
.mg-image-frame {
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--mg-soft-grey);
  position: relative;
}
.mg-image-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mg-image-frame--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 8px;
  color: var(--mg-stone);
  font-size: var(--text-sm);
  text-align: center;
  padding: 40px;
  aspect-ratio: 4/3;
}
.mg-image-frame--placeholder i { font-size: 32px; opacity: 0.4; }

/* ----------------------------------------------------------
   19. UTILITY CLASSES
   ---------------------------------------------------------- */
.mg-mt-0  { margin-top: 0; }
.mg-mt-sm { margin-top: var(--gap-sm); }
.mg-mt-md { margin-top: var(--gap-md); }
.mg-mt-lg { margin-top: var(--gap-lg); }

.mg-mb-0  { margin-bottom: 0; }
.mg-mb-sm { margin-bottom: var(--gap-sm); }
.mg-mb-md { margin-bottom: var(--gap-md); }
.mg-mb-lg { margin-bottom: var(--gap-lg); }

.mg-d-flex   { display: flex; }
.mg-d-grid   { display: grid; }
.mg-gap-sm   { gap: var(--gap-sm); }
.mg-gap-md   { gap: var(--gap-md); }
.mg-gap-lg   { gap: var(--gap-lg); }
.mg-align-center { align-items: center; }
.mg-justify-between { justify-content: space-between; }
.mg-flex-wrap { flex-wrap: wrap; }
.mg-text-center { text-align: center; }

/* sr-only */
.mg-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
}

/* ----------------------------------------------------------
   20. RESPONSIVE BREAKPOINTS
   ---------------------------------------------------------- */

/* Tablet ? 992px */
@media (max-width: 992px) {
  :root {
    --section-y-lg: 80px;
    --section-y-md: 60px;
  }

  .mg-header__nav  { display: none; }
  .mg-header__hamburger { display: flex; }
  /* mg-mobile-nav visibility controlled by .is-open class (Phase 27) */

  .mg-facts-bar__grid { grid-template-columns: repeat(3, 1fr); }
  .mg-facts-bar__item:nth-child(4), .mg-facts-bar__item:nth-child(5) { border-top: 1px solid rgba(255,255,255,0.08); }
  .mg-facts-bar__item:nth-child(3) { border-right: none; }

  .mg-footer__grid { grid-template-columns: 1fr 1fr; }

  .mg-cta-panel {
    flex-direction: column;
    text-align: center;
    padding: 40px 28px;
  }
  .mg-cta-panel__actions { justify-content: center; }
}

/* Mobile ? 768px */
@media (max-width: 768px) {
  :root {
    --section-y-lg: 64px;
    --section-y-md: 48px;
    --section-y-sm: 36px;
    --container-px: 16px;
  }

  .mg-hero { min-height: min(80vh, 640px); }
  .mg-hero__actions { flex-direction: column; }
  .mg-hero__actions .mg-btn { width: 100%; justify-content: center; }

  .mg-facts-bar__grid { grid-template-columns: 1fr 1fr; }
  .mg-facts-bar__item:nth-child(5) { grid-column: span 2; border-right: none; border-top: 1px solid rgba(255,255,255,0.08); }
  .mg-facts-bar__item:nth-child(3) { border-right: 1px solid rgba(255,255,255,0.08); }
  .mg-facts-bar__item:nth-child(4) { border-right: none; }

  .mg-footer__grid { grid-template-columns: 1fr; gap: 32px; }
  .mg-footer__bottom { flex-direction: column; text-align: center; }
  .mg-footer__desc { max-width: 100%; }

  .mg-benefits-grid { grid-template-columns: 1fr; }

  .mg-sticky-cta { display: flex; }
  .mg-footer { padding-bottom: 80px; }

  .mg-cta-panel { padding: 32px 20px; }
}

/* Small mobile ? 430px */
@media (max-width: 430px) {
  .mg-hero__title { font-size: var(--text-3xl); }
  .mg-hero__meta  { flex-direction: column; gap: 12px; }
  .mg-header__inner { height: 64px; }
  .mg-facts-bar__grid { grid-template-columns: 1fr; }
  .mg-facts-bar__item { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.08); }
  .mg-facts-bar__item:last-child { border-bottom: none; }
  .mg-facts-bar__item:nth-child(3),
  .mg-facts-bar__item:nth-child(4),
  .mg-facts-bar__item:nth-child(5) { border-top: none; }
}

/* Desktop ? min-width: 1200px */
@media (min-width: 1200px) {
  .mg-header__nav ul li a { padding: 8px 16px; }
}

/* =========================================
   GALLERY STRIP -- sections/approved/gallery-strip-source
   Pure CSS horizontal scroll marquee, no JS
   ========================================= */
.mg-gallery-strip { overflow: hidden; padding: 8px 0 16px; }
.mg-gallery-strip__track { display: flex; gap: 16px; width: max-content; animation: mgGalleryScroll 35s linear infinite; }
.mg-gallery-strip__track:hover { animation-play-state: paused; }
.mg-gallery-strip__item { flex-shrink: 0; }
.mg-gallery-strip__item img { width: 360px; height: 240px; object-fit: cover; border-radius: var(--mg-radius-md); display: block; }
@keyframes mgGalleryScroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
@media (max-width: 768px) { .mg-gallery-strip__item img { width: 280px; height: 190px; } }

/* =========================================
   GALLERY STRIP -- sections/approved/gallery-strip-source
   Pure CSS horizontal scroll marquee, no JS
   ========================================= */
.mg-gallery-strip { overflow: hidden; padding: 8px 0 16px; }
.mg-gallery-strip__track { display: flex; gap: 16px; width: max-content; animation: mgGalleryScroll 35s linear infinite; }
.mg-gallery-strip__track:hover { animation-play-state: paused; }
.mg-gallery-strip__item { flex-shrink: 0; }
.mg-gallery-strip__item img { width: 360px; height: 240px; object-fit: cover; border-radius: var(--mg-radius-md); display: block; }
@keyframes mgGalleryScroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
@media (max-width: 768px) { .mg-gallery-strip__item img { width: 280px; height: 190px; } }


/* =================================================
   PHASE 2.6 FIX: .feature-two spacing
   ================================================= */
.feature-two { padding: 80px 0; }

/* =================================================
   PHASE 2.6 FIX: .funfact-one spacing
   ================================================= */
.funfact-one { padding: 80px 0; background: var(--mg-charcoal); color: var(--mg-off-white); }
.funfact-one .funfact-one__funfact__text { color: var(--mg-warm-grey); }
.funfact-one .funfact-one__count { color: var(--mg-off-white); }
.funfact-one .funfact-one__item__icon i { color: var(--mg-muted-gold); }

/* =================================================
   PHASE 2.6 FIX: section-space utility
   ================================================= */
.section-space { padding-top: 80px; padding-bottom: 80px; }

/* =================================================
   PHASE 2.6 FIX: feature-two color overrides
   Original has orange ::before and image shapes ::after
   ================================================= */
.feature-two::before {
  background-color: var(--mg-charcoal) !important;
}
.feature-two::after {
  background-image: none !important;
  opacity: 0.05;
}
.feature-two__item__icon {
  background-color: rgba(255,255,255,0.08) !important;
  color: var(--mg-muted-gold) !important;
}
.feature-two__item__title a,
.feature-two__item__title {
  color: var(--mg-off-white) !important;
}

/* feature-two__item__image: hide placeholder divs, they stretch card */
.feature-two__item__image > div[style*="height:220px"] {
  display: none !important;
}
.feature-two__item__shape { display: none !important; }

/* =================================================
   PHASE 2.6 FIX: contact-two bg override
   ================================================= */
.contact-two__bg {
  background-color: var(--mg-soft-grey) !important;
}

/* =================================================
   PHASE 2.6 FIX: team-card-two social hover color
   ================================================= */
.team-card-two__social__link a:hover { background: var(--mg-muted-gold) !important; }

/* =================================================
   PHASE 2.6 FIX: process-plan (floor plan) clean spacing
   ================================================= */
.process-plan { padding: 80px 0; }
.process-plan__list__item { border-color: var(--mg-soft-grey) !important; }

/* =================================================
   PHASE 2.6 FIX: video-three color
   ================================================= */
.video-three__title { color: var(--mg-off-white); }
.video-three__video a { color: var(--mg-muted-gold); border-color: var(--mg-muted-gold); }

/* gallery-strip card image size */
.city-house .city-house__card__image img {
  width: 429px;
  height: 469px;
  object-fit: cover;
}

/* best-project-one carousel: fix active (center) slide height to prevent portrait overflow */
.best-project-one__carousel.owl-carousel .owl-stage-outer,
.best-project-one__carousel.owl-carousel .owl-stage {
  height: 648px !important;
}
.best-project-one__carousel.owl-carousel .center .best-project-one__item {
  height: 648px !important;
}
.best-project-one__carousel.owl-carousel .center .best-project-one__item img {
  height: 648px !important;
  width: 100% !important;
  object-fit: cover !important;
}
/* =================================================
   MAIN-SLIDER-TWO: static no-OWL override
   .active wrapper in HTML triggers Zoomvilla opacity rules.
   Remove transition-delay so content shows immediately on load.
   ================================================= */
.main-slider-two .active .main-slider-two__bg {
  transition-delay: 0ms !important;
}
.main-slider-two .active .main-slider-two__content {
  transition-delay: 0ms !important;
}

/* Hero photo background: Cam001 desktop, Cam004 mobile */
.main-slider-two__bg--photo {
  background-image: url('../images/magnoolia/Cam001.0000-1600w.webp') !important;
}
@media (max-width: 767px) {
  .main-slider-two__bg--photo {
    background-image: url('../images/magnoolia/Cam004.0000-768w.webp') !important;
  }
}

/* Phase 35 — TRANSPARENT hero: drop the big white card so the render shows
   through (premium, like the competitor). A left-side scrim + light text keep
   the copy legible over the photo. */
.main-slider-two__bg--photo::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(100deg, rgba(18,22,28,.80) 0%, rgba(18,22,28,.58) 36%, rgba(18,22,28,.24) 64%, rgba(18,22,28,0) 88%);
}
.main-slider-two .active .main-slider-two__content,
.main-slider-two__content {
  background-color: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 150px 0 110px !important;
}
@media (max-width: 991px) {
  .main-slider-two .active .main-slider-two__content,
  .main-slider-two__content { margin: 110px 0 80px !important; }
}
/* Wide screens (>=1640px): the floating header pill drops ~40px lower (its bottom
   sits at ~160px instead of 120px), so the hero eyebrow/title tucked under it. Give
   the hero content extra top clearance at these widths. */
@media (min-width: 1640px) {
  .main-slider-two .active .main-slider-two__content,
  .main-slider-two__content { margin-top: 190px !important; }
}
.main-slider-two__title, .main-slider-two__title span { color: #ffffff !important; }
/* Phase 35.1: the theme sets text-transform: capitalize on the hero title, which
   renders "Tallinna Lähedal". Estonian capitalises only the first word of a
   sentence, so the headline must print exactly as it is written in the CMS. */
.main-slider-two__title, .main-slider-two__title span { text-transform: none !important; }
.main-slider-two__text { color: rgba(255,255,255,.92) !important; }
.main-slider-two__subtitle { background: rgba(255,255,255,.14) !important; color: #f0d8a8 !important; }
.mg-hero-fact strong { color: #ffffff !important; }
.mg-hero-fact span { color: rgba(255,255,255,.82) !important; }
.mg-hero-fact { border-color: rgba(255,255,255,.22) !important; }

/* Ghost variant for secondary hero CTA */
.zoomvilla-btn--border {
  background: transparent !important;
  border: 2px solid var(--mg-muted-gold) !important;
  color: var(--mg-muted-gold) !important;
}
.zoomvilla-btn--border:hover {
  background: var(--mg-muted-gold) !important;
  color: var(--mg-black) !important;
}
/* =================================================
   PHASE 2.6 FIX: feature-two color overrides
   Original has orange ::before and image shapes ::after
   ================================================= */
.feature-two::before {
  background-color: var(--mg-charcoal) !important;
}
.feature-two::after {
  background-image: none !important;
  opacity: 0.05;
}
.feature-two__item__icon {
  background-color: rgba(255,255,255,0.08) !important;
  color: var(--mg-muted-gold) !important;
}
.feature-two__item__title a,
.feature-two__item__title {
  color: var(--mg-off-white) !important;
}

/* feature-two__item__image: hide placeholder divs, they stretch card */
.feature-two__item__image > div[style*="height:220px"] {
  display: none !important;
}
.feature-two__item__shape { display: none !important; }

/* =================================================
   PHASE 2.6 FIX: contact-two bg override
   ================================================= */
.contact-two__bg {
  background-color: var(--mg-soft-grey) !important;
}

/* =================================================
   PHASE 2.6 FIX: team-card-two social hover color
   ================================================= */
.team-card-two__social__link a:hover { background: var(--mg-muted-gold) !important; }

/* =================================================
   PHASE 2.6 FIX: process-plan (floor plan) clean spacing
   ================================================= */
.process-plan { padding: 80px 0; }
.process-plan__list__item { border-color: var(--mg-soft-grey) !important; }

/* =================================================
   PHASE 2.6 FIX: video-three color
   ================================================= */
.video-three__title { color: var(--mg-off-white); }
.video-three__video a { color: var(--mg-muted-gold); border-color: var(--mg-muted-gold); }

/* =================================================
   PHASE 4: DESIGN TOKENS + PRICING TABLE + SECTION STYLES
   ================================================= */

/* -- Design tokens -------------------------------- */
:root {
  --mg-bg:          #f7f4ef;
  --mg-bg-soft:     #fbfaf7;
  --mg-dark:        #151515;
  --mg-ink:         #1d2430;
  --mg-muted:       #6f6a61;
  --mg-gold:        #c89443;
  --mg-gold-soft:   #e8c78a;
  --mg-line:        rgba(29,36,48,.12);
  --mg-radius-lg:   28px;
  --mg-radius-md:   18px;
  --mg-shadow-soft: 0 18px 50px rgba(0,0,0,.10);
  --mg-shadow-card: 0 10px 30px rgba(0,0,0,.08);
}

/* -- Pricing table -------------------------------- */
.mg-pricing-section {
  background: var(--mg-bg-soft);
  padding: 80px 0;
}
.mg-pricing-title {
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 700;
  color: var(--mg-dark);
  margin-bottom: 8px;
}
.mg-pricing-sub {
  color: var(--mg-muted);
  font-size: 1rem;
  margin-bottom: 40px;
}
.mg-table-wrap {
  overflow-x: auto;
  border-radius: var(--mg-radius-md);
  box-shadow: var(--mg-shadow-soft);
}
.mg-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  font-size: 0.95rem;
}
.mg-table thead th {
  background: var(--mg-dark);
  color: #fff;
  font-weight: 600;
  padding: 14px 16px;
  white-space: nowrap;
  text-align: left;
  letter-spacing: .03em;
}
.mg-table tbody tr {
  border-bottom: 1px solid var(--mg-line);
  transition: background .18s;
}
.mg-table tbody tr:last-child { border-bottom: none; }
.mg-table tbody tr:hover { background: #faf8f4; }
.mg-table td {
  padding: 13px 16px;
  color: var(--mg-ink);
  vertical-align: middle;
}
/* Status badges */
.mg-status {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
}
.mg-status--available { background: #e8f5e9; color: #2e7d32; }
.mg-status--reserved  { background: #fff3e0; color: #e65100; }
.mg-status--sold      { background: #fce4ec; color: #c62828; }
.mg-status--tbc       { background: #f0ebe3; color: #8a7e6e; border: 1px solid #d9cfc3; }
.mg-status--unknown   { background: #f5f5f5; color: #757575; }

/* Table CTA button */
.mg-table-cta {
  display: inline-block;
  padding: 7px 14px;
  background: var(--mg-gold);
  color: #fff !important;
  border-radius: 6px;
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background .2s;
}
.mg-table-cta:hover { background: #a77832; color: #fff !important; }
.mg-table-cta--muted { background: #e8e5e0; color: #9a9490 !important; pointer-events: none; }

/* Mobile unit cards */
.mg-unit-card {
  background: #fff;
  border-radius: var(--mg-radius-md);
  box-shadow: var(--mg-shadow-card);
  padding: 20px;
  margin-bottom: 16px;
}
.mg-unit-card__title {
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--mg-dark);
  margin-bottom: 12px;
}
.mg-unit-card__row {
  display: flex;
  justify-content: space-between;
  font-size: 0.88rem;
  color: var(--mg-muted);
  padding: 4px 0;
  border-bottom: 1px solid var(--mg-line);
}
.mg-unit-card__row:last-of-type { border-bottom: none; }
.mg-unit-card__row span:last-child { color: var(--mg-ink); font-weight: 500; }

/* Pricing includes box */
.mg-includes-box {
  background: #fff;
  border-left: 3px solid var(--mg-gold);
  border-radius: 8px;
  padding: 20px 24px;
  box-shadow: 0 4px 14px rgba(0,0,0,.06);
}
.mg-includes-box h5 {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--mg-dark);
  margin-bottom: 10px;
}
.mg-includes-box ul { list-style: none; padding: 0; margin: 0; }
.mg-includes-box li {
  font-size: 0.85rem;
  color: var(--mg-muted);
  padding: 3px 0;
  padding-left: 16px;
  position: relative;
}
.mg-includes-box li::before {
  content: "?";
  position: absolute;
  left: 0;
  color: var(--mg-gold);
  font-weight: 700;
}

/* -- Asendiplaan / masterplan -------------------- */
.mg-masterplan-section {
  padding: 80px 0;
}
.mg-masterplan-title {
  font-size: clamp(1.8rem, 3.5vw, 2.5rem);
  font-weight: 700;
  color: #fff;
  margin-bottom: 12px;
}
.mg-masterplan-sub {
  color: rgba(255,255,255,.65);
  font-size: 1rem;
  max-width: 420px;
  margin-bottom: 32px;
}
.mg-masterplan-img {
  border-radius: var(--mg-radius-lg);
  overflow: hidden;
  box-shadow: var(--mg-shadow-soft);
}
.mg-masterplan-img img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform .5s ease;
}
.mg-masterplan-img:hover img { transform: scale(1.025); }
.mg-masterplan-stat {
  text-align: center;
  padding: 16px;
}
.mg-masterplan-stat__num {
  font-size: 2rem;
  font-weight: 700;
  color: var(--mg-gold);
  line-height: 1;
}
.mg-masterplan-stat__lbl {
  font-size: 0.78rem;
  color: rgba(255,255,255,.55);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-top: 4px;
}
.mg-legend-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 8px;
}

/* -- AI Answer / KKK ----------------------------- */
.mg-faq-section { padding: 80px 0; }
.mg-faq-card {
  background: #fff;
  border-radius: var(--mg-radius-md);
  box-shadow: var(--mg-shadow-card);
  padding: 28px;
  height: 100%;
  transition: transform .25s, box-shadow .25s;
  border: 1px solid var(--mg-line);
}
.mg-faq-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--mg-shadow-soft);
}
.mg-faq-card__icon {
  font-size: 1.5rem;
  color: var(--mg-gold);
  margin-bottom: 14px;
}
.mg-faq-card h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--mg-dark);
  margin-bottom: 10px;
}
.mg-faq-card p {
  font-size: 0.88rem;
  color: var(--mg-muted);
  line-height: 1.6;
  margin: 0;
}

/* -- Contact section ----------------------------- */
.mg-contact-section { padding: 90px 0; }
.mg-contact-title {
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 700;
  color: #fff;
  margin-bottom: 10px;
}
.mg-contact-tag {
  display: inline-block;
  background: var(--mg-gold);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 4px;
  margin-bottom: 20px;
}
.mg-contact-card {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--mg-radius-md);
  padding: 28px;
}
.mg-contact-name {
  font-size: 1.2rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 4px;
}
.mg-contact-role { font-size: 0.85rem; color: rgba(255,255,255,.5); margin-bottom: 20px; }
.mg-contact-link {
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(255,255,255,.8) !important;
  text-decoration: none;
  font-size: 0.95rem;
  margin-bottom: 12px;
  transition: color .2s;
}
.mg-contact-link:hover { color: var(--mg-gold) !important; }
.mg-contact-link i { color: var(--mg-gold); font-size: 1rem; }
.mg-trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin-top: 32px;
  margin-bottom: 40px;
}
.mg-trust-item {
  flex: 1 1 120px;
  text-align: center;
  color: rgba(255,255,255,.7);
  font-size: 0.8rem;
}
.mg-trust-item__num {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--mg-gold);
  display: block;
}
/* Contact form */
.mg-form-group { margin-bottom: 16px; }
.mg-form-label {
  font-size: 0.8rem;
  color: rgba(255,255,255,.55);
  margin-bottom: 5px;
  display: block;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.mg-form-control {
  width: 100%;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 8px;
  color: #fff;
  padding: 11px 14px;
  font-size: 0.93rem;
  outline: none;
  transition: border-color .2s;
}
.mg-form-control::placeholder { color: rgba(255,255,255,.3); }
.mg-form-control:focus { border-color: var(--mg-gold); }
.mg-form-submit {
  width: 100%;
  padding: 13px;
  background: var(--mg-gold);
  border: none;
  border-radius: 8px;
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: background .2s;
  margin-top: 4px;
}
.mg-form-submit:hover { background: #a77832; }


/* === PHASE 4 TOKENS + SECTION STYLES === */
:root{--mg-bg:#f7f4ef;--mg-bg-soft:#fbfaf7;--mg-dark:#151515;--mg-ink:#1d2430;--mg-muted:#6f6a61;--mg-gold:#c89443;--mg-gold-soft:#e8c78a;--mg-line:rgba(29,36,48,.12);--mg-radius-lg:28px;--mg-radius-md:18px;--mg-shadow-soft:0 18px 50px rgba(0,0,0,.10);--mg-shadow-card:0 10px 30px rgba(0,0,0,.08);}
.mg-pricing-section{background:var(--mg-bg-soft);padding:80px 0}.mg-pricing-title{font-size:clamp(2rem,4vw,2.75rem);font-weight:700;color:var(--mg-dark);margin-bottom:8px}.mg-pricing-sub{color:var(--mg-muted);font-size:1rem;margin-bottom:40px}.mg-table-wrap{overflow-x:auto;border-radius:var(--mg-radius-md);box-shadow:var(--mg-shadow-soft)}.mg-table{width:100%;border-collapse:collapse;background:#fff;font-size:.95rem}.mg-table thead th{background:var(--mg-dark);color:#fff;font-weight:600;padding:14px 16px;white-space:nowrap;text-align:left;letter-spacing:.03em}.mg-table tbody tr{border-bottom:1px solid var(--mg-line);transition:background .18s}.mg-table tbody tr:last-child{border-bottom:none}.mg-table tbody tr:hover{background:#faf8f4}.mg-table td{padding:13px 16px;color:var(--mg-ink);vertical-align:middle}.mg-status{display:inline-block;padding:3px 10px;border-radius:20px;font-size:.78rem;font-weight:600;white-space:nowrap}.mg-status--available{background:#e8f5e9;color:#2e7d32}.mg-status--reserved{background:#fff3e0;color:#e65100}.mg-status--sold{background:#fce4ec;color:#c62828}.mg-status--unknown{background:#f5f5f5;color:#757575}.mg-table-cta{display:inline-block;padding:7px 14px;background:var(--mg-gold);color:#fff!important;border-radius:6px;font-size:.82rem;font-weight:600;text-decoration:none;white-space:nowrap;transition:background .2s}.mg-table-cta:hover{background:#a77832;color:#fff!important}.mg-unit-card{background:#fff;border-radius:var(--mg-radius-md);box-shadow:var(--mg-shadow-card);padding:20px;margin-bottom:16px}.mg-unit-card__title{font-weight:700;font-size:1.05rem;color:var(--mg-dark);margin-bottom:12px}.mg-unit-card__row{display:flex;justify-content:space-between;font-size:.88rem;color:var(--mg-muted);padding:4px 0;border-bottom:1px solid var(--mg-line)}.mg-unit-card__row:last-of-type{border-bottom:none}.mg-unit-card__row span:last-child{color:var(--mg-ink);font-weight:500}.mg-includes-box{background:#fff;border-left:3px solid var(--mg-gold);border-radius:8px;padding:20px 24px;box-shadow:0 4px 14px rgba(0,0,0,.06)}.mg-includes-box h5{font-size:.95rem;font-weight:700;color:var(--mg-dark);margin-bottom:10px}.mg-includes-box ul{list-style:none;padding:0;margin:0}.mg-includes-box li{font-size:.85rem;color:var(--mg-muted);padding:3px 0 3px 16px;position:relative}.mg-includes-box li::before{content:'check';font-family:'zoomvilla-icon';position:absolute;left:0;color:var(--mg-gold)}.mg-masterplan-section{padding:80px 0}.mg-masterplan-title{font-size:clamp(1.8rem,3.5vw,2.5rem);font-weight:700;color:#fff;margin-bottom:12px}.mg-masterplan-sub{color:rgba(255,255,255,.65);font-size:1rem;max-width:420px;margin-bottom:32px}.mg-masterplan-img{border-radius:var(--mg-radius-lg);overflow:hidden;box-shadow:var(--mg-shadow-soft)}.mg-masterplan-img img{width:100%;height:auto;display:block;transition:transform .5s ease}.mg-masterplan-img:hover img{transform:scale(1.025)}.mg-masterplan-stat{text-align:center;padding:16px}.mg-masterplan-stat__num{font-size:2rem;font-weight:700;color:var(--mg-gold);line-height:1}.mg-masterplan-stat__lbl{font-size:.78rem;color:rgba(255,255,255,.55);text-transform:uppercase;letter-spacing:.08em;margin-top:4px}.mg-legend-dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:8px}.mg-faq-section{padding:80px 0}.mg-faq-card{background:#fff;border-radius:var(--mg-radius-md);box-shadow:var(--mg-shadow-card);padding:28px;height:100%;transition:transform .25s,box-shadow .25s;border:1px solid var(--mg-line)}.mg-faq-card:hover{transform:translateY(-4px);box-shadow:var(--mg-shadow-soft)}.mg-faq-card__icon{font-size:1.5rem;color:var(--mg-gold);margin-bottom:14px}.mg-faq-card h3{font-size:1rem;font-weight:700;color:var(--mg-dark);margin-bottom:10px}.mg-faq-card p{font-size:.88rem;color:var(--mg-muted);line-height:1.6;margin:0}.mg-contact-section{padding:90px 0}.mg-contact-title{font-size:clamp(2rem,4vw,2.75rem);font-weight:700;color:#fff;margin-bottom:10px}.mg-contact-tag{display:inline-block;background:var(--mg-gold);color:#fff;font-size:.75rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:4px 12px;border-radius:4px;margin-bottom:20px}.mg-contact-card{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:var(--mg-radius-md);padding:28px}.mg-contact-name{font-size:1.2rem;font-weight:700;color:#fff;margin-bottom:4px}.mg-contact-role{font-size:.85rem;color:rgba(255,255,255,.5);margin-bottom:20px}.mg-contact-link{display:flex;align-items:center;gap:10px;color:rgba(255,255,255,.8)!important;text-decoration:none;font-size:.95rem;margin-bottom:12px;transition:color .2s}.mg-contact-link:hover{color:var(--mg-gold)!important}.mg-contact-link i{color:var(--mg-gold);font-size:1rem}.mg-trust-row{display:flex;flex-wrap:wrap;gap:24px;margin-top:32px;margin-bottom:40px}.mg-trust-item{flex:1 1 120px;text-align:center;color:rgba(255,255,255,.7);font-size:.8rem}.mg-trust-item__num{font-size:1.5rem;font-weight:700;color:var(--mg-gold);display:block}.mg-form-group{margin-bottom:16px}.mg-form-label{font-size:.8rem;color:rgba(255,255,255,.55);margin-bottom:5px;display:block;text-transform:uppercase;letter-spacing:.06em}.mg-form-control{width:100%;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.15);border-radius:8px;color:#fff;padding:11px 14px;font-size:.93rem;outline:none;transition:border-color .2s}.mg-form-control::placeholder{color:rgba(255,255,255,.3)}.mg-form-control:focus{border-color:var(--mg-gold)}.mg-form-submit{width:100%;padding:13px;background:var(--mg-gold);border:none;border-radius:8px;color:#fff;font-size:1rem;font-weight:700;cursor:pointer;transition:background .2s;margin-top:4px}.mg-form-submit:hover{background:#a77832}


/* === FIX: header background & shape === */
.main-header--two {
  background-color: transparent !important;
}
.main-header--two .main-header__group-shape {
  display: none !important;
}

/* === FIX: sticky header flash on scroll deceleration === */
.sticky-header--cloned {
  /* override duplicate transition from zoomvilla.css */
  transition: transform 350ms ease, visibility 350ms ease;
  will-change: transform;
}

/* ?? Hero facts row ????????????????????????????????????????????? */
.mg-hero-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 24px 32px;
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid rgba(30,31,36,0.15);
}
.mg-hero-fact strong {
    font-size: 20px;
    font-weight: 700;
    display: block;
    color: var(--zoomvilla-black3, #1E1F24);
    line-height: 1.2;
}
.mg-hero-fact span {
    font-size: 13px;
    color: #555;
}

/* ?? Pricing status: tbc ???????????????????????????????????????? */
.mg-status--tbc {
    background: #f0ebe3;
    color: #8a7e6e;
    border: 1px solid #d9cfc3;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    padding: 4px 10px;
    border-radius: 100px;
    display: inline-block;
    text-transform: uppercase;
}

/* ?? Filter bar ?????????????????????????????????????????? */
[data-filter] {
    padding: 8px 20px;
    border-radius: 100px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid rgba(29, 36, 48, .25);
    background: transparent;
    color: #6f6a61;
    transition: background .2s, color .2s, border-color .2s;
    line-height: 1;
}
[data-filter]:hover {
    background: rgba(29, 36, 48, .07);
    border-color: rgba(29, 36, 48, .4);
}
[data-filter].active,
[data-filter][style*="background: rgb(29"],
[data-filter][style*="background:#1d2430"] {
    background: #1d2430;
    color: #fff;
    border-color: #1d2430;
}

/* ?? Stage group header ????????????????????????????? */
[data-stage-group] {
    border-radius: 12px 12px 0 0;
}
[data-stage-table] {
    border-radius: 0 0 8px 8px;
    overflow: hidden;
    margin-bottom: 0;
}

/* ?? Masterplan hotspot container ??????????????????? */
.mg-masterplan__hotspots {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.mg-masterplan__hotspot {
    position: absolute;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid #fff;
    transform: translate(-50%, -50%);
    cursor: pointer;
    pointer-events: auto;
    transition: transform .2s, box-shadow .2s;
    z-index: 2;
}
.mg-masterplan__hotspot:hover {
    transform: translate(-50%, -50%) scale(1.35);
    box-shadow: 0 0 0 4px rgba(255,255,255,.35);
}
.mg-masterplan__hotspot[data-status="available"] { background: #4caf50; }
.mg-masterplan__hotspot[data-status="reserved"]  { background: #ff9800; }
.mg-masterplan__hotspot[data-status="sold"]       { background: #f44336; }
.mg-masterplan__hotspot[data-status="tbc"]        { background: #c89443; }

/* ?? Mobile sticky CTA bar ????????????????????????? */
.mg-sticky-cta {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 999;
    background: #1d2430;
    padding: 12px 20px;
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
    border-top: 1px solid rgba(200,148,67,.3);
    transform: translateY(100%);
    transition: transform .3s ease;
}
.mg-sticky-cta.is-visible {
    transform: translateY(0);
}
.mg-sticky-cta__btn {
    flex: 1;
    max-width: 200px;
    background: #c89443;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 11px 16px;
    font-size: 14px;
    font-weight: 700;
    font-family: inherit;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    display: block;
    transition: background .2s;
    -webkit-appearance: none;
    appearance: none;
    line-height: 1.2;
}
.mg-sticky-cta__btn:hover  { background: #a77832; color: #fff; }
.mg-sticky-cta__btn--ghost {
    background: transparent;
    border: 1px solid rgba(255,255,255,.3);
    color: rgba(255,255,255,.8);
}
.mg-sticky-cta__btn--ghost:hover { background: rgba(255,255,255,.1); color: #fff; }
@media (min-width: 992px) { .mg-sticky-cta { display: none !important; } }

/* ???????????????????????????????????????????????????????????????
   UNIT DETAIL MODAL ? Phase 7
   Slide-in panel for unit details, floor plans, CTA.
   ??????????????????????????????????????????????????????????????? */

/* Table row / mobile card hover state when selectable */
.mg-unit-row:focus-visible,
.mg-unit-card:focus-visible {
    outline: 2px solid #c89443;
    outline-offset: 2px;
}

/* Modal overlay */
#mg-modal-overlay {
    -webkit-overflow-scrolling: touch;
}

/* Panel scroll bar */
#mg-modal-panel::-webkit-scrollbar {
    width: 4px;
}
#mg-modal-panel::-webkit-scrollbar-track {
    background: #f0ece6;
}
#mg-modal-panel::-webkit-scrollbar-thumb {
    background: #c89443;
    border-radius: 4px;
}

/* Spec grid cell hover */
#mg-specs-grid > div {
    transition: background .15s;
}
#mg-specs-grid > div:hover {
    background: #fbf8f3;
}

/* Modal tab button focus */
#mg-tab-0:focus-visible,
#mg-tab-1:focus-visible,
#mg-tab-2:focus-visible {
    outline: 2px solid #c89443;
    outline-offset: -2px;
}

/* Responsive: full-width panel on mobile */
@media (max-width: 480px) {
    #mg-modal-panel {
        width: 100vw;
    }
}

/* Unit row clickable visual hint */
.mg-unit-row td:first-child::after {
    content: '';
    display: inline-block;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #c89443;
    margin-left: 8px;
    vertical-align: middle;
    opacity: 0;
    transition: opacity .2s;
}
.mg-unit-row:hover td:first-child::after {
    opacity: 1;
}

/* Hero stage note */
.mg-hero-stage-note {
    margin-top: 12px;
    margin-bottom: 0;
    font-size: 12px;
    color: rgba(255, 255, 255, .5);
    letter-spacing: .02em;
}

/* ???????????????????????????????????????????????????????????????
   PHASE 8 ? GLOBAL PREMIUM POLISH
   ??????????????????????????????????????????????????????????????? */

/* ?? Buyer note in Hinnad ??????????????????????????????????????? */
.mg-buyer-note {
    background: #fff8ef;
    border-left: 3px solid #c89443;
    border-radius: 0 10px 10px 0;
    padding: 14px 20px;
    margin-bottom: 28px;
    font-size: 14px;
    color: #4a4540;
    line-height: 1.6;
}

/* ?? Remove all L?HEMALT link underline on service cards ??????? */
.service-card__link {
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: .08em;
    font-weight: 700;
}

/* ?? Service card ? remove faux arrow on cardless sections ????? */
.service-card p.service-card__text {
    font-size: 14px;
    line-height: 1.65;
}

/* ?? Consistent button sizing across site ?????????????????????? */
.zoomvilla-btn {
    white-space: nowrap;
}

/* ?? Hinnad filter button active/hover polish ?????????????????? */
[data-filter]:hover {
    border-color: #c89443 !important;
}

/* ?? Table sold row: mute hover so it doesn't look available ??? */
.mg-unit-row[data-status="sold"]:hover {
    background: inherit !important;
}
.mg-unit-row[data-status="sold"] {
    pointer-events: none;
}
.mg-unit-row[data-status="sold"] td {
    pointer-events: none;
}
/* Allow CTA for sold to still be clickable */
.mg-unit-row[data-status="sold"] .mg-table-cta--muted {
    pointer-events: auto;
}

/* ?? Floor plan section image quality ?????????????????????????? */
.property-plans__image img,
.process-plan__thumb img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
}

/* ?? Contact trust chips mobile wrap ??????????????????????????? */
@media (max-width: 576px) {
    .mg-trust-chips {
        justify-content: flex-start;
    }
}

/* ?? Modal: sold state CTA style override ?????????????????????? */
#mg-modal-cta-btn[data-sold] {
    background: #9a9490;
}
#mg-modal-cta-btn[data-sold]:hover {
    background: #808080;
}

/* ?? Process plan CTA buttons: always column, never row ??????? */
.property-plans__btn {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start;
    gap: 10px;
}
.property-plans__btn .zoomvilla-btn {
    white-space: nowrap;
}
@media (max-width: 576px) {
    .property-plans__btn .zoomvilla-btn {
        width: 100%;
        justify-content: center;
        text-align: center;
    }
}

/* ??????????????????????????????????????????????????????????????
   PHASE 9 ? MOBILE UX + PREMIUM POLISH + FOOTER TRUTH
   ?????????????????????????????????????????????????????????????? */

/* ?? Footer premium ???????????????????????????????????????????? */
.mg-footer__contact-item {
    display: flex;
    align-items: center;
    gap: 10px;
    color: rgba(255,255,255,.7);
    font-size: 14px;
    text-decoration: none;
    margin-bottom: 10px;
    transition: color .2s;
}
.mg-footer__contact-item:hover {
    color: #c89443;
}
.mg-footer__contact-item i {
    color: #c89443;
    width: 16px;
    flex-shrink: 0;
}

/* ?? Hero heading mobile ??????????????????????????????????????? */
@media (max-width: 576px) {
    .main-slider-two__title {
        font-size: clamp(26px, 7vw, 42px);
        line-height: 1.2;
    }
    .main-slider-two__title span {
        display: inline;
        -webkit-text-stroke: 0;
        text-stroke: 0;
    }
    .main-slider-two__content {
        padding: 24px 0 32px;
    }
    .main-slider-two__text {
        font-size: 14px;
        line-height: 1.6;
    }
    .main-slider-two__btn {
        flex-direction: column;
        gap: 10px;
    }
    .main-slider-two__btn a {
        width: 100%;
        justify-content: center;
        min-height: 48px;
        display: flex;
        align-items: center;
    }
}

/* ?? Hero facts bar mobile ????????????????????????????????????? */
@media (max-width: 576px) {
    .mg-hero-facts {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
        margin-top: 20px;
    }
    .mg-hero-fact {
        text-align: center;
    }
    .mg-hero-fact strong {
        font-size: 16px;
    }
    .mg-hero-fact span {
        font-size: 11px;
    }
}

/* ?? Hinnad mobile cards ??????????????????????????????????????? */
@media (max-width: 576px) {
    .mg-unit-card {
        padding: 18px 16px !important;
        border-radius: 12px !important;
    }
    .mg-unit-card [style*="font-size:13px"] {
        font-size: 12px !important;
    }
    /* Filter buttons scroll horizontal on very small screens */
    #hinnad > .container > div:first-of-type {
        flex-wrap: nowrap;
        overflow-x: auto;
        justify-content: flex-start;
        padding-bottom: 4px;
        -webkit-overflow-scrolling: touch;
    }
    #hinnad > .container > div:first-of-type::-webkit-scrollbar {
        height: 0;
    }
}

/* ?? Unit modal mobile ????????????????????????????????????????? */
@media (max-width: 576px) {
    #mg-modal-panel {
        width: 100vw !important;
        border-radius: 0 !important;
    }
    #mg-specs-grid {
        grid-template-columns: 1fr 1fr !important;
    }
    #mg-specs-grid > div {
        padding: 12px !important;
    }
    #mg-specs-grid > div > div:last-child {
        font-size: 14px !important;
    }
}

/* ?? Asendiplaan mobile list item tap target ??????????????????? */
@media (max-width: 991px) {
    .mg-asendiplaan-item {
        min-height: 48px;
    }
}

/* ?? Contact form mobile ??????????????????????????????????????? */
@media (max-width: 576px) {
    #kontakt .col-lg-5 > div,
    #kontakt [style*="border-radius:20px"] {
        padding: 24px 18px !important;
        border-radius: 12px !important;
    }
    #kontakt input,
    #kontakt select,
    #kontakt textarea {
        font-size: 16px !important; /* prevents iOS auto-zoom */
    }
}

/* ?? Sticky CTA: hide below contact section ???????????????????? */
/* JS class .mg-cta-hide added by scroll observer */
.mg-mobile-cta.mg-cta-hide {
    transform: translateY(120%);
    opacity: 0;
    pointer-events: none;
}

/* ?? Section headings mobile scale ???????????????????????????? */
@media (max-width: 576px) {
    .sec-title__title {
        font-size: clamp(22px, 6vw, 36px);
    }
    .sec-title__tagline {
        font-size: 11px;
    }
}

/* ?? Footer mobile ????????????????????????????????????????????? */
@media (max-width: 576px) {
    .mg-footer__grid {
        grid-template-columns: 1fr !important;
        gap: 32px !important;
    }
    .mg-footer__brand {
        font-size: 24px;
    }
    .mg-footer__bottom {
        flex-direction: column;
        gap: 12px;
        text-align: center;
    }
    .mg-footer__bottom-links {
        justify-content: center;
    }
}

/* ?? No horizontal scroll anywhere ???????????????????????????? */
body {
    overflow-x: hidden;
}

/* ?? Homepage trust strip ????????????????????????????????????? */
.mg-trust-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.mg-trust-strip__item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-height: 100%;
  padding: 18px 18px;
  background: linear-gradient(180deg, #ffffff 0%, #faf7f1 100%);
  border: 1px solid rgba(200, 148, 67, 0.20);
  border-radius: 16px;
  box-shadow: 0 10px 28px rgba(29, 36, 48, 0.06);
}

.mg-trust-strip__icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: rgba(200, 148, 67, 0.12);
  color: #c89443;
  font-size: 15px;
}

.mg-trust-strip__text {
  display: block;
  font-size: 14px;
  line-height: 1.6;
  color: #1d2430;
  font-weight: 600;
}

/* ?? Homepage AI answer spacing ??????????????????????????????? */
.mg-ai-answer-grid > [class*="col-"] {
  margin-bottom: 24px;
}

.mg-ai-answer-card {
  height: 100%;
}

/* ?? Buyer note mobile ????????????????????????????????????????? */
@media (max-width: 576px) {
    .mg-buyer-note {
        border-radius: 0 8px 8px 0 !important;
        padding: 14px 14px !important;
    }
}

/* ?? Benefits section mobile ??????????????????????????????????? */
@media (max-width: 768px) {
    .mg-benefit-card {
        padding: 20px 16px;
    }

  .mg-trust-strip {
    grid-template-columns: 1fr 1fr;
  }
}

/* ?? Gallery strip mobile ?????????????????????????????????????? */
@media (max-width: 576px) {
    .mg-gallery-strip .swiper-slide img {
        height: 200px;
        object-fit: cover;
    }

  .mg-trust-strip {
    grid-template-columns: 1fr;
  }

  .mg-trust-strip__item {
    padding: 16px;
    border-radius: 14px;
  }

  .mg-ai-answer-grid > [class*="col-"] {
    margin-bottom: 16px;
  }
}

/* ?? Accordion list: override theme 290px ? 100% width ???????? */
.apartment-two__content .accordion-content .accordion-list {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    max-width: 100%;
    width: 100%;
    gap: 0;
}
.apartment-two__content .accordion-content .accordion-list li {
    flex: 1;
    min-width: 0;
}
.apartment-two__content .accordion-content .accordion-list__item {
    font-size: 13px;
    white-space: normal;
    word-break: break-word;
    align-items: flex-start;
}

/* ?? Hero readability premium tune ????????????????????????????? */
.main-slider-two__title span {
  -webkit-text-stroke: 0.8px rgba(255,255,255,.35);
  color: rgba(255,255,255,.92);
}

/* ?? Floor plan typology module ???????????????????????????????? */
.mg-typology-card {
  background: #fff;
  border-radius: 18px;
  border: 1px solid rgba(29,36,48,.08);
  box-shadow: var(--mg-shadow-soft);
  padding: 24px;
  height: 100%;
}
.mg-typology-card__head h4 {
  margin: 10px 0 8px;
  font-size: 24px;
  color: #1d2430;
}
.mg-typology-card__head p {
  margin: 0;
  color: #6f6a61;
  font-size: 14px;
}
.mg-typology-card__badge {
  display: inline-block;
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #fff;
  background: #1d2430;
  border-radius: 999px;
  padding: 4px 10px;
}
.mg-typology-card__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 16px;
}
.mg-typology-card__grid a {
  display: block;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(29,36,48,.1);
}
.mg-typology-card__grid img {
  width: 100%;
  height: 220px;
  object-fit: contain;
  background: #fbfaf7;
  display: block;
}
.mg-typology-card__facts {
  margin-top: 14px;
  border: 1px solid rgba(29,36,48,.08);
  border-radius: 10px;
  overflow: hidden;
}
.mg-typology-card__facts > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  font-size: 13px;
  color: #6f6a61;
  border-bottom: 1px solid rgba(29,36,48,.06);
}
.mg-typology-card__facts > div:last-child {
  border-bottom: none;
}
.mg-typology-card__facts strong {
  color: #1d2430;
  font-weight: 600;
}
.mg-typology-card__homes {
  margin: 14px 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: #6f6a61;
}
.mg-plan-download {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(29,36,48,.2);
  border-radius: 8px;
  padding: 10px 16px;
  color: #6f6a61;
  font-size: 13px;
  text-decoration: none;
  transition: color .2s, border-color .2s;
}
.mg-plan-download:hover {
  color: #c89443;
  border-color: #c89443;
}

@media (max-width: 576px) {
  .main-slider-two__title span {
    -webkit-text-stroke: 0;
  }
  .mg-typology-card {
    padding: 18px;
  }
  .mg-typology-card__head h4 {
    font-size: 20px;
  }
  .mg-typology-card__grid {
    grid-template-columns: 1fr;
  }
  .mg-typology-card__grid img {
    height: auto;
  }
}

/* ??????????????????????????????????????????????????????????????
   PHASE 11 ? FLOOR PLAN RECOVERY MODULE
   Premium typology cards with labeled floors + plan lightbox
   ?????????????????????????????????????????????????????????????? */

/* Section subtitle */
.mg-section-subtitle {
  color: #6f6a61;
  font-size: 16px;
  line-height: 1.75;
  max-width: 720px;
  margin: 16px auto 0;
}

/* Plan card */
.mg-plan-card {
  background: #fff;
  border-radius: 20px;
  border: 1px solid rgba(29,36,48,.08);
  box-shadow: 0 8px 40px rgba(0,0,0,.07);
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.mg-plan-card__head {
  padding: 24px 24px 20px;
  border-bottom: 1px solid rgba(29,36,48,.07);
}
.mg-plan-card__badges {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}
.mg-plan-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: 4px 11px;
  border-radius: 999px;
  color: #fff;
}
.mg-plan-badge--a { background: #1d2430; }
.mg-plan-badge--b { background: #2c3441; }
.mg-plan-type-chip {
  font-size: 12px;
  font-weight: 600;
  color: #6f6a61;
  background: #f7f4ef;
  border-radius: 999px;
  padding: 4px 11px;
  border: 1px solid rgba(29,36,48,.1);
}
.mg-plan-card__desc {
  font-size: 14px;
  color: #6f6a61;
  line-height: 1.65;
  margin: 0 0 10px;
}
.mg-plan-card__units {
  margin: 0;
  font-size: 12px;
  color: #9a9490;
  line-height: 1.6;
}
.mg-plan-card__units-label {
  font-weight: 600;
  color: #6f6a61;
  margin-right: 4px;
}

/* Floors container */
.mg-plan-card__floors {
  flex: 1;
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Single floor block */
.mg-plan-floor {
  flex: 1;
}
.mg-plan-floor__label {
  margin-bottom: 10px;
}
.mg-plan-floor__num {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #1d2430;
  background: #f7f4ef;
  border-radius: 6px;
  padding: 4px 10px;
}
.mg-plan-floor__num::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #c89443;
  flex-shrink: 0;
}

/* Image wrapper + hover overlay */
.mg-plan-floor__img-wrap {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(29,36,48,.09);
  background: #fbfaf7;
  cursor: pointer;
}
.mg-plan-floor__img {
  width: 100%;
  height: 240px;
  object-fit: contain;
  display: block;
  transition: transform .35s ease;
}
.mg-plan-floor__img-wrap:hover .mg-plan-floor__img {
  transform: scale(1.02);
}
.mg-plan-floor__overlay {
  position: absolute;
  inset: 0;
  background: rgba(29,36,48,.48);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .25s;
}
.mg-plan-floor__img-wrap:hover .mg-plan-floor__overlay,
.mg-plan-floor__img-wrap:focus-within .mg-plan-floor__overlay {
  opacity: 1;
}

/* Enlarge button */
.mg-plan-enlarge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,.95);
  color: #1d2430;
  border: none;
  border-radius: 8px;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background .2s, color .2s;
  min-height: 44px;
}
.mg-plan-enlarge:hover {
  background: #c89443;
  color: #fff;
}

/* Download link */
.mg-plan-dl {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 600;
  color: #c89443;
  text-decoration: none;
  padding: 4px 0;
  transition: color .2s;
}
.mg-plan-dl:hover { color: #a77832; }

/* Actions row under image */
.mg-plan-floor__actions {
  margin-top: 8px;
  margin-bottom: 4px;
}

/* Divider between floors */
.mg-plan-floors-divider {
  height: 1px;
  background: rgba(29,36,48,.08);
  margin: 18px 0;
}

/* Card CTAs */
.mg-plan-card__ctas {
  padding: 0 24px 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.mg-plan-card__ctas .zoomvilla-btn,
.mg-plan-card__ctas .zoomvilla-btn--border {
  flex: 1;
  min-width: 140px;
  justify-content: center;
  text-align: center;
  min-height: 48px;
}

/* Plan disclaimer */
.mg-plan-disclaimer {
  text-align: center;
  font-size: 13px;
  color: #9a9490;
  max-width: 720px;
  margin: 28px auto 0;
  line-height: 1.7;
}

/* Plan chip in Hinnad table */
.mg-plan-chip {
  display: inline-block;
  margin-top: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  background: #f0ebe3;
  color: #6f6a61;
  border-radius: 6px;
  padding: 2px 8px;
  border: 1px solid rgba(29,36,48,.1);
}
.mg-plan-chip--a { background: #eef2ff; color: #3949ab; border-color: rgba(57,73,171,.2); }
.mg-plan-chip--b { background: #e8f5e9; color: #388e3c; border-color: rgba(56,142,60,.2); }

/* ?? Phase 11 mobile responsive ????????????????????????????? */
@media (max-width: 576px) {
  .mg-plan-card__ctas {
    flex-direction: column;
  }
  .mg-plan-card__ctas .zoomvilla-btn,
  .mg-plan-card__ctas .zoomvilla-btn--border {
    width: 100%;
  }
  .mg-plan-floor__img {
    height: 180px;
  }
  .mg-section-subtitle {
    font-size: 14px;
  }
}
@media (max-width: 390px) {
  .mg-plan-floor__img {
    height: 150px;
  }
}

/* ??????????????????????????????????????????????????????????????
   PHASE 15 ? Page-level premium CSS system
   ?????????????????????????????????????????????????????????????? */

/* ?? Page hero ???????????????????????????????????????????????? */
.mg-page-hero {
  background: #1d2430;
  margin-top: -160px;
  padding: 220px 0 64px;
  position: relative;
  overflow: hidden;
}
.mg-page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(200,148,67,.06) 0%, transparent 60%);
  pointer-events: none;
}
.mg-page-hero--light {
  background: #f7f4ef;
  padding: 220px 0 64px;
}
.mg-page-hero--light .mg-page-hero__eyebrow,
.mg-page-hero--light .mg-page-hero__title,
.mg-page-hero--light .mg-page-hero__lead {
  color: #1d2430;
}
.mg-page-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #c89443;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.mg-page-hero__eyebrow::before,
.mg-page-hero__eyebrow::after {
  content: '';
  display: block;
  width: 28px;
  height: 1px;
  background: #c89443;
}
.mg-page-hero__title {
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 700;
  color: #fff;
  line-height: 1.15;
  margin: 0 0 20px;
  max-width: 780px;
}
.mg-page-hero__lead {
  color: rgba(255,255,255,.7);
  font-size: 17px;
  line-height: 1.8;
  max-width: 680px;
  margin-bottom: 32px;
}
.mg-page-hero__note {
  color: rgba(255,255,255,.42);
  font-size: 13px;
  line-height: 1.65;
  max-width: 640px;
  border-left: 2px solid rgba(200,148,67,.35);
  padding-left: 14px;
  margin-top: 16px;
}
.mg-page-hero__ctas {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 32px;
}

/* ?? Page section base ??????????????????????????????????????? */
.mg-page-section {
  padding: 72px 0;
}
.mg-page-section--sm {
  padding: 48px 0;
}
.mg-page-section--lg {
  padding: 96px 0;
}
.mg-page-section--white  { background: #fff; }
.mg-page-section--cream  { background: #f7f4ef; }
.mg-page-section--warm   { background: #fbfaf7; }
.mg-page-section--dark   { background: #1d2430; }
.mg-page-section--darker { background: #151b26; }

/* ?? Section heading ????????????????????????????????????????? */
.mg-section-heading {
  margin-bottom: 48px;
}
.mg-section-heading--center {
  text-align: center;
}
.mg-section-heading__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #c89443;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.mg-section-heading__eyebrow::before,
.mg-section-heading__eyebrow::after {
  content: '';
  display: block;
  width: 20px;
  height: 1px;
  background: #c89443;
}
.mg-section-heading__title {
  font-size: clamp(22px, 3vw, 36px);
  font-weight: 700;
  color: #1d2430;
  line-height: 1.2;
  margin: 0 0 14px;
}
.mg-section-heading__title--white { color: #fff; }
.mg-section-heading__subtitle {
  color: #6f6a61;
  font-size: 16px;
  line-height: 1.75;
  max-width: 640px;
}
.mg-section-heading--center .mg-section-heading__subtitle {
  margin-left: auto;
  margin-right: auto;
}

/* ?? Proof / feature card ???????????????????????????????????? */
.mg-proof-card {
  background: #fff;
  border-radius: 16px;
  padding: 28px 24px;
  height: 100%;
  border: 1px solid rgba(29,36,48,.07);
  transition: border-color .25s, box-shadow .25s;
}
.mg-proof-card:hover {
  border-color: rgba(200,148,67,.35);
  box-shadow: 0 8px 28px rgba(29,36,48,.06);
}
.mg-proof-card--cream { background: #fbfaf7; }
.mg-proof-card__icon {
  width: 52px;
  height: 52px;
  background: rgba(200,148,67,.1);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  flex-shrink: 0;
}
.mg-proof-card__icon i { color: #c89443; font-size: 20px; }
.mg-proof-card__title {
  font-size: 15px;
  font-weight: 700;
  color: #1d2430;
  margin: 0 0 10px;
  line-height: 1.3;
}
.mg-proof-card__body {
  font-size: 14px;
  color: #6f6a61;
  line-height: 1.75;
  margin: 0;
}

/* ?? Comparison card (plan A/B) ?????????????????????????????? */
.mg-comparison-card {
  background: #fff;
  border-radius: 20px;
  padding: 36px 32px;
  border: 1.5px solid rgba(29,36,48,.08);
  position: relative;
  height: 100%;
  transition: border-color .25s, box-shadow .25s, transform .25s;
}
.mg-comparison-card:hover {
  border-color: #c89443;
  box-shadow: 0 12px 40px rgba(29,36,48,.09);
  transform: translateY(-2px);
}
.mg-comparison-card--featured {
  border-color: #c89443;
  box-shadow: 0 8px 32px rgba(200,148,67,.15);
}
.mg-comparison-card__badge {
  position: absolute;
  top: -13px;
  left: 32px;
  background: #c89443;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 3px 14px;
  border-radius: 20px;
}
/* Phase 35.1 item 12 — the variant badges now carry a descriptive phrase
   ("Variant B — suurem panipaik ja terrass") instead of a two-word tag, so they
   must not be uppercased and need room to wrap on narrow screens. Plan A gets a
   neutral tone; Plan B keeps the gold "featured" treatment. */
.mg-comparison-card__badge {
  text-transform: none;
  letter-spacing: .01em;
  font-size: 11.5px;
  max-width: calc(100% - 64px);
  white-space: normal;
  line-height: 1.35;
}
.mg-comparison-card__badge--plain { background: #1d2430; }

.mg-comparison-card__plan {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #c89443;
  margin-bottom: 8px;
}
.mg-comparison-card__title {
  font-size: 26px;
  font-weight: 700;
  color: #1d2430;
  margin: 0 0 6px;
}
.mg-comparison-card__size {
  font-size: 15px;
  color: #6f6a61;
  margin: 0 0 24px;
}
.mg-comparison-card__specs {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
  border-top: 1px solid rgba(29,36,48,.07);
  padding-top: 20px;
}
.mg-comparison-card__specs li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  font-size: 14px;
  color: #4a4540;
  border-bottom: 1px solid rgba(29,36,48,.05);
}
.mg-comparison-card__specs li strong { color: #1d2430; font-weight: 600; }
.mg-comparison-card__pitch {
  font-size: 14px;
  color: #6f6a61;
  line-height: 1.7;
  margin: 0 0 28px;
  font-style: italic;
}
.mg-comparison-card__ctas {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* ?? Timeline (ostuprotsess) ????????????????????????????????? */
.mg-timeline {
  list-style: none;
  padding: 0;
  margin: 0;
  position: relative;
}
.mg-timeline::before {
  content: '';
  position: absolute;
  top: 28px;
  bottom: 0;
  left: 27px;
  width: 2px;
  background: linear-gradient(to bottom, #c89443, rgba(200,148,67,.1));
}
.mg-timeline__item {
  display: flex;
  gap: 24px;
  padding-bottom: 40px;
  position: relative;
}
.mg-timeline__item:last-child { padding-bottom: 0; }
.mg-timeline__num {
  width: 56px;
  height: 56px;
  background: #c89443;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  box-shadow: 0 4px 14px rgba(200,148,67,.35);
}
.mg-timeline__body { padding-top: 12px; }
.mg-timeline__step-title {
  font-size: 17px;
  font-weight: 700;
  color: #1d2430;
  margin: 0 0 8px;
}
.mg-timeline__step-body {
  font-size: 14px;
  color: #6f6a61;
  line-height: 1.75;
  margin: 0;
}

/* ?? Image card ?????????????????????????????????????????????? */
.mg-image-card {
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  background: #e8e3db;
}
.mg-image-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s ease;
}
.mg-image-card:hover img { transform: scale(1.03); }
.mg-image-card__caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(29,36,48,.75));
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  padding: 32px 18px 16px;
}

/* ?? Editorial grid (2-col text + image) ????????????????????? */
.mg-editorial-row {
  display: grid;
  /* Same treatment as the feature rows below: the photo takes the larger share.
     --reverse flips via direction:rtl, so one ratio serves both directions. */
  grid-template-columns: 1.45fr 1fr;
  gap: 48px;
  align-items: center;
}
/* Let grid cells shrink below their content's intrinsic size so a fixed-width
   image (width="580") can never force the row wider than the viewport. */
.mg-editorial-row > * { min-width: 0; }
.mg-editorial-row__img img {
  width: 100%;
  /* The render is a wide panorama, so filling the column still left a thin strip
     (557x279 on a 1440 screen). A 3:2 box gives it real presence without the
     heavy side-cropping a 4:3 box would cause on this crop. */
  aspect-ratio: 3 / 2;
  object-fit: cover;
  height: auto;
  display: block;
  border-radius: 16px;
}
.mg-editorial-row--reverse { direction: rtl; }
.mg-editorial-row--reverse > * { direction: ltr; }
@media (max-width: 767px) {
  .mg-editorial-row { grid-template-columns: 1fr; gap: 32px; }
  .mg-editorial-row--reverse { direction: ltr; }
}

/* ?? Location fallback card ?????????????????????????????????? */
.mg-location-fallback {
  background: #fff;
  border-radius: 20px;
  padding: 40px 36px;
  border: 1.5px solid rgba(200,148,67,.25);
  text-align: center;
}
.mg-location-fallback__icon {
  width: 72px;
  height: 72px;
  background: rgba(200,148,67,.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
}
.mg-location-fallback__icon i { color: #c89443; font-size: 30px; }
.mg-location-fallback__address {
  font-size: 17px;
  font-weight: 700;
  color: #1d2430;
  margin: 0 0 8px;
}
.mg-location-fallback__sub {
  font-size: 14px;
  color: #6f6a61;
  margin: 0 0 24px;
}
.mg-location-fallback__dev-note {
  font-size: 12px;
  color: #aaa;
  margin-top: 16px;
}
/* Asukoht address card — on narrow phones the long "Ava aadress Google Mapsis"
   button (with its angular shape) overflowed the card edges. Keep it inside. */
@media (max-width: 575px) {
  .mg-location-fallback { padding: 28px 16px; overflow: hidden; }
  .mg-location-fallback .zoomvilla-btn {
    max-width: 100%;
    white-space: normal;
    line-height: 1.35;
    text-align: center;
    padding-left: 26px;
    padding-right: 22px;
  }
}
/* Global mobile safety: long-label buttons (e.g. "Vaata asukohta ja kaugusi") wrap
   inside their container instead of overflowing the screen edges. */
@media (max-width: 575px) {
  .zoomvilla-btn { max-width: 100%; white-space: normal; line-height: 1.3; }
}

/* ?? Distance table ?????????????????????????????????????????? */
.mg-distance-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.mg-distance-table th {
  text-align: left;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #c89443;
  padding: 0 0 12px;
  border-bottom: 2px solid rgba(200,148,67,.25);
}
.mg-distance-table td {
  padding: 12px 0;
  color: #4a4540;
  border-bottom: 1px solid rgba(29,36,48,.06);
  vertical-align: top;
}
.mg-distance-table td:first-child { font-weight: 600; color: #1d2430; width: 40%; }
.mg-distance-table td:last-child { color: #888; font-size: 13px; }

/* ?? Gallery grid ???????????????????????????????????????????? */
.mg-gallery-grid {
  display: grid;
  /* Two per row, not three: the renders were 379px wide on a 1440 screen, small
     for the page whose whole purpose is the visuals. */
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
@media (max-width: 1024px) { .mg-gallery-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 576px)  { .mg-gallery-grid { grid-template-columns: 1fr; } }
.mg-gallery-item {
  border-radius: 14px;
  overflow: hidden;
  position: relative;
  background: #e8e3db;
  cursor: pointer;
  aspect-ratio: 4/3;
}
.mg-gallery-item--tall { aspect-ratio: 3/4; }
.mg-gallery-item--wide {
  grid-column: span 2;
  aspect-ratio: 16/9;
}
.mg-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .45s ease;
}
.mg-gallery-item:hover img { transform: scale(1.05); }
.mg-gallery-item__overlay {
  position: absolute;
  inset: 0;
  background: rgba(29,36,48,.0);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .3s;
}
.mg-gallery-item:hover .mg-gallery-item__overlay {
  background: rgba(29,36,48,.25);
}
.mg-gallery-item__overlay i {
  color: rgba(255,255,255,0);
  font-size: 28px;
  transition: color .3s;
}
.mg-gallery-item:hover .mg-gallery-item__overlay i { color: #fff; }

/* ?? Gallery filter bar ?????????????????????????????????????? */
.mg-gallery-filter {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 32px;
}
.mg-gallery-filter__btn {
  padding: 8px 20px;
  border-radius: 100px;
  border: 1.5px solid rgba(29,36,48,.15);
  background: #fff;
  font-size: 13px;
  font-weight: 600;
  color: #4a4540;
  cursor: pointer;
  transition: all .2s;
}
.mg-gallery-filter__btn:hover,
.mg-gallery-filter__btn.active {
  background: #1d2430;
  border-color: #1d2430;
  color: #fff;
}

/* ?? SEO note / disclaimer ??????????????????????????????????? */
.mg-seo-note {
  background: rgba(200,148,67,.06);
  border-left: 3px solid #c89443;
  border-radius: 0 10px 10px 0;
  padding: 14px 20px;
  font-size: 13px;
  color: #6f6a61;
  line-height: 1.65;
  max-width: 780px;
}
.mg-seo-note strong { color: #1d2430; }

/* ?? Internal links strip ???????????????????????????????????? */
.mg-internal-links {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  padding: 24px 0;
  border-top: 1px solid rgba(29,36,48,.07);
  margin-top: 16px;
}
.mg-internal-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 600;
  color: #1d2430;
  text-decoration: none;
  padding: 6px 14px;
  border-radius: 100px;
  border: 1px solid rgba(29,36,48,.12);
  background: #fff;
  transition: all .2s;
}
.mg-internal-link:hover {
  background: #1d2430;
  color: #fff;
  border-color: #1d2430;
}
.mg-internal-link i { font-size: 11px; }

/* ?? CTA strip (dark bottom) ????????????????????????????????? */
.mg-page-cta {
  background: #1d2430;
  padding: 72px 0;
  text-align: center;
}
.mg-page-cta__title {
  font-size: clamp(22px, 3vw, 34px);
  font-weight: 700;
  color: #fff;
  margin: 0 0 16px;
}
.mg-page-cta__sub {
  color: rgba(255,255,255,.6);
  font-size: 16px;
  max-width: 520px;
  margin: 0 auto 36px;
  line-height: 1.7;
}
.mg-page-cta__btns {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ?? Stage badge ????????????????????????????????????????????? */
.mg-stage-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 20px;
  vertical-align: middle;
}
.mg-stage-badge--1 { background: #e8f1ff; color: #2b5db3; }
.mg-stage-badge--2 { background: #e8f5e9; color: #2e7d32; }

/* ?? How-to block ???????????????????????????????????????????? */
.mg-how-to {
  background: #fff;
  border-radius: 20px;
  padding: 36px 40px;
  border: 1px solid rgba(29,36,48,.07);
}
.mg-how-to__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  margin-top: 28px;
}
@media (max-width: 768px) { .mg-how-to__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .mg-how-to__grid { grid-template-columns: 1fr; } }
.mg-how-to__step { text-align: center; }
.mg-how-to__num {
  width: 44px;
  height: 44px;
  background: #1d2430;
  border-radius: 50%;
  color: #c89443;
  font-size: 18px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
}
.mg-how-to__label {
  font-size: 13px;
  font-weight: 700;
  color: #1d2430;
  margin-bottom: 6px;
}
.mg-how-to__desc { font-size: 13px; color: #6f6a61; line-height: 1.6; }

/* ?? Row gutter utilities (complement Bootstrap gutter-y-20) ?? */
.gutter-y-16 { --bs-gutter-y: 16px; }
.gutter-y-28 { --bs-gutter-y: 28px; }

/* ?? FAQ card grid ??????????????????????????????????????????? */
.mg-faq-card {
  background: #fff;
  border-radius: 14px;
  padding: 24px;
  height: 100%;
  border: 1px solid rgba(29,36,48,.07);
  transition: border-color .2s, box-shadow .2s;
}
.mg-faq-card:hover {
  border-color: rgba(200,148,67,.3);
  box-shadow: 0 6px 20px rgba(29,36,48,.05);
}
.mg-faq-card__q {
  font-size: 15px;
  font-weight: 700;
  color: #1d2430;
  margin: 0 0 10px;
  line-height: 1.4;
}
.mg-faq-card__a {
  font-size: 14px;
  color: #6f6a61;
  line-height: 1.75;
  margin: 0;
}

/* ?? Conversion intent cards (kontakt page) ??????????????????? */
.mg-intent-card {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  background: #fff;
  border-radius: 16px;
  padding: 22px 24px;
  border: 1px solid rgba(29,36,48,.07);
  text-decoration: none;
  transition: border-color .2s, box-shadow .2s;
  cursor: default;
}
.mg-intent-card:hover {
  border-color: rgba(200,148,67,.35);
  box-shadow: 0 6px 22px rgba(29,36,48,.06);
}
.mg-intent-card__icon {
  width: 44px;
  height: 44px;
  background: rgba(200,148,67,.1);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.mg-intent-card__icon i { color: #c89443; font-size: 17px; }
.mg-intent-card__title { font-size: 14px; font-weight: 700; color: #1d2430; margin: 0 0 4px; }
.mg-intent-card__sub { font-size: 13px; color: #6f6a61; margin: 0; line-height: 1.5; }

/* ?? Feature row (image + text side by side) ?????????????????? */
.mg-feature-row {
  display: grid;
  /* Phase 35.1 item 14 — the columns used to alternate 1.1fr/1fr, so every second
     photo came out ~4% narrower. Equal columns give all four elements the exact
     same image size, which is what Indrek asked for. */
  /* The client asked twice for these to be larger ("rohkelt visuaali oli
     eesmärk"), so the photo takes the larger share. Mirrored on reverse rows so
     all four elements stay exactly the same size — the property Phase 35.1 set. */
  grid-template-columns: 1.45fr 1fr;
  gap: 48px;
  align-items: center;
}
.mg-feature-row--reverse { grid-template-columns: 1.45fr 1fr; }
@media (max-width: 991px) {
  .mg-feature-row,
  .mg-feature-row--reverse { grid-template-columns: 1fr; gap: 36px; }
}
.mg-feature-row__img {
  border-radius: 20px;
  overflow: hidden;
  position: relative;
  background: #e8e3db;
  /* Phase 35.1 item 14 — the image used to stretch to the row height, so a row
     with one bullet less (Kasutusõigusega hooviala) rendered a visibly smaller
     photo than its neighbours. A fixed 4:3 box makes every element identical and
     larger than the old 340px floor. */
  aspect-ratio: 4 / 3;
  align-self: center;
}
.mg-feature-row__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.mg-feature-row__img--tall { aspect-ratio: 7 / 6; }
/* On mobile the single-column image is width-bound, so its natural height is
   shorter than the desktop min-height — drop min-height so the container hugs
   the image (no grey background below it). Placed AFTER the base rules so it
   wins on source order. */
@media (max-width: 991px) {
  .mg-feature-row__img,
  .mg-feature-row__img--tall { min-height: 0; }
  .mg-feature-row__img img { height: auto; }
}
.mg-feature-row__content {}
.mg-feature-row__kicker {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #c89443;
  margin-bottom: 12px;
}
.mg-feature-row__title {
  font-size: clamp(20px, 2.5vw, 30px);
  font-weight: 700;
  color: #1d2430;
  margin: 0 0 16px;
  line-height: 1.25;
}
.mg-feature-row__body {
  font-size: 15px;
  color: #6f6a61;
  line-height: 1.8;
  margin: 0 0 24px;
}
.mg-feature-row__list {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
}
.mg-feature-row__list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: #4a4540;
  padding: 6px 0;
  border-bottom: 1px solid rgba(29,36,48,.05);
}
.mg-feature-row__list li i { color: #c89443; margin-top: 2px; flex-shrink: 0; font-size: 12px; }

/* ?? Unit group list (asendiplaan) ??????????????????????????? */
.mg-unit-group { margin-bottom: 32px; }
.mg-unit-group__address {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #c89443;
  margin-bottom: 10px;
}
.mg-unit-group__items { display: flex; flex-wrap: wrap; gap: 8px; }
.mg-unit-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 100px;
  font-size: 13px;
  font-weight: 600;
  border: 1px solid rgba(29,36,48,.12);
  background: #fff;
  text-decoration: none;
  color: #1d2430;
  cursor: pointer;
  transition: all .2s;
}
.mg-unit-chip--available:hover { background: #1d2430; color: #fff; border-color: #1d2430; }
.mg-unit-chip--reserved { background: #fffbf0; border-color: rgba(200,148,67,.35); color: #8a6b2a; cursor: default; }
.mg-unit-chip--sold { background: #f5f5f5; border-color: #ddd; color: #aaa; cursor: default; text-decoration: line-through; }
.mg-unit-chip__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.mg-unit-chip--available .mg-unit-chip__dot { background: #4caf50; }
.mg-unit-chip--reserved .mg-unit-chip__dot  { background: #c89443; }
.mg-unit-chip--sold .mg-unit-chip__dot      { background: #ccc; }

/* ?? Lightbox minimal ???????????????????????????????????????? */
#mg-lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(21,27,38,.94);
  align-items: center;
  justify-content: center;
  padding: 20px;
}
#mg-lightbox.active { display: flex; }
#mg-lightbox img {
  max-width: 100%;
  max-height: 90vh;
  border-radius: 8px;
  object-fit: contain;
}
#mg-lightbox-close {
  position: absolute;
  top: 20px;
  right: 24px;
  background: none;
  border: none;
  color: #fff;
  font-size: 30px;
  cursor: pointer;
  line-height: 1;
  opacity: .7;
  transition: opacity .2s;
}
#mg-lightbox-close:hover { opacity: 1; }
#mg-lightbox-caption {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255,255,255,.6);
  font-size: 13px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 80%;
}
/* Lightbox prev/next navigation (Phase 33.1) */
.mg-lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,.12);
  color: #fff;
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s;
  z-index: 2;
}
.mg-lightbox-nav:hover { background: rgba(200,148,67,.85); }
.mg-lightbox-nav--prev { left: 20px; }
.mg-lightbox-nav--next { right: 20px; }
@media (max-width: 576px) {
  .mg-lightbox-nav { width: 44px; height: 44px; font-size: 24px; }
  .mg-lightbox-nav--prev { left: 8px; }
  .mg-lightbox-nav--next { right: 8px; }
}

/* ?? Phase 13 ?????????????????????????????????????????????????? */
.is-plan-highlighted {
  outline: 3px solid #c89443;
  outline-offset: 4px;
  animation: mg-plan-pulse 2.8s ease forwards;
}
@keyframes mg-plan-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(200, 148, 67, 0.45); }
  40%  { box-shadow: 0 0 0 16px rgba(200, 148, 67, 0); }
  100% { box-shadow: 0 0 0 0 rgba(200, 148, 67, 0); outline-color: transparent; }
}

/* ?? FAQ accordion (kkk page) ???????????????????????????????? */
button.mg-faq-card__q {
  all: unset;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  font-size: 15px;
  font-weight: 700;
  color: #1d2430;
  line-height: 1.4;
  cursor: pointer;
  padding: 0;
  margin: 0;
  transition: color .2s;
}
button.mg-faq-card__q:hover {
  color: #c89443;
}
button.mg-faq-card__q i {
  font-size: 14px;
  color: #c89443;
  flex-shrink: 0;
  transition: transform .25s;
}
button.mg-faq-card__q[aria-expanded="true"] i {
  transform: rotate(45deg);
}
.mg-faq-card__a {
  font-size: 14px;
  color: #6f6a61;
  line-height: 1.75;
  margin: 0;
}
.mg-faq-card__a p {
  margin: 12px 0 0;
}
.mg-faq-card__a[hidden] {
  display: none;
}

/* ===================================================================
   PHASE 27 ? Mobile-First Design System Rescue
   Additions: mobile nav, header, typography, spacing, CTAs, footer
   =================================================================== */

/* -- Mobile toggle visibility ------------------------------- */
.site-header__mobile-toggle {
  display: none;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--mg-off-white);
  padding: 10px;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
}
@media (max-width: 991px) {
  .site-header__mobile-toggle { display: flex; }
  .site-header__right { display: none !important; }
  .site-header__nav   { display: none !important; }
}

/* -- New mobile nav drawer (Phase 27) ----------------------- */
.mg-mobile-nav {
  position: fixed;
  top: 0;
  left: auto;   /* reset inset:0 from legacy rule */
  right: 0;
  bottom: 0;
  z-index: 9000;
  width: min(320px, 92vw);
  background: #fff;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 0.28s cubic-bezier(.4,0,.2,1), visibility 0s linear 0.28s;
  box-shadow: -4px 0 32px rgba(0,0,0,.18);
  /* Hidden on all viewports by default ? shown only when .is-open */
  visibility: hidden;
  pointer-events: none;
}
.mg-mobile-nav.is-open {
  transform: translateX(0);
  visibility: visible;
  pointer-events: auto;
  transition: transform 0.28s cubic-bezier(.4,0,.2,1), visibility 0s;
}
.mg-mobile-nav__overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 8999;          /* below drawer (9000), above page */
  background: rgba(29,36,48,.52);
  /* no backdrop-filter here ? blur was covering the drawer */
}
/* overlay is now a separate sibling element, shown via JS class */
.mg-mobile-nav__overlay.is-active { display: block; }

.mg-mobile-nav__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 14px;
  border-bottom: 1px solid #f0ede8;
  flex-shrink: 0;
}
.mg-mobile-nav__logo {
  font-size: 18px;
  font-weight: 700;
  color: #1d2430;
  text-decoration: none;
  letter-spacing: .02em;
}
.mg-mobile-nav__close {
  background: transparent;
  border: 1px solid #e5e0d8;
  color: #1d2430;
  cursor: pointer;
  padding: 8px;
  min-width: 40px;
  min-height: 40px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s;
}
.mg-mobile-nav__close:hover { background: #f7f4ef; }

.mg-mobile-nav__cta-primary {
  padding: 16px 20px;
  flex-shrink: 0;
}
.mg-mobile-nav__cta-btn {
  display: block;
  width: 100%;
  padding: 13px 20px;
  background: #c89443;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .04em;
  text-align: center;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s, transform .1s;
}
.mg-mobile-nav__cta-btn:hover {
  background: #b07d35;
  color: #fff;
  text-decoration: none;
  transform: translateY(-1px);
}

.mg-mobile-nav__links {
  padding: 0 0 8px;
  flex: 1;
}
.mg-mobile-nav__links ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.mg-mobile-nav__links ul li {
  border-bottom: 1px solid #f0ede8;
}
.mg-mobile-nav__links ul li a {
  display: flex;
  align-items: center;
  padding: 13px 20px;
  font-size: 15px;
  font-weight: 500;
  color: #1d2430;
  text-decoration: none;
  min-height: 44px;
  transition: background .12s, color .12s;
}
.mg-mobile-nav__links ul li a:hover {
  background: #f7f4ef;
  color: #c89443;
}

.mg-mobile-nav__contact {
  padding: 18px 20px 14px;
  border-top: 1px solid #f0ede8;
  flex-shrink: 0;
}
.mg-mobile-nav__contact-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #c89443;
  margin-bottom: 8px;
}
.mg-mobile-nav__contact-phone {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  color: #1d2430;
  text-decoration: none;
  min-height: 44px;
}
.mg-mobile-nav__contact-phone:hover { color: #c89443; }

.mg-mobile-nav__lang {
  padding: 12px 20px 20px;
  flex-shrink: 0;
  border-top: 1px solid #f0ede8;
}

/* -- Mobile typography scale (Phase 27) --------------------- */
@media (max-width: 767px) {
  h1, .mg-hero__title, .mg-page-hero__title {
    font-size: clamp(28px, 8vw, 38px) !important;
    line-height: 1.1 !important;
  }
  h2 { font-size: clamp(22px, 6vw, 30px) !important; line-height: 1.15 !important; }
  h3 { font-size: clamp(18px, 5vw, 23px) !important; }
  body, p { font-size: 15px; }
  .mg-page-hero__lead { font-size: 15px !important; }
}

/* -- Mobile spacing (Phase 27) ------------------------------ */
@media (max-width: 767px) {
  .section-space     { padding: 56px 0 !important; }
  .mg-page-section   { padding: 56px 0 !important; }
  .mg-page-section--sm { padding: 32px 0 !important; }
  .mg-hero           { min-height: 88vh !important; }
}
@media (max-width: 430px) {
  .section-space     { padding: 44px 0 !important; }
  .mg-page-section   { padding: 44px 0 !important; }
}

/* -- Mobile cards (Phase 27) -------------------------------- */
@media (max-width: 767px) {
  .mg-comparison-card { padding: 20px !important; }
  .mg-comparison-card + .mg-comparison-card { margin-top: 16px; }
  .mg-unit-card { padding: 16px !important; }
}
@media (max-width: 575px) {
  .row .col-lg-3,
  .row .col-md-6 { flex: 0 0 100%; max-width: 100%; }
}

/* -- Pricing teaser mobile (Phase 27) ---------------------- */
@media (max-width: 767px) {
  /* Ensure teaser is full-width stacked on mobile */
  .section-space > .container > div[style*="display:flex"][style*="flex-wrap:wrap"] {
    flex-direction: column !important;
  }
}

/* -- Footer mobile (Phase 27) ------------------------------- */
@media (max-width: 767px) {
  .site-footer > .container > div:first-child {
    flex-direction: column;
    gap: 28px !important;
  }
}

/* -- "0 homes" guard (Phase 27) ----------------------------- */
.mg-unit-count-zero {
  display: none;
}
[data-mg-units-loaded="false"] .mg-unit-count-zero {
  display: block;
}

/* -- Sticky mobile CTA (Phase 27) --------------------------- */
.mg-sticky-cta {
  display: none;
}
@media (max-width: 767px) {
  .mg-sticky-cta {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 500;
    padding: 12px 16px 16px;
    background: rgba(255,255,255,.97);
    border-top: 1px solid #e5e0d8;
    gap: 10px;
    transform: translateY(100%);
    transition: transform .3s cubic-bezier(.4,0,.2,1);
    box-shadow: 0 -4px 24px rgba(0,0,0,.1);
  }
  .mg-sticky-cta.is-visible { transform: translateY(0); }
  .mg-sticky-cta.is-hidden  { transform: translateY(100%); }
  .mg-sticky-cta__btn {
    flex: 1;
    padding: 13px;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 44px;
  }
  .mg-sticky-cta__btn--primary {
    background: #c89443;
    color: #fff;
  }
  .mg-sticky-cta__btn--secondary {
    background: transparent;
    color: #1d2430;
    border: 1px solid #d0cac0;
  }
}



/* -- Header logo: fixed wrapper so logo never affects header height -- */
.main-header__logo {
  overflow: hidden;
  display: flex !important;
  align-items: center;
  flex-shrink: 0;
  height: 72px;
  max-height: 72px;
}
/* 8-item top menu (Sisedisain + Ehitusinfo added): keep it compact on desktop —
   tighter gaps, single-line labels and a smaller font so it doesn't sprawl or wrap. */
@media (min-width: 992px) {
  .main-header--two .main-menu .main-menu__list > li + li { margin-left: 20px; }
  .main-header--two .main-menu__list > li > a { white-space: nowrap; font-size: 15px; letter-spacing: 0; }
  .main-header--two .main-header__logo { margin-right: 14px; }
}
@media (min-width: 992px) and (max-width: 1300px) {
  .main-header--two .main-menu .main-menu__list > li + li { margin-left: 12px; }
  .main-header--two .main-menu__list > li > a { font-size: 14px; }
}
/* "Ridaelamu mugavus. Eramaja privaatsus." card (about-two): frosted glass —
   NOT a solid white box, but not 100% transparent either (that left the text
   unreadable over the render). Semi-transparent white + blur keeps it legible
   while the render still shows through. Desktop only; on mobile the box is hidden. */
.about-two__content::after {
  background-color: rgba(255,255,255,0) !important;
  -webkit-backdrop-filter: blur(5px) !important;
  backdrop-filter: blur(5px) !important;
  border: 1px solid rgba(255,255,255,.8) !important;
}
.main-header__logo a {
  display: flex !important;
  align-items: center;
  height: 100%;
  overflow: hidden;
  text-decoration: none;
}

/* -- Header logo responsive sizing ------------------------------- */
.mg-header-logo-img {
  height: 72px !important;
  width: auto !important;
  display: block !important;
  object-fit: contain;
  max-height: 72px !important;
  flex-shrink: 0;
  image-rendering: auto;
}
@media (max-width: 991px) {
  .main-header__logo { height: 44px; max-height: 44px; }
  .mg-header-logo-img {
    height: 44px !important;
    max-height: 44px !important;
  }
}
@media (max-width: 575px) {
  .main-header__logo { height: 44px; max-height: 44px; }
  .mg-header-logo-img {
    height: 44px !important;
    max-height: 44px !important;
  }
}

/* ── Mobile fixes (Phase 28 feedback) ─────────────────────────────────── */

/* Fix 3: Header full width on mobile – remove container-fluid gutter */
@media (max-width: 767px) {
  .main-header .container-fluid {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .main-header__inner {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* Fix 1: Hero block – add horizontal padding so text doesn't touch edges */
@media (max-width: 576px) {
  .main-slider-two__content {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

/* Fix 2: Hero buttons – remove inline margin-left that offsets second btn */
@media (max-width: 576px) {
  .main-slider-two__btn a {
    margin-left: 0 !important;
    margin-right: 0 !important;
    text-align: center;
  }
}

/* Fix 1: Trust chips covered by sticky CTA bar – add bottom clearance */
@media (max-width: 767px) {
  /* chips wrapper itself gets bottom padding so sticky bar doesn't cover last row */
  .mg-contact-trust-chips {
    padding-bottom: 96px;
  }
  #kontakt {
    padding-bottom: 20px !important;
  }
  .mg-footer {
    padding-bottom: 90px !important;
  }
}

/* Fix 2: Contact block – hide right-side background stripe on mobile */
@media (max-width: 767px) {
  .mg-contact-bg-accent {
    display: none !important;
  }
}

/* Fix 4: About-one first image – full width on mobile */
@media (max-width: 767px) {
  .about-one__image__item__inner {
    width: 100% !important;
    height: auto !important;
    min-height: 220px;
  }
  .about-one__image__item__inner img,
  .about-one__image__one {
    width: 100% !important;
    height: auto !important;
    min-height: 220px;
    object-fit: cover;
  }
  .about-one__image {
    overflow: hidden;
  }
}

/* Fix 2 (scroll-top): lift above sticky CTA bar on mobile */
@media (max-width: 767px) {
  .scroll-top.active {
    bottom: 96px !important;
  }
}

/* Fix 3 (about-two Cam005): remove fixed 1075px width on mobile */
@media (max-width: 767px) {
  .about-two__thumb {
    width: 100% !important;
    min-height: 260px !important;
    max-width: 100% !important;
    overflow: hidden;
  }
  .about-two__thumb img {
    width: 100% !important;
    height: 260px !important;
    min-height: unset !important;
    object-fit: cover;
    display: block;
  }
}

/* Fix 5: About-one second image (Valmib 2027 interior) – full width on mobile */
@media (max-width: 767px) {
  .about-one__image__item-two {
    width: 100% !important;
    margin-top: 16px;
  }
  .about-one__image__item-two img {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    display: block;
  }
}

/* ============================================================
   Phase 29 — Premium rowhouse selection (row → home → detail)
   ============================================================ */
.mg-rh { display: flex; flex-direction: column; gap: 28px; }
.mg-rh__map { order: 2; }
.mg-rh__panel { order: 1; }
@media (min-width: 992px) {
  .mg-rh { flex-direction: row; align-items: flex-start; gap: 36px; }
  .mg-rh__map { order: 1; flex: 0 0 46%; max-width: 46%; position: sticky; top: 96px; }
  .mg-rh__panel { order: 2; flex: 1 1 auto; min-width: 0; }
}

/* map markers */
.mg-rh__marker { background: none; border: none; cursor: pointer; padding: 0; line-height: 0; }
.mg-rh__marker-dot {
  display: block; width: 30px; height: 30px; border-radius: 50%;
  background: rgba(29,36,48,.55); border: 2px solid #fff; box-shadow: 0 2px 8px rgba(0,0,0,.25);
  transition: background .2s, transform .2s;
}
.mg-rh__marker-num {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  color: #fff; font-size: 13px; font-weight: 700; pointer-events: none;
}
.mg-rh__marker:hover .mg-rh__marker-dot,
.mg-rh__marker.is-active .mg-rh__marker-dot { background: #c89443; transform: scale(1.12); }
.mg-rh__marker.is-active .mg-rh__marker-dot { box-shadow: 0 0 0 6px rgba(200,148,67,.25), 0 2px 8px rgba(0,0,0,.25); }

/* row cards */
.mg-rh__rows { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-bottom: 24px; }
@media (max-width: 576px) { .mg-rh__rows { grid-template-columns: 1fr; } }
.mg-rh-card {
  text-align: left; background: #faf8f4; border: 1.5px solid rgba(29,36,48,.1); border-radius: 14px;
  padding: 18px 18px 16px; cursor: pointer; transition: border-color .2s, box-shadow .2s, transform .15s;
  display: flex; flex-direction: column; gap: 8px; min-height: 44px;
}
.mg-rh-card:hover { border-color: rgba(200,148,67,.6); box-shadow: 0 10px 28px rgba(29,36,48,.08); }
.mg-rh-card.is-active { border-color: #c89443; background: #fff; box-shadow: 0 12px 32px rgba(200,148,67,.16); }
.mg-rh-card__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.mg-rh-card__title { font-size: 17px; font-weight: 700; color: #1d2430; }
.mg-rh-card__meta { font-size: 12.5px; color: #8a8479; }
.mg-rh-card__avail { display: flex; flex-wrap: wrap; gap: 12px; font-size: 12px; font-weight: 600; }
.mg-rh-card__cta { font-size: 13px; font-weight: 700; color: #c89443; margin-top: 2px; }

/* selected homes */
.mg-rh-homes__title { font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #9c8b7e; margin-bottom: 14px; }
.mg-rh-homes__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
@media (max-width: 576px) { .mg-rh-homes__grid { grid-template-columns: 1fr; } }
.mg-rh-home {
  text-align: left; background: #fff; border: 1px solid rgba(29,36,48,.1); border-radius: 14px; overflow: hidden;
  cursor: pointer; padding: 0; transition: border-color .2s, box-shadow .2s, transform .15s; display: flex; flex-direction: column;
}
.mg-rh-home:hover { border-color: rgba(200,148,67,.6); box-shadow: 0 10px 26px rgba(29,36,48,.1); transform: translateY(-2px); }
.mg-rh-home__img { display: block; aspect-ratio: 4/3; background: #eee7db; overflow: hidden; }
.mg-rh-home__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mg-rh-home__body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 4px; }
.mg-rh-home__addr { font-size: 16px; font-weight: 700; color: #1d2430; }
.mg-rh-home__spec { font-size: 13px; color: #6f6a61; }
.mg-rh-home__yard { font-size: 13px; color: #8a8479; }
.mg-rh-home__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; }
.mg-rh-home__cta { font-size: 13px; font-weight: 700; color: #c89443; }
.mg-rh-chip {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--c, #888);
}
.mg-rh-chip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c, #888); }

/* ============================================================
   Phase 30 — Interactive perspective masterplan (/asendiplaan)
   ============================================================ */
.mg-mp__stage { margin-bottom: 22px; }
.mg-mp__imgwrap { position: relative; border-radius: 18px; overflow: hidden; border: 1px solid rgba(29,36,48,.10); box-shadow: 0 18px 48px rgba(29,36,48,.14); background: #e9e4da; line-height: 0; }
.mg-mp__img { width: 100%; height: auto; display: block; }
.mg-mp__svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.mg-mp__zone { fill: rgba(200,148,67,0); stroke: rgba(255,255,255,0); stroke-width: 0.6; transition: fill .2s, stroke .2s; pointer-events: auto; }
.mg-mp__imgwrap:hover .mg-mp__zone { stroke: rgba(255,255,255,.35); }
.mg-mp__zone:hover { fill: rgba(200,148,67,.30); stroke: rgba(255,255,255,.9); }
.mg-mp__zone.is-active { fill: rgba(200,148,67,.42); stroke: #f3d9a8; stroke-width: 0.8; }
.mg-mp__marker { position: absolute; transform: translate(-50%,-50%); display: inline-flex; align-items: center; gap: 7px; background: rgba(29,36,48,.40); border: 1px solid rgba(255,255,255,.55); color: #fff; border-radius: 100px; padding: 4px 12px 4px 5px; cursor: pointer; backdrop-filter: blur(2px); transition: background .2s, transform .15s, opacity .2s; white-space: nowrap; opacity: .8; }
.mg-mp__marker:hover, .mg-mp__marker.is-active, .mg-mp__marker.is-hover { background: #c89443; opacity: 1; transform: translate(-50%,-50%) scale(1.05); }
.mg-mp__marker-num { width: 22px; height: 22px; border-radius: 50%; background: #c89443; color: #fff; font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.mg-mp__marker.is-active .mg-mp__marker-num { background: #fff; color: #1d2430; }
.mg-mp__marker-label { font-size: 12.5px; font-weight: 600; }
@media (max-width: 575px) { .mg-mp__marker-label { display: none; } .mg-mp__marker { padding: 4px; } }
/* Phase 35: per-home box markers — compact, status-coloured pill with the box number */
.mg-mp__marker--home { background: transparent; border: none; padding: 0; backdrop-filter: none; gap: 0; opacity: .94; }
.mg-mp__marker--home:hover, .mg-mp__marker--home.is-active, .mg-mp__marker--home.is-hover { background: transparent; opacity: 1; transform: translate(-50%,-50%) scale(1.14); }
.mg-mp__marker--home .mg-mp__marker-num { width: auto; min-width: 20px; height: 21px; padding: 0 7px; border-radius: 100px; border: 2px solid #fff; box-shadow: 0 1px 5px rgba(0,0,0,.4); font-size: 11px; letter-spacing: .02em; }
.mg-mp__marker--home.is-active .mg-mp__marker-num { outline: 2px solid #1d2430; outline-offset: 1px; }
.mg-mp__zone--home.is-active { fill: rgba(200,148,67,.34); stroke: #f3d9a8; stroke-width: 0.8; }
.mg-mp__hint { font-size: 12px; color: #a8a196; margin-top: 10px; }

.mg-mp__rows { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 8px; }
@media (max-width: 768px) { .mg-mp__rows { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 430px) { .mg-mp__rows { grid-template-columns: 1fr; } }
.mg-mp__rowbtn.is-active { border-color: #c89443; background: #fff; box-shadow: 0 12px 32px rgba(200,148,67,.16); }

.mg-mp__panel { margin-top: 26px; padding-top: 24px; border-top: 1px solid rgba(29,36,48,.08); }
.mg-mp__panel-title { font-size: 22px; font-weight: 700; color: #1d2430; margin: 0; }
.mg-mp__panel-meta { font-size: 13px; color: #8a8479; margin-top: 4px; }
.mg-mp__panel-help { font-size: 13px; color: #6f6a61; margin: 10px 0 16px; }

.mg-mp__detail { margin-top: 26px; background: #faf8f4; border: 1px solid rgba(29,36,48,.08); border-radius: 18px; padding: 26px; }
.mg-mp__detail-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 26px; }
.mg-mp__detail-grid--nomap { grid-template-columns: 1fr; }
@media (max-width: 860px) { .mg-mp__detail-grid { grid-template-columns: 1fr; } }
.mg-mp__detail-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #c89443; }
.mg-mp__detail-title { font-size: 26px; font-weight: 700; color: #1d2430; margin: 4px 0 6px; }
.mg-mp__detail-sub { font-size: 14px; color: #6f6a61; }
.mg-mp__status { display: flex; align-items: center; gap: 8px; margin: 14px 0 18px; font-size: 14px; font-weight: 700; color: #1d2430; }
.mg-mp__status-dot { width: 10px; height: 10px; border-radius: 50%; background: #4caf50; }
.mg-mp__specs dl { margin: 0; }
.mg-mp__spec { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid rgba(29,36,48,.07); }
.mg-mp__spec dt { font-size: 13px; color: #888; margin: 0; }
.mg-mp__spec dd { font-size: 13px; font-weight: 600; color: #1d2430; margin: 0; text-align: right; }
.mg-mp__ctas { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }
.mg-btn { display: block; text-align: center; padding: 13px 18px; border-radius: 10px; font-size: 15px; font-weight: 700; text-decoration: none; cursor: pointer; min-height: 44px; }
.mg-btn--gold { background: #c89443; color: #fff; border: none; }
.mg-btn--gold:hover { background: #b8842f; color: #fff; }
.mg-btn--ghost { background: #fff; color: #c89443; border: 1.5px solid #c89443; }
.mg-mp__trust { font-size: 12.5px; color: #9a9490; margin-top: 14px; font-style: italic; }

.mg-mp__map-label { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #9c8b7e; margin-bottom: 8px; }
.mg-mp__map { position: relative; border-radius: 12px; overflow: hidden; border: 1px solid rgba(29,36,48,.1); background: #f3efe7; }
.mg-mp__map img { width: 100%; height: auto; display: block; }
.mg-mp__map-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; overflow: visible; }
.mg-mp__map-zone { fill: rgba(200,148,67,.12); stroke: rgba(185,128,43,.6); stroke-width: 1.5px; stroke-linejoin: round; vector-effect: non-scaling-stroke; pointer-events: auto; cursor: pointer; outline: none; transition: fill .15s ease, stroke-width .15s ease; }
.mg-mp__map-zone:hover, .mg-mp__map-zone:focus-visible { fill: rgba(200,148,67,.42); stroke: #b9802b; stroke-width: 2px; }
.mg-mp__map-zone.is-active { fill: rgba(200,148,67,.55); stroke: #b9802b; stroke-width: 2.5px; filter: drop-shadow(0 1px 4px rgba(185,128,43,.55)); }
.mg-mp__map-picker { margin: 0 0 28px; }
.mg-mp__map-picker-stage { position: relative; border-radius: 14px; overflow: hidden; border: 1px solid rgba(29,36,48,.12); background: #f3efe7; }
.mg-mp__map-picker-stage img { width: 100%; height: auto; display: block; }
.mg-mp__map-pin { position: absolute; width: 28px; height: 28px; transform: translate(-50%,-50%); border-radius: 50%; border: 3px solid #c89443; background: rgba(200,148,67,.32); box-shadow: 0 0 0 6px rgba(200,148,67,.18); z-index: 3; }
.mg-mp__map-open { display: inline-block; margin-top: 10px; font-size: 13px; font-weight: 700; color: #c89443; text-decoration: none; }

.mg-mp__floors { margin-top: 24px; padding-top: 22px; border-top: 1px solid rgba(29,36,48,.08); }
.mg-mp__floors-title { font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #9c8b7e; margin-bottom: 12px; }
.mg-mp__floors-tabs { display: flex; gap: 8px; margin-bottom: 14px; }
.mg-mp__ftab { padding: 8px 18px; border-radius: 100px; border: 1px solid rgba(29,36,48,.2); background: #fff; color: #6f6a61; font-size: 13px; font-weight: 600; cursor: pointer; min-height: 40px; }
.mg-mp__ftab.is-active { background: #1d2430; color: #fff; border-color: #1d2430; }
.mg-mp__floor-stage { position: relative; background: #fff; border: 1px solid rgba(29,36,48,.08); border-radius: 14px; padding: 16px; text-align: center; }
.mg-mp__floor-stage img { max-width: 100%; height: auto; display: inline-block; }
/* Phase 35: both floor plans side by side (no tab toggle) */
.mg-mp__floors-both { display: flex; gap: 16px; flex-wrap: wrap; }
.mg-mp__floor-fig { margin: 0; flex: 1 1 280px; background: #fff; border: 1px solid rgba(29,36,48,.08); border-radius: 14px; padding: 16px; text-align: center; }
.mg-mp__floor-fig figcaption { font-size: 13px; font-weight: 700; color: #6f6a61; margin-top: 10px; }
/* Phase 35: home-detail modal floor plans wrap on small screens */
@media (max-width: 640px) { .mg-hd-floors-row { flex-wrap: wrap; } .mg-hd-floors-row figure { flex: 1 1 100% !important; } }
.mg-mp__floor-open { position: absolute; top: 12px; right: 12px; font-size: 12px; font-weight: 700; color: #c89443; text-decoration: none; background: rgba(255,255,255,.9); padding: 6px 10px; border-radius: 8px; }
.mg-mp__floor-cap { font-size: 13px; color: #6f6a61; margin-top: 10px; }

/* ============================================================
   Phase 30.1 — masterplan polish (view switcher, icons, lightbox)
   ============================================================ */
.mg-mp__imgwrap { position: relative; }
.mg-mp__arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 4;
  width: 44px; height: 44px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(29,36,48,.62); color: #fff; font-size: 26px; line-height: 1;
  display: flex; align-items: center; justify-content: center; backdrop-filter: blur(2px);
  transition: background .2s; box-shadow: 0 4px 16px rgba(0,0,0,.2);
}
.mg-mp__arrow:hover { background: #c89443; }
.mg-mp__arrow--prev { left: 14px; }
.mg-mp__arrow--next { right: 14px; }
@media (max-width: 575px) { .mg-mp__arrow { width: 36px; height: 36px; font-size: 20px; } .mg-mp__arrow--prev{left:8px;} .mg-mp__arrow--next{right:8px;} }

.mg-mp__views { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 14px 0 6px; }
.mg-mp__viewpill {
  padding: 8px 18px; border-radius: 100px; border: 1px solid rgba(29,36,48,.2);
  background: #fff; color: #6f6a61; font-size: 13px; font-weight: 600; cursor: pointer;
  min-height: 40px; transition: all .15s;
}
.mg-mp__viewpill:hover { border-color: rgba(200,148,67,.6); }
.mg-mp__viewpill.is-active { background: #1d2430; color: #fff; border-color: #1d2430; }

.mg-mp__detail-desc { font-size: 14px; color: #6f6a61; line-height: 1.6; margin: 0 0 18px; }
.mg-mp__spec dt { display: flex; align-items: center; gap: 9px; }
.mg-mp__spec-ic { display: inline-flex; color: #c89443; flex-shrink: 0; }
.mg-mp__spec-ic svg { width: 16px; height: 16px; }
.mg-mp__cta-link { display: block; text-align: center; font-size: 13px; font-weight: 600; color: #6f6a61; text-decoration: none; padding: 6px; }
.mg-mp__cta-link:hover { color: #c89443; }

.mg-mp__map-pin { display: flex; align-items: flex-start; justify-content: center; }
.mg-mp__map-pin-label {
  position: absolute; top: -26px; left: 50%; transform: translateX(-50%);
  background: #1d2430; color: #fff; font-size: 10px; font-weight: 700; letter-spacing: .04em;
  padding: 3px 8px; border-radius: 6px; white-space: nowrap;
}
.mg-mp__map-pin-label::after { content: ""; position: absolute; bottom: -4px; left: 50%; transform: translateX(-50%); border: 4px solid transparent; border-top-color: #1d2430; }
.mg-mp__map-note { font-size: 11.5px; color: #a8a196; margin-top: 10px; line-height: 1.5; }

.mg-mp__floor-zoombtn { position: relative; display: inline-block; border: none; background: none; padding: 0; cursor: zoom-in; max-width: 460px; width: 100%; }
.mg-mp__floor-zoombtn img { max-width: 100%; height: auto; display: inline-block; }
.mg-mp__floor-zoomhint { position: absolute; bottom: 8px; right: 8px; background: rgba(20,25,33,.78); color: #fff; font-size: 11px; font-weight: 600; padding: 4px 9px; border-radius: 8px; opacity: 0; transition: opacity .2s; pointer-events: none; }
.mg-mp__floor-zoombtn:hover .mg-mp__floor-zoomhint { opacity: 1; }
.mg-mp__floor-empty { font-size: 13px; color: #8a8479; line-height: 1.6; padding: 24px 16px; margin: 0; }

.mg-mp__lightbox {
  position: fixed; inset: 0; z-index: 9400; background: rgba(20,25,33,.88);
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.mg-mp__lightbox[hidden] { display: none; }
.mg-mp__lightbox img { max-width: 96vw; max-height: 92vh; border-radius: 10px; background: #fff; }
.mg-mp__lightbox-close {
  position: absolute; top: 18px; right: 18px; width: 44px; height: 44px; border-radius: 50%;
  border: none; background: rgba(255,255,255,.14); color: #fff; font-size: 20px; cursor: pointer;
}
.mg-mp__lightbox-close:hover { background: #c89443; }

/* dim non-selected render zones when a row is active */
.mg-mp__svg:has(.mg-mp__zone.is-active) .mg-mp__zone:not(.is-active):not(.is-hover) { fill: rgba(20,25,33,.14); }

/* ============================================================
   Phase 31 — Interior finish & equipment standard (/ehitusinfo)
   ============================================================ */
.mg-if__disclaimer { font-size: 12.5px; color: #9a9490; font-style: italic; line-height: 1.6; margin: 0; }
.mg-if__disclaimer--intro { margin: -8px 0 28px; max-width: 760px; }
.mg-if__disclaimer--sm { margin-top: 14px; }

/* Layer 1 — editorial */
.mg-if__editorial { display: grid; grid-template-columns: 1fr; gap: 24px; margin-bottom: 40px; }
@media (min-width: 992px) { .mg-if__editorial { grid-template-columns: 1.15fr .85fr; align-items: center; gap: 36px; } }
.mg-if__editorial-media { display: flex; flex-direction: column; gap: 14px; }
.mg-if__editorial-img { width: 100%; height: auto; border-radius: 16px; display: block; box-shadow: 0 14px 38px rgba(29,36,48,.12); }
.mg-if__editorial-img--sm { width: 72%; align-self: flex-end; margin-top: -40px; border: 4px solid #fff; }
@media (max-width: 575px) { .mg-if__editorial-img--sm { width: 86%; margin-top: -24px; } }
.mg-if__editorial-title { font-size: clamp(20px,2.4vw,26px); font-weight: 700; color: #1d2430; margin: 0 0 16px; }
.mg-if__points { list-style: none; padding: 0; margin: 0 0 22px; display: flex; flex-direction: column; gap: 10px; }
.mg-if__points li { position: relative; padding-left: 26px; font-size: 15px; color: #4a4540; line-height: 1.5; }
.mg-if__points li::before { content: ""; position: absolute; left: 0; top: 7px; width: 9px; height: 9px; border-radius: 50%; background: #c89443; }
.mg-if__editorial-cta { display: inline-block; }

/* Layer 2+3 — category cards (details/summary) */
.mg-if__cats { display: flex; flex-direction: column; gap: 16px; margin-bottom: 40px; }
.mg-if-card { background: #faf8f4; border: 1px solid rgba(29,36,48,.10); border-radius: 16px; overflow: hidden; transition: box-shadow .2s, border-color .2s; }
.mg-if-card[open], .mg-if-card--static { border-color: rgba(200,148,67,.45); box-shadow: 0 12px 32px rgba(29,36,48,.08); }
/* Phase 35.1 item 18 — the card is no longer a <details>: no pointer, nothing to click. */
.mg-if-card__summary { list-style: none; display: flex; align-items: center; gap: 18px; padding: 22px 24px; }
.mg-if-card--static .mg-if-card__title { margin: 0; }
.mg-if-card__summary::-webkit-details-marker { display: none; }
.mg-if-card__icon { flex-shrink: 0; width: 46px; height: 46px; border-radius: 12px; background: #1d2430; color: #c89443; display: flex; align-items: center; justify-content: center; }
.mg-if-card__icon svg { width: 22px; height: 22px; }
.mg-if-card__head { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.mg-if-card__title { font-size: 18px; font-weight: 700; color: #1d2430; }
.mg-if-card__desc { font-size: 13.5px; color: #6f6a61; line-height: 1.55; }
.mg-if-card__toggle { flex-shrink: 0; display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: #c89443; white-space: nowrap; }
.mg-if-card__toggle i { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border: 1px solid rgba(200,148,67,.5); border-radius: 50%; font-style: normal; font-size: 16px; transition: transform .2s; }
.mg-if-card[open] .mg-if-card__toggle i { transform: rotate(45deg); }
@media (max-width: 600px) { .mg-if-card__toggle span, .mg-if-card__desc { display: none; } }
.mg-if-card__body { padding: 0 24px 24px; }
.mg-if-card__grid { display: grid; grid-template-columns: 1fr; gap: 22px; }
/* Phase 35.1 items 10 + 18: the proof sheet used to sit in a half-width column,
   which made an important sales visual unreadably small. It now spans the full
   card width underneath the item list. */
.mg-if-card__grid { grid-template-columns: 1fr; }
.mg-if-card__items { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; }
.mg-if-item { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 11px 0; border-bottom: 1px solid rgba(29,36,48,.07); }
.mg-if-item:last-child { border-bottom: none; }
.mg-if-item__name { font-size: 14px; color: #1d2430; line-height: 1.45; }
.mg-if-item__badge { flex-shrink: 0; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 3px 9px; border-radius: 100px; white-space: nowrap; }
.mg-if-item__badge--standard { background: #eef3ee; color: #3f6f47; }
.mg-if-item__badge--paid { background: #f6edda; color: #9a6b16; }
.mg-if-card__proof { margin: 0; position: relative; border-radius: 12px; overflow: hidden; border: 1px solid rgba(29,36,48,.1); }
.mg-if-card__proof a { display: block; line-height: 0; }
.mg-if-card__proof img { width: 100%; height: auto; display: block; }
.mg-if-card__proof-zoom { position: absolute; bottom: 10px; right: 10px; background: rgba(20,25,33,.78); color: #fff; font-size: 11px; font-weight: 600; padding: 5px 10px; border-radius: 8px; }

/* AI answer block */
.mg-if__ai { background: #1d2430; border-radius: 16px; padding: 28px 30px; margin-bottom: 28px; }
.mg-if__ai-q { font-size: 17px; font-weight: 700; color: #fff; margin: 0 0 10px; }
.mg-if__ai-a { font-size: 14.5px; color: rgba(255,255,255,.72); line-height: 1.65; margin: 0; }

.mg-if__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.mg-if__ctas .mg-btn { display: inline-flex; align-items: center; }

/* Phase 30.2 — coordinate picker helper (only with ?mp_grid=1) */
.mg-mp__picker { background: #1d2430; color: #fff; border-radius: 12px; padding: 16px 18px; margin: 14px 0 0; }
.mg-mp__picker-row { font-size: 13px; margin-bottom: 10px; line-height: 1.5; }
.mg-mp__picker-last { color: #ffd24a; font-weight: 700; }
.mg-mp__picker-out { width: 100%; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; background: #11161f; color: #ffd24a; border: 1px solid rgba(255,255,255,.15); border-radius: 8px; padding: 8px; resize: vertical; }
.mg-mp__picker-btns { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.mg-mp__picker-btns .mg-btn { padding: 8px 14px; font-size: 12.5px; min-height: 0; }

/* Phase 30.2 — marker ↔ polygon hover sync */
.mg-mp__zone.is-hover { fill: rgba(200,148,67,.36); stroke: rgba(255,255,255,.95); stroke-width: .8; }
/* hovering the already-active zone intensifies it (stronger than active alone) */
.mg-mp__zone.is-active.is-hover { fill: rgba(200,148,67,.58); stroke: #f3d9a8; stroke-width: 1; }
.mg-mp__marker.is-hover { background: #c89443; transform: translate(-50%,-50%) scale(1.06); }
.mg-mp__marker.is-hover .mg-mp__marker-num { background: #fff; color: #1d2430; }

/* Drop the theme's custom close.png mouse cursor on off-canvas/overlay backdrops
   wherever there is no real mouse (touch devices + responsive/device emulation,
   at ANY width) or on narrow screens. Desktop with a mouse keeps it. */
@media (hover: none), (pointer: coarse), (max-width: 1199px) {
  .mobile-nav__overlay,
  .search-popup__overlay,
  .header-right-sidebar__overlay { cursor: auto !important; }
}
/* Hide the theme's JS cursor-follower (gold ring + dot that trails the mouse,
   .custom-cursor__cursor / __cursor-two) where there is no mouse — otherwise it
   sits stuck on the page in mobile/touch views. */
@media (hover: none), (pointer: coarse) {
  .custom-cursor__cursor,
  .custom-cursor__cursor-two { display: none !important; }
}

/* Homepage TUTVUSTUS collage — bind the overlapping photo to its own column.
   .about-one__image__item-two is absolutely positioned, and without a positioned
   ancestor its containing block was the section, so a percentage width resolved
   against the full page and the photo rode onto the text column. Making the
   photo group the containing block keeps both photos inside their half. */
.about-one__image { position: relative; }