/* Command Growth — Sands Advisory custom utilities
 * Ported from the Next.js demo's globals.css.
 * These provide visual elements (gradients, glass, aurora glows) that block
 * editor controls cannot express directly. Apply via Additional CSS Class on a block.
 */

/* Editorial gradient text — apply to a heading or span */
.has-sands-text-gradient {
  background: linear-gradient(135deg, #0CD4A4 0%, #40E8C4 50%, #0CD4A4 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

/* Aurora glow for dark sections — apply to a Cover/Group with relative positioning */
.has-sands-aurora-dark {
  position: relative;
}
.has-sands-aurora-dark::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 80% 50% at 50% -20%, rgba(12, 212, 164, 0.08) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 30% 100%, rgba(12, 212, 164, 0.04) 0%, transparent 50%);
  z-index: 0;
}
.has-sands-aurora-dark > * {
  position: relative;
  z-index: 1;
}

/* Deep green gradient background */
.has-sands-green-gradient-background {
  background: linear-gradient(135deg, #0b3d3d 0%, #0d4f4f 40%, #0a3050 100%) !important;
}

/* Glass card on dark sections */
.has-sands-glass {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 1rem;
}

/* Eyebrow label — gold uppercase tracking */
.has-eyebrow-style {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--wp--preset--color--gold);
  display: inline-block;
}
.has-eyebrow-style.is-style-teal {
  color: var(--wp--preset--color--teal);
  letter-spacing: 0.15em;
  font-size: 0.6875rem;
}

/* Pill / chip — used for tags and categories */
.has-pill-style {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.875rem;
  border-radius: 9999px;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.has-pill-style.is-style-teal {
  background: rgba(12, 212, 164, 0.10);
  color: var(--wp--preset--color--teal);
}

/* Stat number — large display number */
.has-stat-number {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: 300;
  color: var(--wp--preset--color--heading);
  line-height: 1;
}

/* Stat label */
.has-stat-label {
  font-size: 0.6875rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--wp--preset--color--muted);
  margin-top: 0.25rem;
}

/* Italic accent inside a heading — wraps a span */
.is-italic-accent {
  font-style: italic;
}

/* Pillar / approach card */
.cg-pillar-card {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  padding: 1.5rem;
  border: 1px solid rgba(213, 208, 200, 0.5);
  border-radius: 1rem;
  background: #fff;
  transition: all 0.4s ease;
}
@media (min-width: 640px) {
  .cg-pillar-card {
    grid-template-columns: auto 1fr 2fr;
    gap: 2rem;
    padding: 2rem;
  }
}
.cg-pillar-card:hover {
  border-color: rgba(12, 212, 164, 0.3);
  box-shadow: 0 12px 40px -10px rgba(12, 212, 164, 0.08);
}

/* Process timeline node */
.cg-timeline-node {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  border-radius: 1rem;
  border: 1px solid rgba(213, 208, 200, 0.5);
  background: #fff;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.125rem;
  color: var(--wp--preset--color--heading);
  flex-shrink: 0;
}

/* Footer attribution row — rendered by PHP, styled here */
.cg-brand-meta {
  text-align: center;
  padding: 1.25rem 1rem;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.30);
  background: #071f2a;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}
.cg-brand-meta a {
  color: #c9a96e;
  text-decoration: none;
  transition: color 0.2s ease;
}
.cg-brand-meta a:hover {
  color: #0CD4A4;
}

/* Ensure body has Inter as default */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Prevent Playfair display headings from breaking mid-word */
.has-playfair-font-family,
h1.has-playfair-font-family,
h2.has-playfair-font-family,
h3.has-playfair-font-family,
.wp-block-heading.has-playfair-font-family {
  word-break: normal;
  overflow-wrap: normal;
  hyphens: none;
  -webkit-hyphens: none;
}

/* CRITICAL: Override WordPress core's default opacity:.5 on cover backgrounds.
   Without this, custom gradients render at 50% strength and blend with the
   page background — washing out deep colors into sage/muted tones. */
.wp-block-cover .wp-block-cover__background,
.wp-block-cover .wp-block-cover__gradient-background,
.wp-block-cover.is-dark .wp-block-cover__background,
.wp-block-cover.is-dark .wp-block-cover__gradient-background {
  opacity: 1 !important;
}

