/* ============================================================
   FINEX BABYLON — Public Website Stylesheet
   Clean White + Navy Blue + Gold — Professional Corporate Design
   ============================================================ */


:root {
  --navy:         #1b3a6b;
  --navy-dark:    #122952;
  --navy-light:   #2a4f8f;
  --gold:         #c4860a;
  --gold-hover:   #d9960c;
  --gold-light:   rgba(196,134,10,0.12);

  --white:        #ffffff;
  --bg:           #f4f7fd;
  --bg-card:      #ffffff;
  --border:       #dde4f0;

  --text-dark:    #0f1f3d;
  --text-mid:     #3d546e;
  --text-light:   #7a90aa;

  --green:        #15803d;
  --red:          #b91c1c;

  --font-head:    'Poppins', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;

  --container:    1180px;
  --radius:       8px;
  --radius-lg:    16px;
  --shadow-sm:    0 1px 4px rgba(27,58,107,0.08);
  --shadow:       0 4px 20px rgba(27,58,107,0.10);
  --shadow-lg:    0 8px 40px rgba(27,58,107,0.14);
  --trans:        all 0.22s ease;
}

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

.container { max-width: var(--container); margin: 0 auto; padding: 0 32px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

/* ========================
   TYPOGRAPHY
   ======================== */
h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--text-dark);
  line-height: 1.2;
  letter-spacing: -0.01em;
}
h1 { font-size: clamp(2rem, 5vw, 3.2rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); }
h3 { font-size: clamp(1.05rem, 2vw, 1.25rem); }

.accent { color: var(--gold); }

.section-label {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--gold);
  background: var(--gold-light);
  padding: 4px 12px;
  border-radius: 100px;
  margin-bottom: 16px;
}

/* ========================
   BUTTONS
   ======================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 28px;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--trans);
  border: 2px solid transparent;
  text-decoration: none;
  white-space: nowrap;
}
.btn-primary {
  background: var(--gold);
  color: #ffffff;
  border-color: var(--gold);
}
.btn-primary:hover {
  background: var(--gold-hover);
  border-color: var(--gold-hover);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(196,134,10,0.30);
}
.btn-outline {
  background: transparent;
  color: var(--navy);
  border-color: var(--navy);
}
.btn-outline:hover {
  background: var(--navy);
  color: #fff;
  transform: translateY(-1px);
}
.btn-outline-white {
  background: transparent;
  color: #fff;
  border-color: rgba(255,255,255,0.55);
}
.btn-outline-white:hover {
  background: rgba(255,255,255,0.15);
  border-color: #fff;
}
.btn-ghost {
  background: transparent;
  color: var(--gold);
  padding: 0;
  gap: 6px;
  font-size: 0.9rem;
  border: none;
}
.btn-ghost:hover { color: var(--gold-hover); }
.btn-ghost svg { transition: transform 0.2s; }
.btn-ghost:hover svg { transform: translateX(4px); }
.btn-sm { padding: 9px 18px; font-size: 0.82rem; }

/* ========================
   NAVBAR
   ======================== */
.navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  background: #fff;
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.3s;
}
.navbar.scrolled { box-shadow: var(--shadow); }
.navbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px;
  padding: 0;
}

.logo { display: flex; flex-direction: row; align-items: center; gap: 10px; text-decoration: none; }
.logo-text { display: flex; flex-direction: column; gap: 2px; }
img.logo-mark { width: 46px; height: 46px; max-width: 46px; min-width: 46px; border-radius: 50%; object-fit: cover; object-position: center; flex-shrink: 0; display: block; }
.logo-name {
  font-family: var(--font-head);
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--navy);
  line-height: 1;
}
.logo-name em { color: var(--gold); font-style: normal; }
.logo-tagline {
  font-size: 0.58rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  color: var(--text-light);
  text-transform: uppercase;
}

.nav-links { display: flex; align-items: center; gap: 32px; }
.nav-links a {
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--text-mid);
  transition: color 0.2s;
  position: relative;
  padding-bottom: 4px;
}
.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0;
  width: 0; height: 2px;
  background: var(--gold);
  transition: width 0.2s;
  border-radius: 2px;
}
.nav-links a:hover, .nav-links a.active { color: var(--navy); }
.nav-links a:hover::after, .nav-links a.active::after { width: 100%; }

.nav-actions { display: flex; align-items: center; gap: 10px; }

.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  padding: 6px;
  z-index: 1001;
  cursor: pointer;
}
.hamburger span {
  display: block;
  width: 22px; height: 2px;
  background: var(--navy);
  transition: var(--trans);
  border-radius: 2px;
}
.hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

