/**
 * Homepage V4 - Slim Layout Styling
 */

/* stylelint-disable no-descending-specificity -- layered homepage overrides */

:root {
  --mcd-bg-primary: #050a1b;
  --mcd-bg-secondary: #061129;
  --mcd-surface-dark: rgba(7, 14, 35, 0.82);
  --mcd-surface-panel: rgba(9, 16, 40, 0.92);
  --mcd-border-subtle: rgba(255, 255, 255, 0.08);
  --mcd-border-strong: rgba(0, 229, 255, 0.24);
  --mcd-shadow-soft: 0 24px 60px rgba(3, 9, 28, 0.45);
  --mcd-shadow-panel: 0 28px 72px rgba(2, 8, 26, 0.55);
  --mcd-accent-cyan: #00e5ff;
  --mcd-accent-magenta: #ff00e0;
  --mcd-accent-amber: #ff6b00;
  --mcd-text-strong: #fff;
  --mcd-text-medium: #e8f0ff;
  --mcd-text-muted: #b8c8e8;
  --mcd-gradient-hero: linear-gradient(135deg, var(--mcd-accent-magenta), var(--mcd-accent-cyan));
  --mcd-surface-gradient: linear-gradient(155deg, rgba(12, 22, 46, 0.95), rgba(6, 12, 32, 0.88));
  --mcd-surface-highlight: radial-gradient(120% 160% at 18% 12%, rgba(0, 229, 255, 0.16), transparent 72%), radial-gradient(130% 160% at 78% 8%, rgba(255, 0, 224, 0.14), transparent 68%);
  --mcd-surface-border: rgba(0, 229, 255, 0.32);
  --mcd-surface-border-soft: rgba(0, 229, 255, 0.18);
  --mcd-surface-shadow: 0 32px 80px rgba(3, 9, 28, 0.55);
  --mcd-timeline-line: linear-gradient(90deg, rgba(255, 0, 224, 0), rgba(255, 0, 224, 0.6) 18%, rgba(0, 229, 255, 0.6) 82%, rgba(0, 229, 255, 0));

  /* Neon Glow System */
  --neon-cyan-glow: 0 0 10px rgba(0, 229, 255, 0.6), 0 0 20px rgba(0, 229, 255, 0.4), 0 0 40px rgba(0, 229, 255, 0.2);
  --neon-magenta-glow: 0 0 10px rgba(255, 0, 224, 0.6), 0 0 20px rgba(255, 0, 224, 0.4), 0 0 40px rgba(255, 0, 224, 0.2);
  --neon-orange-glow: 0 0 10px rgba(255, 107, 0, 0.6), 0 0 20px rgba(255, 107, 0, 0.4), 0 0 40px rgba(255, 107, 0, 0.2);

  /* Hero ticker + proof rail sizing */
  --hero-ticker-height: 36px;
  --hero-ticker-gap: 0px;
  --hero-quick-gap: 12px;
  --proof-rail-height: 44px;
  /* Scroll progress bar height at viewport top */
  --scroll-progress-height: 25px;
}

body.home {
  --hero-cert-opacity: 0.72;
}

/* Tablet: tagline only (badges moved to hero) */
@media (max-width: 768px) and (min-width: 641px) {
  :root {
    --hero-ticker-height: 36px;
    --proof-rail-height: 44px;
  }
}

/* Mobile: tagline only, slightly more padding */
@media (max-width: 640px) {
  :root {
    --hero-ticker-height: 36px;
    --proof-rail-height: 44px;
  }
}

.mcd-home {
  /* Make the homepage transparent so the global hashed background shows through */
  --mcd-home-overlay-top-opacity: 0;
  --mcd-home-overlay-bottom-opacity: 0;
  background-color: transparent;
  color: var(--mcd-text-strong);
  font-family: var(--font-display, 'Manrope', 'Segoe UI', Helvetica, Arial, sans-serif);
  line-height: 1.6;
  position: relative;
  overflow: hidden;
  /* Allow backdrop-filter to see page-level backgrounds on all browsers */
  isolation: auto;
}

.mcd-home::before,
.mcd-home::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.mcd-home::before {
  background:
    conic-gradient(from 180deg at 0% 0%, rgba(0, 229, 255, 0.55) 0deg, rgba(0, 229, 255, 0.1) 70deg, transparent 110deg) top left / 240px 240px no-repeat,
    conic-gradient(from 270deg at 100% 0%, rgba(255, 0, 224, 0.55) 0deg, rgba(255, 0, 224, 0.1) 70deg, transparent 110deg) top right / 240px 240px no-repeat;
  opacity: var(--mcd-home-overlay-top-opacity);
  mix-blend-mode: screen;
}

.mcd-home::after {
  background:
    conic-gradient(from 0deg at 100% 100%, rgba(255, 107, 0, 0.5) 0deg, rgba(255, 107, 0, 0.1) 80deg, transparent 120deg) bottom right / 280px 280px no-repeat,
    conic-gradient(from 90deg at 0% 100%, rgba(0, 229, 255, 0.45) 0deg, rgba(0, 229, 255, 0.1) 70deg, transparent 110deg) bottom left / 200px 200px no-repeat;
  opacity: var(--mcd-home-overlay-bottom-opacity);
  mix-blend-mode: screen;
}

.mcd-home--overlay-glow {
  --mcd-home-overlay-top-opacity: 0.85;
  --mcd-home-overlay-bottom-opacity: 0.9;
}

.mcd-hero-cover {
  position: relative;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border-radius: 0;
  background: transparent;
  /* Light blur on shell; hero card adds additional blur on top */
  backdrop-filter: blur(8px) saturate(120%);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
  box-shadow:
    0 24px 60px rgba(5, 8, 20, 0.45),
    inset 0 0 0 1px var(--mcd-surface-border-soft, rgba(255, 255, 255, 0.08));
}

.mcd-hero-cover::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url('/wp-content/themes/mccullough-digital/assets/images/hero-cyberpunk.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.45;
  filter: var(--hero-filter, saturate(110%) brightness(0.9));
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 0;
  transition: filter 0.8s ease-in-out;
}

body.mcd-hero-rain-curtain .mcd-hero-cover::before {
  opacity: 0;
}

.mcd-hero-cover[data-blend="screen"]::before {
  mix-blend-mode: screen;
}

.mcd-hero-cover[data-blend="overlay"]::before {
  mix-blend-mode: overlay;
}

.mcd-hero-cover[data-blend="soft-light"]::before {
  mix-blend-mode: soft-light;
}

.mcd-hero-cover[data-blend="multiply"]::before {
  mix-blend-mode: multiply;
}

.mcd-hero-cover[data-blend="plus-lighter"]::before {
  mix-blend-mode: plus-lighter;
}

.mcd-hero-cover[data-blend="color-dodge"]::before {
  mix-blend-mode: color-dodge;
}

.mcd-hero-cover[data-blend="hard-light"]::before {
  mix-blend-mode: hard-light;
}

.mcd-hero-cover[data-blend="exclusion"]::before {
  mix-blend-mode: exclusion;
}

/* Desktop: Hero + glass rail = full viewport height
   Glass rail bottom aligns with viewport bottom */
@media (min-width: 1024px) {
  /* stylelint-disable declaration-block-no-duplicate-properties */

  .mcd-hero-cover {
    /* Hero fills viewport minus proof rail and scroll progress bar */
    min-height: calc(100vh - var(--proof-rail-height) - var(--scroll-progress-height));
    min-height: calc(100svh - var(--proof-rail-height) - var(--scroll-progress-height));
    /* Position context for ticker */
    position: relative;
  }

  /* Make hero block fill the hero-cover height, minus ticker */

  .mcd-hero-cover>.wp-block-mcd-hero,
  .mcd-hero-cover .wp-block-mccullough-digital-hero {
    min-height: calc(100vh - var(--proof-rail-height) - var(--scroll-progress-height));
    min-height: calc(100svh - var(--proof-rail-height) - var(--scroll-progress-height));
  }

  /* stylelint-enable declaration-block-no-duplicate-properties */

  /* Override hero block positioning so ticker escapes to hero-cover context */

  .mcd-hero-cover .wp-block-mccullough-digital-hero {
    position: static;
    /* Remove relative positioning so ticker positions to hero-cover */
  }

  /* Ticker now positions to hero-cover (the positioning context) */

  .mcd-hero-cover .hero__ticker-tape {
    position: absolute;
    bottom: 0;
    /* Push down to align with tagline at viewport bottom */
    left: 0;
    right: 0;
    z-index: 15;
  }

  /* Rain curtain should extend behind the ticker without changing ticker position. */
  body.mcd-hero-rain-curtain .mcd-hero-cover .hero__rain-curtain {
    bottom: 0;
  }
}

.mcd-surface {
  position: relative;
  padding: clamp(26px, 5.5vw, 36px);
  border-radius: clamp(22px, 6vw, 32px);
  background: var(--mcd-surface-gradient);
  border: 1px solid var(--mcd-surface-border-soft);
  box-shadow: var(--mcd-surface-shadow);
  overflow: hidden;
}

.mcd-surface::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--mcd-surface-highlight);
  opacity: 0.65;
  mix-blend-mode: screen;
  pointer-events: none;
}

.mcd-surface::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: calc(clamp(22px, 6vw, 32px) - 1px);
  border: 1px solid var(--mcd-surface-border);
  opacity: 0.55;
  pointer-events: none;
  box-shadow: inset 0 0 28px rgba(0, 229, 255, 0.18);
}

.mcd-surface--halo::before {
  opacity: 0.8;
}

.mcd-eyebrow {
  font-size: 0.82rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--mcd-accent-cyan, #5bf4ff);
  margin: 0 0 12px;
}

.mcd-section-heading {
  width: min(1200px, 96vw);
  margin: clamp(12px, 4vw, 60px) auto clamp(12px, 3vw, 24px);
  padding-inline: clamp(12px, 4vw, 32px);
  display: flex;
  justify-content: flex-start;
  position: relative;
  z-index: 2;
}

.mcd-section-heading--center {
  justify-content: center;
  text-align: center;
}

.mcd-section-label {
  font-size: clamp(2.6rem, 7.8vw, 6rem);
  text-transform: uppercase;
  font-weight: 700;
  color: var(--mcd-accent-cyan);
  text-shadow:
    0 0 25px rgba(79, 240, 255, 0.42),
    0 0 60px rgba(79, 240, 255, 0.25),
    0 12px 28px rgba(4, 8, 22, 0.42);
  filter: drop-shadow(0 18px 55px rgba(2, 6, 18, 0.27));
  margin: 0;
  line-height: 1.04;
  display: inline-flex;
  letter-spacing: clamp(0.06em, 0.6vw, 0.18em);
}

.mcd-section-heading--center .mcd-section-label {
  justify-content: center;
}

.mcd-section-heading--balanced {
  max-width: min(820px, 90vw);
  margin-left: auto;
  margin-right: auto;
  justify-content: center;
  text-align: center;
}

.mcd-section-heading--balanced .mcd-section-label {
  font-size: clamp(2rem, 5.4vw, 3.6rem);
  letter-spacing: clamp(0.04em, 0.2vw, 0.1em);
  white-space: nowrap;
  text-wrap: nowrap;
}


.mcd-tabbed-card {
  --mcd-tab-width: clamp(220px, 34vw, 320px);
  --mcd-tab-height: clamp(54px, 9vw, 78px);
  --mcd-tab-offset: clamp(86px, 12vw, 152px);
  --mcd-tab-raise: clamp(22px, 4vw, 38px);
  --mcd-tab-radius: 18px;
  --mcd-tab-bg: linear-gradient(160deg, rgba(10, 18, 38, 0.92), rgba(6, 12, 28, 0.78));
  --mcd-tab-border: rgba(255, 255, 255, 0.16);
  --mcd-tab-shadow: 0 26px 58px rgba(3, 8, 22, 0.5);
  --mcd-tab-backdrop: blur(20px) saturate(150%);
  width: min(1120px, 92vw);
  margin: clamp(32px, 6vw, 74px) auto;
  position: relative;
}

.mcd-tabbed-card--solid {
  --mcd-tab-bg: linear-gradient(150deg, rgba(9, 11, 24, 0.98), rgba(4, 6, 14, 0.9));
  --mcd-tab-border: rgba(255, 255, 255, 0.08);
  --mcd-tab-shadow: 0 32px 64px rgba(0, 0, 0, 0.6);
  --mcd-tab-backdrop: none;
}

.mcd-tabbed-card__body {
  position: relative;
  margin-left: var(--mcd-tab-offset);
  padding-top: calc(var(--mcd-tab-raise) + clamp(28px, 5vw, 44px));
  z-index: 1;
  overflow: visible;
}

.mcd-tabbed-card__body::before {
  content: "";
  position: absolute;
  top: calc(-1 * clamp(6px, 1vw, 14px));
  left: calc(-1 * var(--mcd-tab-offset));
  width: var(--mcd-tab-offset);
  height: calc(var(--mcd-tab-raise) + clamp(34px, 4vw, 52px));
  border-radius: var(--mcd-tab-radius) 0 0 0;
  background: inherit;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-right: none;
  box-shadow: var(--mcd-tab-shadow);
  opacity: 0.9;
  pointer-events: none;
  z-index: -1;
}

.mcd-tabbed-card__body>*:first-child {
  margin-top: 0;
}

.mcd-tabbed-card__label {
  position: absolute;
  top: calc(-1 * var(--mcd-tab-raise));
  left: calc(-1 * var(--mcd-tab-offset));
  width: var(--mcd-tab-width);
  height: var(--mcd-tab-height);
  display: flex;
  align-items: center;
  padding: clamp(10px, 2vw, 16px) clamp(20px, 3vw, 32px);
  z-index: 3;
  isolation: isolate;
}

.mcd-tabbed-card__label::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--mcd-tab-radius) var(--mcd-tab-radius) 10px 0;
  background: var(--mcd-tab-bg);
  border: 1px solid var(--mcd-tab-border);
  border-right: none;
  box-shadow: var(--mcd-tab-shadow);
  backdrop-filter: var(--mcd-tab-backdrop);
}

.mcd-tabbed-card__label::after {
  content: "";
  position: absolute;
  right: -18px;
  bottom: 0;
  /* Push down to align with tagline at viewport bottom */
  width: clamp(24px, 4vw, 46px);
  height: 82%;
  border-radius: 0 0 12px;
  background: var(--mcd-tab-bg);
  border: 1px solid var(--mcd-tab-border);
  border-left: none;
  box-shadow: inset 0 -2px 8px rgba(0, 0, 0, 0.35);
}

.mcd-tabbed-card__label .mcd-section-label {
  position: relative;
  margin: 0;
  font-size: clamp(1.4rem, 4.2vw, 2.4rem);
  letter-spacing: clamp(0.08em, 0.6vw, 0.22em);
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  text-shadow: 0 0 28px rgba(79, 240, 255, 0.45);
}

@media (max-width: 920px) {
  .mcd-tabbed-card {
    --mcd-tab-offset: clamp(52px, 12vw, 100px);
    --mcd-tab-width: clamp(200px, 48vw, 260px);
  }
}

@media (max-width: 700px) {
  .mcd-tabbed-card {
    --mcd-tab-offset: 0;
    --mcd-tab-width: min(280px, 88vw);
    --mcd-tab-raise: clamp(10px, 3vw, 18px);
    margin: clamp(24px, 8vw, 42px) auto;
  }

  .mcd-tabbed-card__body {
    margin-left: 0;
    padding-top: clamp(32px, 7vw, 48px);
  }

  .mcd-tabbed-card__body::before {
    display: none;
  }

  .mcd-tabbed-card__label {
    position: relative;
    left: 0;
    top: 0;
    width: fit-content;
    margin-bottom: clamp(12px, 4vw, 20px);
  }

  .mcd-tabbed-card__label::before {
    border-radius: 16px;
    border-right: 1px solid var(--mcd-tab-border);
  }

  .mcd-tabbed-card__label::after {
    display: none;
  }
}

.mcd-eyebrow--contrast {
  color: var(--mcd-text-strong);
}

.mcd-microcopy {
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--mcd-text-muted);
}

.mcd-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(0, 229, 255, 0.18);
  border: 1px solid rgba(0, 229, 255, 0.35);
  color: var(--mcd-accent-cyan);
  box-shadow: 0 10px 24px rgba(0, 229, 255, 0.22);
}

.mcd-badge::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--mcd-gradient-hero);
  box-shadow: 0 0 12px rgba(0, 229, 255, 0.5);
}

.mcd-badge--amber {
  background: rgba(255, 122, 0, 0.22);
  border-color: rgba(255, 122, 0, 0.42);
  color: var(--mcd-accent-amber);
}

.mcd-badge--amber::before {
  background: rgba(255, 122, 0, 0.9);
  box-shadow: 0 0 12px rgba(255, 122, 0, 0.55);
}

.mcd-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0.9rem clamp(1.5rem, 4vw, 2rem);
  border-radius: 999px;
  border: 1.5px solid rgba(0, 229, 255, 0.55);
  background: rgba(6, 12, 30, 0.8);
  color: var(--mcd-accent-cyan);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 24px 60px rgba(3, 9, 28, 0.55),
    0 0 28px rgba(0, 229, 255, 0.25),
    inset 0 0 0 1px rgba(0, 229, 255, 0.1);
  transform: scale(1);
  transition: transform 160ms cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 160ms ease,
    background-color 160ms ease,
    border-color 160ms ease;
}

.mcd-button:hover {
  transform: scale(1.03);
  background: rgba(0, 229, 255, 0.12);
  border-color: rgba(0, 229, 255, 0.75);
  color: var(--mcd-text-strong);
  box-shadow: 0 28px 70px rgba(3, 9, 28, 0.6),
    0 0 36px rgba(0, 229, 255, 0.4),
    inset 0 0 0 1px rgba(0, 229, 255, 0.2);
}

.mcd-button:focus-visible {
  transform: scale(1.03);
  background: rgba(0, 229, 255, 0.12);
  border-color: rgba(0, 229, 255, 0.75);
  color: var(--mcd-text-strong);
  box-shadow: 0 28px 70px rgba(3, 9, 28, 0.6),
    0 0 36px rgba(0, 229, 255, 0.4),
    inset 0 0 0 1px rgba(0, 229, 255, 0.2);
  outline: 2px solid rgba(0, 229, 255, 0.8);
  outline-offset: 3px;
}

.mcd-button--ghost {
  background: rgba(6, 12, 30, 0.65);
  border-color: rgba(0, 229, 255, 0.38);
  color: var(--mcd-accent-cyan);
  box-shadow: 0 18px 48px rgba(4, 10, 32, 0.45),
    inset 0 0 0 1px rgba(0, 229, 255, 0.15);
}

.mcd-button--ghost:hover {
  transform: scale(1.02);
  background: rgba(0, 229, 255, 0.12);
  color: var(--mcd-text-strong);
  box-shadow: 0 22px 56px rgba(4, 10, 32, 0.55),
    0 0 16px rgba(0, 229, 255, 0.3),
    inset 0 0 0 1px rgba(0, 229, 255, 0.25);
}

.mcd-button--ghost:focus-visible {
  transform: scale(1.02);
  background: rgba(0, 229, 255, 0.12);
  color: var(--mcd-text-strong);
  box-shadow: 0 22px 56px rgba(4, 10, 32, 0.55),
    0 0 16px rgba(0, 229, 255, 0.3),
    inset 0 0 0 1px rgba(0, 229, 255, 0.25);
  outline: 2px solid rgba(0, 229, 255, 0.8);
  outline-offset: 3px;
}

.mcd-home p,
.mcd-home li {
  line-height: 1.65;
}

.mcd-container {
  width: min(1120px, 92vw);
  margin-inline: auto;
  position: relative;
  z-index: 1;
}

.mcd-section {
  padding-block: clamp(72px, 12vw, 128px);
  position: relative;
  z-index: 1;
  background: transparent;
  overflow: visible;
}

.mcd-section--light,
.mcd-section--gradient {
  background: transparent;
  overflow: visible;
}

.mcd-home__intro-note {
  position: relative;
  z-index: 1;
  margin-block: clamp(18px, 4vw, 24px);
  margin-inline: auto;
  color: var(--mcd-text-muted);
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  text-align: center;
}

.mcd-home__eyebrow:not(.mcd-section-label) {
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mcd-accent-cyan);
  margin: 0 0 12px;
  text-shadow: var(--neon-cyan-glow);
  font-weight: 600;
}

.mcd-home__overview-inner,
.mcd-home__trust-inner {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(28px, 6vw, 48px);
  align-items: stretch;
  position: relative;
  z-index: 1;
}

.mcd-home__overview-copy,
.mcd-home__trust-copy {
  flex: 1 1 320px;
  max-width: 520px;
  display: grid;
  gap: clamp(18px, 4vw, 26px);
}

.mcd-home__trust-proof {
  flex: 1 1 320px;
  display: grid;
  gap: clamp(18px, 4vw, 24px);
}

.mcd-home__trust-proof.mcd-surface {
  gap: clamp(20px, 4vw, 28px);
}

.mcd-home__trust-copy.mcd-surface,
.mcd-home__trust-proof.mcd-surface {
  gap: clamp(20px, 4vw, 28px);
}

.mcd-home__overview-points {
  flex: 1 1 280px;
  background:
    linear-gradient(150deg, rgba(7, 16, 38, 0.9), rgba(4, 12, 30, 0.88));
  border: 1px solid var(--mcd-border-strong);
  border-radius: 24px;
  padding: clamp(24px, 5vw, 32px);
  box-shadow: var(--mcd-shadow-panel);
}

.mcd-home__list {
  list-style: none;
  display: grid;
  gap: 16px;
  margin: 0;
  padding: 0;
}

.mcd-home__list li {
  position: relative;
  padding-left: 26px;
  color: var(--mcd-text-medium);
}

.mcd-home__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 12px;
  height: 12px;
  border-radius: 4px;
  background: linear-gradient(130deg, var(--mcd-accent-magenta), var(--mcd-accent-cyan));
  box-shadow: 0 0 14px rgba(0, 229, 255, 0.35);
}

.mcd-home__quick-answers {
  display: grid;
  gap: clamp(16px, 4vw, 24px);
}

.mcd-home__quick-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
  color: var(--mcd-text-medium);
}

.mcd-home__quick-list li {
  position: relative;
  padding-left: 30px;
}

.mcd-home__quick-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgba(255, 122, 0, 0.75);
  box-shadow: 0 0 16px rgba(255, 122, 0, 0.45);
}

.mcd-home__quick-list strong {
  color: var(--mcd-text-strong);
}

.mcd-home__packages {
  text-align: center;
  position: relative;
  z-index: 1;
}

.mcd-home__packages-title {
  max-width: 560px;
  margin: 0 auto clamp(8px, 2vw, 18px);
  font-size: clamp(2rem, 4.5vw, 2.8rem);
  font-weight: 700;
  color: var(--mcd-text-strong);
  text-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
}

.mcd-home__packages-note {
  color: var(--mcd-text-muted);
  font-size: clamp(1.2rem, 1.35vw, 1.3rem);
  max-width: 540px;
  margin: clamp(12px, 3vw, 18px) auto clamp(24px, 4vw, 28px);
}

