/* ============ NMR RAILWAY (NWR) PAGE STYLES ============ */
:where(body.nmr-page) /* Ported from the inline <style> block of public/nmr-railway.html.
   Chrome rules provided by the global layout (.topnav*, .nmr-page skip-link, .nmr-page html/body
   base resets) have been removed. Page-specific design tokens and the
   atmospheric body background are scoped to the .nmr-page wrapper so they
   don't override the global dark site chrome outside this route. */

/* ============ DESIGN TOKENS ============ */
.nmr-page{
  --bg: #ffffff;
  --bg-elev: #ffffff;
  --bg-card: #ffffff;
  --bg-card-hover: #f7f9fa;
  --border: rgba(0, 0, 0, 0.10);
  --border-strong: rgba(0, 0, 0, 0.18);

  --text: #0e1f29;
  --text-dim: #3b515c;
  --text-muted: #6b7785;

  --electric: #3b82f6;
  --electric-bright: #60a5fa;
  --electric-glow: rgba(59, 130, 246, 0.35);

  --orange: #f58a22;          /* signature AiSPRY orange — matches WDD carousels */
  --orange-bright: #f8a14e;
  --orange-glow: rgba(245, 138, 34, 0.3);

  --amber: #f59e0b;
  --amber-bright: #fbbf24;
  --amber-glow: rgba(245, 158, 11, 0.3);

  --teal: #14b8a6;             /* second project accent */
  --teal-bright: #2dd4bf;

  --success: #10b981;
  --danger: #ef4444;

  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'IBM Plex Sans', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;

  --max-w: 1200px;
  --gap: clamp(1rem, 2vw, 1.5rem);
  --radius: 10px;
  --radius-lg: 16px;

  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  position: relative;
}

:where(body.nmr-page) .nmr-page img, :where(body.nmr-page) .nmr-page svg{ max-width: 100%; display: block; }
:where(body.nmr-page) .nmr-page a{ color: var(--electric-bright); text-decoration: none; }

:where(body.nmr-page) /* ============ ATMOSPHERIC BACKGROUND ============ */
.nmr-page::before{
  content: '';
  position: fixed; inset: 0;
  background:
    radial-gradient(ellipse 80% 50% at 20% 0%, rgba(245, 138, 34, 0.10), transparent 60%),
    radial-gradient(ellipse 60% 40% at 80% 30%, rgba(59, 130, 246, 0.08), transparent 70%),
    radial-gradient(ellipse 70% 50% at 50% 80%, rgba(20, 184, 166, 0.05), transparent 70%);
  pointer-events: none;
  z-index: 0;
}
:where(body.nmr-page) .nmr-page::after{
  content: '';
  position: fixed; inset: 0;
  background-image: radial-gradient(circle at center, rgba(255,255,255,0.015) 1px, transparent 1px);
  background-size: 24px 24px;
  pointer-events: none;
  z-index: 0;
}

:where(body.nmr-page) /* ============ HERO ============ */
.hero{
  position: relative;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: clamp(3rem, 8vw, 6rem) 2rem clamp(2rem, 5vw, 3rem);
  z-index: 1;
}
:where(body.nmr-page) .nmr-page .breadcrumb{
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 2rem;
}
:where(body.nmr-page) .nmr-page .breadcrumb-pipe{ color: var(--border-strong); }
:where(body.nmr-page) .nmr-page .breadcrumb-tag{
  padding: 0.25rem 0.625rem;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  color: var(--orange-bright);
}

:where(body.nmr-page) .nmr-page .hero-title{
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  line-height: 1.02;
  letter-spacing: -0.025em;
  margin-bottom: 1.5rem;
  max-width: 900px;
}
:where(body.nmr-page) .nmr-page .hero-title em{
  font-style: italic;
  color: var(--orange-bright);
  font-weight: 400;
}
:where(body.nmr-page) .nmr-page .hero-tagline{
  font-size: clamp(1rem, 1.4vw, 1.125rem);
  line-height: 1.65;
  color: var(--text-dim);
  max-width: 760px;
  margin-bottom: 3rem;
}
:where(body.nmr-page) .nmr-page .hero-meta{
  display: flex; flex-wrap: wrap; gap: 2rem 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border);
  margin-bottom: 0;
}
:where(body.nmr-page) .nmr-page .meta-item .meta-label{
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.375rem;
  display: block;
}
:where(body.nmr-page) .nmr-page .meta-item .meta-value{
  font-size: 0.9375rem;
  color: var(--text);
  font-weight: 500;
}

