/* ==========================================================================
   Maatr Investment Solutions — design tokens
   Palette: navy + gold. A serious, corporate-advisory mood — distinct from
   the reference site's black/white/red scheme, but the same register of
   "established consultancy," not playful.
   ========================================================================== */
:root{
	--ink:        #0B2545;
	--ink-2:      #071A33;
	--ivory:      #F5F6F8;
	--paper:      #FFFFFF;
	--brass:      #C89B3C;
	--brass-dark: #A87F2C;
	--sage:       #EDF0F4;
	--charcoal:   #1C232E;
	--muted:      #5C6773;
	--white:      #FFFFFF;
	--line:       rgba(11,37,69,0.12);

	--font-display: "Poppins", "Segoe UI", Arial, sans-serif;
	--font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--font-mono: "IBM Plex Mono", ui-monospace, monospace;

	--radius: 6px;
	--wrap: 1200px;
}

*, *::before, *::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
	margin:0;
	font-family: var(--font-body);
	color: var(--charcoal);
	background: var(--paper);
	line-height:1.55;
	-webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul, ol{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; cursor:pointer; }

.wrap{ max-width:var(--wrap); margin:0 auto; padding:0 24px; }

h1, h2, h3{
	font-family: var(--font-display);
	color: var(--ink);
	font-weight:600;
	line-height:1.18;
	margin:0 0 16px;
	letter-spacing:-0.01em;
}
h1{ font-size:clamp(2.1rem, 3.6vw, 3rem); font-weight:700; }
h2{ font-size:clamp(1.5rem, 2.4vw, 2.1rem); font-weight:700; }
h3{ font-size:1.1rem; margin-bottom:8px; font-weight:600; }
p{ margin:0 0 16px; color: var(--muted); }

.eyebrow{
	font-family: var(--font-mono);
	font-size:0.72rem;
	letter-spacing:0.14em;
	text-transform:uppercase;
	color: var(--brass-dark);
	margin:0 0 12px;
	font-weight:600;
}

.btn{
	display:inline-flex; align-items:center; justify-content:center; gap:8px;
	padding:14px 26px;
	border-radius: var(--radius);
	font-weight:600; font-size:0.95rem;
	border:1px solid transparent;
	transition: transform .15s ease, background .2s ease, color .2s ease;
	white-space:nowrap;
}
.btn:hover{ transform: translateY(-1px); }
.btn--brass{ background: var(--brass); color: var(--white); }
.btn--brass:hover{ background: var(--brass-dark); }
.btn--ink{ background: var(--ink); color: var(--ivory); }
.btn--ink:hover{ background: var(--ink-2); }
.btn--outline{ background:transparent; border-color: var(--line); color: var(--ink); }
.btn--full{ width:100%; }
.btn--large{ padding:18px 34px; font-size:1.05rem; }

.link-arrow{
	font-family: var(--font-mono);
	font-size:0.85rem; font-weight:600; color: var(--ink);
	border-bottom:1px solid var(--brass);
	padding-bottom:2px;
}

.section-head{
	display:flex; justify-content:space-between; align-items:flex-end;
	gap:24px; margin-bottom:40px; flex-wrap:wrap;
}
.section-head h2{ margin:0; }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header{
	position:sticky; top:0; z-index:100;
	background: rgba(251,248,242,0.92);
	backdrop-filter: blur(8px);
	border-bottom:1px solid var(--line);
}
.site-header__inner{
	display:flex; align-items:center; justify-content:space-between;
	height:84px; gap:24px;
}
.brand{ display:flex; align-items:center; gap:10px; }
.brand__mark{
	width:38px; height:38px; border-radius:50%;
	background: var(--ink); color: var(--ivory);
	display:flex; align-items:center; justify-content:center;
	font-family: var(--font-display); font-size:1.2rem;
}
.brand__name{ font-family: var(--font-display); font-size:1.15rem; color: var(--ink); display:flex; flex-direction:column; line-height:1.15; }
.brand__name em{ font-style:normal; font-family: var(--font-mono); font-size:0.6rem; letter-spacing:0.1em; text-transform:uppercase; color: var(--brass-dark); }
.brand__name--footer{ color: var(--ivory); margin-bottom:14px; display:flex; flex-direction:column; }
.brand__name--footer em{ color: var(--brass); }

.primary-nav__list{ display:flex; gap:32px; }
.primary-nav__list a{ font-size:0.92rem; font-weight:500; color: var(--ink); }
.primary-nav__list a:hover{ color: var(--brass-dark); }

