/* =========================================================================
   NARPAVI PROPERTY DEVELOPERS — DESIGN SYSTEM v3
   Rebuilt in response to direct feedback: too monochrome, nav bar had no
   color, type was oversized and unpleasant, header wordmark was split
   into two colors. This version is NOT based on the old WordPress site's
   look, and drops the "structural/editorial" direction from v2 in favor
   of a warmer, rounder, more colorful property-developer feel.

   Color   — built from the real logo (blue roof-mark, blue wordmark,
             green subtitle), but used far more generously: a solid
             gradient navy-to-blue header band, alternating soft blue/
             green tinted section backgrounds, colored icon chips.
   Type    — "Manrope" (headings — rounded geometric, friendly, NOT a
             loud display face) + "Inter" (body). Sizes cut substantially
             from the previous version.
   Shape   — rounded corners throughout (10-12px), soft shadows on cards —
             the opposite of the hairline/blueprint look from before.
   ========================================================================= */

:root {
  --ink: #0f2a4a;
  --ink-soft: #33506f;
  --blue: #2563eb;
  --blue-dark: #1d4ed8;
  --blue-tint: #eef4ff;
  --green: #16a34a;
  --green-dark: #0f7a37;
  --green-tint: #eefaf1;
  --amber: #f59e0b;
  --paper: #ffffff;
  --slate: #526176;
  --slate-light: #8493a6;
  --line: #e4e9f1;

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

  --max-w: 1200px;
  --radius: 12px;
  --radius-sm: 8px;
  --shadow: 0 4px 20px rgba(15, 42, 74, 0.08);
  --shadow-lg: 0 12px 32px rgba(15, 42, 74, 0.14);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: var(--blue-dark); text-decoration-thickness: 1px; }
a:hover { color: var(--green-dark); }

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 3px solid var(--amber);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

h1, h2, h3, .display {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -0.01em;
  margin: 0 0 0.5em;
  color: var(--ink);
}
h1 { font-size: clamp(1.9rem, 3.4vw, 2.75rem); }
h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); }
h3 { font-size: clamp(1.08rem, 1.6vw, 1.25rem); font-weight: 700; }
p { max-width: 66ch; color: var(--slate); font-size: 1rem; }
p.lede { font-size: 1.08rem; color: var(--ink-soft); }

.container { max-width: var(--max-w); margin: 0 auto; padding: 0 24px; }
.container-narrow { max-width: 760px; margin: 0 auto; padding: 0 24px; }