:where(body.nmr-page) .nmr-page /* ============ CAROUSEL SHOWCASE ============ */
.carousel-showcase{
  position: relative;
  z-index: 1;
  background: #ffffff;
  /* White section: redefine the theme tokens to dark so the slide text
     (which uses var(--text)/var(--text-dim)) stays readable. */
  --text: #0f1419;
  --text-dim: #475569;
  --border: rgba(15, 20, 25, 0.12);
  --border-strong: rgba(15, 20, 25, 0.22);
}
:where(body.nmr-page) .nmr-page .carousel-showcase-header{
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; flex-wrap: wrap;
  margin-bottom: 1.75rem;
}
:where(body.nmr-page) .nmr-page /* Mini breadcrumb above the carousel (replaces hero breadcrumb) */
.breadcrumb-mini{
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.625rem;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}
:where(body.nmr-page) .nmr-page .breadcrumb-mini .breadcrumb-pipe{ color: var(--border-strong); }
:where(body.nmr-page) .nmr-page .breadcrumb-tag-mini{
  padding: 0.25rem 0.625rem;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  color: var(--orange-bright);
  transition: color 0.5s, border-color 0.5s;
}
:where(body.nmr-page) .nmr-page /* When carousel switches theme, :where(body.nmr-page) .nmr-page the page-level breadcrumb tag tints too */
/* Breadcrumb tag follows the carousel accent — locked to AiSPRY orange for all slide themes */
.carousel-showcase[data-theme="orange"] .breadcrumb-tag-mini, :where(body.nmr-page) .nmr-page .carousel-showcase[data-theme="blue"]   .breadcrumb-tag-mini, :where(body.nmr-page) .nmr-page .carousel-showcase[data-theme="teal"]   .breadcrumb-tag-mini{ color: var(--orange-bright); border-color: rgba(245, 138, 34, 0.45); }

:where(body.nmr-page) .nmr-page .carousel{
  position: relative;
  background:
    radial-gradient(ellipse 60% 50% at 50% 0%, var(--c-accent-glow-soft, rgba(245, 138, 34, 0.06)), transparent 60%),
    #ffffff;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  overflow: hidden;
  /* Wider gutters left/right; vertical padding unchanged */
  padding: clamp(1.5rem, 3vw, 2.5rem) clamp(2.5rem, 5.5vw, 5rem);
  min-height: clamp(380px, 48vh, 520px);
  transition: background 0.6s ease;
}
:where(body.nmr-page) .nmr-page /* Single-carousel mode: theme switches per-slide, :where(body.nmr-page) .nmr-page smooth transition */
.carousel.single{ transition: background 0.6s ease, border-color 0.6s ease; }
:where(body.nmr-page) .nmr-page .carousel::before{
  /* subtle grid background like the carousel images */
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(15,20,25,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,20,25,0.04) 1px, transparent 1px);
  background-size: 56px 56px;
  pointer-events: none;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 85%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 85%);
}

:where(body.nmr-page) .nmr-page /* Carousel theme variants — all slides use the signature AiSPRY orange.
   (Previously theme-teal/theme-blue swapped the accent per slide; the theme
   classes still get toggled by JS but every theme now resolves to orange.) */
.carousel.theme-orange, :where(body.nmr-page) .nmr-page .carousel.theme-teal, :where(body.nmr-page) .nmr-page .carousel.theme-blue{ --c-accent: var(--orange); --c-accent-bright: var(--orange-bright); --c-accent-glow: var(--orange-glow); --c-accent-glow-soft: rgba(245, 138, 34, 0.07); }
:where(body.nmr-page) .nmr-page .carousel-tag .dot, :where(body.nmr-page) .nmr-page .carousel-counter-bar.active, :where(body.nmr-page) .nmr-page .carousel-counter-text strong, :where(body.nmr-page) .nmr-page .slide-kicker{ transition: background 0.5s, color 0.5s, border-color 0.5s, box-shadow 0.5s; }

:where(body.nmr-page) .nmr-page .carousel-top{
  position: relative;
  z-index: 2;
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1.5rem; flex-wrap: wrap;
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}
:where(body.nmr-page) .nmr-page .carousel-tag{
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.375rem 0.875rem;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
}
:where(body.nmr-page) .nmr-page .carousel-tag .dot{
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--c-accent);
  box-shadow: 0 0 0 3px var(--c-accent-glow);
}
:where(body.nmr-page) .nmr-page .carousel-tag b{ color: var(--text); font-weight: 600; }
:where(body.nmr-page) .nmr-page .carousel-counter{
  display: flex; align-items: center; gap: 1rem;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--text-dim);
}
:where(body.nmr-page) .nmr-page .carousel-counter-bars{
  display: flex; gap: 6px;
}
:where(body.nmr-page) .nmr-page .carousel-counter-bar{
  width: 26px; height: 3px;
  background: var(--border-strong);
  border-radius: 2px;
  transition: background 0.3s;
}
:where(body.nmr-page) .nmr-page .carousel-counter-bar.active{
  background: var(--c-accent);
}
:where(body.nmr-page) .nmr-page .carousel-counter-text strong{ color: var(--c-accent-bright); font-weight: 700; }
:where(body.nmr-page) .nmr-page .carousel-counter-text .sep{ color: var(--text-muted); margin: 0 0.25rem; }

:where(body.nmr-page) .nmr-page /* Slide grid */
.carousel-slides{
  position: relative;
  z-index: 2;
}
:where(body.nmr-page) .nmr-page .carousel-slide{
  display: none;
  grid-template-columns: 1fr 1.05fr;
  gap: clamp(1.5rem, 3.5vw, 3rem);
  align-items: start;
  animation: nmrSlideIn 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
:where(body.nmr-page) .nmr-page .carousel-slide.active{ display: grid; }
@keyframes nmrSlideIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (max-width: 880px) {
  :where(body.nmr-page) .nmr-page .carousel-slide{ grid-template-columns: 1fr; }
}

:where(body.nmr-page) .nmr-page .slide-kicker{
  display: inline-block;
  padding: 0.375rem 0.75rem;
  border: 1px solid var(--c-accent);
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--c-accent-bright);
  margin-bottom: 1.25rem;
}
:where(body.nmr-page) .nmr-page .slide-headline{
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(2.25rem, 5vw, 4rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--text);
  margin-bottom: 1.5rem;
}
:where(body.nmr-page) .nmr-page .slide-headline .accent{ color: var(--c-accent); }
:where(body.nmr-page) .nmr-page .slide-prose{
  font-size: clamp(0.9375rem, 1.1vw, 1.0625rem);
  line-height: 1.65;
  color: var(--text-dim);
  max-width: 520px;
  margin-bottom: 2rem;
}
:where(body.nmr-page) .nmr-page .slide-prose strong{ color: var(--text); font-weight: 600; }