.site-header__actions{ display:flex; align-items:center; gap:18px; }
.header-phone{ display:flex; flex-direction:column; text-align:right; font-size:0.8rem; }
.header-phone__label{ color:var(--muted); font-size:0.7rem; }
.header-phone__number{ font-family: var(--font-mono); font-weight:600; color:var(--ink); }

.nav-toggle{ display:none; flex-direction:column; gap:5px; background:none; border:none; padding:6px; }
.nav-toggle span{ width:24px; height:2px; background:var(--ink); display:block; }

.mobile-nav{
	display:none; flex-direction:column; gap:18px;
	padding:20px 24px 28px; border-top:1px solid var(--line);
	background: var(--paper);
}
.mobile-nav ul{ display:flex; flex-direction:column; gap:14px; }
.mobile-nav a{ font-size:1rem; font-weight:500; }
.site-header.is-open .mobile-nav{ display:flex; }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{ background: linear-gradient(180deg, var(--ivory) 0%, var(--paper) 100%); padding-top:32px; }
.hero{
	position: relative;
	overflow: hidden;
	max-height: calc(100vh - 84px);
}
.hero::before{
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background-image:
		linear-gradient(90deg, rgba(11,37,69,0.15) 0%, rgba(11,37,69,0.05) 40%, rgba(11,37,69,0) 70%),
		url('https://maatrinvestment.solutions/wp-content/uploads/2026/07/Skyline-scaled.jpg');
	background-size: cover;
	background-position: center;
	pointer-events: none;
}
.hero__inner{
	position: relative;
	z-index: 1;
}
.hero__inner{ display:flex; align-items:center; height: calc(100vh - 84px); padding-bottom:0; }
.hero__copy{
	background: rgba(255,255,255,0.88);
	backdrop-filter: blur(6px);
	padding: 32px;
	border-radius: var(--radius);
	max-width: 100%;
	display: grid;
	grid-template-columns: 1.3fr 0.9fr;
	gap: 40px;
	align-items: center;
}
.hero__form-tile{
	background: var(--sage);
	border-radius: var(--radius);
	padding: 24px;
}
.hero__form-tile h3{ margin-bottom:16px; }
.hero-search--vertical{ background:none; border:none; box-shadow:none; padding:0; margin:0; }
.hero__form-tile form{ display:flex; flex-direction:column; gap:12px; }
.hero__form-tile .hero-search__row{ display:grid; grid-template-columns: 1fr 1fr; gap:12px; }
.hero__form-tile input, .hero__form-tile button{ width:100%; box-sizing:border-box; display:block; }
.hero__sub{ max-width:46ch; font-size:1.05rem; }
.hero__copy h1{ margin-bottom:14px; }
.hero__copy h1 em{ font-style:normal; color: var(--brass-dark); }

.hero-search{
	background: var(--white);
	border:1px solid var(--line);
	border-radius: var(--radius);
	padding:12px; margin:20px 0 24px;
	box-shadow:0 20px 40px -28px rgba(22,51,42,0.35);
}
.hero-search__row{ display:grid; grid-template-columns:0.8fr 1fr 1fr auto; gap:10px; }
.hero-search select, .hero-search input{
	padding:12px 14px; border:1px solid var(--line); border-radius: var(--radius);
	font-family:inherit; font-size:0.9rem; background: var(--paper); color: var(--charcoal);
}

.hero__proof{ display:flex; gap:36px; }
.hero__proof strong{ display:block; font-family: var(--font-display); font-size:1.5rem; color: var(--ink); }
.hero__proof span{ font-size:0.78rem; color: var(--muted); text-transform:uppercase; letter-spacing:0.04em; }

.hero__visual{ position:relative; height:420px; }
.hero-card{
	position:absolute; width:220px; padding:20px;
	background: var(--white); border-radius: var(--radius);
	box-shadow:0 30px 60px -30px rgba(22,51,42,0.4);
	display:flex; flex-direction:column; gap:6px;
	border-top:3px solid var(--brass);
}
.hero-card--1{ top:10px; right:40px; }
.hero-card--2{ bottom:10px; right:150px; }
.hero-card__tag{ font-family: var(--font-mono); font-size:0.65rem; text-transform:uppercase; letter-spacing:0.08em; color: var(--brass-dark); }
.hero-card__price{ font-family: var(--font-display); font-size:1.4rem; color: var(--ink); }
.hero-card__loc{ font-size:0.82rem; color: var(--muted); }

