/* ===================================================================
   MARSHAL MUTEI — TATU CITY design system
   Namespaced with "mm-" so it layers on top of Bee Real Estate
   without touching the parent theme's own selectors.
   =================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  --mm-ink:        #142019;
  --mm-ink-soft:   #1c2b23;
  --mm-stone:      #F1EAD9;
  --mm-paper:      #FAF7EF;
  --mm-bone:       #F6F3EA;
  --mm-clay:       #A8471F;
  --mm-clay-soft:  #C86A3D;
  --mm-brass:      #B7952A;
  --mm-brass-soft: #D4B65A;
  --mm-savanna:    #3F5C43;
  --mm-savanna-soft:#5C7F5F;
  --mm-ink-70: rgba(20,32,25,.7);
  --mm-ink-45: rgba(20,32,25,.45);
  --mm-bone-70: rgba(246,243,234,.7);
  --mm-bone-45: rgba(246,243,234,.45);
  --mm-line-dark: rgba(246,243,234,.14);
  --mm-line-light: rgba(20,32,25,.14);
  --mm-display: 'Fraunces', serif;
  --mm-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --mm-mono: 'IBM Plex Mono', ui-monospace, monospace;
  --mm-ease: cubic-bezier(.22,.68,0,1);
}

/* ---------- layout helpers ---------- */
.mm-wrap{ max-width:1180px; margin:0 auto; padding:0 32px; }
@media (max-width:640px){ .mm-wrap{ padding:0 20px; } }

.mm-section{ padding:104px 0; }
.mm-section-tight{ padding:64px 0; }
@media (max-width:700px){ .mm-section{ padding:64px 0; } .mm-section-tight{ padding:44px 0; } }

.mm-on-dark{ background:var(--mm-ink); color:var(--mm-bone); }
.mm-on-dark h1,.mm-on-dark h2,.mm-on-dark h3,.mm-on-dark h4{ color:var(--mm-bone); }
.mm-on-dark p{ color:var(--mm-bone-70); }
.mm-on-stone{ background:var(--mm-stone); color:var(--mm-ink); }
.mm-on-paper{ background:var(--mm-paper); color:var(--mm-ink); }

/* ---------- typography ---------- */
.mm-section h1, .mm-section h2, .mm-section h3, .mm-section h4{
  font-family:var(--mm-display) !important; font-weight:600 !important; letter-spacing:-.01em; line-height:1.08;
}
.mm-section p, .mm-section li{ font-family:var(--mm-body); }
.mm-eyebrow{
  font-family:var(--mm-mono) !important; font-size:12px !important; letter-spacing:.14em; text-transform:uppercase;
  display:inline-flex; align-items:center; gap:10px; margin-bottom:16px !important;
}
.mm-eyebrow::before{ content:''; width:20px; height:1px; background:currentColor; opacity:.5; display:inline-block; }
.mm-on-dark .mm-eyebrow{ color:var(--mm-brass-soft) !important; }
.mm-on-stone .mm-eyebrow, .mm-on-paper .mm-eyebrow{ color:var(--mm-clay) !important; }

.mm-h1{ font-size:clamp(38px,6vw,70px) !important; max-width:18ch; }
.mm-h2{ font-size:clamp(26px,3.4vw,40px) !important; }
.mm-lede{ max-width:56ch; font-size:16.5px !important; line-height:1.7 !important; }
.mm-mono{ font-family:var(--mm-mono) !important; }

/* ---------- buttons (block style variations) ---------- */
.wp-block-button.is-style-mm-primary .wp-block-button__link{
  background:var(--mm-clay) !important; color:var(--mm-bone) !important; border-radius:2px !important;
  padding:14px 26px !important; font-weight:600 !important; font-family:var(--mm-body) !important; border:1px solid var(--mm-clay) !important;
  transition:transform .3s var(--mm-ease), background .25s;
}
.wp-block-button.is-style-mm-primary .wp-block-button__link:hover{ background:var(--mm-clay-soft) !important; transform:translateY(-2px); }

.wp-block-button.is-style-mm-ghost-dark .wp-block-button__link{
  background:transparent !important; color:var(--mm-bone) !important; border:1px solid var(--mm-line-dark) !important;
  border-radius:2px !important; padding:14px 26px !important; font-weight:600 !important; font-family:var(--mm-body) !important;
  transition:transform .3s var(--mm-ease), border-color .25s;
}
.wp-block-button.is-style-mm-ghost-dark .wp-block-button__link:hover{ border-color:var(--mm-bone) !important; transform:translateY(-2px); }