:where(body.nmr-page) .nmr-page .slide-cta-row{
  display: flex; flex-wrap: wrap; gap: 0.75rem;
  margin-bottom: 0;
}
:where(body.nmr-page) .nmr-page .slide-btn{
  padding: 0.75rem 1.25rem;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  border-radius: 8px;
  transition: all 0.2s;
  cursor: pointer;
  letter-spacing: 0.01em;
  display: inline-flex; align-items: center; gap: 0.5rem;
  border: 1px solid transparent;
}
:where(body.nmr-page) /* CTA buttons are anchor elements — keep these rules more specific than the
   page-level electric-blue link color, :where(body.nmr-page) which was painting both button texts
   blue. (No example braces in this comment: the CSS-scoping script once
   mistook them for real rule braces and silently killed the next rule.) */
.nmr-page .slide-btn-primary{
  background: var(--c-accent);
  color: #ffffff;
  font-weight: 700;
  box-shadow: 0 6px 18px -6px var(--c-accent-glow);
}
:where(body.nmr-page) .nmr-page .slide-btn-primary:hover{
  /* Darker on hover — matches the site's primary buttons (#d97718 pairs with
     the #f58a22 brand orange, same as the navbar CTA and HIES buttons). */
  background: #d97718;
  transform: translateY(-1px);
  box-shadow: 0 8px 22px -6px var(--c-accent-glow);
}
:where(body.nmr-page) .nmr-page .slide-btn-ghost{
  background: transparent;
  color: var(--c-accent);
  border-color: var(--border-strong);
}
:where(body.nmr-page) .nmr-page .slide-btn-ghost:hover{
  border-color: var(--c-accent);
  color: var(--c-accent-bright);
}

:where(body.nmr-page) .nmr-page /* Slide visual area (right column) */
.slide-visual{
  position: relative;
  min-height: 240px;
}
:where(body.nmr-page) .nmr-page .visual-frame{
  background: rgba(13, 19, 34, 0.75);
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  padding: 1.25rem;
  position: relative;
  overflow: hidden;
}
:where(body.nmr-page) .nmr-page /* Cap the illustration height so the visual column doesn't tower over the
   copy column — keeps the whole carousel slide shorter. */
.visual-frame > svg{
  width: 100%;
  height: auto;
  max-height: 300px;
  margin: 0 auto;
}
:where(body.nmr-page) .nmr-page .visual-frame-corners::before, :where(body.nmr-page) .nmr-page .visual-frame-corners::after, :where(body.nmr-page) .nmr-page .visual-frame-corners > .corner-tl, :where(body.nmr-page) .nmr-page .visual-frame-corners > .corner-tr, :where(body.nmr-page) .nmr-page .visual-frame-corners > .corner-bl, :where(body.nmr-page) .nmr-page .visual-frame-corners > .corner-br{
  content: '';
  position: absolute;
  width: 14px; height: 14px;
  border: 2px solid var(--c-accent);
  pointer-events: none;
}
:where(body.nmr-page) .nmr-page .visual-frame-corners > .corner-tl{ top: 6px; left: 6px; border-right: 0; border-bottom: 0; }
:where(body.nmr-page) .nmr-page .visual-frame-corners > .corner-tr{ top: 6px; right: 6px; border-left: 0; border-bottom: 0; }
:where(body.nmr-page) .nmr-page .visual-frame-corners > .corner-bl{ bottom: 6px; left: 6px; border-right: 0; border-top: 0; }
:where(body.nmr-page) .nmr-page .visual-frame-corners > .corner-br{ bottom: 6px; right: 6px; border-left: 0; border-top: 0; }
:where(body.nmr-page) .nmr-page .visual-frame-corners::before, :where(body.nmr-page) .nmr-page .visual-frame-corners::after{ display: none; }

:where(body.nmr-page) .nmr-page .visual-header{
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px dashed var(--border);
}
:where(body.nmr-page) .nmr-page .visual-header-live{
  display: flex; align-items: center; gap: 0.5rem;
  color: var(--c-accent-bright);
}
:where(body.nmr-page) .nmr-page .visual-header-live::before{
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--c-accent);
  animation: livePulse 1.8s ease-in-out infinite;
}
@keyframes livePulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 var(--c-accent-glow); }
  50% { opacity: 0.7; box-shadow: 0 0 0 6px transparent; }
}

