/* ═══════════════════════════════════════════════════════════
   Vantara Solutions — shared stylesheet
   Source of truth: "Vantara Website.dc.html" (Claude Design)
   ═══════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; }
body { font-family: 'DM Sans', system-ui, sans-serif; background: #F5F5F0; color: #1A1830; line-height: 1.6; }
a { color: #C71F5E; text-decoration: none; }
a:hover { color: #a8184f; }
@keyframes pulse { 0%,100%{box-shadow:0 0 0 0 rgba(37,211,102,.4)} 50%{box-shadow:0 0 0 5px rgba(37,211,102,0)} }

.page { min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1; }

/* ─── Navigation ─── */
.site-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 999; height: 66px;
  display: flex; align-items: center; justify-content: space-between; padding: 0 5%;
  background: rgba(26,24,48,.96); backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand-mark {
  width: 34px; height: 34px; background: #C71F5E; border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Playfair Display', Georgia, serif; font-size: 1.15rem; font-weight: 700; color: #fff;
}
.brand-name { font-weight: 600; font-size: .9rem; color: #fff; letter-spacing: -.01em; }
.nav-links { display: flex; align-items: center; gap: 2rem; }
.nav-link { font-size: .85rem; font-weight: 500; color: rgba(255,255,255,.6); }
.nav-link:hover, .nav-link.active { color: #fff; }
.nav-right { display: flex; align-items: center; gap: .8rem; }
.nav-toggle {
  display: none; width: 40px; height: 40px; align-items: center; justify-content: center;
  background: none; border: 0; color: #fff; cursor: pointer;
}

/* ─── Buttons ─── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-size: .9rem; font-weight: 600; border-radius: 6px; padding: .82rem 2rem;
  transition: background .2s, border-color .2s, color .2s;
}
.btn-pink { background: #C71F5E; color: #fff; }
.btn-pink:hover { background: #a8184f; color: #fff; }
.btn-orange { background: #D4521A; color: #fff; }
.btn-orange:hover { background: #b84216; color: #fff; }
.btn-slate { background: #5C6B82; color: #fff; }
.btn-slate:hover { background: #48566B; color: #fff; }
.btn-wa { background: #25D366; color: #fff; }
.btn-wa:hover { background: #1fb558; color: #fff; }
.btn-outline-light { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.3); }
.btn-outline-light:hover { border-color: rgba(255,255,255,.65); color: #fff; }
.btn-outline-dark { background: transparent; color: #1A1830; border: 1.5px solid rgba(26,24,48,.22); }
.btn-outline-dark:hover { border-color: rgba(26,24,48,.5); color: #1A1830; }
.nav-cta { font-size: .82rem; padding: .52rem 1.2rem; }

/* ─── Text-link hover accents (base colors are inline) ─── */
.hov-white:hover  { color: #fff !important; }
.hov-pink:hover   { color: #C71F5E !important; }
.hov-pink-d:hover { color: #a8184f !important; }
.hov-orange:hover { color: #D4521A !important; }
.hov-orange-d:hover { color: #b84216 !important; }
.hov-slate-d:hover  { color: #3E4B60 !important; }

/* ─── Cards ─── */
.lift { transition: box-shadow .25s, transform .25s; }
.lift:hover { box-shadow: 0 10px 32px rgba(0,0,0,.1); transform: translateY(-4px); }

/* ─── Footer links ─── */
.flink { font-size: .82rem; color: rgba(255,255,255,.38); }
.flink:hover { color: rgba(255,255,255,.8); }
.fsocial { font-size: .75rem; color: rgba(255,255,255,.3); }
.fsocial:hover { color: rgba(255,255,255,.7); }
.fdomain { font-family: 'DM Mono', monospace; font-size: .75rem; color: rgba(255,255,255,.2); }
.fdomain:hover { color: rgba(255,255,255,.5); }

/* ─── Contact form ─── */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 18px; }
.form-field label {
  font-family: 'DM Mono', monospace; font-size: .64rem; letter-spacing: .12em;
  text-transform: uppercase; color: #5C6B82;
}
.form-field input, .form-field select, .form-field textarea {
  font-family: 'DM Sans', system-ui, sans-serif; font-size: .92rem; color: #1A1830;
  background: #fff; border: 1px solid #E8E4DF; border-radius: 6px;
  padding: .7rem .9rem; width: 100%; transition: border-color .2s;
}
.form-field textarea { resize: vertical; line-height: 1.6; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
  outline: none; border-color: #C71F5E;
}

/* ─── Responsive ───
   The section markup keeps the design's inline styles verbatim;
   these !important overrides collapse the fixed grids on smaller screens. */
@media (max-width: 1024px) {
  .g-3 { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 860px) {
  .g-2, .g-3, .g-split, .g-list { grid-template-columns: 1fr !important; }
  .g-2 { gap: 40px !important; }
  .g-split { gap: 32px !important; }
  .g-4 { grid-template-columns: 1fr 1fr !important; gap: 1.6rem 0 !important; }
  .stat-cell { border-left: none !important; padding: 0 1rem 0 0 !important; }
  .row-3 { grid-template-columns: 1fr !important; gap: 4px !important; }
  .form-grid { grid-template-columns: 1fr; gap: 0; }
  .svc-cell { padding: 24px 0 !important; border-left: none !important; }
}
@media (max-width: 800px) {
  .nav-links {
    display: none; position: absolute; top: 66px; left: 0; right: 0;
    flex-direction: column; align-items: flex-start; gap: 0;
    background: rgba(26,24,48,.98); padding: .4rem 5% 1rem;
    border-bottom: 1px solid rgba(255,255,255,.08);
  }
  .nav-links.open { display: flex; }
  .nav-links .nav-link { width: 100%; padding: .7rem 0; font-size: .95rem; }
  .nav-toggle { display: flex; }
}