.mobile-nav {
  display: none;
  position: fixed; inset: 0;
  background: #fff;
  z-index: 999;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;
}
.mobile-nav.open { display: flex; }
.mobile-nav a {
  font-family: var(--font-head);
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--text-mid);
  transition: color 0.2s;
}
.mobile-nav a:hover { color: var(--navy); }
.mobile-nav-bottom { position: absolute; bottom: 40px; display: flex; gap: 12px; }
.mobile-close {
  position: absolute; top: 20px; right: 24px;
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px 14px;
  font-size: 0.82rem;
  color: var(--text-mid);
  cursor: pointer;
}
.mobile-close:hover { border-color: var(--navy); color: var(--navy); }

/* ========================
   HERO
   ======================== */
.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 120px 0 80px;
  background: linear-gradient(140deg, #eef3fc 0%, #e8edf8 40%, #f4f7fd 100%);
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute;
  top: -150px; right: -150px;
  width: 600px; height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(196,134,10,0.09) 0%, transparent 70%);
  pointer-events: none;
}
.hero::after {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(27,58,107,0.06) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
}
.hero-content { position: relative; z-index: 1; max-width: 760px; }
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--navy);
  background: rgba(27,58,107,0.07);
  border: 1px solid rgba(27,58,107,0.16);
  padding: 6px 16px;
  border-radius: 100px;
  margin-bottom: 28px;
}
.hero h1 { color: var(--navy); margin-bottom: 22px; }
.hero h1 .accent { color: var(--gold); }
.hero-desc {
  font-size: 1.08rem;
  color: var(--text-mid);
  line-height: 1.85;
  margin-bottom: 40px;
  max-width: 580px;
}
.hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-scroll {
  position: absolute; bottom: 36px; left: 0;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  color: var(--text-light); font-size: 0.65rem; letter-spacing: 0.12em;
  text-transform: uppercase; z-index: 1;
  animation: scrollBounce 2.4s ease-in-out infinite;
}
.scroll-line { width: 1px; height: 36px; background: linear-gradient(to bottom, var(--gold), transparent); }
@keyframes scrollBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(7px); }
}

/* ========================
   STATS BAR
   ======================== */
.stats-bar { background: var(--navy); }
.stats-bar-inner { display: grid; grid-template-columns: repeat(4, 1fr); }
.stat-item {
  padding: 36px 24px;
  text-align: center;
  border-right: 1px solid rgba(255,255,255,0.1);
}
.stat-item:last-child { border-right: none; }
.stat-number {
  font-family: var(--font-head);
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--gold);
  display: block;
  line-height: 1;
  margin-bottom: 8px;
}
.stat-label {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.6);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* ========================
   SECTION HEADER
   ======================== */
.section-header { margin-bottom: 52px; }
.section-header.center { text-align: center; }
.section-header p {
  margin-top: 14px;
  color: var(--text-mid);
  font-size: 1.05rem;
  max-width: 560px;
  line-height: 1.8;
}
.section-header.center p { margin-left: auto; margin-right: auto; }
.section-header h2 { color: var(--navy); }

/* ========================
   SERVICES SECTION (Homepage)
   ======================== */
.services-section { padding: 90px 0; background: #fff; }
.services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.service-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  transition: var(--trans);
  position: relative;
  overflow: hidden;
}
.service-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--navy), var(--gold));
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.3s ease;
}
.service-card:hover { border-color: rgba(27,58,107,0.22); box-shadow: var(--shadow); transform: translateY(-3px); background: #fff; }
.service-card:hover::before { transform: scaleX(1); }
.service-icon { width: 44px; height: 44px; color: var(--navy); margin-bottom: 18px; opacity: 0.85; }
.service-card h3 { font-size: 1.05rem; margin-bottom: 10px; color: var(--text-dark); }
.service-card p { font-size: 0.875rem; color: var(--text-mid); line-height: 1.7; margin-bottom: 18px; }
.service-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.82rem; font-weight: 600; color: var(--gold);
  opacity: 0; transition: opacity 0.25s;
}
.service-card:hover .service-link { opacity: 1; }
.services-cta { text-align: center; margin-top: 44px; }

/* ========================
   BABYLON LEGACY SECTION
   ======================== */