:where(body.nmr-page) .nmr-page /* Bottom KPI strip */
.carousel-footer{
  position: relative;
  z-index: 2;
  margin-top: clamp(1.5rem, 3vw, 2rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem;
}
:where(body.nmr-page) .nmr-page .carousel-kpi-row{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1rem, 2vw, 2rem);
  flex: 1;
}
:where(body.nmr-page) .nmr-page .carousel-kpi{
  display: flex; flex-direction: column; gap: 0.375rem;
}
:where(body.nmr-page) .nmr-page .carousel-kpi-value{
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  letter-spacing: -0.025em;
  line-height: 1;
  color: var(--text);
}
:where(body.nmr-page) .nmr-page .carousel-kpi-value .unit{
  color: var(--c-accent);
  font-size: 0.7em;
  margin-left: 0.0625rem;
  transition: color 0.5s;
}
:where(body.nmr-page) .nmr-page .carousel-kpi-label{
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  line-height: 1.4;
}
:where(body.nmr-page) .nmr-page .carousel-nav{
  display: flex; gap: 0.5rem;
  flex-shrink: 0;
}
:where(body.nmr-page) .nmr-page .carousel-nav-btn{
  width: 40px; height: 40px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--text-dim);
  display: grid; place-items: center;
  cursor: pointer;
  transition: all 0.2s;
}
:where(body.nmr-page) .nmr-page .carousel-nav-btn:hover{
  border-color: var(--c-accent);
  color: var(--c-accent-bright);
  background: rgba(255,255,255,0.02);
}
:where(body.nmr-page) .nmr-page .carousel-nav-btn svg{ width: 16px; height: 16px; }
@media (max-width: 720px) {
  :where(body.nmr-page) .nmr-page .carousel-kpi-row{ grid-template-columns: repeat(2, 1fr); gap: 1rem 1.25rem; }
  :where(body.nmr-page) .nmr-page .carousel-footer{ flex-direction: column; align-items: stretch; }
  :where(body.nmr-page) .nmr-page .carousel-nav{ justify-content: center; }
}

:where(body.nmr-page) .nmr-page /* Visual summary strip inside each slide's visual frame */
.visual-summary-strip{
  display: flex; justify-content: space-around;
  padding-top: 0.875rem;
  margin-top: 0.875rem;
  border-top: 1px dashed rgba(255,255,255,0.08);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--text-muted);
  gap: 0.5rem;
}
:where(body.nmr-page) .nmr-page .visual-summary-strip > div{
  text-align: left;
  flex: 1;
  line-height: 1.4;
}
:where(body.nmr-page) .nmr-page .visual-summary-strip > div > span{
  display: block;
  color: var(--c-accent-bright);
  font-weight: 700;
  font-size: 1rem;
  margin-bottom: 0.125rem;
  transition: color 0.5s;
}

:where(body.nmr-page) /* ============ SECTION NAV ============ */
.nmr-page .section-nav{
  position: sticky;
  top: 78px;
  z-index: 999;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
:where(body.nmr-page) .nmr-page .section-nav-inner{
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0.75rem 2rem;
  display: flex; flex-wrap: wrap; gap: 0.25rem;
  justify-content: center;
  overflow-x: auto;
  scrollbar-width: none;
}
:where(body.nmr-page) .nmr-page .section-nav-inner::-webkit-scrollbar{ display: none; }
:where(body.nmr-page) .nmr-page .section-nav a{
  padding: 0.5rem 1rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-dim);
  border-radius: 999px;
  transition: all 0.2s;
  white-space: nowrap;
  flex-shrink: 0;
}
:where(body.nmr-page) .nmr-page .section-nav a:hover{
  color: var(--text);
  /* bg-card is white — invisible on the white bar, so use the hover tint */
  background: var(--bg-card-hover);
}
:where(body.nmr-page) .nmr-page .section-nav a.active{
  color: var(--orange-bright);
  background: rgba(245, 138, 34, 0.12);
}
:where(body.nmr-page) .nmr-page section.content, :where(body.nmr-page) .nmr-page section.related{ scroll-margin-top: 155px; }
@media (max-width: 720px) {
  :where(body.nmr-page) /* Keep compact carousel gutters on phones — the wide desktop padding
     would eat too much of a narrow screen */
  .nmr-page .carousel{ padding-left: 1.5rem; padding-right: 1.5rem; }
  :where(body.nmr-page) .nmr-page .section-nav-inner{ padding: 0.5rem 1rem; justify-content: flex-start; }
  :where(body.nmr-page) .nmr-page .section-nav a{ padding: 0.5rem 0.75rem; font-size: 0.6875rem; }
  :where(body.nmr-page) .nmr-page section.content, :where(body.nmr-page) .nmr-page section.related{ scroll-margin-top: 195px; }
}
@media (max-width: 480px) {
  :where(body.nmr-page) .nmr-page section.content, :where(body.nmr-page) .nmr-page section.related{ scroll-margin-top: 225px; }
}

