/* =============================================
   VILAWOR INVESTMENT — MAIN DESIGN SYSTEM
   ============================================= */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400;1,600&family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --navy:      #0B1F33;
  --navy-mid:  #122840;
  --navy-light:#1a3a52;
  --emerald:   #0F6D4D;
  --emerald-l: #138f64;
  --gold:      #C9A227;
  --gold-l:    #e0b830;
  --ivory:     #F8F5EE;
  --ivory2:    #F0ECE3;
  --white:     #FFFFFF;
  --ink:       #1A1A1A;
  --slate:     #4A5568;
  --muted:     #718096;
  --bone:      #E2DDD4;
  --shadow-sm: 0 2px 8px rgba(11,31,51,.08);
  --shadow-md: 0 8px 32px rgba(11,31,51,.12);
  --shadow-lg: 0 20px 60px rgba(11,31,51,.18);
  --radius:    4px;
  --radius-lg: 12px;
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body:    'Inter', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', monospace;
  --container:    1200px;
  --transition:   all 0.3s cubic-bezier(0.4,0,0.2,1);
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; font-size:16px; }
body {
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,video,svg { display:block; max-width:100%; }
a { color:inherit; text-decoration:none; }
button { cursor:pointer; font-family:inherit; }
ul,ol { list-style:none; }

.container { max-width:var(--container); margin:0 auto; padding:0 32px; }
@media(max-width:768px){ .container{ padding:0 20px; } }

/* ── TYPOGRAPHY ── */
h1,h2,h3,h4,h5,h6 { font-family:var(--font-display); line-height:1.15; letter-spacing:-.02em; }
h1 { font-size:clamp(44px,6vw,80px); }
h2 { font-size:clamp(32px,4vw,52px); }
h3 { font-size:clamp(22px,2.5vw,30px); }
h4 { font-size:clamp(18px,2vw,22px); }
p  { line-height:1.75; color:var(--slate); }

/* ── SECTION BASE ── */
section { padding:100px 0; }
@media(max-width:768px){ section{ padding:64px 0; } }

.section-label {
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--gold);
  display:flex; align-items:center; gap:12px;
  margin-bottom:18px;
}
.section-label::before {
  content:''; width:32px; height:2px; background:var(--gold);
}

/* ── BUTTONS ── */
.btn {
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-body); font-weight:600; font-size:14px;
  letter-spacing:.04em; text-transform:uppercase;
  padding:14px 28px; border-radius:var(--radius);
  transition:var(--transition); border:2px solid transparent;
  text-decoration:none; position:relative; overflow:hidden;
}
.btn::before {
  content:''; position:absolute; inset:0;
  background:rgba(255,255,255,.1);
  transform:scaleX(0); transform-origin:left;
  transition:transform .3s ease;
}
.btn:hover::before { transform:scaleX(1); }

.btn-primary {
  background:var(--gold); color:var(--navy);
  border-color:var(--gold);
}
.btn-primary:hover {
  background:var(--gold-l); border-color:var(--gold-l);
  transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(201,162,39,.35);
}
.btn-outline {
  background:transparent; color:var(--white);
  border-color:rgba(255,255,255,.4);
}
.btn-outline:hover {
  background:var(--white); color:var(--navy);
  border-color:var(--white);
  transform:translateY(-2px);
}
.btn-navy {
  background:var(--navy); color:var(--white);
  border-color:var(--navy);
}
.btn-navy:hover {
  background:var(--navy-mid); transform:translateY(-2px);
  box-shadow:var(--shadow-md);
}
.btn-ghost {
  background:transparent; color:var(--navy);
  border-color:var(--bone);
}
.btn-ghost:hover {
  border-color:var(--gold); color:var(--gold);
  transform:translateY(-2px);
}
.btn svg { width:18px; height:18px; transition:transform .3s ease; }
.btn:hover svg { transform:translateX(4px); }

/* ── NAVIGATION (Single Row: Logo | Nav | CTA) ── */
#site-header {
  position:fixed; top:0; left:0; right:0; z-index:999;
  background:rgba(248, 245, 238, 0.92);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(226, 221, 212, 0.8);
  transition:var(--transition);
}
#site-header.scrolled {
  background:rgba(255, 255, 255, 0.98);
  box-shadow:0 4px 20px rgba(11,31,51,0.06);
  border-bottom-color:var(--bone);
}