.wp-block-button.is-style-mm-ghost-light .wp-block-button__link{
  background:transparent !important; color:var(--mm-ink) !important; border:1px solid var(--mm-line-light) !important;
  border-radius:2px !important; padding:14px 26px !important; font-weight:600 !important; font-family:var(--mm-body) !important;
  transition:transform .3s var(--mm-ease), border-color .25s;
}
.wp-block-button.is-style-mm-ghost-light .wp-block-button__link:hover{ border-color:var(--mm-ink) !important; transform:translateY(-2px); }

/* ---------- stat row ---------- */
.mm-stat-row .wp-block-column{ text-align:left; }
.mm-stat-num{ font-family:var(--mm-mono) !important; font-size:clamp(30px,4vw,42px) !important; font-weight:500 !important; color:var(--mm-brass-soft) !important; margin:0 0 4px !important; }
.mm-on-stone .mm-stat-num, .mm-on-paper .mm-stat-num{ color:var(--mm-clay) !important; }
.mm-stat-label{ font-size:13.5px !important; color:var(--mm-bone-70) !important; margin:0 !important; }
.mm-on-stone .mm-stat-label, .mm-on-paper .mm-stat-label{ color:var(--mm-ink-70) !important; }

/* ---------- spec strip ---------- */
.mm-spec-strip{ border:1px solid var(--mm-line-dark); border-radius:2px; }
.mm-spec-strip.wp-block-columns{ margin:0 !important; gap:0 !important; }
.mm-spec-strip > .wp-block-column{ padding:18px 22px !important; border-right:1px solid var(--mm-line-dark); margin:0 !important; }
.mm-spec-strip > .wp-block-column:last-child{ border-right:none; }
.mm-on-stone .mm-spec-strip, .mm-on-paper .mm-spec-strip{ border-color:var(--mm-line-light); }
.mm-on-stone .mm-spec-strip > .wp-block-column, .mm-on-paper .mm-spec-strip > .wp-block-column{ border-color:var(--mm-line-light); }
.mm-spec-num{ font-family:var(--mm-mono) !important; font-size:20px !important; margin:0 !important; }
.mm-spec-label{ font-size:12px !important; text-transform:uppercase; letter-spacing:.08em; color:var(--mm-bone-45) !important; margin:2px 0 0 !important; }
.mm-on-stone .mm-spec-label, .mm-on-paper .mm-spec-label{ color:var(--mm-ink-45) !important; }

/* ---------- development cards ---------- */
.mm-dev-grid.wp-block-columns{ gap:2px !important; background:var(--mm-line-dark); border:1px solid var(--mm-line-dark); margin:0 !important; }
.mm-dev-card{ background:var(--mm-ink) !important; padding:44px 36px 38px !important; min-height:440px; display:flex; flex-direction:column; }
.mm-dev-card .mm-tag-pill{ width:fit-content; margin-bottom:22px !important; }
.mm-dev-card h3{ font-size:28px !important; margin:0 0 8px !important; }
.mm-dev-card .mm-loc{ font-family:var(--mm-mono) !important; font-size:12px !important; color:var(--mm-bone-45) !important; margin:0 0 18px !important; }
.mm-dev-card p.mm-desc{ color:var(--mm-bone-70) !important; font-size:14.5px !important; line-height:1.7 !important; margin:0 0 26px !important; }
.mm-dev-card .mm-price{ font-family:var(--mm-mono) !important; font-size:15px !important; margin-top:auto !important; margin-bottom:18px !important; }
.mm-dev-card--brass .mm-tag-pill{ color:var(--mm-brass-soft); border-color:var(--mm-brass); }
.mm-dev-card--clay .mm-tag-pill{ color:var(--mm-clay-soft); border-color:var(--mm-clay); }
.mm-dev-card--savanna .mm-tag-pill{ color:var(--mm-savanna-soft); border-color:var(--mm-savanna-soft); }
.mm-dev-card--brass .wp-block-button.is-style-mm-ghost-dark .wp-block-button__link{ color:var(--mm-brass-soft) !important; border-color:var(--mm-brass) !important; }
.mm-dev-card--clay .wp-block-button.is-style-mm-ghost-dark .wp-block-button__link{ color:var(--mm-clay-soft) !important; border-color:var(--mm-clay) !important; }
.mm-dev-card--savanna .wp-block-button.is-style-mm-ghost-dark .wp-block-button__link{ color:var(--mm-savanna-soft) !important; border-color:var(--mm-savanna-soft) !important; }

/* ---------- tag pill ---------- */
.mm-tag-pill{ display:inline-flex; align-items:center; gap:8px; font-family:var(--mm-mono) !important; font-size:11.5px !important; letter-spacing:.08em; text-transform:uppercase; padding:7px 14px; border:1px solid var(--mm-line-light); border-radius:30px; }
.mm-on-dark .mm-tag-pill{ border-color:var(--mm-line-dark); }

