/* ValueLogics unified site theme — aligned to the Refactoring page */
:root {
  --vl-white: #ffffff;
  --vl-off: #f8f9fa;
  --vl-border: #e5e7eb;
  --vl-muted: #6b7280;
  --vl-body: #374151;
  --vl-heading: #111827;
  --vl-navy: #0d1b3e;
  --vl-navy-2: #132650;
  /* Brand accent standardized to teal (was guerrilla green) — single source of truth */
  --vl-green: #1d9e75;
  --vl-green-dark: #0f6e56;
  --vl-green-light: #e1f5ee;
  --vl-teal: #1d9e75;
  --vl-teal-dark: #0f6e56;
  --vl-gold: #c9a43a;
  --vl-gold-dark: #a07c1e;
  --vl-gold-light: #fbf5e6;
  --vl-red: #dc2626;

  /* Normalize the variable names used across older pages. */
  --white: var(--vl-white);
  --off: var(--vl-off);
  --bone: var(--vl-off);
  --border: var(--vl-border);
  --line: var(--vl-border);
  --muted: var(--vl-muted);
  --body: var(--vl-body);
  --heading: var(--vl-heading);
  --ink: var(--vl-heading);
  --navy: var(--vl-navy);
  --navy-2: var(--vl-navy-2);
  --green: var(--vl-green);
  --green-dk: var(--vl-green-dark);
  --green-lt: var(--vl-green-light);
  --teal: var(--vl-teal);
  --teal-dk: var(--vl-teal-dark);
  --amber: var(--vl-gold);
  --gold: var(--vl-gold);
  --gold-dk: var(--vl-gold-dark);
  --gold-lt: var(--vl-gold-light);
  --red: var(--vl-red);
}

html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--vl-white);
  color: var(--vl-body);
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6,
.hero-title, .section-title, .headline, .display-title {
  font-family: "Playfair Display", Georgia, "Times New Roman", serif !important;
  letter-spacing: -0.025em;
}

