/* ============================================================
   muh-about.css
   Extracted from muh-about.html — all <style> blocks in
   document order, each labelled by originating section.
   ============================================================ */


/* ────────────────────────────────────────────────────────────
   BLOCK 1 — <head> global styles
   ──────────────────────────────────────────────────────────── */

/* ── Reset for WordPress compatibility ── */
body {
  font-family: 'Outfit', sans-serif !important;
  margin: 0 !important;
  padding: 0 !important;
  max-width: 100% !important;
}


/* ═══════════════════════════════════════════
   HERO SECTION — headline + embedded video
   ═══════════════════════════════════════════ */

.muh-hero {
  padding: 5rem var(--section-px) 5.5rem;
}

.muh-hero-inner {
  max-width: var(--section-max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 4.5rem;
  align-items: center;
}

.muh-hero-h1 {
  font-size: clamp(2.5rem, 5vw, 4.25rem);
  font-weight: 800;
  color: var(--color-navy);
  line-height: 1.04;
  letter-spacing: -0.035em;
  margin: 0 0 1.5rem;
}

.muh-hero-lead {
  font-size: 1.0625rem;
  font-weight: 300;
  color: var(--color-text);
  line-height: 1.8;
  margin: 0 0 1rem;
  max-width: 46ch;
}
/* Only the last paragraph gets the larger gap before the CTA */
.muh-hero-lead:last-of-type {
  margin-bottom: 2.25rem;
}

/* Inline play CTA — left column */
.muh-play-cta {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  color: var(--color-navy);
  font-size: 0.9375rem;
  font-weight: 600;
  font-family: 'Outfit', sans-serif;
  letter-spacing: -0.01em;
  -webkit-tap-highlight-color: transparent;
  transition: color 200ms var(--ease-out);
}
.muh-play-cta:hover { color: #a8535f; }
.muh-play-cta:focus-visible {
  outline: 2px solid var(--color-rose);
  outline-offset: 4px;
  border-radius: 4px;
}

.muh-play-cta-icon {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--color-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 16px rgba(9,33,64,0.22);
  transition: background 200ms var(--ease-out), transform 220ms var(--ease-out), box-shadow 200ms var(--ease-out);
}
.muh-play-cta-icon i {
  font-size: 0.875rem;
  color: var(--color-rose);
  margin-left: 3px;
}
.muh-play-cta:hover .muh-play-cta-icon {
  background: #a8535f;
  transform: scale(1.1);
  box-shadow: 0 6px 20px rgba(168,83,95,0.3);
}

/* Video column */
.muh-hero-video-col { width: 100%; }

.muh-video-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  overflow: hidden;
  box-shadow:
    0 2px 0 rgba(9,33,64,0.05),
    0 8px 48px rgba(9,33,64,0.18);
}

.muh-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Poster overlay — transparent so first video frame shows through */
.muh-video-poster {
  position: absolute;
  inset: 0;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 320ms var(--ease-out);
}
.muh-video-poster.hidden {
  opacity: 0;
  pointer-events: none;
}

/* Play button on video */
.muh-video-play-btn {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: rgba(255,255,255,0.96);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 28px rgba(9,33,64,0.3);
  transition: transform 200ms var(--ease-out), box-shadow 200ms var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.muh-video-play-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 8px 36px rgba(9,33,64,0.38);
}
.muh-video-play-btn:focus-visible {
  box-shadow: 0 0 0 3px rgba(222,165,174,0.55), 0 4px 28px rgba(9,33,64,0.3);
  outline: none;
}

.muh-play-icon-wrap { display: contents; }
.muh-play-icon {
  font-size: 1.5rem;
  color: var(--color-navy);
  margin-left: 4px;
}

/* Playback controls */
.muh-video-controls {
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  display: flex;
  gap: 0.5rem;
  z-index: 10;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 280ms var(--ease-out), transform 280ms var(--ease-out);
  pointer-events: none;
}
.muh-video-controls.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.muh-video-control-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(9,33,64,0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.15);
  color: #fff;
  font-size: 0.8rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 180ms var(--ease-out), transform 180ms var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.muh-video-control-btn:hover {
  background: rgba(222,165,174,0.9);
  transform: scale(1.1);
}
.muh-video-control-btn:focus-visible {
  box-shadow: 0 0 0 2px rgba(222,165,174,0.6);
  outline: none;
}

@media (max-width: 860px) {
  .muh-hero {
    padding: var(--section-py-mob) var(--section-px-mob) 3.5rem;
  }
  .muh-hero-inner {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  /* Video first on mobile — immediate visual impact */
  .muh-hero-video-col { order: -1; }
  .muh-video-frame { border-radius: 12px; }
  .muh-hero-h1 { margin-bottom: 1rem; }
  .muh-hero-lead { margin-bottom: 1.75rem; }
  .muh-video-control-btn { width: 36px; height: 36px; font-size: 0.75rem; }
}

/* ── Wave divider ── */
/* ── Shared page layout tokens ── */
:root {
  --section-px:      3rem;      /* horizontal padding */
  --section-py:      5.5rem;    /* vertical padding */
  --section-px-mob:  1.5rem;
  --section-py-mob:  3.5rem;
  --section-max-w:   72rem;
  --color-navy:      #092140;
  --color-rose:      #dea5ae;
  --color-rose-pale: #f7eef0;
  --color-text:      #3a4a60;
  --ease-out:        cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out:     cubic-bezier(0.77, 0, 0.175, 1);
}


/* ── Unified eyebrow label ── */
.muh-eyebrow {
  display: block;
  color: #a8535f;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: 1rem;
  font-family: 'Outfit', sans-serif;
}
.page-seal { background: #ffffff; height: 32px; display: block; margin: 0; padding: 0; }

.muh-wave {
  display: block;
  width: 100%;
  overflow: hidden;
  line-height: 0;
  /* Pull up and down by 1px to kill the sub-pixel gap the browser
     leaves between a section's background and the wave wrapper */
  margin: -1px 0;
  padding: 0;
  /* Ensure the wave sits directly on top of adjacent sections */
  position: relative;
  z-index: 1;
}
.muh-wave svg {
  display: block;
  width: 100%;
  /* Extra px so the SVG fill bleeds to the very edge */
  margin-bottom: -1px;
}

/* ── Scroll reveal ── */
@media (prefers-reduced-motion: no-preference) {
  .muh-up {
    opacity: 0;
    transform: translateY(28px);
    transition:
      opacity  0.7s cubic-bezier(0.16, 1, 0.3, 1),
      transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .muh-up.on { opacity: 1; transform: translateY(0); }
}

/* ── Image: soft inset vignette ── */
.muh-img-wrap {
  position: relative;
  overflow: hidden;
}
.muh-img-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 0 1px rgba(9,33,64,0.08);
  pointer-events: none;
}

/* ── Left-to-right reveal ── */
.muh-reveal-lr {
  min-height: 420px;
  background: #f0e8ea;
}
.muh-reveal-lr img {
  position: absolute;
  inset: 0;
  animation: muh-img-wipe 1200ms cubic-bezier(0.77, 0, 0.175, 1) 0.15s both;
}
@keyframes muh-img-wipe {
  from {
    clip-path: inset(0 100% 0 0);
    transform: scale(1.06);
  }
  to {
    clip-path: inset(0 0% 0 0);
    transform: scale(1);
  }
}
@media (prefers-reduced-motion: reduce) {
  .muh-reveal-lr img {
    animation-duration: 0.01ms;
    animation-delay: 0ms;
  }
}

/* ── Stat item ── */
.muh-stat-num {
  font-size: 2.25rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
}
.muh-stat-label {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-top: 4px;
  color: #7a8fa8;
}

/* ── Pill badge ── */
.muh-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(9,33,64,0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  padding: 7px 14px;
  border-radius: 99px;
  border: 1px solid rgba(255,255,255,0.12);
  white-space: nowrap;
}
.muh-badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #dea5ae;
  flex-shrink: 0;
}

.muh-badge-logo {
  height: 22px;
  width: auto;
  flex-shrink: 0;
  filter: brightness(0) invert(1);
  opacity: 0.9;
}

.muh-badge-sep {
  display: block;
  width: 1px;
  height: 12px;
  background: rgba(255,255,255,0.22);
  flex-shrink: 0;
}

/* ── Meem Foundation mark — floated over image ── */
.muh-meem-mark {
  position: absolute;
  bottom: 20px;
  left: 24px;
  height: 28px;
  width: auto;
  filter: drop-shadow(0 1px 4px rgba(0,0,0,0.35));
  opacity: 0.92;
}
@media (prefers-reduced-motion: no-preference) {
  .muh-badge-dot {
    animation: badge-dot-pulse 2.4s cubic-bezier(0.37,0,0.63,1) infinite;
  }
  @keyframes badge-dot-pulse {
    0%, 100% { transform: scale(1);   opacity: 1; }
    50%       { transform: scale(1.6); opacity: 0.65; }
  }
}


/* ────────────────────────────────────────────────────────────
   BLOCK 2 — #muh-objectives section styles
   ──────────────────────────────────────────────────────────── */

#muh-objectives {
  --eo:  cubic-bezier(0.23, 1, 0.32, 1);   /* strong ease-out — entries, hovers */
  --ei:  cubic-bezier(0.77, 0, 0.175, 1);   /* sharp ease-in-out — swipe-out */
  --navy: #092140;
  --rose: #dea5ae;
  --rose-pale: #f7eef0;
}

/* ── Mobile-native baseline ── */
#muh-objectives * { -webkit-tap-highlight-color: transparent; }
#muh-objectives button, #muh-objectives .obj-node {
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

/* ── Scroll-pin shell — JS drives position:fixed via RAF (see muh-about.js) ── */
#obj-scroll-shell { position: relative; height: 300vh; }
#obj-sticky {
  position: relative; top: 0;
  height: 100vh;   /* fallback */
  height: 100svh;  /* svh: stable, no jump when URL bar shows */
  display: flex; align-items: center;
  background: #f7eef0; overflow: visible;
}
/* Scroll hint is only relevant to scroll-pin; hide it */
.obj-scroll-hint { display: none !important; }