/* Make full-bleed elements actually edge-to-edge regardless of parent constraint */
.wp-block-group.alignfull,
.wp-block-cover.alignfull,
main > .alignfull,
.wp-site-blocks .alignfull {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  max-width: 100vw;
}

/* Pillar card grid layout — override WP flex layout */
.wp-block-group.cg-pillar-card.is-layout-flex,
.cg-pillar-card {
  display: grid !important;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 640px) {
  .wp-block-group.cg-pillar-card.is-layout-flex,
  .cg-pillar-card {
    grid-template-columns: auto 1fr 2fr;
    gap: 2rem;
    align-items: center;
  }
}

/* Prevent horizontal overflow that some browsers introduce with 100vw */
html, body {
  overflow-x: hidden;
}

/* Keep recurring editorial column gaps in CSS instead of block support attrs.
   The starter patterns are hand-authored, and fewer support-generated wrapper
   attrs means fewer editor validation mismatches. */
.wp-block-columns.are-vertically-aligned-top {
  gap: clamp(2rem, 4vw, 4rem);
}
.wp-block-columns.are-vertically-aligned-center {
  gap: 2rem;
}
.wp-block-buttons.is-layout-flex {
  gap: 1rem;
}
.cg-home-hero .wp-block-buttons.is-layout-flex {
  gap: 1.5rem;
}

/* Kill the gap between root-level blocks (header, main, footer).
   WordPress applies blockGap: 1.5rem at the .wp-site-blocks level by default,
   which shows as a horizontal stripe of body background between sections. */
.wp-site-blocks > * + *,
.wp-site-blocks > main,
.wp-site-blocks > footer,
body .wp-site-blocks {
  margin-block-start: 0 !important;
  margin-top: 0 !important;
}
.wp-site-blocks {
  --wp--style--block-gap: 0;
}

/* Page shell: WordPress may keep older page templates in the database, so
   strip page-level whitespace before the imported full-width starter content. */