/* Ticker — signature element */
.ticker{ background: var(--ink); overflow:hidden; padding:14px 0; border-top:1px solid rgba(255,255,255,0.08); }
.ticker__track{
	display:flex; gap:48px; width:max-content;
	animation: ticker-scroll 38s linear infinite;
}
.ticker__item{
	font-family: var(--font-mono); font-size:0.8rem; color: var(--ivory);
	display:flex; gap:8px; white-space:nowrap;
}
.ticker__item strong{ color: var(--white); }
.ticker__item em{ font-style:normal; color:#7FBF9E; }
@keyframes ticker-scroll{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }

/* ==========================================================================
   Trust cards (why choose us)
   ========================================================================== */
.trust{ background: var(--sage); padding:72px 0; }
.trust__head{ text-align:center; max-width:640px; margin:0 auto 44px; }
.trust__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.trust-card{
	background: var(--white); border-radius: var(--radius); padding:30px 26px;
	border:1px solid var(--line); text-align:left;
}
.trust-card__icon{
	width:52px; height:52px; border-radius:50%; background: var(--ink);
	color: var(--brass); display:flex; align-items:center; justify-content:center;
	font-family: var(--font-display); font-weight:700; font-size:1.1rem; margin-bottom:18px;
}
.trust-card h3{ margin-bottom:8px; }
.trust-card p{ font-size:0.9rem; margin:0; }
.trust__cta{ text-align:center; margin-top:40px; }

/* ==========================================================================
   Properties
   ========================================================================== */
.properties{ padding:96px 0; }
.properties__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.property-card{
	background: var(--white); border:1px solid var(--line); border-radius: var(--radius);
	overflow:hidden; display:flex; flex-direction:column;
	transition: box-shadow .2s ease, transform .2s ease;
}
.property-card:hover{ box-shadow:0 24px 48px -30px rgba(22,51,42,0.35); transform: translateY(-3px); }
.property-card__media{
	height:150px;
	background: repeating-linear-gradient(135deg, var(--sage), var(--sage) 10px, #cfd9c8 10px, #cfd9c8 20px);
	position:relative; display:flex; align-items:flex-start; justify-content:flex-start; padding:14px;
}
.property-card__tag{
	background: var(--ink); color: var(--ivory); font-family: var(--font-mono);
	font-size:0.65rem; text-transform:uppercase; letter-spacing:0.06em;
	padding:5px 10px; border-radius:2px;
}
.property-card__body{ padding:20px; flex:1; display:flex; flex-direction:column; }
.property-card__loc{ font-size:0.85rem; margin-bottom:2px; }
.property-card__meta{ font-size:0.78rem; color: var(--muted); font-family: var(--font-mono); margin-bottom:14px; }
.property-card__foot{ margin-top:auto; display:flex; justify-content:space-between; align-items:center; }
.property-card__price{ font-family: var(--font-display); font-size:1.25rem; color: var(--ink); }

/* ==========================================================================
   Global / NRI advisory band
   ========================================================================== */
.global-desk{ padding:96px 0; }
.global-desk__inner{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:56px; align-items:center; }
.global-desk__visual{
	aspect-ratio:4/3; border-radius: var(--radius);
	background: linear-gradient(135deg, var(--ink) 0%, var(--ink-2) 100%);
	position:relative; overflow:hidden;
}
.global-desk__visual::after{
	content:"MIS"; position:absolute; right:20px; bottom:14px;
	font-family:var(--font-display); font-weight:700; font-size:3rem; color:rgba(200,155,60,0.25);
}
.global-desk__copy p{ max-width:60ch; }

/* ==========================================================================
   Localities — city tabs
   ========================================================================== */
.localities{ padding:96px 0; background: var(--sage); }
.locality-tabs{ display:flex; gap:10px; margin:28px 0 36px; flex-wrap:wrap; }
.locality-tab{
	padding:10px 22px; border-radius:999px; border:1px solid var(--line);
	background: var(--white); font-weight:600; font-size:0.88rem; color: var(--muted);
}
.locality-tab.is-active{ background: var(--ink); color: var(--white); border-color: var(--ink); }
.locality-panel{ display:none; }
.locality-panel.is-active{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.locality-card{
	background: var(--white); border-radius: var(--radius); overflow:hidden;
	border:1px solid var(--line);
}
.locality-card__media{
	height:120px;
	background: repeating-linear-gradient(135deg, var(--ivory), var(--ivory) 10px, #dfe3ea 10px, #dfe3ea 20px);
}
.locality-card__body{ padding:20px; }
.locality-card__body h3{ margin-bottom:4px; }
.locality-card__body p{ font-size:0.88rem; margin-bottom:14px; }

/* ==========================================================================
   Developers grid
   ========================================================================== */
.developers{ padding:96px 0; }
.developers__grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:18px; margin-top:36px; }
.developer-card{
	border:1px solid var(--line); border-radius: var(--radius); padding:20px 14px;
	text-align:center; background: var(--paper);
}
.developer-card__mark{
	width:44px; height:44px; margin:0 auto 12px; border-radius:50%;
	background: var(--sage); color: var(--ink); display:flex; align-items:center; justify-content:center;
	font-family: var(--font-display); font-weight:700; font-size:0.95rem;
}
.developer-card h3{ font-size:0.9rem; margin-bottom:4px; }
.developer-card p{ font-size:0.72rem; margin:0; color: var(--muted); }

/* ==========================================================================
   Sticky action buttons
   ========================================================================== */
.sticky-actions{
	position:fixed; right:20px; bottom:20px; z-index:200;
	display:flex; flex-direction:column; gap:12px;
}
.sticky-actions a{
	width:52px; height:52px; border-radius:50%;
	display:flex; align-items:center; justify-content:center;
	font-family: var(--font-mono); font-size:0.65rem; font-weight:700;
	box-shadow:0 12px 24px -10px rgba(11,37,69,0.45);
	color: var(--white); text-align:center; line-height:1.1;
}
.sticky-actions__call{ background: var(--ink); }
.sticky-actions__whatsapp{ background:#2FA84F; }
.sticky-actions__enquire{ background: var(--brass); }

/* ==========================================================================
   Why us
   ========================================================================== */
.why-us{ background: var(--ink); color: var(--ivory); padding:96px 0; }
.why-us__inner{ display:grid; grid-template-columns:0.8fr 1.2fr; gap:60px; align-items:center; }
.why-us__frame{
	aspect-ratio:4/5; border-radius: var(--radius);
	background: repeating-linear-gradient(45deg, rgba(184,134,59,0.15), rgba(184,134,59,0.15) 12px, rgba(255,255,255,0.03) 12px, rgba(255,255,255,0.03) 24px);
	border:1px solid rgba(255,255,255,0.15);
}
.why-us__copy h2{ color: var(--ivory); }
.why-us__copy p{ color: rgba(246,241,231,0.75); max-width:56ch; }
.why-us__list{ display:flex; flex-direction:column; gap:16px; margin:24px 0 32px; }
.why-us__list li{ color: rgba(246,241,231,0.85); font-size:0.95rem; padding-left:20px; position:relative; }
.why-us__list li::before{ content:"—"; position:absolute; left:0; color: var(--brass); }
.why-us__list strong{ color: var(--ivory); }

/* ==========================================================================
   Process
   ========================================================================== */
.process{ padding:96px 0; }
.process h2{ max-width:20ch; margin-bottom:48px; }
.process__list{ display:grid; grid-template-columns:repeat(5,1fr); gap:20px; counter-reset:step; }
.process__step{ border-top:2px solid var(--brass); padding-top:18px; }
.process__num{ font-family: var(--font-mono); color: var(--brass-dark); font-size:0.85rem; font-weight:600; }
.process__step p{ font-size:0.88rem; }

/* ==========================================================================
   Testimonials
   ========================================================================== */
.testimonials{ background: var(--sage); padding:96px 0; }
.testimonials__track{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:40px; }
.testimonial-card{
	background: var(--paper); border-radius: var(--radius); padding:32px;
	border-left:3px solid var(--brass); margin:0;
}
.testimonial-card blockquote{ margin:0 0 20px; font-family: var(--font-body); font-size:1.05rem; color: var(--ink); font-style:normal; font-weight:500; }
.testimonial-card figcaption{ display:flex; flex-direction:column; font-size:0.85rem; }
.testimonial-card figcaption span{ color: var(--muted); }
.testimonials__dots{ display:none; }

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq{ padding:96px 0; }
.faq__inner{ display:grid; grid-template-columns:0.7fr 1.3fr; gap:60px; }
.faq-item{ border-bottom:1px solid var(--line); }
.faq-item__q{
	width:100%; background:none; border:none; text-align:left;
	padding:22px 0; display:flex; justify-content:space-between; align-items:center;
	font-family: var(--font-display); font-size:1.05rem; color: var(--ink);
}
.faq-item__icon{ font-size:1.3rem; color: var(--brass); transition: transform .2s ease; }
.faq-item[aria-expanded="true"] .faq-item__icon,
.faq-item.is-open .faq-item__icon{ transform: rotate(45deg); }
.faq-item__a{ max-height:0; overflow:hidden; transition: max-height .25s ease; }
.faq-item__a p{ padding-bottom:22px; margin:0; max-width:60ch; }
.faq-item.is-open .faq-item__a{ max-height:300px; }

/* ==========================================================================
   CTA
   ========================================================================== */
.cta{ background: var(--brass); padding:80px 0; text-align:center; }
.cta__inner{ max-width:720px; margin:0 auto; }
.cta h2{ color: var(--white); }
.cta p{ color: rgba(255,255,255,0.85); }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{ background: var(--ink-2); color: rgba(246,241,231,0.8); padding:72px 0 0; }
.site-footer__grid{ display:grid; grid-template-columns:1.4fr 0.8fr 1fr 1fr; gap:40px; padding-bottom:56px; border-bottom:1px solid rgba(255,255,255,0.1); }
.footer-col h4{ color: var(--ivory); font-family: var(--font-mono); font-size:0.75rem; text-transform:uppercase; letter-spacing:0.08em; margin-bottom:16px; }
.footer-col p{ color: rgba(246,241,231,0.65); font-size:0.9rem; }
.footer-col address{ font-style:normal; color: rgba(246,241,231,0.65); font-size:0.9rem; margin-bottom:10px; }
.footer-menu{ display:flex; flex-direction:column; gap:10px; }
.footer-menu a{ font-size:0.9rem; color: rgba(246,241,231,0.75); }
.footer-social{ display:flex; gap:12px; margin-top:16px; }
.footer-social a{ width:34px; height:34px; border:1px solid rgba(255,255,255,0.2); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:0.7rem; }
.footer-newsletter{ display:flex; gap:8px; }
.footer-newsletter input{ flex:1; padding:11px 12px; border-radius: var(--radius); border:1px solid rgba(255,255,255,0.2); background:transparent; color:var(--ivory); }
.footer-newsletter input::placeholder{ color: rgba(246,241,231,0.5); }
.footer-newsletter .btn--outline{ border-color: rgba(255,255,255,0.3); color: var(--ivory); }
.site-footer__bottom{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; padding:24px 0; font-size:0.78rem; color: rgba(246,241,231,0.5); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 980px){
	.hero{ max-height: none; }
	.hero__inner{
		height: auto;
		display: block;
		padding: 24px 0;
	}
	.hero__copy{
		display: block;
		max-width: 100%;
		padding: 24px;
	}
	.hero__form-tile{
		margin-top: 24px;
	}
	.hero__form-tile .hero-search__row{
		grid-template-columns: 1fr;
	}
	.primary-nav{ display:none; }
	.header-phone{ display:none; }
	.nav-toggle{ display:flex; }
	.hero__inner{ grid-template-columns:1fr; }
	.hero__visual{ display:none; }
	.hero-search__row{ grid-template-columns:1fr 1fr; }
	.hero-search__row .btn{ grid-column:span 2; }
	.properties__grid{ grid-template-columns:repeat(2,1fr); }
	.trust__grid{ grid-template-columns:repeat(2,1fr); }
	.global-desk__inner{ grid-template-columns:1fr; }
	.global-desk__visual{ order:-1; }
	.locality-panel.is-active{ grid-template-columns:repeat(2,1fr); }
	.developers__grid{ grid-template-columns:repeat(3,1fr); }
	.why-us__inner{ grid-template-columns:1fr; }
	.why-us__frame{ display:none; }
	.process__list{ grid-template-columns:repeat(2,1fr); }
	.testimonials__track{ grid-template-columns:1fr; }
	.faq__inner{ grid-template-columns:1fr; }
	.site-footer__grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width: 560px){
	.site-header__inner{ height:70px; }
	.properties__grid{ grid-template-columns:1fr; }
	.trust__grid{ grid-template-columns:1fr; }
	.locality-panel.is-active{ grid-template-columns:1fr; }
	.developers__grid{ grid-template-columns:repeat(2,1fr); }
	.process__list{ grid-template-columns:1fr; }
	.hero-search__row{ grid-template-columns:1fr; }
	.hero-search__row .btn{ grid-column:span 1; }
	.hero__proof{ flex-wrap:wrap; gap:20px; }
	.site-footer__grid{ grid-template-columns:1fr; }
}

@media (prefers-reduced-motion: reduce){
	html{ scroll-behavior:auto; }
	.ticker__track{ animation:none; }
	.btn:hover{ transform:none; }
}

.hero-form__status{ font-size:0.85rem; margin:8px 0 0; min-height:18px; }