/* homeground-routes.css — "The Ground Firms Up" hero.
   A first-timer's felt walk to a lit door; the ground firms up as each fear is
   answered. Committed dusk scene (both themes); the panel below adapts to theme.
   Scoped to .hg-ground. */

.hg-ground { --hg-gold: #C98A1B; --hg-indigo: #3730A3; }
@media (prefers-color-scheme: dark) { .hg-ground { --hg-gold: #F2C14E; --hg-indigo: #8B84E6; } }
:root[data-theme="light"] .hg-ground { --hg-gold: #C98A1B; --hg-indigo: #3730A3; }
:root[data-theme="dark"] .hg-ground { --hg-gold: #F2C14E; --hg-indigo: #8B84E6; }

.hg-ground .hg-ground-eyebrow { font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #7a5310; margin: 0 0 .5rem; text-align: center; }
.hg-ground h2 { font-family: 'IBM Plex Serif', Georgia, serif; font-weight: 700; font-size: clamp(1.7rem, 3.6vw, 2.5rem); line-height: 1.06; margin: 0 0 1.5rem; text-wrap: balance; letter-spacing: -.01em; color: var(--vc-color-text); text-align: center; }
.hg-ground .hg-ground-lede { font-size: 1.02rem; color: var(--vc-color-text-muted); margin: 0 0 1.4rem; max-width: 52ch; line-height: 1.5; }
/* Intro cards + centred closing line — replaced the single narrow lede column (2026-07-07). */
.hg-ground-cards { margin: 0; }
.hg-ground-cards-closer { text-align: center; max-width: 44rem; margin: 1.5rem auto 0.5rem; font-size: 1.05rem; line-height: 1.5; font-weight: 500; color: var(--vc-color-text); }
.hg-ground-more { text-align: center; }
.hg-ground-more-panel { text-align: left; }

.hg-ground-stage { border-radius: 18px; overflow: hidden; border: 1px solid var(--vc-color-border-subtle); box-shadow: 0 20px 46px -30px rgba(11,51,64,.5); max-width: 1080px; }
.hg-ground-scene-scroll { overflow-x: auto; background: #0B3340; }
.hg-ground-scene { display: block; width: 100%; min-width: 640px; height: auto; }

.hg-ground-walker, .hg-ground-lawyer { transition: transform .5s cubic-bezier(.4,0,.2,1), opacity .4s ease; }
.hg-ground-firm { transition: stroke-dashoffset .5s ease; }

.hg-ground-panel { background: var(--vc-color-surface); padding: 1.15rem 1.35rem 1.35rem; }
.hg-ground-toggle { display: inline-flex; background: var(--vc-color-bg-alt); border: 1px solid var(--vc-color-border-subtle); border-radius: 999px; padding: 3px; gap: 2px; margin-bottom: 1rem; }
.hg-ground-toggle button { font-family: inherit; font-size: .85rem; font-weight: 600; color: var(--vc-color-text-muted); background: transparent; border: 0; border-radius: 999px; padding: .4rem .95rem; cursor: pointer; transition: background .2s, color .2s; }
.hg-ground-toggle button[aria-pressed="true"] { background: var(--vc-color-text); color: var(--vc-color-surface); }
.hg-ground-toggle button:focus-visible { outline: 2px solid var(--hg-gold); outline-offset: 2px; }

.hg-ground-qa { min-height: 120px; }
.hg-ground-q { font-family: 'IBM Plex Serif', Georgia, serif; font-style: italic; font-size: clamp(1.15rem, 2.4vw, 1.5rem); line-height: 1.25; color: var(--vc-color-text); margin: 0 0 .55rem; text-wrap: balance; }
.hg-ground-q::before { content: "\201C"; color: var(--hg-gold); }
.hg-ground-q::after { content: "\201D"; color: var(--hg-gold); }
.hg-ground-a { font-size: 1.02rem; line-height: 1.55; color: var(--vc-color-text-muted); margin: 0; max-width: 62ch; }
.hg-ground-a b { color: var(--vc-color-text); font-weight: 600; }

.hg-ground-steps { display: flex; align-items: center; gap: .9rem; margin-top: 1.15rem; border-top: 1px solid var(--vc-color-border-subtle); padding-top: 1rem; }
.hg-ground-dots { display: flex; gap: .5rem; }
.hg-ground-dots button { width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--vc-color-border-subtle); background: var(--vc-color-bg-alt); color: var(--vc-color-text-muted); font-size: .75rem; font-weight: 700; cursor: pointer; font-variant-numeric: tabular-nums; transition: background .2s, color .2s, border-color .2s; }
.hg-ground-dots button[aria-current="true"] { background: var(--hg-gold); border-color: var(--hg-gold); color: #0B3340; }
.hg-ground-dots button:focus-visible { outline: 2px solid var(--hg-gold); outline-offset: 2px; }
.hg-ground-nav { margin-left: auto; display: flex; gap: .5rem; }
.hg-ground-nav button { font-family: inherit; font-size: .85rem; font-weight: 600; color: var(--vc-color-text); background: var(--vc-color-bg-alt); border: 1px solid var(--vc-color-border-subtle); border-radius: 8px; padding: .4rem .8rem; cursor: pointer; }
.hg-ground-nav button:disabled { opacity: .4; cursor: default; }
.hg-ground-nav button:focus-visible { outline: 2px solid var(--hg-gold); outline-offset: 2px; }
.hg-ground-closer { font-family: 'IBM Plex Serif', Georgia, serif; font-size: .95rem; color: var(--vc-color-text-muted); margin: 1rem 0 0; font-style: italic; }

/* the "our part in a level playing field" explainer — opens on hover (pointer),
   focus (keyboard) and tap (mobile focus); CSS-only, no toggle conflict */
.hg-ground-more { margin: -0.5rem 0 1.4rem; max-width: 62ch; }
.hg-ground-more-trigger { display: inline-flex; align-items: center; gap: .35rem; cursor: pointer; font-size: .9rem; font-weight: 600; color: #7a5310; background: none; border: 0; padding: 0; font-family: inherit; }
.hg-ground-more-trigger::after { content: "\203A"; transition: transform .2s ease; }
.hg-ground-more:hover .hg-ground-more-trigger::after, .hg-ground-more:focus-within .hg-ground-more-trigger::after { transform: rotate(90deg); }
.hg-ground-more-trigger:focus-visible { outline: 2px solid var(--hg-gold); outline-offset: 2px; border-radius: 4px; }
.hg-ground-more-panel { display: none; margin: .5rem 0 0; font-size: .98rem; line-height: 1.55; color: var(--vc-color-text-muted); }
.hg-ground-more:hover .hg-ground-more-panel, .hg-ground-more:focus-within .hg-ground-more-panel { display: block; }

@media (prefers-reduced-motion: reduce) { .hg-ground * { transition: none !important; } }
@media (max-width: 640px) { .hg-ground-steps { flex-wrap: wrap; } .hg-ground-nav { margin-left: 0; } }