/* ==========================================================================
   TYAGI REAL ESTATE — STYLESHEET
   Plain CSS. No framework, no build step.
   --------------------------------------------------------------------------
   1.  Tokens
   2.  Reset & base
   3.  Layout
   4.  Buttons, badges, pills
   5.  Topbar & header
   6.  Hero
   7.  Section headings
   8.  Banking advantage
   9.  ROI predictor
   10. Properties + filters + modal
   11. Regions
   12. Founder
   13. Contact & forms
   14. Footer & floaters
   15. Utilities
   16. Responsive
   ========================================================================== */

/* ------------------------------- 1. TOKENS ------------------------------ */
:root {
  --navy-dark:  #071324;
  --navy-main:  #0B1E36;
  --navy-card:  #102847;
  --navy-light: #1A385E;
  --navy-line:  rgba(255,255,255,.09);

  --gold:       #C5A059;
  --gold-light: #E5C378;
  --gold-dark:  #9A7732;
  --gold-glow:  rgba(197,160,89,.25);

  --emerald:    #10B981;
  --emerald-lt: #34D399;

  --slate-bg:   #F8FAFC;
  --ink:        #0F172A;
  --ink-muted:  #64748B;
  --ink-line:   #E2E8F0;

  --text-light: #F1F5F9;
  --text-dim:   #94A9C0;
  --text-dimmer:#6F87A1;

  --font-display: 'Cinzel', Georgia, serif;
  --font-serif:   'Playfair Display', Georgia, serif;
  --font-body:    'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --wrap: 1240px;
  --gutter: 20px;
  --radius: 14px;
  --radius-sm: 9px;
  --radius-lg: 22px;

  --shadow-md: 0 10px 30px rgba(0,0,0,.28);
  --shadow-lg: 0 24px 60px rgba(0,0,0,.42);

  --ease: cubic-bezier(.22,.61,.36,1);
  --t: .3s var(--ease);

  --header-h: 76px;
}

/* ------------------------------- 2. RESET ------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 20px);
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-dim);
  background: var(--navy-dark);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  margin: 0 0 .5em;
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.22;
  color: #fff;
  letter-spacing: .005em;
}

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

a { color: inherit; text-decoration: none; }
img, svg, video { max-width: 100%; height: auto; display: block; }
ul, ol { margin: 0; padding: 0; }
li { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 4px; }

::selection { background: var(--gold); color: var(--navy-dark); }

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--navy-dark); }
::-webkit-scrollbar-thumb { background: var(--gold-dark); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--gold); }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--gold); color: var(--navy-dark);
  padding: 12px 20px; font-weight: 700;
}
.skip-link:focus { left: 0; }

/* ------------------------------- 3. LAYOUT ------------------------------ */
.wrap {
  width: 100%; max-width: var(--wrap);
  margin-inline: auto; padding-inline: var(--gutter);
}

.section { padding: 72px 0; position: relative; }
.section--deep { background: var(--navy-dark); }
.section--main { background: var(--navy-main); }
/* The one pale section on the page — the property listings sit on it. */
.section--light { background: var(--slate-bg); color: var(--ink-muted); }
.section--light h2, .section--light h3, .section--light h4 { color: var(--ink); }
.section--light .sec-head__text { color: var(--ink-muted); }
.section--light .pill { background: rgba(197,160,89,.14); color: var(--gold-dark); }

.grid { display: grid; gap: 22px; }

/* ------------------------- 4. BUTTONS / BADGES -------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 26px;
  border-radius: var(--radius-sm);
  font-family: var(--font-display);
  font-size: .92rem; font-weight: 700; letter-spacing: .04em;
  border: 1.5px solid transparent;
  text-align: center; cursor: pointer;
  transition: transform var(--t), box-shadow var(--t), background var(--t), color var(--t), border-color var(--t);
}
.btn svg { width: 18px; height: 18px; fill: currentColor; flex: none; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--gold {
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  color: var(--navy-dark);
  box-shadow: 0 8px 22px var(--gold-glow);
}
.btn--gold:hover { box-shadow: 0 14px 32px rgba(197,160,89,.42); }

.btn--outline { border-color: rgba(197,160,89,.5); color: var(--gold-light); }
.btn--outline:hover { background: rgba(197,160,89,.12); border-color: var(--gold); }

.btn--ghost { border-color: rgba(255,255,255,.28); color: #fff; }
.btn--ghost:hover { background: rgba(255,255,255,.1); border-color: #fff; }

.btn--navy { background: var(--navy-main); color: #fff; border-color: var(--navy-light); }
.btn--navy:hover { background: var(--navy-light); }

.btn--block { width: 100%; }
.btn--lg { padding: 16px 32px; font-size: 1rem; }
.btn--sm { padding: 10px 18px; font-size: .82rem; }

/* Eyebrow pill above section titles */
.pill {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 8px 20px; border-radius: 100px;
  background: rgba(197,160,89,.1);
  border: 1px solid rgba(197,160,89,.32);
  color: var(--gold-light);
  font-size: .72rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
}
.pill svg { width: 14px; height: 14px; fill: currentColor; }

.tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 13px; border-radius: 100px;
  font-size: .68rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
}
.tag--gold { background: rgba(197,160,89,.16); color: var(--gold-light); }
.tag--dark { background: rgba(7,19,36,.86); color: var(--gold-light); backdrop-filter: blur(4px); }