/* Keep stacked process cards crisp (global outline shadow muddies muted text on glass). */
.mcd-home__process--stack .stack-card :where(h3,
  p,
  li,
  .detail-label,
  .detail-val,
  span,
  a,
  strong,
  em,
  small) {
  text-shadow: none;
}

.mcd-home__packages-grid {
  display: grid;
  gap: clamp(20px, 4vw, 28px);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));

}

.mcd-home__packages-grid>.wp-block-group {
  margin-block: 0 !important;
}


.mcd-packages-intro-card {
  padding-top: clamp(42px, 7vw, 64px);
  padding-bottom: clamp(22px, 5vw, 32px);
}

/* Folder tab label that hugs the packages glass card */

.mcd-folder-tab {
  --mcd-tab-height: clamp(30px, 5vw, 44px);
  position: absolute;
  /* Position to sit exactly on top of the card, overlapping the border by 1px */
  top: calc(var(--mcd-tab-height) * -1 + 1px);
  left: clamp(20px, 4vw, 36px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: clamp(150px, 28vw, 240px);
  padding-inline: clamp(14px, 4vw, 26px);
  height: var(--mcd-tab-height);
  margin: 0;
  /* Top corners rounded, bottom square to merge */
  border-radius: 16px 16px 0 0;
  /* Match the card's border style (gradient border) */
  border: 1px solid transparent;
  border-bottom: none;

  /* Match the card's background style */
  background:
    linear-gradient(160deg, rgba(10, 18, 38, 0.95), rgba(6, 12, 28, 0.9)) padding-box,
    linear-gradient(135deg, rgba(79, 240, 255, 0.28), rgba(255, 0, 224, 0.22)) border-box;
  box-shadow: 0 -10px 24px rgba(4, 12, 30, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  color: var(--mcd-accent-cyan);
  text-shadow: 0 0 16px rgba(0, 229, 255, 0.75);
  text-transform: uppercase;
  font-size: clamp(0.78rem, 0.66rem + 0.22vw, 0.96rem);
  letter-spacing: clamp(0.16em, 0.6vw, 0.3em);
  line-height: 1;
  white-space: nowrap;
  z-index: 3;
  isolation: isolate;
  filter: none;
  transform: translateX(0);
  backdrop-filter: blur(12px);
}

.mcd-folder-tab::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(150deg, rgba(0, 229, 255, 0.08), transparent);
  opacity: 0.6;
  pointer-events: none;
  z-index: -1;
}

/* Removed the bottom blur glow to ensure clean merge with card */

.mcd-folder-tab::after {
  display: none;
}

@media (max-width: 720px) {
  .mcd-folder-tab {
    left: 50%;
    transform: translateX(-50%);
    min-width: auto;
    padding-inline: clamp(12px, 6vw, 22px);
    letter-spacing: clamp(0.14em, 0.4vw, 0.2em);
  }
}


/* --- Mobile hero overrides: strip glass, stack CTAs --- */
@media (max-width: 640px) {
  .wp-block-mccullough-digital-hero .hero-content.mcd-glass-card.hero__card {
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-radius: 0 !important;
    max-width: none !important;
    width: 100% !important;
    text-align: center !important;
    align-items: center !important;
  }

  .wp-block-mccullough-digital-hero .hero-content.mcd-glass-card.hero__card::after,
  .wp-block-mccullough-digital-hero .hero-content.mcd-glass-card.hero__card::before {
    display: none !important;
  }

  .wp-block-mccullough-digital-hero .hero__cta-group {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 12px;
    text-align: center;
    max-width: 100%;
    overflow: visible;
  }

  .wp-block-mccullough-digital-hero .hero__cta-group>*,
  .wp-block-mccullough-digital-hero .hero__cta-button {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    text-align: center !important;
    max-width: 100%;
  }

  .wp-block-mccullough-digital-hero .hero__headline,
  .wp-block-mccullough-digital-hero .hero__headline-line,
  .wp-block-mccullough-digital-hero .hero__headline.has-text-align-center {
    text-align: center;
  }

  .wp-block-mccullough-digital-hero .hero__certifications {
    display: flex; /* single row: was grid */
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    gap: 8px; /* tighter gap */
    width: 100vw;
    max-width: 100vw;
    padding-inline: clamp(6px, 3vw, 12px);
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    box-sizing: border-box;
  }

  .wp-block-mccullough-digital-hero .hero__cert-badge {
    justify-content: center;
    padding: 2px;
    min-width: 0;
    width: auto; /* was 100% */
    box-sizing: border-box;
  }

  /* Give the section its own breathing room now that the card padding is gone */

  .wp-block-mccullough-digital-hero {
    padding-inline: clamp(10px, 4vw, 14px);
    padding-top: calc(var(--mcd-effective-header-offset, var(--mcd-header-offset, 64px)) + 26px);
    padding-bottom: clamp(6px, 4vw, 12px);
    min-height: auto;
    overflow: visible;
    box-sizing: border-box;
    max-width: 100vw;
    width: 100%;
    margin-inline: auto;
    overflow-x: clip;
  }

  /* Bump content down to clear header on small viewports */

  .wp-block-mccullough-digital-hero .hero-content {
    padding-top: calc(var(--mcd-effective-header-offset, var(--mcd-header-offset, 64px)) + 10px) !important;
    gap: clamp(10px, 2.8vh, 16px);
    padding-bottom: 10px;
    width: 100%;
    box-sizing: border-box;
    margin-inline: auto;
    max-width: 100vw;
    overflow: visible;
  }

  /* Ensure homepage-specific desktop offsets don’t shift hero content on mobile. */
  body.home .wp-block-mccullough-digital-hero .hero-content {
    margin-left: 0 !important;
    margin-right: 0 !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    position: relative !important;
  }

  /* Slightly slimmer CTAs to prevent wrap */

  .wp-block-mccullough-digital-hero .hero__cta-button {
    padding: 0.26rem 0.7rem;
    font-size: 0.78rem;
    max-width: 100%;
    width: min(100%, 320px);
    box-sizing: border-box;
  }

  /* Prevent CTA glows from contributing to scroll width */

  .wp-block-mccullough-digital-hero .hero__cta-button::before {
    inset: -2px;
  }

  .wp-block-mccullough-digital-hero .hero__cta-button::after {
    inset: 0;
  }

  /* Stretch proof rail down */

  .mcd-home__proof {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-bottom: 0;
  }

  .mcd-home__proof-strip-bar {
    margin-bottom: 0 !important;
    padding-block: 10px;
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: 0 !important;
  }
}

/* --- Desktop hero layout: left-align content, position quick-contact bottom-right --- */
@media (min-width: 641px) {

  /* Left-align hero content on homepage */
  body.home .wp-block-mccullough-digital-hero .hero-content {
    align-items: flex-start;
    text-align: left;
  }

  body.home .wp-block-mccullough-digital-hero .hero__headline,
  body.home .wp-block-mccullough-digital-hero .hero__headline-text,
  body.home .wp-block-mccullough-digital-hero .hero__headline-line {
    text-align: left;
  }

  body.home .wp-block-mccullough-digital-hero .hero__cta-group {
    justify-content: flex-start;
  }

  body.home .wp-block-mccullough-digital-hero .hero__certifications {
    justify-content: flex-start;
  }

  /* Position quick-contact at bottom-right aligned to ticker */
  body.home .mcd-hero-cover .hero__quick-contact {
    position: absolute;
    right: clamp(24px, 4vw, 60px);
    bottom: calc(var(--hero-ticker-height, 36px) + var(--hero-quick-gap, 12px));
    left: auto;
    margin: 0;
    z-index: 20;
  }
}

/* --- Mobile hero layout: center CTAs, badges, and quick contact --- */
@media (max-width: 640px) {
  body.home .wp-block-mccullough-digital-hero .hero__cta-group {
    justify-content: center;
  }

  body.home .wp-block-mccullough-digital-hero .hero__certifications {
    justify-content: center;
  }

  body.home .mcd-hero-cover .hero__quick-contact {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    width: 100%;
    display: flex;
    justify-content: center;
  }
}

.mcd-glass-card {
  position: relative;
  width: min(1120px, 92vw);
  margin: 0 auto clamp(20px, 4vw, 28px);
  padding: clamp(16px, 3.5vw, 24px) clamp(18px, 3.5vw, 24px);
  border-radius: 16px;
  background: transparent padding-box,
    linear-gradient(135deg, rgba(79, 240, 255, 0.28), rgba(255, 0, 224, 0.22)) border-box;
  border: 1px solid transparent;
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  box-shadow: 0 18px 48px rgba(3, 8, 22, 0.28);
  text-align: left;
  /* Removed isolation: isolate to allow backdrop-filter to work */
  overflow: visible;
}

.mcd-glass-card::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: 15px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  pointer-events: none;
}

.mcd-glass-card::before,
.mcd-glass-card::after {
  mix-blend-mode: normal !important;
}

.mcd-process-card .mcd-home__eyebrow:not(.mcd-section-label) {
  margin: 0 0 clamp(8px, 2vw, 12px);
}

.mcd-process-card .mcd-home__process-title {
  margin: 0 0 clamp(24px, 3vw, 38px);
  max-width: 100%;
  text-align: left;
  white-space: nowrap;
  overflow-wrap: normal;
}

/* Packages Intro Glass Card (matches proof rail aesthetics) */
/* Spacing when grid is inside the intro card */

.mcd-packages-intro-card>.mcd-home__packages-grid {
  margin-top: clamp(10px, 2vw, 16px);
  align-items: stretch;
  grid-auto-rows: 1fr;
}

/* Intro typography alignment within packages card */

.mcd-packages-intro-card .mcd-home__eyebrow:not(.mcd-section-label) {
  margin: 2px 0 8px;
}

.mcd-packages-intro-card .mcd-home__packages-title,
.mcd-packages-intro-card .mcd-home__packages-note {
  max-width: none;
  margin: 0;
  position: relative;
  z-index: 3;
}

/* Soften glow and prevent descender clipping on intro H2 */

.mcd-packages-intro-card .mcd-home__packages-title {
  text-shadow: var(--mcd-text-outline-shadow-strong);
  filter: none;
  mix-blend-mode: normal;
  border-radius: 0;
  background: none;
  border: none;
  box-shadow: none;
  overflow: visible;
  isolation: auto;
  display: block;
  gap: 0;
  z-index: 1;
}

.mcd-process-card {
  padding-block: clamp(28px, 5vw, 40px);
  margin-block: clamp(28px, 5vw, 40px);
}

.mcd-home__process {
  position: relative;
  z-index: 1;
}

.mcd-process {
  counter-reset: mcd-step;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(22px, 5vw, 32px);
  margin-top: 0;
  position: relative;
}

.mcd-process-card .mcd-process {
  background: transparent;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}

.mcd-process::before {
  content: "";
  position: absolute;
  inset-inline: clamp(12px, 4vw, 40px);
  top: clamp(44px, 7vw, 64px);
  height: 2px;
  background: var(--mcd-timeline-line);
  opacity: 0.6;
  pointer-events: none;
  display: none;
}

.mcd-process__step {
  position: relative;
  padding: clamp(24px, 5vw, 32px);
  border-radius: 24px;
  background: rgba(4, 12, 30, 0.65);
  border: 1px solid rgba(0, 229, 255, 0.22);
  box-shadow: 0 20px 52px rgba(3, 9, 28, 0.48);
  overflow: hidden;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 3vw, 22px);
  z-index: 1;
}

.mcd-process__step>* {
  position: relative;
  z-index: 2;
}

.mcd-process__step::before {
  content: "";
  position: absolute;
  top: clamp(36px, 6vw, 46px);
  left: clamp(24px, 6vw, 32px);
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: var(--mcd-gradient-hero);
  box-shadow: 0 0 18px rgba(0, 229, 255, 0.45);
  opacity: 0.85;
  z-index: 1;
}

.mcd-process__step::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(140% 120% at 80% -20%, rgba(0, 229, 255, 0.22), transparent 70%);
  opacity: 0.65;
  pointer-events: none;
  z-index: 0;
}

.mcd-process__title {
  margin: 0;
  font-size: clamp(1.35rem, 3vw, 1.6rem);
  font-weight: 700;
  color: var(--mcd-text-strong);
  text-shadow: 0 0 6px rgba(255, 255, 255, 0.18);
}

.mcd-process__body {
  margin: 0;
  color: var(--mcd-text-medium);
}

.mcd-process__badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mcd-accent-cyan);
  margin-top: auto;
  padding-top: clamp(12px, 2.6vw, 18px);
  align-self: flex-start;
  text-shadow: var(--neon-cyan-glow);
  font-weight: 600;
}

.mcd-process__badge::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--mcd-gradient-hero);
  box-shadow: 0 0 16px rgba(0, 229, 255, 0.4);
}

.mcd-process__index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(52px, 10vw, 68px);
  height: clamp(52px, 10vw, 68px);
  border-radius: 18px;
  background: rgba(4, 12, 30, 0.9);
  border: 2px solid rgba(0, 229, 255, 0.6);
  box-shadow:
    0 0 20px rgba(0, 229, 255, 0.5),
    0 12px 28px rgba(0, 229, 255, 0.3),
    inset 0 0 20px rgba(0, 229, 255, 0.1);
  font-size: clamp(1.1rem, 2.5vw, 1.4rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--mcd-accent-cyan);
  text-shadow: var(--neon-cyan-glow);
  margin-bottom: 0;
  /* Push down to align with tagline at viewport bottom */
  align-self: flex-start;
}

/* Stack variant ("How it works") - 3-Column Layout */

.mcd-home__process--stack {

  /* Step color variables for dynamic tinting */
  --step-1-color: rgba(0, 229, 255, 0.12);
  --step-1-border: rgba(0, 229, 255, 0.3);
  --step-1-icon: #7de9ff;
  --step-2-color: rgba(255, 0, 224, 0.12);
  --step-2-border: rgba(255, 0, 224, 0.3);
  --step-2-icon: #ff7be8;
  --step-3-color: rgba(255, 136, 0, 0.12);
  --step-3-border: rgba(255, 136, 0, 0.3);
  --step-3-icon: #ffb366;
  --step-4-color: rgba(0, 229, 255, 0.12);
  --step-4-border: rgba(0, 229, 255, 0.3);
  --step-4-icon: #7de9ff;
  /* Default to step 4 (bottom card) */
  --active-step-color: var(--step-4-color);
  --active-step-border: var(--step-4-border);
  --active-step-icon: var(--step-4-icon);
  position: relative;
  padding-block: clamp(40px, 8vw, 76px);
  background: transparent;
  overflow: hidden;
}

/* Active step color changes */

.mcd-home__process--stack[data-active-step="1"] {
  --active-step-color: var(--step-1-color);
  --active-step-border: var(--step-1-border);
  --active-step-icon: var(--step-1-icon);
}

.mcd-home__process--stack[data-active-step="2"] {
  --active-step-color: var(--step-2-color);
  --active-step-border: var(--step-2-border);
  --active-step-icon: var(--step-2-icon);
}

.mcd-home__process--stack[data-active-step="3"] {
  --active-step-color: var(--step-3-color);
  --active-step-border: var(--step-3-border);
  --active-step-icon: var(--step-3-icon);
}

.mcd-home__process--stack[data-active-step="4"] {
  --active-step-color: var(--step-4-color);
  --active-step-border: var(--step-4-border);
  --active-step-icon: var(--step-4-icon);
}

/* 3-Column Grid Layout */

.process-grid {
  display: grid;
  grid-template-columns: minmax(240px, 320px) minmax(500px, 680px) minmax(240px, 320px);
  gap: clamp(20px, 3vw, 40px);
  align-items: start;
  /* All columns start at same top, panel height matches card 4 bottom */
  max-width: 1400px;
  margin-inline: auto;
  padding-inline: clamp(16px, 4vw, 40px);
}

/* Glass Panels (left & right columns) */

.process-panel {
  position: relative;
  overflow: hidden;
  height: 820px;
  /* Aligned to bottom of expanded 4th card */
  padding: clamp(24px, 4vw, 40px);
  border-radius: 20px;
  background: rgba(8, 14, 32, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.3),
    inset 0 0 0 1px rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(30px) saturate(180%);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  transition: border-color 0.5s ease;
}

/* Dynamic color tint overlay */

.process-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--active-step-color);
  opacity: 0.5;
  transition: background 0.5s ease;
  pointer-events: none;
  z-index: 0;
}

/* Border color syncs with active step */

.process-panel {
  border-color: var(--active-step-border);
}

/* Left Panel: Header content */

.process-panel--left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
}

.process-panel--left .mcd-process__label,
.process-panel--left .mcd-process__headline,
.process-panel--left .mcd-process__lede {
  position: relative;
  z-index: 1;
}

/* Right Panel: Dynamic content */

.process-panel--right {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.panel-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
  animation: panelFadeIn 0.4s ease;
}

.panel-content[hidden] {
  display: none;
}

@keyframes panelFadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.panel-icon {
  color: var(--active-step-icon);
  transition: color 0.5s ease;
}

.panel-icon svg {
  width: 48px;
  height: 48px;
}

.panel-title {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--mcd-text-strong);
  letter-spacing: 0.02em;
}

.panel-list {
  margin: 0;
  padding-left: 20px;
  color: var(--mcd-text-muted);
  font-size: 0.9rem;
  line-height: 1.8;
}

.panel-list li {
  margin-bottom: 4px;
}

.panel-list li::marker {
  color: var(--active-step-icon);
}

.panel-timeline {
  display: flex;
  gap: 8px;
  align-items: center;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  margin-top: auto;
}

.panel-timeline-label {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--active-step-icon);
  font-weight: 600;
}

.panel-timeline-value {
  font-size: 0.9rem;
  color: var(--mcd-text-strong);
}

.mcd-process__intro {
  text-align: center;
  gap: 10px;
  margin-bottom: clamp(16px, 4vw, 28px);
}

.mcd-process__label {
  display: inline-flex;
  padding: 6px 14px;
  border-radius: 999px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--mcd-accent-cyan);
  background: rgba(0, 229, 255, 0.08);
  border: 1px solid rgba(0, 229, 255, 0.18);
}

.mcd-process__headline {
  margin: 0;
  font-size: clamp(1.6rem, 3vw, 2rem);
  color: var(--mcd-text-strong);
}

.mcd-process__lede {
  margin: 0;
  color: var(--mcd-text-muted);
}

/* Hide hover prompt on mobile - content is always visible */
@media (max-width: 719.98px) {
  .mcd-process__lede {
    display: none;
  }
}

.stack-container {
  position: relative;
  width: 100%;
  max-width: min(640px, 92vw);
  height: 620px;
  perspective: 1200px;
  margin-inline: auto;
  padding: 20px;
  box-sizing: border-box;
}

.stack-card {
  position: absolute;
  left: 20px;
  right: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: clamp(22px, 3.4vw, 30px);
  border-radius: 20px;
  /* True glassmorphism - transparent with strong blur */
  background: rgba(8, 14, 32, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.3),
    inset 0 0 0 1px rgba(255, 255, 255, 0.05);
  color: var(--mcd-text-strong);
  /* All cards expanded for glass stack effect */
  overflow: visible;
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  /* Expanded height - show full content */
  height: auto;
  min-height: 280px;
  transform-origin: center bottom;
  cursor: pointer;
  /* Smooth transitions - no bounce for coordinated movement */
  transition:
    transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    min-height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    background 0.35s ease,
    border-color 0.35s ease,
    box-shadow 0.4s ease,
    filter 0.3s ease;
}

/* Subtle inner highlight for glass effect */

.stack-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, transparent 50%);
  z-index: 0;
  pointer-events: none;
}

.stack-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid rgba(255, 255, 255, 0.04);
  opacity: 0.5;
  z-index: 0;
  pointer-events: none;
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
  position: relative;
  z-index: 1;
}

/* Step number styling - prominent with per-step colors */

.step-num {
  font-size: 1rem;
  letter-spacing: 0.12em;
  font-weight: 800;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  transition: color 0.4s ease, text-shadow 0.4s ease;
}

/* Per-step colors for step numbers - brighter with stronger glow */

.stack-card[data-step="1"] .step-num {
  color: rgba(0, 229, 255, 1);
  text-shadow: 0 0 20px rgba(0, 229, 255, 0.7), 0 0 40px rgba(0, 229, 255, 0.3);
}

.stack-card[data-step="2"] .step-num {
  color: rgba(255, 0, 224, 1);
  text-shadow: 0 0 20px rgba(255, 0, 224, 0.7), 0 0 40px rgba(255, 0, 224, 0.3);
}

.stack-card[data-step="3"] .step-num {
  color: rgba(255, 136, 0, 1);
  text-shadow: 0 0 20px rgba(255, 136, 0, 0.7), 0 0 40px rgba(255, 136, 0, 0.3);
}

.stack-card[data-step="4"] .step-num {
  color: rgba(139, 92, 246, 1);
  text-shadow: 0 0 20px rgba(139, 92, 246, 0.7), 0 0 40px rgba(139, 92, 246, 0.3);
}

/* Enhanced glow on hover */

.stack-card:hover .step-num {
  text-shadow: 0 0 20px currentColor, 0 0 40px currentColor;
}

/* Step icon - circular badge with per-step theming */

.step-icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35), inset 0 0 0 1px rgba(255, 255, 255, 0.04);
  color: var(--mcd-text-strong);
  flex-shrink: 0;
  backdrop-filter: blur(2px);
  transition: border-color 0.4s ease, box-shadow 0.4s ease, background 0.4s ease;
}

/* Per-step icon theming */

.stack-card[data-step="1"] .step-icon {
  border-color: rgba(0, 229, 255, 0.3);
  color: var(--step-1-icon);
}

.stack-card[data-step="2"] .step-icon {
  border-color: rgba(255, 0, 224, 0.3);
  color: var(--step-2-icon);
}

.stack-card[data-step="3"] .step-icon {
  border-color: rgba(255, 136, 0, 0.3);
  color: var(--step-3-icon);
}

.stack-card[data-step="4"] .step-icon {
  border-color: rgba(139, 92, 246, 0.3);
  color: var(--step-4-icon);
}

/* Enhanced glow on hover */

.stack-card[data-step="1"]:hover .step-icon {
  border-color: rgba(0, 229, 255, 0.6);
  box-shadow: 0 0 20px rgba(0, 229, 255, 0.4), 0 12px 28px rgba(0, 0, 0, 0.35);
  background: rgba(0, 229, 255, 0.1);
}

.stack-card[data-step="2"]:hover .step-icon {
  border-color: rgba(255, 0, 224, 0.6);
  box-shadow: 0 0 20px rgba(255, 0, 224, 0.4), 0 12px 28px rgba(0, 0, 0, 0.35);
  background: rgba(255, 0, 224, 0.1);
}

.stack-card[data-step="3"]:hover .step-icon {
  border-color: rgba(255, 136, 0, 0.6);
  box-shadow: 0 0 20px rgba(255, 136, 0, 0.4), 0 12px 28px rgba(0, 0, 0, 0.35);
  background: rgba(255, 136, 0, 0.1);
}

