diff --git a/docs/practices/index.md b/docs/practices/index.md
index cb198f0..450142b 100644
--- a/docs/practices/index.md
+++ b/docs/practices/index.md
@@ -6,13 +6,13 @@ icon: material/run
 
 Small, doable actions. Each one is something you can try today — no preparation, no expertise, just willingness.
 
-<div class="grid cards" markdown>
+<div class="grid cards gp-cards-practices" markdown>
 
-- [:material-nature-people: **Grounding in Nature**](grounding-in-nature.md) — Barefoot contact, sun gazing, sitting practice, melukat
-- [:material-food-apple: **Nourishing the Body**](nourishing-the-body.md) — Real food, herbal teas, fasting, natural materials, self-massage
-- [:material-meditation: **Daily Sadhana**](daily-sadhana.md) — Meditation, gratitude, shadow work, movement, visualization
-- [:material-phone-check: **Digital Wellness**](digital-wellness.md) — News fast, screen limits, curating what enters your mind
-- [:material-spa: **Spiritual Hygiene**](spiritual-hygiene.md) — Cleanse your space, set intention, sound as medicine
+- [:material-nature-people: **Grounding in Nature**](grounding-in-nature.md) Barefoot contact, sun gazing, sitting practice, melukat
+- [:material-food-apple: **Nourishing the Body**](nourishing-the-body.md) Real food, herbal teas, fasting, natural materials, self-massage
+- [:material-meditation: **Daily Sadhana**](daily-sadhana.md) Meditation, gratitude, shadow work, movement, visualization
+- [:material-phone-check: **Digital Wellness**](digital-wellness.md) News fast, screen limits, curating what enters your mind
+- [:material-spa: **Spiritual Hygiene**](spiritual-hygiene.md) Cleanse your space, set intention, sound as medicine
 
 </div>
 
diff --git a/docs/strategies/index.md b/docs/strategies/index.md
index 478bbd0..c146263 100644
--- a/docs/strategies/index.md
+++ b/docs/strategies/index.md
@@ -6,12 +6,12 @@ icon: material/chess-knight
 
 Big-picture frameworks for when a practice opens a door and you're ready to walk through. These are the patterns, mindsets, and structural shifts — the strategy beneath the tactics.
 
-<div class="grid cards" markdown>
+<div class="grid cards gp-cards-strategies" markdown>
 
-- [:material-shield-lock: **Digital Sovereignty**](digital-sovereignty.md) — Own your hardware, software, data, and networks
-- [:material-crowd: **Community Sovereignty**](community-sovereignty.md) — Parallel economies, PMAs, seva, freedom networks
-- [:material-compass: **Finding Your Purpose**](finding-purpose.md) — Passion, suffering into service, building your tribe
-- [:material-hand-heart: **Collective Awakening**](collective-awakening.md) — Mass intention, circles, crystallizing the vision
+- [:material-shield-lock: **Digital Sovereignty**](digital-sovereignty.md) Own your hardware, software, data, and networks
+- [:material-crowd: **Community Sovereignty**](community-sovereignty.md) Parallel economies, PMAs, seva, freedom networks
+- [:material-compass: **Finding Your Purpose**](finding-purpose.md) Passion, suffering into service, building your tribe
+- [:material-hand-heart: **Collective Awakening**](collective-awakening.md) Mass intention, circles, crystallizing the vision
 
 </div>
 
diff --git a/docs/stylesheets/extra.css b/docs/stylesheets/extra.css
index d40f48d..11f64c7 100644
--- a/docs/stylesheets/extra.css
+++ b/docs/stylesheets/extra.css
@@ -37,6 +37,17 @@
   --gp-ease:           cubic-bezier(0.22, 0.61, 0.36, 1);
   --gp-duration:       0.78s;
   --gp-distance:       20px;
+
+  /* ── Coherent green system (single source of truth for all greens) ──
+     Use these everywhere instead of ad-hoc rgba() values so the page reads
+     as one consistent sage family rather than a dozen different greens. */
+  --green-900:  #2f5641;   /* deepest — strong emphasis / completion */
+  --green-700:  #3d6b52;   /* deep sage — achievement, button border */
+  --green-600:  #4a8262;   /* primary sage — links, button text */
+  --green-500:  #5b9a76;   /* mid sage — hover */
+  --green-300:  #a8c5b6;   /* light sage — icons, soft accents */
+  --green-100:  #e4efe9;   /* faint sage — fills, tints */
+  --green-glow: rgba(74, 130, 98, 0.22);  /* unified shadow/glow tint */
 }
 
 /* Base atmosphere */