/* --------------------------- 5. TOPBAR / HEADER ------------------------- */
.topbar {
  background: var(--navy-dark);
  border-bottom: 1px solid var(--navy-line);
  font-size: .72rem;
  color: var(--text-dimmer);
  line-height: 1.45;
}
/* On phones the strip becomes two centred rows — the trust line on top, the
   contact line underneath — so every item is readable without swiping. */
.topbar__inner {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 3px 0;
  padding-top: 6px; padding-bottom: 6px;
}
.topbar__group {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap;
  flex: 1 0 100%;          /* one full row each */
  gap: 4px 10px;
}
.topbar__item { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.topbar__item svg { width: 14px; height: 14px; fill: var(--gold); flex: none; }
.topbar a.topbar__item { transition: color var(--t); }
.topbar a.topbar__item:hover { color: var(--gold-light); }
.topbar__sep { display: none; color: rgba(255,255,255,.18); }

/* Two versions of the longer labels. The short wording keeps each row on a
   single line on small phones; the full wording returns as soon as there is
   room for it, well before the bar changes shape. */
.t-short { display: inline; }
.t-full  { display: none; }
@media (min-width: 620px) {
  .topbar { font-size: .76rem; }
  .t-short { display: none; }
  .t-full  { display: inline; }
  .topbar__sep { display: inline; }
}
/* Below 1000px the phone and WhatsApp sit in the header bar instead, so the
   copies here stay out of the way and the strip keeps to two tidy rows. */
.topbar__group--contact { display: none; }

.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgb(11,30,54);
  border-bottom: 1px solid var(--navy-line);
  transition: box-shadow var(--t), background var(--t);
}
/* The frosted-glass effect is switched on only from tablet width up.
   On phones the menu drawer lives inside this header, and a blurred element
   becomes the anchor for anything positioned fixed inside it — which would
   trap the drawer inside the header bar. The header is solid there instead,
   which looks the same and is lighter on the phone's battery. */
@media (min-width: 1000px) {
  .site-header {
    background: rgba(11,30,54,.94);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
  }
}
.site-header.is-stuck {
  background: rgb(7,19,36);
  box-shadow: 0 8px 30px rgba(0,0,0,.4);
}
@media (min-width: 1000px) {
  .site-header.is-stuck { background: rgba(7,19,36,.97); }
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; min-height: var(--header-h);
}

/* Call and WhatsApp buttons in the header bar. They fill the empty space
   beside the logo on phones and tablets, and step aside on desktop where the
   top strip already carries the same details. */
.header-actions {
  display: flex; align-items: center; gap: 8px;
  margin-left: auto; margin-right: 10px;
}
.header-action {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 42px; padding: 0 13px;
  border-radius: 10px;
  border: 1px solid var(--navy-line);
  background: rgba(255,255,255,.05);
  color: var(--text-light);
  font-size: .78rem; font-weight: 700; letter-spacing: .01em;
  white-space: nowrap; text-decoration: none;
  transition: border-color var(--t), background var(--t);
  -webkit-tap-highlight-color: transparent;
}
.header-action svg { width: 15px; height: 15px; flex: none; fill: var(--gold); }
.header-action:hover { border-color: var(--gold); background: rgba(197,160,89,.12); }
.header-action:active { transform: scale(.97); }
.header-action--wa { width: 42px; padding: 0; }
.header-action--wa svg { width: 18px; height: 18px; fill: #25D366; }

/* On narrow phones the number would crowd the logo, so the call button
   becomes an icon only. The number is still one tap away. */
@media (max-width: 559px) {
  .header-action__text { display: none; }
  .header-action--call { width: 42px; padding: 0; }
  .header-actions { gap: 7px; margin-right: 8px; }
}

/* Brand */
.brand { display: inline-flex; align-items: center; gap: 14px; text-decoration: none; }
.brand__mark {
  width: 48px; height: 48px; flex: none;
  display: grid; place-items: center;
  border-radius: 12px;
  background: #ffffff;
  padding: 4px;
  box-shadow: 0 4px 16px rgba(0,0,0,.3), inset 0 0 0 1px rgba(197,160,89,.35);
  transition: transform var(--t), box-shadow var(--t);
  overflow: hidden;
}
.brand:hover .brand__mark {
  transform: translateY(-1px) scale(1.03);
  box-shadow: 0 6px 20px rgba(197,160,89,.4), inset 0 0 0 1.5px var(--gold);
}
.brand__mark img {
  width: 100%; height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.1));
}
.brand__text { display: flex; flex-direction: column; line-height: 1.1; }
.brand__name {
  font-family: var(--font-display); font-weight: 700;
  font-size: 1.42rem; color: #fff; letter-spacing: .12em;
}
.brand__sub {
  font-size: .58rem; font-weight: 700; letter-spacing: .34em;
  text-transform: uppercase; color: var(--gold);
}