body.page main.wp-block-group {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

body.page main.wp-block-group > .wp-block-cover:first-child,
body.home main.wp-block-group > .wp-block-cover:first-child,
body.page .wp-block-post-content > .wp-block-cover:first-child,
body.home .wp-block-post-content > .wp-block-cover:first-child {
  align-items: flex-start !important;
  min-height: 0 !important;
  padding-top: clamp(3rem, 5vw, 4.25rem) !important;
  padding-bottom: clamp(3.5rem, 6vw, 5rem) !important;
}

body.page main.wp-block-group > .wp-block-cover:first-child .wp-block-cover__inner-container,
body.home main.wp-block-group > .wp-block-cover:first-child .wp-block-cover__inner-container,
body.page .wp-block-post-content > .wp-block-cover:first-child .wp-block-cover__inner-container,
body.home .wp-block-post-content > .wp-block-cover:first-child .wp-block-cover__inner-container {
  width: 100%;
}

body.page main.wp-block-group > .wp-block-cover:first-child .wp-block-cover__inner-container > .wp-block-group,
body.home main.wp-block-group > .wp-block-cover:first-child .wp-block-cover__inner-container > .wp-block-group,
body.page .wp-block-post-content > .wp-block-cover:first-child .wp-block-cover__inner-container > .wp-block-group,
body.home .wp-block-post-content > .wp-block-cover:first-child .wp-block-cover__inner-container > .wp-block-group {
  width: min(100%, 1280px) !important;
  max-width: 1280px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

body.page main.wp-block-group > .wp-block-cover:first-child .wp-block-cover__inner-container > .wp-block-group > *,
body.home main.wp-block-group > .wp-block-cover:first-child .wp-block-cover__inner-container > .wp-block-group > *,
body.page .wp-block-post-content > .wp-block-cover:first-child .wp-block-cover__inner-container > .wp-block-group > *,
body.home .wp-block-post-content > .wp-block-cover:first-child .wp-block-cover__inner-container > .wp-block-group > * {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

body.page main.wp-block-group > .wp-block-cover:first-child .wp-block-cover__inner-container > .wp-block-group > .wp-block-heading,
body.home main.wp-block-group > .wp-block-cover:first-child .wp-block-cover__inner-container > .wp-block-group > .wp-block-heading,
body.page .wp-block-post-content > .wp-block-cover:first-child .wp-block-cover__inner-container > .wp-block-group > .wp-block-heading,
body.home .wp-block-post-content > .wp-block-cover:first-child .wp-block-cover__inner-container > .wp-block-group > .wp-block-heading {
  max-width: 1120px !important;
}

body.page main.wp-block-group > .wp-block-cover:first-child .wp-block-cover__inner-container > .wp-block-group > .cg-section-copy,
body.home main.wp-block-group > .wp-block-cover:first-child .wp-block-cover__inner-container > .wp-block-group > .cg-section-copy,
body.page .wp-block-post-content > .wp-block-cover:first-child .wp-block-cover__inner-container > .wp-block-group > .cg-section-copy,
body.home .wp-block-post-content > .wp-block-cover:first-child .wp-block-cover__inner-container > .wp-block-group > .cg-section-copy {
  max-width: 820px !important;
}

/* Feature card grid — used in services-paths Path 01 (light) and Path 02 (dark).
   Built as native wp:group blocks; the checkmark icon is rendered via CSS
   ::before pseudo-element so we don't need SVG inside the block markup. */
.wp-block-group.cg-features-grid {
  display: grid !important;
  grid-template-columns: 1fr;
  align-items: stretch;
  align-content: start;
  gap: 0.75rem;
}
.wp-block-group.cg-features-grid > .wp-block-group.cg-feature-card {
  margin-block-start: 0 !important;
  margin-block-end: 0 !important;
}
@media (min-width: 640px) {
  .wp-block-group.cg-features-grid {
    grid-template-columns: 1fr 1fr;
  }
}
.wp-block-group.cg-feature-card {
  display: flex !important;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0.75rem;
  box-sizing: border-box;
  height: 100%;
  min-height: 4.5rem;
  padding: 1rem 1.25rem;
  border-radius: 0.75rem;
  border: 1px solid rgba(213, 208, 200, 0.4);
  background: #ffffff;
  transition: border-color 0.3s ease, transform 0.3s ease;
}
.wp-block-group.cg-feature-card::before {
  content: '';
  display: block;
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  margin-top: 0.125rem;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230CD4A4' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.wp-block-group.cg-feature-card:hover {
  border-color: rgba(12, 212, 164, 0.25);
  transform: translateY(-1px);
}
.wp-block-group.cg-feature-card > p {
  margin: 0 !important;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #1A1818;
  line-height: 1.5;
}

/* Dark variant for Path 02 */
.wp-block-group.cg-features-grid.is-dark .cg-feature-card {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.06);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.wp-block-group.cg-features-grid.is-dark .cg-feature-card:hover {
  border-color: rgba(12, 212, 164, 0.20);
}
.wp-block-group.cg-features-grid.is-dark .cg-feature-card > p {
  color: rgba(255, 255, 255, 0.85);
}

/* Homepage hero alignment */
.cg-home-hero .wp-block-cover__inner-container > .wp-block-group {
  margin-left: auto !important;
  margin-right: auto !important;
}
.cg-home-hero .wp-block-cover__inner-container > .wp-block-group > * {
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.cg-home-hero .cg-section-copy {
  max-width: 820px;
}

/* Editable page modules for sitemap starter patterns */
.cg-section-copy {
  max-width: 760px;
}
.cg-card-grid,
.wp-block-group.cg-card-grid {
  display: grid !important;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 780px) {
  .cg-card-grid,
  .wp-block-group.cg-card-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .cg-card-grid.is-two,
  .wp-block-group.cg-card-grid.is-two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .cg-card-grid.is-four,
  .wp-block-group.cg-card-grid.is-four {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.cg-card-grid > .wp-block-group {
  margin-block-start: 0 !important;
  margin-block-end: 0 !important;
}
.cg-card,
.wp-block-group.cg-card {
  box-sizing: border-box;
  height: 100%;
  padding: 1.5rem;
  border: 1px solid rgba(213, 208, 200, 0.55);
  border-radius: 0.75rem;
  background: #fff;
}
.cg-card.is-muted,
.wp-block-group.cg-card.is-muted {
  background: #FAFAF7;
}
.cg-card.is-dark,
.wp-block-group.cg-card.is-dark {
  color: rgba(255, 255, 255, 0.82);
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.cg-card > *:first-child,
.wp-block-group.cg-card > *:first-child {
  margin-top: 0 !important;
}
.cg-kicker {
  color: var(--wp--preset--color--gold) !important;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  line-height: 1.2;
  text-transform: uppercase;
}
.cg-card.is-dark .cg-kicker,
.wp-block-group.cg-card.is-dark .cg-kicker {
  color: var(--wp--preset--color--gold) !important;
}

/* CTA rows with an auto-width button column need the text column to keep
   real measure; otherwise WP core flex sizing can collapse it too far. */
@media (min-width: 782px) {
  .wp-block-columns.are-vertically-aligned-center > .wp-block-column:not([style*="flex-basis:auto"]):not([style*="flex-basis: auto"]) {
    flex: 1 1 20rem;
    min-width: 16rem;
  }

  .wp-block-columns.are-vertically-aligned-center > .wp-block-column[style*="flex-basis:auto"],
  .wp-block-columns.are-vertically-aligned-center > .wp-block-column[style*="flex-basis: auto"] {
    flex: 0 0 auto;
    width: auto;
  }
}
.cg-logo-grid,
.wp-block-group.cg-logo-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}
@media (min-width: 780px) {
  .cg-logo-grid,
  .wp-block-group.cg-logo-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}
.cg-logo-slot,
.wp-block-group.cg-logo-slot {
  display: flex !important;
  min-height: 5rem;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  border: 1px dashed rgba(213, 208, 200, 0.85);
  border-radius: 0.75rem;
  color: rgba(74, 71, 68, 0.45);
  background: #fff;
}
.cg-form-placeholder,
.wp-block-group.cg-form-placeholder {
  padding: 1.5rem;
  border: 1px dashed rgba(12, 212, 164, 0.35);
  border-radius: 0.75rem;
  background: rgba(12, 212, 164, 0.06);
}
.cg-field-grid,
.wp-block-group.cg-field-grid {
  display: grid !important;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}
@media (min-width: 640px) {
  .cg-field-grid,
  .wp-block-group.cg-field-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.cg-form-field,
.wp-block-group.cg-form-field {
  padding: 0.875rem 1rem;
  border: 1px solid rgba(213, 208, 200, 0.65);
  border-radius: 0.5rem;
  color: rgba(74, 71, 68, 0.65);
  background: #fff;
}
.cg-note,
.wp-block-group.cg-note {
  padding: 1rem 1.25rem;
  border-left: 2px solid var(--wp--preset--color--teal);
  color: rgba(74, 71, 68, 0.72);
  background: rgba(12, 212, 164, 0.06);
}

/* ============================================================
   Motion layer (paired with assets/js/motion.js)
   - Section fade-in on viewport entry
   - Hero entrance + scroll parallax
   - Statement-block scroll-driven fade
   - Honors prefers-reduced-motion
   ============================================================ */

/* Initial state for scroll-fade-in elements (set by JS) */
.cg-motion .cg-anim {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  transition:
    opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
.cg-motion .cg-anim.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  will-change: auto;
}

/* Hero content gets parallax via JS — start ready for transform */
.cg-motion .cg-hero-content {
  will-change: transform, opacity;
  transform-origin: center center;
}

/* Hero entrance animation — staggered rise for content blocks */
.cg-motion .cg-hero .wp-block-column:first-child > * {
  opacity: 0;
  animation: cg-hero-rise 0.95s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.cg-motion .cg-hero .wp-block-column:first-child > *:nth-child(1) { animation-delay: 0.15s; }
.cg-motion .cg-hero .wp-block-column:first-child > *:nth-child(2) { animation-delay: 0.30s; }
.cg-motion .cg-hero .wp-block-column:first-child > *:nth-child(3) { animation-delay: 0.42s; }
.cg-motion .cg-hero .wp-block-column:first-child > *:nth-child(4) { animation-delay: 0.54s; }
.cg-motion .cg-hero .wp-block-column:first-child > *:nth-child(5) { animation-delay: 0.78s; }
.cg-motion .cg-hero .wp-block-column:first-child > *:nth-child(6) { animation-delay: 0.95s; }

@keyframes cg-hero-rise {
  from {
    opacity: 0;
    transform: translateY(28px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Statement scroll fade — JS controls opacity + transform inline */
.cg-motion .cg-statement {
  will-change: opacity, transform;
  transition: none;
}

/* Reduced-motion fallback — show everything immediately */
@media (prefers-reduced-motion: reduce) {
  .cg-anim,
  .cg-statement,
  .cg-hero-content,
  .cg-hero .wp-block-column:first-child > * {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }
}
.cg-no-motion .cg-anim,
.cg-no-motion .cg-statement {
  opacity: 1 !important;
  transform: none !important;
}

/* Hide WordPress.com first-post / "Welcome to WordPress" content if it leaks
   into the navigation fallback area. Defensive cleanup. */
.wp-block-page-list .wp-block-pages-list__item__link {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.8125rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--wp--preset--color--body);
  text-decoration: none;
}
.wp-block-page-list .wp-block-pages-list__item__link:hover {
  color: var(--wp--preset--color--heading);
}

/* ============================================================
   v1.3.1 — Typography weight reduction
   Nick's locked copy is dense by design. This pass keeps every
   word but makes the same content read lighter:
   - Headlines own the page
   - Body copy shrinks and fades
   - First paragraph in a card sits a notch larger (lead),
     subsequent paragraphs read as supporting body
   - Reading widths capped for comfort
   - More vertical breathing between H2s and the text below them
   ============================================================ */

/* Eyebrow: slightly smaller, more tracked, dimmer gold so it reads
   like a quiet label rather than competing with the H1/H2 */
.has-eyebrow-style {
  font-size: 0.6875rem !important;
  letter-spacing: 0.22em !important;
  font-weight: 500 !important;
  opacity: 0.92;
}

/* H1: bigger to dominate. Applies to all page intro covers + Mission H1 */
main .wp-block-cover .wp-block-cover__inner-container .wp-block-heading[style*="font-size:clamp(2.8rem,6vw,5.5rem)"],
main .wp-block-group .wp-block-heading[style*="font-size:clamp(2.8rem,6vw,5.5rem)"] {
  font-size: clamp(3.2rem, 7vw, 6.25rem) !important;
  line-height: 0.96 !important;
  letter-spacing: -0.025em !important;
}

/* H2 section headings: a notch larger, lighter weight so the type leads */
main .wp-block-heading[style*="font-size:clamp(2.2rem,4.5vw,3.5rem)"] {
  font-size: clamp(2.5rem, 5vw, 4.25rem) !important;
  font-weight: 280 !important;
  line-height: 1.06 !important;
}

/* H2 followed by a body paragraph or section copy — open up the gap so the
   headline gets visual room before the dense paragraph starts */
main .alignfull .wp-block-heading + .cg-section-copy,
main .alignfull .wp-block-heading + p[style*="line-height:1.7"],
main .alignfull .wp-block-heading + p[style*="line-height:1.8"] {
  margin-top: 1.5rem !important;
}

/* Card body paragraphs read smaller and lighter by default.
   Nick's cards in Outcome 02 / Outcome 03 / Founding Story bios each have
   2-3 paragraphs — the second and third fade back as supporting body. */
.wp-block-group.cg-card > p,
.wp-block-group.cg-card.is-dark > p,
.wp-block-group.cg-card.is-muted > p {
  font-size: 0.875rem !important;
  line-height: 1.75 !important;
}
.wp-block-group.cg-card > p[style*="color:#4a4744a6"] {
  color: rgba(74, 71, 68, 0.62) !important;
}
.wp-block-group.cg-card.is-dark > p[style*="color:#ffffffb3"] {
  color: rgba(255, 255, 255, 0.62) !important;
}

/* Lead paragraph treatment: the first paragraph immediately after a card
   heading reads a notch larger and darker, framing the rest as supporting. */
.wp-block-group.cg-card > .wp-block-heading + p,
.wp-block-group.cg-card > h3 + p,
.wp-block-group.cg-card > h4 + p {
  font-size: 1rem !important;
  line-height: 1.7 !important;
  color: rgba(26, 24, 24, 0.80) !important;
}
.wp-block-group.cg-card.is-dark > .wp-block-heading + p,
.wp-block-group.cg-card.is-dark > h3 + p {
  color: rgba(255, 255, 255, 0.92) !important;
  font-size: 1rem !important;
}
.wp-block-group.cg-card.is-muted > .wp-block-heading + p,
.wp-block-group.cg-card.is-muted > h3 + p,
.wp-block-group.cg-card.is-muted > h4 + p {
  color: rgba(26, 24, 24, 0.78) !important;
}

/* Reading width caps for body paragraphs in alignfull sections.
   Long lines feel heavy; 62ch keeps prose comfortable. */
main .alignfull .cg-section-copy,
.cg-section-copy {
  max-width: 62ch !important;
}
main .alignfull .has-text-align-center.cg-section-copy {
  max-width: 56ch !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* In two-column body sections (Mission, How We Vet, Problem We Solve)
   reduce the body paragraph font size so the long-form copy reads light */
main .alignfull .wp-block-columns > .wp-block-column > p[style*="line-height:1.8"] {
  font-size: 0.9375rem !important;
  line-height: 1.75 !important;
}

/* Card heading line: slightly tighter line-height, more space below */
.wp-block-group.cg-card > .wp-block-heading {
  margin-bottom: 0.875rem !important;
  line-height: 1.2 !important;
}

/* Buttons: slightly more substantial so CTAs feel like the resting point
   after dense text instead of being lost in the wash */
.wp-block-buttons .wp-block-button .wp-block-button__link {
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.03em !important;
  padding: 1rem 2.25rem !important;
}

/* Gold accent rule above standalone section labels. These should center as
   whole blocks; the base eyebrow utility is inline-block for card/column use. */
main .alignfull > .has-eyebrow-style {
  display: block;
  position: relative;
  width: 100%;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-top: 0.5rem;
  text-align: center;
}
main .alignfull > .has-text-align-center.has-eyebrow-style {
  display: block;
  width: 100%;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center;
}
main .alignfull > .has-eyebrow-style::before {
  content: '';
  position: absolute;
  top: -0.25rem;
  left: 50%;
  width: 2rem;
  height: 2px;
  background: var(--wp--preset--color--gold);
  opacity: 0.6;
  transform: translateX(-50%);
}
body.page .wp-block-post-content > .wp-block-cover.alignfull:not(:first-child) .wp-block-cover__inner-container > .wp-block-group > .has-eyebrow-style,
body.home .wp-block-post-content > .wp-block-cover.alignfull:not(:first-child) .wp-block-cover__inner-container > .wp-block-group > .has-eyebrow-style {
  display: block;
  width: 100%;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center;
}
body.page .wp-block-post-content > .wp-block-cover.alignfull:not(:first-child) .wp-block-cover__inner-container > .wp-block-group > .has-eyebrow-style::before,
body.home .wp-block-post-content > .wp-block-cover.alignfull:not(:first-child) .wp-block-cover__inner-container > .wp-block-group > .has-eyebrow-style::before {
  left: 50%;
  transform: translateX(-50%);
}

/* Centered eyebrow + headline groups (How It Works, Outcomes, Two Ways to
   Engage, What Makes Us Different, etc.) should align as one centered unit. */
main .alignfull .has-text-align-center.has-eyebrow-style + .wp-block-heading {
  margin-top: 1.25rem !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}
main .alignfull .has-text-align-center.has-eyebrow-style + .wp-block-heading + .cg-section-copy {
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

/* Card heading + lead paragraph pairing: tighter spacing so they read as
   a single unit, then a clear gap before the supporting paragraphs */
.wp-block-group.cg-card > .wp-block-heading + p {
  margin-top: 0.5rem !important;
}
.wp-block-group.cg-card > p + p {
  margin-top: 0.875rem !important;
}

/* ============================================================
   v1.4.0 — New components from Nick's round 2 edits
   - Card icon placeholders (Outcome 02 cards)
   - Numbered list (How We Vet on For Brands page)
   - Checklist (Outcome 03 partnerships card)
   - Headshot placeholder (Founding Story)
   ============================================================ */

/* Decorative icon placeholders at the top of Outcome 02 service cards.
   Three variants (strategy / content / signal) rendered as SVG backgrounds.
   The user can swap any card with a real Image block later. */
.wp-block-group.cg-card-icon {
  width: 3rem;
  height: 3rem;
  border-radius: 0.625rem;
  background-color: rgba(12, 212, 164, 0.10);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 1.5rem 1.5rem;
}
/* Strategy / GTM engineering — layered infrastructure stack */
.wp-block-group.cg-card-icon.cg-icon-strategy {
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230CD4A4' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 4 7.5 12 12 20 7.5Z'/%3E%3Cpath d='M4 12 12 16.5 20 12'/%3E%3Cpath d='M4 16.5 12 21 20 16.5'/%3E%3C/svg%3E");
}
/* Content engine — document with editorial lines */
.wp-block-group.cg-card-icon.cg-icon-content {
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230CD4A4' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a1 1 0 0 0-1 1v16a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V7z'/%3E%3Cpath d='M14 3v4h4'/%3E%3Cpath d='M9 13h6M9 16.5h4'/%3E%3C/svg%3E");
}
/* Outbound signal infrastructure — broadcast arcs */
.wp-block-group.cg-card-icon.cg-icon-signal {
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230CD4A4' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13a6 6 0 0 1 6 6'/%3E%3Cpath d='M5 8a11 11 0 0 1 11 11'/%3E%3Ccircle cx='5.5' cy='18.5' r='1.4' fill='%230CD4A4' stroke='none'/%3E%3C/svg%3E");
}
/* Built With You — two overlapping circles (collaboration) */
.wp-block-group.cg-card-icon.cg-icon-build {
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230CD4A4' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='12' r='6'/%3E%3Ccircle cx='15' cy='12' r='6'/%3E%3C/svg%3E");
}
/* Done For You — self-running loop (managed end-to-end) */
.wp-block-group.cg-card-icon.cg-icon-managed {
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230CD4A4' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.5 12a8.5 8.5 0 1 1-2.8-6.3'/%3E%3Cpath d='M20.5 4v4.5H16'/%3E%3C/svg%3E");
}
/* Direct review — magnifying glass (How We Vet, step 1) */
.wp-block-group.cg-card-icon.cg-icon-review {
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230CD4A4' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='6'/%3E%3Cpath d='M15.5 15.5 20 20'/%3E%3C/svg%3E");
}
/* Practitioner validation — shield + check (How We Vet, step 2) */
.wp-block-group.cg-card-icon.cg-icon-validated {
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230CD4A4' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 4 6v6c0 4.5 3.5 8.5 8 9 4.5-.5 8-4.5 8-9V6z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E");
}
/* Curated short-list — funnel (What Brands Get, card 1) */
.wp-block-group.cg-card-icon.cg-icon-curated {
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230CD4A4' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 5h18l-7 8v6l-4-2v-4z'/%3E%3C/svg%3E");
}
/* Warm introductions — two nodes + arrow (What Brands Get, card 2) */
.wp-block-group.cg-card-icon.cg-icon-intros {
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230CD4A4' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='12' r='2.5'/%3E%3Ccircle cx='18' cy='12' r='2.5'/%3E%3Cpath d='M8.5 12h6.5'/%3E%3Cpath d='M13 9.5 15.5 12 13 14.5'/%3E%3C/svg%3E");
}
/* Always free — gift box (What Brands Get, card 3) */
.wp-block-group.cg-card-icon.cg-icon-free {
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230CD4A4' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='9' width='17' height='12' rx='1'/%3E%3Cpath d='M3.5 9h17'/%3E%3Cpath d='M12 9v12'/%3E%3Cpath d='M12 9c-1.5-1.5-4-1.5-4-3.5S10 4 12 6c2-2 4-2 4 0s-2.5 2-4 3.5'/%3E%3C/svg%3E");
}

/* Numbered list for For Brands "How we vet" — large gold numerals + body text */
.wp-block-group.cg-numbered-list {
  display: grid !important;
  grid-template-columns: 1fr;
  gap: 1.75rem;
}
.wp-block-group.cg-numbered-item {
  display: grid !important;
  grid-template-columns: auto 1fr;
  gap: 1.5rem;
  align-items: start;
}
.wp-block-group.cg-numbered-item > p.cg-numbered-marker {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 2.5rem;
  font-weight: 400;
  line-height: 1;
  color: var(--wp--preset--color--gold);
  margin: 0 !important;
  min-width: 2.25rem;
}
.wp-block-group.cg-numbered-item > p:not(.cg-numbered-marker) {
  margin: 0 !important;
  padding-top: 0.5rem;
}

/* Checklist for Outcome 03 partnerships card — vertical list of items each
   prefixed with a teal check icon. Works on the dark card background. */
.wp-block-group.cg-checklist {
  display: grid !important;
  grid-template-columns: 1fr;
  gap: 0.625rem;
  margin-top: 0.5rem;
  /* Kill WP's auto-applied block-gap so it doesn't add margin-top to
     items 2-N inside grid cells — that caused row 1's right column to
     sit visibly lower than row 1's left column. */
  --wp--style--block-gap: 0;
}
.wp-block-group.cg-checklist > * {
  margin-top: 0 !important;
  margin-block-start: 0 !important;
}
@media (min-width: 640px) {
  .wp-block-group.cg-checklist {
    grid-template-columns: 1fr 1fr;
  }
}
.wp-block-group.cg-checklist-item {
  display: flex !important;
  align-items: flex-start;
  gap: 0.625rem;
  padding: 0;
}
.wp-block-group.cg-checklist-item::before {
  content: '';
  display: block;
  width: 0.875rem;
  height: 0.875rem;
  flex-shrink: 0;
  margin-top: 0.3125rem;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230CD4A4' stroke-width='2.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.wp-block-group.cg-checklist-item > p {
  margin: 0 !important;
  font-size: 0.9375rem;
  line-height: 1.5;
}
.wp-block-group.cg-checklist.is-dark .cg-checklist-item > p {
  color: rgba(255, 255, 255, 0.88);
}

/* Headshot placeholder for Founding Story — square with dashed border. The
   user can replace with a real Image block once they have photos. */
.wp-block-group.cg-headshot-placeholder {
  width: 100%;
  aspect-ratio: 1;
  max-width: 220px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  border: 1px dashed rgba(213, 208, 200, 0.7);
  border-radius: 9999px;
  background: rgba(213, 208, 200, 0.15);
  margin: 0 0 0.5rem 0;
}
.wp-block-group.cg-headshot-placeholder > p {
  margin: 0 !important;
  color: rgba(74, 71, 68, 0.55);
}

/* Real headshots — circular, square aspect, matches the placeholder footprint */
.wp-block-image.cg-headshot {
  width: 100%;
  max-width: 220px;
  margin: 0 0 0.5rem 0;
}
.wp-block-image.cg-headshot img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  object-position: top center;
  border-radius: 9999px;
  display: block;
}

/* Brand logo in the sticky header — black PNG on white. No figure margins so
   the flex header keeps a clean center alignment with the navigation. */
.wp-block-image.cg-logo {
  margin: 0;
}
.wp-block-image.cg-logo a {
  display: inline-block;
  line-height: 0;
}
.wp-block-image.cg-logo img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Database-override safety net: when the rendered header still uses the
   wp:site-title block (Nick's custom header from when he rebuilt it in
   Code Editor), visually replace the "Command Growth" text with the
   bundled logo PNG. Scoped to the header pattern only (site-title block
   that's a direct sibling of a navigation block) so the footer's
   white-text site-title is untouched. The link text stays in the DOM
   for accessibility/SEO — only the visual rendering is the logo. */
.wp-block-group:has(> .wp-block-site-title + .wp-block-navigation) > .wp-block-site-title,
.wp-block-group:has(> .wp-block-site-title + .wp-block-navigation) > .wp-block-site-title a {
  font-size: 0 !important;
  line-height: 0 !important;
  letter-spacing: 0 !important;
}
.wp-block-group:has(> .wp-block-site-title + .wp-block-navigation) > .wp-block-site-title a {
  display: inline-block;
  width: 180px;
  height: 34px;
  background-image: url('../images/brand/command-growth-logo.png');
  background-repeat: no-repeat;
  background-position: left center;
  background-size: contain;
  color: transparent !important;
  text-decoration: none !important;
  vertical-align: middle;
}
@media (max-width: 600px) {
  .wp-block-group:has(> .wp-block-site-title + .wp-block-navigation) > .wp-block-site-title a {
    width: 140px;
    height: 26px;
  }
}

/* Hero credential block — centered editorial stat with a small top gold
   dash. Lives in the right column of the home hero. On mobile the columns
   stack and this sits below the headline cluster. */
.wp-block-group.cg-hero-stat {
  text-align: center;
  max-width: 280px;
  margin-left: auto;
  margin-right: auto;
  padding-top: 1.25rem;
  position: relative;
}
.wp-block-group.cg-hero-stat::before {
  content: '';
  display: block;
  width: 2rem;
  height: 2px;
  background: rgba(201, 169, 110, 0.6);
  margin: 0 auto 1.25rem;
}
/* Center the eyebrow + heading + paragraph inside the credential block */
.wp-block-group.cg-hero-stat > .has-eyebrow-style,
.wp-block-group.cg-hero-stat > .wp-block-heading,
.wp-block-group.cg-hero-stat > p {
  text-align: center !important;
}