.stack-card[data-step="4"]:hover .step-icon {
  border-color: rgba(139, 92, 246, 0.6);
  box-shadow: 0 0 20px rgba(139, 92, 246, 0.4), 0 12px 28px rgba(0, 0, 0, 0.35);
  background: rgba(139, 92, 246, 0.1);
}

.step-icon svg {
  width: 24px;
  height: 24px;
}

.stack-card h3 {
  margin: 0;
  font-size: clamp(1.25rem, 2.8vw, 1.6rem);
  text-shadow: none;
  position: relative;
  z-index: 1;
}

/* Short description - visible by default (glass stack effect) */

.stack-card .short-desc {
  position: relative;
  z-index: 1;
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--mcd-text-muted);
  transition: color 0.3s ease;
  /* Ensure height is auto, not 0 */
  height: auto;
  min-height: fit-content;
}

.stack-card:hover .short-desc {
  color: var(--mcd-text-strong);
}

/* Card details - visible by default (glass stack effect) */

.stack-card .card-details {
  position: relative;
  z-index: 1;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.3s ease 0.1s, transform 0.3s ease 0.1s;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 16px;
  margin-top: auto;
}

/* Card 4 purple glow styling */
.stack-card:nth-of-type(4) {
  border-color: rgba(139, 92, 246, 0.4);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35), 0 0 30px rgba(139, 92, 246, 0.15);
}

/* Detail rows */

.detail-row {
  display: flex;
  gap: 12px;
  margin-bottom: 8px;
  font-size: 0.9rem;
}

.detail-row:last-child {
  margin-bottom: 0;
}

.detail-label {
  color: var(--mcd-accent-cyan, #7de9ff);
  font-weight: 600;
  min-width: 100px;
  flex-shrink: 0;
}

.detail-val {
  color: var(--mcd-text-muted);
}

/* Stack positioning with depth progression - using background alpha instead of opacity for blur visibility */

.stack-card:nth-of-type(1) {
  top: 0;
  z-index: 1;
  transform: scale(0.94);
  background: rgba(8, 14, 32, 0.25);
}

.stack-card:nth-of-type(2) {
  top: 150px;
  z-index: 2;
  transform: scale(0.96);
  background: rgba(8, 14, 32, 0.3);
}

.stack-card:nth-of-type(3) {
  top: 300px;
  z-index: 3;
  transform: scale(0.98);
  background: rgba(8, 14, 32, 0.35);
}

.stack-card:nth-of-type(4) {
  top: 450px;
  z-index: 4;
  transform: scale(1);
  background: rgba(8, 14, 32, 0.4);
}

/* Container dim effect - dim siblings when hovering one card (using filter instead of opacity to preserve blur) */

.stack-container:hover .stack-card {
  filter: brightness(0.5);
}

/* Expand on hover - pop out effect with enhanced glass */

.stack-card:hover,
.stack-card:focus-visible {
  z-index: 10 !important;
  filter: brightness(1) !important;
  height: auto;
  min-height: 260px;
  transform: scale(1.05) !important;
  background: rgba(8, 14, 32, 0.48);
}

/* Per-step border and glow effects on hover */

.stack-card[data-step="1"]:hover,
.stack-card[data-step="1"]:focus-visible {
  border-color: rgba(0, 229, 255, 0.5);
  box-shadow:
    0 16px 48px rgba(0, 0, 0, 0.4),
    0 0 40px rgba(0, 229, 255, 0.2),
    0 0 80px rgba(0, 229, 255, 0.08),
    inset 0 0 0 1px rgba(0, 229, 255, 0.15);
}

.stack-card[data-step="2"]:hover,
.stack-card[data-step="2"]:focus-visible {
  border-color: rgba(255, 0, 224, 0.5);
  box-shadow:
    0 16px 48px rgba(0, 0, 0, 0.4),
    0 0 40px rgba(255, 0, 224, 0.2),
    0 0 80px rgba(255, 0, 224, 0.08),
    inset 0 0 0 1px rgba(255, 0, 224, 0.15);
}

.stack-card[data-step="3"]:hover,
.stack-card[data-step="3"]:focus-visible {
  border-color: rgba(255, 136, 0, 0.5);
  box-shadow:
    0 16px 48px rgba(0, 0, 0, 0.4),
    0 0 40px rgba(255, 136, 0, 0.2),
    0 0 80px rgba(255, 136, 0, 0.08),
    inset 0 0 0 1px rgba(255, 136, 0, 0.15);
}

.stack-card[data-step="4"]:hover,
.stack-card[data-step="4"]:focus-visible {
  border-color: rgba(139, 92, 246, 0.5);
  box-shadow:
    0 16px 48px rgba(0, 0, 0, 0.4),
    0 0 40px rgba(139, 92, 246, 0.2),
    0 0 80px rgba(139, 92, 246, 0.08),
    inset 0 0 0 1px rgba(139, 92, 246, 0.15);
}

.stack-card:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

/* Push siblings down when a card is hovered - cascading effect */
/* Card 1 hovered - push all below with diminishing effect */

.stack-card:nth-of-type(1):hover~.stack-card:nth-of-type(2) {
  transform: translateY(120px) scale(0.92);
}

.stack-card:nth-of-type(1):hover~.stack-card:nth-of-type(3) {
  transform: translateY(100px) scale(0.94);
}

.stack-card:nth-of-type(1):hover~.stack-card:nth-of-type(4) {
  transform: translateY(80px) scale(0.97);
}

/* Card 2 hovered - push below cards */

.stack-card:nth-of-type(2):hover~.stack-card:nth-of-type(3) {
  transform: translateY(120px) scale(0.94);
}

.stack-card:nth-of-type(2):hover~.stack-card:nth-of-type(4) {
  transform: translateY(100px) scale(0.97);
}

/* Card 3 hovered - push card 4 */

.stack-card:nth-of-type(3):hover~.stack-card:nth-of-type(4) {
  transform: translateY(120px) scale(0.97);
}

/* Responsive: 3-Column Grid */
@media (max-width: 1200px) {
  .process-grid {
    grid-template-columns: 220px minmax(420px, 560px) 220px;
    gap: 16px;
  }
}

@media (max-width: 1024px) {
  .process-grid {
    grid-template-columns: 1fr;
    gap: 24px;
    max-width: 600px;
  }

  /* Hide right panel on tablet/mobile - content shows in cards */

  .process-panel--right {
    display: none;
  }

  /* Left panel becomes header above cards */

  .process-panel--left {
    height: auto;
    /* Remove fixed height on mobile */
    text-align: center;
  }
}

@media (max-width: 768px) {
  .process-panel--left {
    padding: clamp(20px, 4vw, 32px);
  }

  .mcd-process__headline {
    font-size: clamp(1.4rem, 4vw, 1.8rem);
  }
}

/* Touch devices: keep stacked layout (desktop effect) and avoid hover-only behavior. */
@media (pointer: coarse) {
  .mcd-home__process--stack .stack-container:hover .stack-card {
    filter: none;
  }

  .mcd-home__process--stack .stack-card:hover,
  .mcd-home__process--stack .stack-card:focus-visible {
    transform: none !important;
    filter: none !important;
  }

  /* JS toggles `.is-expanded` on tap; use it to bring the selected card forward. */
  .mcd-home__process--stack .stack-card.is-expanded {
    z-index: 20 !important;
    filter: brightness(1) !important;
    transform: translateY(-12px) scale(1.02) !important;
    background: rgba(8, 14, 32, 0.48);
  }
}

@media (max-width: 768px) {

  /* Mobile: increase vertical offset so each card title peeks and stays tappable. */
  .mcd-home__process--stack .stack-container {
    height: 620px;
    padding: 16px;
  }

  .mcd-home__process--stack .stack-card {
    left: 16px;
    right: 16px;
    width: auto;
    padding: 20px;
    min-height: 260px;
  }

  .mcd-home__process--stack .stack-card:nth-of-type(1) {
    top: 0px !important;
  }

  .mcd-home__process--stack .stack-card:nth-of-type(2) {
    top: 120px !important;
  }

  .mcd-home__process--stack .stack-card:nth-of-type(3) {
    top: 240px !important;
  }

  .mcd-home__process--stack .stack-card:nth-of-type(4) {
    top: 360px !important;
  }
}

.stack-card--search .step-icon {
  background: rgba(0, 229, 255, 0.1);
  color: #7de9ff;
}

.stack-card--layers .step-icon {
  background: rgba(255, 0, 224, 0.1);
  color: #ff7be8;
}

.stack-card--bolt .step-icon {
  background: rgba(255, 136, 0, 0.12);
  color: #ffb366;
}

.stack-card--bars .step-icon {
  background: rgba(0, 229, 255, 0.12);
  color: #7de9ff;
}

.mcd-home__process--chat .mcd-process-card {
  padding: clamp(24px, 3.5vw, 32px) clamp(18px, 4vw, 32px);
}

.mcd-home__process--chat .mcd-home__process-title {
  white-space: normal;
  margin-bottom: clamp(18px, 3vw, 24px);
}

.mcd-home__process--chat .mcd-process-chat {
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 3vw, 22px);
  margin-top: clamp(12px, 2.6vw, 18px);
}

.mcd-home__process--chat .mcd-process-chat-step {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mcd-home__process--chat .mcd-process-chat-step-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(148, 163, 184, 0.95);
}

.mcd-home__process--chat .mcd-process-chat-week {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  color: rgba(148, 163, 184, 0.85);
}

.mcd-home__process--chat .mcd-process-chat-title {
  font-size: 0.9rem;
  letter-spacing: 0.14em;
  font-weight: 600;
  color: rgba(226, 232, 240, 0.9);
}

.mcd-home__process--chat .mcd-process-chat-thread {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mcd-home__process--chat .mcd-chat-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  font-size: 0.7rem;
  text-transform: none;
  letter-spacing: 0.12em;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.96);
  width: fit-content;
}

.mcd-home__process--chat .mcd-chat-label--studio {
  border: 1px solid rgba(0, 229, 255, 0.7);
  color: var(--mcd-accent-cyan);
}

.mcd-home__process--chat .mcd-chat-label--client {
  border: 1px solid rgba(251, 191, 36, 0.75);
  color: rgba(253, 224, 171, 0.95);
}

.mcd-home__process--chat .mcd-chat-dot {
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.85);
}

@keyframes mcd-typingDots {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-3px);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .mcd-home__process--chat .mcd-chat-label--studio .mcd-chat-dot:nth-child(2) {
    animation: mcd-typingDots 1.1s ease-in-out infinite;
  }
}

.mcd-home__process--chat .mcd-chat-bubble {
  display: inline-block;
  max-width: min(34rem, 76%);
  padding: 10px 16px 12px;
  border-radius: 16px;
  font-size: 0.95rem;
  line-height: 1.55;
  overflow-wrap: anywhere;
  text-align: left;
}

.mcd-home__process--chat .mcd-chat-bubble--studio {
  align-self: flex-start;
  background: rgba(15, 23, 42, 0.92);
  border: 1px solid rgba(0, 229, 255, 0.55);
  margin-right: auto;
}

.mcd-home__process--chat .mcd-chat-bubble--client {
  align-self: flex-end;
  background: rgba(17, 24, 39, 0.96);
  border: 1px solid rgba(251, 191, 36, 0.75);
  margin-left: auto;
}

@media (max-width: 640px) {
  .mcd-home__process--chat .mcd-chat-bubble {
    max-width: 100%;
  }

  .mcd-home__process--chat .mcd-process-card {
    padding: 22px 16px;
  }
}

.mcd-home__proof {
  position: relative;
  /* Allow backdrop-filter in children (strip, highlights) to sample global background */
  overflow: visible;
  display: grid;
  gap: 10px;
  text-align: center;
  place-items: center;
  /* Attach stat band directly under hero */
  padding-top: 0;
  margin-top: 0 !important;
}

/* Neutralize WP block-gap just for this section so it touches hero */

:root :where(.is-layout-constrained)>.mcd-home__proof {
  margin-block-start: 0 !important;
}

body .is-layout-constrained>.mcd-home__proof {
  margin-block-start: 0 !important;
}

.mcd-home__proof-strip-bar {
  position: relative;
  z-index: 3 !important;
  /* ensure above container when bleeding full-width and override theme defaults */
  /* Break out of container to full-bleed under the hero */
  width: 100vw;
  max-width: none;
  margin-inline: calc(50% - 50vw) !important;
  /* Pull upward to visually attach to hero even if block-gap adds section margin */
  /* stylelint-disable-next-line custom-property-pattern -- WordPress exposes --wp--style--block-gap */
  margin-top: calc(-1 * var(--wp--style--block-gap, 24px));
  /* Gap handled by parent grid gap */
  margin-bottom: 0;
  /* Push down to align with tagline at viewport bottom */
  /* Fallback (no backdrop-filter): increase opacity ~50% from prior 0.58 → 0.87 for readability parity */
  background: rgba(6, 12, 26, 0.68);
  border-radius: 0;
  border: 1px solid rgba(0, 229, 255, 0.32);
  box-shadow:
    0 30px 80px rgba(3, 9, 28, 0.7),
    inset 0 0 60px rgba(0, 229, 255, 0.14);
  /* Thinner banner: shave ~10px from top/bottom */
  padding: clamp(8px, 3vw, 20px) clamp(24px, 6vw, 40px);
}

@supports ((-webkit-backdrop-filter: blur(0)) or (backdrop-filter: blur(0))) {
  .mcd-home__proof-strip-bar {
    /* stylelint-disable-next-line property-no-vendor-prefix -- Safari requires prefixed backdrop-filter */
    -webkit-backdrop-filter: blur(14px) saturate(145%);
    backdrop-filter: blur(14px) saturate(145%);
    /* 50% increase in glass opacity: 0.42 → 0.63 */
    background: rgba(6, 12, 26, 0.22);
  }
}

/* Backplate fallback: ensure visible blur even when backdrop sampling is blocked */

.mcd-home__proof-strip-bar::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: 0;
  pointer-events: none;
  background:
    var(--page-background),
    repeating-linear-gradient(90deg,
      rgba(0, 229, 255, 0.25) 0,
      rgba(255, 0, 224, 0.22) 12px,
      rgba(255, 107, 0, 0.2) 24px,
      transparent 36px,
      transparent 48px),
    repeating-linear-gradient(0deg,
      rgba(0, 229, 255, 0.25) 0,
      rgba(255, 0, 224, 0.22) 12px,
      rgba(255, 107, 0, 0.2) 24px,
      transparent 36px,
      transparent 48px),
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="2" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23n)" opacity="0.5"/></svg>');
  background-attachment: scroll, scroll, scroll, scroll, scroll, scroll;
  background-repeat: no-repeat, repeat, repeat, repeat;
  background-size: cover, auto, auto, auto;
  background-position: 50% 0, 12px 8px, 18px 12px, 50% 50%;
  /* Disable heavy fake blur when the dedicated backdrop is active */
  filter: none;
}

/* Featured-card hover animates media, not the container; no extra hover needed here. */

/* Remove animated neon corner accents for this section only */

.mcd-home__proof.mcd-section::before,
.mcd-home__proof.mcd-section::after {
  content: none !important;
  animation: none !important;
  background: none !important;
}

/* Remove neon corner accents across all homepage sections */

.mcd-home .mcd-section:not(.mcd-home__service-map)::before,
.mcd-home .mcd-section:not(.mcd-home__service-map)::after,
.mcd-section.alignfull:not(.mcd-home__service-map)::before,
.mcd-section.alignfull:not(.mcd-home__service-map)::after {
  content: none !important;
  animation: none !important;
  background: none !important;
}

.mcd-home__proof-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 4vw, 28px);
  margin: 0;
  color: var(--mcd-text-medium);
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Keep the stat strip on one line on desktop */
@media (min-width: 1100px) {
  .mcd-home__proof-strip {
    flex-wrap: nowrap;
    width: 100%;
    justify-content: space-between;
    gap: clamp(12px, 2vw, 24px);
  }

  .mcd-home__proof-strip>* {
    white-space: nowrap;
  }
}

@media (min-width: 1200px) {
  .mcd-home__proof-strip {
    /* Prefer a single line on wider viewports */
    flex-wrap: nowrap !important;
  }
}

.mcd-home__proof-strip .mcd-proof-stat {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
}

.mcd-home__proof-strip .mcd-proof-stat::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--mcd-gradient-hero);
  box-shadow: 0 0 14px rgba(0, 229, 255, 0.4);
}

.mcd-home__proof-highlights {
  /* Match blog grid .post-card visual tokens exactly */
  position: relative;
  /* Remove isolated stacking context so backdrop-filter can see body::before/::after */
  isolation: auto;
  /* Avoid clipping the compositor’s backdrop sampling region */
  overflow: visible;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: clamp(18px, 4vw, 32px);
  width: min(1120px, 92vw);
  margin: 0 auto;
  background:
    linear-gradient(160deg, rgba(10, 18, 38, 0.30), rgba(6, 12, 28, 0.24)) padding-box,
    linear-gradient(135deg, rgba(79, 240, 255, 0.28), rgba(255, 0, 224, 0.22)) border-box;
  border: 1px solid rgba(79, 240, 255, 0.18);
  border-radius: 16px;
  /* stylelint-disable-next-line property-no-vendor-prefix -- Safari requires prefixed backdrop-filter */
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  backdrop-filter: blur(12px) saturate(140%);
  box-shadow: 0 18px 48px rgba(3, 8, 22, 0.28);
  padding: clamp(28px, 5vw, 40px);
  will-change: backdrop-filter;
  backface-visibility: hidden;
  transform: translateZ(0);
  contain: paint;
}

/* Backplate fallback for metrics wrapper */

.mcd-home__proof-highlights::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: 0;
  pointer-events: none;
  background:
    var(--page-background),
    repeating-linear-gradient(90deg,
      rgba(0, 229, 255, 0.25) 0,
      rgba(255, 0, 224, 0.22) 12px,
      rgba(255, 107, 0, 0.2) 24px,
      transparent 36px,
      transparent 48px),
    repeating-linear-gradient(0deg,
      rgba(0, 229, 255, 0.25) 0,
      rgba(255, 0, 224, 0.22) 12px,
      rgba(255, 107, 0, 0.2) 24px,
      transparent 36px,
      transparent 48px),
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="2" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23n)" opacity="0.5"/></svg>');
  background-attachment: scroll, scroll, scroll, scroll, scroll, scroll;
  background-repeat: no-repeat, repeat, repeat, repeat;
  background-size: cover, auto, auto, auto;
  background-position: 50% 0, 10px 6px, 16px 10px, 50% 50%;
  /* Disable fake blur when real backdrop is available below */
  filter: none;
}

/* Home: disable backplate fallbacks so real backdrop-filter applies to the site-backdrop */

body.mcd-backdrop-experiment .mcd-home__proof-strip-bar::before,
body.mcd-backdrop-experiment .mcd-home__proof-highlights::after {
  content: none !important;
  background: none !important;
  filter: none !important;
}

/* Always prefer real backdrop when supported */
@supports ((-webkit-backdrop-filter: blur(0)) or (backdrop-filter: blur(0))) {

  .mcd-home__proof-strip-bar::before,
  .mcd-home__proof-highlights::after {
    content: none !important;
    background: none !important;
    filter: none !important;
  }
}

.mcd-home__proof-highlights::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(circle at 18% 20%, rgba(79, 240, 255, 0.16), transparent 62%),
    radial-gradient(circle at 82% 78%, rgba(255, 116, 228, 0.12), transparent 60%);
  opacity: 0.6;
  pointer-events: none;
  mix-blend-mode: screen;
}

/* Metrics-only micro-dither overlay to neutralize stripe banding through blur */

body.mcd-backdrop-experiment .mcd-home__proof-highlights::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: inherit;
  z-index: 0 !important;
  /* keep below content (content is z-index:1) */
  pointer-events: none !important;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="2" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23n)" opacity="0.06"/></svg>') !important;
  mix-blend-mode: soft-light !important;
}

/* Metrics keep their own small containers; glass lives on the wrapper */

@media (forced-colors: active) {
  .mcd-home__proof-highlights {
    /* stylelint-disable-next-line property-no-vendor-prefix -- Safari forced-colors override */
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    background: rgba(8, 14, 28, 0.95) !important;
    border-color: rgba(142, 205, 255, 0.6) !important;
    box-shadow: none !important;
  }

  /* keep default metric containers in forced colors */

  .mcd-home__proof-highlights::before {
    display: none !important;
  }
}

/* No extra neon wash on the container to match .post-card */
/* Backplate enabled: previously reset ::after; keep for legacy reference
.mcd-home__proof-highlights::after { content: none; }
*/

.mcd-home__proof-highlights>* {
  position: relative;
  z-index: 1;
}

.mcd-home__metric {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0;
  text-align: center;
  /* Keep metrics opaque; glass effect lives on the wrapper */
  background: rgba(5, 10, 20, 0.69);
  border: 1px solid rgba(0, 229, 255, 0.24);
  border-radius: 18px;
  box-shadow: 0 16px 32px rgba(3, 9, 28, 0.4);
  padding: clamp(18px, 3.5vw, 26px);
  min-height: 0;
  height: 224px;
  max-width: 240px;
  justify-self: center;
}

@media (forced-colors: active) {

  .mcd-home__proof-strip-bar,
  .mcd-home__metric {
    /* stylelint-disable-next-line property-no-vendor-prefix -- Safari forced-colors override */
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    background: rgba(8, 14, 28, 0.95) !important;
    border-color: rgba(142, 205, 255, 0.6);
    box-shadow: none;
  }
}

.mcd-home__metric strong {
  font-size: clamp(1.6rem, 3.2vw, 2.1rem);
  font-weight: 700;
  color: var(--mcd-accent-cyan);
  text-shadow: var(--neon-cyan-glow);
}

.mcd-home__metric span {
  color: var(--mcd-text-medium);
  line-height: 1.4;
}

.mcd-home__testimonial {
  font-size: 1.15rem;
  font-style: normal;
  max-width: 640px;
  margin: 0;
  color: var(--mcd-text-medium);
  position: relative;
  padding-left: clamp(18px, 4vw, 26px);
}

.mcd-home__testimonial::before {
  content: "\201C";
  position: absolute;
  left: 0;
  top: -10px;
  font-size: clamp(3rem, 6vw, 3.6rem);
  color: rgba(0, 229, 255, 0.35);
}