:where(body.nmr-page) .nmr-page /* ============ SECTION ============ */
section.content{
  max-width: var(--max-w);
  margin: 0 auto;
  /* No top padding — sections sit flush under the sticky section-nav;
     bottom padding provides the spacing between sections */
  padding: 0 2rem clamp(1.75rem, 3.5vw, 3rem);
  position: relative;
  z-index: 1;
}
:where(body.nmr-page) .nmr-page .section-kicker{
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 1.25rem;
  display: flex; align-items: center; gap: 0.75rem;
}
:where(body.nmr-page) .nmr-page .section-kicker::before{
  content: '';
  width: 30px; height: 1px;
  background: var(--orange);
}
:where(body.nmr-page) .nmr-page .section-title{
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.875rem, 3.5vw, 2.5rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: 2rem;
  max-width: 880px;
}
:where(body.nmr-page) .nmr-page .section-lede{
  font-size: 1.125rem;
  line-height: 1.7;
  color: var(--text-dim);
  max-width: 800px;
  margin-bottom: 2.5rem;
}
:where(body.nmr-page) .nmr-page .section-prose p{
  font-size: 1rem;
  line-height: 1.75;
  color: var(--text-dim);
  max-width: 800px;
  margin-bottom: 1.5rem;
}
:where(body.nmr-page) .nmr-page .section-prose p strong{ color: var(--text); font-weight: 500; }

:where(body.nmr-page) .nmr-page /* ============ PROJECTS GRID (3 PROJECT OVERVIEW CARDS) ============ */
.projects-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 2.5rem;
}
:where(body.nmr-page) .nmr-page .project-card{
  /* width:auto overrides the homepage's legacy global rule in styles.css
     (.project-card { width: 414px }) which leaked in and clipped these
     cards on narrow screens — the grid sizes them instead. Same for the
     legacy cursor:pointer (these cards aren't clickable here). */
  width: auto;
  cursor: default;
  padding: 2rem 1.75rem;
  background: linear-gradient(180deg, var(--bg-elev), var(--bg-card));
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  position: relative;
  overflow: hidden;
  transition: all 0.25s;
}
:where(body.nmr-page) .nmr-page .project-card::before{
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 3px;
}
:where(body.nmr-page) .nmr-page .project-card.theme-orange::before{ background: linear-gradient(90deg, var(--orange), var(--orange-bright)); }
:where(body.nmr-page) .nmr-page .project-card.theme-teal::before{ background: linear-gradient(90deg, var(--teal), var(--teal-bright)); }
:where(body.nmr-page) .nmr-page .project-card.theme-blue::before{ background: linear-gradient(90deg, var(--electric), var(--electric-bright)); }
:where(body.nmr-page) .nmr-page .project-card:hover{
  transform: translateY(-3px);
  border-color: var(--border-strong);
}
:where(body.nmr-page) .nmr-page .project-card-tag{
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.625rem;
}
:where(body.nmr-page) .nmr-page .project-card h4{
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.375rem;
  letter-spacing: -0.01em;
  color: var(--text);
  margin-bottom: 0.875rem;
  line-height: 1.25;
}
:where(body.nmr-page) .nmr-page .project-card p{
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--text-dim);
  margin-bottom: 1.25rem;
}
:where(body.nmr-page) .nmr-page .project-card-stats{
  display: flex; flex-wrap: wrap; gap: 0.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
}
:where(body.nmr-page) .nmr-page .project-card-stat{
  padding: 0.3125rem 0.625rem;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.05em;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-dim);
}
:where(body.nmr-page) .nmr-page .project-card.theme-orange .project-card-stat strong{ color: var(--orange-bright); }
:where(body.nmr-page) .nmr-page .project-card.theme-teal .project-card-stat strong{ color: var(--teal-bright); }
:where(body.nmr-page) .nmr-page .project-card.theme-blue .project-card-stat strong{ color: var(--electric-bright); }
 /* minmax(0,1fr), :where(body.nmr-page) not 1fr: the cards' min-content width (414px) would
   otherwise blow the track out past narrow viewports and clip the cards */
@media (max-width: 980px){ :where(body.nmr-page) .nmr-page .projects-grid{ grid-template-columns: minmax(0, 1fr); } }

:where(body.nmr-page) .nmr-page /* ============ CHALLENGE LIST ============ */
.challenge-list{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  margin-top: 2rem;
}
:where(body.nmr-page) .nmr-page .challenge-item{
  padding: 1.5rem;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: all 0.25s;
}
:where(body.nmr-page) .nmr-page .challenge-item:hover{
  border-color: var(--border-strong);
  background: var(--bg-card);
  transform: translateY(-2px);
}
:where(body.nmr-page) .nmr-page .challenge-item h4{
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 0.625rem;
}
:where(body.nmr-page) .nmr-page .challenge-item p{
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--text-dim);
}
:where(body.nmr-page) .nmr-page .challenge-item-tag{
  display: inline-block;
  padding: 0.1875rem 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 4px;
  margin-bottom: 0.625rem;
}
:where(body.nmr-page) .nmr-page .challenge-item.tag-cvvrs .challenge-item-tag{ color: var(--orange-bright); background: rgba(245, 138, 34, 0.12); }
:where(body.nmr-page) .nmr-page .challenge-item.tag-audio .challenge-item-tag{ color: var(--teal-bright);   background: rgba(20, 184, 166, 0.12); }
:where(body.nmr-page) .nmr-page .challenge-item.tag-wdd   .challenge-item-tag{ color: var(--electric-bright); background: rgba(59, 130, 246, 0.12); }
@media (max-width: 720px) { :where(body.nmr-page) .nmr-page .challenge-list{ grid-template-columns: 1fr; } }