/* ---------- header / nav — now with real color ---------- */
.site-header {
  position: sticky; top: 0; z-index: 40;
  background: linear-gradient(100deg, #0f2a4a 0%, #1d4ed8 100%);
  box-shadow: 0 2px 12px rgba(15, 42, 74, 0.18);
}
.nav-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 28px; gap: 20px; width: 100%; max-width: none;
  flex-wrap: nowrap;
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; flex-shrink: 0; }
.brand .logo-chip { background: #fff; border-radius: 8px; padding: 4px; display: flex; flex-shrink: 0; }
.brand .logo-chip img { height: 30px; width: auto; display: block; }
.brand .wordmark {
  font-family: var(--font-display); font-size: 1.1rem; font-weight: 800;
  color: #ffffff; letter-spacing: -0.01em; white-space: nowrap;
}
.nav-links {
  display: flex; gap: 14px; list-style: none; margin: 0; padding: 0;
  font-size: 0.86rem; font-weight: 600; align-items: center; flex-wrap: nowrap;
}
.nav-links li { flex-shrink: 0; }
.nav-links a {
  color: rgba(255,255,255,0.88); text-decoration: none; padding: 6px 2px;
  border-bottom: 2px solid transparent; white-space: nowrap;
}
.nav-links a:hover { color: #fff; border-bottom-color: #fff; }
.nav-links a[aria-current="page"] { color: #fff; border-bottom-color: #fff; }
.nav-toggle { display: none; }
.nav-cta {
  background: #ffffff; color: var(--ink) !important; padding: 9px 18px;
  border-radius: var(--radius-sm); font-weight: 800; border-bottom: none !important;
  white-space: nowrap; margin-left: 4px;
}
.nav-cta:hover { background: #eef4ff; color: var(--ink) !important; }

@media (max-width: 1080px) {
  .nav-links { gap: 10px; font-size: 0.82rem; }
}
@media (max-width: 900px) {
  .nav-row { padding: 12px 20px; }
  .nav-links {
    position: absolute; top: 100%; left: 0; right: 0; flex-direction: column;
    align-items: flex-start; background: var(--ink); padding: 18px 24px;
    gap: 14px; display: none; flex-wrap: wrap;
  }
  .nav-links.is-open { display: flex; }
  .nav-toggle { display: inline-flex; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.3); color: #fff; border-radius: var(--radius-sm); padding: 8px 12px; font-size: 1.1rem; cursor: pointer; }
}

/* ---------- hero — colored gradient band, not plain white ---------- */
.hero {
  padding: 52px 0 56px;
  background: linear-gradient(180deg, var(--blue-tint) 0%, #ffffff 100%);
}
.hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 40px; align-items: center; }
.hero-eyebrow {
  display: inline-block; font-family: var(--font-mono); font-size: 0.74rem; font-weight: 600;
  letter-spacing: 0.03em; color: var(--green-dark); background: var(--green-tint);
  padding: 5px 12px; border-radius: 999px; margin-bottom: 16px;
}
.hero-cta { display: flex; gap: 12px; margin-top: 24px; flex-wrap: wrap; }
.hero-figure { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-lg); margin: 0; }
.hero-figure img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.hero-figure figcaption { background: var(--ink); color: #fff; font-size: 0.82rem; padding: 10px 16px; }
@media (max-width: 860px) { .hero-grid { grid-template-columns: 1fr; } }

.hero-strip { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-top: 28px; }
.hero-strip img { aspect-ratio: 3/4; object-fit: cover; width: 100%; border-radius: var(--radius-sm); }
@media (max-width: 700px) { .hero-strip { grid-template-columns: repeat(3, 1fr); } .hero-strip img:nth-child(n+4) { display: none; } }

/* ---------- buttons — rounded, colorful ---------- */
.btn { display: inline-block; font-family: var(--font-body); font-weight: 700; font-size: 0.94rem; padding: 12px 24px; border-radius: var(--radius-sm); text-decoration: none; border: 2px solid transparent; cursor: pointer; }
.btn-primary { background: var(--blue); color: #fff; }
.btn-primary:hover { background: var(--blue-dark); color: #fff; }
.btn-outline { border-color: var(--blue); color: var(--blue-dark); background: #fff; }
.btn-outline:hover { background: var(--blue-tint); }
.btn-ghost { color: var(--blue-dark); font-weight: 700; }

/* ---------- sections — alternating soft color bands ---------- */
section { padding: 56px 0; }
.section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 30px; flex-wrap: wrap; }
.section-head p { margin: 0; color: var(--slate); }
.bg-tint-blue { background: var(--blue-tint); }
.bg-tint-green { background: var(--green-tint); }

/* ---------- proof band ---------- */
.proof-band { background: linear-gradient(100deg, #0f2a4a, #1d4ed8); color: #fff; }
.proof-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; padding: 40px 0; }
.proof-grid .num { font-family: var(--font-display); font-size: clamp(1.7rem, 3.4vw, 2.3rem); font-weight: 800; color: var(--amber); display: block; }
.proof-grid .label { font-size: 0.88rem; color: #dbe6fb; }
@media (max-width: 700px) { .proof-grid { grid-template-columns: 1fr 1fr; } }

/* ---------- journey / story strip ---------- */
.journey { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.journey figure { margin: 0; position: relative; overflow: hidden; border-radius: var(--radius); box-shadow: var(--shadow); }
.journey img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.journey figcaption { position: absolute; left: 0; right: 0; bottom: 0; background: linear-gradient(0deg, rgba(15,42,74,0.9), transparent); color: #fff; padding: 14px 16px 12px; font-size: 0.85rem; font-weight: 600; }
@media (max-width: 760px) { .journey { grid-template-columns: 1fr; } }

/* ---------- what we do / services — colored icon chips ---------- */
.services-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.service-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow); }
.service-card .icon-chip {
  width: 44px; height: 44px; border-radius: 10px; display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem; margin-bottom: 14px;
}
.service-card:nth-child(6n+1) .icon-chip, .service-card:nth-child(6n+4) .icon-chip { background: var(--blue-tint); }
.service-card:nth-child(6n+2) .icon-chip, .service-card:nth-child(6n+5) .icon-chip { background: var(--green-tint); }
.service-card:nth-child(6n+3) .icon-chip, .service-card:nth-child(6n+6) .icon-chip { background: #fef3e2; }
.service-card h3 { margin-bottom: 8px; }
.service-card p { margin: 0; font-size: 0.94rem; }
@media (max-width: 820px) { .services-list { grid-template-columns: 1fr; } }

/* ---------- why-narpavi reason cards ---------- */
.reason-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.reason-card { background: var(--paper); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow); border-top: 4px solid var(--green); }
.reason-card:nth-child(2n) { border-top-color: var(--blue); }
@media (max-width: 760px) { .reason-grid { grid-template-columns: 1fr; } }

/* ---------- process timeline ---------- */
.process { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; list-style: none; margin: 0; padding: 0; }
.process-step { background: var(--paper); border-radius: var(--radius); padding: 16px 14px; box-shadow: var(--shadow); }
.process-step .num {
  font-family: var(--font-display); font-size: 1rem; font-weight: 800; color: #fff;
  background: var(--blue); width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; margin-bottom: 10px;
}
.process-step:nth-child(2n) .num { background: var(--green); }
.process-step h3 { font-size: 0.98rem; }
.process-step p { font-size: 0.88rem; }
@media (max-width: 900px) { .process { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .process { grid-template-columns: repeat(2, 1fr); } }

/* ---------- project filters + cards ---------- */
.project-filters { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 28px; }
.project-filters a { border: 1.5px solid var(--line); border-radius: 999px; padding: 7px 16px; font-size: 0.85rem; font-weight: 700; text-decoration: none; color: var(--ink-soft); background: #fff; }
.project-filters a[aria-current="true"] { background: var(--blue); color: #fff; border-color: var(--blue); }

.project-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.project-card { border-radius: var(--radius); overflow: hidden; background: var(--paper); box-shadow: var(--shadow); display: flex; flex-direction: column; transition: transform 0.15s ease, box-shadow 0.15s ease; }
.project-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.project-card figure { margin: 0; background: #dbe4ee; }
.project-card img { height: 210px; object-fit: cover; object-position: center 30%; width: 100%; display: block; }
.project-card .card-body { padding: 16px 18px 18px; background: #f7f9fc; border-top: 1px solid var(--line); flex: 1; display: flex; flex-direction: column; }
.project-card h3 { font-size: 1.02rem; margin-bottom: 6px; }
.project-card .cap { font-size: 0.82rem; color: var(--slate-light); margin-bottom: 8px; }
.project-facts { list-style: none; margin: auto 0 0; padding: 0; font-size: 0.84rem; color: var(--slate); border-top: 1px solid var(--line); padding-top: 10px; }
.project-facts li { display: flex; justify-content: space-between; padding: 3px 0; gap: 12px; }
.project-facts .k { color: var(--slate-light); }
@media (max-width: 900px) { .project-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .project-grid { grid-template-columns: 1fr; } }

/* ---------- growth timeline (About page) ---------- */
.timeline { position: relative; padding-top: 10px; }
.timeline-track {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px;
  position: relative; margin-bottom: 8px;
}
.timeline-track::before {
  content: ""; position: absolute; top: 15px; left: 4%; right: 4%; height: 3px;
  background: var(--line); z-index: 0;
}
.timeline-step { position: relative; text-align: center; z-index: 1; }
.timeline-step .dot {
  width: 32px; height: 32px; border-radius: 50%; background: var(--blue);
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 800; font-size: 0.85rem;
  margin: 0 auto 10px; box-shadow: 0 0 0 4px var(--paper);
}
.timeline-step:nth-child(even) .dot { background: var(--green); }
.timeline-step .label { font-size: 0.82rem; font-weight: 700; color: var(--ink); line-height: 1.3; }
@media (max-width: 900px) {
  .timeline-track { grid-template-columns: repeat(3, 1fr); row-gap: 30px; }
  .timeline-track::before { display: none; }
}
@media (max-width: 560px) {
  .timeline-track { grid-template-columns: repeat(2, 1fr); }
}

.timeline-photos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 26px; }
.timeline-photos figure { margin: 0; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.timeline-photos img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.timeline-photos figcaption { font-size: 0.78rem; color: var(--slate); padding: 8px 10px; background: var(--paper); }
@media (max-width: 760px) { .timeline-photos { grid-template-columns: repeat(2, 1fr); } }

/* ---------- capability cards (5-up, About page) ---------- */
.capability-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.capability-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 16px; text-align: center; box-shadow: var(--shadow); }
.capability-card .icon-chip { margin: 0 auto 12px; }
.capability-card h3 { font-size: 0.95rem; }
@media (max-width: 900px) { .capability-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .capability-grid { grid-template-columns: repeat(2, 1fr); } }

/* ---------- full-bleed photo band (About page) ---------- */
.photo-band { width: 100%; aspect-ratio: 21/9; object-fit: cover; display: block; }
.photo-band-caption { background: var(--ink); color: #cbd8e8; font-size: 0.85rem; padding: 10px 24px; text-align: center; }


.founder-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 40px; align-items: center; }
.founder-grid img { border-radius: var(--radius); aspect-ratio: 3/4; object-fit: cover; width: 100%; box-shadow: var(--shadow-lg); }
@media (max-width: 820px) { .founder-grid { grid-template-columns: 1fr; } }

.pullquote { font-family: var(--font-display); font-size: 1.2rem; font-weight: 700; color: var(--ink); border-left: 4px solid var(--green); padding-left: 18px; margin: 26px 0; max-width: 58ch; }

/* ---------- blog cards ---------- */
.blog-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.blog-card { border-radius: var(--radius); overflow: hidden; background: var(--paper); box-shadow: var(--shadow); transition: transform 0.15s ease, box-shadow 0.15s ease; }
.blog-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.blog-card figure { margin: 0; background: #dbe4ee; }
.blog-card img { height: 190px; object-fit: cover; object-position: center 30%; width: 100%; display: block; }
.blog-card .card-body { padding: 16px 18px 20px; background: #f7f9fc; border-top: 1px solid var(--line); }
.blog-card time { font-family: var(--font-mono); font-size: 0.76rem; color: var(--slate-light); }
.blog-card h3 { margin: 8px 0 0; font-size: 1.02rem; }
.blog-card a.card-link { text-decoration: none; color: inherit; display: block; }
@media (max-width: 900px) { .blog-list { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .blog-list { grid-template-columns: 1fr; } }

/* ---------- article page ---------- */
.article-header { border-bottom: 1px solid var(--line); padding-bottom: 26px; margin-bottom: 32px; }
.article-meta { font-family: var(--font-mono); font-size: 0.82rem; color: var(--slate-light); display: flex; gap: 16px; flex-wrap: wrap; }
.article-body { max-width: 68ch; }
.article-body img { margin: 24px 0 6px; border-radius: var(--radius); }
.article-body figcaption { font-size: 0.82rem; color: var(--slate); margin-bottom: 20px; }
.article-body h2 { margin-top: 1.4em; }

/* ---------- form ---------- */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 720px; }
.form-grid .full { grid-column: 1 / -1; }
.form-grid label { display: block; font-size: 0.85rem; font-weight: 700; margin-bottom: 6px; color: var(--ink-soft); }
.form-grid input, .form-grid select, .form-grid textarea {
  width: 100%; padding: 11px 13px; border: 1.5px solid var(--line); border-radius: var(--radius-sm);
  font-family: var(--font-body); font-size: 0.95rem; background: #fff; color: var(--ink);
}
.form-grid input:focus, .form-grid select:focus, .form-grid textarea:focus { border-color: var(--blue); }
.form-grid textarea { min-height: 110px; resize: vertical; }
.honeypot-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
#form-error { color: #b91c1c; font-weight: 600; font-size: 0.9rem; min-height: 1.2em; }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }

/* ---------- contact band / footer ---------- */
.contact-band { background: linear-gradient(100deg, var(--ink) 0%, var(--blue-dark) 100%); color: #fff; }
.contact-band h2 { color: #fff; }
.contact-band p { color: rgba(255,255,255,0.92); }
.contact-band .btn-primary { background: var(--amber); color: var(--ink); }
.contact-band .btn-primary:hover { background: #fbbf24; color: var(--ink); }

.site-footer { background: var(--ink); color: #cbd8e8; padding: 46px 0 24px; font-size: 0.9rem; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; }
.footer-grid h3 { font-size: 0.94rem; font-family: var(--font-body); font-weight: 700; color: #fff; }
.footer-grid a { color: #b9c8dc; text-decoration: none; }
.footer-grid a:hover { color: var(--amber); }
.footer-legal { margin-top: 32px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,0.12); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; color: #93a5bd; }
.footer-legal a { color: #93a5bd; }
@media (max-width: 820px) { .footer-grid { grid-template-columns: 1fr 1fr; } }

/* ---------- whatsapp float ---------- */
.whatsapp-float {
  position: fixed; right: 20px; bottom: 20px; z-index: 50;
  background: var(--green); color: #fff; width: 56px; height: 56px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; text-decoration: none;
  box-shadow: var(--shadow-lg);
}
.whatsapp-float:hover { background: var(--green-dark); }
.whatsapp-float svg { width: 28px; height: 28px; fill: #fff; }

/* ---------- utility ---------- */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tag { display: inline-block; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.02em; color: var(--green-dark); background: var(--green-tint); padding: 3px 10px; border-radius: 999px; margin-right: 6px; }