/* Single-row layout: Logo (left) - Nav (center) - CTA (right) */
.header-inner {
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 0; gap:24px;
}
.nav-logo {
  display:flex; align-items:center; gap:14px;
  font-family:var(--font-display); font-weight:700;
  font-size:20px; color:var(--navy); letter-spacing:.03em;
  flex-shrink:0;
}
.nav-logo img { height:52px; width:auto; }
.nav-logo-img { height:52px; width:auto; display:block; }

/* Navbar: centered in the row */
#primary-navigation {
  flex:1; display:flex; justify-content:center;
}
.primary-nav { display:flex; align-items:center; gap:6px; }
.primary-nav > li { position:relative; }
.primary-nav > li > a {
  font-size:14px; font-weight:600; color:var(--navy);
  padding:8px 14px; border-radius:var(--radius);
  transition:var(--transition); display:block; white-space:nowrap;
}
.primary-nav > li > a:hover,
.primary-nav > li.current-menu-item > a {
  color:var(--gold); background:rgba(201,162,39,.1);
}
.primary-nav > li.has-dropdown > a::after {
  content:''; display:inline-block; width:6px; height:6px;
  border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translateY(-2px); margin-left:6px;
  transition:transform .3s ease;
}
.primary-nav > li.has-dropdown:hover > a::after { transform:rotate(-135deg) translateY(-2px); }

.dropdown-menu {
  position:absolute; top:calc(100% + 8px); left:0;
  background:var(--white); border:1px solid var(--bone);
  border-radius:var(--radius-lg); padding:10px;
  min-width:240px; opacity:0; visibility:hidden;
  transform:translateY(-8px);
  transition:opacity .25s ease, transform .25s ease, visibility .25s;
  box-shadow:0 12px 36px rgba(11,31,51,0.12);
}
.primary-nav > li.has-dropdown:hover .dropdown-menu {
  opacity:1; visibility:visible; transform:translateY(0);
}
.dropdown-menu a {
  display:block; padding:10px 16px; font-size:13.5px; font-weight:500;
  color:var(--slate); border-radius:var(--radius);
  transition:var(--transition);
}
.dropdown-menu a:hover { background:var(--ivory); color:var(--gold); padding-left:22px; }

.nav-cta { flex-shrink:0; }

/* Dropdown touch support */
.primary-nav > li.has-dropdown:focus-within .dropdown-menu {
  opacity:1; visibility:visible; transform:translateY(0);
}

/* ── RESPONSIVE ── */
@media (max-width: 900px) {
  .header-inner { gap:16px; padding:12px 0; }
  .nav-logo-img { height:40px; }
  .primary-nav { gap:0; }
  .primary-nav > li > a { font-size:12px; padding:7px 10px; }
  .nav-cta { font-size:12px; padding:10px 16px; }
}

@media (max-width: 640px) {
  .nav-logo-img { height:32px; }
  .primary-nav > li > a { font-size:11.5px; padding:7px 8px; }
  .nav-cta { display:none; }
}

/* ── FOOTER ── */
.site-footer {
  background:var(--navy); color:var(--white);
  border-top:3px solid var(--gold);
}
.footer-top { padding:72px 0 56px; }
.footer-grid {
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1.2fr;
  gap:40px;
}
.footer-brand p { font-size:14px; color:rgba(255,255,255,.55); line-height:1.8; margin-top:18px; max-width:28ch; }
.footer-logo-img { height:48px; width:auto; display:block; }
.footer-col h5 {
  font-family:var(--font-mono); font-size:11px;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--gold); margin-bottom:22px;
}
.footer-col ul { display:grid; gap:12px; }
.footer-col ul a { font-size:14px; color:rgba(255,255,255,.6); transition:var(--transition); }
.footer-col ul a:hover { color:var(--gold); padding-left:6px; }
.footer-contact-item { display:flex; gap:12px; align-items:flex-start; margin-bottom:14px; }
.footer-contact-item svg { flex-shrink:0; margin-top:2px; }
.footer-contact-item span,
.footer-contact-item a { font-size:14px; color:rgba(255,255,255,.6); line-height:1.6; transition:var(--transition); }
.footer-contact-item a:hover { color:var(--gold); }

.footer-socials { display:flex; gap:12px; margin-top:20px; }
.footer-socials a {
  width:40px; height:40px; border-radius:50%;
  border:1px solid rgba(255,255,255,.15);
  display:flex; align-items:center; justify-content:center;
  color:rgba(255,255,255,.6); transition:var(--transition);
}
.footer-socials a:hover {
  background:var(--gold); border-color:var(--gold); color:var(--navy);
  transform:translateY(-3px);
}