p, li, label, input, textarea, select, button {
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Shared text hierarchy. Existing section-specific white text remains intact. */
main p, main li { line-height: 1.7; }
.eyebrow, .section-label, .kicker, .overline {
  color: var(--vl-green-dark) !important;
  font-family: Inter, system-ui, sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: .11em !important;
  text-transform: uppercase;
}
.lead, .section-deck, .hero-sub { color: var(--vl-body); }

/* Common cards and panels across the site. */
.card, .svc-card, .proof-card, .gate-card, .success-card,
.pain-item, .shift-item, .esg-card, .metric, .stat,
[class*="-card"] {
  border-color: var(--vl-border);
}

/* Normalize common call-to-action treatments to the Refactoring palette. */
.btn-primary, .btn-green, a.btn-primary, a.btn-green,
button.btn-primary, button.btn-green, .vl-nav-cta {
  background: var(--vl-green) !important;
  border-color: var(--vl-green) !important;
  color: #fff !important;
}
.btn-primary:hover, .btn-green:hover, a.btn-primary:hover, a.btn-green:hover,
button.btn-primary:hover, button.btn-green:hover, .vl-nav-cta:hover {
  background: var(--vl-green-dark) !important;
  border-color: var(--vl-green-dark) !important;
  color: #fff !important;
}
.btn-outline, a.btn-outline, button.btn-outline {
  background: transparent !important;
  border-color: var(--vl-green) !important;
  color: var(--vl-green-dark) !important;
}
.btn-outline:hover, a.btn-outline:hover, button.btn-outline:hover {
  background: var(--vl-green-light) !important;
  color: var(--vl-green-dark) !important;
}

/* Form controls. */
input, textarea, select {
  color: var(--vl-heading);
  background: #fff;
  border-color: var(--vl-border);
}
input:focus, textarea:focus, select:focus, button:focus-visible, a:focus-visible {
  outline: 3px solid rgba(29, 158, 117, .28);
  outline-offset: 2px;
}

/* Keep the global shell identical on every page. */
.vl-global-header {
  background: var(--vl-navy) !important;
  border-bottom-color: var(--vl-teal) !important;
  font-family: Inter, system-ui, sans-serif !important;
}
.vl-logo-name, .vl-nav-links, .vl-nav-dropdown-menu { font-family: Inter, system-ui, sans-serif !important; }
.vl-site-footer {
  background: var(--vl-navy) !important;
  border-top-color: var(--vl-gold) !important;
  font-family: Inter, system-ui, sans-serif !important;
}

::selection { background: rgba(29, 158, 117, .22); color: var(--vl-navy); }

@media (max-width: 720px) {
  body { font-size: 16px; }
  h1, .hero-title { letter-spacing: -0.035em; }
}

/* 2026-07-30 full-site shell repair */
.vl-global-header{
  position:sticky!important;top:0!important;z-index:9999!important;
  min-height:76px!important;padding:12px 28px!important;
  display:flex!important;align-items:center!important;justify-content:space-between!important;
  gap:18px!important;background:#0d1b3e!important;border-bottom:2px solid #1d9e75!important;
  box-shadow:0 2px 12px rgba(0,0,0,.18)!important;overflow:visible!important;
}
.vl-global-header,.vl-global-header *{box-sizing:border-box!important}
.vl-logo{display:flex!important;align-items:center!important;gap:10px!important;flex:0 0 auto!important;text-decoration:none!important;min-width:max-content!important}
.vl-logo-mark{width:32px!important;height:32px!important;background:#1d9e75!important;border-radius:7px!important;display:flex!important;align-items:center!important;justify-content:center!important;flex:0 0 auto!important}
.vl-logo-name{display:block!important;font:800 .96rem/1.1 Inter,system-ui,sans-serif!important;color:#fff!important}
.vl-logo-name span{color:#c9a43a!important}
.vl-logo-badge{display:block!important;margin-top:3px!important;font:700 .61rem/1.1 Inter,system-ui,sans-serif!important;letter-spacing:.12em!important;text-transform:uppercase!important;color:#9fe1cb!important}
.vl-nav-links{display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:11px!important;flex-wrap:nowrap!important;white-space:nowrap!important;margin-left:auto!important}
.vl-nav-links>a,.vl-nav-parent{font:700 12px/1.2 Inter,system-ui,sans-serif!important;color:rgba(255,255,255,.86)!important;text-decoration:none!important;background:transparent!important;border:0!important;padding:8px 2px!important;margin:0!important;cursor:pointer!important}
.vl-nav-links>a:hover,.vl-nav-parent:hover{color:#fff!important;text-decoration:none!important}
.vl-nav-cta{display:inline-block!important;background:#1d9e75!important;color:#fff!important;padding:9px 13px!important;border-radius:6px!important}
.vl-nav-dropdown{position:relative!important;display:inline-flex!important;align-items:center!important}
.vl-nav-parent::after{content:' ▾';font-size:.8em}
.vl-nav-dropdown-menu{display:none!important;position:absolute!important;top:calc(100% + 8px)!important;left:0!important;min-width:210px!important;background:#0d1b3e!important;border:1px solid rgba(255,255,255,.16)!important;border-top:3px solid #c9a43a!important;border-radius:0 0 8px 8px!important;box-shadow:0 16px 30px rgba(0,0,0,.3)!important;padding:8px 0!important;z-index:10000!important}
.vl-nav-dropdown:hover .vl-nav-dropdown-menu,.vl-nav-dropdown:focus-within .vl-nav-dropdown-menu,.vl-nav-dropdown.is-open .vl-nav-dropdown-menu{display:block!important}
.vl-nav-dropdown-menu a{display:block!important;padding:10px 14px!important;color:rgba(255,255,255,.84)!important;font:700 13px/1.2 Inter,system-ui,sans-serif!important;text-decoration:none!important}
.vl-nav-dropdown-menu a:hover{background:rgba(29,158,117,.2)!important;color:#fff!important}
.vl-menu-toggle{display:none;background:transparent;border:1px solid rgba(255,255,255,.35);color:#fff;border-radius:6px;padding:8px 10px;font:800 13px/1 Inter,system-ui,sans-serif;cursor:pointer}

/* Preserve readable text on dark heroes. */
.hero .hero-sub,.hero p.hero-sub,[class*="hero"] .hero-sub{color:#cbd5e1!important}
.hero .hero-sub a{color:#fff!important}

@media(max-width:1180px){
  .vl-global-header{padding:12px 20px!important}
  .vl-menu-toggle{display:inline-block!important;margin-left:auto!important}
  .vl-nav-links{display:none!important;position:absolute!important;left:0!important;right:0!important;top:100%!important;background:#0d1b3e!important;border-top:1px solid rgba(255,255,255,.12)!important;padding:16px 20px 20px!important;flex-direction:column!important;align-items:flex-start!important;gap:4px!important;white-space:normal!important;box-shadow:0 12px 24px rgba(0,0,0,.25)!important}
  .vl-global-header.menu-open .vl-nav-links{display:flex!important}
  .vl-nav-links>a,.vl-nav-parent{font-size:15px!important;padding:9px 0!important;width:100%!important;text-align:left!important}
  .vl-nav-dropdown{display:block!important;width:100%!important}
  .vl-nav-dropdown-menu{position:static!important;display:none!important;width:100%!important;box-shadow:none!important;border:0!important;border-left:2px solid #c9a43a!important;border-radius:0!important;margin:4px 0 8px!important;padding:0 0 0 12px!important;background:transparent!important}
  .vl-nav-dropdown.is-open .vl-nav-dropdown-menu{display:block!important}
  .vl-nav-dropdown-menu a{padding:7px 0!important}
  .vl-nav-cta{width:auto!important;padding:10px 14px!important;margin-top:6px!important}
}
@media(max-width:620px){
  .vl-global-header{padding:12px 16px!important}
  .vl-logo-badge{display:none!important}
  .vl-logo-name{font-size:.92rem!important}
}

/* 2026-07-30 navigation stability, dark-page restoration, and hero alignment */
.vl-nav-dropdown-menu{
  top:100%!important;
  margin-top:0!important;
}
.vl-nav-dropdown:hover .vl-nav-dropdown-menu,
.vl-nav-dropdown:focus-within .vl-nav-dropdown-menu{
  display:block!important;
}
.vl-nav-dropdown::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:100%;
  height:6px;
}

/* Put the opening message in the same visual location on every marketing page. */
.vl-unified-hero{
  min-height:620px!important;
  margin:0!important;
  padding-top:72px!important;
  padding-bottom:72px!important;
  display:grid!important;
  align-items:center!important;
  align-content:center!important;
}
.vl-unified-hero > .wrap,
.vl-unified-hero > .container,
.vl-unified-hero > .inner,
.vl-unified-hero > [class*="hero-inner"]{
  width:min(1160px,calc(100% - 40px))!important;
  margin-left:auto!important;
  margin-right:auto!important;
}

/* Vibe Rescue is intentionally a dark product page. The global theme must not bleach it white. */
body.vl-vibe-rescue-page{
  background:
    radial-gradient(circle at 15% 0%,rgba(125,211,252,.14),transparent 32%),
    radial-gradient(circle at 100% 12%,rgba(167,243,208,.08),transparent 27%),
    #07111f!important;
  color:#f4f7fb!important;
}
body.vl-vibe-rescue-page main,
body.vl-vibe-rescue-page section{
  background-color:transparent;
}
body.vl-vibe-rescue-page main p,
body.vl-vibe-rescue-page main li,
body.vl-vibe-rescue-page .section-lead,
body.vl-vibe-rescue-page .micro{
  color:#a9b7c9;
}
body.vl-vibe-rescue-page h1,
body.vl-vibe-rescue-page h2,
body.vl-vibe-rescue-page h3,
body.vl-vibe-rescue-page h4{
  color:#f4f7fb;
}
body.vl-vibe-rescue-page .hero-card,
body.vl-vibe-rescue-page .step,
body.vl-vibe-rescue-page details,
body.vl-vibe-rescue-page [class*="card"]{
  background-color:rgba(18,36,58,.92);
  border-color:rgba(255,255,255,.12);
}
body.vl-vibe-rescue-page .btn-primary{
  background:#fff!important;
  border-color:#fff!important;
  color:#07111f!important;
}
body.vl-vibe-rescue-page .btn-secondary,
body.vl-vibe-rescue-page .btn-outline{
  color:#f4f7fb!important;
  border-color:rgba(255,255,255,.22)!important;
  background:rgba(255,255,255,.03)!important;
}

@media(max-width:760px){
  .vl-unified-hero{
    min-height:auto!important;
    padding-top:56px!important;
    padding-bottom:56px!important;
  }
  .vl-nav-dropdown::before{display:none}
}