.mcd-home__testimonial cite {
  display: block;
  margin-top: clamp(16px, 3vw, 20px);
  font-size: 0.9rem;
  color: var(--mcd-text-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.mcd-home__proof-link a {
  color: var(--mcd-accent-cyan);
  text-decoration: none;
  font-weight: 600;
}

.mcd-home__proof-link a:hover,
.mcd-home__proof-link a:focus-visible {
  color: var(--mcd-accent-amber);
}

.mcd-home__proof-visual {
  max-width: 760px;
  margin: 0 auto clamp(24px, 4vw, 36px);
}

.mcd-home__proof-figure img {
  width: 100%;
  height: auto;
  border-radius: 20px;
  border: 1px solid rgba(0, 229, 255, 0.22);
  box-shadow: 0 32px 80px rgba(3, 10, 30, 0.55);
}

.mcd-home__faq {
  flex: 1 1 320px;
  position: relative;
  background: linear-gradient(160deg, rgba(10, 18, 38, 0.30), rgba(6, 12, 28, 0.24)) padding-box,
    linear-gradient(135deg, rgba(79, 240, 255, 0.28), rgba(255, 0, 224, 0.22)) border-box;
  border: 1px solid transparent;
  border-radius: 16px;
  padding: clamp(24px, 6vw, 32px);
  box-shadow: 0 18px 48px rgba(3, 8, 22, 0.28);
  backdrop-filter: blur(12px) saturate(140%);
  isolation: isolate;
  overflow: visible;
}

.mcd-home__faq::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: 15px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  pointer-events: none;
}

.mcd-home__faq-title {
  --mcd-tab-height: clamp(30px, 5vw, 44px);
  position: absolute;
  top: calc(var(--mcd-tab-height) * -1 + 1px);
  left: clamp(24px, 4vw, 36px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: clamp(150px, 28vw, 240px);
  padding-inline: clamp(14px, 4vw, 26px);
  height: var(--mcd-tab-height);
  margin: 0;
  border-radius: 16px 16px 0 0;
  border: 1px solid transparent;
  border-bottom: none;
  background:
    linear-gradient(160deg, rgba(10, 18, 38, 0.95), rgba(6, 12, 28, 0.9)) padding-box,
    linear-gradient(135deg, rgba(79, 240, 255, 0.28), rgba(255, 0, 224, 0.22)) border-box;
  box-shadow: 0 -10px 24px rgba(4, 12, 30, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  color: var(--mcd-accent-cyan);
  text-shadow: 0 0 16px rgba(0, 229, 255, 0.75);
  text-transform: uppercase;
  font-size: clamp(0.78rem, 0.66rem + 0.22vw, 0.96rem);
  letter-spacing: clamp(0.16em, 0.6vw, 0.3em);
  line-height: 1;
  white-space: nowrap;
  z-index: 3;
  isolation: isolate;
  backdrop-filter: blur(12px);
}

.mcd-home__faq-title::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(150deg, rgba(0, 229, 255, 0.08), transparent);
  opacity: 0.6;
  pointer-events: none;
  z-index: -1;
}

@media (max-width: 720px) {
  .mcd-home__faq-title {
    left: 50%;
    transform: translateX(-50%);
    min-width: auto;
    padding-inline: clamp(12px, 6vw, 22px);
    letter-spacing: clamp(0.14em, 0.4vw, 0.2em);
  }
}

.mcd-home__faq-items {
  display: grid;
  gap: 14px;
}

.mcd-home__faq-item {
  background: rgba(4, 10, 28, 0.76);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  padding: clamp(12px, 3vw, 16px);
}

.mcd-home__faq-item summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--mcd-text-strong);
}

.mcd-home__faq-body {
  margin-top: 10px;
  color: var(--mcd-text-medium);
}

.mcd-home__cta {
  text-align: center;
  position: relative;
  z-index: 1;
  isolation: isolate;
  padding-block: clamp(48px, 8vw, 120px);
}

.mcd-home__cta::after {
  content: "";
  position: absolute;
  width: clamp(640px, 140%, 1500px);
  height: clamp(260px, 90vw, 660px);
  top: 30%;
  left: 50%;
  transform: translate(-50%, -30%);
  border-radius: 999px;
  background:
    radial-gradient(ellipse 65% 45% at 45% 40%, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.12) 60%, rgba(255, 255, 255, 0) 80%),
    radial-gradient(ellipse 55% 40% at 60% 60%, rgba(0, 229, 255, 0.35), rgba(0, 229, 255, 0));
  filter: blur(52px);
  opacity: 0.75;
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 0;
}

.mcd-home__cta-inner {
  display: grid;
  gap: clamp(28px, 5vw, 36px);
  align-items: center;
  text-align: center;
  padding: clamp(34px, 6vw, 48px);
  border-radius: 30px;
  background:
    radial-gradient(140% 160% at 18% 18%, rgba(255, 0, 224, 0.28), transparent 68%),
    radial-gradient(140% 160% at 80% 12%, rgba(0, 229, 255, 0.32), transparent 70%),
    rgba(4, 9, 24, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 40px 120px rgba(5, 10, 27, 0.65);
  position: relative;
  z-index: 1;
  overflow: visible;
  isolation: isolate;
  backdrop-filter: blur(8px);
  width: min(960px, 100%);
  margin-inline: auto;
}

.mcd-home__cta-inner::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  border: 1px solid rgba(255, 255, 255, 0.1);
  opacity: 0.75;
  pointer-events: none;
}

.mcd-home__cta-inner::after {
  content: none;
}


.mcd-home__cta-badges {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 3vw, 18px);
  flex-wrap: wrap;
  text-transform: uppercase;
  letter-spacing: 0.2em;
}

.mcd-home__cta-badges .mcd-badge {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 2vw, 14px);
  padding: clamp(10px, 2vw, 14px) clamp(18px, 3vw, 26px);
  min-height: clamp(44px, 6vw, 58px);
  line-height: 1;
  width: auto;
  border-radius: 999px !important;
  position: relative;
  overflow: hidden;
  background-clip: padding-box, padding-box;
  isolation: isolate;
  font-size: 0.76rem;
  letter-spacing: 0.16em;
}

.mcd-home__cta-badges .is-layout-constrained,
.mcd-home__cta-badges .wp-block-group-is-layout-constrained {
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  width: auto;
  padding: 10px 18px;
  margin: 0;
}

.mcd-home__cta-badges .mcd-badge::after,
.mcd-home__cta-badges .mcd-badge::before {
  pointer-events: none;
}

.mcd-home__cta-badges .mcd-badge--amber {
  background: transparent;
  border: 1px solid rgba(255, 153, 71, 0.7);
  color: #fff4e9;
  box-shadow: inset 0 0 0 1px rgba(255, 185, 120, 0.2), 0 8px 22px rgba(255, 140, 62, 0.3);
}

.mcd-home__cta-badges .mcd-badge--amber::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(circle at 38% 35%, rgba(255, 212, 177, 0.95), rgba(255, 163, 97, 0.45) 55%, rgba(0, 0, 0, 0) 80%),
    linear-gradient(120deg, rgba(255, 145, 64, 0.45), rgba(255, 111, 0, 0.18));
  z-index: -2;
}

.mcd-home__cta-badges .mcd-badge--icon {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
}

.mcd-home__cta-badges .mcd-badge--amber::after {
  content: "";
  position: absolute;
  inset: -30% -20%;
  border-radius: inherit;
  background: radial-gradient(circle, rgba(255, 189, 120, 0.8), rgba(255, 189, 120, 0));
  filter: blur(34px);
  opacity: 0.85;
  z-index: -3;
}

.mcd-home__cta-badges .mcd-badge--icon:not(.mcd-badge--amber) {
  background: transparent;
  border: 1px solid rgba(0, 229, 255, 0.65);
  color: #d1f7ff;
  box-shadow: inset 0 0 0 1px rgba(0, 229, 255, 0.2), 0 8px 22px rgba(0, 229, 255, 0.3);
}

.mcd-home__cta-badges .mcd-badge--icon:not(.mcd-badge--amber)::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(circle at 38% 35%, rgba(193, 247, 255, 0.95), rgba(0, 229, 255, 0.4) 55%, rgba(0, 0, 0, 0) 80%),
    linear-gradient(120deg, rgba(0, 229, 255, 0.45), rgba(0, 174, 255, 0.18));
  z-index: -2;
}

.mcd-home__cta-badges .mcd-badge--icon:not(.mcd-badge--amber)::after {
  content: "";
  position: absolute;
  inset: -30% -20%;
  border-radius: inherit;
  background: radial-gradient(circle, rgba(0, 229, 255, 0.75), rgba(0, 229, 255, 0));
  filter: blur(30px);
  opacity: 0.85;
  z-index: -3;
}

.mcd-home__cta-title {
  margin: 0;
  font-size: clamp(2rem, 5vw, 2.8rem);
  font-weight: 700;
  color: var(--mcd-text-strong);
  text-shadow: 0 0 30px rgba(255, 255, 255, 0.4);
  position: relative;
  isolation: isolate;
  overflow: visible;
}

/* Reveal mask text animation */

.reveal-mask-text {
  display: inline-block;
  clip-path: inset(0 0 0 0);
}