.footer-bottom {
  border-top:1px solid rgba(255,255,255,.08);
  padding:24px 0;
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:12px;
}
.footer-bottom p { font-size:13px; color:rgba(255,255,255,.35); margin:0; }
.footer-bottom a { color:var(--gold); }

@media(max-width:960px){
  .footer-grid { grid-template-columns:1fr 1fr; gap:36px; }
}
@media(max-width:600px){
  .footer-grid { grid-template-columns:1fr; }
}

/* ── CARDS BASE ── */
.card {
  background:var(--white); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm); border:1px solid var(--bone);
  transition:var(--transition); overflow:hidden;
}
.card:hover { transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:transparent; }

/* ── HERO SHARED (Light Ivory Elegance) ── */
.page-hero {
  background:linear-gradient(180deg, var(--ivory) 0%, #FFFFFF 100%);
  color:var(--ink);
  padding:150px 0 70px;
  position:relative; overflow:hidden;
  border-bottom:1px solid var(--bone);
}
.page-hero::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(circle at 50% 30%, rgba(201,162,39,0.06) 0%, transparent 70%);
}
.page-hero-content { position:relative; text-align:center; }
.page-hero h1 { color:var(--navy); margin-bottom:16px; font-weight:700; }
.page-hero p { font-size:18px; color:var(--slate); max-width:56ch; margin:0 auto; line-height:1.65; }

/* ── BREADCRUMB ── */
.breadcrumb {
  display:flex; align-items:center; gap:8px;
  font-family:var(--font-mono); font-size:12px;
  color:var(--muted); margin-bottom:24px;
  justify-content:center;
}
.breadcrumb a { color:var(--navy); font-weight:600; transition:var(--transition); }
.breadcrumb a:hover { color:var(--gold); }
.breadcrumb span { color:var(--bone); }

/* ── UTILITY ── */
.text-gold    { color:var(--gold); }
.text-navy    { color:var(--navy); }
.text-emerald { color:var(--emerald); }
.bg-ivory     { background:var(--ivory); }
.bg-navy      { background:var(--navy); }
.text-center  { text-align:center; }
.mt-4  { margin-top:16px; }
.mt-8  { margin-top:32px; }
.mt-12 { margin-top:48px; }
.mb-4  { margin-bottom:16px; }
.mb-8  { margin-bottom:32px; }
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:32px; }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:32px; }
.grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:28px; }
@media(max-width:1024px){ .grid-4 { grid-template-columns:1fr 1fr; } }
@media(max-width:768px){
  .grid-2,.grid-3,.grid-4 { grid-template-columns:1fr; }
}