/* ---------- feature list ---------- */
.mm-feature-list{ list-style:none !important; margin:0 !important; padding:0 !important; }
.mm-feature-list li{ padding:18px 0 !important; border-top:1px solid var(--mm-line-light); }
.mm-on-dark .mm-feature-list li{ border-color:var(--mm-line-dark); }
.mm-feature-list li:last-child{ border-bottom:1px solid var(--mm-line-light); }
.mm-on-dark .mm-feature-list li:last-child{ border-color:var(--mm-line-dark); }
.mm-feature-list strong{ display:block; font-size:15px; margin-bottom:3px; }
.mm-feature-list span.mm-fdesc{ font-size:13.5px; color:var(--mm-ink-70); }
.mm-on-dark .mm-feature-list span.mm-fdesc{ color:var(--mm-bone-70); }

/* ---------- amenity grid ---------- */
.mm-amenity-grid{ display:grid !important; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--mm-line-light); border:1px solid var(--mm-line-light); }
@media (max-width:800px){ .mm-amenity-grid{ grid-template-columns:repeat(2,1fr) !important; } }
.mm-amenity{ background:var(--mm-paper) !important; padding:24px 20px !important; }
.mm-amenity p{ font-size:13.5px !important; font-weight:600 !important; margin:0 !important; }

/* ---------- pricing table ---------- */
.mm-price-table table{ width:100%; border-collapse:collapse; font-size:14.5px; font-family:var(--mm-body); }
.mm-price-table th{ text-align:left; font-family:var(--mm-mono) !important; font-size:11px !important; text-transform:uppercase; letter-spacing:.08em; color:var(--mm-ink-45); padding:12px 14px !important; border-bottom:1px solid var(--mm-line-light); background:none !important; }
.mm-price-table td{ padding:16px 14px !important; border-bottom:1px solid var(--mm-line-light); background:none !important; }
.mm-price-table tr:hover td{ background:rgba(168,71,31,.05) !important; }

/* ---------- steps ---------- */
.mm-step-row.wp-block-columns{ gap:2px !important; background:var(--mm-line-dark); border:1px solid var(--mm-line-dark); margin:0 !important; }
.mm-step{ background:var(--mm-ink) !important; padding:30px 24px !important; }
.mm-step .mm-step-num{ font-family:var(--mm-mono) !important; color:var(--mm-brass-soft) !important; font-size:13px !important; display:block; margin-bottom:14px !important; }
.mm-step h4{ font-size:17px !important; margin:0 0 8px !important; }
.mm-step p{ font-size:13.5px !important; color:var(--mm-bone-70) !important; margin:0 !important; }

/* ---------- FAQ (core/details) ---------- */
.mm-faq .wp-block-details{ border-top:1px solid var(--mm-line-light); padding:20px 2px !important; }
.mm-on-dark .mm-faq .wp-block-details{ border-color:var(--mm-line-dark); }
.mm-faq .wp-block-details:last-child{ border-bottom:1px solid var(--mm-line-light); }
.mm-on-dark .mm-faq .wp-block-details:last-child{ border-color:var(--mm-line-dark); }
.mm-faq .wp-block-details summary{ font-family:var(--mm-body); font-size:16px; font-weight:600; cursor:pointer; }
.mm-faq .wp-block-details p{ font-size:14.5px; line-height:1.7; margin-top:14px !important; max-width:62ch; }

/* ---------- photo placeholders ---------- */
.mm-photo img{ border-radius:2px; }
.mm-photo-wide img{ width:100%; height:100%; object-fit:cover; aspect-ratio:16/10; }
.mm-photo-tall img{ width:100%; height:100%; object-fit:cover; aspect-ratio:4/5; }

/* ---------- CTA banner ---------- */
.mm-cta-row{ display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.mm-cta-row h2{ margin:0 !important; max-width:20ch; }

/* ---------- reveal-on-scroll ---------- */
.mm-reveal{ opacity:0; transform:translateY(18px); transition:opacity .8s var(--mm-ease), transform .8s var(--mm-ease); }
.mm-reveal.mm-is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .mm-reveal{ opacity:1; transform:none; transition:none; } }

/* ---------- floating whatsapp button ---------- */
.mm-wa-float{ position:fixed; right:22px; bottom:22px; z-index:9999; width:56px; height:56px; border-radius:50%; background:var(--mm-savanna); display:flex; align-items:center; justify-content:center; box-shadow:0 10px 30px rgba(0,0,0,.35); transition:transform .3s var(--mm-ease); }
.mm-wa-float:hover{ transform:scale(1.08); }
.mm-wa-float svg{ width:26px; height:26px; fill:var(--mm-bone); }

/* ---------- full-width template body ---------- */
.mm-main{ overflow-x:hidden; }