/* ==========================================================================
   Page – Services hub + individual service pages
   Service pages share a structure; stage modifiers (.vg-svc--attract /
   --engage / --convert / --automate) give each family its own personality.
   ========================================================================== */

/* ---- Ecosystem: Marketing × Development × AI ---- */
.vg-eco__grid { display: grid; gap: var(--vg-space-5); align-items: stretch; }
@media (min-width: 900px) { .vg-eco__grid { grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; column-gap: var(--vg-space-5); } }
.vg-eco__pillar { display: grid; gap: .6rem; padding: var(--vg-space-5) 0; border-top: 1px solid var(--vg-offwhite); position: relative; }
.vg-eco__pillar::before { content: ""; position: absolute; top: -1px; left: 0; width: 2.5rem; height: 3px; background: var(--vg-green); }
.vg-eco__pillar:nth-child(5)::before { background: var(--vg-yellow); }
.vg-eco__index { font-family: var(--vg-font-display); font-size: var(--vg-text-sm); color: var(--vg-text-on-dark-muted); }
.vg-eco__title { margin: 0; font-size: var(--vg-text-2xl); text-transform: uppercase; letter-spacing: var(--vg-tracking-tight); }
.vg-eco__text { margin: 0; color: var(--vg-text-on-dark-muted); max-width: 32ch; }
.vg-eco__stages { font-family: var(--vg-font-display); font-size: var(--vg-text-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--vg-green); }
.vg-eco__x { font-family: var(--vg-font-display); font-size: var(--vg-text-3xl); font-weight: 500; color: var(--vg-grey-500); line-height: 1; text-align: center; }
@media (max-width: 899px) { .vg-eco__x { display: none; } }
.vg-eco__equals { display: flex; align-items: center; gap: var(--vg-space-5); margin-top: var(--vg-space-7); padding-top: var(--vg-space-5); border-top: 1px solid var(--vg-line-on-dark); }
.vg-eco__equals .vg-eco__x { display: block; color: var(--vg-green); font-size: var(--vg-text-2xl); }
.vg-eco__equals p { margin: 0; font-family: var(--vg-font-display); font-size: var(--vg-text-xl); font-weight: 700; letter-spacing: var(--vg-tracking-tight); }

/* ---- Service groups ---- */
.vg-svc-group .vg-split { row-gap: var(--vg-space-6); }

/* ---- Service page: problem ---- */
.vg-svc-problem__grid { display: grid; gap: var(--vg-space-5); }
@media (min-width: 900px) { .vg-svc-problem__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); column-gap: clamp(2rem, 6vw, 6rem); align-items: start; } }
.vg-svc-problem__title { margin: 0; font-size: var(--vg-text-2xl); max-width: 18ch; }
.vg-svc-problem__text { display: grid; gap: 1rem; font-size: var(--vg-text-md); color: var(--vg-text-muted); align-self: end; }
.vg-svc-problem__text p { margin: 0; }
/* Stage personalities */
.vg-svc--attract .vg-svc-problem { background: var(--vg-bg-muted); }
.vg-svc--engage .vg-svc-problem { background: var(--vg-black); color: var(--vg-offwhite); }
.vg-svc--engage .vg-svc-problem .vg-svc-problem__text, .vg-svc--engage .vg-svc-problem .vg-eyebrow, .vg-svc--engage .vg-svc-problem .vg-heading__index { color: var(--vg-text-on-dark-muted); }
.vg-svc--engage .vg-svc-problem .vg-heading__index::after { background: var(--vg-offwhite); }
.vg-svc--convert .vg-svc-problem { border-top: 4px solid var(--vg-black); background: var(--vg-bg-alt); }
.vg-svc--convert .vg-svc-problem__title { font-size: var(--vg-text-xl); }
@media (min-width: 900px) { .vg-svc--convert .vg-svc-problem__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } .vg-svc--convert .vg-svc-problem__text { columns: 2; column-gap: 2.5rem; display: block; } .vg-svc--convert .vg-svc-problem__text p + p { margin-top: 1rem; } }
.vg-svc--automate .vg-svc-problem { background: var(--vg-black); color: var(--vg-offwhite); }
.vg-svc--automate .vg-svc-problem .vg-svc-problem__text, .vg-svc--automate .vg-svc-problem .vg-eyebrow, .vg-svc--automate .vg-svc-problem .vg-heading__index { color: var(--vg-text-on-dark-muted); }
.vg-svc--automate .vg-svc-problem__title { font-family: var(--vg-font-display); }
.vg-svc--automate .vg-svc-problem__title::before { content: "> "; color: var(--vg-green); }

/* ---- Solution ---- */
.vg-svc-solution__text { max-width: 58ch; }
.vg-svc-solution__label { font-size: var(--vg-text-xs); font-weight: 600; letter-spacing: var(--vg-tracking-caps); text-transform: uppercase; color: var(--vg-text-muted); }

/* ---- What we do ---- */
.vg-features--2 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.vg-features--3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.vg-svc-extra--models .vg-feature { border-color: var(--vg-offwhite); }
.vg-svc-extra--models .vg-feature__text { color: var(--vg-text-on-dark-muted); }
.vg-svc-extra--models .vg-heading__index::after { background: var(--vg-offwhite); }

/* ---- Fit ---- */
.vg-svc-fit__who .vg-rows__item--single { display: flex; gap: .6rem; font-weight: 500; align-items: baseline; }
.vg-svc-fit__who .vg-rows__item--single::before { content: "→"; color: var(--vg-accent-text); flex: 0 0 auto; }
.vg-svc-fit .vg-split--even { row-gap: var(--vg-space-7); }

/* ---- AI advantage ---- */
.vg-svc-ai__points { display: grid; gap: .75rem; }
@media (min-width: 640px) { .vg-svc-ai__points { grid-template-columns: 1fr 1fr; } }
.vg-svc-ai__point { display: grid; gap: .5rem; padding: 1.25rem; border: 1px solid var(--vg-line); border-radius: var(--vg-radius-md); font-family: var(--vg-font-display); font-weight: 700; font-size: var(--vg-text-md); letter-spacing: var(--vg-tracking-tight); }
.vg-svc-ai__num { font-size: var(--vg-text-xs); font-weight: 500; color: var(--vg-accent-text); letter-spacing: .08em; }
.vg-section--dark .vg-svc-ai__point { border-color: var(--vg-line-on-dark); background: var(--vg-grey-900); }
.vg-svc--dev .vg-svc-ai__point { background: var(--vg-bg); border-left: 3px solid var(--vg-green); }
@media (min-width: 900px) { .vg-svc-ai .vg-split--rev { grid-template-columns: 6fr 6fr; } }

/* ---- Proof pending ---- */
.vg-svc-proof__pending { display: grid; gap: var(--vg-space-4); padding: clamp(1.25rem, 1rem + 1.5vw, 2rem); border-left: 3px solid var(--vg-green); background: var(--vg-bg); max-width: 72rem; }
@media (min-width: 900px) { .vg-svc-proof__pending { grid-template-columns: 1fr auto; align-items: center; column-gap: var(--vg-space-6); } }
.vg-svc-proof__pending p { margin: 0; color: var(--vg-text-muted); max-width: 64ch; }

/* ---- Related ---- */
.vg-svc-related .vg-split { align-items: start; }
.vg-svc-extra--models .vg-features { grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr)); }