.legacy-section { padding: 90px 0; background: var(--bg); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.legacy-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.legacy-text h2 { color: var(--navy); margin-bottom: 20px; }
.legacy-text p { color: var(--text-mid); margin-bottom: 18px; font-size: 1rem; line-height: 1.85; }
.legacy-text p:last-of-type { margin-bottom: 28px; }
.legacy-timeline { display: flex; flex-direction: column; }
.timeline-item { display: flex; gap: 18px; padding: 20px 0; border-bottom: 1px solid var(--border); }
.timeline-item:first-child { padding-top: 0; }
.timeline-item:last-child { border-bottom: none; padding-bottom: 0; }
.timeline-year {
  font-family: var(--font-head); font-size: 0.72rem; font-weight: 700;
  color: var(--gold); letter-spacing: 0.06em; min-width: 80px; padding-top: 2px;
}
.timeline-dot { display: none; }
.timeline-content h4 { font-size: 0.9rem; font-weight: 600; color: var(--navy); margin-bottom: 4px; }
.timeline-content p { font-size: 0.82rem; color: var(--text-mid); line-height: 1.6; }

/* ========================
   WHY CHOOSE US
   ======================== */
.why-section { padding: 90px 0; background: #fff; }
.why-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.why-card {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 36px 32px; transition: var(--trans);
}
.why-card:hover { box-shadow: var(--shadow); border-color: rgba(27,58,107,0.2); transform: translateY(-2px); }
.why-num { font-family: var(--font-head); font-size: 2.5rem; font-weight: 800; color: rgba(27,58,107,0.08); display: block; margin-bottom: 12px; line-height: 1; }
.why-card h3 { font-size: 1.1rem; margin-bottom: 12px; color: var(--navy); }
.why-card p { font-size: 0.9rem; color: var(--text-mid); line-height: 1.75; }

/* ========================
   CTA SECTION
   ======================== */
.cta-section { padding: 100px 0; background: var(--navy); text-align: center; }
.cta-section .section-label { background: rgba(196,134,10,0.18); color: var(--gold); }
.cta-section h2 { color: #fff; margin-bottom: 16px; }
.cta-section > .container > p { color: rgba(255,255,255,0.7); max-width: 480px; margin: 0 auto 36px; font-size: 1.05rem; }
.cta-btns { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }

/* ========================
   FOOTER
   ======================== */
footer { background: var(--navy-dark); padding: 72px 0 36px; border-top: 4px solid var(--gold); }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1.5fr; gap: 48px; margin-bottom: 56px; }
.footer-brand .logo-name { color: #fff; }
.footer-brand .logo-tagline { color: rgba(255,255,255,0.4); }
.footer-brand img.logo-mark { width: 60px; height: 60px; max-width: 60px; min-width: 60px; }
.footer-brand p { font-size: 0.875rem; color: rgba(255,255,255,0.55); line-height: 1.8; max-width: 280px; margin-top: 14px; }
.footer-col h4 { font-family: var(--font-body); font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.15em; color: var(--gold); margin-bottom: 18px; }
.footer-col ul { display: flex; flex-direction: column; gap: 9px; }
.footer-col a { font-size: 0.875rem; color: rgba(255,255,255,0.6); transition: color 0.2s; }
.footer-col a:hover { color: #fff; }
.footer-contact { display: flex; flex-direction: column; gap: 14px; }
.footer-contact-item { display: flex; align-items: flex-start; gap: 12px; font-size: 0.855rem; color: rgba(255,255,255,0.6); }
.footer-contact-item svg { flex-shrink: 0; color: var(--gold); margin-top: 2px; }
.footer-bottom {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.1);
  font-size: 0.8rem; color: rgba(255,255,255,0.35);
}
.footer-bottom-links { display: flex; gap: 22px; }
.footer-bottom a { color: rgba(255,255,255,0.35); transition: color 0.2s; }
.footer-bottom a:hover { color: rgba(255,255,255,0.7); }
.footer-gold { color: var(--gold); }

/* ========================
   INNER PAGE HERO
   ======================== */
.page-hero { padding: 140px 0 60px; background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%); position: relative; overflow: hidden; }
.page-hero::after { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(255,255,255,0.05) 1px, transparent 1px); background-size: 36px 36px; pointer-events: none; }
.breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 0.8rem; color: rgba(255,255,255,0.6); margin-bottom: 16px; position: relative; z-index: 1; }
.breadcrumb a { color: rgba(255,255,255,0.6); transition: color 0.2s; }
.breadcrumb a:hover { color: rgba(255,255,255,0.9); }
.breadcrumb-sep { color: rgba(255,255,255,0.4); }
.breadcrumb span { color: var(--gold); }
.page-hero h1 { position: relative; z-index: 1; margin-bottom: 12px; color: #fff; }
.page-hero p { color: rgba(255,255,255,0.75); font-size: 1.1rem; max-width: 560px; position: relative; z-index: 1; }

/* ========================
   SERVICES PAGE
   ======================== */
.services-page { padding: 60px 0 100px; background: #fff; }
.service-category { padding: 56px 0; border-bottom: 1px solid var(--border); }
.service-category:last-child { border-bottom: none; }
.category-header { display: flex; align-items: center; gap: 18px; margin-bottom: 32px; }
.cat-icon { width: 48px; height: 48px; background: rgba(27,58,107,0.08); border-radius: var(--radius); display: flex; align-items: center; justify-content: center; color: var(--navy); flex-shrink: 0; }
.category-header h2 { font-size: 1.5rem; margin: 0; color: var(--navy); }
.category-header h2::after { display: none; }
.service-cards-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.service-detail-card { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 26px; transition: var(--trans); }
.service-detail-card:hover { border-color: var(--navy); box-shadow: var(--shadow-sm); transform: translateY(-2px); background: #fff; }
.service-detail-card h3 { font-size: 0.95rem; margin-bottom: 10px; color: var(--navy); font-weight: 600; }
.service-detail-card p { font-size: 0.84rem; color: var(--text-mid); line-height: 1.7; margin-bottom: 14px; }
.service-tag { display: inline-block; font-size: 0.7rem; font-weight: 600; color: var(--navy); background: rgba(27,58,107,0.08); padding: 3px 10px; border-radius: 100px; letter-spacing: 0.04em; }
.service-price { display: inline-block; font-size: 0.72rem; font-weight: 700; color: var(--gold); background: rgba(196,134,10,0.1); padding: 3px 10px; border-radius: 100px; letter-spacing: 0.02em; margin-left: 6px; }

/* Announcement bar */
.announce-bar { background: var(--navy); color: #e8edf5; font-size: 0.82rem; text-align: center; padding: 10px 16px; display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }
.announce-bar strong { color: var(--gold); font-weight: 700; }
.announce-bar a { color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.announce-bar a:hover { color: var(--gold); }
.announce-badge { background: var(--gold); color: #fff; font-size: 0.68rem; font-weight: 700; padding: 2px 8px; border-radius: 100px; letter-spacing: 0.06em; text-transform: uppercase; flex-shrink: 0; }

/* ========================
   ABOUT PAGE
   ======================== */
.about-story { padding: 80px 0; background: #fff; }
.about-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 72px; align-items: start; }
.about-text h2 { color: var(--navy); margin-bottom: 22px; }
.about-text p { color: var(--text-mid); margin-bottom: 18px; font-size: 1rem; line-height: 1.85; }
.about-callout { border-left: 4px solid var(--gold); padding: 18px 24px; background: rgba(196,134,10,0.05); border-radius: 0 var(--radius) var(--radius) 0; margin: 28px 0; }
.about-callout p { font-family: var(--font-head); font-size: 1rem; color: var(--navy) !important; line-height: 1.65; font-style: italic; margin: 0; }
.about-sidebar { display: flex; flex-direction: column; gap: 20px; }
.about-credentials { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 28px; }
.about-credentials h3 { font-size: 0.68rem; font-family: var(--font-body); font-weight: 700; text-transform: uppercase; letter-spacing: 0.15em; color: var(--text-light); margin-bottom: 20px; }
.credential-list { display: flex; flex-direction: column; gap: 16px; }
.credential-item { display: flex; gap: 12px; align-items: flex-start; }
.cred-icon { width: 34px; height: 34px; background: rgba(27,58,107,0.08); border-radius: var(--radius); display: flex; align-items: center; justify-content: center; color: var(--navy); flex-shrink: 0; }
.credential-item h4 { font-size: 0.875rem; font-weight: 600; font-family: var(--font-body); margin-bottom: 2px; color: var(--text-dark); }
.credential-item p { font-size: 0.8rem; color: var(--text-mid); margin: 0; }
.about-cta-card { background: var(--navy); border-radius: var(--radius-lg); padding: 28px; text-align: center; }
.about-cta-card h3 { font-size: 1rem; margin-bottom: 8px; color: #fff; }
.about-cta-card p { font-size: 0.875rem; color: rgba(255,255,255,0.7); margin-bottom: 18px; }
.values-section { padding: 80px 0; background: var(--bg); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.values-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.value-card { background: #fff; padding: 28px; border: 1px solid var(--border); border-radius: var(--radius-lg); transition: var(--trans); }
.value-card:hover { box-shadow: var(--shadow); border-color: rgba(27,58,107,0.2); transform: translateY(-2px); }
.value-num { font-family: var(--font-head); font-size: 1.6rem; font-weight: 800; color: rgba(27,58,107,0.12); display: block; margin-bottom: 12px; line-height: 1; }
.value-card h3 { font-size: 1rem; margin-bottom: 10px; color: var(--navy); }
.value-card p { font-size: 0.875rem; color: var(--text-mid); line-height: 1.75; }
.team-section { padding: 80px 0; background: #fff; }
.approach-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.approach-item { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 26px 22px; text-align: center; transition: var(--trans); }
.approach-item:hover { box-shadow: var(--shadow-sm); border-color: var(--navy); }
.approach-icon { width: 50px; height: 50px; background: rgba(27,58,107,0.08); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--navy); margin: 0 auto 16px; }
.approach-item h3 { font-size: 0.95rem; margin-bottom: 8px; color: var(--navy); }
.approach-item p { font-size: 0.82rem; color: var(--text-mid); line-height: 1.7; }

/* ========================
   CONTACT PAGE
   ======================== */
.contact-section { padding: 80px 0; background: #fff; }
.contact-grid { display: grid; grid-template-columns: 1fr 1.5fr; gap: 64px; align-items: start; }
.contact-info h2 { color: var(--navy); margin-bottom: 14px; }
.contact-info > p { color: var(--text-mid); margin-bottom: 36px; }
.contact-details { display: flex; flex-direction: column; gap: 24px; }
.contact-detail { display: flex; gap: 16px; align-items: flex-start; }
.contact-icon { width: 44px; height: 44px; background: rgba(27,58,107,0.08); border-radius: var(--radius); display: flex; align-items: center; justify-content: center; color: var(--navy); flex-shrink: 0; }
.contact-detail h4 { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-light); font-family: var(--font-body); font-weight: 600; margin-bottom: 4px; }
.contact-detail p { font-size: 0.925rem; color: var(--text-dark); }
.contact-detail a { color: var(--text-dark); transition: color 0.2s; }
.contact-detail a:hover { color: var(--navy); }
.contact-form-wrap { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 40px; }
.contact-form-wrap h3 { font-size: 1.25rem; margin-bottom: 6px; color: var(--navy); }
.contact-form-wrap > p { font-size: 0.875rem; color: var(--text-mid); margin-bottom: 28px; }
.form-group { margin-bottom: 18px; }
.form-group label { display: block; font-size: 0.8rem; font-weight: 600; color: var(--text-dark); margin-bottom: 7px; }
.form-group input, .form-group select, .form-group textarea {
  width: 100%; background: #fff; border: 1.5px solid var(--border);
  border-radius: var(--radius); padding: 11px 14px;
  font-family: var(--font-body); font-size: 0.9rem; color: var(--text-dark);
  transition: border-color 0.2s; outline: none;
  appearance: none; -webkit-appearance: none;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--navy); box-shadow: 0 0 0 3px rgba(27,58,107,0.08); }
.form-group input::placeholder, .form-group textarea::placeholder { color: var(--text-light); }
.form-group textarea { resize: vertical; min-height: 110px; }
.form-group select option { background: #fff; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-note { font-size: 0.78rem; color: var(--text-light); margin-top: 12px; line-height: 1.6; }
.alert { padding: 14px 18px; border-radius: var(--radius); font-size: 0.875rem; margin-bottom: 16px; display: none; }
.alert-success { background: rgba(21,128,61,0.08); border: 1px solid rgba(21,128,61,0.25); color: var(--green); }
.alert-error { background: rgba(185,28,28,0.08); border: 1px solid rgba(185,28,28,0.25); color: var(--red); }

/* ========================
   LEGAL PAGES
   ======================== */
.legal-section { padding: 72px 0 110px; background: #fff; }
.legal-content { max-width: 780px; }
.legal-content h2 { font-size: 1.3rem; margin: 40px 0 14px; padding-top: 20px; border-top: 1px solid var(--border); color: var(--navy); }
.legal-content h2:first-child { border-top: none; margin-top: 0; padding-top: 0; }
.legal-content h2::after { display: none; }
.legal-content h3 { font-size: 1rem; margin: 22px 0 9px; font-weight: 600; color: var(--text-dark); }
.legal-content p { color: var(--text-mid); font-size: 0.94rem; line-height: 1.85; margin-bottom: 14px; }
.legal-content ul, .legal-content ol { padding-left: 22px; color: var(--text-mid); font-size: 0.94rem; line-height: 1.85; margin-bottom: 16px; }
.legal-content ul { list-style: disc; }
.legal-content ol { list-style: decimal; }
.legal-content li { margin-bottom: 6px; }
.legal-content a { color: var(--navy); font-weight: 500; }
.legal-content a:hover { color: var(--gold); }
.legal-meta { font-size: 0.8rem; color: var(--text-light); margin-bottom: 40px; }
.legal-highlight { background: rgba(27,58,107,0.05); border: 1px solid rgba(27,58,107,0.15); border-left: 4px solid var(--navy); border-radius: 0 var(--radius) var(--radius) 0; padding: 18px 22px; margin: 22px 0; }
.legal-highlight p { color: var(--navy) !important; margin: 0; font-weight: 500; }

/* ========================
   ANIMATIONS
   ======================== */
.js .fade-up { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; }
.fade-up.visible { opacity: 1; transform: translateY(0); }
.fade-up.delay-1 { transition-delay: 0.1s; }
.fade-up.delay-2 { transition-delay: 0.2s; }
.fade-up.delay-3 { transition-delay: 0.3s; }

/* ========================
   RESPONSIVE
   ======================== */
@media (max-width: 1100px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .legacy-grid { gap: 48px; }
  .about-grid { gap: 48px; }
}
@media (max-width: 900px) {
  .services-grid, .why-grid { grid-template-columns: repeat(2, 1fr); }
  .service-cards-grid { grid-template-columns: repeat(2, 1fr); }
  .approach-grid { grid-template-columns: repeat(2, 1fr); }
  .values-grid { grid-template-columns: 1fr 1fr; }
  .about-grid, .contact-grid, .legacy-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .nav-links, .nav-actions .btn { display: none; }
  .hamburger { display: flex; }
  .stats-bar-inner { grid-template-columns: repeat(2, 1fr); }
  .stat-item:nth-child(2n) { border-right: none; }
  .services-grid, .why-grid { grid-template-columns: 1fr; }
  .contact-form-wrap { padding: 24px 20px; }
  .form-row { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; gap: 12px; text-align: center; }
  .hero-ctas .btn { width: 100%; justify-content: center; }
}
@media (max-width: 600px) {
  .container { padding: 0 16px; }
  .values-grid, .approach-grid, .service-cards-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   CLIENT PORTAL, WHATSAPP & FORM ADDITIONS
   ============================================================ */

/* Navbar "Client Login" — quieter than the primary CTA beside it */
.nav-portal {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-head);
  font-size: 0.8rem; font-weight: 600; letter-spacing: 0.02em;
  color: var(--navy);
  padding: 9px 14px; margin-right: 4px;
  border: 1px solid var(--border); border-radius: var(--radius);
  transition: var(--trans);
}
.nav-portal:hover { color: var(--gold); border-color: var(--gold); background: var(--gold-light); }

/* Footer phone and e-mail are links now, but should look like the text around them */
.footer-contact-item a { color: inherit; transition: color 0.2s; }
.footer-contact-item a:hover { color: var(--gold); }

/* Floating WhatsApp button */
.wa-float {
  position: fixed; right: 20px; bottom: 20px; z-index: 90;
  width: 54px; height: 54px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #25d366; color: #fff;
  box-shadow: 0 4px 16px rgba(37,211,102,0.4);
  transition: transform 0.2s, box-shadow 0.2s;
}
.wa-float svg { width: 28px; height: 28px; }
.wa-float:hover { transform: scale(1.08); box-shadow: 0 6px 22px rgba(37,211,102,0.55); }

/* Honeypot: off-screen rather than display:none, which bots skip */
.hp-field {
  position: absolute !important;
  left: -9999px; top: auto;
  width: 1px; height: 1px; overflow: hidden;
}

@media (max-width: 768px) {
  .nav-portal { display: none; }            /* it lives in the mobile menu instead */
  .wa-float { right: 16px; bottom: 16px; width: 50px; height: 50px; }
  .wa-float svg { width: 26px; height: 26px; }
}

/* Respect a reduced-motion preference for the button's hover growth */
@media (prefers-reduced-motion: reduce) {
  .wa-float, .wa-float:hover { transition: none; transform: none; }
}

/* The mobile menu sets every link to 1.8rem; the buttons at the bottom should not inherit it
   (it went unnoticed while there was only one button down there). */
.mobile-nav-bottom {
  width: 100%; padding: 0 24px;
  flex-wrap: wrap; justify-content: center;
}
.mobile-nav-bottom .btn { font-size: 0.9rem; }

/* ============================================================
   HERO & ANNOUNCEMENT BAR CORRECTIONS
   ============================================================ */

/* .hero is display:flex, which makes .container a flex item. Flex items size to their
   content, so the container collapsed to roughly 620px instead of the 1180px it should be,
   margin:0 auto then centred that narrow block, and .hero-content's max-width never
   applied — hence the wide empty gutters on both sides. */
.hero > .container { width: 100%; }

/* The navbar is position:fixed, so the announcement bar (next in the flow) sat underneath
   it and was never visible. Push it clear of the navbar and drop the top padding that the
   following section no longer needs. */
.announce-bar { margin-top: 68px; }
.announce-bar + .hero { padding-top: 56px; min-height: calc(100vh - 108px); }
.announce-bar + .page-hero { padding-top: 72px; }

@media (max-width: 768px) {
  .announce-bar + .hero { min-height: auto; padding-top: 48px; }
}

/* Centred hero: with nothing occupying the right-hand side, a single centred column
   balances the space instead of leaving it all on one side. */
.hero-content { margin: 0 auto; text-align: center; }
.hero-desc { margin-left: auto; margin-right: auto; }
.hero-ctas { justify-content: center; }

/* The scroll cue was pinned to left:0, i.e. the viewport edge, where it was clipped.
   Centre it with auto margins rather than a transform, which the bounce animation owns. */
.hero-scroll { left: 0; right: 0; margin: 0 auto; width: max-content; }

/* On phones the hero is no longer a full viewport tall, so the decorative scroll cue
   would sit on top of the call-to-action buttons. It has no purpose at this size. */
@media (max-width: 768px) {
  .hero-scroll { display: none; }
}

/* ============================================================
   SERVICE SEARCH
   ============================================================ */
.nav-search-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 38px; padding: 0 14px;
  background: #fff; color: var(--text-mid);
  border: 1px solid var(--border); border-radius: var(--radius);
  font-size: 0.82rem; font-weight: 500; cursor: pointer; transition: var(--trans);
}
.nav-search-btn:hover { border-color: var(--navy); color: var(--navy); }
.nav-search-btn kbd {
  font-family: var(--font-body); font-size: 0.68rem; font-weight: 600;
  color: var(--text-light); background: var(--bg); border: 1px solid var(--border);
  border-radius: 4px; padding: 1px 5px;
}
@media (max-width: 1040px) { .nav-search-btn kbd, .nav-search-btn .nav-search-label { display: none; } }
@media (max-width: 1040px) { .nav-search-btn { padding: 0 10px; } }

.search-overlay {
  position: fixed; inset: 0; z-index: 1200;
  background: rgba(15, 31, 61, 0.55);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 12vh 16px 16px;
}
.search-panel {
  width: 100%; max-width: 640px;
  background: #fff; border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); overflow: hidden;
  animation: searchIn 0.18s ease;
}
@keyframes searchIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

.search-field { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--border); color: var(--text-light); }
.search-input {
  flex: 1; border: 0; outline: 0; background: none;
  font-family: var(--font-body); font-size: 1rem; color: var(--text-dark);
}
.search-input::-webkit-search-cancel-button { display: none; }
.search-close {
  background: var(--bg); border: 1px solid var(--border); border-radius: 5px;
  padding: 3px 8px; font-family: var(--font-body); font-size: 0.68rem;
  font-weight: 600; color: var(--text-light); cursor: pointer;
}
.search-close:hover { border-color: var(--navy); color: var(--navy); }

.search-status { padding: 12px 18px 0; font-size: 0.78rem; color: var(--text-light); margin: 0; }
.search-status a { color: var(--gold); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

.search-results { max-height: min(52vh, 420px); overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 2px; }
.search-result {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
  padding: 11px 12px; border-radius: var(--radius); text-decoration: none;
}
.search-result:hover, .search-result.is-active { background: var(--bg); }
.search-result-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.search-result-title { font-family: var(--font-head); font-size: 0.9rem; font-weight: 600; color: var(--navy); }
.search-result-desc { font-size: 0.78rem; line-height: 1.5; color: var(--text-mid); }
.search-result-cat {
  flex-shrink: 0; align-self: center;
  font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--gold); background: var(--gold-light); padding: 3px 9px; border-radius: 100px;
}
.search-result mark { background: rgba(196,134,10,0.22); color: inherit; border-radius: 2px; padding: 0 1px; }

.search-foot { padding: 12px 18px; border-top: 1px solid var(--border); background: var(--bg); font-size: 0.78rem; color: var(--text-light); }
.search-foot a { color: var(--gold); font-weight: 600; }

@media (max-width: 600px) {
  .search-overlay { padding: 0; }
  .search-panel { max-width: none; height: 100%; border-radius: 0; }
  .search-results { max-height: none; flex: 1; }
  .search-result-cat { display: none; }
}

/* Two phone lines on the contact page */
.phone-tag {
  font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text-light); background: var(--bg); border: 1px solid var(--border);
  padding: 1px 6px; border-radius: 100px; vertical-align: middle; margin-left: 4px;
}
.btn-wa svg { flex-shrink: 0; }
.footer-phones { display: flex; flex-direction: column; gap: 2px; }

/* [hidden] is (0,1,0) and so is .search-overlay, so the display:flex above won
   and the panel never actually hid. These win on specificity. */
.search-overlay[hidden], .search-results[hidden] { display: none; }

/* ── Hero on laptop and desktop ───────────────────────────────────────────────
   At 1280-1600 the 760px column left very wide empty margins. Give the hero a
   wider measure and let the headline grow with the viewport. */
@media (min-width: 1024px) {
  .hero-content { max-width: 940px; }
  .hero h1 { font-size: clamp(2.6rem, 4.6vw, 4.1rem); }
  .hero-desc { max-width: 660px; font-size: 1.12rem; }
}
/* Short laptop screens (1366x768 and similar) need the vertical rhythm tightened
   so the call-to-action still lands above the fold. */
@media (min-width: 1024px) and (max-height: 820px) {
  .announce-bar + .hero { padding-top: 36px; padding-bottom: 56px; }
  .hero-badge { margin-bottom: 20px; }
  .hero-desc { margin-bottom: 30px; }
}

/* ── Keyboard focus ──────────────────────────────────────────────────────────
   The stylesheet previously styled only input focus, so anyone navigating by
   keyboard had no idea where they were. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 3px;
}
.btn-primary:focus-visible { outline-color: var(--navy); }
.search-result:focus-visible { outline-offset: -2px; }

/* ── Reduced motion ──────────────────────────────────────────────────────────
   Covers the scroll-reveal, the smooth scrolling and the search panel, not just
   the floating button. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .fade-up { opacity: 1; transform: none; transition: none; }
  .search-panel { animation: none; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}


/* ── Hero banner ─────────────────────────────────────────────────────────────
   The first screen was a headline, one line of text and two buttons adrift in
   a lot of empty space. Filled with things that earn their place: the services
   people actually arrive looking for, and a hero sized so the navy figures
   band below closes the banner inside the first screen. */

.hero-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 30px auto 0;
  padding: 0;
  list-style: none;
  max-width: 880px;
}
.hero-chips a {
  display: inline-block;
  padding: 8px 17px;
  border-radius: 100px;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--navy);
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  transition: var(--trans);
  white-space: nowrap;
}
.hero-chips a:hover {
  border-color: var(--gold);
  color: var(--gold);
  transform: translateY(-1px);
}

@media (min-width: 1024px) {
  /* Sized so the navy figures band lands just inside the fold. */
  .announce-bar + .hero { min-height: calc(100svh - 260px); padding-top: 22px; padding-bottom: 28px; }
  .hero-content { max-width: 1000px; }
  /* the band below is the cue now, and the arrow collided with the chips */
  .hero-scroll { display: none; }
}
@media (min-width: 1440px) {
  .hero h1 { font-size: clamp(3.2rem, 4.4vw, 4.6rem); }
  .hero-desc { max-width: 720px; font-size: 1.16rem; }
}
@media (max-width: 600px) {
  .hero-chips { gap: 8px; margin-top: 24px; }
  .hero-chips a { padding: 7px 13px; font-size: 0.76rem; }
}

/* Laptop screens (1366x768 and similar): the banner and the figures band have
   to share about 650px, so tighten the rhythm just there. */
@media (min-width: 1024px) and (max-height: 820px) {
  .hero h1 { font-size: clamp(2.4rem, 3.5vw, 3.3rem); }
  .hero-badge { margin-bottom: 16px; }
  .hero-desc { margin-bottom: 24px; font-size: 1.04rem; }
  .hero-chips { margin-top: 20px; }
  .stat-item { padding: 24px 20px; }
}


/* Keyboard users can jump past the navbar; invisible until focused. */
.skip-link{position:absolute;left:-9999px;top:0;z-index:2000;padding:.7rem 1.2rem;background:var(--navy,#0f2942);color:#fff;font-weight:600;border-radius:0 0 8px 0;text-decoration:none}
.skip-link:focus{left:0}