:where(body.nmr-page) .nmr-page /* ============ ARCHITECTURE STEPS ============ */
.arch-steps{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
  margin-top: 3rem;
}
:where(body.nmr-page) .nmr-page .arch-step{
  padding: 1.25rem 1rem;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  position: relative;
}
:where(body.nmr-page) .nmr-page .arch-step-num{
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--orange-bright);
  letter-spacing: 0.1em;
  margin-bottom: 0.625rem;
}
:where(body.nmr-page) .nmr-page .arch-step-title{
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1rem;
  color: var(--text);
  margin-bottom: 0.5rem;
  line-height: 1.3;
}
:where(body.nmr-page) .nmr-page .arch-step-desc{
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--text-dim);
}
@media (max-width: 980px) { :where(body.nmr-page) .nmr-page .arch-steps{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { :where(body.nmr-page) .nmr-page .arch-steps{ grid-template-columns: 1fr; } }

:where(body.nmr-page) .nmr-page /* ============ COMBINED RESULTS GRID ============ */
.impact-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 2.5rem;
}
:where(body.nmr-page) .nmr-page .impact-card{
  padding: 2rem;
  background: linear-gradient(180deg, var(--bg-elev), var(--bg-card));
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  position: relative;
  overflow: hidden;
}
:where(body.nmr-page) .nmr-page .impact-card::before{
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 3px;
}
:where(body.nmr-page) .nmr-page .impact-card.theme-orange::before{ background: linear-gradient(90deg, var(--orange), var(--orange-bright)); }
:where(body.nmr-page) .nmr-page .impact-card.theme-teal::before{ background: linear-gradient(90deg, var(--teal), var(--teal-bright)); }
:where(body.nmr-page) .nmr-page .impact-card.theme-blue::before{ background: linear-gradient(90deg, var(--electric), var(--electric-bright)); }
:where(body.nmr-page) .nmr-page .impact-card-eyebrow{
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
}
:where(body.nmr-page) .nmr-page .impact-card h4{
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.25rem;
  color: var(--text);
  margin-bottom: 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border);
}
:where(body.nmr-page) .nmr-page .impact-card ul{ list-style: none; }
:where(body.nmr-page) .nmr-page .impact-card li{
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--text-dim);
  padding-left: 1.25rem;
  margin-bottom: 0.75rem;
  position: relative;
}
:where(body.nmr-page) .nmr-page .impact-card li::before{
  content: '';
  position: absolute;
  left: 0; top: 0.6rem;
  width: 6px; height: 6px;
  border-radius: 50%;
}
:where(body.nmr-page) .nmr-page .impact-card.theme-orange li::before{ background: var(--orange); }
:where(body.nmr-page) .nmr-page .impact-card.theme-teal li::before{ background: var(--teal); }
:where(body.nmr-page) .nmr-page .impact-card.theme-blue li::before{ background: var(--electric); }
:where(body.nmr-page) .nmr-page .impact-card li strong{ color: var(--text); font-weight: 600; }
@media (max-width: 900px) { :where(body.nmr-page) .nmr-page .impact-grid{ grid-template-columns: 1fr; } }

:where(body.nmr-page) .nmr-page /* ============ FAQ ============ */
.faq-list{ margin-top: 2rem; }
:where(body.nmr-page) .nmr-page details.faq{
  border-bottom: 1px solid var(--border);
  padding: 1.5rem 0;
  transition: all 0.2s;
}
:where(body.nmr-page) .nmr-page details.faq[open]{ border-bottom-color: var(--border-strong); }
:where(body.nmr-page) .nmr-page details.faq summary{
  list-style: none;
  cursor: pointer;
  display: flex; align-items: flex-start; gap: 1.25rem;
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--text);
  line-height: 1.4;
  transition: color 0.2s;
}
:where(body.nmr-page) .nmr-page details.faq summary::-webkit-details-marker{ display: none; }
:where(body.nmr-page) .nmr-page details.faq summary::marker{ display: none; }
:where(body.nmr-page) .nmr-page details.faq summary:hover{ color: var(--orange-bright); }
:where(body.nmr-page) .nmr-page .faq-icon{
  flex-shrink: 0;
  width: 24px; height: 24px;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  display: grid; place-items: center;
  position: relative;
  margin-top: 0.125rem;
  transition: all 0.2s;
}
:where(body.nmr-page) .nmr-page .faq-icon::before, :where(body.nmr-page) .nmr-page .faq-icon::after{
  content: '';
  position: absolute;
  background: var(--text-dim);
  transition: all 0.2s;
}
:where(body.nmr-page) .nmr-page .faq-icon::before{ width: 10px; height: 1.5px; }
:where(body.nmr-page) .nmr-page .faq-icon::after{ width: 1.5px; height: 10px; }
:where(body.nmr-page) .nmr-page details.faq[open] .faq-icon::after{ transform: rotate(90deg); opacity: 0; }
:where(body.nmr-page) .nmr-page details.faq[open] .faq-icon{ background: var(--orange); border-color: var(--orange); }
:where(body.nmr-page) .nmr-page details.faq[open] .faq-icon::before{ background: white; }
:where(body.nmr-page) .nmr-page .faq-answer{
  margin-top: 1rem;
  padding-left: calc(24px + 1.25rem);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text-dim);
}