/* Hamburger */
.nav-toggle {
  width: 46px; height: 46px; flex: none;
  display: grid; place-content: center; gap: 5px;
  border-radius: 10px; border: 1px solid var(--navy-line);
}
.nav-toggle span {
  display: block; width: 20px; height: 2px; border-radius: 2px;
  background: var(--gold-light);
  transition: transform var(--t), opacity var(--t);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Nav — mobile drawer first */
.nav {
  position: fixed; inset: 0 0 0 auto;
  width: min(330px, 86vw);
  background: var(--navy-main);
  border-left: 1px solid rgba(197,160,89,.22);
  padding: calc(74px + env(safe-area-inset-top, 0px))
           calc(26px + env(safe-area-inset-right, 0px))
           calc(34px + env(safe-area-inset-bottom, 0px)) 26px;
  display: flex; flex-direction: column;
  transform: translateX(102%);
  transition: transform .34s var(--ease);
  box-shadow: var(--shadow-lg);
  z-index: 105;
  overflow-y: auto;
  /* Scrolling the menu must not drag the page behind it. */
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* The drawer covers the hamburger, so it carries its own close button.
   It sits on the LEFT on purpose: on the right it would land exactly on top
   of the hamburger underneath, and a tap that slipped past the drawer would
   hit that button and reopen the menu straight away. */
.nav__close {
  position: absolute; top: calc(12px + env(safe-area-inset-top, 0px)); left: 12px;
  width: 46px; height: 46px;
  display: grid; place-content: center;
  border-radius: 10px;
  border: 1px solid var(--navy-line);
  background: rgba(255,255,255,.05);
  cursor: pointer;
  z-index: 2;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.nav__close svg { width: 20px; height: 20px; fill: var(--gold-light); pointer-events: none; }
.nav__close:hover, .nav__close:focus-visible {
  border-color: var(--gold); background: rgba(197,160,89,.14);
}
.nav__close:active { transform: scale(.94); }

/* While the menu is open the hamburger is hidden underneath it. Switching it
   off removes any chance of a stray tap reopening the menu. */
body.nav-open .nav-toggle { opacity: 0; pointer-events: none; }
.nav.is-open { transform: translateX(0); }

/* THE ORIGINAL BUG: nav links ran together with no spacing.
   `gap` on the list is what fixes it. */
.nav__list { display: flex; flex-direction: column; gap: 2px; }

.nav__link {
  display: block; padding: 14px 4px;
  font-size: .95rem; font-weight: 600;
  color: var(--text-light);
  border-bottom: 1px solid var(--navy-line);
  transition: color var(--t), padding-left var(--t);
}
.nav__link:hover, .nav__link.is-active { color: var(--gold-light); padding-left: 10px; }
.nav__cta { margin-top: 24px; }

/* An invisible sheet behind the menu. Its only job is to catch a tap outside
   the drawer and close it — it deliberately does NOT darken the page. */
.nav-backdrop {
  position: fixed; inset: 0; z-index: 104;
  background: transparent;
  opacity: 1;
}
.nav-backdrop.is-open { opacity: 1; }
body.nav-open { overflow: hidden; }

/* -------------------------------- 6. HERO ------------------------------- */
.hero {
  position: relative;
  padding: 60px 0 70px;
  overflow: hidden;
  background: var(--navy-dark);
}
/* --------------------------------------------------------------------------
   HERO BACKGROUND PHOTO
   The photo itself is on .hero__bg. The darkening sits on ::before as a
   SEPARATE layer, so you can adjust how much of the photo shows through
   without touching the image.

   TO MAKE THE PHOTO MORE OR LESS VISIBLE, change one number:
       --hero-dim: 0     = photo at full brightness, no darkening at all
       --hero-dim: .14   = current setting (photo clearly visible)
       --hero-dim: .50   = heavily darkened

   TO USE YOUR OWN PHOTO, replace assets/img/hero.jpg with your own image,
   keeping the same filename. Nothing else needs editing.
   -------------------------------------------------------------------------- */
.hero { --hero-dim: .14; }

.hero__bg {
  position: absolute; inset: 0;
  background-color: var(--navy-dark);      /* shows only while the photo loads */
  background-image: url('../img/hero.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
}

/* A light, targeted scrim rather than a blanket. It blends the photo into the
   navy header at the top and into the next section at the bottom, and puts a
   soft shadow behind the headline only — so the middle of the photo stays
   bright and fully visible. */
.hero__bg::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(74% 44% at 50% 26%, rgba(7,19,36,.34) 0%, rgba(7,19,36,.12) 55%, transparent 100%),
    linear-gradient(180deg,
      rgba(7,19,36,.68) 0%,
      rgba(7,19,36,.08) 15%,
      rgba(7,19,36,0)   36%,
      rgba(7,19,36,0)   60%,
      rgba(7,19,36,.26) 84%,
      rgba(7,19,36,.74) 100%),
    linear-gradient(rgba(7,19,36,var(--hero-dim)), rgba(7,19,36,var(--hero-dim)));
}
.hero .wrap { position: relative; z-index: 2; }

.hero__head { text-align: center; max-width: 900px; margin: 0 auto 40px; }
.hero__title {
  font-size: clamp(1.9rem, 5.6vw, 3.6rem);
  line-height: 1.16;
  margin-bottom: .5em;
  /* Layered shadows keep white text readable over a bright photo without
     needing to darken the photo itself. */
  text-shadow:
    0 1px 2px rgba(0,0,0,.55),
    0 4px 18px rgba(0,0,0,.6),
    0 8px 46px rgba(0,0,0,.45);
}
.hero__title span { display: block; }
.hero__title .is-gold {
  background: linear-gradient(135deg, #F7ECC2 0%, var(--gold-light) 45%, #C08F2E 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--gold-light);
  /* background-clip:text cancels text-shadow, so the glow has to come from a
     drop-shadow filter on the element instead. */
  filter:
    drop-shadow(0 1px 2px rgba(0,0,0,.6))
    drop-shadow(0 5px 22px rgba(0,0,0,.55));
}
.hero__quote {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(.98rem, 2.1vw, 1.18rem);
  color: #E4EDF6;
  max-width: 62ch; margin: 0 auto;
  text-shadow:
    0 1px 2px rgba(0,0,0,.7),
    0 3px 16px rgba(0,0,0,.65);
}

/* Stat cards */
.stats {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px;
  max-width: 1000px; margin: 32px auto 0;
}
.stat {
  background: rgba(11,30,54,.86);
  border: 1px solid rgba(197,160,89,.26);
  border-radius: var(--radius);
  padding: 22px 16px; text-align: center;
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 10px 30px rgba(0,0,0,.28);
  transition: transform var(--t), border-color var(--t);
}
.stat:hover { transform: translateY(-4px); border-color: rgba(197,160,89,.5); }
.stat__num {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.35rem, 4vw, 1.85rem);
  color: var(--gold-light); line-height: 1.1;
}
.stat__label {
  margin: 8px 0 0; font-size: .76rem; line-height: 1.45;
  color: var(--text-dim);
}

/* --------------------------- 7. SECTION HEADS --------------------------- */
.sec-head { text-align: center; max-width: 760px; margin: 0 auto 48px; }
.sec-head__title {
  font-size: clamp(1.55rem, 4.4vw, 2.45rem);
  margin: 20px 0 0;
}
.sec-head__text {
  margin: 22px 0 0; font-size: 1.02rem;
  color: var(--text-dim);
}

.rule-orn {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  margin: 22px 0 0;
}
.rule-orn span {
  display: block; height: 1px; width: 60px;
  background: linear-gradient(90deg, transparent, var(--gold-dark));
}
.rule-orn span:last-child { background: linear-gradient(90deg, var(--gold-dark), transparent); }
.rule-orn i {
  width: 7px; height: 7px; transform: rotate(45deg);
  background: var(--gold); flex: none;
}

/* ----------------------- 8. BANKING ADVANTAGE --------------------------- */
.advantage { display: grid; gap: 24px; align-items: start; }

.founder-card {
  background: linear-gradient(160deg, var(--navy-card), var(--navy-main));
  border: 1px solid var(--navy-line);
  border-radius: var(--radius-lg);
  padding: 30px 26px;
}
.founder-card__head { display: flex; align-items: flex-start; gap: 18px; margin-bottom: 20px; }
.founder-card__mono {
  width: 62px; height: 62px; flex: none;
  display: grid; place-items: center;
  border-radius: 14px;
  border: 1px solid rgba(197,160,89,.4);
  background: rgba(197,160,89,.08);
  font-family: var(--font-display); font-weight: 700;
  font-size: 1.15rem; color: var(--gold-light);
  letter-spacing: .04em;
}
.founder-card__title { font-size: 1.32rem; margin-bottom: 6px; }
.founder-card__meta {
  font-size: .72rem; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--gold);
}
.founder-card__divider {
  height: 1px; margin: 22px 0;
  background: linear-gradient(90deg, rgba(197,160,89,.5), transparent);
}
.founder-card__text { font-size: .95rem; color: var(--text-dim); }

.mini-grid { display: grid; gap: 12px; margin-top: 24px; }
/* If only one tick-item is left, let it use the full width instead of
   sitting in half a row with a gap beside it. */
.mini-grid .mini:only-child { grid-column: 1 / -1; }
.mini {
  display: flex; align-items: flex-start; gap: 11px;
  background: rgba(7,19,36,.55);
  border: 1px solid var(--navy-line);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
}
.mini svg { width: 19px; height: 19px; fill: var(--emerald); flex: none; margin-top: 2px; }
.mini strong { display: block; font-size: .88rem; color: #fff; font-weight: 700; }
.mini span { font-size: .8rem; color: var(--text-dimmer); }

.adv-grid { display: grid; gap: 18px; }
.adv-card {
  background: var(--navy-card);
  border: 1px solid var(--navy-line);
  border-radius: var(--radius);
  padding: 26px 22px;
  transition: transform var(--t), border-color var(--t), background var(--t);
}
.adv-card:hover {
  transform: translateY(-5px);
  border-color: rgba(197,160,89,.45);
  background: #12304f;
}
.adv-card__icon {
  width: 46px; height: 46px; border-radius: 12px;
  display: grid; place-items: center; margin-bottom: 18px;
  background: rgba(197,160,89,.12);
  color: var(--gold-light);
  border: 1px solid rgba(197,160,89,.25);
}
.adv-card__icon svg { width: 22px; height: 22px; fill: currentColor; }
.adv-card--emerald .adv-card__icon {
  background: rgba(16,185,129,.12); color: var(--emerald-lt);
  border-color: rgba(16,185,129,.3);
}
.adv-card__title { font-size: 1.08rem; margin-bottom: .5em; }
.adv-card__text { font-size: .89rem; color: var(--text-dim); margin: 0; }

/* -------------------- 10. PROPERTIES / FILTERS / MODAL ------------------ */
.filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; margin-bottom: 14px; }
.filters:last-of-type { margin-bottom: 36px; }
.chip {
  padding: 9px 19px;
  border: 1px solid var(--ink-line);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--ink-muted);
  font-size: .85rem; font-weight: 600;
  transition: all var(--t);
}
.chip:hover { border-color: var(--gold); color: var(--gold-dark); }
.chip.is-active {
  background: var(--navy-dark); border-color: var(--navy-dark);
  color: var(--gold-light); font-weight: 700;
}

.prop-card {
  background: #fff;
  border: 1px solid var(--ink-line);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform var(--t), box-shadow var(--t);
}
.prop-card:hover { transform: translateY(-6px); box-shadow: 0 22px 50px rgba(15,23,42,.16); }

.prop-card__media { position: relative; aspect-ratio: 16/10; overflow: hidden; background: var(--ink-line); }
.prop-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.prop-card:hover .prop-card__media img { transform: scale(1.07); }
.prop-card__badges {
  position: absolute; top: 12px; left: 12px; right: 12px;
  display: flex; justify-content: space-between; gap: 8px;
}
.prop-card__liquidity {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 12px; border-radius: 100px;
  background: rgba(16,185,129,.92); color: #04291b;
  font-size: .68rem; font-weight: 800; letter-spacing: .04em;
  white-space: nowrap;
}
.prop-card__liquidity svg { width: 12px; height: 12px; fill: currentColor; }

.prop-card__body { padding: 22px 20px; display: flex; flex-direction: column; flex: 1; }
.prop-card__title { font-size: 1.14rem; color: var(--ink); margin-bottom: 10px; }
.prop-card__loc {
  display: flex; align-items: flex-start; gap: 7px;
  font-size: .84rem; color: var(--ink-muted); margin-bottom: 12px;
}
.prop-card__loc svg { width: 15px; height: 15px; fill: var(--gold-dark); flex: none; margin-top: 3px; }
.prop-card__desc { font-size: .87rem; color: var(--ink-muted); margin-bottom: 18px; }

.prop-card__price {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; padding: 14px 0;
  border-top: 1px solid var(--ink-line);
  border-bottom: 1px solid var(--ink-line);
  margin-bottom: 16px;
}
.prop-card__amount {
  font-family: var(--font-display); font-weight: 700;
  font-size: 1.3rem; color: var(--ink);
}
.prop-card__rate { font-size: .76rem; color: var(--ink-muted); }
.prop-card__yield {
  font-family: var(--font-display); font-weight: 700;
  font-size: .95rem; color: var(--emerald);
  text-align: right; white-space: nowrap;
}
.prop-card__yield span {
  display: block; font-family: var(--font-body); font-size: .68rem;
  color: var(--ink-muted); font-weight: 500;
}

.prop-card__foot { margin-top: auto; display: flex; gap: 10px; }
.prop-card__foot .btn { flex: 1; padding: 11px 12px; font-size: .82rem; }

.no-results {
  text-align: center; padding: 60px 20px;
  border: 1px dashed var(--ink-line); border-radius: var(--radius);
  color: var(--ink-muted); background: #fff;
}
.no-results h3 { color: var(--ink); }

/* Detail popup */
.modal {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center;
  padding: 16px;
  background: rgba(7,19,36,.82);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; transition: opacity var(--t);
}
.modal.is-open { opacity: 1; }
.modal__panel {
  background: var(--navy-main);
  border: 1px solid rgba(197,160,89,.3);
  border-radius: var(--radius-lg);
  width: min(880px, 100%);
  max-height: 92vh; overflow-y: auto;
  box-shadow: var(--shadow-lg);
  transform: translateY(14px); transition: transform var(--t);
}
.modal.is-open .modal__panel { transform: none; }
.modal__close {
  position: absolute; top: 14px; right: 14px; z-index: 3;
  width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(7,19,36,.8); color: #fff;
  border: 1px solid var(--navy-line);
  transition: background var(--t);
}
.modal__close:hover { background: var(--gold); color: var(--navy-dark); }
.modal__close svg { width: 20px; height: 20px; fill: currentColor; }
.modal__media { position: relative; aspect-ratio: 16/9; overflow: hidden; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.modal__media img { width: 100%; height: 100%; object-fit: cover; }
.modal__thumbs { display: flex; gap: 8px; padding: 12px 24px 0; }
.modal__thumbs:empty { display: none; }
.modal__thumb {
  width: 74px; height: 52px; border-radius: 7px; overflow: hidden;
  border: 2px solid transparent; opacity: .6;
  transition: all var(--t); flex: none; padding: 0;
}
.modal__thumb.is-active, .modal__thumb:hover { opacity: 1; border-color: var(--gold); }
.modal__thumb img { width: 100%; height: 100%; object-fit: cover; }
.modal__body { padding: 22px 24px 28px; }
.modal__title { font-size: clamp(1.25rem, 3.6vw, 1.7rem); margin-bottom: 8px; }
.modal__loc { display: flex; gap: 8px; font-size: .88rem; color: var(--text-dim); margin-bottom: 20px; }
.modal__loc svg { width: 16px; height: 16px; fill: var(--gold); flex: none; margin-top: 3px; }
.modal__specs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 22px; }
.modal__spec {
  background: rgba(7,19,36,.55); border: 1px solid var(--navy-line);
  border-radius: var(--radius-sm); padding: 14px;
}
.modal__spec dt { font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-dimmer); margin-bottom: 5px; }
.modal__spec dd { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 1.02rem; color: #fff; }
.modal__features { display: grid; gap: 10px; margin: 0 0 22px; }
.modal__features li { position: relative; padding-left: 26px; font-size: .89rem; color: var(--text-dim); }
.modal__features li::before {
  content: ''; position: absolute; left: 0; top: .45em;
  width: 15px; height: 15px; border-radius: 50%;
  background: rgba(16,185,129,.2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2334D399'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") no-repeat center/10px;
}
.modal__actions { display: grid; gap: 10px; }

/* ----------------------------- 11. REGIONS ------------------------------ */
.region-card {
  position: relative; overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--navy-line);
  background: linear-gradient(155deg, var(--navy-card), var(--navy-main));
  padding: 30px 26px;
  transition: transform var(--t), border-color var(--t);
}
.region-card:hover { transform: translateY(-5px); border-color: rgba(197,160,89,.45); }
.region-card__num {
  position: absolute; top: 10px; right: 20px;
  font-family: var(--font-display); font-weight: 700; font-size: 4.4rem;
  color: rgba(255,255,255,.045); line-height: 1; pointer-events: none;
}
.region-card__name { font-size: 1.4rem; margin-bottom: 6px; }
.region-card__focus {
  font-size: .7rem; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; color: var(--gold); margin-bottom: 16px;
}
.region-card__text { font-size: .9rem; color: var(--text-dim); margin-bottom: 20px; }
.region-card__link {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .86rem; font-weight: 700; color: var(--gold-light);
}
.region-card__link svg { width: 16px; height: 16px; fill: currentColor; transition: transform var(--t); }
.region-card:hover .region-card__link svg { transform: translateX(5px); }

/* ----------------------------- 12. FOUNDER & LEADERSHIP ------------------------------ */
.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 22px;
}
.team-card {
  position: relative;
  border-radius: var(--radius-lg); overflow: hidden;
  aspect-ratio: 4/5;
  background: linear-gradient(150deg, var(--navy-light), var(--navy-dark));
  border: 1px solid rgba(197,160,89,.35);
  box-shadow: var(--shadow-lg);
  transition: transform 0.4s var(--ease), border-color 0.4s var(--ease);
}
.team-card:hover {
  transform: translateY(-4px);
  border-color: rgba(197,160,89,.65);
}
.team-card img {
  width: 100%; height: 100%; object-fit: cover;
  object-position: center 15%;
  transition: transform 0.5s var(--ease);
}
.team-card:hover img {
  transform: scale(1.04);
}
.team-card__badge {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 24px 18px 18px;
  background: linear-gradient(to top, rgba(7,19,36,.96) 0%, rgba(7,19,36,.78) 65%, transparent 100%);
  display: flex; flex-direction: column; gap: 3px;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border-top: 1px solid rgba(197,160,89,.3);
}
.team-card__name {
  font-family: var(--font-display); font-weight: 700;
  font-size: 1.25rem; color: #fff; letter-spacing: .02em; line-height: 1.2;
}
.team-card__role {
  font-size: .75rem; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--gold-light);
}
.team-card__exp {
  font-size: .72rem; font-weight: 600; color: #CBD5E1;
  display: inline-flex; align-items: center; gap: 5px; margin-top: 2px;
}