.mcd-home__cta-title .reveal-mask-text {
  display: inline-block;
  background: linear-gradient(120deg, #fff, rgba(255, 255, 255, 0.6));
  background-clip: text;
  /* stylelint-disable-next-line property-no-vendor-prefix -- needed for Safari gradient text */
  -webkit-background-clip: text;
  color: transparent;
  position: relative;
  z-index: 1;
}

.mcd-home__cta-title::after {
  display: none;
}

.mcd-home__cta-text {
  margin: 0;
  color: var(--mcd-text-medium);
  font-size: 1.05rem;
}

.mcd-home__cta-actions {
  display: grid;
  gap: 12px;
}

.mcd-home__cta-actions .wp-block-button,
.mcd-home__cta-actions .wp-block-button__link,
.mcd-home__cta-actions .mcd-button {
  width: 100%;
}

@media (min-width: 720px) {
  .mcd-home__cta-actions {
    display: inline-flex;
    align-items: stretch;
    justify-content: center;
    gap: clamp(18px, 4vw, 28px);
  }

  .mcd-home__cta-actions .wp-block-button {
    width: auto;
    flex: 0 1 auto;
  }

  .mcd-home__cta-actions .wp-block-button__link,
  .mcd-home__cta-actions .mcd-button {
    width: auto;
    min-width: clamp(200px, 20vw, 260px);
  }
}

.mcd-home__cta-note {
  color: var(--mcd-text-muted);
  margin: 0;
}

.mcd-home__cta-note strong {
  color: var(--mcd-text-strong);
}

.mcd-home__cta .wp-block-button__link {
  position: relative;
  z-index: 2;
}

.mcd-home__cta-meta {
  font-size: 0.85rem;
  color: var(--mcd-text-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

@media (min-width: 960px) {
  .mcd-home__cta-inner {
    text-align: left;
  }

  .mcd-home__cta-badges {
    justify-content: flex-start;
  }

  .mcd-home__cta-actions {
    justify-content: flex-start;
  }

  .mcd-home__cta-note,
  .mcd-home__cta-meta,
  .mcd-home__cta-text {
    justify-self: start;
  }
}

@media (min-width: 900px) {
  .mcd-process {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .mcd-process::before {
    display: block;
  }
}

@media (max-width: 820px) {

  .mcd-home__overview-points,
  .mcd-home__faq {
    border-radius: 22px;
  }
}

@media (max-width: 680px) {

  .mcd-home__overview-points,
  .mcd-package-card__inner,
  .mcd-home__faq,
  .mcd-home__cta-inner {
    padding: clamp(22px, 8vw, 28px);
  }


  .mcd-home__cta::after {
    width: min(520px, 125vw);
    height: clamp(260px, 120vw, 420px);
    top: 46%;
    opacity: 0.6;
    filter: blur(120px);
  }

  .mcd-home__cta-badges {
    gap: clamp(10px, 6vw, 20px);
  }

  .mcd-home__cta-badges .mcd-badge {
    width: 100%;
  }

  .mcd-home__cta-badges .mcd-badge--icon::after,
  .mcd-home__cta-badges .mcd-badge--amber::after {
    opacity: 0.65;
    filter: blur(26px);
  }
}



/* Equalize card heights and remove featured lift within packages card */

.mcd-packages-intro-card .mcd-package-card {
  height: 100%;
}

.mcd-packages-intro-card .mcd-package-card--featured {
  transform: none;
}

/* Icon breathing room inside each card (top inset) */

.mcd-packages-intro-card .mcd-package-card__icon {
  margin-top: 0;
}

/* Constrain package cards inside intro glass to match process styling */

.mcd-packages-intro-card .mcd-package-card__inner.mcd-surface {
  background: rgba(4, 12, 30, 0.65);
  border: 1px solid rgba(0, 229, 255, 0.22);
  border-radius: 24px;
  box-shadow: 0 20px 52px rgba(3, 9, 28, 0.48);
  padding: clamp(24px, 5vw, 34px);
  overflow: hidden;
  isolation: isolate;
}

/* (cleaned) legacy pseudo-tray overrides removed; DOM tray is authoritative */

.mcd-process::after {
  content: "";
  position: absolute;
  left: 50%;
  top: clamp(86px, 10vw, 120px);
  width: min(62%, 720px);
  height: 2px;
  background: linear-gradient(90deg, rgba(255, 0, 224, 0) 0%, rgba(255, 0, 224, 0.5) 20%, rgba(0, 229, 255, 0.6) 80%, rgba(0, 229, 255, 0));
  opacity: 0.25;
  pointer-events: none;
  transform: translateX(-50%);
}

.mcd-process__icon {
  display: block;
  width: min(100%, clamp(168px, 30vw, 240px));
  aspect-ratio: 4 / 3;
  border-radius: clamp(18px, 4vw, 24px);
  margin: 0;
  overflow: hidden;
  box-shadow: 0 24px 48px rgba(3, 9, 28, 0.35);
  background: rgba(4, 10, 26, 0.55);
  align-self: flex-start;
}

.mcd-process__icon img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: inherit;
  filter: drop-shadow(0 0 14px rgba(0, 229, 255, 0.18));
  animation: mcd-icon-pulse 3.2s ease-in-out infinite;
  transform: none;
}

.mcd-home__testimonial-portrait {
  width: clamp(84px, 10vw, 120px);
  height: clamp(84px, 10vw, 120px);
  border-radius: 28px;
  margin: 0 auto clamp(18px, 4vw, 26px);
  overflow: hidden;
  background: rgba(4, 12, 30, 0.65);
  box-shadow: 0 24px 60px rgba(3, 9, 28, 0.4);
}

.mcd-home__testimonial-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* stylelint-disable-next-line no-duplicate-selectors -- flex layout variant for quick list items */

.mcd-home__quick-list li {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.mcd-home__quick-icon {
  flex: 0 0 clamp(48px, 6vw, 64px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  border-radius: 18px;
  background: rgba(4, 12, 30, 0.55);
  box-shadow: inset 0 0 0 1px rgba(0, 229, 255, 0.28);
}

.mcd-home__quick-icon img {
  width: 100%;
  height: auto;

}

/* Icon pulse animations */

.mcd-process__icon,
.mcd-home__quick-icon {
  will-change: transform;
  transition: none;
  pointer-events: none;
  cursor: default;
}

.mcd-process__icon img,
.mcd-home__quick-icon img {
  animation: mcd-icon-pulse 3.2s ease-in-out infinite;
  transform: none;
}

@keyframes mcd-icon-pulse {

  0%,
  100% {
    filter: drop-shadow(0 0 12px rgba(0, 229, 255, 0.14));
  }

  50% {
    filter: drop-shadow(0 0 18px rgba(0, 229, 255, 0.26));
  }
}

.mcd-home__quick-copy {
  display: grid;
  gap: 4px;
}



/* Advanced list reveal animations */

.mcd-package-card__features li,
.mcd-process__step ul li {
  will-change: transform, opacity;
}

/* Image reveal mask */

.wp-block-image img {
  will-change: clip-path;
}

/* Responsive adjustments for Phase 4 */
@media (max-width: 899px) {
  .process-horizontal-wrapper {
    display: none;
  }

  .mcd-process__step {
    display: block !important;
  }
}

/* Tablet optimization */
@media (min-width: 900px) and (max-width: 1023px) {
  .process-horizontal-content .mcd-process__step {
    flex: 0 0 350px;
  }
}

/* Disable Phase 3 & 4 enhancements for reduced motion */
@media (prefers-reduced-motion: reduce) {
  .map-pin {
    display: none !important;
  }

  .map-pin__inner::before {
    animation: none !important;
  }

  .process-horizontal-wrapper {
    display: none !important;
  }

  .mcd-process__step {
    display: block !important;
  }

  .reveal-mask-text {
    clip-path: none !important;
  }

  body {
    --accent-color: #00e5ff !important;
  }
}

/* ==========================================================================
   HERO BUSINESS NAME LOGO - Top Left Brand Mark
   10 Style Variations with Live Toggle
   ========================================================================== */

.mcd-hero-brand {
  position: absolute;
  top: clamp(20px, 4vh, 40px);
  left: clamp(24px, 5vw, 60px);
  z-index: 15;
  pointer-events: auto;
  /* Visible by default - header covers it when expanded */
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.mcd-hero-brand__text {
  display: block;
  font-family: var(--font-display, 'Manrope', sans-serif);
  font-size: clamp(1rem, 2vw, 1.4rem);
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
  transition: all 0.4s ease;
}

/* --- STYLE 1: Neon Glow (Default) --- */

.mcd-hero-brand[data-style="1"] .mcd-hero-brand__text,
.mcd-hero-brand:not([data-style]) .mcd-hero-brand__text {
  color: var(--neon-cyan, #00e5ff);
  text-shadow:
    0 0 10px rgba(0, 229, 255, 0.8),
    0 0 20px rgba(0, 229, 255, 0.6),
    0 0 40px rgba(0, 229, 255, 0.4),
    0 0 80px rgba(0, 229, 255, 0.2);
}

/* --- STYLE 2: Gradient Shimmer --- */

.mcd-hero-brand[data-style="2"] .mcd-hero-brand__text {
  background: linear-gradient(90deg,
      #00e5ff 0%,
      #ff00e0 25%,
      #00e5ff 50%,
      #ff00e0 75%,
      #00e5ff 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: heroGradientShimmer 3s linear infinite;
  filter: drop-shadow(0 0 12px rgba(0, 229, 255, 0.4));
}

@keyframes heroGradientShimmer {
  0% {
    background-position: 0% 50%;
  }

  100% {
    background-position: 200% 50%;
  }
}

/* --- STYLE 3: Outline Only --- */

.mcd-hero-brand[data-style="3"] .mcd-hero-brand__text {
  color: transparent;
  -webkit-text-stroke: 1.5px var(--neon-cyan, #00e5ff);
  text-shadow:
    0 0 20px rgba(0, 229, 255, 0.5),
    0 0 40px rgba(0, 229, 255, 0.3);
}

/* --- STYLE 4: Retro Terminal --- */

.mcd-hero-brand[data-style="4"] .mcd-hero-brand__text {
  font-family: 'JetBrains Mono', Consolas, monospace;
  font-weight: 500;
  font-size: clamp(0.9rem, 1.8vw, 1.2rem);
  letter-spacing: 0.08em;
  color: #00ff41;
  text-shadow:
    0 0 5px #00ff41,
    0 0 10px #00ff41,
    0 0 20px rgba(0, 255, 65, 0.5);
  background: rgba(0, 10, 0, 0.6);
  padding: 8px 16px;
  border: 1px solid rgba(0, 255, 65, 0.3);
  border-radius: 4px;
}

.mcd-hero-brand[data-style="4"] .mcd-hero-brand__text::before {
  content: '> ';
  opacity: 0.7;
}

/* --- STYLE 5: Elegant Minimal --- */

.mcd-hero-brand[data-style="5"] .mcd-hero-brand__text {
  font-weight: 300;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  font-size: clamp(0.75rem, 1.4vw, 1rem);
  color: rgba(255, 255, 255, 0.9);
  text-shadow: none;
}

/* --- STYLE 6: Spray Paint --- */

.mcd-hero-brand[data-style="6"] .mcd-hero-brand__text {
  font-family: 'Rubik Spray Paint', var(--font-display), cursive;
  font-weight: 400;
  font-size: clamp(1.3rem, 2.6vw, 1.9rem);
  letter-spacing: 0.02em;
  color: var(--neon-cyan, #00e5ff);
  text-shadow:
    0 0 15px rgba(0, 229, 255, 0.7),
    0 0 30px rgba(0, 229, 255, 0.4);
  transform: rotate(-2deg);
}

/* --- STYLE 7: Handwritten Script --- */

.mcd-hero-brand[data-style="7"] .mcd-hero-brand__text {
  font-family: Caveat, cursive;
  font-weight: 600;
  font-size: clamp(1.4rem, 2.8vw, 2rem);
  letter-spacing: 0.01em;
  color: #ff7034;
  text-shadow:
    0 0 20px rgba(255, 112, 52, 0.6),
    0 0 40px rgba(255, 112, 52, 0.3);
  transform: rotate(-1deg);
}

/* --- STYLE 8: Glitch Effect --- */

.mcd-hero-brand[data-style="8"] .mcd-hero-brand__text {
  color: #fff;
  position: relative;
  animation: heroGlitchText 2.5s infinite linear alternate-reverse;
}

.mcd-hero-brand[data-style="8"] .mcd-hero-brand__text::before,
.mcd-hero-brand[data-style="8"] .mcd-hero-brand__text::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.mcd-hero-brand[data-style="8"] .mcd-hero-brand__text::before {
  color: #00e5ff;
  animation: heroGlitchBefore 0.8s infinite linear alternate-reverse;
  clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%);
}

.mcd-hero-brand[data-style="8"] .mcd-hero-brand__text::after {
  color: #ff00e0;
  animation: heroGlitchAfter 0.6s infinite linear alternate-reverse;
  clip-path: polygon(0 55%, 100% 55%, 100% 100%, 0 100%);
}

@keyframes heroGlitchText {

  0%,
  100% {
    text-shadow: 2px 0 #00e5ff, -2px 0 #ff00e0;
  }

  25% {
    text-shadow: -2px 0 #00e5ff, 2px 0 #ff00e0;
  }

  50% {
    text-shadow: 2px 2px #00e5ff, -2px -2px #ff00e0;
  }

  75% {
    text-shadow: -2px 2px #00e5ff, 2px -2px #ff00e0;
  }
}

@keyframes heroGlitchBefore {

  0%,
  100% {
    transform: translateX(0);
  }

  20% {
    transform: translateX(-2px);
  }

  40% {
    transform: translateX(2px);
  }

  60% {
    transform: translateX(-1px);
  }

  80% {
    transform: translateX(1px);
  }
}

@keyframes heroGlitchAfter {

  0%,
  100% {
    transform: translateX(0);
  }

  20% {
    transform: translateX(2px);
  }

  40% {
    transform: translateX(-2px);
  }

  60% {
    transform: translateX(1px);
  }

  80% {
    transform: translateX(-1px);
  }
}

/* --- STYLE 9: Frosted Glass Pill --- */

.mcd-hero-brand[data-style="9"] .mcd-hero-brand__text {
  font-weight: 600;
  font-size: clamp(0.85rem, 1.6vw, 1.1rem);
  letter-spacing: 0.04em;
  color: #fff;
  padding: 10px 24px;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px) saturate(150%);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 999px;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* --- STYLE 10: Stencil Bold --- */

.mcd-hero-brand[data-style="10"] .mcd-hero-brand__text {
  font-family: 'Permanent Marker', var(--font-display), cursive;
  font-weight: 400;
  font-size: clamp(1.1rem, 2.2vw, 1.5rem);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #fff;
  text-shadow:
    3px 3px 0 rgba(0, 0, 0, 0.4),
    0 0 20px rgba(255, 255, 255, 0.2);
  background: linear-gradient(135deg, rgba(0, 229, 255, 0.15), rgba(255, 0, 224, 0.15));
  padding: 8px 20px;
  border-left: 4px solid var(--neon-cyan, #00e5ff);
}

/* --- Style Switcher Toggle Panel --- */

.mcd-brand-switcher {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  pointer-events: auto;
}

.mcd-brand-switcher__toggle {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(6, 12, 28, 0.9);
  border: 1px solid rgba(0, 229, 255, 0.4);
  color: var(--neon-cyan, #00e5ff);
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
  transition: all 0.3s ease;
  backdrop-filter: blur(8px);
}

.mcd-brand-switcher__toggle:hover {
  transform: scale(1.1);
  box-shadow: 0 0 20px rgba(0, 229, 255, 0.4);
}

.mcd-brand-switcher__toggle.is-active {
  background: var(--neon-cyan, #00e5ff);
  color: #040618;
}

.mcd-brand-switcher__panel {
  display: none;
  flex-direction: column;
  gap: 4px;
  padding: 12px;
  background: rgba(6, 12, 28, 0.95);
  border: 1px solid rgba(0, 229, 255, 0.3);
  border-radius: 12px;
  backdrop-filter: blur(12px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  min-width: 180px;
}

.mcd-brand-switcher__panel.is-open {
  display: flex;
}

.mcd-brand-switcher__label {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 4px;
  padding-left: 4px;
}

.mcd-brand-switcher__btn {
  padding: 8px 12px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.8rem;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: all 0.2s ease;
}

.mcd-brand-switcher__btn:hover {
  background: rgba(0, 229, 255, 0.1);
  border-color: rgba(0, 229, 255, 0.3);
}

.mcd-brand-switcher__btn.is-active {
  background: rgba(0, 229, 255, 0.2);
  border-color: var(--neon-cyan, #00e5ff);
  color: var(--neon-cyan, #00e5ff);
}

.mcd-brand-switcher__btn span {
  opacity: 0.6;
  font-size: 0.7rem;
  margin-left: 4px;
}

/* Hide brand on mobile - header covers most of the space */
@media (max-width: 768px) {
  .mcd-hero-brand {
    display: none;
  }

  .mcd-brand-switcher {
    bottom: 12px;
    right: 12px;
  }

  .mcd-brand-switcher__toggle {
    width: 40px;
    height: 40px;
    font-size: 16px;
  }
}

/* Reduced motion preferences */
@media (prefers-reduced-motion: reduce) {

  .mcd-hero-brand[data-style="2"] .mcd-hero-brand__text,
  .mcd-hero-brand[data-style="8"] .mcd-hero-brand__text,
  .mcd-hero-brand[data-style="8"] .mcd-hero-brand__text::before,
  .mcd-hero-brand[data-style="8"] .mcd-hero-brand__text::after {
    animation: none;
  }
}

/* Reverted proof tile/banner overrides (moved glass to containers) — 2025-11-07 */

/* Glass Rail (merged banner + metrics) */

.mcd-home__proof-rail {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  row-gap: clamp(10px, 2.6vw, 16px);
  align-items: center;
  width: 100vw;
  max-width: none;
  /* Pull up to sit directly under ticker (0px gap) */
  margin: -55px 0 0;
  margin-inline: calc(50% - 50vw) !important;
  padding: clamp(10px, 2.6vw, 14px) clamp(14px, 3.2vw, 20px);
  border-radius: 0;
  background:
    linear-gradient(160deg, rgba(10, 18, 38, 0.32), rgba(6, 12, 28, 0.24)) padding-box,
    linear-gradient(135deg, rgba(79, 240, 255, 0.28), rgba(255, 0, 224, 0.22)) border-box;
  border: 1px solid transparent;
  backdrop-filter: blur(12px) saturate(140%);
  box-shadow: 0 18px 48px rgba(3, 8, 22, 0.28);
}

.mcd-proof-rail__left,
.mcd-proof-rail__right {
  display: flex;
  align-items: center;
  gap: clamp(8px, 2vw, 12px);
  flex-wrap: wrap;
}

.mcd-proof-chip {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 999px;
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.05)) padding-box,
    linear-gradient(135deg, rgba(0, 229, 255, 0.45), rgba(255, 0, 224, 0.40)) border-box;
  border: 1px solid transparent;
  color: var(--mcd-text-medium);
  white-space: nowrap;
}

.mcd-proof-chip::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--mcd-gradient-hero);
  box-shadow: 0 0 14px rgba(0, 229, 255, 0.4);
}

.mcd-proof-metric {
  display: inline-grid;
  grid-template-rows: auto auto;
  place-items: center start;
  min-height: 0;
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(5, 10, 20, 0.72);
  border: 1px solid rgba(0, 229, 255, 0.24);
  box-shadow: 0 8px 24px rgba(3, 9, 28, 0.35);
}

.mcd-proof-metric strong {
  font-size: clamp(1.1rem, 2.4vw, 1.35rem);
  line-height: 1.1;
  color: var(--mcd-accent-cyan);
  text-shadow: var(--neon-cyan-glow);
}

.mcd-proof-metric span {
  color: var(--mcd-text-medium);
  font-size: 0.9rem;
  line-height: 1.3;
}

.mcd-home__cta-badges .mcd-badge span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  line-height: 1.1;
  margin: 0;
}

.mcd-home__cta-badges .mcd-badge--amber span {
  position: static;
}


:root :where(.is-layout-constrained)>.mcd-home__proof-rail {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  row-gap: clamp(10px, 2.6vw, 16px);
  align-items: center;
  width: 100vw;
  max-width: none;
  margin: 0;
  margin-inline: calc(50% - 50vw) !important;
  padding: clamp(10px, 2.6vw, 14px) clamp(14px, 3.2vw, 20px);
  border-radius: 0;
  background:
    linear-gradient(160deg, rgba(10, 18, 38, 0.32), rgba(6, 12, 28, 0.24)) padding-box,
    linear-gradient(135deg, rgba(79, 240, 255, 0.28), rgba(255, 0, 224, 0.22)) border-box;
  border: 1px solid transparent;
  backdrop-filter: blur(12px) saturate(140%);
  box-shadow: 0 18px 48px rgba(3, 8, 22, 0.28);
}

/* Rail content alignment (center content width inside full-bleed rail) */

.mcd-home__proof-rail .mcd-proof-rail__left,
.mcd-home__proof-rail .mcd-proof-rail__right {
  display: flex;
  align-items: center;
  gap: clamp(8px, 2vw, 12px);
  flex-wrap: wrap;
  width: min(1120px, 92vw);
  justify-self: center;
  position: relative;
  cursor: default;
}

.mcd-home__proof-rail .mcd-proof-rail__left {
  justify-content: center;
  text-align: center;
  gap: clamp(14px, 2.4vw, 22px);
}

.mcd-home__proof-rail .mcd-proof-rail__right {
  justify-content: center;
  gap: clamp(12px, 2vw, 18px);
  margin-top: clamp(6px, 1.4vw, 10px);
}

.mcd-home__proof-rail .mcd-proof-chip {
  margin: 0;
  padding: 0;
  background: none !important;
  border: none !important;
  color: var(--mcd-text-strong);
  line-height: 1.25;
}

.mcd-home__proof-rail .mcd-proof-chip::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--mcd-gradient-hero);
  box-shadow: 0 0 14px rgba(0, 229, 255, 0.4);
  display: inline-block;
  margin-right: 10px;
  transform: translateY(-1px);
}

.mcd-home__proof-rail .mcd-proof-metric {
  display: inline-grid;
  grid-template-rows: auto auto;
  place-items: center start;
  padding: 8px 12px;
  border-radius: 12px;
  background: rgba(5, 10, 20, 0.72);
  border: 1px solid rgba(0, 229, 255, 0.24);
  box-shadow: 0 8px 24px rgba(3, 9, 28, 0.35);
}

.mcd-home__proof-rail .mcd-proof-metric strong {
  font-size: clamp(1rem, 2vw, 1.2rem);
  line-height: 1.1;
  color: var(--mcd-accent-cyan);
  text-shadow: var(--neon-cyan-glow);
}

.mcd-home__proof-rail .mcd-proof-metric span {
  color: var(--mcd-text-medium);
  font-size: 0.88rem;
  line-height: 1.25;
}

@media (max-width: 800px) {
  .mcd-home__proof-rail .mcd-proof-rail__right {
    justify-content: flex-start;
  }
}

:root :where(.is-layout-constrained)>.mcd-home__proof-rail,
body .is-layout-constrained>.mcd-home__proof-rail {
  width: 100vw;
  max-width: none;
  margin-inline: calc(50% - 50vw) !important;
  border: 1px solid rgba(79, 240, 255, 0.28);
  border-radius: 0 0 16px 16px;
  background:
    linear-gradient(160deg, rgba(10, 18, 38, 0.40), rgba(6, 12, 28, 0.30)) padding-box,
    linear-gradient(135deg, rgba(79, 240, 255, 0.28), rgba(255, 0, 224, 0.22)) border-box;
}

/* Metrics: keep one row on desktop */
@media (min-width: 900px) {
  .mcd-proof-rail__right {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: clamp(10px, 2vw, 16px);
  }

  .mcd-proof-metric {
    white-space: nowrap;
  }
}

/* One-row metrics (centered) on desktop */
@media (min-width: 900px) {
  .mcd-home__proof-rail .mcd-proof-rail__right {
    flex-wrap: nowrap;
    justify-content: center;
  }

  .mcd-home__proof-rail .mcd-proof-metric {
    white-space: nowrap;
  }
}

/* Numeral accent for proof text */

.mcd-prose-num {
  background: linear-gradient(135deg, var(--mcd-accent-cyan), var(--mcd-accent-magenta));
  /* stylelint-disable-next-line property-no-vendor-prefix -- Safari requires prefixed clip for text gradients */
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 16px rgba(0, 229, 255, 0.18), 0 0 24px rgba(255, 0, 224, 0.14);
}

/* Decorative halo band behind the proof text row */

.mcd-home__proof-rail .mcd-proof-rail__left::before {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: -6px;
  height: clamp(28px, 5vw, 42px);
  width: min(1120px, 92vw);
  border-radius: 999px;
  pointer-events: none;
  z-index: 0;
  opacity: 0.35;
  background:
    radial-gradient(60% 140% at 20% 50%, rgba(0, 229, 255, 0.22), transparent 70%),
    radial-gradient(60% 140% at 80% 50%, rgba(255, 116, 228, 0.18), transparent 70%);
  filter: blur(10px);
}

/* Keep text above the halo */

.mcd-home__proof-rail .mcd-proof-rail__left>* {
  position: relative;
  z-index: 1;
}

/* Baseline keyline above metrics */

.mcd-home__proof-rail .mcd-proof-rail__right::before {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: -10px;
  width: min(1120px, 92vw);
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(79, 240, 255, 0.35), rgba(255, 116, 228, 0.35), transparent);
  opacity: 0.55;
  border-radius: 999px;
}

/* Divider interpuncts between phrases */

.mcd-home__proof-rail .mcd-proof-rail__left .mcd-proof-chip {
  margin: 0;
  padding: 0;
  background: none !important;
  border: none !important;
  color: var(--mcd-text-strong);
  line-height: 1.25;
}

.mcd-home__proof-rail .mcd-proof-rail__left .mcd-proof-chip::before {
  content: none !important;
}

.mcd-home__proof-rail .mcd-proof-rail__left .mcd-proof-chip:not(:last-child)::after {
  content: "\002022";
  /* bullet */
  margin: 0 clamp(10px, 1.6vw, 16px);
  background:
    linear-gradient(160deg, rgba(10, 18, 38, 0.40), rgba(6, 12, 28, 0.30)) padding-box,
    linear-gradient(135deg, rgba(79, 240, 255, 0.28), rgba(255, 0, 224, 0.22)) border-box;
}

/* Metrics: keep one row on desktop */
@media (min-width: 900px) {
  .mcd-proof-rail__right {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: clamp(10px, 2vw, 16px);
  }

  .mcd-proof-metric {
    white-space: nowrap;
  }
}

/* One-row metrics (centered) on desktop */
@media (min-width: 900px) {
  .mcd-home__proof-rail .mcd-proof-rail__right {
    flex-wrap: nowrap;
    justify-content: center;
  }

  .mcd-home__proof-rail .mcd-proof-metric {
    white-space: nowrap;
  }
}

/* Duplicate proof-rail styles removed (see earlier block around line 3000) */

/* Force proof text onto a single line on wide screens */
@media (min-width: 1200px) {


  /* One-row metrics (centered) on desktop */
  @media (min-width: 900px) {
    .mcd-home__proof-rail .mcd-proof-rail__right {
      flex-wrap: nowrap;
      justify-content: center;
    }

    .mcd-home__proof-rail .mcd-proof-metric {
      white-space: nowrap;
    }
  }

  @media (max-width: 720px) {
    .mcd-home__trust .mcd-home__eyebrow {
      left: 50%;
      transform: translateX(-50%);
      min-width: auto;
      padding-inline: clamp(12px, 6vw, 22px);
      letter-spacing: clamp(0.14em, 0.4vw, 0.2em);
    }
  }

  .mcd-home__proof-rail .mcd-proof-rail__left {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    gap: clamp(16px, 2vw, 24px);
  }

  /* Numeral accent for proof text */

  .mcd-prose-num {
    background: linear-gradient(135deg, var(--mcd-accent-cyan), var(--mcd-accent-magenta));
    /* stylelint-disable-next-line property-no-vendor-prefix -- Safari requires prefixed clip for text gradients */
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 0 16px rgba(0, 229, 255, 0.18), 0 0 24px rgba(255, 0, 224, 0.14);
  }

  /* Decorative halo band behind the proof text row */

  .mcd-home__proof-rail .mcd-proof-rail__left::before {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: -6px;
    height: clamp(28px, 5vw, 42px);
    width: min(1120px, 92vw);
    border-radius: 999px;
    pointer-events: none;
    z-index: 0;
    opacity: 0.35;
    background:
      radial-gradient(60% 140% at 20% 50%, rgba(0, 229, 255, 0.22), transparent 70%),
      radial-gradient(60% 140% at 80% 50%, rgba(255, 116, 228, 0.18), transparent 70%);
    filter: blur(10px);
  }

  /* Keep text above the halo */

  .mcd-home__proof-rail .mcd-proof-rail__left>* {
    position: relative;
    z-index: 1;
  }

  /* Baseline keyline above metrics */

  .mcd-home__proof-rail .mcd-proof-rail__right::before {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: -10px;
    width: min(1120px, 92vw);
    height: 1px;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(79, 240, 255, 0.35), rgba(255, 116, 228, 0.35), transparent);
    opacity: 0.55;
    border-radius: 999px;
  }

  /* Folder Tab for Trust Section (Why McCullough Digital) */

  .mcd-home__trust .mcd-container {
    position: relative;
    width: min(1120px, 92vw);
    margin: 0 auto clamp(20px, 4vw, 28px);
    padding: clamp(24px, 4vw, 36px);
    border-radius: 16px;
    background: linear-gradient(160deg, rgba(10, 18, 38, 0.30), rgba(6, 12, 28, 0.24)) padding-box,
      linear-gradient(135deg, rgba(79, 240, 255, 0.28), rgba(255, 0, 224, 0.22)) border-box;
    border: 1px solid transparent;
    backdrop-filter: blur(12px) saturate(140%);
    box-shadow: 0 18px 48px rgba(3, 8, 22, 0.28);
    text-align: left;
    isolation: isolate;
    overflow: visible;
    display: grid;
    gap: clamp(20px, 3vw, 28px);
  }

  .mcd-home__trust .mcd-container::after {
    content: "";
    position: absolute;
    inset: 1px;
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    pointer-events: none;
  }

  /* Ensure the section heading container doesn't trap the absolute tab */

  .mcd-home__trust .mcd-section-heading {
    position: static;
  }

  /* Style the eyebrow as the folder tab */

  .mcd-home__trust .mcd-home__eyebrow {
    --mcd-tab-height: clamp(30px, 5vw, 44px);
    position: absolute;
    top: calc(var(--mcd-tab-height) * -1 + 1px);
    left: clamp(24px, 4vw, 36px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: clamp(150px, 28vw, 240px);
    padding-inline: clamp(14px, 4vw, 26px);
    height: var(--mcd-tab-height);
    margin: 0;
    border-radius: 16px 16px 0 0;
    border: 1px solid transparent;
    border-bottom: none;
    background:
      linear-gradient(160deg, rgba(10, 18, 38, 0.95), rgba(6, 12, 28, 0.9)) padding-box,
      linear-gradient(135deg, rgba(79, 240, 255, 0.28), rgba(255, 0, 224, 0.22)) border-box;
    box-shadow: 0 -10px 24px rgba(4, 12, 30, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.12);
    color: var(--mcd-accent-cyan);
    text-shadow: 0 0 16px rgba(0, 229, 255, 0.75);
    text-transform: uppercase;
    font-size: clamp(0.78rem, 0.66rem + 0.22vw, 0.96rem);
    letter-spacing: clamp(0.16em, 0.6vw, 0.3em);
    line-height: 1;
    white-space: nowrap;
    z-index: 3;
    isolation: isolate;
    backdrop-filter: blur(12px);
  }

  .mcd-home__trust .mcd-home__eyebrow::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(150deg, rgba(0, 229, 255, 0.08), transparent);
    opacity: 0.6;
    pointer-events: none;
    z-index: -1;
  }

}


/**
 * Homepage Compact Packages Selector
 * Tabbed package picker, comparison table, and add-on callouts
 */

/* Compact packages selector – homepage */

.mcd-packages-compact {
  margin-top: clamp(16px, 3vw, 22px);
  display: grid;
  gap: clamp(18px, 3vw, 24px);
  position: relative;
}

.mcd-packages-compact__tabs-shell {
  position: relative;
  display: block;
  overflow: visible;
  padding-inline: 46px;
}

.mcd-packages-compact__tabs {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 10px;
  padding: 8px;
  border-radius: 16px;
  background: rgba(10, 16, 34, 0.92);
  border: 1px solid rgba(0, 229, 255, 0.18);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.32),
    0 18px 40px rgba(0, 0, 0, 0.55);
}

.mcd-packages-compact__tab {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 3px;
  padding: 12px 14px 10px;
  min-height: 46px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  background: rgba(255, 255, 255, 0.02);
  cursor: pointer;
  font: inherit;
  text-align: left;
  color: var(--mcd-text-subtle, rgba(226, 232, 255, 0.78));
  transition:
    transform 170ms ease-out,
    background 170ms ease-out,
    color 170ms ease-out,
    box-shadow 170ms ease-out,
    border-color 170ms ease-out;
  overflow: hidden;
}

.mcd-packages-compact__tab::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(120% 120% at 18% 12%, rgba(0, 229, 255, 0.12), transparent),
    radial-gradient(120% 120% at 82% 88%, rgba(255, 77, 225, 0.12), transparent);
  opacity: 0.65;
  pointer-events: none;
}

.mcd-packages-compact__tab:is(:hover, :focus-visible) {
  background: rgba(0, 229, 255, 0.08);
  border-color: rgba(0, 229, 255, 0.32);
  box-shadow:
    0 0 0 1px rgba(0, 229, 255, 0.32),
    0 14px 32px rgba(0, 0, 0, 0.5);
  color: var(--mcd-text, #fff);
  transform: translateY(-1px);
}

.mcd-packages-compact__tab:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 1.5px rgba(0, 229, 255, 0.45),
    0 0 0 3px rgba(0, 229, 255, 0.62),
    0 16px 32px rgba(0, 0, 0, 0.5);
}

.mcd-packages-compact__tab-label {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--mcd-text, #f6fbff);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.mcd-packages-compact__tab-meta {
  font-size: 0.72rem;
  opacity: 0.8;
  color: var(--mcd-text-subtle, rgba(226, 232, 255, 0.82));
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Active tab - gradient glass + top bar */

.mcd-packages-compact__tab.is-active {
  background: linear-gradient(135deg, rgba(0, 229, 255, 0.22), rgba(255, 77, 225, 0.18));
  border-color: rgba(0, 229, 255, 0.55);
  color: var(--mcd-text, #fff);
  transform: translateY(-1px);
  box-shadow:
    0 0 0 1.5px rgba(0, 229, 255, 0.7),
    0 0 22px rgba(0, 229, 255, 0.34),
    0 16px 30px rgba(0, 0, 0, 0.55);
}

.mcd-packages-compact__tab.is-active::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 14px;
  right: 14px;
  height: 3px;
  border-radius: 999px;
  background: var(--mcd-accent-cyan, #00e5ff);
  box-shadow: 0 0 10px rgba(0, 229, 255, 0.7);
}

.mcd-packages-compact__tab.is-active .mcd-packages-compact__tab-meta {
  opacity: 0.9;
}

.mcd-packages-compact__arrow {
  display: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid rgba(0, 229, 255, 0.35);
  background:
    linear-gradient(145deg, rgba(0, 229, 255, 0.12), rgba(255, 77, 225, 0.12)),
    rgba(8, 14, 32, 0.82);
  color: var(--mcd-text, #fff);
  font-size: 1.2rem;
  font-weight: 700;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    0 6px 16px rgba(0, 0, 0, 0.35),
    0 0 16px rgba(0, 229, 255, 0.35);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, opacity 0.2s ease;
  animation: mcd-soft-pulse 2.4s ease-in-out infinite;
}

.mcd-packages-compact__arrow.is-left {
  left: 12px;
}

.mcd-packages-compact__arrow.is-right {
  right: 12px;
}

.mcd-packages-compact__arrow:is(:hover, :focus-visible) {
  transform: translateY(-50%) scale(1.03);
  background:
    linear-gradient(150deg, rgba(0, 229, 255, 0.2), rgba(255, 77, 225, 0.18)),
    rgba(6, 10, 24, 0.92);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.14),
    0 10px 24px rgba(0, 229, 255, 0.4),
    0 0 18px rgba(255, 77, 225, 0.25);
}

.mcd-packages-compact__arrow.is-hidden {
  opacity: 0.2;
  pointer-events: none;
}

/* Icon and accent dot */

.mcd-packages-compact__icon {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.mcd-packages-compact__icon svg {
  width: 100%;
  height: 100%;
  stroke: var(--mcd-text-subtle, rgba(226, 232, 255, 0.78));
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mcd-packages-compact__tab:is(:hover, :focus-visible) .mcd-packages-compact__icon svg {
  stroke: var(--mcd-text, #fff);
}

.mcd-packages-compact__tab.is-active .mcd-packages-compact__icon svg {
  stroke: var(--tab-accent-strong, var(--mcd-accent-cyan));
}

.mcd-packages-compact__dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  display: inline-block;
  background: var(--tab-accent-strong, var(--mcd-accent-cyan));
  box-shadow: 0 0 8px color-mix(in srgb, var(--tab-accent-strong, #00e5ff) 65%, transparent);
}

/* Plan-specific accents */

.mcd-packages-compact__tab[data-plan="foundation"] {
  --tab-accent-strong: var(--mcd-accent-cyan, #00e5ff);
  --tab-accent-soft: rgba(0, 229, 255, 0.2);
}

.mcd-packages-compact__tab[data-plan="growth"] {
  --tab-accent-strong: var(--mcd-accent-magenta, #ff4de1);
  --tab-accent-soft: rgba(255, 77, 225, 0.16);
}

.mcd-packages-compact__tab[data-plan="launchpad"] {
  --tab-accent-strong: var(--mcd-accent-amber, #ffb347);
  --tab-accent-soft: rgba(255, 179, 71, 0.2);
}

/* Panels */

.mcd-packages-compact__panels {
  position: relative;
}

.mcd-packages-compact__panel {
  border-radius: 20px;
  padding: clamp(20px, 4vw, 26px);
  background:
    radial-gradient(circle at 0 0, rgba(255, 0, 199, 0.13), transparent 60%),
    radial-gradient(circle at 100% 100%, rgba(0, 229, 255, 0.16), transparent 55%),
    rgba(4, 12, 30, 0.94);
  border: 1px solid rgba(0, 229, 255, 0.38);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.7),
    0 24px 55px rgba(0, 0, 0, 0.8);
  color: var(--mcd-text, #f5f7ff);
}

.mcd-packages-compact__panel[hidden] {
  display: none;
}

.mcd-packages-compact__headline {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 18px;
  margin-bottom: 10px;
}

.mcd-packages-compact__title {
  font-size: clamp(1.1rem, 2.1vw, 1.3rem);
  font-weight: 650;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 8px;
}

.mcd-packages-compact__badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: rgba(255, 166, 0, 0.18);
  color: var(--mcd-amber, #ffb347);
  border: 1px solid rgba(255, 166, 0, 0.65);
}

.mcd-packages-compact__price {
  font-size: 0.9rem;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  color: var(--mcd-text-subtle, rgba(226, 232, 255, 0.78));
}

.mcd-packages-compact__price strong {
  font-size: clamp(1.2rem, 2.5vw, 1.4rem);
  font-weight: 700;
  color: var(--mcd-accent-cyan, #00e5ff);
  text-shadow: 0 0 18px rgba(0, 229, 255, 0.55);
}

.mcd-packages-compact__price-addon {
  font-size: 0.85rem;
  opacity: 0.9;
}

.mcd-packages-compact__subtitle {
  margin: 4px 0 10px;
  font-size: 0.9rem;
  color: var(--mcd-text-subtle, rgba(226, 232, 255, 0.82));
}

.mcd-packages-compact__list {
  margin: 0 0 10px;
  padding-left: 1.1rem;
  font-size: 0.86rem;
  display: grid;
  gap: 4px;
}

.mcd-packages-compact__list li::marker {
  color: var(--mcd-accent-magenta, #ff00c7);
}

.mcd-packages-compact__footer {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  justify-content: space-between;
}

.mcd-packages-compact__meta {
  font-size: 0.78rem;
  max-width: 320px;
  color: var(--mcd-text-muted, rgba(200, 210, 255, 0.74));
}

.mcd-packages-compact__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.mcd-packages-compact__actions .mcd-button {
  font-size: 0.8rem;
  padding-inline: 14px;
}

/* Layout tweaks */
@media (min-width: 720px) {
  .mcd-packages-compact__tabs {
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
  }

  .mcd-packages-compact__tab {
    padding-inline: 14px;
  }

  .mcd-packages-compact__panel {
    padding: 22px 24px 20px;
  }
}

@media (max-width: 719.98px) {
  /* Mobile horizontal scroll tabs with scroll-snap */

  .mcd-packages-compact__tabs {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: clamp(14px, 4vw, 22px);
    -webkit-overflow-scrolling: touch;
    gap: 6px;
    padding: 6px 10px;
    padding-right: 22px;
    /* breathing room for scroll indicator */
    border-radius: 18px;
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE/Edge */
  }

  .mcd-packages-compact__tabs::-webkit-scrollbar {
    display: none;
  }

  .mcd-packages-compact__tab {
    flex: 0 0 auto;
    min-width: 70%;
    /* show a hint of the next tab without overflowing */
    scroll-snap-align: center;
    scroll-snap-stop: always;
    border-radius: 14px;
  }

  .mcd-packages-compact__tabs-shell {
    padding-inline: 28px;
  }

  .mcd-packages-compact__arrow {
    display: inline-flex;
  }

  .mcd-packages-intro-card {
    padding-inline: clamp(12px, 5vw, 18px);
    overflow: hidden;
  }

  .mcd-packages-compact__panel {
    width: 100%;
    max-width: 100%;
    margin-inline: 0;
    padding: 16px 14px 14px;
    box-sizing: border-box;
    overflow: hidden;
  }

  .mcd-packages-compact__panels {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
  }

  .mcd-packages-compact__panel>* {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .mcd-packages-compact,
  .mcd-packages-compact__tabs-shell,
  .mcd-packages-compact__tabs {
    width: 100%;
    max-width: 100%;
  }

  /* Mobile comparison table - 2-column view */

  .mcd-packages-compact__compare-table {
    overflow-x: auto;
  }

  .mcd-packages-compact__compare-cell {
    min-width: 90px;
    font-size: 0.72rem;
  }

  .mcd-packages-compact__compare-cell--feature {
    min-width: 100px;
    position: sticky;
    left: 0;
    background: rgba(4, 12, 30, 0.98);
    z-index: 1;
  }

  /* ===== Mobile Overflow Fixes (Proper Constraints) ===== */

  /* Force flex items to shrink below content size */

  .mcd-packages-compact,
  .mcd-packages-compact * {
    box-sizing: border-box !important;
    min-width: 0 !important;
  }

  /* Ensure text wraps properly */

  .mcd-packages-compact__panel,
  .mcd-packages-compact__panel * {
    overflow-wrap: break-word;
    word-break: break-word;
  }

  /* Panels container - constrain to parent */

  .mcd-packages-compact__panels {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Individual panels - constrain width */

  .mcd-packages-compact__panel {
    width: 100% !important;
    max-width: calc(100vw - 32px) !important;
    /* Viewport minus gutters */
    flex-shrink: 1;
  }

  /* Fix Site Care add-on card */

  .mcd-packages-compact__addon-callout {
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: 0;
  }

  /* Fix Compare button */

  .mcd-packages-compact__compare-toggle {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Container overflow - keep as safety net */

  .mcd-packages-compact {
    position: relative;
    overflow-x: hidden;
  }

  /* Flex containers - allow shrinking */

  .mcd-packages-compact__headline,
  .mcd-packages-compact__footer,
  .mcd-packages-compact__actions,
  .mcd-packages-compact__usp-list {
    min-width: 0;
    flex-wrap: wrap;
  }

  /* ===== Enhanced Navigation Arrows ===== */

  /* Container for arrows - relative positioning context */

  .mcd-packages-compact__tabs-shell {
    position: relative;
    /* Remove flex - let tabs take full width */
  }

  /* Arrows float at edges, overlaying tab area */

  .mcd-packages-compact__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 20;
    /* Compact circular style */
    width: 32px;
    height: 32px;
    font-size: 1.1rem;
    /* Semi-transparent background with gradient fade */
    background: linear-gradient(to right,
        rgba(4, 12, 30, 0.95) 60%,
        rgba(4, 12, 30, 0.7));
    border: 2px solid rgba(0, 229, 255, 0.5);
    border-radius: 50%;
    box-shadow:
      0 0 12px rgba(0, 229, 255, 0.3),
      0 2px 6px rgba(0, 0, 0, 0.4);
  }

  .mcd-packages-compact__arrow.is-left {
    left: 4px;
    background: linear-gradient(to left,
        rgba(4, 12, 30, 0.95) 60%,
        rgba(4, 12, 30, 0.7));
  }

  .mcd-packages-compact__arrow.is-right {
    right: 4px;
  }

  .mcd-packages-compact__arrow.is-hidden {
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
  }
}

/* Arrow pulse animation for mobile */
@keyframes mcd-arrow-pulse {

  0%,
  100% {
    box-shadow: 0 0 20px rgba(0, 229, 255, 0.4), 0 4px 16px rgba(0, 0, 0, 0.5);
  }

  50% {
    box-shadow: 0 0 30px rgba(0, 229, 255, 0.6), 0 4px 16px rgba(0, 0, 0, 0.5);
  }
}

/* =====================================================
   Site Care Add-on Callout
   ===================================================== */

.mcd-packages-compact__addon-callout {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin-top: 18px;
  padding: 14px 18px;
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgba(255, 166, 0, 0.08), transparent 60%),
    rgba(4, 12, 30, 0.85);
  border: 1px solid rgba(255, 166, 0, 0.35);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.mcd-packages-compact__addon-badge {
  display: inline-flex;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: rgba(255, 166, 0, 0.22);
  color: var(--mcd-amber, #ffb347);
  border: 1px solid rgba(255, 166, 0, 0.55);
}

.mcd-packages-compact__addon-content {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 14px;
  flex: 1 1 auto;
}

.mcd-packages-compact__addon-title {
  font-size: 0.95rem;
  font-weight: 650;
  color: var(--mcd-text, #fff);
}

.mcd-packages-compact__addon-price {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--mcd-amber, #ffb347);
}

.mcd-packages-compact__addon-desc {
  font-size: 0.82rem;
  color: var(--mcd-text-subtle, rgba(226, 232, 255, 0.78));
}

.mcd-packages-compact__addon-link {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--mcd-accent-cyan, #00e5ff);
  text-decoration: none;
  transition: color 150ms ease-out;
}

.mcd-packages-compact__addon-link:hover {
  color: var(--mcd-text, #fff);
  text-decoration: underline;
}

/* =====================================================
   Compare Packages Toggle
   ===================================================== */

.mcd-packages-compact__compare-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-top: 16px;
  padding: 12px 18px;
  border: 1px solid rgba(0, 229, 255, 0.3);
  border-radius: 10px;
  background: transparent;
  color: var(--mcd-text-subtle, rgba(226, 232, 255, 0.85));
  font: inherit;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition:
    background 150ms ease-out,
    border-color 150ms ease-out,
    color 150ms ease-out;
}

.mcd-packages-compact__compare-toggle:hover,
.mcd-packages-compact__compare-toggle:focus-visible {
  background: rgba(0, 229, 255, 0.08);
  border-color: rgba(0, 229, 255, 0.5);
  color: var(--mcd-text, #fff);
}

.mcd-packages-compact__compare-toggle:focus-visible {
  outline: 2px solid var(--mcd-accent-cyan, #00e5ff);
  outline-offset: 2px;
}

.mcd-packages-compact__compare-icon {
  transition: transform 200ms ease-out;
}

.mcd-packages-compact__compare-toggle[aria-expanded="true"] .mcd-packages-compact__compare-icon {
  transform: rotate(180deg);
}

/* =====================================================
   Comparison Table
   ===================================================== */

.mcd-packages-compact__compare-table {
  margin-top: 14px;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(4, 12, 30, 0.92);
  border: 1px solid rgba(0, 229, 255, 0.25);
  animation: mcd-slide-down 250ms ease-out;
}

.mcd-packages-compact__compare-table[hidden] {
  display: none;
}

.mcd-packages-compact__compare-header {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: 1px;
  background: rgba(0, 229, 255, 0.18);
  position: sticky;
  top: 0;
  z-index: 2;
}

.mcd-packages-compact__compare-header .mcd-packages-compact__compare-cell {
  font-weight: 650;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--mcd-text, #fff);
  background: rgba(8, 15, 35, 0.98);
}

.mcd-packages-compact__compare-row {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: 1px;
  background: rgba(0, 229, 255, 0.08);
}

.mcd-packages-compact__compare-row:nth-child(even) .mcd-packages-compact__compare-cell {
  background: rgba(4, 12, 30, 0.95);
}

.mcd-packages-compact__compare-row:nth-child(odd) .mcd-packages-compact__compare-cell {
  background: rgba(8, 16, 38, 0.95);
}

.mcd-packages-compact__compare-row--price .mcd-packages-compact__compare-cell {
  font-weight: 600;
  background: rgba(0, 229, 255, 0.06) !important;
  border-top: 1px solid rgba(0, 229, 255, 0.2);
}

.mcd-packages-compact__compare-cell {
  padding: 10px 12px;
  font-size: 0.78rem;
  color: var(--mcd-text-subtle, rgba(226, 232, 255, 0.85));
  text-align: center;
}

.mcd-packages-compact__compare-cell--feature {
  text-align: left;
  font-weight: 500;
  color: var(--mcd-text, #fff);
}

.mcd-packages-compact__compare-cell small {
  display: block;
  font-size: 0.68rem;
  opacity: 0.7;
}

/* Check/dash/addon indicators */

.mcd-check {
  color: var(--mcd-accent-cyan, #00e5ff);
  font-weight: 700;
}

.mcd-dash {
  opacity: 0.4;
}

.mcd-addon {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.68rem;
  font-weight: 600;
  background: rgba(255, 166, 0, 0.18);
  color: var(--mcd-amber, #ffb347);
}

.mcd-included {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.68rem;
  font-weight: 600;
  background: rgba(0, 229, 255, 0.15);
  color: var(--mcd-accent-cyan, #00e5ff);
  border: 1px solid rgba(0, 229, 255, 0.35);
}

/* =====================================================
   Panel Animations (smooth transitions)
   ===================================================== */

.mcd-packages-compact__panel,
.mcd-packages-compact__panel.is-active {
  animation: mcd-fade-slide-up 200ms ease-out;
}

@keyframes mcd-fade-slide-up {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes mcd-slide-down {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {

  .mcd-packages-compact__tab,
  .mcd-packages-compact__panel,
  .mcd-packages-compact__compare-table,
  .mcd-packages-compact__compare-icon {
    animation: none;
    transition: none;
  }
}

/* =====================================================
   Proof Rail - Full-Width Glass Value Props Bar
   ===================================================== */

.mcd-proof-rail {
  --proof-rail-text: rgba(226, 232, 255, 0.95);
  --proof-rail-separator: rgba(0, 229, 255, 0.8);
  /* Used by hero for viewport calc */
  --proof-rail-pad-x: clamp(24px, 5vw, 56px);
  --proof-rail-pad-y: 0px;
  /* Hug text more tightly without changing rail height */
  position: relative;
  width: 100%;
  box-sizing: border-box;
  height: var(--proof-rail-height, 44px);
  min-height: var(--proof-rail-height, 44px);
  /* Attach directly to ticker above - pull up to eliminate gap */
}

body.home .mcd-proof-rail {
  margin-top: 0 !important;
}

.mcd-proof-rail {
  margin-top: 0 !important;
  /* Fallback */
  /* Slim vertical padding for sleek look */
  padding: var(--proof-rail-pad-y) var(--proof-rail-pad-x);
  /* Fallback for browsers without backdrop-filter */
  background: rgba(6, 12, 26, 0.85);
  background-image: linear-gradient(to bottom, rgba(0, 229, 255, 0.08) 0%, transparent 40%);
  border: 1px solid rgba(0, 229, 255, 0.24);
  border-left: 0;
  border-right: 0;
  box-shadow:
    0 30px 80px rgba(3, 9, 28, 0.7),
    inset 0 1px 0 rgba(0, 229, 255, 0.12);
}

/* Enable true glassmorphism when supported */
@supports ((-webkit-backdrop-filter: blur(0)) or (backdrop-filter: blur(0))) {
  .mcd-proof-rail {
    -webkit-backdrop-filter: blur(14px) saturate(145%);
    backdrop-filter: blur(14px) saturate(145%);
    /* Much more transparent to let the blur show through */
    background: rgba(6, 12, 26, 0.22);
  }
}

/* Subtle gradient overlay for depth */

.mcd-proof-rail::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 50% at 20% 0%, rgba(0, 229, 255, 0.12), transparent 60%),
    radial-gradient(ellipse 60% 50% at 80% 100%, rgba(255, 0, 224, 0.08), transparent 60%);
  mix-blend-mode: screen;
}

.mcd-proof-rail__inner {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
  gap: clamp(8px, 2vw, 16px);
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}

.mcd-proof-rail__item {
  font-size: clamp(0.5rem, 0.85vw, 0.65rem);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.05;
  white-space: nowrap;
  /* Calm, grounded single color - soft off-white with subtle cyan tint */      
  color: rgba(232, 240, 255, 0.95);
  text-shadow: 0 0 20px rgba(0, 229, 255, 0.15);
  /* No gradient, no animation - let the ticker be the energy layer */
  background: none;
  -webkit-background-clip: unset;
  background-clip: unset;
  animation: none;
}

/* Legacy gradient fallback - disabled for calmer look */
.mcd-proof-rail__item--gradient {
  /* Gradient text with cyan-to-magenta sweep */
  background: linear-gradient(92deg,
      rgba(0, 229, 255, 1) 0%,
      rgba(226, 232, 255, 1) 35%,
      rgba(255, 116, 228, 0.9) 70%,
      rgba(0, 229, 255, 1) 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* Opt out of the global outline shadow (it breaks gradient-clipped text). */
  text-shadow: none;
  /* Subtle shimmer animation */
  animation: mcd-text-shimmer 6s ease-in-out infinite;
}

.mcd-proof-rail__separator {
  font-size: clamp(0.5rem, 0.8vw, 0.6rem);
  font-weight: 300;
  user-select: none;
  /* Subtle, understated - matches tagline calm treatment */
  color: rgba(180, 200, 220, 0.5);
  text-shadow: none;
  line-height: 1.05;
  margin: 0 0.15em;
}

/* Legacy pulsing separator - disabled */
.mcd-proof-rail__separator--glow {
  color: rgba(0, 229, 255, 0.9);
  text-shadow:
    0 0 8px rgba(0, 229, 255, 0.7),
    0 0 16px rgba(0, 229, 255, 0.4),
    0 0 24px rgba(0, 229, 255, 0.2);
  animation: mcd-separator-pulse 2.5s ease-in-out infinite;
}

/* Shimmer sweep for gradient text */
@keyframes mcd-text-shimmer {

  0%,
  100% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }
}

/* Gentle pulse for separators */
@keyframes mcd-separator-pulse {

  0%,
  100% {
    opacity: 0.7;
    text-shadow:
      0 0 8px rgba(0, 229, 255, 0.5),
      0 0 16px rgba(0, 229, 255, 0.25);
  }

  50% {
    opacity: 1;
    text-shadow:
      0 0 10px rgba(0, 229, 255, 0.8),
      0 0 20px rgba(0, 229, 255, 0.5),
      0 0 30px rgba(0, 229, 255, 0.3);
  }
}

/* Desktop: tighter spacing, single line */
@media (min-width: 600px) {
  .mcd-proof-rail {
    --proof-rail-pad-y: 0px;
  }

  .mcd-proof-rail__inner {
    flex-wrap: nowrap;
    gap: clamp(14px, 2.5vw, 22px);
  }

  .mcd-proof-rail__item {
    font-size: clamp(0.9rem, 1.6vw, 1.2rem);
    line-height: 1.1;
  }

  .mcd-proof-rail__separator {
    font-size: clamp(0.8rem, 1.4vw, 1.1rem);
    line-height: 1.1;
  }
}

/* Subtle entrance animation */

.mcd-proof-rail {
  animation: mcd-rail-fade-in 600ms ease-out;
}

@keyframes mcd-rail-fade-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes mcd-soft-pulse {
  0% {
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.08),
      0 6px 16px rgba(0, 0, 0, 0.35),
      0 0 14px rgba(0, 229, 255, 0.26);
  }

  100% {
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.1),
      0 6px 18px rgba(0, 0, 0, 0.38),
      0 0 20px rgba(255, 77, 225, 0.28);
  }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .mcd-proof-rail {
    animation: none;
  }
}

/* Mobile: proof rail fixed at viewport bottom, 84px (2× ticker) */
@media (max-width: 640px) {
  .mcd-home {
    overflow-x: hidden;
    overflow-y: visible;
  }

  body.home .mcd-proof-rail {
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    margin: 0 !important;
    z-index: 10 !important;
    width: 100vw;
    max-width: none;
    margin-inline: calc(50% - 50vw) !important;
    --proof-rail-pad-x: 16px;
    --proof-rail-pad-y: 0px;
    padding: var(--proof-rail-pad-y) var(--proof-rail-pad-x);
    height: var(--proof-rail-height, 44px);
    min-height: var(--proof-rail-height, 44px);
    background: rgba(6, 12, 26, 0.6);
    border-top: 1px solid rgba(0, 229, 255, 0.25);
    display: flex;
    align-items: center;
  }

  .mcd-proof-rail__inner {
    flex-wrap: nowrap;
    gap: 8px;
  }

  .mcd-proof-rail__item {
    font-size: 0.85rem;
    letter-spacing: 0.08em;
  }

  .mcd-proof-rail__separator {
    font-size: 0.9rem;
  }
}

/* =============================================================================
   PROOF RAIL - Tagline Only (Dec 2025)
   Badges moved to hero section for better visibility
   Heights: Desktop 36px (ticker), 72px (rail)
   ============================================================================= */

.mcd-proof-rail__inner {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: 100%;  /* Fill the proof rail height */
  padding: 0 20px;
}

.mcd-proof-rail__inner::before {
  content: none;
}

.mcd-proof-rail__tagline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 2vw, 18px);
}

/* Tablet: slightly tighter */
@media (max-width: 768px) and (min-width: 641px) {
  .mcd-proof-rail__inner {
    padding: 0 16px;
  }

  .mcd-proof-rail__tagline {
    gap: 12px;
  }
}

/* Mobile: compact styling */
@media (max-width: 640px) {
  .mcd-proof-rail__inner {
    padding: 0 12px;
  }

  .mcd-proof-rail__tagline {
    gap: 10px;
    font-size: 0.9rem;  /* Slightly smaller on mobile */
  }
}

/* =============================================================================
   SERVICE MAP - SPLIT-PANEL MOCKUP PARITY (Nov 30, 2025)
   Consolidated final overrides - matches service-map-mock.html
   ============================================================================= */

/* Card: no padding, equal split columns */

.mcd-home__service-map-card {
  --sm-radius: clamp(18px, 3vw, 24px);
  position: relative;
  overflow: hidden;
  border-radius: var(--sm-radius);
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: linear-gradient(145deg, rgba(6, 10, 22, 0.9), rgba(4, 8, 18, 0.82));
  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.6);
  padding: 0;
  isolation: isolate;
}

.mcd-home__service-map-card::before,
.mcd-home__service-map-card::after {
  content: none;
}

/* Grid: true split columns */

.mcd-home__service-map-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.1fr);
  gap: 0;
  align-items: stretch;
}

/* Map side (figure): left-only radius, fills panel */

.mcd-home__service-map-figure {
  position: relative;
  overflow: hidden;
  border-radius: var(--sm-radius, 24px) 0 0 var(--sm-radius, 24px);
  min-height: clamp(280px, 36vw, 420px);
  max-width: none;
  margin: 0;
  isolation: isolate;
  width: 100%;
  min-width: 0;
  align-self: stretch;
}

/* Color overlay on map */

.mcd-home__service-map-figure::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(6, 12, 28, 0.2), rgba(6, 12, 28, 0.5) 70%);
  z-index: 1;
  pointer-events: none;
}

/* Vignette overlay */

.mcd-home__service-map-figure::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, rgba(0, 0, 0, 0.35), transparent 55%);
  z-index: 1;
  pointer-events: none;
}

/* Show the actual image */

.mcd-home__service-map-figure picture,
.mcd-home__service-map-figure img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 1;
  object-fit: cover;
  filter: saturate(1.2) brightness(1.05);
  pointer-events: auto;
}

/* Radar overlays centered on map */

.mcd-home__service-map-rings,
.mcd-home__service-map-sweep,
.mcd-home__service-map-lines {
  position: absolute;
  pointer-events: none;
  mix-blend-mode: screen;
  z-index: 2;
}

.mcd-home__service-map-rings {
  inset: -16%;
  background:
    radial-gradient(circle, rgba(106, 242, 255, 0.25) 0%, rgba(106, 242, 255, 0.06) 26%, transparent 44%),
    radial-gradient(circle, rgba(106, 242, 255, 0.18) 0%, rgba(106, 242, 255, 0.05) 18%, transparent 32%);
  opacity: 0.75;
  animation: pulse 3.8s ease-in-out infinite;
}

.mcd-home__service-map-lines {
  inset: 0;
  background: repeating-conic-gradient(rgba(255, 255, 255, 0.12) 0deg 1deg,
      transparent 1deg 11deg);
  opacity: 0.22;
}

.mcd-home__service-map-sweep {
  inset: -32%;
  background: conic-gradient(from 6deg,
      rgba(106, 242, 255, 0) 0deg,
      rgba(106, 242, 255, 0.7) 6deg,
      rgba(255, 77, 210, 0.4) 12deg,
      rgba(106, 242, 255, 0.12) 18deg,
      rgba(106, 242, 255, 0) 28deg,
      rgba(106, 242, 255, 0) 360deg);
  opacity: 0.95;
  filter: drop-shadow(0 0 16px rgba(106, 242, 255, 0.7));
  animation: sweep 7.5s linear infinite;
}

/* Content side (copy): right-only radius, left border divider */

.mcd-home__service-map-copy {
  position: relative;
  padding: clamp(26px, 4vw, 40px);
  border-radius: 0 var(--sm-radius, 24px) var(--sm-radius, 24px) 0;
  background: linear-gradient(145deg, rgba(6, 10, 22, 0.92), rgba(4, 8, 18, 0.86));
  border-left: 1px solid rgba(255, 255, 255, 0.12);
  display: grid;
  gap: 12px;
  align-content: center;
  z-index: 5;
  max-width: none;
}

/* Eyebrow styling */

.mcd-home__service-map-eyebrow {
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.68);
  margin: 0;
}

/* Title */

.mcd-home__service-map-title {
  margin: 0;
  font-size: clamp(2.1rem, 4vw, 3.2rem);
  line-height: 1.05;
  color: #fff;
  text-shadow: none;
}

/* Lead paragraph */

.mcd-home__service-map-copy>p {
  margin: 0;
  color: rgba(244, 247, 255, 0.86);
  line-height: 1.6;
  font-size: 1.05rem;
  max-width: 50ch;
}

/* Chips: 2-column layout with bar bullets */

.mcd-home__service-map-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 0;
  margin: 12px 0 0;
  list-style: none;
}

.mcd-chip {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(10px);
  font-weight: 600;
  color: #f4f7ff;
  font-size: 0.95rem;
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
  width: calc(50% - 5px);
  min-width: 180px;
}

.mcd-chip::before {
  content: "";
  width: 14px;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, #6af2ff, #ff4dd2);
  box-shadow: 0 0 10px rgba(106, 242, 255, 0.55);
  flex-shrink: 0;
}

.mcd-chip:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.32);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
}

/* Mobile: stack vertically */
@media (max-width: 900px) {
  .mcd-home__service-map-grid {
    grid-template-columns: 1fr;
  }

  .mcd-home__service-map-figure {
    border-radius: var(--sm-radius, 24px) var(--sm-radius, 24px) 0 0;
    min-height: clamp(220px, 50vw, 300px);
  }

  .mcd-home__service-map-copy {
    border-radius: 0 0 var(--sm-radius, 24px) var(--sm-radius, 24px);
    border-left: none;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
  }

  .mcd-chip {
    width: 100%;
    min-width: 0;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   TRUST SECTION VARIATIONS (Bento + Organic)
   Toggle between styles via floating button
   ═══════════════════════════════════════════════════════════════════════════ */

/* Hidden state for toggle */

.mcd-trust-bento[hidden],
.mcd-trust-organic[hidden] {
  display: none !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   SHARED: Glass utility
   ───────────────────────────────────────────────────────────────────────────── */

.mcd-trust-glass {
  background: linear-gradient(165deg, rgba(12, 20, 42, 0.88), rgba(8, 14, 32, 0.82));
  backdrop-filter: blur(16px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 16px;
  position: relative;
  transition:
    border-color 0.25s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.mcd-trust-glass::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.06), transparent 40%);
  pointer-events: none;
}

.mcd-trust-glass--hover:hover {
  border-color: rgba(0, 229, 255, 0.2);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 229, 255, 0.08);
  transform: translateY(-2px);
}

/* Gradient border */

.mcd-trust-glass--gradient {
  background:
    linear-gradient(165deg, rgba(12, 20, 42, 0.92), rgba(8, 14, 32, 0.88)) padding-box,
    linear-gradient(135deg, rgba(0, 229, 255, 0.3), rgba(255, 0, 224, 0.2)) border-box;
  border: 1px solid transparent;
}

/* ─────────────────────────────────────────────────────────────────────────────
   SHARED: Eyebrow label
   ───────────────────────────────────────────────────────────────────────────── */

.mcd-trust-eyebrow {
  font-family: var(--font-display, 'Manrope', sans-serif);
  font-size: clamp(0.68rem, 1.5vw, 0.78rem);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mcd-accent-cyan, #00E5FF);
  text-shadow: 0 0 20px rgba(0, 229, 255, 0.35);
}

/* ─────────────────────────────────────────────────────────────────────────────
   SHARED: Portrait avatar
   ───────────────────────────────────────────────────────────────────────────── */

.mcd-trust-portrait {
  position: relative;
  width: clamp(64px, 10vw, 80px);
  height: clamp(64px, 10vw, 80px);
  border-radius: 24px;
  background: linear-gradient(135deg, var(--mcd-accent-magenta, #FF00E0), #6E2AFB);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 16px 48px rgba(0, 0, 0, 0.3),
    0 0 40px rgba(255, 0, 224, 0.3),
    inset 0 2px 4px rgba(255, 255, 255, 0.15);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  flex-shrink: 0;
}

.mcd-trust-portrait::before {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: inherit;
  background: linear-gradient(135deg, var(--mcd-accent-cyan, #00E5FF), var(--mcd-accent-magenta, #FF00E0));
  z-index: -1;
  opacity: 0.5;
  filter: blur(8px);
  transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.mcd-trust-portrait:hover {
  transform: scale(1.05) rotate(2deg);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.4), 0 0 50px rgba(255, 0, 224, 0.3);
}

.mcd-trust-portrait:hover::before {
  opacity: 0.8;
}

.mcd-trust-portrait__icon {
  width: 60%;
  height: 60%;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mcd-trust-portrait__icon svg {
  width: 55%;
  height: 55%;
  fill: #6E2AFB;
}

/* ─────────────────────────────────────────────────────────────────────────────
   SHARED: Bullet dots
   ───────────────────────────────────────────────────────────────────────────── */

.mcd-trust-bullet {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: linear-gradient(135deg, var(--mcd-accent-magenta, #FF00E0), var(--mcd-accent-cyan, #00E5FF));
  box-shadow: 0 0 12px rgba(0, 229, 255, 0.35);
  flex-shrink: 0;
  margin-top: 0.55em;
  transition: transform 0.15s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.15s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ─────────────────────────────────────────────────────────────────────────────
   SHARED: Quick icon
   ───────────────────────────────────────────────────────────────────────────── */

.mcd-trust-quick-icon {
  width: clamp(40px, 6vw, 48px);
  height: clamp(40px, 6vw, 48px);
  border-radius: 12px;
  background: rgba(255, 107, 0, 0.12);
  border: 1px solid rgba(255, 107, 0, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

.mcd-trust-quick-icon svg {
  width: 50%;
  height: 50%;
  fill: var(--mcd-accent-amber, #FF6B00);
  transition: transform 0.25s ease;
}

.mcd-trust-quick-icon:hover {
  background: rgba(255, 107, 0, 0.18);
  border-color: rgba(255, 107, 0, 0.4);
  transform: scale(1.08);
}

.mcd-trust-quick-icon:hover svg {
  transform: scale(1.1);
}

/* ═══════════════════════════════════════════════════════════════════════════
   BENTO GRID VARIATION
   ═══════════════════════════════════════════════════════════════════════════ */

.mcd-trust-bento {
  padding: clamp(48px, 6vw, 72px) clamp(16px, 4vw, 32px);
}

.mcd-trust-bento__inner {
  max-width: 1120px;
  margin: 0 auto;
}

.mcd-trust-bento__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: auto;
  gap: 16px;
}

.mcd-trust-bento__cell {
  padding: clamp(24px, 3vw, 32px);
}

/* Eyebrow cell */

.mcd-trust-bento__eyebrow-cell {
  grid-column: span 4;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    linear-gradient(165deg, rgba(12, 20, 42, 0.92), rgba(8, 14, 32, 0.88)) padding-box,
    linear-gradient(135deg, rgba(0, 229, 255, 0.35), rgba(110, 42, 251, 0.25)) border-box;
  border: 1px solid transparent;
  min-height: 80px;
}

.mcd-trust-bento__eyebrow-cell .mcd-trust-eyebrow {
  text-align: center;
}

/* Title cell */

.mcd-trust-bento__title-cell {
  grid-column: span 8;
}

.mcd-trust-bento__title {
  font-size: clamp(1.5rem, 3.5vw, 2.25rem);
  font-weight: 800;
  line-height: 1.15;
  color: #fff;
  margin: 0;
}

.mcd-trust-bento__title-accent {
  background: linear-gradient(135deg, var(--mcd-accent-cyan, #00E5FF), #60F0FF);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Intro cell */

.mcd-trust-bento__intro-cell {
  grid-column: span 6;
}

.mcd-trust-bento__intro {
  font-size: clamp(1rem, 2vw, 1.1rem);
  color: var(--mcd-text-secondary, #E0EAFF);
  line-height: 1.7;
  margin: 0;
}

/* List cell */

.mcd-trust-bento__list-cell {
  grid-column: span 6;
}

.mcd-trust-bento__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.mcd-trust-bento__list-item {
  display: flex;
  gap: 12px;
  font-size: clamp(0.9rem, 1.8vw, 0.95rem);
  color: var(--mcd-text-secondary, #E0EAFF);
  line-height: 1.55;
  transition: transform 0.15s cubic-bezier(0.16, 1, 0.3, 1);
}

.mcd-trust-bento__list-item:hover {
  transform: translateX(4px);
}

.mcd-trust-bento__list-item:hover .mcd-trust-bullet {
  transform: scale(1.2);
  box-shadow: 0 0 18px rgba(0, 229, 255, 0.35);
}

/* Testimonial cell */

.mcd-trust-bento__testimonial-cell {
  grid-column: span 7;
  display: flex;
  gap: 24px;
  align-items: flex-start;
  background:
    linear-gradient(165deg, rgba(12, 20, 42, 0.92), rgba(8, 14, 32, 0.88)) padding-box,
    linear-gradient(135deg, rgba(255, 0, 224, 0.2), rgba(110, 42, 251, 0.15)) border-box;
  border: 1px solid transparent;
}

.mcd-trust-bento__quote-wrap {
  flex: 1;
}

.mcd-trust-bento__quote {
  font-size: clamp(1rem, 2vw, 1.1rem);
  font-style: italic;
  color: #fff;
  line-height: 1.65;
  margin: 0 0 16px;
  position: relative;
}

.mcd-trust-bento__quote::before {
  content: "\201C";
  position: absolute;
  top: -8px;
  left: -12px;
  font-size: 2.5rem;
  font-style: normal;
  color: rgba(0, 229, 255, 0.25);
  font-family: Georgia, serif;
  line-height: 1;
}

.mcd-trust-bento__cite {
  font-size: 0.82rem;
  font-style: normal;
  color: var(--mcd-text-tertiary, #A0B4D4);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Quick cell */

.mcd-trust-bento__quick-cell {
  grid-column: span 5;
  background:
    linear-gradient(165deg, rgba(20, 14, 8, 0.85), rgba(12, 10, 8, 0.8)) padding-box,
    linear-gradient(135deg, rgba(255, 107, 0, 0.3), rgba(255, 150, 50, 0.15)) border-box;
  border: 1px solid transparent;
}

.mcd-trust-bento__quick-label {
  font-family: var(--font-display, 'Manrope', sans-serif);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mcd-accent-amber, #FF6B00);
  margin: 0 0 24px;
}

.mcd-trust-bento__quick-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.mcd-trust-bento__quick-item {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  transition: transform 0.15s cubic-bezier(0.16, 1, 0.3, 1);
}

.mcd-trust-bento__quick-item:hover {
  transform: translateX(4px);
}

.mcd-trust-bento__quick-text {
  font-size: 0.88rem;
  color: var(--mcd-text-secondary, #E0EAFF);
  line-height: 1.5;
  margin: 0;
}

.mcd-trust-bento__quick-text strong {
  color: var(--mcd-accent-amber, #FF6B00);
  font-weight: 600;
}

/* Bento Responsive */
@media (max-width: 1024px) {
  .mcd-trust-bento__eyebrow-cell {
    grid-column: span 5;
  }

  .mcd-trust-bento__title-cell {
    grid-column: span 7;
  }

  .mcd-trust-bento__intro-cell {
    grid-column: span 12;
  }

  .mcd-trust-bento__list-cell {
    grid-column: span 12;
  }

  .mcd-trust-bento__testimonial-cell {
    grid-column: span 12;
  }

  .mcd-trust-bento__quick-cell {
    grid-column: span 12;
  }
}

@media (max-width: 768px) {
  .mcd-trust-bento__grid {
    gap: 12px;
  }

  .mcd-trust-bento__eyebrow-cell,
  .mcd-trust-bento__title-cell,
  .mcd-trust-bento__intro-cell,
  .mcd-trust-bento__list-cell,
  .mcd-trust-bento__testimonial-cell,
  .mcd-trust-bento__quick-cell {
    grid-column: span 12;
  }

  .mcd-trust-bento__eyebrow-cell {
    min-height: 60px;
  }

  .mcd-trust-bento__cell {
    padding: 24px;
  }

  .mcd-trust-bento__testimonial-cell {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .mcd-trust-bento__quote::before {
    left: 50%;
    transform: translateX(-50%);
  }

  .mcd-trust-bento__quick-list {
    gap: 24px;
  }

  .mcd-trust-bento__quick-item {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
  }
}

@media (max-width: 480px) {
  .mcd-trust-bento__title {
    font-size: 1.4rem;
  }

  .mcd-trust-bento__cell {
    padding: 16px;
  }

  .mcd-trust-bento__list {
    gap: 12px;
  }
}

/* Staggered animation for bento list items */
@keyframes mcd-trust-slideIn {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.mcd-trust-bento__list-item {
  animation: mcd-trust-slideIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

.mcd-trust-bento__list-item:nth-child(1) {
  animation-delay: 100ms;
}

.mcd-trust-bento__list-item:nth-child(2) {
  animation-delay: 180ms;
}

.mcd-trust-bento__list-item:nth-child(3) {
  animation-delay: 260ms;
}

.mcd-trust-bento__list-item:nth-child(4) {
  animation-delay: 340ms;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ORGANIC FLOW VARIATION
   ═══════════════════════════════════════════════════════════════════════════ */

.mcd-trust-organic {
  padding: clamp(48px, 6vw, 72px) clamp(16px, 4vw, 32px);
}

.mcd-trust-organic__inner {
  max-width: 1080px;
  margin: 0 auto;
  position: relative;
}

/* Floating blobs */

.mcd-trust-organic__blob {
  position: absolute;
  border-radius: 60% 40% 70% 30% / 50% 60% 40% 50%;
  filter: blur(60px);
  z-index: 0;
  pointer-events: none;
}

.mcd-trust-organic__blob--1 {
  top: -8%;
  left: -12%;
  width: clamp(200px, 30vw, 320px);
  height: clamp(200px, 30vw, 320px);
  background: linear-gradient(135deg, rgba(0, 229, 255, 0.1), rgba(110, 42, 251, 0.08));
  animation: mcd-trust-blobFloat1 14s ease-in-out infinite;
}

.mcd-trust-organic__blob--2 {
  bottom: -10%;
  right: -8%;
  width: clamp(180px, 25vw, 280px);
  height: clamp(180px, 25vw, 280px);
  background: linear-gradient(135deg, rgba(255, 0, 224, 0.08), rgba(255, 107, 0, 0.06));
  border-radius: 40% 60% 30% 70% / 60% 40%;
  animation: mcd-trust-blobFloat2 12s ease-in-out infinite;
}

.mcd-trust-organic__blob--3 {
  top: 40%;
  right: -5%;
  width: clamp(120px, 18vw, 200px);
  height: clamp(120px, 18vw, 200px);
  background: linear-gradient(135deg, rgba(0, 229, 255, 0.06), rgba(255, 0, 224, 0.04));
  border-radius: 50% 50% 40% 60% / 40% 60% 50% 50%;
  animation: mcd-trust-blobFloat3 10s ease-in-out infinite;
}

@keyframes mcd-trust-blobFloat1 {

  0%,
  100% {
    transform: translate(0, 0) rotate(0deg) scale(1);
  }

  33% {
    transform: translate(15px, -20px) rotate(3deg) scale(1.02);
  }

  66% {
    transform: translate(-10px, 10px) rotate(-2deg) scale(0.98);
  }
}

@keyframes mcd-trust-blobFloat2 {

  0%,
  100% {
    transform: translate(0, 0) rotate(0deg);
  }

  50% {
    transform: translate(-20px, 15px) rotate(-5deg);
  }
}

@keyframes mcd-trust-blobFloat3 {

  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }

  50% {
    transform: translate(10px, -10px) scale(1.05);
  }
}

/* Main container */

.mcd-trust-organic__container {
  position: relative;
  z-index: 1;
  padding: clamp(32px, 5vw, 48px);
  border-radius: 48px 20px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.4), 0 0 80px rgba(0, 229, 255, 0.05);
}

.mcd-trust-organic__eyebrow-wrap {
  display: inline-flex;
  padding: 12px 24px;
  margin-bottom: 32px;
  border-radius: 9999px;
  background: linear-gradient(135deg, rgba(0, 229, 255, 0.12), rgba(255, 0, 224, 0.08));
  border: 1px solid rgba(0, 229, 255, 0.25);
  transition: background 0.25s ease, box-shadow 0.25s ease;
}

.mcd-trust-organic__eyebrow-wrap:hover {
  background: linear-gradient(135deg, rgba(0, 229, 255, 0.18), rgba(255, 0, 224, 0.12));
  box-shadow: 0 0 30px rgba(0, 229, 255, 0.35);
}

/* Hero section */

.mcd-trust-organic__hero {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 40px;
  align-items: center;
  margin-bottom: 32px;
}

.mcd-trust-organic__title {
  font-size: clamp(1.75rem, 4.5vw, 2.6rem);
  font-weight: 800;
  line-height: 1.12;
  color: #fff;
  margin: 0;
}

.mcd-trust-organic__portrait-area {
  display: flex;
  justify-content: center;
  align-items: center;
}

.mcd-trust-organic__portrait {
  width: clamp(100px, 14vw, 140px);
  height: clamp(100px, 14vw, 140px);
  border-radius: 55% 45% 60% 40% / 45% 55%;
  animation:
    mcd-trust-portraitMorph 8s ease-in-out infinite,
    mcd-trust-portraitFloat 6s ease-in-out infinite;
}

@keyframes mcd-trust-portraitMorph {

  0%,
  100% {
    border-radius: 55% 45% 60% 40% / 45% 55%;
  }

  25% {
    border-radius: 45% 55% 50% 50% / 55% 45%;
  }

  50% {
    border-radius: 50% 50% 45% 55% / 50%;
  }

  75% {
    border-radius: 60% 40% 55% 45% / 40% 60%;
  }
}

@keyframes mcd-trust-portraitFloat {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-12px);
  }
}

/* Intro */

.mcd-trust-organic__intro {
  font-size: clamp(1.05rem, 2.2vw, 1.15rem);
  color: var(--mcd-text-secondary, #E0EAFF);
  line-height: 1.7;
  max-width: 680px;
  margin: 0 0 32px;
}

/* Wave divider */

.mcd-trust-organic__wave {
  height: 40px;
  margin: 24px 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 40'%3E%3Cpath d='M0,20 Q100,5 200,20 T400,20 T600,20 T800,20 T1000,20 T1200,20' fill='none' stroke='rgba(0,229,255,0.15)' stroke-width='2'/%3E%3Cpath d='M0,20 Q100,35 200,20 T400,20 T600,20 T800,20 T1000,20 T1200,20' fill='none' stroke='rgba(255,0,224,0.1)' stroke-width='1.5' stroke-dasharray='8,8'/%3E%3C/svg%3E") repeat-x center;
  opacity: 0.8;
}

/* Content grid */

.mcd-trust-organic__content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}

/* List */

.mcd-trust-organic__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.mcd-trust-organic__list-item {
  display: flex;
  gap: 16px;
  font-size: clamp(0.92rem, 1.8vw, 1rem);
  color: var(--mcd-text-secondary, #E0EAFF);
  line-height: 1.6;
  transition: transform 0.15s cubic-bezier(0.16, 1, 0.3, 1);
}

.mcd-trust-organic__list-item:hover {
  transform: translateX(6px);
}

.mcd-trust-organic__blob-bullet {
  width: 14px;
  height: 14px;
  margin-top: 0.4em;
  border-radius: 60% 40% 70% 30%;
  background: linear-gradient(135deg, var(--mcd-accent-magenta, #FF00E0), var(--mcd-accent-cyan, #00E5FF));
  flex-shrink: 0;
  box-shadow: 0 0 12px rgba(0, 229, 255, 0.35);
  animation: mcd-trust-bulletMorph 5s ease-in-out infinite;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

@keyframes mcd-trust-bulletMorph {

  0%,
  100% {
    border-radius: 60% 40% 70% 30%;
  }

  50% {
    border-radius: 40% 60% 30% 70%;
  }
}

.mcd-trust-organic__list-item:hover .mcd-trust-organic__blob-bullet {
  transform: scale(1.25);
  box-shadow: 0 0 20px rgba(0, 229, 255, 0.35);
}

/* Right column */

.mcd-trust-organic__right {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Testimonial card */

.mcd-trust-organic__testimonial {
  padding: 24px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 28px 14px;
  border: 1px solid rgba(255, 0, 224, 0.15);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.mcd-trust-organic__testimonial:hover {
  border-color: rgba(255, 0, 224, 0.3);
  box-shadow: 0 0 40px rgba(255, 0, 224, 0.1);
}

.mcd-trust-organic__quote {
  font-size: clamp(1rem, 2vw, 1.1rem);
  font-style: italic;
  color: #fff;
  line-height: 1.65;
  margin: 0 0 16px;
  position: relative;
  padding-left: 16px;
}

.mcd-trust-organic__quote::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 3px;
  background: linear-gradient(180deg, var(--mcd-accent-cyan, #00E5FF), var(--mcd-accent-magenta, #FF00E0));
  border-radius: 2px;
}

.mcd-trust-organic__cite {
  font-size: 0.82rem;
  font-style: normal;
  color: var(--mcd-text-tertiary, #A0B4D4);
  padding-left: 16px;
}

/* Quick card */

.mcd-trust-organic__quick {
  padding: 24px;
  background: linear-gradient(160deg, rgba(255, 107, 0, 0.08), transparent);
  border-radius: 20px 10px;
  border: 1px solid rgba(255, 107, 0, 0.15);
  transition: border-color 0.25s ease, background 0.25s ease;
}

.mcd-trust-organic__quick:hover {
  border-color: rgba(255, 107, 0, 0.25);
  background: linear-gradient(160deg, rgba(255, 107, 0, 0.12), transparent);
}

.mcd-trust-organic__quick-label {
  font-family: var(--font-display, 'Manrope', sans-serif);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mcd-accent-amber, #FF6B00);
  margin: 0 0 16px;
}

.mcd-trust-organic__quick-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.mcd-trust-organic__quick-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 0.9rem;
  color: var(--mcd-text-secondary, #E0EAFF);
  line-height: 1.5;
  transition: transform 0.15s cubic-bezier(0.16, 1, 0.3, 1);
}

.mcd-trust-organic__quick-item:hover {
  transform: translateX(4px);
}

.mcd-trust-organic__quick-item strong {
  color: var(--mcd-accent-amber, #FF6B00);
}

.mcd-trust-organic__quick-dot {
  width: 8px;
  height: 8px;
  margin-top: 0.45em;
  border-radius: 50%;
  background: var(--mcd-accent-amber, #FF6B00);
  box-shadow: 0 0 10px rgba(255, 107, 0, 0.4);
  flex-shrink: 0;
}

/* Organic responsive */
@media (max-width: 900px) {
  .mcd-trust-organic__hero {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 24px;
  }

  .mcd-trust-organic__portrait-area {
    order: -1;
  }

  .mcd-trust-organic__intro {
    margin-left: auto;
    margin-right: auto;
  }

  .mcd-trust-organic__content {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

@media (max-width: 600px) {
  .mcd-trust-organic__container {
    padding: 24px;
    border-radius: 32px 16px;
  }

  .mcd-trust-organic__title {
    font-size: 1.6rem;
  }

  .mcd-trust-organic__testimonial,
  .mcd-trust-organic__quick {
    padding: 16px;
  }

  .mcd-trust-organic__blob--1,
  .mcd-trust-organic__blob--2,
  .mcd-trust-organic__blob--3 {
    display: none;
  }
}

@media (max-width: 400px) {
  .mcd-trust-organic__eyebrow-wrap {
    padding: 8px 16px;
  }

  .mcd-trust-organic__eyebrow-wrap .mcd-trust-eyebrow {
    font-size: 0.65rem;
  }

  .mcd-trust-organic__list-item {
    gap: 12px;
  }
}

/* Staggered animation for organic list */

.mcd-trust-organic__list-item {
  animation: mcd-trust-slideIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

.mcd-trust-organic__list-item:nth-child(1) {
  animation-delay: 100ms;
}

.mcd-trust-organic__list-item:nth-child(2) {
  animation-delay: 180ms;
}

.mcd-trust-organic__list-item:nth-child(3) {
  animation-delay: 260ms;
}

.mcd-trust-organic__list-item:nth-child(4) {
  animation-delay: 340ms;
}

/* ═══════════════════════════════════════════════════════════════════════════
   FLOATING TOGGLE BUTTON
   ═══════════════════════════════════════════════════════════════════════════ */

.mcd-trust-toggle {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border: 1px solid rgba(0, 229, 255, 0.3);
  border-radius: 9999px;
  background: linear-gradient(165deg, rgba(12, 20, 42, 0.95), rgba(8, 14, 32, 0.9));
  backdrop-filter: blur(16px) saturate(150%);
  color: var(--mcd-text-secondary, #E0EAFF);
  font-family: var(--font-display, 'Manrope', sans-serif);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.4),
    0 0 40px rgba(0, 229, 255, 0.15);
  transition:
    transform 0.2s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.2s ease;
}

.mcd-trust-toggle:hover {
  transform: translateY(-2px) scale(1.02);
  border-color: var(--mcd-accent-cyan, #00E5FF);
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.5),
    0 0 50px rgba(0, 229, 255, 0.25);
}

.mcd-trust-toggle:active {
  transform: translateY(0) scale(0.98);
}

.mcd-trust-toggle:focus-visible {
  outline: 2px solid var(--mcd-accent-cyan, #00E5FF);
  outline-offset: 3px;
}

.mcd-trust-toggle__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--mcd-accent-cyan, #00E5FF);
}

.mcd-trust-toggle__text {
  color: var(--mcd-text-tertiary, #A0B4D4);
}

.mcd-trust-toggle__label {
  color: var(--mcd-accent-cyan, #00E5FF);
  text-shadow: 0 0 12px rgba(0, 229, 255, 0.4);
}

/* Mobile: smaller toggle */
@media (max-width: 600px) {
  .mcd-trust-toggle {
    bottom: 16px;
    right: 16px;
    padding: 10px 16px;
    font-size: 0.8rem;
  }

  .mcd-trust-toggle__text {
    display: none;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PORTRAIT HERO SECTION
   Merged Trust + Service Map with large portrait and Houston skyline
   ═══════════════════════════════════════════════════════════════════════════ */

.mcd-portrait-hero {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 560px;
  margin: 0 auto;
  max-width: 1100px;
  border-radius: 24px;
  overflow: hidden;
  background: linear-gradient(165deg, rgba(8, 14, 32, 0.95), rgba(5, 10, 24, 0.92));
  border: 1px solid rgba(0, 229, 255, 0.15);
  box-shadow:
    0 32px 80px rgba(3, 9, 28, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* Left Panel - Portrait */

.mcd-portrait-hero__portrait-panel {
  position: relative;
  overflow: hidden;
  min-height: 100%;
  background: linear-gradient(145deg, #0a1628, #060d1a);
}

.mcd-portrait-hero__portrait-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
}

.mcd-portrait-hero__skyline {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 200px;
  opacity: 0.4;
  background-size: contain;
  background-position: bottom center;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 1;
}

.mcd-portrait-hero__portrait-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
      rgba(4, 8, 22, 0.95) 0%,
      rgba(4, 8, 22, 0.6) 30%,
      rgba(4, 8, 22, 0.2) 60%,
      transparent 100%);
  z-index: 2;
}

.mcd-portrait-hero__portrait-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 32px;
  z-index: 3;
}

.mcd-portrait-hero__location {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: rgba(0, 229, 255, 0.08);
  border: 1px solid rgba(0, 229, 255, 0.2);
  border-radius: 9999px;
  margin-bottom: 16px;
}

.mcd-portrait-hero__location-dot {
  width: 8px;
  height: 8px;
  background: var(--mcd-accent-cyan, #00E5FF);
  border-radius: 50%;
  box-shadow: 0 0 12px var(--mcd-accent-cyan, #00E5FF);
  animation: mcd-portrait-pulse 2s ease-in-out infinite;
}

@keyframes mcd-portrait-pulse {

  0%,
  100% {
    box-shadow: 0 0 8px var(--mcd-accent-cyan, #00E5FF);
  }

  50% {
    box-shadow: 0 0 20px var(--mcd-accent-cyan, #00E5FF), 0 0 30px rgba(0, 229, 255, 0.4);
  }
}

.mcd-portrait-hero__location-text {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--mcd-accent-cyan, #00E5FF);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.mcd-portrait-hero__tagline {
  font-size: clamp(1.5rem, 3.5vw, 2rem);
  font-weight: 700;
  line-height: 1.15;
  margin: 0 0 12px;
  color: var(--mcd-text-strong, #fff);
}

.mcd-portrait-hero__tagline-accent {
  display: block;
  background: linear-gradient(135deg, var(--mcd-accent-cyan, #00E5FF), var(--mcd-accent-magenta, #FF00E0));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.mcd-portrait-hero__subtitle {
  font-size: 1rem;
  color: var(--mcd-text-muted, #b8c8e8);
  margin: 0 0 20px;
  line-height: 1.5;
}

.mcd-portrait-hero__traits {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.mcd-portrait-hero__trait {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(0, 229, 255, 0.06);
  border: 1px solid rgba(0, 229, 255, 0.15);
  border-radius: 6px;
  font-size: 0.8rem;
  color: var(--mcd-text-medium, #e8f0ff);
}

.mcd-portrait-hero__trait::before {
  content: "";
  width: 6px;
  height: 6px;
  background: var(--mcd-accent-cyan, #00E5FF);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--mcd-accent-cyan, #00E5FF);
}

/* Right Panel - Trust Content */

.mcd-portrait-hero__trust-panel {
  display: flex;
  flex-direction: column;
  padding: 32px;
  background: linear-gradient(165deg, rgba(12, 20, 42, 0.95), rgba(8, 14, 32, 0.92));
}

.mcd-portrait-hero__eyebrow {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--mcd-accent-cyan, #00E5FF);
  margin-bottom: 16px;
  text-shadow: 0 0 20px rgba(0, 229, 255, 0.3);
}

.mcd-portrait-hero__title {
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 16px;
  color: var(--mcd-text-strong, #fff);
}

.mcd-portrait-hero__intro {
  font-size: 1rem;
  color: var(--mcd-text-muted, #b8c8e8);
  line-height: 1.6;
  margin: 0 0 24px;
}

.mcd-portrait-hero__list {
  list-style: none;
  padding: 0;
  margin: 0 0 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.mcd-portrait-hero__list-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.95rem;
  color: var(--mcd-text-medium, #e8f0ff);
  line-height: 1.5;
}

.mcd-portrait-hero__bullet {
  width: 8px;
  height: 8px;
  margin-top: 0.4em;
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--mcd-accent-cyan, #00E5FF), var(--mcd-accent-magenta, #FF00E0));
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(0, 229, 255, 0.5);
}

/* Testimonial */

.mcd-portrait-hero__testimonial {
  margin-top: auto;
  padding: 20px;
  background: rgba(0, 229, 255, 0.04);
  border-left: 3px solid;
  border-image: linear-gradient(180deg, var(--mcd-accent-cyan, #00E5FF), var(--mcd-accent-magenta, #FF00E0)) 1;
  border-radius: 0 12px 12px 0;
}

.mcd-portrait-hero__quote {
  font-size: 1rem;
  font-style: italic;
  color: var(--mcd-text-medium, #e8f0ff);
  line-height: 1.6;
  margin: 0 0 12px;
}

.mcd-portrait-hero__cite {
  display: block;
  font-size: 0.8rem;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--mcd-text-muted, #b8c8e8);
}

/* Responsive - Tablet */
@media (max-width: 1024px) {
  .mcd-portrait-hero {
    margin: 0 24px;
    max-width: calc(100% - 48px);
  }

  .mcd-portrait-hero__tagline {
    font-size: 1.9rem;
  }

  .mcd-portrait-hero__trust-panel {
    padding: 32px;
  }

  .mcd-portrait-hero__title {
    font-size: 1.5rem;
  }
}

/* Responsive - Mobile Stack */
@media (max-width: 900px) {
  .mcd-portrait-hero {
    grid-template-columns: 1fr;
    min-height: auto;
    margin: 0 16px;
    max-width: calc(100% - 32px);
  }

  .mcd-portrait-hero__portrait-panel {
    min-height: 400px;
  }

  .mcd-portrait-hero__portrait-content {
    padding: 24px;
  }

  .mcd-portrait-hero__tagline {
    font-size: 1.75rem;
  }

  .mcd-portrait-hero__trust-panel {
    padding: 28px;
  }

  .mcd-portrait-hero__title {
    font-size: 1.4rem;
  }
}

/* Responsive - Small Mobile */
@media (max-width: 600px) {
  .mcd-portrait-hero {
    border-radius: 20px;
    margin: 0 12px;
    max-width: calc(100% - 24px);
  }

  .mcd-portrait-hero__portrait-panel {
    min-height: 350px;
  }

  .mcd-portrait-hero__portrait-content {
    padding: 20px;
  }

  .mcd-portrait-hero__tagline {
    font-size: 1.5rem;
  }

  .mcd-portrait-hero__subtitle {
    font-size: 0.9rem;
  }

  .mcd-portrait-hero__traits {
    gap: 6px;
  }

  .mcd-portrait-hero__trait {
    padding: 5px 10px;
    font-size: 0.75rem;
  }

  .mcd-portrait-hero__trust-panel {
    padding: 24px;
  }

  .mcd-portrait-hero__title {
    font-size: 1.25rem;
  }

  .mcd-portrait-hero__intro {
    font-size: 0.9rem;
  }

  .mcd-portrait-hero__list-item {
    font-size: 0.9rem;
  }

  .mcd-portrait-hero__testimonial {
    padding: 16px;
  }

  .mcd-portrait-hero__quote {
    font-size: 0.9rem;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   TRUST + CTA MERGED: THREE-COLUMN LAYOUT (Variation B)
   Portrait / Trust / CTA side-by-side in single glass container
   ═══════════════════════════════════════════════════════════════════════════ */

.mcd-trust-cta {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-4);
}

.mcd-trust-cta__container {
  display: grid;
  grid-template-columns: 280px 1fr 320px;
  gap: 1px;
  background: var(--mcd-border-glass, rgba(79, 240, 255, 0.12));
  border-radius: var(--radius-xl, 24px);
  overflow: hidden;
  box-shadow: var(--shadow-glass-strong, 0 32px 64px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(79, 240, 255, 0.15) inset, 0 0 80px rgba(79, 240, 255, 0.18));
}

/* Left Column: Portrait */

.mcd-trust-cta__portrait {
  position: relative;
  background: linear-gradient(145deg, #0a1628, #060d1a);
  min-height: 560px;
}

.mcd-trust-cta__portrait-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
}

.mcd-trust-cta__portrait-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
      rgba(4, 8, 22, 0.95) 0%,
      rgba(4, 8, 22, 0.4) 50%,
      transparent 100%);
}

.mcd-trust-cta__portrait-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--space-5, 1.5rem);
  z-index: 2;
}

.mcd-trust-cta__location {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2, 0.5rem);
  padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
  background: rgba(0, 229, 255, 0.08);
  border: 1px solid rgba(0, 229, 255, 0.2);
  border-radius: var(--radius-full, 9999px);
  margin-bottom: var(--space-3, 0.75rem);
}

.mcd-trust-cta__location-dot {
  width: 8px;
  height: 8px;
  background: var(--mcd-cyan, #00E5FF);
  border-radius: 50%;
  box-shadow: 0 0 12px var(--mcd-cyan, #00E5FF);
  animation: mcd-trust-cta-pulse 2s ease-in-out infinite;
}

@keyframes mcd-trust-cta-pulse {

  0%,
  100% {
    box-shadow: 0 0 8px var(--mcd-cyan, #00E5FF);
  }

  50% {
    box-shadow: 0 0 20px var(--mcd-cyan, #00E5FF), 0 0 30px rgba(0, 229, 255, 0.35);
  }
}

.mcd-trust-cta__location-text {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--mcd-cyan, #00E5FF);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.mcd-trust-cta__headline {
  font-family: var(--font-display, 'Manrope', sans-serif);
  font-size: 1.3rem;
  font-weight: 800;
  line-height: 1.1;
  color: var(--mcd-text-primary, #fff);
  margin-bottom: var(--space-2, 0.5rem);
}

.mcd-trust-cta__headline-accent {
  display: block;
  background: linear-gradient(135deg, var(--mcd-cyan, #00E5FF), var(--mcd-magenta, #FF00E0));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.mcd-trust-cta__tagline {
  font-size: 0.8rem;
  color: var(--mcd-text-secondary, #E0EAFF);
}

/* Center Column: Trust */

.mcd-trust-cta__trust {
  background: linear-gradient(165deg, rgba(10, 18, 38, 0.32), rgba(6, 12, 28, 0.28));
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  padding: var(--space-5, 1.5rem);
  display: flex;
  flex-direction: column;
  position: relative;
}

.mcd-trust-cta__trust::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.06), transparent 40%);
  pointer-events: none;
}

.mcd-trust-cta__eyebrow {
  font-family: var(--font-display, 'Manrope', sans-serif);
  font-size: clamp(0.65rem, 1.4vw, 0.75rem);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mcd-cyan, #00E5FF);
  text-shadow: 0 0 20px rgba(0, 229, 255, 0.35);
  margin-bottom: var(--space-3, 0.75rem);
}

.mcd-trust-cta__trust-title {
  font-family: var(--font-display, 'Manrope', sans-serif);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--mcd-text-primary, #fff);
  margin-bottom: var(--space-4, 1rem);
}

.mcd-trust-cta__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-3, 0.75rem);
  margin: 0 0 var(--space-4, 1rem);
  padding: 0;
  flex: 1;
}

.mcd-trust-cta__list-item {
  display: flex;
  gap: var(--space-3, 0.75rem);
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--mcd-text-secondary, #E0EAFF);
}

.mcd-trust-cta__bullet {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--mcd-magenta, #FF00E0), var(--mcd-cyan, #00E5FF));
  box-shadow: 0 0 10px rgba(0, 229, 255, 0.35);
  flex-shrink: 0;
  margin-top: 0.5em;
}

.mcd-trust-cta__skyline {
  width: 100%;
  height: auto;
  margin: var(--space-4, 1rem) 0;
  opacity: 0.6;
}

.mcd-trust-cta__testimonial {
  padding: var(--space-3, 0.75rem);
  background: rgba(0, 0, 0, 0.2);
  border-radius: var(--radius-md, 12px);
  border-left: 3px solid;
  border-image: linear-gradient(180deg, var(--mcd-cyan, #00E5FF), var(--mcd-magenta, #FF00E0)) 1;
}

.mcd-trust-cta__quote {
  font-size: 0.8rem;
  font-style: italic;
  color: var(--mcd-text-primary, #fff);
  line-height: 1.5;
  margin-bottom: var(--space-2, 0.5rem);
}

.mcd-trust-cta__cite {
  font-size: 0.68rem;
  color: var(--mcd-text-tertiary, #A0B4D4);
  text-transform: uppercase;
  font-style: normal;
}

/* Right Column: CTA - tinted glassmorphism */

.mcd-trust-cta__cta {
  background: linear-gradient(180deg, rgba(10, 18, 38, 0.72), rgba(6, 12, 28, 0.68));
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  padding: var(--space-5, 1.5rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
}

.mcd-trust-cta__cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent 50%);
  pointer-events: none;
}

.mcd-trust-cta__badges {
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 0.5rem);
  margin-bottom: var(--space-4, 1rem);
}

.mcd-trust-cta__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: rgba(0, 229, 255, 0.06);
  border: 1px solid rgba(0, 229, 255, 0.12);
  border-radius: var(--radius-full, 9999px);
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--mcd-text-secondary, #E0EAFF);
}

.mcd-trust-cta__badge--amber {
  background: rgba(255, 107, 0, 0.08);
  border-color: rgba(255, 107, 0, 0.2);
}

.mcd-trust-cta__cta-title {
  font-family: var(--font-display, 'Manrope', sans-serif);
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--mcd-text-primary, #fff);
  margin-bottom: var(--space-3, 0.75rem);
}

.mcd-trust-cta__cta-text {
  font-size: 0.85rem;
  color: var(--mcd-text-secondary, #E0EAFF);
  margin-bottom: var(--space-5, 1.5rem);
}

.mcd-trust-cta__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3, 0.75rem);
  margin-bottom: var(--space-4, 1rem);
}

.mcd-trust-cta__cta-note {
  font-size: 0.78rem;
  color: var(--mcd-text-tertiary, #A0B4D4);
  margin-bottom: var(--space-2, 0.5rem);
}

.mcd-trust-cta__cta-meta {
  font-size: 0.72rem;
  color: var(--mcd-text-muted, #7A92B8);
}

/* Responsive: Stack at 1024px */
@media (max-width: 1024px) {
  .mcd-trust-cta__container {
    grid-template-columns: 1fr;
  }

  .mcd-trust-cta__portrait {
    min-height: 300px;
  }

  .mcd-trust-cta__actions {
    flex-flow: row wrap;
  }
}

/* Fine-tune mobile at 600px */
@media (max-width: 600px) {
  .mcd-trust-cta {
    padding: 0 var(--space-3, 0.75rem);
  }

  .mcd-trust-cta__portrait {
    min-height: 350px;
  }

  /* Position crop to show shoulders above text on mobile */
  .mcd-trust-cta__portrait-img {
    object-position: center 28% !important;
  }

  .mcd-trust-cta__headline {
    font-size: 1.15rem;
  }

  .mcd-trust-cta__trust-title,
  .mcd-trust-cta__cta-title {
    font-size: 1.1rem;
  }
}


/* =============================================================================
   GLOBAL LAYOUT OVERRIDES (Fixed Stack: Hero -> Ticker -> Rail)
   Enforces consistent viewport-minus-rail height and zero-gap stacking on ALL devices.
   ============================================================================= */

.mcd-hero-cover {
  min-height: calc(100vh - var(--proof-rail-height) - var(--scroll-progress-height));
  min-height: calc(100svh - var(--proof-rail-height) - var(--scroll-progress-height));
  position: relative;
  padding: 0;
}

.mcd-hero-cover>.wp-block-mcd-hero,
.mcd-hero-cover .wp-block-mccullough-digital-hero {
  min-height: calc(100vh - var(--proof-rail-height) - var(--scroll-progress-height));
  min-height: calc(100svh - var(--proof-rail-height) - var(--scroll-progress-height));
  position: static;
  /* Allow ticker to position relative to cover */
}

.mcd-hero-cover .hero__ticker-tape {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 15;
  margin: 0;
  /* Reset any default margins */
}

/* Ensure rail negative margin is removed globally */
.mcd-home__proof-strip-bar,
.mcd-proof-rail {
  margin-top: 0 !important;
}

@media (max-width: 640px) {
  body.home .wp-block-mccullough-digital-hero {
    min-height: calc(100svh - var(--proof-rail-height, 72px) - var(--scroll-progress-height, 25px)) !important;
    height: calc(100svh - var(--proof-rail-height, 72px) - var(--scroll-progress-height, 25px)) !important;
    max-height: calc(100svh - var(--proof-rail-height, 72px) - var(--scroll-progress-height, 25px)) !important;
    padding-bottom: calc(var(--hero-ticker-height, 36px) + var(--hero-quick-gap, 12px)) !important;
  }

  body.home .wp-block-mccullough-digital-hero .hero__ticker-tape {
    height: var(--hero-ticker-height, 36px) !important;
    min-height: var(--hero-ticker-height, 36px) !important;
  }

  body.home .wp-block-mccullough-digital-hero .hero__quick-contact,
  body.home .wp-block-mccullough-digital-hero .hero__quick-contact-wrapper {
    margin-bottom: 0 !important;
  }
}