.obj-wrap { max-width: 76rem; margin: 0 auto; padding: 0 3rem; width: 100%; }
.obj-header { margin-bottom: 2.5rem; }
.obj-layout { display: grid; grid-template-columns: 440px 1fr; gap: 4rem; align-items: center; }

/* ── Heart ── */
.obj-heart-wrap { position: relative; width: 400px; height: 370px; margin: 0 auto; }
.obj-heart-svg  { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }

.obj-heart-fill     { fill: #f7eef0; opacity: 0.55; }
.obj-heart-stroke   { fill:none; stroke:rgba(222,165,174,0.28); stroke-width:1.5; }
.obj-heart-progress {
  fill: none; stroke: #dea5ae; stroke-width: 3; stroke-linecap: round;
  /* Synced with icon swap (155ms delay + 340ms anim ≈ 500ms total visible change) */
  transition: stroke-dashoffset 420ms cubic-bezier(0.23,1,0.32,1);
}

/* ── Center icon ── */
.obj-center {
  position: absolute; top: 44%; left: 50%;
  transform: translate(-50%,-50%);
  width: 118px; height: 118px; border-radius: 50%;
  background: #092140;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 32px rgba(9,33,64,0.26);
  pointer-events: none;
}
.obj-center i { font-size:2.2rem; color:#dea5ae; }
/* Exit: shrink past zero with a slight overshoot feel */
.obj-center i.obj-icon-exit {
  animation: obj-icon-exit 160ms cubic-bezier(0.55,0,1,0.45) forwards;
}
@keyframes obj-icon-exit {
  0%   { opacity:1; transform:scale(1); }
  70%  { opacity:0; transform:scale(0.5); }
  100% { opacity:0; transform:scale(0.45); }
}
/* Enter: spring in with overshoot */
.obj-center i.obj-icon-enter {
  animation: obj-icon-enter 360ms cubic-bezier(0.23,1,0.32,1) forwards;
}
@keyframes obj-icon-enter {
  0%   { opacity:0; transform:scale(0.44); }
  55%  { transform:scale(1.13); }
  100% { opacity:1; transform:scale(1); }
}

/* ── Nodes — styled to match the center circle ── */
.obj-node {
  position: absolute; width:56px; height:56px; border-radius:50%;
  background:#092140; border:none;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; outline:none; transform:translate(-50%,-50%);
  box-shadow: 0 4px 16px rgba(9,33,64,0.22);
  transition:
    box-shadow   160ms var(--eo),
    transform    200ms var(--eo),
    background   160ms var(--eo);
}
.obj-node i { font-size:1.1rem; color:#dea5ae; transition:color 160ms var(--eo), transform 160ms var(--eo); pointer-events:none; }
@media (hover:hover) and (pointer:fine) {
  .obj-node:hover {
    box-shadow:0 6px 24px rgba(9,33,64,0.32);
    transform:translate(-50%,-50%) scale(1.12);
  }
  .obj-node:hover i { transform: scale(1.1); }
}
.obj-node:active        { transform:translate(-50%,-50%) scale(0.91); transition-duration:80ms; }
.obj-node:focus-visible { box-shadow:0 0 0 3px rgba(222,165,174,0.45); }
.obj-node.obj-node-active {
  background:#dea5ae;
  box-shadow:0 6px 24px rgba(222,165,174,0.45);
  transform:translate(-50%,-50%) scale(1.18);
}
.obj-node.obj-node-active i { color:#092140; }

/* ── Change indicator badge ── */
.obj-change-badge {
  position: absolute; top: -12px; right: -12px;
  width: 38px; height: 38px; border-radius: 50%;
  background: #dea5ae;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transform: scale(0.4); pointer-events: none; z-index: 10;
}
.obj-change-badge i { font-size:0.85rem; color:#092140; }
.obj-change-badge.obj-badge-flash {
  /* 600ms total: pop in (200ms) → hold (150ms) → fade out (250ms) */
  animation: obj-badge-in 600ms cubic-bezier(0.23,1,0.32,1) forwards;
}
@keyframes obj-badge-in {
  0%   { opacity:0; transform:scale(0.3); }
  30%  { opacity:1; transform:scale(1.1); }
  50%  { opacity:1; transform:scale(1); }
  100% { opacity:0; transform:scale(0.82); }
}

/* ── Scroll hint ── */
.obj-scroll-hint {
  position:absolute; bottom:1.75rem; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:5px;
  opacity:1; transition:opacity 500ms var(--eo); pointer-events:none;
}
.obj-scroll-hint.hidden { opacity:0; }
.obj-scroll-hint span { font-size:0.6rem; font-weight:600; letter-spacing:0.18em; text-transform:uppercase; color:rgba(9,33,64,0.30); }
.obj-scroll-hint svg  { animation:obj-bop 1.6s cubic-bezier(0.37,0,0.63,1) infinite; }
@keyframes obj-bop { 0%,100%{transform:translateY(0)} 50%{transform:translateY(6px)} }

/* ── Detail panel (desktop) ── */
.obj-detail { position:relative; min-height:340px; }

/* All desktop cards: invisible, shifted down */
.obj-card {
  position:absolute; inset:0;
  display:flex; flex-direction:column; gap:1.5rem;
  opacity:0; transform:translateY(20px) scale(0.99); pointer-events:none;
  background:#ffffff;
  border-radius:20px;
  border:1.5px solid rgba(9,33,64,0.07);
  padding:2.25rem 2.5rem;
  box-shadow:0 2px 0 rgba(9,33,64,0.04), 0 4px 20px rgba(9,33,64,0.06);
  transition:
    opacity    280ms var(--eo),
    transform  320ms var(--eo),
    box-shadow 280ms var(--eo);
}
/* Active: fade + slide up + slight scale to 1.0 */
.obj-card.obj-card-active {
  opacity:1; transform:translateY(0) scale(1); pointer-events:auto; position:relative;
  box-shadow:0 2px 0 rgba(9,33,64,0.04), 0 12px 48px rgba(9,33,64,0.10);
}
/* Exit: fade out + slide up + scale down slightly */
.obj-card.obj-card-exit {
  opacity:0; transform:translateY(-12px) scale(0.98);
  transition: opacity 140ms ease-in, transform 160ms ease-in;
}

/* Card typography */
.obj-card-num   { font-size:0.625rem; font-weight:700; letter-spacing:0.2em; text-transform:uppercase; color:#dea5ae; }
.obj-card-title { font-size:clamp(1.3rem,2vw,1.9rem); font-weight:800; color:#092140; line-height:1.12; letter-spacing:-0.025em; margin:0; }
.obj-card-body  { font-size:1rem; font-weight:400; color:#3a4a60; line-height:1.8; margin:0; max-width:50ch; }

/* Step pips */
.obj-step-counter { display:flex; align-items:center; gap:8px; margin-top:auto; padding-top:1rem; }
.obj-step-pip {
  width:24px; height:2.5px; border-radius:99px;
  background:rgba(9,33,64,0.10);
  transition: background 240ms var(--eo), width 240ms var(--eo);
}
.obj-step-pip.active { background:#dea5ae; width:44px; }

/* Tap hint: hidden on desktop */
.obj-tap-hint { display:none; }

/* ── Mobile: card stack shuffle ── */
@media (max-width:860px) {
  #obj-scroll-shell { height:auto; }
  #obj-sticky {
    position:relative; height:auto; display:block;
    padding:1.5rem 0 2.5rem; overflow:visible;
  }
  .obj-layout { grid-template-columns:1fr; gap:1.25rem; }
  .obj-heart-wrap { width:260px; height:240px; }
  .obj-center { width:80px; height:80px; }
  .obj-center i { font-size:1.5rem; }
  .obj-node { width:42px; height:42px; }
  .obj-node i { font-size:0.85rem; }
  .obj-scroll-hint { display:none; }
  .obj-header { margin-bottom:1.25rem; }

  /* Card stack container — min-height so long cards never clip */
  .obj-detail {
    height: auto;
    min-height: 340px;
    position: relative;
    margin: 0 1.25rem;
    touch-action: pan-y;
    cursor: pointer;
    overflow: visible;    /* let rotated back-cards peek out */
  }

  /* ALL cards: invisible until JS assigns a stack class */
  .obj-card {
    position: absolute !important;
    inset: 0 !important;  /* fill the fixed-height container */
    opacity: 0;
    transform: translateX(28px) rotate(7.5deg);
    pointer-events: none;
    padding: 1.25rem 1.25rem 1rem;
    border-radius: 18px;
    gap: 0.875rem;
    will-change: transform, opacity;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    overflow: hidden;
    transition:
      transform 360ms cubic-bezier(0.23,1,0.32,1),
      opacity   260ms cubic-bezier(0.23,1,0.32,1),
      box-shadow 260ms cubic-bezier(0.23,1,0.32,1);
  }

  /* Active: top of deck */
  .obj-card.obj-card-active {
    pointer-events: auto;
    z-index: 5;
    opacity: 1;
    transform: translateX(0) rotate(0deg) scale(1);
    box-shadow: 0 2px 0 rgba(9,33,64,0.04), 0 10px 36px rgba(9,33,64,0.13);
  }

  /* Cards peeking behind */
  .obj-card.obj-stack-1 { z-index:4; transform:translateX(9px)  rotate(2.8deg);  opacity:0.65; box-shadow:0 2px 12px rgba(9,33,64,0.07); }
  .obj-card.obj-stack-2 { z-index:3; transform:translateX(16px) rotate(4.8deg);  opacity:0.38; box-shadow:none; }
  .obj-card.obj-stack-3 { z-index:2; transform:translateX(22px) rotate(6.5deg);  opacity:0.18; box-shadow:none; }
  .obj-card.obj-stack-hidden { z-index:1; transform:translateX(28px) rotate(7.5deg); opacity:0; }

  /* Swipe-out */
  .obj-card.obj-swipe-out {
    transform: translateX(-115%) rotate(-14deg) !important;
    opacity: 0 !important;
    transition:
      transform 280ms cubic-bezier(0.77,0,0.175,1),
      opacity   180ms ease-in !important;
  }

  /* Snap to back of deck */
  .obj-card.obj-swipe-in-back {
    transform: translateX(30px) rotate(8deg);
    opacity: 0;
    transition: none !important;
  }

  /* Tap hint */
  .obj-tap-hint {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: auto;
    padding-top: 0.5rem;
    border-top: 1px solid rgba(9,33,64,0.07);
  }
  .obj-tap-hint span {
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: rgba(9,33,64,0.32);
  }
  .obj-tap-hint i {
    font-size: 0.65rem;
    color: #dea5ae;
    animation: obj-tap-pulse 2.2s cubic-bezier(0.37,0,0.63,1) infinite;
  }
  @keyframes obj-tap-pulse {
    0%,100% { opacity:0.4; transform:translateX(0); }
    50%     { opacity:1;   transform:translateX(4px); }
  }

  /* Step pips */
  .obj-step-counter { margin-top:auto; padding-top:0.5rem; }
  .obj-step-pip { width:20px; }
  .obj-step-pip.active { width:32px; }

  /* Badge */
  .obj-change-badge { top:-14px; right:-14px; width:40px; height:40px; }
}


/* ────────────────────────────────────────────────────────────
   BLOCK 3 — Pillars section / end-of-body responsive styles
   ──────────────────────────────────────────────────────────── */

/* ── Pillar cards ── */
.muh-pillar-card {
  box-shadow: 0 4px 0 rgba(9,33,64,0.05), 0 8px 32px rgba(9,33,64,0.08);
  transition:
    transform  260ms cubic-bezier(0.23,1,0.32,1),
    box-shadow 260ms cubic-bezier(0.23,1,0.32,1);
  cursor: default;
}
@media (hover: hover) and (pointer: fine) {
  .muh-pillar-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 4px 0 rgba(9,33,64,0.05), 0 20px 52px rgba(9,33,64,0.13);
  }
}
.muh-pillar-card:active {
  transform: translateY(-2px) scale(0.97);
  transition-duration: 120ms;
}

@media (max-width:768px) {
  #pil-grid { grid-template-columns:1fr !important; gap:1.25rem !important; }
  #pil-grid > div { margin-top:0 !important; }
}

/* ── Responsive grid collapse ── */
@media (max-width: 767px) {
  .muh-grid-responsive {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }
  .muh-img-wrap { aspect-ratio: 16/10 !important; }
}


/* ═══════════════════════════════════════════
   CERTIFICATES SECTION — Fillable cards
   ═══════════════════════════════════════════ */

#muh-certs { --eo: cubic-bezier(0.23, 1, 0.32, 1); }

.cert-wrap {
  max-width: 80rem;
  margin: 0 auto;
  padding: var(--section-py) var(--section-px);
}

/* ── Header ── */
.cert-header { margin-bottom: 3rem; }

/* .cert-eyebrow replaced by .muh-eyebrow */
.cert-headline {
  color: #092140;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.025em;
  margin: 0 0 0.875rem;
}
.cert-subhead {
  color: #3a4a60;
  font-size: 0.9375rem;
  line-height: 1.7;
  margin: 0;
}


/* ── Certificate progress bar ── */
.cert-prog-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 1.75rem;
}
.cert-prog-track {
  height: 3px;
  background: rgba(9,33,64,0.10);
  border-radius: 99px;
  overflow: hidden;
}
.cert-prog-fill {
  height: 100%;
  background: #dea5ae;
  border-radius: 99px;
  width: 0%;
  transition: width linear;
}
.cert-prog-labels {
  display: flex;
  gap: 8px;
}
.cert-prog-dot {
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(9,33,64,0.35);
  background: rgba(9,33,64,0.06);
  border: none;
  border-radius: 99px;
  padding: 0.3rem 0.65rem;
  cursor: pointer;
  font-family: 'Outfit', sans-serif;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: background 180ms cubic-bezier(0.23,1,0.32,1), color 180ms cubic-bezier(0.23,1,0.32,1);
}
.cert-prog-dot.active {
  background: #dea5ae;
  color: #092140;
}
.cert-prog-dot:focus-visible {
  box-shadow: 0 0 0 3px rgba(222,165,174,0.4);
  outline: none;
}
@media (max-width: 860px) {
  .cert-prog-labels { flex-wrap: wrap; }
  .cert-prog-dot { font-size: 0.55rem; padding: 0.25rem 0.6rem; }
}

/* ── Card row ── */
.cert-row {
  display: flex;
  gap: 12px;
  align-items: stretch;
  height: auto;
}

/* ── Individual fillable card ── */
.cert-fc {
  /* collapsed default */
  flex: 0.65;
  min-width: 72px;
  border-radius: 20px;
  background: #fff;
  border: 1.5px solid rgba(9,33,64,0.08);
  overflow: hidden;
  cursor: pointer;
  outline: none;
  position: relative;
  display: flex;
  flex-direction: column;
  /* All cards fill the full row height */
  height: 100%;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition:
    flex        480ms cubic-bezier(0.23, 1, 0.32, 1),
    box-shadow  300ms cubic-bezier(0.23, 1, 0.32, 1),
    border-color 300ms cubic-bezier(0.23, 1, 0.32, 1);
}

@media (hover: hover) and (pointer: fine) {
  .cert-fc:not(.cert-fc-active):hover {
    flex: 0.85;
    border-color: rgba(222,165,174,0.35);
    box-shadow: 0 4px 20px rgba(222,165,174,0.15);
  }
}

.cert-fc:focus-visible {
  box-shadow: 0 0 0 3px rgba(222,165,174,0.45);
}
.cert-fc:active:not(.cert-fc-active) {
  transform: scale(0.98);
  transition-duration: 100ms;
}

/* Active / expanded card */
.cert-fc.cert-fc-active {
  flex: 3;
  border-color: rgba(222,165,174,0.50);
  box-shadow:
    0 2px 0 rgba(9,33,64,0.04),
    0 16px 56px rgba(222,165,174,0.22),
    0 4px 24px rgba(9,33,64,0.08);
  cursor: default;
}

/* ── Collapsed state (icon + rotated label) ── */
.cert-fc-collapsed {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 2rem 0;
  flex: 1;
  opacity: 1;
  transition: opacity 200ms ease-in;
}
.cert-fc-active .cert-fc-collapsed {
  opacity: 0;
  pointer-events: none;
  position: absolute;
  inset: 0;
}

.cert-fc-abbr {
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #092140;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
}

/* .cert-fc-short removed (dead class) */

/* ── Icon circle (collapsed) ── */
.cert-fc-icon {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(222,165,174,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 200ms var(--eo);
}
.cert-fc-icon i { font-size: 1.05rem; color: #dea5ae; }
.cert-fc-active .cert-fc-icon { background: #dea5ae; }
.cert-fc-active .cert-fc-icon i { color: #fff; }

/* ── Expanded content ── */
.cert-fc-content {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 2.25rem 2.25rem 2.25rem;
  opacity: 0;
  clip-path: inset(0 0 0 100%);
  transition:
    opacity    320ms cubic-bezier(0.23, 1, 0.32, 1),
    clip-path  380ms cubic-bezier(0.23, 1, 0.32, 1);
  transition-delay: 0.12s;
  white-space: normal;
  min-width: 0;
  overflow: hidden;
}
.cert-fc-active .cert-fc-content {
  opacity: 1;
  clip-path: inset(0 0 0 0%);
}
/* Exit: fast wipe back right (no delay) */
.cert-fc-leaving .cert-fc-content {
  opacity: 0;
  clip-path: inset(0 0 0 100%);
  transition:
    opacity   160ms cubic-bezier(0.55, 0, 1, 0.45),
    clip-path 200ms cubic-bezier(0.55, 0, 1, 0.45);
  transition-delay: 0s;
}
/* Collapsed cards: pull content out of layout so row height fits the active card only */
.cert-fc:not(.cert-fc-active):not(.cert-fc-leaving) .cert-fc-content {
  height: 0;
  padding: 0;
  gap: 0;
  overflow: hidden;
}

/* top row: icon + title */
.cert-fc-top {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.cert-fc-icon-lg {
  width: 52px; height: 52px;
  border-radius: 14px;
  background: linear-gradient(135deg, #dea5ae, #f0b8c8);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 16px rgba(222,165,174,0.45);
  /* Pop in when card expands */
  animation: none;
}
.cert-fc-active .cert-fc-icon-lg {
  animation: cert-icon-pop 380ms cubic-bezier(0.23,1,0.32,1) 0.16s both;
}
@keyframes cert-icon-pop {
  0%   { transform: scale(0.55); opacity: 0.4; }
  60%  { transform: scale(1.12); }
  100% { transform: scale(1);    opacity: 1; }
}
.cert-fc-icon-lg i { font-size: 1.2rem; color: #fff; }

.cert-fc-title {
  font-size: clamp(1rem, 1.4vw, 1.3rem);
  font-weight: 800;
  color: #092140;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 0;
}

.cert-fc-desc {
  font-size: 0.875rem;
  color: #3a4a60;
  line-height: 1.75;
  margin: 0;

  /* Stagger after content appears */
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 260ms var(--eo), transform 280ms var(--eo);
  transition-delay: 0.28s;
}
.cert-fc-active .cert-fc-desc {
  opacity: 1;
  transform: translateY(0);
}

.cert-fc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  border-top: 1px solid rgba(9,33,64,0.07);
  padding-top: 1rem;
  margin-top: auto;
}
.cert-fc-list li {
  font-size: 0.8125rem;
  color: #3a4a60;
  line-height: 1.4;
  padding-left: 1rem;
  position: relative;
  /* stagger in */
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 220ms var(--eo), transform 240ms var(--eo);
}
.cert-fc-list li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.45em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #dea5ae;
}
.cert-fc-active .cert-fc-list li { opacity: 1; transform: translateX(0); }
.cert-fc-active .cert-fc-list li:nth-child(1) { transition-delay: 0.34s; }
.cert-fc-active .cert-fc-list li:nth-child(2) { transition-delay: 0.40s; }
.cert-fc-active .cert-fc-list li:nth-child(3) { transition-delay: 0.46s; }
.cert-fc-active .cert-fc-list li:nth-child(4) { transition-delay: 0.52s; }

/* ── Mobile: vertical stack ── */
@media (max-width: 860px) {
  .cert-wrap { padding: var(--section-py-mob) var(--section-px-mob); }
  .cert-row {
    flex-direction: column;
    min-height: unset;
    gap: 10px;
  }
  .cert-fc {
    flex: none !important;
    min-width: unset;
  }
  /* Collapsed cards show as compact rows */
  .cert-fc:not(.cert-fc-active) {
    height: 68px;
  }
  .cert-fc-collapsed {
    flex-direction: row;
    padding: 0 1.25rem;
    gap: 12px;
    height: 68px;
  }
  .cert-fc-abbr { writing-mode: horizontal-tb; transform: none; font-size: 0.625rem; }
  /* .cert-fc-short removed (dead class) */
  .cert-fc-icon { width: 36px; height: 36px; }
  .cert-fc-icon i { font-size: 0.875rem; }
  .cert-fc-active .cert-fc-collapsed { display: none; }
  .cert-fc-content {
    clip-path: inset(0 0 100% 0);
    transition:
      opacity   320ms var(--eo),
      clip-path 380ms var(--eo);
    transition-delay: 0.08s;
  }
  .cert-fc-active .cert-fc-content { clip-path: inset(0 0 0% 0); }
  /* active card content height auto */
  .cert-fc-active { height: auto; }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .cert-fc { transition: flex 0ms, box-shadow 0ms, border-color 0ms; }
  .cert-fc-content { transition: opacity 200ms ease; clip-path: none !important; }
  .cert-fc-active .cert-fc-content { clip-path: none; }
  .cert-fc-desc, .cert-fc-list li { transition: opacity 200ms ease; transform: none !important; }
  .cert-fc-active .cert-fc-icon-lg { animation: none; }
}


/* ═══════════════════════════════════════════
   PHASE 1 SECTION (#muh-phase1)
   ═══════════════════════════════════════════ */

#muh-phase1 { --eo: cubic-bezier(0.23, 1, 0.32, 1); }

.ph1-wrap {
  max-width: 76rem;
  margin: 0 auto;
  padding: var(--section-py) var(--section-px);
}

/* ── Header ── */
.ph1-header { margin-bottom: 3.5rem; max-width: 60ch; }

/* .ph1-eyebrow replaced by .muh-eyebrow */
.ph1-headline {
  color: #092140;
  font-size: clamp(2rem, 3.5vw, 2.75rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.03em;
  margin: 0 0 1rem;
}
.ph1-subhead {
  color: #3a4a60;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.8;
  margin: 0 0 1.75rem;
}
.ph1-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #092140;
  font-size: 0.875rem;
  font-weight: 700;
  text-decoration: none;
  border-bottom: 2px solid #dea5ae;
  padding-bottom: 2px;
  transition: color 180ms var(--eo);
  -webkit-tap-highlight-color: transparent;
}
@media (hover: hover) and (pointer: fine) {
  .ph1-link:hover { color: #dea5ae; }
  .ph1-link:hover i { transform: translateX(4px); }
}
.ph1-link i { font-size: 0.75rem; transition: transform 200ms var(--eo); }

/* ────────────────────────────────────────────
   UNIFORM GALLERY — 4-column equal grid, auto-placed
   ──────────────────────────────────────────── */
.ph1-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  padding: 4px;
  margin: -4px;
}

/* Shared tile style */
.ph1-t {
  position: relative;
  overflow: hidden;
  border-radius: 0;
  background: #f0e8ea;
  aspect-ratio: 4 / 3;  /* all tiles identical size — no spanning needed */
  /* popup entrance: scale up from 0.94 + fade in */
  opacity: 0;
  transform: scale(0.94) translateY(10px);
  transition:
    opacity   0.6s cubic-bezier(0.23, 1, 0.32, 1),
    transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}
.ph1-t.on { opacity: 1; transform: scale(1) translateY(0); }

.ph1-t img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* 400ms feels responsive on hover; 600ms was too slow for feedback */
  transition: transform 400ms cubic-bezier(0.23, 1, 0.32, 1);
}
@media (hover: hover) and (pointer: fine) {
  .ph1-t:hover img { transform: scale(1.06); }
  .ph1-t:hover .ph1-overlay { opacity: 1; }
}

/* Rotation vars kept at zero; .on state resolves to the same as scale(1) translateY(0) */
.ph1-rotate-neg { --r: 0deg; }
.ph1-rotate-pos { --r: 0deg; }
.ph1-rotate-neg.on { transform: scale(1) translateY(0); }
.ph1-rotate-pos.on { transform: scale(1) translateY(0); }

/* Caption overlay */
.ph1-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(9,33,64,0.60) 0%, transparent 50%);
  display: flex;
  align-items: flex-end;
  padding: 1rem 1.25rem;
  opacity: 0;
  transition: opacity 260ms cubic-bezier(0.23, 1, 0.32, 1);
}
.ph1-overlay span {
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
}

/* Stagger delays */
.ph1-t-a { transition-delay: 0.04s; }
.ph1-t-b { transition-delay: 0.10s; }
.ph1-t-c { transition-delay: 0.16s; }
.ph1-t-d { transition-delay: 0.22s; }
.ph1-t-e { transition-delay: 0.28s; }
.ph1-t-f { transition-delay: 0.34s; }
.ph1-t-g { transition-delay: 0.40s; }

/* Uniform grid — auto-placement handles all 7 tiles equally, no explicit positions needed */

/* ── Mobile: 2-col uniform grid ── */
@media (max-width: 860px) {
  .ph1-wrap { padding: var(--section-py-mob) var(--section-px-mob); }
  .ph1-gallery {
    grid-template-columns: repeat(2, 1fr);
    padding: 0;
    margin: 0;
  }
  .ph1-t {
    border-radius: 0;
    /* aspect-ratio: 4/3 inherited from base — no override needed */
  }
}

@media (prefers-reduced-motion: reduce) {
  /* Skip the scale popup — just fade, no movement */
  .ph1-t {
    transform: none !important;
    transition: opacity 200ms ease;
  }
  .ph1-t img { transition: none; }
}


/* ═══════════════════════════════════════════
   RESOURCES SECTION (#muh-resources)
   ═══════════════════════════════════════════ */

#muh-resources { --eo: cubic-bezier(0.23, 1, 0.32, 1); }

.res-wrap {
  max-width: 72rem;
  margin: 0 auto;
  padding: var(--section-py) var(--section-px);
}

/* ── Header ── */
.res-header { margin-bottom: 2.5rem; }

/* .res-eyebrow replaced by .muh-eyebrow */

.res-headline {
  color: #092140;
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.025em;
  margin: 0;
}

/* ── Grid ── */
.res-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

/* ── Card ── */
.res-card {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.5rem 1.5rem;
  background: #ffffff;
  border: 1.5px solid rgba(9,33,64,0.08);
  border-radius: 18px;
  text-decoration: none;
  transition:
    border-color 200ms var(--eo),
    box-shadow   200ms var(--eo),
    transform    180ms var(--eo),
    background   200ms var(--eo);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

@media (hover: hover) and (pointer: fine) {
  .res-card:hover {
    border-color: rgba(222,165,174,0.55);
    box-shadow: 0 8px 32px rgba(222,165,174,0.18), 0 2px 8px rgba(9,33,64,0.05);
    background: #fffcfd;
  }
}

.res-card:active { transform: scale(0.98); transition-duration: 100ms; }
.res-card:focus-visible { box-shadow: 0 0 0 3px rgba(222,165,174,0.45); outline: none; }

/* Icon */
.res-card-icon {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: rgba(222,165,174,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 200ms var(--eo);
}
.res-card-icon i { font-size: 0.95rem; color: #dea5ae; }
.res-card:hover .res-card-icon { background: #dea5ae; }
.res-card:hover .res-card-icon i { color: #092140; }

/* Body */
.res-card-body { flex: 1; min-width: 0; }

.res-card-source {
  display: block;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(9,33,64,0.40);
  margin-bottom: 0.4rem;
}

.res-card-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: #092140;
  line-height: 1.45;
  margin: 0;
  /* Clamp to 3 lines */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Arrow */
.res-card-arrow {
  flex-shrink: 0;
  color: rgba(9,33,64,0.25);
  font-size: 0.75rem;
  margin-top: 2px;
  transition: color 200ms var(--eo), transform 200ms var(--eo);
}
.res-card:hover .res-card-arrow {
  color: #dea5ae;
  transform: translate(2px, -2px);
}

/* ── Mobile: 1 column ── */
@media (max-width: 680px) {
  .res-wrap { padding: var(--section-py-mob) var(--section-px-mob); }
  .res-grid { grid-template-columns: 1fr; }
}


/* ═══════════════════════════════════════════
   FOOTER ATTRIBUTION (#muh-footer)
   ═══════════════════════════════════════════ */

#muh-footer { --eo: cubic-bezier(0.23, 1, 0.32, 1); }

.foot-wrap {
  max-width: 72rem;
  margin: 0 auto;
  padding: var(--section-py) var(--section-px);
}

.foot-main {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 3rem;
  align-items: start;
}

.foot-brand {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: flex-start;
}

.foot-logo-pill {
  background: #dea5ae;
  color: #092140;
  font-size: 0.875rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  padding: 0.5rem 1.1rem;
  border-radius: 99px;
}

.foot-tagline {
  color: rgba(255,255,255,0.45);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  margin: 0;
}

.foot-info {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding-top: 0.25rem;
}

.foot-text {
  color: #a8bcd4;
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.75;
  margin: 0;
  max-width: 66ch;
}

.foot-text strong { color: #ffffff; font-weight: 600; }
.foot-meem { color: #dea5ae !important; }

.foot-launched {
  color: rgba(255,255,255,0.30);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  margin: 0;
}

@media (max-width: 600px) {
  .foot-wrap { padding: var(--section-py-mob) var(--section-px-mob); }
  .foot-main { grid-template-columns: 1fr; gap: 2rem; }
}

/* ── Screen reader only utility ── */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}


/* ═══════════════════════════════════════════
   EXTRACTED INLINE STYLES — component & utility classes
   (formerly style="" attributes in content.php)
   ═══════════════════════════════════════════ */

/* ── Background utilities ── */
.bg-rose-pale { background: var(--color-rose-pale); }
.bg-white      { background: #ffffff; }

/* ── Wave context wrappers ── */
.wave-rose  { background: var(--color-rose-pale); }
.wave-white { background: #ffffff; }

/* ── Section inner container ── */
.section-inner {
  max-width: var(--section-max-w);
  margin: 0 auto;
  padding: 5rem 3rem 5.5rem;
}

/* ── Transition-delay stagger utilities (used on .muh-up elements) ── */
.delay-006 { transition-delay: 0.06s; }
.delay-010 { transition-delay: 0.10s; }
.delay-012 { transition-delay: 0.12s; }
.delay-014 { transition-delay: 0.14s; }
.delay-022 { transition-delay: 0.22s; }
.delay-030 { transition-delay: 0.30s; }

/* ── Band 1 layout & typography ── */
.band1-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: start;
}
.band1-h2 {
  color: var(--color-navy);
  font-size: clamp(2.25rem, 4vw, 3.25rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.03em;
  margin: 0 0 1.5rem;
}
.band1-right {
  padding-top: 0.5rem;
}
.band1-lead {
  color: var(--color-text);
  font-size: 1.0625rem;
  font-weight: 300;
  line-height: 1.75;
  margin: 0;
  max-width: 56ch;
}

/* ── Band 2 layout ── */
.band2-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  overflow: hidden;
  align-items: stretch;
  gap: 0;
}
.img-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.band2-text {
  padding: 4.5rem 3rem 5rem 4rem;
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}
.body-para {
  color: var(--color-text);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.8;
  margin: 0;
}

/* ── Stats bar ── */
.stats-bar {
  display: flex;
  align-items: center;
  gap: 0;
  margin-top: 0.5rem;
  border-top: 1px solid rgba(9, 33, 64, 0.10);
  border-bottom: 1px solid rgba(9, 33, 64, 0.10);
  padding: 1.25rem 0;
}
.stat-col         { flex: 1; }
.stat-col--left   { padding-right: 1.5rem; }
.stat-col--mid    { padding: 0 1.5rem; }
.stat-col--right  { padding-left: 1.5rem; }
.stat-sep {
  width: 1px;
  height: 2.5rem;
  background: rgba(9, 33, 64, 0.12);
  flex-shrink: 0;
}
.text-navy { color: var(--color-navy); }
.text-rose { color: var(--color-rose); }

/* ── Shared section heading (objectives, pillars, etc.) ── */
.section-h2 {
  color: var(--color-navy);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.025em;
  margin: 0;
}

/* ── Pillars section layout ── */
.pillars-header { margin-bottom: 3.5rem; }

/* Base desktop grid for pillar cards (mobile override already exists above) */
#pil-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.75rem;
  align-items: start;
}

/* Extend .muh-pillar-card with layout & colour (box-shadow / hover defined above) */
.muh-pillar-card {
  background: #ffffff;
  padding: 2.5rem 1.75rem 2.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.25rem;
}

/* Per-card organic border-radius shapes */
.pil-shape-1 { border-radius: 60% 16px 52% 16px / 16px 52% 16px 60%; }
.pil-shape-2 { border-radius: 16px 56% 16px 56% / 56% 16px 56% 16px; }
.pil-shape-3 { border-radius: 16px 60% 16px 52% / 52% 16px 60% 16px; }

/* ── Pillar icon badges — shared base ── */
.pil-badge {
  width: 80px;
  height: 80px;
  flex-shrink: 0;
  background: linear-gradient(135deg, #dea5ae, #c8808a);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 20px rgba(222, 165, 174, 0.45);
}
/* Shape modifiers */
.pil-badge--hex      { clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%); }
.pil-badge--squircle { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; }

/* Card 2 — layered circle badge */
.pil-badge--circle-wrap {
  width: 80px;
  height: 80px;
  flex-shrink: 0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pil-badge--circle-bg {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, #dea5ae, #c8808a);
  box-shadow: 0 6px 20px rgba(222, 165, 174, 0.45);
}
/* Dashed ring removed for cleaner design */
.pil-badge--circle-ring {
  display: none;
}

/* Icon inside badge */
.pil-badge-fa         { font-size: 1.6rem; color: #fff; }
/* For card 2 where the icon needs z-index to sit above the absolute layers */
.pil-badge-fa--raised { font-size: 1.6rem; color: #fff; position: relative; z-index: 1; }

/* ── Pillar card typography ── */
.pil-eyebrow {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-rose);
  margin-bottom: 0.5rem;
}
.pil-h3 {
  font-size: 1.125rem;
  font-weight: 800;
  color: var(--color-navy);
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 0;
}
.pil-para {
  font-size: 0.9375rem;
  font-weight: 400;
  color: var(--color-text);
  line-height: 1.75;
  margin: 0;
}

/* ── Responsive overrides for new layout classes ── */
@media (max-width: 767px) {
  .band1-grid   { grid-template-columns: 1fr; gap: 2rem; }
  .band2-section { grid-template-columns: 1fr; gap: 2rem; }
  .section-inner { padding: var(--section-py-mob) var(--section-px-mob); }
}

/* ── Step pips: button reset + interactivity ── */
button.obj-step-pip {
  appearance: none;
  -webkit-appearance: none;
  border: none;
  padding: 0;
  background: rgba(9, 33, 64, 0.10);
  cursor: pointer;
  position: relative; /* anchor the expanded hit-area pseudo-element */
}
/* Expand the invisible tap/click target without changing the visual pill size */
button.obj-step-pip::before {
  content: '';
  position: absolute;
  inset: -10px -3px;
}
@media (hover: hover) and (pointer: fine) {
  button.obj-step-pip:not(.active):hover {
    background: rgba(9, 33, 64, 0.30);
    width: 32px;
  }
}
button.obj-step-pip:focus-visible {
  outline: 2px solid var(--color-rose);
  outline-offset: 3px;
  border-radius: 99px;
}