@@ -593,3 +604,258 @@ article h1, article h2, article h3 {
     display: none !important;
   }
 }
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   Grid card background images — Practices & Strategies index pages
+   Light: daisyUI-style image-top card  /  Dark: atmospheric full-bleed overlay.
+   Images served locally at ~70 KB each.
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+/* ── Grid spacing ──
+   NB: the <ul> is display:contents, so the real grid lives on the .grid.cards
+   div itself. Gap MUST be set there, not on the ul. */
+[class*="gp-cards-"].grid.cards {
+  gap: 2.4rem !important;
+}
+[class*="gp-cards-"].grid.cards > ul {
+  gap: 2.4rem;
+}
+
+/* ── Shared card shell ── */
+[class*="gp-cards-"].grid.cards ul li {
+  position: relative;
+  overflow: hidden;
+  border-radius: 16px;
+  isolation: isolate;
+  border: 1px solid var(--green-100);
+  transition: transform 0.35s var(--gp-ease), box-shadow 0.35s var(--gp-ease), border-color 0.3s ease;
+}
+
+/* Image layer — positioning & sizing set per theme below */
+[class*="gp-cards-"].grid.cards ul li::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  z-index: 0;
+  transition: transform 1.2s var(--gp-ease);
+}
+
+/* ── Full-card clickable overlay (covers entire li) ── */
+[class*="gp-cards-"].grid.cards ul li > a::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: 2;
+}
+
+/* ── No link underlines ── */
+[class*="gp-cards-"].grid.cards ul li a {
+  text-decoration: none !important;
+  background: transparent !important;
+}
+
+/* ── Explore button (outline pill — white fill, green border + text).
+   Visual only; clicks pass through to the card link. Subtle fill-on-hover. ── */
+[class*="gp-cards-"].grid.cards ul li::after {
+  content: "🌱 Explore";
+  position: absolute;
+  bottom: 1.1rem;
+  right: 1.1rem;
+  z-index: 3;
+  pointer-events: none;
+  background: var(--gp-surface);
+  color: var(--green-700);
+  border: 1.5px solid var(--green-600);
+  font-size: 0.72rem;
+  font-weight: 600;
+  padding: 0.32rem 0.82rem;
+  border-radius: 999px;
+  line-height: 1.4;
+  letter-spacing: 0.02em;
+  box-shadow: 0 1px 4px var(--green-glow);
+  transition: background 0.28s var(--gp-ease),
+              color 0.28s var(--gp-ease),
+              border-color 0.28s var(--gp-ease),
+              box-shadow 0.28s var(--gp-ease),
+              transform 0.28s var(--gp-ease);
+}
+
+/* Flashy-but-subtle: the outline button fills with sage green and lifts
+   when the card is hovered. */
+[class*="gp-cards-"].grid.cards ul li:hover::after {
+  background: var(--green-600);
+  color: #fff;
+  border-color: var(--green-600);
+  transform: translateY(-2px);
+  box-shadow: 0 6px 18px var(--green-glow);
+}
+
+/* ═══════════════════════════════════════════════════════════════════════
+   LIGHT THEME (default) — daisyUI image-top card
+   ═══════════════════════════════════════════════════════════════════════ */
+
+[class*="gp-cards-"].grid.cards ul li {
+  background: var(--gp-surface);
+  padding: 0 1.4rem 3.4rem 1.4rem;
+  padding-top: 176px;           /* 150px image + ~26px gap before title */
+  min-height: 310px;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+}
+
+[class*="gp-cards-"].grid.cards ul li::before {
+  height: 150px;
+  background-image: var(--card-img);
+}
+
+[class*="gp-cards-"].grid.cards ul li {
+  color: var(--gp-text-muted);
+  font-size: 0.88rem;
+  line-height: 1.55;
+}
+
+[class*="gp-cards-"].grid.cards ul li a {
+  color: var(--green-600);
+  display: block;
+  margin-bottom: 0.6rem !important;
+}
+
+[class*="gp-cards-"].grid.cards ul li strong {
+  color: var(--green-700);
+  font-size: 1rem;
+  font-weight: 650;
+}
+
+[class*="gp-cards-"].grid.cards ul li .twemoji {
+  color: var(--green-500);
+}
+
+/* Clean, minimal hover — title deepens within the same sage family
+   (no lilac/purple shift). */
+[class*="gp-cards-"].grid.cards ul li a:hover,
+[class*="gp-cards-"].grid.cards ul li a:hover strong {
+  color: var(--green-900);
+}
+
+/* Light hover */
+[class*="gp-cards-"].grid.cards ul li:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 14px 34px var(--green-glow);
+  border-color: var(--green-300);
+}
+
+[class*="gp-cards-"].grid.cards ul li:hover::before {
+  transform: scale(1.05);
+}
+
+/* ═══════════════════════════════════════════════════════════════════════
+   CARD IMAGE URLS — defined once via custom properties
+   ═══════════════════════════════════════════════════════════════════════ */
+
+.gp-cards-practices.grid.cards ul li:nth-child(1) { --card-img: url("/assets/images/cards/practices-grounding.jpg"); }
+.gp-cards-practices.grid.cards ul li:nth-child(2) { --card-img: url("/assets/images/cards/practices-nourishing.jpg"); }
+.gp-cards-practices.grid.cards ul li:nth-child(3) { --card-img: url("/assets/images/cards/practices-sadhana.jpg"); }
+.gp-cards-practices.grid.cards ul li:nth-child(4) { --card-img: url("/assets/images/cards/practices-digital.jpg"); }
+.gp-cards-practices.grid.cards ul li:nth-child(5) { --card-img: url("/assets/images/cards/practices-hygiene.jpg"); }
+
+.gp-cards-strategies.grid.cards ul li:nth-child(1) { --card-img: url("/assets/images/cards/strategies-digital-sov.jpg"); }
+.gp-cards-strategies.grid.cards ul li:nth-child(2) { --card-img: url("/assets/images/cards/strategies-community-sov.jpg"); }
+.gp-cards-strategies.grid.cards ul li:nth-child(3) { --card-img: url("/assets/images/cards/strategies-purpose.jpg"); }
+.gp-cards-strategies.grid.cards ul li:nth-child(4) { --card-img: url("/assets/images/cards/strategies-awakening.jpg"); }
+
+/* ═══════════════════════════════════════════════════════════════════════
+   DARK THEME (slate) — full-bleed atmospheric image + light text
+   ═══════════════════════════════════════════════════════════════════════ */
+
+[data-md-color-scheme="slate"] [class*="gp-cards-"].grid.cards ul li {
+  background: transparent;
+  padding: 1.3rem 1.3rem 3.4rem 1.3rem;
+  min-height: 170px;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+}
+
+[data-md-color-scheme="slate"] [class*="gp-cards-"].grid.cards ul li::before {
+  height: auto;
+  inset: 0;
+  z-index: -1;
+  background-image:
+    linear-gradient(160deg, rgba(14, 22, 16, 0.62) 0%, rgba(6, 14, 10, 0.74) 100%),
+    var(--card-img);
+}
+
+[data-md-color-scheme="slate"] [class*="gp-cards-"].grid.cards ul li {
+  color: rgba(255, 255, 255, 0.80);
+  border-color: rgba(255, 255, 255, 0.08);
+}
+
+[data-md-color-scheme="slate"] [class*="gp-cards-"].grid.cards ul li a,
+[data-md-color-scheme="slate"] [class*="gp-cards-"].grid.cards ul li strong {
+  color: rgba(255, 255, 255, 0.94);
+}
+
+[data-md-color-scheme="slate"] [class*="gp-cards-"].grid.cards ul li .twemoji {
+  color: rgba(255, 255, 255, 0.60);
+}
+
+[data-md-color-scheme="slate"] [class*="gp-cards-"].grid.cards ul li a:hover,
+[data-md-color-scheme="slate"] [class*="gp-cards-"].grid.cards ul li a:hover strong {
+  color: rgba(255, 255, 255, 1);
+}
+
+[data-md-color-scheme="slate"] [class*="gp-cards-"].grid.cards ul li:hover {
+  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.32);
+  border-color: rgba(255, 255, 255, 0.14);
+}
+
+/* Dark mode button — outline on glass; fills sage on hover */
+[data-md-color-scheme="slate"] [class*="gp-cards-"].grid.cards ul li::after {
+  background: rgba(255, 255, 255, 0.10);
+  color: #fff;
+  border-color: rgba(255, 255, 255, 0.55);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.30);
+}
+
+[data-md-color-scheme="slate"] [class*="gp-cards-"].grid.cards ul li:hover::after {
+  background: var(--green-600);
+  color: #fff;
+  border-color: var(--green-600);
+  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.38);
+}
+
+/* ═══════════════════════════════════════════════════════════════════════
+   RESPONSIVE & ACCESSIBILITY
+   ═══════════════════════════════════════════════════════════════════════ */
+
+@media (prefers-reduced-motion: reduce) {
+  [class*="gp-cards-"].grid.cards ul li,
+  [class*="gp-cards-"].grid.cards ul li::before,
+  [class*="gp-cards-"].grid.cards ul li::after {
+    transition: none;
+  }
+  [class*="gp-cards-"].grid.cards ul li:hover::before {
+    transform: none;
+  }
+}
+
+@media (max-width: 600px) {
+  [class*="gp-cards-"].grid.cards ul li {
+    min-height: 250px;
+    padding: 0 1.2rem 3.2rem 1.2rem;
+    padding-top: 130px;
+  }
+  [class*="gp-cards-"].grid.cards > ul {
+    gap: 1.4rem;
+  }
+  [data-md-color-scheme="slate"] [class*="gp-cards-"].grid.cards ul li {
+    min-height: 150px;
+    padding: 1.1rem 1.1rem 3.2rem 1.1rem;
+  }
+}