diff --git a/manifest.yaml b/manifest.yaml
index e8f6f6b..ab42920 100644
--- a/manifest.yaml
+++ b/manifest.yaml
@@ -339,43 +339,6 @@ css:
       }
     }
 
-    /* ============================================================
-       Explicit responsive layout (authored CSS — NOT purged).
-       The host Tailwind JIT does not reliably scan a theme's override
-       templates, so sm:/md:/lg: grid variants declared there can be
-       dropped from the build (a grid then never expands on desktop
-       and never collapses on mobile). These media-query rules own the
-       column counts deterministically and always collapse to a single
-       column on phones.
-       ============================================================ */
-    .noir-cols { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
-    @media (min-width: 640px) {
-      .noir-cols-2, .noir-cols-3, .noir-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
-    }
-    @media (min-width: 1024px) {
-      .noir-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
-      .noir-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
-    }
-    /* Grids that stay two-up on phones (galleries, stat rows, footer links). */
-    .noir-cols-2up { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
-    @media (min-width: 768px) {
-      .noir-cols-2up-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
-      .noir-cols-2up-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
-    }
-    /* Media/text split — one column on phones, two from the tablet width. */
-    .noir-split { display: grid; grid-template-columns: 1fr; gap: 2.5rem; }
-    @media (min-width: 768px) { .noir-split { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
-    /* Gap modifiers (used alongside any grid class above). */
-    .noir-gap-sm { gap: 0.75rem; }
-    .noir-gap-lg { gap: 2rem; }
-
-    /* Hero vertical rhythm — replaces the unreliable min-h-[75vh] arbitrary
-       class so the masthead has bounded, predictable breathing room instead
-       of collapsing to nothing or ballooning to 75vh of empty space. */
-    .noir-hero-pad { padding-top: 3.5rem; padding-bottom: 3.5rem; }
-    @media (min-width: 768px) { .noir-hero-pad { padding-top: 5rem; padding-bottom: 5rem; } }
-    @media (min-width: 1024px) { .noir-hero-pad { padding-top: 6.5rem; padding-bottom: 6.5rem; } }
-
     /* Empty-media graceful state — the demo seed ships no images, so any
        media frame that renders an empty <img> must not balloon into a grey
        box or show broken-image chrome. Images never exceed their column. */
diff --git a/templates/overrides/noir/blog-hero.ninjatpl b/templates/overrides/noir/blog-hero.ninjatpl
index d8466d9..3bb49be 100644
--- a/templates/overrides/noir/blog-hero.ninjatpl
+++ b/templates/overrides/noir/blog-hero.ninjatpl
@@ -6,7 +6,7 @@
 {% if subtitle %}<p class="noir-body mt-3 text-lg" style="color:hsl(var(--muted-foreground));">{{ subtitle }}</p>{% endif %}
 </div>
 {% if posts %}
-<div class="mt-10 noir-cols noir-cols-3">
+<div class="mt-10 grid grid-cols-1 gap-6 md:grid-cols-3">
 {% for post in posts %}
 <article class="group flex flex-col{% if forloop.First %} md:col-span-3 md:flex-row md:items-stretch md:gap-6{% endif %}">
 {% if post.featured_image_url %}<a href="{{ post.url }}" class="mb-3 block overflow-hidden bg-muted grayscale{% if forloop.First %} md:mb-0 md:w-1/2{% endif %}">{% img post.featured_image_url alt=post.title class="aspect-video h-full w-full object-cover transition-transform duration-300 group-hover:scale-105" %}</a>{% endif %}
diff --git a/templates/overrides/noir/contact-card.ninjatpl b/templates/overrides/noir/contact-card.ninjatpl
index cd0077e..fd0ad63 100644
--- a/templates/overrides/noir/contact-card.ninjatpl
+++ b/templates/overrides/noir/contact-card.ninjatpl
@@ -3,7 +3,7 @@
   <div class="mx-auto max-w-4xl px-4">
     {% if heading %}<h2 class="noir-heading text-3xl md:text-4xl" style="color:hsl(var(--foreground));">{{ heading }}</h2>{% endif %}
     {% if description %}<p class="noir-body mt-3 max-w-2xl text-lg" style="color:hsl(var(--muted-foreground));">{{ description }}</p>{% endif %}
-    <div class="mt-10 noir-cols {% if columns == 3 %}noir-cols-3{% elif columns == 1 %}{% else %}noir-cols-2{% endif %}">
+    <div class="mt-10 grid grid-cols-1 gap-4 {% if columns == 3 %}sm:grid-cols-2 lg:grid-cols-3{% elif columns == 1 %}{% else %}sm:grid-cols-2{% endif %}">
       {% for channel in channels %}
       <div class="noir-file flex items-start gap-4 p-5">
         {% if channel.icon %}<span class="inline-flex h-10 w-10 shrink-0 items-center justify-center border border-border bg-primary/10 text-primary"><svg class="h-5 w-5" aria-hidden="true"><use href="/icons/{{ channel.icon|split:":"|first }}.svg#{{ channel.icon|split:":"|last }}"></use></svg></span>{% endif %}
diff --git a/templates/overrides/noir/event-list.ninjatpl b/templates/overrides/noir/event-list.ninjatpl
index a16726b..8502e9b 100644
--- a/templates/overrides/noir/event-list.ninjatpl
+++ b/templates/overrides/noir/event-list.ninjatpl
@@ -4,7 +4,7 @@
     {% if heading %}<h2 class="noir-heading text-3xl md:text-4xl" style="color:hsl(var(--foreground));">{{ heading }}</h2>{% endif %}
     {% if intro %}<p class="noir-body mt-3 max-w-2xl text-lg" style="color:hsl(var(--muted-foreground));">{{ intro }}</p>{% endif %}
     {% if layout == "cards" %}
-    <div class="mt-10 noir-cols noir-cols-3">
+    <div class="mt-10 grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
       {% for event in events %}{% if not (hidePast and event.past) %}
       <article class="noir-file flex flex-col overflow-hidden{% if event.past %} opacity-60{% endif %}">
         {% if event.media %}<div class="aspect-video overflow-hidden bg-muted grayscale">{% img event.media alt=event.title class="h-full w-full object-cover" %}</div>{% endif %}
diff --git a/templates/overrides/noir/feature-grid.ninjatpl b/templates/overrides/noir/feature-grid.ninjatpl
index 617e5ac..4fa0e05 100644
--- a/templates/overrides/noir/feature-grid.ninjatpl
+++ b/templates/overrides/noir/feature-grid.ninjatpl
@@ -4,7 +4,7 @@
     {% if eyebrow %}<p class="text-center noir-label" style="color:hsl(var(--primary));">{{ eyebrow }}</p>{% endif %}
     {% if heading %}<h2 class="noir-heading mt-2 text-center text-3xl md:text-4xl" style="color:hsl(var(--foreground));">{{ heading }}</h2>{% endif %}
     {% if intro %}<p class="noir-body mx-auto mt-4 max-w-2xl text-center text-lg" style="color:hsl(var(--muted-foreground));">{{ intro }}</p>{% endif %}
-    <div class="mt-10 noir-cols {% if columns == 2 %}noir-cols-2{% elif columns == 4 %}noir-cols-4{% else %}noir-cols-3{% endif %}">
+    <div class="mt-10 grid grid-cols-1 gap-6 sm:grid-cols-2 {% if columns == 2 %}lg:grid-cols-2{% elif columns == 4 %}lg:grid-cols-4{% else %}lg:grid-cols-3{% endif %}">
       {% for item in items %}
       <div class="{% if layout == "card" %}noir-file p-6 text-card-foreground transition-colors{% elif layout == "centered" %}text-center{% endif %}">
         {% if item.icon %}<div class="mb-3 text-primary{% if layout == "centered" %} flex justify-center{% endif %}"><svg class="h-7 w-7" aria-hidden="true"><use href="/icons/{{ item.icon|split:":"|first }}.svg#{{ item.icon|split:":"|last }}"></use></svg></div>{% endif %}
diff --git a/templates/overrides/noir/featured-posts.ninjatpl b/templates/overrides/noir/featured-posts.ninjatpl
index cceffce..da91912 100644
--- a/templates/overrides/noir/featured-posts.ninjatpl
+++ b/templates/overrides/noir/featured-posts.ninjatpl
@@ -2,7 +2,7 @@
 <section data-block-override="noir:featured-posts" class="py-12 md:py-16 bg-background text-foreground{% if class %} {{ class }}{% endif %}">
 <div class="mx-auto max-w-6xl px-4">
 {% if heading %}<h2 class="noir-heading mb-8 text-2xl md:text-3xl" style="color:hsl(var(--foreground));">{{ heading }}</h2>{% endif %}
-<div class="noir-cols {% if columns == 2 %}noir-cols-2{% elif columns == 4 %}noir-cols-4{% else %}noir-cols-3{% endif %}">
+<div class="grid grid-cols-1 gap-6 sm:grid-cols-2 {% if columns == 2 %}lg:grid-cols-2{% elif columns == 4 %}lg:grid-cols-4{% else %}lg:grid-cols-3{% endif %}">
 {% for post in posts %}
 <article class="noir-file group flex flex-col overflow-hidden">
 {% if showFeaturedImage and post.featured_image_url %}<a href="{{ post.url }}" class="block aspect-video overflow-hidden bg-muted grayscale">{% img post.featured_image_url alt=post.title class="h-full w-full object-cover transition-transform duration-300 group-hover:scale-105" %}</a>{% endif %}
diff --git a/templates/overrides/noir/gallery.ninjatpl b/templates/overrides/noir/gallery.ninjatpl
index b80ac15..eac267a 100644
--- a/templates/overrides/noir/gallery.ninjatpl
+++ b/templates/overrides/noir/gallery.ninjatpl
@@ -1,5 +1,5 @@
 {# noir override — gallery; preserves layout, gap, columns, lightbox, images[].src/.alt/.caption, data-bn-gallery, data-lightbox, data-bn-gallery-item, data-caption, {% img %} calls, and the full lightbox IIFE verbatim. Only grid tiles restyled (square hairline frames, grayscale). #}
-{% with layout=layout|default:"grid" gap=gap|default:"md" cols=columns|default:3 %}<div data-block-override="noir:gallery" class="bn-gallery my-8{% if class %} {{ class }}{% endif %}" data-bn-gallery data-lightbox="{% if lightbox %}true{% else %}false{% endif %}"><div class="{% if layout == "carousel" %}flex snap-x snap-mandatory overflow-x-auto pb-2 {% if gap == "sm" %}gap-2{% elif gap == "lg" %}gap-6{% else %}gap-4{% endif %}{% elif layout == "masonry" %}columns-2 {% if cols == 4 %}md:columns-4{% elif cols == 2 %}md:columns-2{% else %}md:columns-3{% endif %} {% if gap == "sm" %}gap-2{% elif gap == "lg" %}gap-6{% else %}gap-4{% endif %}{% else %}noir-cols-2up {% if cols == 4 %}noir-cols-2up-4{% elif cols == 2 %}{% else %}noir-cols-2up-3{% endif %} {% if gap == "sm" %}noir-gap-sm{% elif gap == "lg" %}noir-gap-lg{% endif %}{% endif %}">{% for image in images %}<a href="{{ image.src|mediaURL }}" data-bn-gallery-item data-caption="{{ image.caption|default:"" }}" class="noir-hairline group relative block overflow-hidden bg-muted grayscale transition hover:grayscale-0 focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 {% if layout == "carousel" %}w-64 shrink-0 snap-start sm:w-80{% elif layout == "masonry" %}mb-4 w-full break-inside-avoid{% endif %}">{% if layout == "grid" %}{% img image.src alt=image.alt|default:"" class="aspect-square w-full object-cover" %}{% else %}{% img image.src alt=image.alt|default:"" class="h-auto w-full" %}{% endif %}{% if image.caption %}<span class="sr-only">{{ image.caption }}</span>{% endif %}</a>{% endfor %}</div></div>{% if lightbox %}<script>
+{% with layout=layout|default:"grid" gap=gap|default:"md" cols=columns|default:3 %}<div data-block-override="noir:gallery" class="bn-gallery my-8{% if class %} {{ class }}{% endif %}" data-bn-gallery data-lightbox="{% if lightbox %}true{% else %}false{% endif %}"><div class="{% if layout == "carousel" %}flex snap-x snap-mandatory overflow-x-auto pb-2 {% if gap == "sm" %}gap-2{% elif gap == "lg" %}gap-6{% else %}gap-4{% endif %}{% elif layout == "masonry" %}columns-2 {% if cols == 4 %}md:columns-4{% elif cols == 2 %}md:columns-2{% else %}md:columns-3{% endif %} {% if gap == "sm" %}gap-2{% elif gap == "lg" %}gap-6{% else %}gap-4{% endif %}{% else %}grid grid-cols-2 {% if cols == 4 %}md:grid-cols-4{% elif cols == 2 %}md:grid-cols-2{% else %}md:grid-cols-3{% endif %} {% if gap == "sm" %}gap-2{% elif gap == "lg" %}gap-6{% else %}gap-4{% endif %}{% endif %}">{% for image in images %}<a href="{{ image.src|mediaURL }}" data-bn-gallery-item data-caption="{{ image.caption|default:"" }}" class="noir-hairline group relative block overflow-hidden bg-muted grayscale transition hover:grayscale-0 focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 {% if layout == "carousel" %}w-64 shrink-0 snap-start sm:w-80{% elif layout == "masonry" %}mb-4 w-full break-inside-avoid{% endif %}">{% if layout == "grid" %}{% img image.src alt=image.alt|default:"" class="aspect-square w-full object-cover" %}{% else %}{% img image.src alt=image.alt|default:"" class="h-auto w-full" %}{% endif %}{% if image.caption %}<span class="sr-only">{{ image.caption }}</span>{% endif %}</a>{% endfor %}</div></div>{% if lightbox %}<script>
 (function(){
   if(window.__bnLightbox)return;window.__bnLightbox=true;
   var reduce=window.matchMedia&&window.matchMedia('(prefers-reduced-motion: reduce)').matches;
diff --git a/templates/overrides/noir/hero.ninjatpl b/templates/overrides/noir/hero.ninjatpl
index 6bf5eb7..96f7738 100644
--- a/templates/overrides/noir/hero.ninjatpl
+++ b/templates/overrides/noir/hero.ninjatpl
@@ -1,8 +1,8 @@
 {# noir override — hero; preserves styled-text {% set %} lines, herocontent macro, split/centered branches, {% img %} background calls + overlay conditionals, trustLogos loop verbatim. #}
-{% set eyebrowText = eyebrow.text|default:eyebrow %}
-{% set headlineText = headline.text|default:headline %}
-{% set subText = subheadline.text|default:subheadline %}
-{% set descText = description.text|default:description %}
+{% set eyebrowText = eyebrow|get:"text"|default:eyebrow %}
+{% set headlineText = headline|get:"text"|default:headline %}
+{% set subText = subheadline|get:"text"|default:subheadline %}
+{% set descText = description|get:"text"|default:description %}
 {% set pText = ctaPrimary.text %}
 {% set pUrl = ctaPrimary.url %}
 {% set sText = ctaSecondary.text %}
@@ -25,14 +25,14 @@
 </div>{% endif %}
 {% endmacro %}
 {% if variant == "split" %}
-<section data-block-override="noir:hero" class="hero {% if hasImage %}noir-split{% endif %} overflow-hidden bg-background text-foreground noir-grain{% if class %} {{ class }}{% endif %}">
-{% if hasImage %}<div class="relative bg-muted grayscale" style="min-height:20rem;">{% img backgroundImage alt=headlineText class="absolute inset-0 h-full w-full object-cover" layout="hero" %}</div>{% endif %}
-<div class="flex flex-col justify-center noir-hero-pad px-6 lg:px-12"><div class="max-w-lg text-left">{{ herocontent("left") }}</div></div>
+<section data-block-override="noir:hero" class="hero {% if hasImage %}grid grid-cols-1 lg:grid-cols-2{% endif %} overflow-hidden bg-background text-foreground noir-grain{% if class %} {{ class }}{% endif %}">
+{% if hasImage %}<div class="relative min-h-80 bg-muted grayscale">{% img backgroundImage alt=headlineText class="absolute inset-0 h-full w-full object-cover" layout="hero" %}</div>{% endif %}
+<div class="flex flex-col justify-center py-16 md:py-20 lg:py-24 px-6 lg:px-12"><div class="max-w-lg text-left">{{ herocontent("left") }}</div></div>
 </section>
 {% else %}
 {% set align = "center" %}
 {% if variant == "left-aligned" %}{% set align = "left" %}{% endif %}
-<section data-block-override="noir:hero" class="hero relative flex flex-col overflow-hidden bg-background text-foreground noir-grain {% if minHeight == "screen" %}min-h-screen justify-center{% else %}noir-hero-pad{% endif %}{% if class %} {{ class }}{% endif %}">
+<section data-block-override="noir:hero" class="hero relative flex flex-col overflow-hidden bg-background text-foreground noir-grain {% if minHeight == "screen" %}min-h-screen justify-center{% else %}py-16 md:py-20 lg:py-24{% endif %}{% if class %} {{ class }}{% endif %}">
 {% if hasImage %}<div class="absolute inset-0 z-0 noir-spotlight grayscale">{% img backgroundImage alt=headlineText class="h-full w-full object-cover" layout="hero" %}{% if showOverlay %}<div class="absolute inset-0 {% if overlayColor == "light" %}bg-background/60{% elif overlayColor == "primary" %}bg-primary/50{% elif overlayOpacity <= 30 %}bg-black/30{% elif overlayOpacity <= 50 %}bg-black/50{% elif overlayOpacity <= 70 %}bg-black/70{% else %}bg-black/80{% endif %}"></div>{% endif %}</div>{% endif %}
 <div class="relative z-10 mx-auto w-full max-w-4xl px-4 sm:px-6 lg:px-8 {% if variant == "left-aligned" %}text-left{% else %}text-center{% endif %}">{{ herocontent(align) }}</div>
 </section>
diff --git a/templates/overrides/noir/hours-location.ninjatpl b/templates/overrides/noir/hours-location.ninjatpl
index 88f612f..9a6e385 100644
--- a/templates/overrides/noir/hours-location.ninjatpl
+++ b/templates/overrides/noir/hours-location.ninjatpl
@@ -2,7 +2,7 @@
 <section data-block-override="noir:hours-location" class="py-16 md:py-24 bg-background text-foreground{% if class %} {{ class }}{% endif %}">
   <div class="mx-auto max-w-5xl px-4">
     {% if heading %}<h2 class="noir-heading text-3xl md:text-4xl" style="color:hsl(var(--foreground));">{{ heading }}</h2>{% endif %}
-    <div class="mt-10 noir-split">
+    <div class="mt-10 grid grid-cols-1 gap-10 md:grid-cols-2">
       <div class="noir-file p-6 md:p-8">
         {% if hours %}
         <table class="w-full text-sm">
diff --git a/templates/overrides/noir/menu-list.ninjatpl b/templates/overrides/noir/menu-list.ninjatpl
index 05d6dc3..632355a 100644
--- a/templates/overrides/noir/menu-list.ninjatpl
+++ b/templates/overrides/noir/menu-list.ninjatpl
@@ -3,7 +3,7 @@
   <div class="mx-auto max-w-5xl px-4">
     {% if heading %}<h2 class="noir-heading text-3xl md:text-4xl" style="color:hsl(var(--foreground));">{{ heading }}</h2>{% endif %}
     {% if intro %}<p class="noir-body mt-3 max-w-2xl text-lg" style="color:hsl(var(--muted-foreground));">{{ intro }}</p>{% endif %}
-    <div class="mt-10 noir-cols noir-gap-lg {% if columns == 2 %}noir-cols-2{% endif %}">
+    <div class="mt-10 grid grid-cols-1 gap-x-12 gap-y-10 {% if columns == 2 %}md:grid-cols-2{% endif %}">
       {% for section in sections %}
       <div class="menu-section">
         {% if section.title %}<h3 class="noir-label noir-rule pb-2 text-sm" style="color:hsl(var(--primary));">{{ section.title }}</h3>{% endif %}
diff --git a/templates/overrides/noir/pricing.ninjatpl b/templates/overrides/noir/pricing.ninjatpl
index 4c06db7..2017dc4 100644
--- a/templates/overrides/noir/pricing.ninjatpl
+++ b/templates/overrides/noir/pricing.ninjatpl
@@ -3,7 +3,7 @@
   <div class="mx-auto max-w-6xl px-4">
     {% if heading %}<h2 class="noir-heading text-center text-3xl md:text-4xl" style="color:hsl(var(--foreground));">{{ heading }}</h2>{% endif %}
     {% if intro %}<p class="noir-body mx-auto mt-4 max-w-2xl text-center text-lg" style="color:hsl(var(--muted-foreground));">{{ intro }}</p>{% endif %}
-    <div class="mt-10 noir-cols noir-cols-3">
+    <div class="mt-10 grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
       {% for tier in tiers %}
       <div class="relative flex flex-col p-6 {% if tier.highlighted %}noir-file ring-1 ring-[hsl(var(--primary))]{% else %}noir-file{% endif %}">
         {% if tier.badge %}<span class="noir-label absolute -top-3 left-1/2 -translate-x-1/2 bg-primary px-3 py-1 text-primary-foreground">{{ tier.badge }}</span>{% endif %}
diff --git a/templates/overrides/noir/related-posts.ninjatpl b/templates/overrides/noir/related-posts.ninjatpl
index ff54d67..734b332 100644
--- a/templates/overrides/noir/related-posts.ninjatpl
+++ b/templates/overrides/noir/related-posts.ninjatpl
@@ -3,7 +3,7 @@
 <section data-block-override="noir:related-posts" class="noir-rule py-12 md:py-16 bg-background text-foreground{% if class %} {{ class }}{% endif %}">
 <div class="mx-auto max-w-6xl px-4">
 <h2 class="noir-heading mb-8 text-2xl md:text-3xl" style="color:hsl(var(--foreground));">{{ heading|default:"Related posts" }}</h2>
-<div class="noir-cols {% if columns == 2 %}noir-cols-2{% else %}noir-cols-3{% endif %}">
+<div class="grid grid-cols-1 gap-6 sm:grid-cols-2 {% if columns == 2 %}lg:grid-cols-2{% else %}lg:grid-cols-3{% endif %}">
 {% for post in posts %}
 <article class="group flex flex-col">
 {% if post.featured_image_url %}<a href="{{ post.url }}" class="mb-3 block aspect-video overflow-hidden bg-muted grayscale">{% img post.featured_image_url alt=post.title class="h-full w-full object-cover transition-transform duration-300 group-hover:scale-105" %}</a>{% endif %}
diff --git a/templates/overrides/noir/rich-section.ninjatpl b/templates/overrides/noir/rich-section.ninjatpl
index 8fd4564..b14764e 100644
--- a/templates/overrides/noir/rich-section.ninjatpl
+++ b/templates/overrides/noir/rich-section.ninjatpl
@@ -1,6 +1,6 @@
 {# noir override — rich-section; preserves background, mediaPosition, eyebrow, heading, body, ctaUrl/ctaLabel, media/mediaAlt, {% img %} + icon markup verbatim. #}
 <section data-block-override="noir:rich-section" class="py-16 md:py-24 {% if background == "muted" %}bg-muted text-foreground{% elif background == "card" %}bg-card text-card-foreground{% else %}bg-background text-foreground{% endif %}{% if class %} {{ class }}{% endif %}">
-  <div class="mx-auto noir-split items-center max-w-6xl px-4">
+  <div class="mx-auto grid max-w-6xl items-center gap-10 px-4 md:grid-cols-2 md:gap-16">
     <div class="{% if mediaPosition == "left" %}md:order-2{% else %}md:order-1{% endif %}">
       {% if eyebrow %}<div class="mb-3 flex items-center gap-4"><span class="noir-rule w-12"></span><p class="noir-label" style="color:hsl(var(--primary));">{{ eyebrow }}</p></div>{% endif %}
       {% if heading %}<h2 class="noir-heading mt-2 text-3xl md:text-4xl" style="color:hsl(var(--foreground));">{{ heading }}</h2>{% endif %}
diff --git a/templates/overrides/noir/stats.ninjatpl b/templates/overrides/noir/stats.ninjatpl
index 070a734..c531d47 100644
--- a/templates/overrides/noir/stats.ninjatpl
+++ b/templates/overrides/noir/stats.ninjatpl
@@ -3,7 +3,7 @@
   <div class="mx-auto max-w-6xl px-4">
     {% if heading %}<h2 class="noir-heading text-center text-3xl md:text-4xl" style="color:hsl(var(--foreground));">{{ heading }}</h2>{% endif %}
     {% if intro %}<p class="noir-body mx-auto mt-4 max-w-2xl text-center text-lg" style="color:hsl(var(--muted-foreground));">{{ intro }}</p>{% endif %}
-    <dl class="mt-10 noir-cols-2up noir-gap-lg divide-x divide-border {% if columns == 2 %}{% elif columns == 3 %}noir-cols-2up-3{% else %}noir-cols-2up-4{% endif %}">
+    <dl class="mt-10 grid grid-cols-2 gap-8 divide-x divide-border {% if columns == 2 %}md:grid-cols-2{% elif columns == 3 %}md:grid-cols-3{% else %}md:grid-cols-4{% endif %}">
       {% for item in items %}
       <div class="px-2 text-center">
         <dd class="noir-mono text-4xl font-bold tracking-tight md:text-5xl" style="color:hsl(var(--primary));">{% if item.prefix %}{{ item.prefix }}{% endif %}<span{% if countUp %} data-countup-value="{{ item.value }}"{% endif %}>{{ item.value }}</span>{% if item.suffix %}{{ item.suffix }}{% endif %}</dd>
diff --git a/templates/overrides/noir/team.ninjatpl b/templates/overrides/noir/team.ninjatpl
index 181a370..3175423 100644
--- a/templates/overrides/noir/team.ninjatpl
+++ b/templates/overrides/noir/team.ninjatpl
@@ -3,7 +3,7 @@
   <div class="mx-auto max-w-6xl px-4">
     {% if heading %}<h2 class="noir-heading text-center text-3xl md:text-4xl" style="color:hsl(var(--foreground));">{{ heading }}</h2>{% endif %}
     {% if intro %}<p class="noir-body mx-auto mt-4 max-w-2xl text-center text-lg" style="color:hsl(var(--muted-foreground));">{{ intro }}</p>{% endif %}
-    <div class="mt-10 {% if layout == "list" %}mx-auto max-w-3xl space-y-6{% elif layout == "single" %}mx-auto max-w-xl{% else %}noir-cols noir-gap-lg {% if columns == 2 %}noir-cols-2{% elif columns == 4 %}noir-cols-4{% else %}noir-cols-3{% endif %}{% endif %}">
+    <div class="mt-10 {% if layout == "list" %}mx-auto max-w-3xl space-y-6{% elif layout == "single" %}mx-auto max-w-xl{% else %}grid grid-cols-1 gap-8 sm:grid-cols-2 {% if columns == 2 %}lg:grid-cols-2{% elif columns == 4 %}lg:grid-cols-4{% else %}lg:grid-cols-3{% endif %}{% endif %}">
       {% for member in members %}
       <div class="{% if layout == "list" %}noir-file flex items-start gap-5 p-5{% else %}text-center{% endif %}">
         {% if member.photo %}<span class="{% if layout == "list" %}h-20 w-20{% else %}mx-auto h-28 w-28{% endif %} block shrink-0 overflow-hidden rounded-full bg-muted grayscale">{% img member.photo alt=member.name class="h-full w-full object-cover" %}</span>{% endif %}
diff --git a/templates/overrides/noir/testimonial.ninjatpl b/templates/overrides/noir/testimonial.ninjatpl
index cead359..c134206 100644
--- a/templates/overrides/noir/testimonial.ninjatpl
+++ b/templates/overrides/noir/testimonial.ninjatpl
@@ -2,7 +2,7 @@
 <section data-block-override="noir:testimonial" class="py-16 md:py-24 bg-background text-foreground{% if class %} {{ class }}{% endif %}">
   <div class="mx-auto max-w-6xl px-4">
     {% if heading %}<h2 class="noir-heading text-center text-3xl md:text-4xl" style="color:hsl(var(--foreground));">{{ heading }}</h2>{% endif %}
-    <div class="mt-12 {% if layout == "single" %}mx-auto max-w-3xl{% elif layout == "carousel" %}flex snap-x snap-mandatory gap-6 overflow-x-auto pb-4{% else %}noir-cols noir-cols-3{% endif %}">
+    <div class="mt-12 {% if layout == "single" %}mx-auto max-w-3xl{% elif layout == "carousel" %}flex snap-x snap-mandatory gap-6 overflow-x-auto pb-4{% else %}grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3{% endif %}">
       {% for q in quotes %}
       <figure class="noir-file flex flex-col p-6 text-card-foreground{% if layout == "carousel" %} min-w-[18rem] max-w-sm shrink-0 snap-start{% endif %}">
         {% if q.rating %}<div class="mb-3 flex gap-0.5" aria-label="Rated {{ q.rating }} out of 5">
diff --git a/templates/overrides/noir/timeline.ninjatpl b/templates/overrides/noir/timeline.ninjatpl
index a4dd5b6..23c4123 100644
--- a/templates/overrides/noir/timeline.ninjatpl
+++ b/templates/overrides/noir/timeline.ninjatpl
@@ -3,7 +3,7 @@
   <div class="mx-auto max-w-4xl px-4">
     {% if heading %}<h2 class="noir-heading text-center text-3xl md:text-4xl" style="color:hsl(var(--foreground));">{{ heading }}</h2>{% endif %}
     {% if intro %}<p class="noir-body mx-auto mt-4 max-w-2xl text-center text-lg" style="color:hsl(var(--muted-foreground));">{{ intro }}</p>{% endif %}
-    <ol class="mt-12 {% if orientation == "horizontal" %}noir-cols noir-gap-lg noir-cols-4{% else %}relative space-y-8 before:absolute before:left-4 before:top-2 before:h-[calc(100%-1rem)] before:w-px before:bg-border{% endif %}">
+    <ol class="mt-12 {% if orientation == "horizontal" %}grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-4{% else %}relative space-y-8 before:absolute before:left-4 before:top-2 before:h-[calc(100%-1rem)] before:w-px before:bg-border{% endif %}">
       {% for step in steps %}
       <li class="{% if orientation == "horizontal" %}text-center{% else %}relative pl-14{% endif %}">
         <span class="noir-mono flex h-8 w-8 items-center justify-center rounded-full bg-primary text-sm font-semibold text-primary-foreground {% if orientation == "horizontal" %}mx-auto{% else %}absolute left-0 top-0 ring-4 ring-background{% endif %}">