:where(body.nmr-page) .nmr-page /* ============ RELATED CASE STUDIES — single capsule ============ */
.related{
  max-width: var(--max-w);
  margin: 0 auto;
  /* No top padding — matches the flush .content sections above */
  padding: 0 2rem clamp(3rem, 6vw, 5rem);
  position: relative;
  z-index: 1;
}
:where(body.nmr-page) .nmr-page .related-capsule{
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 2rem);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  margin-top: 2.5rem;
  background:
    radial-gradient(ellipse 80% 60% at 0% 50%, rgba(245, 138, 34, 0.10), transparent 60%),
    linear-gradient(135deg, var(--bg-elev) 0%, var(--bg-card) 100%);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s, background 0.3s;
  position: relative;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
}
:where(body.nmr-page) .nmr-page .related-capsule::before{
  content: '';
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--orange), var(--orange-bright));
}
:where(body.nmr-page) .nmr-page .related-capsule:hover{
  transform: translateY(-3px);
  border-color: rgba(245, 138, 34, 0.4);
}
:where(body.nmr-page) .nmr-page .related-capsule:hover .related-capsule-arrow{
  transform: translateX(6px);
  color: var(--orange-bright);
}
:where(body.nmr-page) .nmr-page .related-capsule-icon{
  flex-shrink: 0;
  width: 56px; height: 56px;
  border-radius: 12px;
  background: rgba(245, 138, 34, 0.12);
  border: 1px solid rgba(245, 138, 34, 0.3);
  color: var(--orange-bright);
  display: grid; place-items: center;
}
:where(body.nmr-page) .nmr-page .related-capsule-icon svg{ width: 26px; height: 26px; }
:where(body.nmr-page) .nmr-page .related-capsule-body{
  flex: 1;
  min-width: 0;
}
:where(body.nmr-page) .nmr-page .related-capsule-eyebrow{
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 0.4rem;
}
:where(body.nmr-page) .nmr-page .related-capsule-title{
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.125rem, 1.6vw, 1.375rem);
  letter-spacing: -0.01em;
  color: var(--text);
  margin-bottom: 0.5rem;
  line-height: 1.25;
}
:where(body.nmr-page) .nmr-page .related-capsule-sub{
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--text-dim);
  max-width: 720px;
}
:where(body.nmr-page) .nmr-page .related-capsule-arrow{
  flex-shrink: 0;
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  color: var(--text-dim);
  display: grid; place-items: center;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), color 0.3s, border-color 0.3s;
}
:where(body.nmr-page) .nmr-page .related-capsule-arrow svg{ width: 20px; height: 20px; }
@media (max-width: 720px) {
  :where(body.nmr-page) .nmr-page .related-capsule{ flex-direction: column; align-items: flex-start; text-align: left; }
  :where(body.nmr-page) .nmr-page .related-capsule-arrow{ align-self: flex-end; }
}

:where(body.nmr-page) .nmr-page /* ============ CTA ============ */
.cta-band{
  /* Narrower than the page max-width (1200px) so the band reads as a card */
  max-width: 800px;
  margin: 0 auto 6rem;
  padding: 0 2rem 3rem;
  position: relative;
  z-index: 1;
}
:where(body.nmr-page) .nmr-page .cta-inner{
  /* Compact band — reduced vertical padding (was clamp(2.5rem, 5vw, 4rem)
     on all sides) */
  padding: clamp(1.25rem, 2.25vw, 1.75rem) clamp(1.75rem, 3.5vw, 2.5rem);
  background: linear-gradient(135deg, var(--orange) 0%, #c2410c 50%, #7c2d12 100%);
  border-radius: var(--radius-lg);
  text-align: center;
  position: relative;
  overflow: hidden;
}
:where(body.nmr-page) .nmr-page .cta-inner::before{
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 20% 100%, rgba(20, 184, 166, 0.2), transparent 50%),
    radial-gradient(circle at 80% 0%, rgba(255, 255, 255, 0.15), transparent 50%);
  pointer-events: none;
}
:where(body.nmr-page) .nmr-page .cta-inner > *{ position: relative; }
:where(body.nmr-page) .nmr-page .cta-eyebrow{
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
  margin-bottom: 0.75rem;
}
:where(body.nmr-page) .nmr-page .cta-title{
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.5rem, 2.4vw, 1.875rem);
  line-height: 1.2;
  color: white;
  max-width: 640px;
  margin: 0 auto 1rem;
  letter-spacing: -0.02em;
}
:where(body.nmr-page) .nmr-page .cta-sub{
  font-size: 0.9375rem;
  color: rgba(255, 255, 255, 0.9);
  max-width: 560px;
  margin: 0 auto 1.5rem;
  line-height: 1.55;
}
:where(body.nmr-page) .nmr-page .cta-actions{ display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; }
:where(body.nmr-page) .nmr-page .btn{
  padding: 0.875rem 1.75rem;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 500;
  border-radius: 6px;
  transition: all 0.2s;
  cursor: pointer;
}
:where(body.nmr-page) .nmr-page .btn-primary{ background: white; color: var(--bg); }
:where(body.nmr-page) .nmr-page .btn-primary:hover{ background: var(--bg); color: white; transform: translateY(-1px); }
:where(body.nmr-page) .nmr-page .btn-ghost{
  background: transparent;
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.4);
}
:where(body.nmr-page) .nmr-page .btn-ghost:hover{ background: rgba(255, 255, 255, 0.1); border-color: white; }