.about__quote {
  margin: 26px 0 0; padding: 20px 24px;
  border-left: 3px solid var(--gold);
  background: rgba(197,160,89,.07);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-family: var(--font-serif); font-style: italic;
  font-size: 1.04rem; color: #D6E1EC;
}
.checks { display: grid; gap: 13px; margin: 24px 0; }
.checks li { position: relative; padding-left: 32px; font-size: .93rem; color: var(--text-dim); }
.checks li::before {
  content: ''; position: absolute; left: 0; top: 2px;
  width: 20px; height: 20px; border-radius: 50%;
  background: rgba(197,160,89,.16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23E5C378'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") no-repeat center/13px;
}

/* -------------------------- 13. CONTACT / FORMS ------------------------- */
.contact-layout { display: grid; gap: 34px; align-items: start; }

.contact-row {
  display: flex; gap: 15px; align-items: flex-start;
  padding: 17px 19px;
  background: rgba(16,40,71,.55);
  border: 1px solid var(--navy-line);
  border-radius: var(--radius-sm);
  transition: background var(--t), border-color var(--t);
}
a.contact-row:hover { background: rgba(16,40,71,.9); border-color: rgba(197,160,89,.42); }
.contact-row__icon {
  width: 42px; height: 42px; flex: none; border-radius: 11px;
  display: grid; place-items: center;
  background: rgba(197,160,89,.13); color: var(--gold-light);
  border: 1px solid rgba(197,160,89,.24);
}
.contact-row__icon svg { width: 19px; height: 19px; fill: currentColor; }
.contact-row__label {
  font-size: .68rem; font-weight: 800; letter-spacing: .13em;
  text-transform: uppercase; color: var(--text-dimmer); margin-bottom: 4px;
}
.contact-row__value { font-size: .96rem; font-weight: 600; color: #fff; word-break: break-word; }
.contact-info { display: grid; gap: 13px; }

.form-card {
  background: linear-gradient(160deg, var(--navy-card), var(--navy-main));
  border: 1px solid var(--navy-line);
  border-radius: var(--radius-lg);
  padding: 26px 22px;
  box-shadow: var(--shadow-md);
}
.form-grid { display: grid; gap: 16px; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field__label { font-size: .82rem; font-weight: 700; color: #fff; }
.field__label .req { color: #F87171; }
.field__hint { font-size: .76rem; color: var(--text-dimmer); }
.field__error { font-size: .78rem; color: #FCA5A5; }

.field input, .field textarea, .field select {
  width: 100%; padding: 13px 15px;
  font: inherit; font-size: .93rem;
  color: var(--text-light);
  background: rgba(7,19,36,.6);
  border: 1px solid var(--navy-light);
  border-radius: var(--radius-sm);
  transition: border-color var(--t), box-shadow var(--t);
}
.field select {
  appearance: none; -webkit-appearance: none; cursor: pointer;
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23C5A059'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 20px;
}
.field select option { background: var(--navy-main); }
.field textarea { min-height: 118px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--text-dimmer); }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-glow);
}
.field--error input, .field--error textarea, .field--error select { border-color: #F87171; }

.alert {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 15px 18px; border-radius: var(--radius-sm);
  font-size: .9rem; margin-bottom: 20px;
}
.alert svg { width: 20px; height: 20px; fill: currentColor; flex: none; margin-top: 2px; }
.alert--err { background: rgba(248,113,113,.12); border: 1px solid rgba(248,113,113,.35); color: #FCA5A5; }

/* --------------------------- 14. FOOTER / FLOAT ------------------------- */
.cta-band {
  background: linear-gradient(135deg, var(--gold), var(--gold-light));
  color: var(--navy-dark);
  padding: 46px 0;
}
.cta-band__inner { display: grid; gap: 22px; align-items: center; }
.cta-band h2 { color: var(--navy-dark); font-size: clamp(1.3rem, 3.6vw, 1.9rem); margin-bottom: .35em; }
.cta-band p { color: rgba(7,19,36,.8); margin: 0; max-width: 58ch; }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.cta-band .btn--gold { background: var(--navy-dark); color: #fff; box-shadow: 0 8px 22px rgba(7,19,36,.3); }
.cta-band .btn--ghost { border-color: rgba(7,19,36,.45); color: var(--navy-dark); }
.cta-band .btn--ghost:hover { background: rgba(7,19,36,.1); border-color: var(--navy-dark); }

.site-footer {
  background: var(--navy-dark);
  border-top: 1px solid var(--navy-line);
  padding: 56px 0 26px;
  font-size: .9rem; color: var(--text-dimmer);
}
.footer-grid { display: grid; gap: 34px; }
.footer-col { min-width: 0; }
.footer-col--brand { max-width: 46ch; }
.footer-col__text { font-size: .88rem; line-height: 1.75; margin: 16px 0 0; }
.footer-col__title {
  font-family: var(--font-display);
  font-size: .84rem; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: #fff; margin-bottom: 18px;
}
.footer-links { display: grid; gap: 11px; }
.footer-links a { font-size: .88rem; display: inline-block; transition: color var(--t), padding-left var(--t); }
.footer-links a:hover { color: var(--gold-light); padding-left: 5px; }
.footer-contact { display: grid; gap: 14px; }
.footer-contact li { display: flex; gap: 11px; align-items: flex-start; font-size: .88rem; line-height: 1.5; }
.footer-contact svg { width: 16px; height: 16px; fill: var(--gold); flex: none; margin-top: 4px; }
.footer-contact a:hover { color: var(--gold-light); }

.socials { display: flex; gap: 10px; margin-top: 20px; }
.socials a {
  width: 38px; height: 38px; border-radius: 10px;
  display: grid; place-items: center;
  background: rgba(255,255,255,.05);
  border: 1px solid var(--navy-line);
  transition: all var(--t);
}
.socials a:hover { background: var(--gold); border-color: var(--gold); }
.socials svg { width: 17px; height: 17px; fill: var(--text-dim); transition: fill var(--t); }
.socials a:hover svg { fill: var(--navy-dark); }

.footer-bottom {
  margin-top: 38px; padding-top: 22px;
  border-top: 1px solid var(--navy-line);
  display: grid; gap: 12px; font-size: .8rem;
}
.footer-bottom p { margin: 0; }
.footer-bottom__note { line-height: 1.65; max-width: 92ch; }

.floaters {
  position: fixed; right: 14px; bottom: 14px; z-index: 90;
  display: flex; flex-direction: column-reverse; gap: 10px;
}
.floater {
  width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center;
  box-shadow: var(--shadow-md);
  transition: transform var(--t);
}
.floater:hover { transform: scale(1.09); }
.floater svg { width: 24px; height: 24px; fill: #fff; }
.floater--wa { background: #25D366; }
.floater--call { background: var(--gold); }
.floater--call svg { fill: var(--navy-dark); }
.floater--top { background: var(--navy-card); border: 1px solid var(--navy-line); }
.floater--top svg { fill: var(--gold-light); }

/* ---------------------------- 15. UTILITIES ----------------------------- */
[hidden] { display: none !important; }

.reveal { opacity: 0; transform: translateY(24px); transition: opacity .65s var(--ease), transform .65s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }
.lead { font-size: 1.02rem; color: var(--text-dim); }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

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

/* ---------------------------- 16. RESPONSIVE ---------------------------- */
.mt-24 { margin-top: 24px; }

@media (min-width: 560px) {
  .modal__actions { grid-template-columns: 1fr 1fr; }
  .hero-search { grid-template-columns: 1fr 1fr; align-items: end; }
  .hero-search__submit { grid-column: 1 / -1; }
  .form-grid--2 { grid-template-columns: 1fr 1fr; }
  .field--full { grid-column: 1 / -1; }
  .modal__actions { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 768px) {
  :root { --gutter: 28px; }
  .section { padding: 92px 0; }
  .hero { padding: 80px 0 90px; }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .stats { grid-template-columns: repeat(4, 1fr); }
  .adv-grid { grid-template-columns: repeat(2, 1fr); }
  .topbar { font-size: .78rem; }
  .topbar__group { flex: 0 1 auto; gap: 26px; }
  .topbar__group--contact { display: none; }
  .topbar__inner {
    justify-content: space-between;
    gap: 10px 26px; min-height: 42px;
    padding-top: 0; padding-bottom: 0;
  }
  .cta-band__inner { grid-template-columns: 1.6fr 1fr; }
  .cta-band__actions { justify-content: flex-end; }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
  .mini-grid { grid-template-columns: repeat(2, 1fr); }
  .modal__specs { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 1000px) {
  :root { --header-h: 84px; --gutter: 32px; }

  .nav-toggle { display: none; }
  .nav__close { display: none; }
  .nav-backdrop { display: none !important; }

  .nav {
    position: static; width: auto; padding: 0;
    overscroll-behavior: auto;
    background: none; border: 0; box-shadow: none;
    transform: none; overflow: visible;
    flex-direction: row; align-items: center; gap: 32px;
  }
  /* The fix for the run-together menu: real spacing between links. */
  .nav__list { flex-direction: row; gap: 28px; }
  .nav__link {
    padding: 8px 0; border-bottom: 0; position: relative;
    font-size: .88rem; font-weight: 600; white-space: nowrap;
  }
  .nav__link:hover, .nav__link.is-active { padding-left: 0; }
  .nav__link::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0;
    height: 2px; border-radius: 2px; background: var(--gold);
    transform: scaleX(0); transform-origin: left;
    transition: transform var(--t);
  }
  .nav__link:hover::after, .nav__link.is-active::after { transform: scaleX(1); }
  .nav__cta { margin-top: 0; }

  .hero { padding: 104px 0 106px; }

  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .advantage { grid-template-columns: 1fr 1.15fr; gap: 28px; }
  .contact-layout { grid-template-columns: 5fr 7fr; gap: 44px; }
  .footer-grid { grid-template-columns: 2.2fr 1fr 1fr 1.6fr; gap: 44px; }
  .footer-bottom { grid-template-columns: auto 1fr; align-items: center; gap: 28px; }
  .form-card { padding: 34px 32px; }
  .floaters { right: 22px; bottom: 22px; }
  .floater { width: 56px; height: 56px; }

  /* Full desktop: the top strip has room for the contact details again, and
     the header needs its space back for the menu. */
  .topbar__group--contact { display: flex; }
  .header-actions { display: none; }
}

@media (min-width: 1200px) {
  .hero__title { font-size: 3.7rem; }
}

/* ------------------- 17. PHONE & TABLET REFINEMENTS ---------------------
   Small fixes that matter on real Android and iPhone handsets. Everything
   here is undone again on large screens where it is not needed.
   ------------------------------------------------------------------------ */

/* Form fields are 16px on phones on purpose. Anything smaller makes the
   browser zoom in the moment you tap a field, which leaves the page stuck
   half off-screen and is the single most common mobile annoyance. */
.field input, .field textarea, .field select,
.hero-search input, .hero-search select {
  font-size: 16px;
}

/* Comfortable tap targets — a fingertip is about 44px across. */
.chip {
  min-height: 44px;
  display: inline-flex; align-items: center;
  -webkit-tap-highlight-color: transparent;
}
.prop-card__foot .btn { min-height: 44px; }
.topbar__item, .nav__cta { -webkit-tap-highlight-color: transparent; }

/* Keep the floating call and WhatsApp buttons clear of the Android gesture
   bar and the iPhone home indicator. */
.floaters {
  right: calc(14px + env(safe-area-inset-right, 0px));
  bottom: calc(14px + env(safe-area-inset-bottom, 0px));
}

/* Long words — an email address, a URL — must never push the page sideways. */
.prop-card__title, .prop-card__loc, .prop-card__desc,
.sec-head__title, .hero__title, .footer-col a, .modal__title {
  overflow-wrap: break-word;
}

/* The filter rows scroll sideways rather than stacking into a tall column. */
@media (max-width: 559px) {
  .filters {
    flex-wrap: nowrap;
    justify-content: flex-start;   /* centring would clip the first chip */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-left: calc(var(--gutter) * -1);
    margin-right: calc(var(--gutter) * -1);
    padding: 2px var(--gutter) 6px;
    scroll-snap-type: x proximity;
  }
  .filters::-webkit-scrollbar { display: none; }
  .chip { flex: 0 0 auto; scroll-snap-align: start; }
}

/* Back to the tighter desktop sizing once there is a mouse and a big screen. */
@media (min-width: 1000px) {
  .field input, .field textarea, .field select,
  .hero-search input, .hero-search select { font-size: .93rem; }
  .chip { min-height: 0; }
}

@media print {
  .topbar, .site-header, .floaters, .cta-band, .nav { display: none !important; }
  body { background: #fff; color: #000; }
  .section, .hero { padding: 16pt 0; background: #fff !important; }
  h1, h2, h3, h4 { color: #000 !important; }
}