/* ── FORMS ── */
.form-group { margin-bottom:20px; }
.form-group label {
  display:block; font-size:13px; font-weight:600;
  color:var(--navy); margin-bottom:6px; letter-spacing:.02em;
}
.form-control {
  width:100%; padding:13px 16px;
  border:1.5px solid var(--bone); border-radius:var(--radius);
  font-family:var(--font-body); font-size:15px; color:var(--ink);
  background:var(--white); transition:var(--transition);
}
.form-control:focus {
  outline:none; border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(201,162,39,.15);
}
.form-control::placeholder { color:var(--muted); }
textarea.form-control { resize:vertical; min-height:140px; }
select.form-control { appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%234A5568' stroke-width='1.5' fill='none'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
@media(max-width:600px){ .form-row { grid-template-columns:1fr; } }

/* ── TAGS / BADGES ── */
.badge {
  display:inline-block; font-family:var(--font-mono);
  font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  padding:5px 12px; border-radius:100px;
}
.badge-gold   { background:rgba(201,162,39,.12); color:var(--gold); }
.badge-navy   { background:rgba(11,31,51,.1);    color:var(--navy); }
.badge-emerald{ background:rgba(15,109,77,.1);   color:var(--emerald); }

/* ── FORM MESSAGE ── */
.form-message { display:none; margin-top:16px; padding:14px 18px; border-radius:8px; font-size:14px; font-weight:500; }
.form-message.success { background:rgba(15,109,77,.1); color:var(--emerald); border:1px solid rgba(15,109,77,.2); display:block; }
.form-message.error   { background:rgba(200,30,30,.08); color:#c81e1e; border:1px solid rgba(200,30,30,.2); display:block; }

/* ── PAGINATION ── */
.page-numbers { display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:8px; font-size:14px; font-weight:600;
  color:var(--navy); border:1px solid var(--bone); margin:0 4px; transition:var(--transition); }
.page-numbers.current,.page-numbers:hover { background:var(--gold); color:var(--navy); border-color:var(--gold); }

/* ── STAGGERED CHILDREN ── */
.grid-3 > *:nth-child(1){ transition-delay:.0s; }
.grid-3 > *:nth-child(2){ transition-delay:.1s; }
.grid-3 > *:nth-child(3){ transition-delay:.2s; }
.grid-3 > *:nth-child(4){ transition-delay:.1s; }
.grid-3 > *:nth-child(5){ transition-delay:.2s; }
.grid-3 > *:nth-child(6){ transition-delay:.3s; }

/* ==========================================================================
   MOBILE & TABLET RESPONSIVE OPTIMIZATIONS
   ========================================================================== */

/* ── Container & Global Spacing on Small Screens ── */
@media (max-width: 768px) {
  .container {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  section {
    padding: 50px 0 !important;
  }

  .page-hero {
    padding: 110px 0 45px !important;
  }

  .page-hero h1 {
    font-size: 32px !important;
    line-height: 1.2 !important;
  }

  h1 { font-size: 32px !important; line-height: 1.2 !important; }
  h2 { font-size: 26px !important; line-height: 1.25 !important; }
  h3 { font-size: 20px !important; }
  
  .gold-line {
    margin: 14px 0 !important;
  }
  .gold-line.centered {
    margin: 14px auto !important;
  }
}

/* ── Home Hero Mobile Layout ── */
@media (max-width: 991px) {
  .home-hero-inner {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }

  .home-hero {
    padding-top: 130px !important;
    padding-bottom: 60px !important;
    min-height: auto !important;
  }

  .hero-actions {
    flex-direction: column !important;
    width: 100% !important;
  }

  .hero-actions .btn {
    width: 100% !important;
    justify-content: center !important;
  }

  .hero-stats {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
  }

  .hero-stat {
    padding: 16px 12px !important;
  }

  .hero-stat-num {
    font-size: 28px !important;
  }
}

/* ── Services Strip (Horizontal Scroll / Stack on Mobile) ── */
@media (max-width: 768px) {
  .services-strip {
    grid-template-columns: 1fr !important;
  }
  .strip-service {
    border-right: none !important;
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
    padding: 24px 20px !important;
  }
}

/* ── 2-Column Side-by-Side Sections (Who We Are, Why Us, Services Details) ── */
@media (max-width: 991px) {
  /* Reset inline grids with 2 columns to 1 column */
  section div[style*="grid-template-columns:1fr 1fr"],
  section div[style*="grid-template-columns: 1fr 1fr"],
  section div[style*="grid-template-columns:1.2fr .8fr"],
  section div[style*="grid-template-columns:.8fr 1.2fr"] {
    grid-template-columns: 1fr !important;
    gap: 36px !important;
  }

  .grid-3 {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
}

/* ── Specific Component Mobile Tweaks ── */
@media (max-width: 768px) {
  /* Values grid on About page */
  div[style*="grid-template-columns:repeat(5,1fr)"] {
    grid-template-columns: 1fr !important;
    border-radius: 8px !important;
  }
  .value-card {
    border-right: none !important;
    border-bottom: 1px solid var(--bone) !important;
    padding: 24px 20px !important;
  }

  /* Industries 4-col grid */
  div[style*="grid-template-columns:repeat(4,1fr)"] {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* Team members 3-col grid */
  div[style*="grid-template-columns:repeat(3,1fr)"] {
    grid-template-columns: 1fr !important;
  }

  /* Process steps timeline */
  .process-steps {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  .process-connector {
    display: none !important;
  }

  /* Contact page grid & form */
  .contact-grid {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }
  .form-row {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }

  /* Vision/Mission split section on About */
  div[style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
  div[style*="border-right:1px solid rgba(255,255,255,.08)"] {
    border-right: none !important;
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
    padding: 40px 24px !important;
  }

  /* Services page lists inside cards */
  ul[style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
  
  /* Filter tabs horizontal scroll on mobile */
  .filter-tabs {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    padding-bottom: 10px !important;
    -webkit-overflow-scrolling: touch;
  }
  .filter-tab {
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }

  /* Footer responsiveness */
  .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 36px !important;
  }

  .footer-bottom .container {
    flex-direction: column !important;
    text-align: center !important;
    gap: 8px !important;
  }
}

/* ── Mobile Touch Polish & Button Target Size ── */
@media (max-width: 768px) {
  button, .btn, a.btn {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
  }
}