:where(body.nmr-page) .nmr-page /* ============ FOOTER ============ */
/* Footer uses the global home-page footer styles from /styles.css
   (footer / .foot__top / .foot__col / .foot__bottom / .foot__social).
   No local override here so it matches the homepage footer exactly. */

/* ============ SCROLL ANIMATIONS ============ */
.reveal{
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
:where(body.nmr-page) .nmr-page .reveal.visible{ opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  :where(body.nmr-page) .nmr-page .reveal{ opacity: 1; transform: none; transition: none; }
  :where(body.nmr-page) .nmr-page .visual-header-live::before{ animation: none; }
}

:where(body.nmr-page) .nmr-page /* ============ TECH TAGS ============ */
.tech-tags{ display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 2rem; }
:where(body.nmr-page) .nmr-page .tech-tag{
  padding: 0.375rem 0.875rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  background: var(--bg-elev);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  color: var(--text-dim);
}
:where(body.nmr-page) .nmr-page .tech-tag.accent-orange{ color: var(--orange-bright); border-color: rgba(245, 138, 34, 0.4); }
:where(body.nmr-page) .nmr-page .tech-tag.accent-teal{ color: var(--teal-bright);   border-color: rgba(20, 184, 166, 0.4); }
:where(body.nmr-page) .nmr-page .tech-tag.accent-blue{ color: var(--electric-bright); border-color: rgba(96, 165, 250, 0.4); }

:where(body.nmr-page) /* ============ SLIDE-SYNCED PAGE CONTENT ============
   The carousel stamps data-active-project (wdd | audio | cvvrs) on the
   .nmr-page root (see NmrInteractions.tsx). The per-project blocks below the
   carousel are filtered so the page reads as the active slide's project.
   Cross-project sections (architecture, demo, FAQ, related) stay visible. */

/* Challenge items — tagged .tag-wdd / .tag-audio / .tag-cvvrs */
.nmr-page[data-active-project="wdd"] .challenge-item:not(.tag-wdd), :where(body.nmr-page) .nmr-page[data-active-project="audio"] .challenge-item:not(.tag-audio), :where(body.nmr-page) .nmr-page[data-active-project="cvvrs"] .challenge-item:not(.tag-cvvrs){ display: none; }

:where(body.nmr-page) /* Project overview cards — #wdd-detail / #audio-detail / #cvvrs-detail */
/* (intentionally not filtered — all three overview cards stay visible
   on every slide) */

/* Results / impact cards — theme-orange = WDD, :where(body.nmr-page) theme-blue = Audio, :where(body.nmr-page) theme-teal = CVVRS */
.nmr-page[data-active-project="wdd"] .impact-card:not(.theme-orange), :where(body.nmr-page) .nmr-page[data-active-project="audio"] .impact-card:not(.theme-blue), :where(body.nmr-page) .nmr-page[data-active-project="cvvrs"] .impact-card:not(.theme-teal){ display: none; }

:where(body.nmr-page) /* With a single visible card, :where(body.nmr-page) center it at a readable width */
.nmr-page[data-active-project] .impact-grid{
  grid-template-columns: minmax(0, 760px);
  justify-content: center;
}

:where(body.nmr-page) /* Tech tags — hide the other projects' accent tags; neutral tags are shared */
.nmr-page[data-active-project="wdd"] .tech-tag.accent-teal, :where(body.nmr-page) .nmr-page[data-active-project="wdd"] .tech-tag.accent-blue, :where(body.nmr-page) .nmr-page[data-active-project="audio"] .tech-tag.accent-orange, :where(body.nmr-page) .nmr-page[data-active-project="audio"] .tech-tag.accent-teal, :where(body.nmr-page) .nmr-page[data-active-project="cvvrs"] .tech-tag.accent-orange, :where(body.nmr-page) .nmr-page[data-active-project="cvvrs"] .tech-tag.accent-blue{ display: none; }

:where(body.nmr-page) /* Soften the swap — fade the lists when the active project changes */
.nmr-page .challenge-list, :where(body.nmr-page) .nmr-page .projects-grid, :where(body.nmr-page) .nmr-page .impact-grid, :where(body.nmr-page) .nmr-page .tech-tags{ transition: opacity 0.3s ease; }

:where(body.nmr-page) /* Demo blocks — one per project, :where(body.nmr-page) synced to the active slide like the rest
   of the page. The video styles replace the old inline styles on the single
   audio demo block. */
.nmr-page .demo-block{ display: none; }
:where(body.nmr-page) .nmr-page[data-active-project="wdd"] .demo-block.tag-wdd, :where(body.nmr-page) .nmr-page[data-active-project="audio"] .demo-block.tag-audio, :where(body.nmr-page) .nmr-page[data-active-project="cvvrs"] .demo-block.tag-cvvrs{ display: block; }
:where(body.nmr-page) /* Before JS stamps the attribute (first paint), :where(body.nmr-page) show the WDD demo (slide 1) */
.nmr-page:not([data-active-project]) .demo-block.tag-wdd{ display: block; }

:where(body.nmr-page) .nmr-page .demo-video-wrap{
  margin: 2.5rem auto 0;
  max-width: 900px;
}
:where(body.nmr-page) .nmr-page .demo-video-wrap video{
  width: 100%;
  border-radius: 16px;
  display: block;
  background: #000;
  border: 1px solid var(--border-strong);
}