/* @import statements hoisted from the tenant's custom CSS — they
               must precede every other rule in this stylesheet or browsers
               silently drop them. */
            @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Outfit:wght@500;600;700&display=swap');

            /* Theme variables and custom CSS.
               themeStyles (:root brand vars) is emitted in BOTH native and
               advanced modes so page-builder components keep brand colors/fonts.
               In advanced mode the imported custom_css is injected afterwards and
               overrides the imported markup's look. */
            :root {
  --color-primary: #034C8C;
  --color-secondary: #023059;
  --color-accent: #BF0A30;
  --color-secondaryAccent: #8b5cf6;
  --color-background: #f0f6fd;
  --color-surface: #f8fafc;
  --color-text: #1f2937;
  --color-textSecondary: #6b7280;
  --color-heading: var(--color-text);
  --heading-h1-size: 2.5rem;
  --heading-h1-color: var(--color-heading, var(--color-text));
  --heading-h2-size: 2rem;
  --heading-h2-color: var(--color-heading, var(--color-text));
  --heading-h3-size: 1.75rem;
  --heading-h3-color: var(--color-heading, var(--color-text));
  --heading-h4-size: 1.5rem;
  --heading-h4-color: var(--color-heading, var(--color-text));
  --heading-h5-size: 1.25rem;
  --heading-h5-color: var(--color-heading, var(--color-text));
  --heading-h6-size: 1rem;
  --heading-h6-color: var(--color-heading, var(--color-text));
  --color-border: #e5e7eb;
  --color-success: #10b981;
  --color-warning: #f59e0b;
  --color-error: #ef4444;
  --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-secondary: 'Outfit', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --content-max-width: 100%;
}
body { background-color: #f0f6fd; }

body { background-color: #f0f6fd; }

            /* Site-level custom CSS (sanitized). Only applied in advanced mode;
               native mode stores but does not apply. */
            /* =============================================================
   CACEO — Custom CSS for Recur Central Renderer
   stylingMode: "advanced"
   This stylesheet is the SOLE source of visual appearance.
   The renderer's style scrubber strips all decorative inline
   styles; only layout/sizing inline properties survive.
   Target: Recur stable class contract (puck-*, recur-*).
   All values sourced from artifacts/web/src/index.css and
   component source files — see CSS_FIDELITY_GUIDE.md.
   ============================================================= */

/* 1. GOOGLE FONTS
   Recur hoists @import rules above everything else.
   ------------------------------------------------------------ */


/* 2. CSS CUSTOM PROPERTIES
   Override Recur's theme :root with CACEO brand values.
   Source: artifacts/web/src/index.css :root block
   ------------------------------------------------------------ */
:root {
  /* Brand palette — exact hex values per index.css comments */
  --color-primary:       #034C8C;  /* hsl(208 96% 28%) */
  --color-secondary:     #023059;  /* hsl(208 96% 18%) */
  --color-accent:        #BF0A30;  /* hsl(347 90% 39%) Colorado flag red */
  --color-background:    #f0f6fd;  /* hsl(210 40% 98%) */
  --color-surface:       #ffffff;
  --color-text:          #023059;  /* foreground = secondary */
  --color-heading:       #023059;
  --color-textSecondary: #64748b;  /* hsl(215 16% 47%) muted-foreground */
  --color-border:        #d9e4f0;  /* hsl(214 32% 91%) */
  --color-muted:         #f1f5f9;  /* hsl(210 40% 96%) */
  --color-card:          #ffffff;
  --color-input:         #d9e4f0;

  /* CACEO-specific aliases used throughout this file */
  --caceo-primary:        #034C8C;
  --caceo-primary-fg:     #ffffff;
  --caceo-primary-border: #023272;  /* hsl(208 96% 20%) = primary -8% L */
  --caceo-secondary:      #023059;
  --caceo-secondary-fg:   #ffffff;
  --caceo-secondary-border: #011B32; /* hsl(208 96% 10%) = secondary -8% L */
  --caceo-accent:         #BF0A30;
  --caceo-accent-fg:      #ffffff;
  --caceo-accent-border:  #960827;  /* hsl(347 90% 31%) = accent -8% L */
  --caceo-button-outline: rgba(0, 0, 0, 0.10);

  /* Typography */
  --font-primary:   'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-secondary: 'Outfit', 'Inter', sans-serif;
  --font-display:   'Outfit', 'Inter', sans-serif;
  --font-sans:      'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Heading sizes — mirror index.css / Tailwind defaults */
  --heading-h1-size:  2.5rem;   /* 40px */
  --heading-h2-size:  2rem;     /* 32px */
  --heading-h3-size:  1.5rem;   /* 24px */
  --heading-h4-size:  1.25rem;  /* 20px */
  --heading-h5-size:  1.125rem; /* 18px */
  --heading-h6-size:  1rem;     /* 16px */
  --heading-h1-color: var(--color-heading);
  --heading-h2-color: var(--color-heading);
  --heading-h3-color: var(--color-heading);
  --heading-h4-color: var(--color-heading);
  --heading-h5-color: var(--color-heading);
  --heading-h6-color: var(--color-heading);

  /* Radius — source: --radius: 0.5rem in index.css */
  --radius:    0.5rem;   /* 8px */
  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;  /* 12px — card.tsx uses rounded-xl */

  /* Shadows — source: shadow tokens in index.css (navy tint) */
  --shadow-xs: 0px 2px 0px 0px rgba(2, 48, 89, 0.05);
  --shadow-sm: 0px 2px 0px 0px rgba(2, 48, 89, 0.05), 0px 1px 2px -1px rgba(2, 48, 89, 0.05);
  --shadow:    0px 2px 0px 0px rgba(2, 48, 89, 0.05), 0px 1px 2px -1px rgba(2, 48, 89, 0.05);
  --shadow-md: 0px 2px 0px 0px rgba(2, 48, 89, 0.05), 0px 2px 4px -1px rgba(2, 48, 89, 0.05);
  --shadow-lg: 0px 2px 0px 0px rgba(2, 48, 89, 0.05), 0px 4px 6px -1px rgba(2, 48, 89, 0.05);
  --shadow-xl: 0px 2px 0px 0px rgba(2, 48, 89, 0.05), 0px 8px 10px -1px rgba(2, 48, 89, 0.05);

  /* Content width
     --content-max-width: 100% enables the renderer's "Full Width
     (edge-to-edge)" mode: main spans the viewport and heroes break out
     of main's 2rem side padding automatically. Inner content is capped
     by --container-max-width (matches the SPA's max-w-7xl = 1280px). */
  --content-max-width: 100%;
  --container-max-width: 1280px;
  /* Header/footer chrome keeps the boxed container (renderer reads these
     with higher-specificity selectors than our .header-grid rules). */
  --header-max-width: 1280px;
  --footer-max-width: 1280px;
  --container-px: 1.5rem;
  --section-py: 4rem;

  /* Transitions */
  --transition-base: 150ms ease;
}

/* 3. BASE ELEMENT STYLES
   ------------------------------------------------------------ */
body {
  font-family: var(--font-primary);
  font-size: 1rem;
  line-height: 1.625;
  color: var(--color-text);
  background-color: var(--color-background);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Headings — Outfit display font, tracking-tight */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.025em;
  color: var(--color-heading);
}

h1 { font-size: var(--heading-h1-size); }
h2 { font-size: var(--heading-h2-size); }
h3 { font-size: var(--heading-h3-size); }
h4 { font-size: var(--heading-h4-size); }
h5 { font-size: var(--heading-h5-size); }
h6 { font-size: var(--heading-h6-size); }

/* Links */
a {
  color: var(--caceo-primary);
  text-decoration: none;
  transition: opacity var(--transition-base);
}
a:hover {
  opacity: 0.8;
  text-decoration: underline;
}

/* 4. BUTTON STYLES
   Source: artifacts/web/src/components/ui/button.tsx
   Base: inline-flex, rounded-md (0.5rem), text-sm, font-medium, min-h-9, px-4 py-2
   ------------------------------------------------------------ */
.puck-button,
.puck-button-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  min-height: 2.25rem;
  font-family: var(--font-primary);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
  border-radius: var(--radius);
  border: 1px solid var(--caceo-primary-border);
  background-color: var(--caceo-primary);
  color: var(--caceo-primary-fg);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity var(--transition-base), box-shadow var(--transition-base);
  -webkit-font-smoothing: antialiased;
}

.puck-button:hover,
.puck-button-primary:hover {
  opacity: 0.9;
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  color: var(--caceo-primary-fg);
}

.puck-button:active,
.puck-button-primary:active {
  opacity: 0.82;
  box-shadow: none;
}

/* Button container (alignment wrapper) */
.puck-button-container {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* Outline button variant — border rgba(0,0,0,.10), shadow-xs */
.puck-button[data-variant="outline"],
.puck-button--outline {
  background-color: transparent;
  color: var(--color-text);
  border-color: var(--caceo-button-outline);
  box-shadow: var(--shadow-xs);
}
.puck-button[data-variant="outline"]:hover,
.puck-button--outline:hover {
  background-color: rgba(0, 0, 0, 0.04);
  opacity: 1;
}

/* Hero CTA primary button — complete button treatment (the class renders
   standalone, without .puck-button base). Old site: accent red, semibold. */
.puck-hero-cta-primary,
.puck-hero .puck-button-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  min-height: 2.75rem;
  font-family: var(--font-primary);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1;
  border-radius: var(--radius);
  border: 1px solid var(--caceo-accent-border);
  background-color: var(--caceo-accent);
  color: var(--caceo-accent-fg);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity var(--transition-base), box-shadow var(--transition-base);
}
.puck-hero-cta-primary:hover,
.puck-hero .puck-button-primary:hover {
  opacity: 0.9;
  color: var(--caceo-accent-fg);
  text-decoration: none;
  box-shadow: var(--shadow-sm);
}

/* Hero CTA secondary button — outline style */
.puck-hero-cta-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  min-height: 2.25rem;
  font-family: var(--font-primary);
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: var(--radius);
  border: 1px solid rgba(255, 255, 255, 0.5);
  background-color: transparent;
  color: #ffffff;
  cursor: pointer;
  text-decoration: none;
  transition: opacity var(--transition-base), background-color var(--transition-base);
}
.puck-hero-cta-secondary:hover {
  background-color: rgba(255, 255, 255, 0.12);
  opacity: 1;
  text-decoration: none;
  color: #ffffff;
}

/* CTA section button overrides */
.puck-cta-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.5rem 1.5rem;
  min-height: 2.5rem;
  font-family: var(--font-primary);
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: var(--radius);
  background-color: var(--caceo-primary);
  color: var(--caceo-primary-fg);
  border: 1px solid var(--caceo-primary-border);
  cursor: pointer;
  text-decoration: none;
  transition: opacity var(--transition-base);
}
.puck-cta-primary:hover { opacity: 0.9; text-decoration: none; color: var(--caceo-primary-fg); }

.puck-cta-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.5rem 1.5rem;
  min-height: 2.5rem;
  font-family: var(--font-primary);
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: var(--radius);
  background-color: transparent;
  color: var(--caceo-primary);
  border: 1px solid var(--caceo-button-outline);
  box-shadow: var(--shadow-xs);
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--transition-base), opacity var(--transition-base);
}
.puck-cta-secondary:hover { background-color: rgba(3, 76, 140, 0.05); text-decoration: none; }

/* 5. HERO STYLES
   ------------------------------------------------------------ */
.puck-hero {
  position: relative;
  overflow: hidden;
  background-color: var(--caceo-secondary);
  color: #ffffff;
}

/* Hero text */
.puck-hero-title {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: #ffffff;
  margin-bottom: 1rem;
}

.puck-hero-subtitle {
  font-family: var(--font-primary);
  font-size: 1.125rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.88);
  margin-bottom: 1.5rem;
}

.puck-hero-eyebrow {
  font-family: var(--font-primary);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
  margin-bottom: 0.75rem;
}

/* Home hero navy tint — a lighter treatment preserves heading contrast while
   allowing the mountain image to remain visible:
   bg-secondary/55 with multiply blend, plus a softened bottom-up gradient
   (from secondary via secondary/55 to transparent) at 70% opacity.
   The Hero block's own overlay is set to "off" in deploy-home-page.mjs. */
.puck-hero:has(+ .puck-cta) {
  position: relative;
}
.puck-hero:has(+ .puck-cta)::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(2, 48, 89, 0.55);
  mix-blend-mode: multiply;
  pointer-events: none;
}
.puck-hero:has(+ .puck-cta)::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, #023059 0%, rgba(2, 48, 89, 0.55) 50%, rgba(2, 48, 89, 0) 100%);
  opacity: 0.7;
  pointer-events: none;
}
.puck-hero:has(+ .puck-cta) .puck-hero-content {
  position: relative;
  z-index: 1;
}

/* Home hero (the only hero followed by a CTA banner): old site renders
   the eyebrow as a badge pill with a red status dot, a larger display
   title constrained to max-w-3xl, and a max-w-2xl subtitle. */
.puck-hero:has(+ .puck-cta) .puck-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.75rem;
  font-weight: 500;
  letter-spacing: normal;
  text-transform: none;
  color: #ffffff;
  background-color: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 9999px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  margin-bottom: 1.5rem;
}
.puck-hero:has(+ .puck-cta) .puck-hero-eyebrow::before {
  content: '';
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 9999px;
  background-color: var(--caceo-accent);
  flex-shrink: 0;
}
.puck-hero:has(+ .puck-cta) .puck-hero-title {
  font-size: clamp(2.25rem, 4.5vw, 4.5rem); /* text-4xl → lg:text-7xl */
  line-height: 1.1;
  max-width: 48rem;  /* max-w-3xl */
  margin-bottom: 1.5rem;
}
.puck-hero:has(+ .puck-cta) .puck-hero-subtitle {
  max-width: 42rem;  /* max-w-2xl */
}

/* Interior page heroes (not followed by a CTA banner): the old site uses
   a short navy page-header band with a breadcrumb, not a tall photo hero.
   min-height overrides the block's inline 420px value; the inset shadow
   adds the navy tint (secondary/80) over the background photo. */
#puck-content > .puck-hero:not(:has(+ .puck-cta)) {
  min-height: 0 !important;
  box-shadow: inset 0 0 0 9999px rgba(2, 48, 89, 0.62);
}
.puck-hero:not(:has(+ .puck-cta)) .puck-hero-content {
  padding-block: 2.5rem 4rem;
  /* Old-site interior page headers are always left-aligned; override any
     authored center alignment (inline style) */
  text-align: left !important;
  align-items: flex-start !important;
  justify-items: start !important;
}
/* The renderer puts the flex centering + text-align inline on .puck-hero
   itself, so override the container too */
#puck-content > .puck-hero:not(:has(+ .puck-cta)) {
  text-align: left !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
}
.puck-hero:not(:has(+ .puck-cta)) .puck-hero-title,
.puck-hero:not(:has(+ .puck-cta)) .puck-hero-subtitle {
  text-align: left !important;
  margin-inline: 0 !important;
}
/* Renderer caps hero-content at 600-800px and centers it; interior page
   headers on the old site span the full content column */
#puck-content > .puck-hero:not(:has(+ .puck-cta)) .puck-hero-content {
  width: 100%;
  max-width: 1280px !important;
  margin-inline: auto !important;
}
/* Eyebrow styled as the breadcrumb trail ("Home › page") */
.puck-hero:not(:has(+ .puck-cta)) .puck-hero-eyebrow {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  color: #dbeafe; /* blue-100 */
  margin-bottom: 1rem;
}
.puck-hero:not(:has(+ .puck-cta)) .puck-hero-eyebrow::before {
  content: 'Home  ›';
  color: #93c5fd; /* blue-300 */
  white-space: pre;
}
.puck-hero:not(:has(+ .puck-cta)) .puck-hero-title {
  font-size: clamp(2.25rem, 3vw, 3rem); /* text-4xl sm:text-5xl */
  margin-bottom: 1rem;
}
.puck-hero:not(:has(+ .puck-cta)) .puck-hero-subtitle {
  max-width: 42rem;
  color: #bfdbfe; /* blue-200 */
}

.puck-hero-content {
  position: relative;
  z-index: 1;
  max-width: var(--container-max-width);
  margin-inline: auto;
  padding: 5rem var(--container-px);
}

/* 5b. FULL-WIDTH LAYOUT CONTAINMENT
   With --content-max-width: 100%, main spans the viewport (with 2rem
   side padding) and the renderer auto-breaks heroes out via -2rem
   margins. Everything else needs an explicit container cap, and CTA
   bands need the same break-out so their background is full-bleed like
   the old site's section bands.
   ------------------------------------------------------------ */

/* Cap ordinary top-level blocks (Text, Heading, Grid, EventList, Embed…) */
#puck-content > *:not(.puck-hero):not(.puck-cta) {
  max-width: var(--container-max-width);
  margin-inline: auto;
}

/* Heroes render as full-bleed bands: the renderer only breaks them out
   vertically (margin-top: -2rem on :first-child), so break out of main's
   2rem side padding here — otherwise every hero shows white side gutters. */
#puck-content > .puck-hero {
  margin-inline: -2rem;
  border-radius: 0;
}

/* CTA sections render as full-bleed bands (old site: full-width navy/blue
   bands), breaking out of main's 2rem side padding like heroes do. */
#puck-content > .puck-cta {
  margin-inline: -2rem;
  border-radius: 0;
}
#puck-content > .puck-cta > * {
  max-width: var(--container-max-width);
  margin-inline: auto;
}

/* 5c. EVENT BANNER CTA (Home)
   A CTA immediately after the hero is the featured-event banner. Old
   site: full-width primary band, text left, Register button right,
   accent-red button (SPA Home.tsx "Featured Event Banner"). */
#puck-content > .puck-hero + .puck-cta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 3rem;
  text-align: left;
  padding-block: 2.5rem;
  padding-inline: max(2rem, calc((100% - var(--container-max-width)) / 2));
}
#puck-content > .puck-hero + .puck-cta > * {
  max-width: none;
  margin-inline: 0;
}
#puck-content > .puck-hero + .puck-cta .puck-cta-title {
  grid-column: 1;
  margin-bottom: 0.25rem;
}
#puck-content > .puck-hero + .puck-cta .puck-cta-description {
  grid-column: 1;
  margin-bottom: 0;
  color: #bfdbfe; /* blue-200, matches old banner subtitle */
}
#puck-content > .puck-hero + .puck-cta .puck-cta-buttons {
  grid-column: 2;
  grid-row: 1 / span 2;
  margin-top: 0;
  justify-content: flex-end;
}
#puck-content > .puck-hero + .puck-cta .puck-cta-primary {
  background-color: var(--caceo-accent);
  color: var(--caceo-accent-fg);
  border-color: var(--caceo-accent-border);
  font-weight: 600;
  padding: 0.75rem 2rem;
  min-height: 3rem;
}
/* Eyebrow injected above the banner title (Embed-event-countdown) */
#puck-content > .puck-hero + .puck-cta .caceo-evt-eyebrow {
  grid-column: 1;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #ffffff;
  margin-bottom: 0.5rem;
}
.caceo-evt-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 9999px;
  background-color: var(--caceo-accent);
  flex-shrink: 0;
}

/* Countdown cards + Register button share the right column */
#puck-content > .puck-hero + .puck-cta .puck-cta-buttons {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
}
.caceo-cd {
  display: flex;
  gap: 0.75rem;
}
.caceo-cd-unit {
  background-color: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 0.75rem;
  padding: 0.75rem 1rem;
  text-align: center;
  min-width: 68px;
}
.caceo-cd-num {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1;
  color: #ffffff;
}
.caceo-cd-label {
  font-size: 0.75rem;
  color: #bfdbfe;
  margin-top: 0.25rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Hide the countdown script's Embed wrapper so it takes no space */
#puck-content > .puck-cta + * :is(.caceo-evt-hidden) { display: none; }

/* "Want to host a training event?" card (Embed-host-training) —
   SPA: bg-muted/40 rounded-2xl p-6, photo left, small outline button */
@media (max-width: 640px) {
}

/* Membership benefits section (Embed-benefits-body / Embed-pricing-card) */

/* Membership section white band (home): the section's last three top-level
   blocks (Heading, intro Text, membership Grid) render on white, breaking
   out of main's 2rem side padding. Scoped to the home page via the
   .puck-card--caceo-pricing hook, which only exists there. */
#puck-content:has(.puck-card--caceo-pricing) > :nth-last-child(-n+3) {
  background-color: #ffffff;
  max-width: none;
  margin-inline: -2rem;
  padding-inline: max(2rem, calc((100% - var(--container-max-width)) / 2));
  /* Margins between blocks show the page background as gray bars —
     zero them and use white padding for the spacing instead. */
  margin-block: 0 !important;
}
#puck-content:has(.puck-card--caceo-pricing) > :nth-last-child(3) {
  padding-top: 4rem;
  padding-bottom: 1.5rem;
}
#puck-content:has(.puck-card--caceo-pricing) > :nth-last-child(2) {
  padding-bottom: 1.5rem;
}
#puck-content:has(.puck-card--caceo-pricing) > :last-child {
  padding-bottom: 5rem;
}
/* main's own 2rem bottom padding is what shows as a gray bar above the
   footer — negative margins can't paint over it, so remove it on home. */
main:has(.puck-card--caceo-pricing) {
  padding-bottom: 0;
}

/* Mission value cards (Embed-mission-cards) */
@media (max-width: 900px) {
}

@media (max-width: 768px) {
  #puck-content > .puck-hero + .puck-cta {
    grid-template-columns: 1fr;
  }
  #puck-content > .puck-hero + .puck-cta .puck-cta-buttons {
    grid-column: 1;
    grid-row: auto;
    justify-content: flex-start;
    margin-top: 1.25rem;
  }
}

/* 5d. LIGHT CARD CTA
   CTAs authored with a light custom background (e.g. Home "Want to host
   a training event?") are boxed rounded cards inside the container, with
   dark text and an outline button — not full-bleed white-on-blue bands. */
#puck-content > .puck-cta[style*="linear-gradient"] {
  margin-inline: auto;
  max-width: var(--container-max-width);
  border-radius: var(--radius-xl);
  border: 1px solid rgba(3, 76, 140, 0.12);
  text-align: left;
  padding: 2rem;
  color: var(--caceo-secondary);
}
#puck-content > .puck-cta[style*="linear-gradient"] .puck-cta-title {
  color: var(--caceo-secondary);
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
}
#puck-content > .puck-cta[style*="linear-gradient"] .puck-cta-description {
  color: var(--color-text-secondary, #475569);
  font-size: 0.9375rem;
  margin-bottom: 0.75rem;
}
#puck-content > .puck-cta[style*="linear-gradient"] .puck-cta-primary {
  background-color: transparent;
  color: var(--caceo-primary);
  border: 1px solid var(--caceo-button-outline);
  box-shadow: var(--shadow-xs);
}
#puck-content > .puck-cta[style*="linear-gradient"] .puck-cta-primary:hover {
  background-color: rgba(3, 76, 140, 0.05);
  opacity: 1;
}

.puck-hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

/* Hero video overlay (tint) */
.puck-hero-video-overlay {
  background-color: rgba(2, 48, 89, 0.5);
}

/* Carousel dot/nav default visibility */
.puck-hero--carousel .recur-dd-prev,
.puck-hero--carousel .recur-dd-next {
  background-color: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  color: #ffffff;
}

/* 6. CARD STYLES
   Source: artifacts/web/src/components/ui/card.tsx
   rounded-xl = 0.75rem, border, bg-card, shadow
   ------------------------------------------------------------ */
.puck-card {
  background-color: var(--color-card);
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: box-shadow var(--transition-base);
}

.puck-card:hover {
  box-shadow: var(--shadow-md);
}

.puck-card-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.125rem;
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--color-heading);
  margin-bottom: 0.5rem;
}

.puck-card-eyebrow {
  font-family: var(--font-primary);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--caceo-primary);
  margin-bottom: 0.375rem;
}

.puck-card-description {
  font-family: var(--font-primary);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--color-textSecondary);
}

.puck-card-meta,
.puck-card-meta-row {
  font-family: var(--font-primary);
  font-size: 0.8125rem;
  color: var(--color-textSecondary);
  border-top: 1px solid var(--color-border);
  padding-top: 0.75rem;
  margin-top: 0.75rem;
}

.puck-card-meta-label {
  font-weight: 500;
  color: var(--color-text);
}

.puck-card-meta-link {
  color: var(--caceo-primary);
  text-decoration: none;
}
.puck-card-meta-link:hover { text-decoration: underline; }

/* Card button */
.puck-card-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  min-height: 2.25rem;
  font-family: var(--font-primary);
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: var(--radius);
  background-color: var(--caceo-primary);
  color: var(--caceo-primary-fg);
  border: 1px solid var(--caceo-primary-border);
  text-decoration: none;
  transition: opacity var(--transition-base);
}
.puck-card-button:hover { opacity: 0.9; text-decoration: none; color: var(--caceo-primary-fg); }

/* Avatar (circle crop) for person/board cards */
.puck-card-avatar {
  border-radius: 50%;
  overflow: hidden;
}
.puck-card-avatar--ring {
  border: 3px solid var(--color-border);
}
.puck-card-avatar-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Card checklist items */
.puck-card-checklist {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0;
}
.puck-card-checklist li {
  font-size: 0.9375rem;
  color: var(--color-text);
  padding: 0.25rem 0;
  padding-left: 1.5rem;
  position: relative;
}
.puck-card-checklist li::before {
  content: '\2713';
  position: absolute;
  left: 0;
  color: var(--caceo-primary);
  font-weight: 700;
}

/* Featured card variant */
.puck-card--featured,
.puck-card--featured\ {
  background-color: var(--caceo-secondary);
  color: #ffffff;
  border-color: var(--caceo-secondary-border);
}
.puck-card--featured .puck-card-title,
.puck-card--featured .puck-card-eyebrow {
  color: #ffffff;
}
.puck-card--featured .puck-card-description {
  color: rgba(255, 255, 255, 0.85);
}

/* 7. CTA SECTION STYLES
   ------------------------------------------------------------ */
.puck-cta {
  background-color: var(--caceo-primary);
  color: #ffffff;
  border-radius: var(--radius-xl);
}

.puck-cta-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.875rem;
  line-height: 1.2;
  letter-spacing: -0.025em;
  color: #ffffff;
  margin-bottom: 0.75rem;
}

.puck-cta-description {
  font-family: var(--font-primary);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.88);
  margin-bottom: 1.25rem;
}

.puck-cta-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1rem;
}

/* CTA with accent background */
.puck-cta[data-bg="accent"] {
  background-color: var(--caceo-accent);
}

/* 8. STATS STYLES
   ------------------------------------------------------------ */
/* Old site renders stats as light tiles in a row (About sidebar): white
   cards with borders, blue display values, small muted labels. */
.puck-stats {
  background-color: transparent;
  color: var(--color-text);
  padding: 0;
}

.puck-stats-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.75rem;
  color: var(--caceo-secondary);
  letter-spacing: -0.025em;
  margin-bottom: 2rem;
}

.puck-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 1rem !important;
}

.puck-stat-card {
  background-color: var(--color-surface, #ffffff);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 1.25rem 1rem;
  text-align: center;
}

.puck-stat-value {
  font-family: var(--font-display);
  font-size: 1.625rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--caceo-primary);
  margin-bottom: 0.375rem;
}

.puck-stat-label {
  font-family: var(--font-primary);
  font-size: 0.75rem;
  font-weight: 500;
  color: #64748b;
}

.puck-stat-description {
  font-family: var(--font-primary);
  font-size: 0.8125rem;
  color: #64748b;
  margin-top: 0.25rem;
}

@media (max-width: 640px) {
  .puck-stats-grid {
    grid-template-columns: 1fr !important;
  }
}

/* 8b. TOP-LEVEL HEADING BLOCKS — section rhythm
   Heading blocks render as bare h1-h6 tags directly inside #puck-content.
   The old site wraps each section in py-16 sections; recreate that
   breathing room around standalone section headings. */
#puck-content > h2,
#puck-content > h3 {
  margin-top: 3.5rem;
  margin-bottom: 1.5rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.75rem;
  letter-spacing: -0.025em;
  color: var(--caceo-secondary);
}
#puck-content > h2:first-of-type {
  margin-top: 2.5rem;
}
/* Extra space before the block that follows a section's last content */
#puck-content > .puck-text:not(:last-child) {
  margin-bottom: 1.5rem;
}

/* 9. TEXT BLOCK STYLES
   ------------------------------------------------------------ */
.puck-text {
  font-family: var(--font-primary);
  font-size: 1rem;
  line-height: 1.625;
  color: var(--color-text);
}

.puck-text p { margin-bottom: 1rem; }
.puck-text p:last-child { margin-bottom: 0; }
.puck-text strong, .puck-text b { font-weight: 600; }
.puck-text em, .puck-text i { font-style: italic; }
.puck-text ul, .puck-text ol { margin: 0.5rem 0 1rem 1.5rem; }
.puck-text li { margin-bottom: 0.25rem; line-height: 1.6; }
.puck-text a { color: var(--caceo-primary); }
.puck-text a:hover { text-decoration: underline; }
.puck-text h1, .puck-text h2, .puck-text h3,
.puck-text h4, .puck-text h5, .puck-text h6 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--color-heading);
  margin-bottom: 0.75rem;
  margin-top: 1.5rem;
}
.puck-text h1:first-child, .puck-text h2:first-child,
.puck-text h3:first-child { margin-top: 0; }

/* Table styling inside text block */
.puck-table-wrapper {
  overflow-x: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
}
.puck-table-wrapper table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}
.puck-table-wrapper th {
  background-color: var(--caceo-secondary);
  color: #ffffff;
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: 0.875rem;
  padding: 0.75rem 1rem;
  text-align: left;
}
.puck-table-wrapper td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text);
}
.puck-table-wrapper tr:last-child td { border-bottom: none; }
.puck-table-wrapper tr:nth-child(even) td { background-color: rgba(240, 246, 253, 0.6); }

/* 10. HEADING BLOCK
   ------------------------------------------------------------ */
.puck-grid-heading {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--color-heading);
}
.puck-grid-subheading {
  font-family: var(--font-primary);
  color: var(--color-textSecondary);
  line-height: 1.6;
}

/* 11. NAVIGATION BLOCK
   ------------------------------------------------------------ */
.puck-navigation {
  font-family: var(--font-primary);
}

/* Tabs nav variant */
.puck-navigation-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  border-bottom: 2px solid var(--color-border);
}
.puck-navigation-tabs a {
  display: inline-block;
  padding: 0.625rem 1rem;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--color-textSecondary);
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: color var(--transition-base), border-color var(--transition-base);
  text-decoration: none;
}
.puck-navigation-tabs a:hover,
.puck-navigation-tabs a.active {
  color: var(--caceo-primary);
  border-color: var(--caceo-primary);
  text-decoration: none;
}

/* Simple-list nav variant */
.puck-navigation-simple-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.puck-navigation-simple-list li a {
  display: block;
  padding: 0.5rem 0;
  font-size: 0.9375rem;
  color: var(--caceo-primary);
  border-bottom: 1px solid var(--color-border);
  transition: color var(--transition-base);
  text-decoration: none;
}
.puck-navigation-simple-list li a:hover { color: var(--caceo-secondary); }

/* Dropdown nav variant */
.puck-navigation-dropdown {
  font-family: var(--font-primary);
}

/* 12. GRID & FLEX LAYOUT
   ------------------------------------------------------------ */
.puck-grid {
  display: grid;
  gap: 1.5rem;
}

.puck-grid-column {
  min-width: 0; /* prevent overflow */
}

.puck-flex {
  display: flex;
  flex-wrap: wrap;
}

.puck-flex-item {
  min-width: 0;
}

.puck-column {
  min-width: 0;
}

.puck-columns {
  display: grid;
  gap: 1.5rem;
}

.puck-columns-col {
  min-width: 0;
}

/* Grid preset wrapper */
.puck-grid-preset {
  display: grid;
  gap: 1.5rem;
}

/* 12b. PHOTO STRIP GRIDS
   A top-level grid whose columns contain ONLY images renders on the old
   site as a full-bleed edge-to-edge photo strip (Training page). The
   renderer injects a white card treatment on .puck-grid-column
   (padding, radius, surface background); strip it here and let the
   photos fill their cells. Grids with any non-image content keep the
   default treatment. */
#puck-content > .puck-grid:has(> .puck-grid-column > .puck-image):not(:has(> .puck-grid-column > :not(.puck-image))) {
  max-width: none;
  margin-inline: -2rem;
  gap: 0 !important;
}
#puck-content > .puck-grid:has(> .puck-grid-column > .puck-image):not(:has(> .puck-grid-column > :not(.puck-image))) > .puck-grid-column {
  min-height: 0;
  padding: 0;
  border-radius: 0;
  background-color: transparent;
}
#puck-content > .puck-grid:has(> .puck-grid-column > .puck-image):not(:has(> .puck-grid-column > :not(.puck-image))) .puck-image {
  height: 18rem; /* h-72 on the old site */
}
#puck-content > .puck-grid:has(> .puck-grid-column > .puck-image):not(:has(> .puck-grid-column > :not(.puck-image))) .puck-image-figure {
  height: 100%;
}
#puck-content > .puck-grid:has(> .puck-grid-column > .puck-image):not(:has(> .puck-grid-column > :not(.puck-image))) .puck-image-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 0 !important;
}

/* 13. IMAGE & MEDIA
   ------------------------------------------------------------ */
.puck-image {
  overflow: hidden;
}
.puck-image-img {
  display: block;
  max-width: 100%;
  height: auto;
}
.puck-image-caption {
  font-family: var(--font-primary);
  font-size: 0.8125rem;
  color: var(--color-textSecondary);
  text-align: center;
  margin-top: 0.5rem;
}
.puck-image-figure {
  margin: 0;
}

.puck-video {
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.puck-video-inner {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
  overflow: hidden;
}
.puck-video-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* 14. SOCIAL LINKS
   ------------------------------------------------------------ */
.puck-social-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}
.puck-social-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background-color: rgba(3, 76, 140, 0.08);
  color: var(--caceo-primary);
  border: 1px solid rgba(3, 76, 140, 0.12);
  transition: background-color var(--transition-base), color var(--transition-base);
  text-decoration: none;
}
.puck-social-links a:hover {
  background-color: var(--caceo-primary);
  color: #ffffff;
  text-decoration: none;
}

/* 15. FORM INPUT STYLES
   Source: index.css --radius, --border; computed sizes from button.tsx sizing
   ------------------------------------------------------------ */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="search"],
input[type="url"],
input[type="password"],
input[type="number"],
textarea,
select {
  display: block;
  width: 100%;
  height: 2.5rem;
  padding: 0.5rem 0.75rem;
  font-family: var(--font-primary);
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--color-text);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  outline: none;
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
  appearance: none;
  -webkit-appearance: none;
}

textarea {
  height: auto;
  min-height: 7rem;
  resize: vertical;
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--caceo-primary);
  box-shadow: 0 0 0 2px rgba(3, 76, 140, 0.15);
}

input::placeholder,
textarea::placeholder {
  color: var(--color-textSecondary);
  opacity: 0.7;
}

label {
  display: block;
  font-family: var(--font-primary);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text);
  margin-bottom: 0.375rem;
}

/* 16. RECUR EVENT WIDGET STYLES
   ------------------------------------------------------------ */
.recur-event-list {
  font-family: var(--font-primary);
}

.recur-event-list-title {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--color-heading);
  margin-bottom: 1.5rem;
}

.recur-event-list-grid {
  display: grid;
  gap: 1.25rem;
}

.recur-event-card {
  background-color: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}
.recur-event-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.recur-event-card-image img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.recur-event-card-body {
  padding: 1.25rem;
}

.recur-event-card-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.0625rem;
  line-height: 1.35;
  letter-spacing: -0.015em;
  color: var(--color-heading);
  margin-bottom: 0.5rem;
}

.recur-event-card-date {
  font-family: var(--font-primary);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--caceo-primary);
  margin-bottom: 0.375rem;
}

.recur-event-card-description {
  font-family: var(--font-primary);
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--color-textSecondary);
  margin-bottom: 0.75rem;
}

.recur-event-card-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.4375rem 0.875rem;
  min-height: 2rem;
  font-family: var(--font-primary);
  font-size: 0.8125rem;
  font-weight: 500;
  border-radius: var(--radius);
  background-color: var(--caceo-primary);
  color: var(--caceo-primary-fg);
  border: 1px solid var(--caceo-primary-border);
  text-decoration: none;
  transition: opacity var(--transition-base);
}
.recur-event-card-button:hover { opacity: 0.88; text-decoration: none; color: var(--caceo-primary-fg); }

.recur-event-list-empty {
  font-family: var(--font-primary);
  color: var(--color-textSecondary);
  text-align: center;
  padding: 3rem 1.5rem;
}

/* Event calendar widget */
.recur-event-calendar {
  font-family: var(--font-primary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  background-color: var(--color-card);
}

.recur-event-calendar-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  color: var(--color-heading);
}

.recur-event-calendar-day {
  border: 1px solid var(--color-border);
  background-color: var(--color-surface);
}

.recur-event-calendar-event {
  background-color: var(--caceo-primary);
  color: #ffffff;
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  padding: 0.125rem 0.375rem;
}

/* Event modal */
.recur-event-modal-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.375rem;
  color: var(--color-heading);
  margin-bottom: 0.75rem;
}
.recur-event-modal-body { font-family: var(--font-primary); color: var(--color-text); }
.recur-event-modal-button {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 1rem;
  min-height: 2.25rem;
  font-family: var(--font-primary);
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: var(--radius);
  background-color: var(--caceo-primary);
  color: var(--caceo-primary-fg);
  border: 1px solid var(--caceo-primary-border);
  cursor: pointer;
  transition: opacity var(--transition-base);
}
.recur-event-modal-button:hover { opacity: 0.88; }

/* 17. RECUR PRODUCT / SPONSORSHIP WIDGET
   ------------------------------------------------------------ */
.recur-product-list { font-family: var(--font-primary); }

.recur-product-list-title {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--color-heading);
  margin-bottom: 1.5rem;
}

.recur-product-list-grid { display: grid; gap: 1.25rem; }

.recur-product-card {
  background-color: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: box-shadow var(--transition-base);
}
.recur-product-card:hover { box-shadow: var(--shadow-md); }

.recur-product-card-image img { display: block; width: 100%; height: auto; }
.recur-product-card-body { padding: 1.25rem; }

.recur-product-card-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.0625rem;
  color: var(--color-heading);
  margin-bottom: 0.375rem;
}

.recur-product-card-description {
  font-family: var(--font-primary);
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--color-textSecondary);
  margin-bottom: 0.75rem;
}

.recur-product-card-price {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--caceo-primary);
  margin-bottom: 0.75rem;
}

.recur-product-card-button {
  display: inline-flex;
  align-items: center;
  padding: 0.4375rem 0.875rem;
  min-height: 2rem;
  font-family: var(--font-primary);
  font-size: 0.8125rem;
  font-weight: 500;
  border-radius: var(--radius);
  background-color: var(--caceo-accent);
  color: var(--caceo-accent-fg);
  border: 1px solid var(--caceo-accent-border);
  text-decoration: none;
  transition: opacity var(--transition-base);
}
.recur-product-card-button:hover { opacity: 0.88; text-decoration: none; color: var(--caceo-accent-fg); }

.recur-product-list-empty {
  font-family: var(--font-primary);
  color: var(--color-textSecondary);
  text-align: center;
  padding: 3rem 1.5rem;
}

/* Single product/event detail */
.recur-single-event,
.recur-single-product {
  font-family: var(--font-primary);
  color: var(--color-text);
}

/* 18. DONATION WIDGET
   ------------------------------------------------------------ */
.recur-donation { font-family: var(--font-primary); }

.recur-donation-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: -0.025em;
  color: var(--color-heading);
  margin-bottom: 0.5rem;
}

.recur-donation-description {
  font-family: var(--font-primary);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--color-textSecondary);
  margin-bottom: 1.25rem;
}

.recur-donation-amount-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1.25rem;
  font-family: var(--font-primary);
  font-size: 0.9375rem;
  font-weight: 500;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  background-color: var(--color-surface);
  color: var(--color-text);
  cursor: pointer;
  transition: background-color var(--transition-base), border-color var(--transition-base);
}
.recur-donation-amount-button:hover,
.recur-donation-amount-button.selected {
  background-color: var(--caceo-primary);
  color: var(--caceo-primary-fg);
  border-color: var(--caceo-primary-border);
}

.recur-donation-amount-input {
  /* styled by the base input rules above */
}

.recur-donation-frequency { display: flex; gap: 0.5rem; flex-wrap: wrap; }

.recur-donation-frequency-label {
  font-family: var(--font-primary);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text);
}

.recur-donation-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0.625rem 1.5rem;
  min-height: 2.75rem;
  font-family: var(--font-primary);
  font-size: 1rem;
  font-weight: 600;
  border-radius: var(--radius);
  background-color: var(--caceo-accent);
  color: var(--caceo-accent-fg);
  border: 1px solid var(--caceo-accent-border);
  cursor: pointer;
  transition: opacity var(--transition-base);
}
.recur-donation-submit:hover { opacity: 0.9; }

.recur-donation-message {
  font-family: var(--font-primary);
  font-size: 0.8125rem;
  color: var(--color-textSecondary);
  margin-top: 0.75rem;
}

/* 19. BLOG WIDGET STYLES
   ------------------------------------------------------------ */
.recur-blog-list { font-family: var(--font-primary); }

.recur-blog-list-title {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--color-heading);
  margin-bottom: 1.5rem;
}

.recur-blog-list-grid { display: grid; gap: 1.5rem; }

.recur-blog-card {
  background-color: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}
.recur-blog-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }

.recur-blog-card-image img { display: block; width: 100%; height: auto; }

.recur-blog-card-body { padding: 1.25rem; }

.recur-blog-card-tag {
  font-family: var(--font-primary);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--caceo-primary);
  margin-bottom: 0.375rem;
}

.recur-blog-card-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.0625rem;
  line-height: 1.35;
  color: var(--color-heading);
  margin-bottom: 0.5rem;
}

.recur-blog-card-excerpt {
  font-family: var(--font-primary);
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--color-textSecondary);
  margin-bottom: 0.75rem;
}

.recur-blog-card-date {
  font-family: var(--font-primary);
  font-size: 0.8125rem;
  color: var(--color-textSecondary);
}

.recur-blog-card-button {
  display: inline-flex;
  align-items: center;
  padding: 0.375rem 0.75rem;
  font-family: var(--font-primary);
  font-size: 0.8125rem;
  font-weight: 500;
  border-radius: var(--radius);
  color: var(--caceo-primary);
  border: 1px solid var(--color-border);
  text-decoration: none;
  transition: background-color var(--transition-base);
}
.recur-blog-card-button:hover { background-color: rgba(3, 76, 140, 0.05); text-decoration: none; }

.recur-blog-list-empty {
  font-family: var(--font-primary);
  color: var(--color-textSecondary);
  text-align: center;
  padding: 3rem 1.5rem;
}

.recur-blog-pagination { display: flex; gap: 0.5rem; justify-content: center; margin-top: 2rem; }

.recur-blog-pagination-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius);
  font-family: var(--font-primary);
  font-size: 0.875rem;
  font-weight: 500;
  border: 1px solid var(--color-border);
  background-color: var(--color-surface);
  color: var(--color-text);
  cursor: pointer;
  transition: background-color var(--transition-base);
}
.recur-blog-pagination-button:hover,
.recur-blog-pagination-button.active {
  background-color: var(--caceo-primary);
  color: #ffffff;
  border-color: var(--caceo-primary-border);
}

/* Featured post / related posts */
.recur-featured-post,
.recur-blog-featured {
  font-family: var(--font-primary);
}

.recur-blog-related,
.recur-related-posts { font-family: var(--font-primary); }

/* Pagination navigation arrows */
.recur-dd-prev,
.recur-dd-next {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #ffffff;
  cursor: pointer;
  transition: background-color var(--transition-base);
}
.recur-dd-prev:hover,
.recur-dd-next:hover { background-color: rgba(255, 255, 255, 0.28); }

/* 20. JOB BOARD WIDGET
   ------------------------------------------------------------ */
.recur-job-board { font-family: var(--font-primary); color: var(--color-text); }

/* 21. MEDIA DIRECTORY WIDGET
   ------------------------------------------------------------ */
.recur-media-directory,
.recur-drive-directory {
  font-family: var(--font-primary);
  color: var(--color-text);
}

.recur-md-wrap {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  background-color: var(--color-card);
}

.recur-md-heading {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.25rem;
  color: var(--color-heading);
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--color-border);
  background-color: var(--color-surface);
}

.recur-md-search-wrap {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  border-bottom: 1px solid var(--color-border);
}

.recur-md-search {
  flex: 1;
  height: 2.25rem;
  padding: 0.4375rem 0.75rem;
  font-family: var(--font-primary);
  font-size: 0.875rem;
  color: var(--color-text);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  outline: none;
}
.recur-md-search:focus { border-color: var(--caceo-primary); box-shadow: 0 0 0 2px rgba(3,76,140,0.12); }

.recur-md-table { width: 100%; }
.recur-md-table-wrap { overflow-x: auto; }
.recur-md-th { background-color: var(--color-surface); }
.recur-md-th-inner {
  font-family: var(--font-primary);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-textSecondary);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.75rem 1rem;
}
.recur-md-tr { border-bottom: 1px solid var(--color-border); }
.recur-md-td { padding: 0.75rem 1rem; font-size: 0.9375rem; color: var(--color-text); }
.recur-md-tr:hover .recur-md-td { background-color: rgba(240, 246, 253, 0.6); }

.recur-md-name-link {
  color: var(--caceo-primary);
  font-weight: 500;
  text-decoration: none;
}
.recur-md-name-link:hover { text-decoration: underline; }

.recur-md-btn,
.recur-md-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.375rem 0.75rem;
  font-family: var(--font-primary);
  font-size: 0.8125rem;
  font-weight: 500;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  background-color: var(--color-surface);
  color: var(--color-text);
  cursor: pointer;
  transition: background-color var(--transition-base);
}
.recur-md-btn:hover,
.recur-md-icon-btn:hover {
  background-color: var(--caceo-primary);
  color: #ffffff;
  border-color: var(--caceo-primary-border);
}

.recur-md-dl-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--caceo-primary);
  text-decoration: none;
}
.recur-md-dl-cta:hover { text-decoration: underline; }

.recur-md-footer {
  padding: 0.75rem 1.5rem;
  border-top: 1px solid var(--color-border);
  background-color: var(--color-surface);
}

.recur-md-page-btns { display: flex; gap: 0.5rem; justify-content: center; }

.recur-md-prev, .recur-md-next {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  background-color: var(--color-surface);
  color: var(--color-text);
  cursor: pointer;
  transition: background-color var(--transition-base);
}
.recur-md-prev:hover, .recur-md-next:hover {
  background-color: var(--caceo-primary);
  color: #ffffff;
}

.recur-md-empty,
.recur-md-error {
  padding: 2.5rem 1.5rem;
  text-align: center;
  color: var(--color-textSecondary);
  font-size: 0.9375rem;
}

/* Tile view */
.recur-md-grid { display: grid; gap: 1rem; }
.recur-md-tile {
  background-color: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: box-shadow var(--transition-base);
}
.recur-md-tile:hover { box-shadow: var(--shadow-md); }
.recur-md-tile-thumb { background-color: var(--color-muted); }
.recur-md-tile-name { font-size: 0.8125rem; font-weight: 500; padding: 0.625rem; color: var(--color-text); }

/* Modal */
.recur-md-modal {
  background-color: rgba(2, 48, 89, 0.5);
}
.recur-md-modal-body {
  background-color: var(--color-card);
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-xl);
}
.recur-md-modal-head {
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--color-border);
}
.recur-md-modal-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.125rem;
  color: var(--color-heading);
}
.recur-md-modal-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius);
  background-color: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-textSecondary);
  cursor: pointer;
}
.recur-md-modal-close:hover { background-color: var(--color-muted); }

.recur-md-cell-secondary { color: var(--color-textSecondary); font-size: 0.8125rem; }

.recur-md-copied {
  font-size: 0.75rem;
  color: var(--caceo-primary);
  font-weight: 500;
}

.recur-md-size-row { border-bottom: 1px solid var(--color-border); }
.recur-md-size-info { font-size: 0.875rem; }
.recur-md-size-meta { color: var(--color-textSecondary); font-size: 0.8125rem; }
.recur-md-size-name { font-weight: 500; color: var(--color-text); }
.recur-md-size-actions { display: flex; gap: 0.5rem; }
.recur-md-sizes-label { font-size: 0.8125rem; font-weight: 600; color: var(--color-textSecondary); }
.recur-md-nopreview {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-muted);
  color: var(--color-textSecondary);
  font-size: 0.875rem;
}

/* 22. CONTACT WIDGET
   ------------------------------------------------------------ */
.puck-contact-widget {
  font-family: var(--font-primary);
  background-color: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: 2rem;
  box-shadow: var(--shadow);
}

/* Contact widget form controls — the embed script inline-styles fields,
   so use !important to align them with the site design */
.puck-contact-widget h3 {
  font-family: var(--font-display, var(--font-primary));
  color: var(--color-secondary, #023059);
}
.puck-contact-widget input[type="text"],
.puck-contact-widget input[type="email"],
.puck-contact-widget input[type="tel"],
.puck-contact-widget textarea {
  border-radius: 0.5rem !important;
  border-color: var(--color-border) !important;
}
.puck-contact-widget input:focus,
.puck-contact-widget textarea:focus {
  outline: 2px solid rgba(3, 76, 140, 0.35);
  outline-offset: 1px;
}
.puck-contact-widget [data-cf="submit"] {
  background: var(--color-accent, #BF0A30) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 0.625rem !important;
  padding: 0.75rem 1rem !important;
  font-weight: 600 !important;
  font-size: 0.9375rem !important;
  font-family: var(--font-primary) !important;
  transition: opacity 0.15s ease;
}
.puck-contact-widget [data-cf="submit"]:hover {
  opacity: 0.9;
}

/* Agencies directory (Embed block on /agencies) */
.caceo-agencies { font-family: var(--font-primary); color: var(--color-text); }
/* The old site renders each directory section as a full-bleed band that
   alternates white / muted. Break the Embed wrapper out of main's 2rem
   side padding and pad each band so its content column stays at 1280px. */
#puck-content > :has(.caceo-agencies):has(.caceo-agencies) {
  max-width: none;
  margin-inline: -2rem;
}
.caceo-ag-section {
  padding-block: 4rem;
  padding-inline: max(2rem, calc((100% - 1280px + 3rem) / 2));
  background-color: #ffffff;
}
.caceo-ag-section--muted { background-color: var(--color-muted); }
.caceo-ag-section-head { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 2rem; }
.caceo-ag-icon { height: 2.5rem; width: 2.5rem; border-radius: 0.75rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.caceo-ag-icon--primary { background-color: rgba(3, 76, 140, 0.1); color: var(--color-primary); }
.caceo-ag-icon--accent { background-color: rgba(191, 10, 48, 0.1); color: var(--color-accent); }
.caceo-ag-icon--secondary { background-color: rgba(2, 48, 89, 0.1); color: var(--color-secondary); }
.caceo-ag-h2 { font-family: var(--font-display, var(--font-primary)); font-size: 1.5rem; font-weight: 700; color: var(--color-secondary); margin: 0; }
.caceo-ag-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
.caceo-ag-card { background-color: var(--color-card, #fff); border: 1px solid var(--color-border); border-radius: 1rem; padding: 1.5rem; box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,0.05)); transition: box-shadow 0.15s ease, border-color 0.15s ease; }
.caceo-ag-card:hover { box-shadow: var(--shadow-md, 0 4px 6px rgba(0,0,0,0.07)); border-color: rgba(3, 76, 140, 0.2); }
.caceo-ag-card-title { display: inline-flex; align-items: flex-start; gap: 0.5rem; font-size: 1rem; font-weight: 700; color: var(--color-primary); text-decoration: none; line-height: 1.375; margin-bottom: 0.75rem; }
.caceo-ag-card-title:hover { text-decoration: underline; }
.caceo-ag-card-desc { font-size: 0.875rem; color: var(--color-textSecondary); line-height: 1.625; margin: 0; }
.caceo-ag-ext { color: var(--color-textSecondary); display: inline-flex; flex-shrink: 0; margin-top: 0.125rem; }
.caceo-ag-search-wrap { position: relative; max-width: 24rem; margin-bottom: 2rem; }
.caceo-ag-search-icon { position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%); color: var(--color-textSecondary); display: inline-flex; }
.caceo-ag-search { width: 100%; padding: 0.625rem 1rem 0.625rem 2.25rem; font-size: 0.875rem; border: 1px solid var(--color-border); border-radius: 0.5rem; background-color: var(--color-background, #fff); box-sizing: border-box; font-family: inherit; }
.caceo-ag-search:focus { outline: 2px solid rgba(3, 76, 140, 0.3); outline-offset: 0; border-color: var(--color-primary); }
.caceo-ag-h3 { font-size: 1.125rem; font-weight: 700; color: var(--color-secondary); margin: 0 0 1rem; display: flex; align-items: center; gap: 0.5rem; }
.caceo-ag-h3 + .caceo-ag-grid { margin-bottom: 3rem; }
.caceo-ag-dot { display: inline-block; width: 0.75rem; height: 0.75rem; border-radius: 9999px; }
.caceo-ag-dot--primary { background-color: var(--color-primary); }
.caceo-ag-dot--accent { background-color: var(--color-accent); }
.caceo-ag-dot--secondary { background-color: var(--color-secondary); }
.caceo-ag-count { font-size: 0.875rem; font-weight: 400; color: var(--color-textSecondary); }
.caceo-ag-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.25rem; background-color: rgba(226, 232, 240, 0.2); border: 1px solid var(--color-border); border-radius: 1rem; padding: 1rem; }
.caceo-ag-grid--4 { grid-template-columns: repeat(4, 1fr); }
.caceo-ag-grid .caceo-ag-grid { margin-bottom: 0; }
.caceo-ag-link { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem; border-radius: 0.5rem; font-size: 0.875rem; color: var(--color-secondary); text-decoration: none; transition: background-color 0.15s ease, color 0.15s ease; }
.caceo-ag-link:hover { background-color: rgba(226, 232, 240, 0.6); color: var(--color-primary); }
.caceo-ag-link:hover .caceo-ag-ext { color: var(--color-primary); }
.caceo-ag-link .caceo-ag-ext { margin-top: 0; }
.caceo-ag-empty { grid-column: 1 / -1; font-size: 0.875rem; color: var(--color-textSecondary); padding: 1rem 0.75rem; margin: 0; }
.caceo-ag-cta { background-color: rgba(226, 232, 240, 0.4); border-top: 1px solid var(--color-border); padding: 3.5rem var(--container-px, 1.5rem); text-align: center; }
/* Kill the pale gap between the CTA band and the footer (main's 2rem
   bottom padding + the embed wrapper's block margin). */
main:has(.caceo-agencies) { padding-bottom: 0; }
#puck-content > :has(.caceo-agencies):has(.caceo-agencies) { margin-bottom: 0 !important; }
.caceo-ag-cta .caceo-ag-h2 { margin-bottom: 0.75rem; }
.caceo-ag-cta-body { color: var(--color-textSecondary); max-width: 48rem; margin: 0 auto 2rem; }
.caceo-ag-cta-btn { display: inline-flex; align-items: center; justify-content: center; background-color: var(--color-accent); color: #fff; font-weight: 600; padding: 0.75rem 2rem; border-radius: 0.75rem; text-decoration: none; transition: opacity 0.15s ease; }
.caceo-ag-cta-btn:hover { opacity: 0.9; }
@media (max-width: 1024px) {
  .caceo-ag-grid, .caceo-ag-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .caceo-ag-cards { grid-template-columns: 1fr; }
  .caceo-ag-grid, .caceo-ag-grid--4 { grid-template-columns: 1fr; }
  /* Old site uses px-4 (1rem) gutters at mobile; keep bands aligned with
     the CTA's --container-px gutter. */
  .caceo-ag-section { padding-inline: var(--container-px, 1rem); }
}
/* External / Host Training — submission form (Embed block, caceo-xt-*) */
.caceo-xt-h2 { font-family: var(--font-display, var(--font-primary)); font-size: 1.25rem; font-weight: 700; color: var(--color-secondary); margin: 0 0 0.25rem; }
.caceo-xt-note { font-size: 0.875rem; color: var(--color-textSecondary); margin: 0 0 1.5rem; }
.caceo-xt-req { color: var(--color-accent); }
.caceo-xt-card { background-color: rgba(226, 232, 240, 0.2); border: 1px solid var(--color-border); border-radius: 1rem; padding: 1.5rem; margin-bottom: 1.5rem; position: relative; }
.caceo-xt-eyebrow { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-textSecondary); margin: 0 0 1.25rem; }
.caceo-xt-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.caceo-xt-field { margin-bottom: 1.25rem; }
.caceo-xt-2col .caceo-xt-field { margin-bottom: 0; }
.caceo-xt-field label { display: block; font-size: 0.875rem; font-weight: 500; color: var(--color-secondary); margin-bottom: 0.375rem; }
.caceo-xt-field input, .caceo-xt-field textarea { width: 100%; padding: 0.625rem 1rem; border-radius: 0.75rem; border: 1px solid var(--color-border); background-color: var(--color-background); font-size: 0.875rem; color: var(--color-text); font-family: inherit; box-sizing: border-box; }
.caceo-xt-field input:focus, .caceo-xt-field textarea:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 2px rgba(3, 76, 140, 0.3); }
.caceo-xt-field textarea { resize: none; }
.caceo-xt-error { font-size: 0.875rem; color: #dc2626; background-color: #fef2f2; border: 1px solid #fecaca; border-radius: 0.75rem; padding: 0.75rem 1rem; margin: 0 0 1.5rem; }
.caceo-xt-submit { display: inline-flex; align-items: center; gap: 0.5rem; background-color: var(--color-accent); color: #fff; font-weight: 600; font-size: 1rem; height: 3rem; padding: 0 2rem; border: none; border-radius: 0.75rem; cursor: pointer; transition: opacity 0.15s ease; font-family: inherit; }
.caceo-xt-submit:hover { opacity: 0.9; }
.caceo-xt-submit:disabled { opacity: 0.6; cursor: default; }
.caceo-xt-success { text-align: center; padding: 5rem 2rem; background-color: rgba(226, 232, 240, 0.3); border: 1px solid var(--color-border); border-radius: 1.5rem; }
.caceo-xt-success-icon { height: 4rem; width: 4rem; border-radius: 9999px; background-color: #dcfce7; color: #16a34a; display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem; }
.caceo-xt-success h2 { font-family: var(--font-display, var(--font-primary)); font-size: 1.5rem; font-weight: 700; color: var(--color-secondary); margin: 0 0 0.5rem; }
.caceo-xt-success p { color: var(--color-textSecondary); max-width: 24rem; margin: 0 auto 1.5rem; }
.caceo-xt-again { background-color: transparent; border: 1px solid var(--color-border); border-radius: 0.75rem; padding: 0.625rem 1.25rem; font-weight: 500; font-size: 0.875rem; color: var(--color-secondary); cursor: pointer; font-family: inherit; }
.caceo-xt-again:hover { background-color: rgba(226, 232, 240, 0.4); }
.caceo-xt-sublabel { color: var(--color-textSecondary); font-weight: 400; }
.caceo-xt-pills { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.caceo-xt-pill { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; border-radius: 0.75rem; border: 1px solid var(--color-border); font-size: 0.875rem; color: var(--color-textSecondary); cursor: pointer; transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease; font-weight: 400; margin-bottom: 0; }
.caceo-xt-pill:hover { background-color: rgba(226, 232, 240, 0.5); }
.caceo-xt-pill input { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.caceo-xt-pill:has(input:checked) { background-color: rgba(3, 76, 140, 0.1); border-color: rgba(3, 76, 140, 0.4); color: var(--color-primary); font-weight: 500; }
.caceo-xt-pillgroup label:first-child { margin-bottom: 0.5rem; }
@media (max-width: 1023px) {
}
@media (max-width: 639px) {
  .caceo-xt-2col { grid-template-columns: 1fr; gap: 0; }
  .caceo-xt-2col .caceo-xt-field { margin-bottom: 1.25rem; }
}

/* Job Board — Post a Job CTA band (Embed block on /job-board) */
/* Post-a-Job band — native Card (variant caceo-jb-cta, icon-horizontal).
   Values = old .caceo-jb-cta band. Renderer nests the button inside the
   text column, so it is absolutely positioned right-center to reproduce
   the old space-between row; 1232px = old wrap 1280px minus 2x1.5rem
   side padding. */
.puck-card--caceo-jb-cta {
  position: relative;
  max-width: 1232px !important;
  margin-inline: auto;
  margin-bottom: 4rem;
  background: rgba(3, 76, 140, 0.05);
  border: 1px solid rgba(3, 76, 140, 0.15);
  border-radius: 1rem;
  padding: 2rem 12rem 2rem 2rem; /* right gap reserves the button zone */
  gap: 1rem !important;
  box-shadow: none;
}
.puck-card--caceo-jb-cta > .material-symbols-outlined {
  font-size: 0;
  width: 3rem;
  height: 3rem;
  border-radius: 1rem;
  background-color: rgba(3, 76, 140, 0.1);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23034C8C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='8' x2='12' y2='16'/%3E%3Cline x1='8' y1='12' x2='16' y2='12'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}
.puck-card--caceo-jb-cta .puck-card-title {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--caceo-secondary);
  margin: 0 0 0.25rem;
  letter-spacing: normal;
}
.puck-card--caceo-jb-cta .puck-card-description {
  font-size: 0.875rem;
  color: var(--color-textSecondary);
  margin: 0;
}
.puck-card--caceo-jb-cta .puck-card-button {
  position: absolute;
  right: 2rem;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex !important;
  align-items: center;
  gap: 0.5rem;
  background: var(--caceo-primary) !important;
  color: #fff !important;
  font-weight: 600;
  font-size: 1rem;
  padding: 0.75rem 1.5rem;
  border: none !important;
  border-radius: 0.75rem;
  min-height: 0;
  line-height: 1.625;
  text-decoration: none;
  transition: opacity 0.15s ease;
}
.puck-card--caceo-jb-cta .puck-card-button::before {
  content: "";
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='8' x2='12' y2='16'/%3E%3Cline x1='8' y1='12' x2='16' y2='12'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}
.puck-card--caceo-jb-cta .puck-card-button:hover { opacity: 0.9; }
@media (max-width: 767px) {
  .puck-card--caceo-jb-cta { padding: 2rem; }
  .puck-card--caceo-jb-cta .puck-card-button {
    position: static;
    transform: none;
    margin-top: 1rem;
  }
}
/* Native JobBoard block: cap width like the old site's container */
#puck-content .recur-job-board { max-width: 1280px; margin-left: auto; margin-right: auto; padding: 0 var(--container-px, 1.5rem); }

/* Embed wrapper on /agencies spans full width; kill the default 1.5rem margins */
#puck-content .puck-embed, #puck-content [data-puck-component="Embed"] { margin: 0; }

/* Custom content / iframe / embed */
.puck-custom-content,
.puck-dropbox-embed {
  overflow: hidden;
  border-radius: var(--radius-lg);
}

/* 23. SECTION SPACING (applied to .puck-section or plain section elements)
   ------------------------------------------------------------ */
section,
.puck-section {
  padding-top: var(--section-py);
  padding-bottom: var(--section-py);
}

/* When sections have no padding (flush hero) */
.puck-hero {
  padding: 0; /* override section padding for heroes — hero-content has its own */
}

/* 24. RESPONSIVE BREAKPOINTS
   Mirrors the original site's breakpoints (Tailwind defaults: md=768, sm=640)
   ------------------------------------------------------------ */
@media (max-width: 1024px) {
  .puck-grid[data-cols="4"],
  .puck-grid[data-cols="3"] {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  :root {
    --section-py: 2.5rem;
    --container-px: 1rem;
    --heading-h1-size: 1.875rem;
    --heading-h2-size: 1.5rem;
    --heading-h3-size: 1.25rem;
  }

  h1 { font-size: 1.875rem; }
  h2 { font-size: 1.5rem; }
  h3 { font-size: 1.25rem; }

  .puck-hero-content {
    padding: 3.5rem var(--container-px);
  }

  .puck-cta-title { font-size: 1.5rem; }
  .puck-stat-value { font-size: 2rem; }

  .puck-grid[data-cols="4"],
  .puck-grid[data-cols="3"],
  .puck-grid[data-cols="2"] {
    grid-template-columns: 1fr;
  }

  .recur-event-list-grid,
  .recur-product-list-grid,
  .recur-blog-list-grid {
    grid-template-columns: 1fr;
  }

  .puck-cta-buttons {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 640px) {
  :root {
    --section-py: 2rem;
  }

  .puck-hero-title { font-size: 1.75rem; }
  .puck-hero-subtitle { font-size: 1rem; }

  .puck-cta-primary,
  .puck-cta-secondary {
    width: 100%;
    justify-content: center;
  }
}

/* 25. SITE HEADER
   Source: artifacts/web/src/components/Navbar.tsx
   Class contract discovered from caceo.getrecur.org rendered HTML.
   ------------------------------------------------------------ */

/* — Header bar — */
.site-header {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background-color: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-bottom: 1px solid var(--color-border);
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

/* — Grid container — */
.header-grid {
  max-width: 1280px;   /* max-w-7xl */
  margin: 0 auto;
  padding: 0 2rem;     /* lg:px-8 */
}

.header-grid-row {
  display: flex;
  align-items: center;
  height: 7rem;        /* h-28 = 112px */
  gap: 2rem;
}

/* Left zone (logo) */
.header-grid-zone:first-child {
  flex-shrink: 0;
}

/* Center zone (nav) */
.header-grid-zone--center {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Right zone (CTA buttons) */
.header-grid-zone:last-child {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* — Logo — */
.header-custom-section {
  display: flex;
  align-items: center;
}

.header-logo-link {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.header-logo-link:hover {
  opacity: 1;
  text-decoration: none;
}

.header-logo {
  height: 5rem;        /* h-20 = 80px */
  width: auto;
  max-height: 80px;
  object-fit: contain;
  display: block;
}

/* "CACEO" wordmark next to the logo (old site shows logo + wordmark) */
.header-logo-link::after {
  content: "CACEO";
  font-family: var(--font-secondary, var(--font-primary));
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--caceo-primary);
  margin-left: 0.75rem;
  line-height: 1;
}

/* — Desktop nav — */
.desktop-nav.header-nav {
  display: flex;
  align-items: center;
}

.nav-menu {
  display: flex;
  align-items: center;
  gap: 2rem;           /* space-x-8 */
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Nav top-level links / buttons */
.nav-menu > li {
  position: relative;
}

.nav-menu > li > a,
.nav-menu > li > span,
.nav-menu > li > button {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text);
  text-decoration: none;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s ease;
}

.nav-menu > li > a:hover,
.nav-menu > li > span:hover,
.nav-menu > li > button:hover {
  color: var(--caceo-primary);
  text-decoration: none;
  opacity: 1;
}

/* Top-level nav item with dropdown */
.nav-item-dropdown {
  position: relative;
}

/* Top-level dropdown trigger link */
.nav-link-dropdown {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  transition: color 0.15s ease;
}

.nav-link-dropdown:hover {
  color: var(--caceo-primary);
  text-decoration: none;
  opacity: 1;
}

/* Dropdown arrow chevron — the markup emits a "▼" glyph; the old site uses
   a thin outline chevron, so hide the glyph and draw one with borders. */
.dropdown-arrow {
  font-size: 0;
  line-height: 1;
  color: var(--color-textSecondary);
  display: inline-block;
  position: relative;
  width: 0.7rem;
  height: 0.7rem;
  transition: transform 0.2s ease;
}
.dropdown-arrow::after {
  content: "";
  position: absolute;
  left: 0.12rem;
  top: 0.08rem;
  width: 0.34rem;
  height: 0.34rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
}

.nav-item-dropdown:hover .dropdown-arrow,
.nav-item-dropdown.open .dropdown-arrow {
  transform: rotate(180deg);
  color: var(--caceo-primary);
}

/* Dropdown panel — hidden by default, shown on hover / JS-open class */
.nav-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  z-index: 60;
  min-width: 18rem;    /* w-72 = 288px */
  background-color: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: 0.75rem;  /* rounded-xl */
  box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1);
  padding: 0.375rem;   /* p-1.5 */
  overflow: hidden;
  list-style: none;
  margin: 0;
}

/* Show on hover or JS-toggled open */
.nav-item-dropdown:hover .nav-dropdown,
.nav-item-dropdown.open .nav-dropdown,
.nav-item-dropdown[data-open="true"] .nav-dropdown {
  display: block;
}

/* Items inside the dropdown panel */
.nav-dropdown li {
  list-style: none;
}

.nav-dropdown .nav-link {
  display: block;
  padding: 0.625rem 0.75rem;  /* px-3 py-2.5 */
  border-radius: 0.5rem;      /* rounded-lg */
  font-size: 0.875rem;         /* text-sm */
  font-weight: 500;
  color: var(--caceo-secondary);
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.nav-dropdown .nav-link:hover {
  background-color: rgba(241, 245, 249, 0.70);  /* hover:bg-muted/70 */
  color: var(--caceo-primary);
  text-decoration: none;
  opacity: 1;
}

/* Regular (non-dropdown) top-level nav link */
.nav-menu > li > .nav-link {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text);
  text-decoration: none;
  transition: color 0.15s ease;
  white-space: nowrap;
}

.nav-menu > li > .nav-link:hover {
  color: var(--caceo-primary);
  text-decoration: none;
  opacity: 1;
}

/* — Mobile menu toggle (hamburger) — */
.mobile-menu-toggle {
  display: none;
  background: none;
  border: none;
  padding: 0.5rem;
  cursor: pointer;
  color: var(--color-text);
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  transition: color 0.15s ease, background-color 0.15s ease;
}

.mobile-menu-toggle:hover {
  color: var(--caceo-primary);
  background-color: var(--color-muted);
}

/* — CTA buttons in right zone — */
.desktop-nav.header-cta {
  display: flex;
  align-items: center;
}

/* Base CTA anchor */
.header-cta-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1rem;
  min-height: 2.25rem;
  font-family: var(--font-primary);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1;
  border-radius: var(--radius);
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, opacity 0.15s ease;
  /* Fallback: outline style */
  background-color: transparent;
  border: 1px solid rgba(2, 48, 89, 0.30);
  color: var(--caceo-secondary);
}

.header-cta-button:hover {
  text-decoration: none;
  opacity: 1;
}

/* "Member Login" — outline (href targets member.getrecur.com) */
.header-cta-button[href*="member.getrecur"] {
  background-color: transparent;
  border: 1px solid rgba(2, 48, 89, 0.30);
  color: var(--caceo-secondary);
}

.header-cta-button[href*="member.getrecur"]:hover {
  background-color: rgba(2, 48, 89, 0.05);
}

/* "Join CACEO" — accent filled (href="/join") */
.header-cta-button[href="/join"] {
  background-color: var(--caceo-accent);
  border: 1px solid var(--caceo-accent-border);
  color: var(--caceo-accent-fg);
}

.header-cta-button[href="/join"]:hover {
  background-color: rgba(191, 10, 48, 0.90);
}

/* — Mobile nav drawer — */
.mobile-nav {
  display: none;
  position: sticky;
  top: 7rem;
  left: 0;
  right: 0;
  z-index: 49;
  background-color: #ffffff;
  border-bottom: 1px solid var(--color-border);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  padding: 0 1rem 1rem;
}

/* Shown when Recur JS adds open/active class */
.mobile-nav.open,
.mobile-nav.active,
.mobile-nav[aria-hidden="false"] {
  display: block;
}

.mobile-nav-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 0.5rem;
}

.mobile-nav-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--caceo-secondary);
  line-height: 1.3;
}

.mobile-nav-close {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 0.375rem;
  cursor: pointer;
  color: var(--color-textSecondary);
  border-radius: var(--radius);
  transition: color 0.15s ease, background-color 0.15s ease;
  flex-shrink: 0;
}

.mobile-nav-close:hover {
  color: var(--color-text);
  background-color: var(--color-muted);
}

/* Mobile nav list */
.mobile-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mobile-nav ul li a,
.mobile-nav ul li button,
.mobile-nav ul li span {
  display: block;
  padding: 0.75rem;
  font-size: 1rem;
  font-weight: 500;
  color: var(--color-text);
  text-decoration: none;
  border-radius: var(--radius);
  transition: color 0.15s ease, background-color 0.15s ease;
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
}

.mobile-nav ul li a:hover,
.mobile-nav ul li button:hover,
.mobile-nav ul li span:hover {
  color: var(--caceo-primary);
  background-color: var(--color-muted);
  text-decoration: none;
  opacity: 1;
}

/* Mobile sub-items (nested) — generic ul ul and Recur's mobile-nav-sub class */
.mobile-nav ul ul,
.mobile-nav-sub {
  list-style: none;
  padding: 0.25rem 0 0.5rem 0.75rem;
  border-left: 2px solid rgba(3, 76, 140, 0.20);
  margin: 0 0 0.5rem 0.75rem;
}

.mobile-nav ul ul li a,
.mobile-nav ul ul li button,
.mobile-nav-sub li a,
.mobile-nav-sub li button {
  display: block;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-textSecondary);
  text-decoration: none;
  border-radius: var(--radius);
  transition: color 0.15s ease, background-color 0.15s ease;
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
}

.mobile-nav ul ul li a:hover,
.mobile-nav ul ul li button:hover,
.mobile-nav-sub li a:hover,
.mobile-nav-sub li button:hover {
  color: var(--caceo-primary);
  background-color: var(--color-muted);
  text-decoration: none;
  opacity: 1;
}

/* 26. HEADER RESPONSIVE
   md breakpoint = 768px: collapse to mobile layout
   ------------------------------------------------------------ */
@media (max-width: 767px) {
  .header-grid {
    padding: 0 1rem;   /* px-4 */
  }

  .header-grid-row {
    height: 4.5rem;    /* shorter on mobile */
    gap: 0.5rem;
  }

  .header-logo {
    height: 3rem;
    max-height: 48px;
  }

  /* Hide desktop nav and CTA buttons */
  .header-grid-zone--center .desktop-nav.header-nav {
    display: none;
  }

  .header-grid-zone:last-child .desktop-nav.header-cta {
    display: none;
  }

  /* Show hamburger */
  .mobile-menu-toggle {
    display: flex;
  }
}

@media (min-width: 768px) {
  /* Ensure mobile nav is always hidden on desktop */
  .mobile-nav {
    display: none !important;
  }
}

/* 27. SITE FOOTER
   Source: artifacts/web/src/components/Footer.tsx
   Class contract discovered from caceo.getrecur.org rendered HTML.
   Color values:
     bg-secondary   = #023059 (dark navy)
     text-blue-100  = #dbeafe (Tailwind blue-100)
     text-blue-200  = #bfdbfe (Tailwind blue-200)
     text-blue-300  = #93c5fd (Tailwind blue-300)
     text-accent    = #BF0A30 (Colorado red)
   ------------------------------------------------------------ */

/* — Footer wrapper — */
.site-footer {
  background-color: #023059;            /* bg-secondary */
  color: #dbeafe;                       /* text-blue-100 */
  padding-top: 4rem;                    /* pt-16 */
  padding-bottom: 2rem;                 /* pb-8 */
  border-top: 1px solid rgba(3, 76, 140, 0.20);  /* border-primary/20 */
  font-family: var(--font-primary);
}

/* Override any global link color so footer links inherit correctly */
.site-footer a {
  color: inherit;
  text-decoration: none;
}

/* — Content area: max-width container — */
.site-footer-content {
  max-width: 1280px;             /* max-w-7xl */
  margin: 0 auto;
  padding: 0 2rem;               /* px-8 — lg:px-8 */
  display: grid;
  grid-template-columns: repeat(4, 1fr);  /* md:grid-cols-4 */
  gap: 3rem;                     /* gap-12 */
  margin-bottom: 3rem;           /* mb-12 */
}

/* — Brand section (first child) spans 2 of 4 columns — */
.site-footer-section:first-child {
  grid-column: span 2;
}

/* — Section headings — */
.site-footer-title {
  color: #ffffff;
  font-family: var(--font-secondary);    /* font-display */
  font-weight: 700;
  font-size: 1rem;
  margin-bottom: 1rem;           /* mb-4 */
  margin-top: 0;
}

/* Hide the auto-generated heading on the brand column
   (original footer has no visible heading for the brand block) */
.site-footer-section:first-child .site-footer-title {
  display: none;
}

/* — Site-info section: logo — */
.site-footer-logo {
  height: 4rem;                  /* h-16 = 64px */
  width: auto;
  max-height: 64px;
  object-fit: contain;
  display: block;
  margin-bottom: 1.5rem;         /* mb-6 */
}

/* — Site-info section: description text — */
.site-footer-text {
  color: rgba(191, 219, 254, 0.80);  /* text-blue-200/80 */
  max-width: 24rem;              /* max-w-sm ≈ 384px */
  margin-bottom: 1.5rem;         /* mb-6 */
  font-size: 0.875rem;
  line-height: 1.6;
}

/* — Quick Links list — */
.site-footer-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;                  /* space-y-3 */
}

.site-footer-links li a {
  color: #dbeafe;                /* text-blue-100 */
  font-size: 0.875rem;
  text-decoration: none;
  transition: color 0.15s ease;
  display: inline-block;
}

.site-footer-links li a:hover {
  color: #ffffff;                /* hover:text-white */
  opacity: 1;
  text-decoration: none;
}

/* — Custom section wrapper — */
.site-footer-custom {
  display: block;
}

/* — Contact list (inside custom section) — */
.footer-contact-list {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;                  /* space-y-5 */
}

.footer-contact-item {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;                   /* gap-2 */
}

.footer-contact-icon {
  flex-shrink: 0;
  margin-top: 0.125rem;          /* mt-0.5 */
  color: #BF0A30;                /* text-accent */
  stroke: #BF0A30;
  width: 1rem;
  height: 1rem;
}

.footer-contact-label {
  font-size: 0.75rem;            /* text-xs */
  color: rgba(147, 197, 253, 0.70);  /* text-blue-300/70 */
  margin: 0 0 0.125rem 0;        /* mb-0.5 */
  line-height: 1.4;
}

.footer-contact-link {
  color: #dbeafe;                /* text-blue-100 */
  font-size: 0.875rem;           /* text-sm */
  text-decoration: none;
  transition: color 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.footer-contact-link:hover {
  color: #ffffff;
  opacity: 1;
  text-decoration: none;
}

/* — Bottom bar — */
.footer-bottom-bar {
  max-width: 1280px;
  margin: 0 auto;
  padding: 2rem 2rem 0;          /* pt-8, px-8 */
  border-top: 1px solid rgba(255, 255, 255, 0.10);  /* border-white/10 */
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  font-size: 0.875rem;           /* text-sm */
}

.footer-bottom-bar-copy {
  color: rgba(191, 219, 254, 0.60);  /* text-blue-200/60 */
}

.footer-bottom-bar-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;                   /* gap-2 */
  color: rgba(191, 219, 254, 0.60);  /* text-blue-200/60 */
  text-decoration: none;
  transition: color 0.15s ease;
}

.footer-bottom-bar-link:hover {
  color: #dbeafe;                /* hover:text-blue-100 */
  opacity: 1;
  text-decoration: none;
}

/* Recur SVG logo in footer bottom bar */
.footer-bottom-bar-link svg {
  height: 1.25rem;               /* h-5 = 20px */
  width: auto;
  opacity: 0.70;
  display: inline-block;
  vertical-align: middle;
}

/* 28. FOOTER RESPONSIVE
   Below md (768px): single column, bottom bar stacks
   ------------------------------------------------------------ */
@media (max-width: 767px) {
  .site-footer-content {
    grid-template-columns: 1fr;  /* single column */
    gap: 2rem;
    padding: 0 1rem;
    margin-bottom: 2rem;
  }

  /* Brand no longer needs to span 2 cols on mobile */
  .site-footer-section:first-child {
    grid-column: span 1;
  }

  /* Show brand heading on mobile (for visual hierarchy) */
  .site-footer-section:first-child .site-footer-title {
    display: block;
  }

  .site-footer-text {
    max-width: 100%;
  }

  .footer-bottom-bar {
    flex-direction: column;      /* stacks on mobile */
    align-items: center;
    text-align: center;
    padding: 1.5rem 1rem 0;
    gap: 1rem;
  }
}

@media (max-width: 640px) {
  .site-footer {
    padding-top: 3rem;
    padding-bottom: 1.5rem;
  }
}

/* ═══════════════════════════════════════════════════════════════
   ABOUT PAGE — custom HTML block classes
   Used inside puck-text rich-text blocks on the /about page
═══════════════════════════════════════════════════════════════ */

/* Mission callout box */
.caceo-mission-box {
  margin-top: 2rem;
  background: rgba(3, 76, 140, 0.05);
  border: 1px solid rgba(3, 76, 140, 0.15);
  border-radius: 1rem;
  padding: 1.75rem 2rem;
}
.caceo-mission-box h3 {
  font-family: 'Outfit', sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--caceo-secondary);
  margin-top: 0;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.caceo-mission-box h3 svg {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--caceo-primary);
  flex-shrink: 0;
}
.caceo-mission-box p {
  color: var(--caceo-muted);
  line-height: 1.65;
  margin-bottom: 0;
}

/* Geographic reach box */
.caceo-geo-box {
  margin-top: 1rem;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 1rem;
  padding: 1.25rem 1.5rem;
  box-shadow: 0 1px 3px rgba(2, 48, 89, 0.06);
}
.caceo-geo-box h3 {
  font-family: 'Outfit', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--caceo-secondary);
  margin-top: 0;
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.caceo-geo-box h3 svg {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--caceo-accent);
  flex-shrink: 0;
}

/* About page 2-col (Embed-about-us / Embed-about-side) */
.caceo-ab-h2 {
  font-size: 1.875rem;
  color: var(--caceo-secondary);
  margin-bottom: 1.5rem;
}
.caceo-ab-p {
  color: var(--color-textSecondary);
  line-height: 1.7;
  margin-bottom: 1.25rem;
}
.caceo-ab-photo {
  width: 100%;
  height: 16rem;
  object-fit: cover;
  border-radius: 1rem;
  box-shadow: var(--shadow-md);
  margin-bottom: 1.5rem;
  display: block;
}
.caceo-ab-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.caceo-ab-stat {
  background-color: rgba(241, 245, 249, 0.4);
  border: 1px solid rgba(226, 232, 240, 0.5);
  border-radius: 0.75rem;
  padding: 1rem;
  text-align: center;
}
.caceo-ab-stat-val {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--caceo-primary);
}
.caceo-ab-stat-label {
  font-size: 0.75rem;
  color: var(--color-textSecondary);
  margin-top: 0.25rem;
}

/* Strip the renderer's white card treatment from grid columns whose content
   brings its own styling (about 2-col, home membership grid). */
#puck-content > .puck-grid > .puck-grid-column:has(.caceo-ab-left),
#puck-content > .puck-grid > .puck-grid-column:has(.caceo-ab-right),
#puck-content > .puck-grid > .puck-grid-column:has(.puck-card--caceo-benefits),
#puck-content > .puck-grid > .puck-grid-column:has(.puck-card--caceo-pricing) {
  padding: 0;
  background-color: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
}

/* Board page: officers section renders on a white full-bleed band on the
   old site (board members stay on the page background). Blocks 2-3 are
   the Officers header + grid. Scoped via the .caceo-board-grid hook. */
#puck-content:has(.puck-card--caceo-member-blue) > :nth-child(2),
#puck-content:has(.puck-card--caceo-member-blue) > :nth-child(3) {
  background-color: #ffffff;
  max-width: none;
  margin-inline: -2rem;
  margin-block: 0 !important;
  padding-inline: max(2rem, calc((100% - var(--container-max-width)) / 2));
}
#puck-content:has(.puck-card--caceo-member-blue) > :nth-child(2) {
  padding-top: 4rem;
}
#puck-content:has(.puck-card--caceo-member-blue) > :nth-child(3) {
  padding-bottom: 5rem;
}
#puck-content:has(.puck-card--caceo-member-blue) > :nth-child(4) {
  margin-top: 3rem;
}

/* About/Board bottom CTA: the SPA renders
   it as a light gray band with a navy heading, muted copy, and red primary
   + outline secondary buttons — not the default navy CTA band. Scoped to
   each page via a page-unique class hook. */
#puck-content:has(.puck-card--caceo-geo) > .puck-cta,
#puck-content:has(.puck-card--caceo-member-blue) > .puck-cta {
  background: #eef2f7 !important;
  background-image: none !important;
  border-top: 1px solid #e2e8f0;
  text-align: center;
  padding-block: 4rem;
}
#puck-content:has(.puck-card--caceo-geo) > .puck-cta .puck-cta-title,
#puck-content:has(.puck-card--caceo-member-blue) > .puck-cta .puck-cta-title {
  color: var(--caceo-secondary) !important;
  font-size: 1.875rem;
}
#puck-content:has(.puck-card--caceo-geo) > .puck-cta .puck-cta-description,
#puck-content:has(.puck-card--caceo-member-blue) > .puck-cta .puck-cta-description {
  color: var(--color-textSecondary) !important;
  max-width: 48rem;
  margin-inline: auto;
}
#puck-content:has(.puck-card--caceo-geo) > .puck-cta .puck-cta-buttons,
#puck-content:has(.puck-card--caceo-member-blue) > .puck-cta .puck-cta-buttons {
  justify-content: center;
}
#puck-content:has(.puck-card--caceo-geo) > .puck-cta .puck-cta-secondary,
#puck-content:has(.puck-card--caceo-member-blue) > .puck-cta .puck-cta-secondary {
  color: var(--caceo-secondary) !important;
  border: 1px solid rgba(2, 48, 89, 0.3) !important;
  background: transparent;
}
#puck-content:has(.puck-card--caceo-geo) > .puck-cta .puck-cta-secondary:hover,
#puck-content:has(.puck-card--caceo-member-blue) > .puck-cta .puck-cta-secondary:hover {
  background: rgba(2, 48, 89, 0.05);
}

/* Interior heroes (not followed by a CTA band): SPA renders a navy band —
   bg-secondary with the photo at 20% opacity under a secondary/80 overlay.
   Approximate with a heavy navy tint over the background image. */
.puck-hero:not(:has(+ .puck-cta)) {
  position: relative;
}
.puck-hero:not(:has(+ .puck-cta))::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(2, 48, 89, 0.87);
  pointer-events: none;
}
.puck-hero:not(:has(+ .puck-cta)) .puck-hero-content {
  position: relative;
  z-index: 1;
}
.caceo-geo-box p {
  font-size: 0.875rem;
  color: var(--caceo-muted);
  line-height: 1.6;
  margin-bottom: 0;
}

/* History timeline */
.caceo-timeline {
  position: relative;
  max-width: 720px;
  margin: 0 auto;
  padding-left: 1.5rem;
}
.caceo-timeline::before {
  content: "";
  position: absolute;
  left: 1.375rem;
  top: 0;
  bottom: 0;
  width: 1px;
  background: #e2e8f0;
}
.caceo-timeline-item {
  position: relative;
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
  padding-bottom: 2rem;
  padding-left: 3rem;
}
.caceo-timeline-badge {
  position: absolute;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 2.75rem;
  width: 2.75rem;
  border-radius: 50%;
  background: var(--caceo-primary);
  color: #ffffff;
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 0.75rem;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(3, 76, 140, 0.25);
}
.caceo-timeline-card {
  flex: 1;
  background: #ffffff;
  border: 1px solid rgba(226, 232, 240, 0.7);
  border-radius: 0.75rem;
  padding: 1.125rem 1.375rem;
  box-shadow: 0 1px 3px rgba(2, 48, 89, 0.06);
}
.caceo-timeline-year {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--caceo-primary);
  margin-bottom: 0.35rem;
}
.caceo-timeline-card p {
  font-size: 0.875rem;
  color: var(--caceo-muted);
  line-height: 1.6;
  margin: 0;
}

@media (max-width: 640px) {
  .caceo-timeline {
    padding-left: 0.75rem;
  }
  .caceo-timeline::before {
    left: 0.875rem;
  }
  .caceo-timeline-item {
    padding-left: 2.5rem;
  }
  .caceo-timeline-badge {
    height: 2.25rem;
    width: 2.25rem;
    font-size: 0.65rem;
  }
}

/* ═══════════════════════════════════════════════════════════════
   CONTACT PAGE — sidebar link styles
   Native Cards on /contact (post raw-HTML conversion)
═══════════════════════════════════════════════════════════════ */

/* Sidebar — native Cards (variants caceo-ct-*). Values = old
   .caceo-sidebar-card / .caceo-contact-*-link rules. */
#puck-content > .puck-grid > .puck-grid-column:has(.puck-card--caceo-ct-touch) {
  min-height: 0;
  background: none;
  border: none;
  box-shadow: none;
  border-radius: 0;
  padding: 8px; /* keep the renderer's column padding — the old Text
                   carrier sat inside it, so card geometry depends on it */
  display: flex;
  flex-direction: column;
  gap: 1.25rem !important;
}
.puck-card--caceo-ct-touch,
.puck-card--caceo-ct-member,
.puck-card--caceo-ct-training {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 1rem;
  padding: 1.375rem 1.5rem !important;
  box-shadow: 0 1px 3px rgba(2, 48, 89, 0.05);
  text-align: left !important; /* minimal layout centers via inline style */
}
.puck-card--caceo-ct-touch {
  background: rgba(3, 76, 140, 0.04);
  border-color: rgba(3, 76, 140, 0.15);
}
.puck-card--caceo-ct-touch .puck-card-title,
.puck-card--caceo-ct-member .puck-card-title,
.puck-card--caceo-ct-training .puck-card-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--caceo-secondary);
  margin: 0 0 0.875rem;
  letter-spacing: normal;
}
/* "Get in Touch" heading carries a 16px mail icon (old heading svg) */
.puck-card--caceo-ct-touch .puck-card-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}
.puck-card--caceo-ct-touch .puck-card-title::before {
  content: "";
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23034C8C' stroke-width='2'%3E%3Cpath d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'/%3E%3Cpolyline points='22,6 12,13 2,6'/%3E%3C/svg%3E") center no-repeat;
}
.puck-card--caceo-ct-touch .puck-card-description,
.puck-card--caceo-ct-member .puck-card-description,
.puck-card--caceo-ct-training .puck-card-description {
  font-size: 0.8125rem;
  color: #64748b;
  line-height: 1.6;
  margin: 0 0 1rem;
}
/* Meta rows: strip renderer chrome/padding */
.puck-card--caceo-ct-touch .puck-card-meta,
.puck-card--caceo-ct-member .puck-card-meta,
.puck-card--caceo-ct-training .puck-card-meta {
  list-style: none;
  margin: 0 !important;
  padding: 0 !important;
  border: none;
  gap: 0 !important;
}
.puck-card--caceo-ct-touch .puck-card-meta-row,
.puck-card--caceo-ct-member .puck-card-meta-row,
.puck-card--caceo-ct-training .puck-card-meta-row {
  padding: 0 !important;
  margin: 0 !important;
  border: none;
  line-height: 1.75; /* matches the old anchor's line box (body 1.625 + inline-flex baseline) */
}
/* Email link (old .caceo-contact-email-link) — 14px mail icon + text */
.puck-card--caceo-ct-touch .puck-card-meta-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--caceo-primary) !important;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.15s;
}
.puck-card--caceo-ct-touch .puck-card-meta-link::before {
  content: "";
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23034C8C' stroke-width='2'%3E%3Cpath d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'/%3E%3Cpolyline points='22,6 12,13 2,6'/%3E%3C/svg%3E") center no-repeat;
}
/* Portal link (old .caceo-contact-portal-link) */
.puck-card--caceo-ct-member .puck-card-meta-link {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--caceo-primary) !important;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.15s;
}
/* Training card: link flows inline at the end of the sentence, with the
   closing period painted after it (old inline mailto link). */
.puck-card--caceo-ct-training .puck-card-description {
  display: inline;
  margin: 0;
}
.puck-card--caceo-ct-training .puck-card-meta,
.puck-card--caceo-ct-training .puck-card-meta-row {
  display: inline;
}
.puck-card--caceo-ct-training .puck-card-meta-link {
  font-size: 0.8125rem;
  color: var(--caceo-primary) !important;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.15s;
}
.puck-card--caceo-ct-training .puck-card-meta-row::after {
  content: ".";
  font-size: 0.8125rem;
  color: #64748b;
}
.puck-card--caceo-ct-touch .puck-card-meta-link:hover,
.puck-card--caceo-ct-member .puck-card-meta-link:hover,
.puck-card--caceo-ct-training .puck-card-meta-link:hover {
  color: rgba(3, 76, 140, 0.75) !important;
}

/* ═══════════════════════════════════════════════════════════════
   CERTIFICATION COURSES PAGE — standards list, sidebar cards, schedule
   Used in Text blocks on /certification-courses
═══════════════════════════════════════════════════════════════ */

/* Two-column layout: widen the main col vs. sidebar on desktop */
.puck-grid [class*="grid-col-0"]:has(.puck-card--caceo-std) {
  flex: 2 1 0%;
}
.puck-grid [class*="grid-col-1"]:has(.puck-card--caceo-side-accent) {
  flex: 1 1 0%;
}

/* Standards list */
.caceo-standards-list {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  margin-top: 0.5rem;
}
.caceo-standard-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.125rem 1.25rem;
  background: rgba(241, 245, 249, 0.5);
  border: 1px solid #e2e8f0;
  border-radius: 1rem;
}
.caceo-standard-icon {
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  background: rgba(3, 76, 140, 0.08);
  border-radius: 0.625rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 0.1rem;
}
.caceo-standard-body { flex: 1; min-width: 0; }
.caceo-standard-label {
  font-weight: 600;
  color: var(--caceo-secondary);
  font-size: 0.9rem;
  margin-bottom: 0.2rem;
}
.caceo-standard-desc {
  font-size: 0.8125rem;
  color: #64748b;
  line-height: 1.55;
  margin: 0;
}

/* Certification sidebar */
.caceo-cert-sidebar {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  position: sticky;
  top: 7rem; /* clear the fixed header */
}
.caceo-sidebar-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 1rem;
  padding: 1.375rem 1.5rem;
  box-shadow: 0 1px 3px rgba(2, 48, 89, 0.05);
}
.caceo-sidebar-card--accent {
  background: rgba(3, 76, 140, 0.04);
  border-color: rgba(3, 76, 140, 0.15);
}
.caceo-sidebar-heading {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--caceo-secondary);
  margin: 0 0 0.75rem;
  font-family: 'Outfit', sans-serif;
}
.caceo-sidebar-heading-plain {
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--caceo-secondary);
  margin: 0 0 0.875rem;
  font-family: 'Outfit', sans-serif;
}
.caceo-sidebar-body {
  font-size: 0.8125rem;
  color: #64748b;
  line-height: 1.6;
  margin: 0 0 1rem;
}
.caceo-sidebar-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  width: 100%;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 600;
  text-decoration: none !important;
  text-align: center;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  cursor: pointer;
}
.caceo-sidebar-btn--accent {
  background: var(--caceo-accent);
  color: #ffffff !important;
  border: none;
}
.caceo-sidebar-btn--accent:hover { background: rgba(191, 10, 48, 0.85); }
.caceo-sidebar-btn--outline {
  background: transparent;
  color: var(--caceo-secondary) !important;
  border: 1px solid rgba(2, 48, 89, 0.3);
  margin-top: 0.875rem;
}
.caceo-sidebar-btn--outline:hover { background: rgba(2, 48, 89, 0.04); }

/* Certification schedule list (in sidebar card) */
.caceo-schedule-list {
  list-style: none;
  padding: 0;
  margin: 0 0 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.caceo-schedule-item {
  display: flex;
  gap: 0.75rem;
  font-size: 0.8125rem;
}
.caceo-schedule-date {
  flex-shrink: 0;
  font-weight: 700;
  color: var(--caceo-primary);
  width: 5rem;
}
.caceo-schedule-name { color: #64748b; }


@media (max-width: 640px) {
  .caceo-cert-sidebar { position: static; }
  .puck-grid-column:has(> .puck-grid .puck-card--caceo-side-accent) { position: static; }
}

/* ═══════════════════════════════════════════════════════════════
   TRAINING PAGE — resource link list (caceo-training-links)
   Used in Text blocks on /training
═══════════════════════════════════════════════════════════════ */

.caceo-training-links {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 0.5rem;
}

.caceo-training-link {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.125rem 1.375rem;
  background: rgba(241, 245, 249, 0.5);
  border: 1px solid #e2e8f0;
  border-radius: 1rem;
  text-decoration: none !important;
  color: inherit;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.caceo-training-link:hover {
  border-color: rgba(3, 76, 140, 0.3);
  background: rgba(241, 245, 249, 0.9);
  box-shadow: 0 2px 8px rgba(2, 48, 89, 0.06);
  text-decoration: none !important;
}

.caceo-training-link-icon {
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  background: rgba(3, 76, 140, 0.08);
  border-radius: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--caceo-primary);
  transition: transform 0.15s;
}
.caceo-training-link:hover .caceo-training-link-icon {
  transform: scale(1.1);
}

.caceo-training-link-body {
  flex: 1;
  min-width: 0;
}

.caceo-training-link-label {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--caceo-secondary);
  transition: color 0.15s;
  line-height: 1.4;
}
.caceo-training-link:hover .caceo-training-link-label {
  color: var(--caceo-primary);
}

.caceo-training-link-desc {
  font-size: 0.75rem;
  color: #64748b;
  margin: 0.2rem 0 0;
  line-height: 1.55;
}

.caceo-ext-icon {
  display: inline-block;
  vertical-align: middle;
  color: #94a3b8;
  flex-shrink: 0;
}

@media (max-width: 640px) {
  .caceo-training-link {
    padding: 0.875rem 1rem;
    gap: 0.75rem;
  }
  .caceo-training-link-icon {
    width: 2.25rem;
    height: 2.25rem;
  }
}

/* ═══════════════════════════════════════════════════════════════
   AWARD PAGES — custom HTML block classes
   Used in Text blocks on /juan-eagle-award and /rodney-morales-award
═══════════════════════════════════════════════════════════════ */

/* Generic "about" content box (white card with border) */
.caceo-about-box {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 1rem;
  padding: 2rem;
  box-shadow: 0 1px 3px rgba(2, 48, 89, 0.06);
}
.caceo-about-box p {
  color: #64748b;
  line-height: 1.7;
  margin-bottom: 1rem;
}
.caceo-about-box p:last-child { margin-bottom: 0; }
.caceo-about-box strong { color: var(--caceo-secondary); }

/* Memorial / honoree callout box */
.caceo-memorial-box {
  margin-top: 1.25rem;
  background: rgba(3, 76, 140, 0.04);
  border: 1px solid #e2e8f0;
  border-radius: 0.75rem;
  padding: 1.125rem 1.375rem;
}
.caceo-memorial-box p {
  font-size: 0.9rem;
  color: var(--caceo-secondary);
  line-height: 1.65;
  font-weight: 500;
  margin: 0;
}
.caceo-memorial-box strong { color: var(--caceo-secondary); font-weight: 700; }

/* Past recipients list (Juan Eagle) */
.caceo-recipients-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.caceo-recipient-row {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
  background: rgba(241, 245, 249, 0.7);
  border: 1px solid rgba(226, 232, 240, 0.6);
  border-radius: 0.75rem;
  padding: 1rem 1.5rem;
  transition: border-color 0.15s, background 0.15s;
}
.caceo-recipient-row:hover {
  border-color: rgba(3, 76, 140, 0.2);
  background: rgba(241, 245, 249, 0.95);
}
.caceo-recipient-year {
  flex-shrink: 0;
  width: 3.5rem;
  font-family: 'Outfit', sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  color: #94a3b8;
  padding-top: 0.1rem;
}
.caceo-recipient-year--primary { color: var(--caceo-primary); }
.caceo-recipient-detail { flex: 1; }
.caceo-recipient-jurisdiction {
  font-weight: 600;
  color: var(--caceo-secondary);
  margin-bottom: 0.2rem;
  font-size: 0.9375rem;
}
.caceo-recipient-event {
  font-size: 0.8125rem;
  color: #64748b;
  line-height: 1.5;
}

/* Recipient card (Rodney Morales — larger story block) */
.caceo-recipient-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 1rem;
  box-shadow: 0 1px 3px rgba(2, 48, 89, 0.06);
  overflow: hidden;
}
.caceo-recipient-card-header {
  background: var(--caceo-primary);
  padding: 0.75rem 1.5rem;
}
.caceo-recipient-card-year {
  font-family: 'Outfit', sans-serif;
  font-size: 1.125rem;
  font-weight: 700;
  color: #ffffff;
}
.caceo-recipient-card-body {
  padding: 1.5rem 2rem;
}
.caceo-recipient-names {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--caceo-accent);
  background: rgba(191, 10, 48, 0.07);
  border: 1px solid rgba(191, 10, 48, 0.2);
  border-radius: 9999px;
  padding: 0.3rem 1rem;
  margin-bottom: 1rem;
}
.caceo-recipient-card-body p {
  color: #64748b;
  line-height: 1.7;
  margin: 0;
}

@media (max-width: 640px) {
  .caceo-recipient-row {
    padding: 0.875rem 1rem;
    gap: 0.875rem;
  }
  .caceo-recipient-year { width: 2.75rem; font-size: 1rem; }
  .caceo-recipient-card-body { padding: 1.25rem 1.25rem; }
  .caceo-about-box { padding: 1.25rem; }
}

/* ═══════════════════════════════════════════════════════════════
   BOARD PAGE — section headers and people-card grid
   Used inside puck-text rich-text blocks on the /board page
═══════════════════════════════════════════════════════════════ */

/* Section heading + rule stripe (Officers / Board Members) */
.caceo-section-header {
  margin-bottom: 1.5rem;
}
.caceo-section-header h2 {
  font-family: 'Outfit', sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--caceo-secondary);
  margin: 0 0 0.5rem 0;
}
.caceo-section-rule {
  height: 4px;
  width: 3rem;
  border-radius: 9999px;
}
.caceo-section-rule--accent  { background: var(--caceo-accent); }
.caceo-section-rule--primary { background: var(--caceo-primary); }

/* Responsive 5-up card grid */
.caceo-board-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.25rem;
  margin-bottom: 1rem;
}

/* Individual member card */
.caceo-member-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 1rem;
  box-shadow: 0 1px 3px rgba(2, 48, 89, 0.06);
  padding: 1.5rem 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: box-shadow 0.2s, border-color 0.2s;
}
.caceo-member-card:hover {
  box-shadow: 0 4px 12px rgba(2, 48, 89, 0.1);
  border-color: rgba(3, 76, 140, 0.2);
}

/* Avatar circle */
.caceo-member-avatar {
  height: 4rem;
  width: 4rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 1.25rem;
  color: #ffffff;
  margin-bottom: 1rem;
  flex-shrink: 0;
}
/* Avatar color variants matching React avatarColors array */
.av-blue    { background: #034C8C; }
.av-navy    { background: #023059; }
.av-red     { background: #BF0A30; }
.av-blue-lt { background: rgba(3, 76, 140, 0.8); }
.av-navy-lt { background: rgba(2, 48, 89, 0.8); }

/* Name */
.caceo-member-name {
  font-family: 'Outfit', sans-serif;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--caceo-secondary);
  margin: 0 0 0.5rem 0;
  line-height: 1.3;
}

/* Role badge pill */
.caceo-member-role {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--caceo-accent);
  background: rgba(191, 10, 48, 0.08);
  border: 1px solid rgba(191, 10, 48, 0.2);
  border-radius: 9999px;
  padding: 0.2rem 0.75rem;
  margin-bottom: 0.625rem;
  white-space: nowrap;
}

/* Organization line */
.caceo-member-org {
  display: flex;
  align-items: flex-start;
  gap: 0.25rem;
  font-size: 0.75rem;
  color: #64748b;
  line-height: 1.4;
  text-align: center;
}
.caceo-member-org svg {
  flex-shrink: 0;
  margin-top: 0.1rem;
  color: #94a3b8;
}

/* Responsive: collapse to 2-col on tablet, 1-col on mobile */
@media (max-width: 1024px) {
  .caceo-board-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 640px) {
  .caceo-board-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.875rem;
  }
  .caceo-member-card {
    padding: 1.25rem 0.75rem;
  }
  .caceo-member-avatar {
    height: 3rem;
    width: 3rem;
    font-size: 1rem;
  }
}

/* Contact page (scoped via .puck-card--caceo-ct-touch): the old site renders
   the whole content section on a white band and shows a mail-icon chip
   before the hero title. */
main:has(.puck-card--caceo-ct-touch) {
  background-color: #ffffff;
}
main:has(.puck-card--caceo-ct-touch) .puck-hero-title {
  display: flex;
  align-items: center;
  gap: 1rem;
}
main:has(.puck-card--caceo-ct-touch) .puck-hero-title::before {
  content: "";
  width: 3rem;
  height: 3rem;
  border-radius: 1rem;
  flex-shrink: 0;
  background-color: rgba(3, 76, 140, 0.45);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'/%3E%3Cpolyline points='22,6 12,13 2,6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

/* Training page (scoped via .caceo-training-links): white content band,
   book-icon chip on the hero title, full-bleed photo strip, and a light
   left-aligned "Ready to Register?" CTA band like the old site. */
main:has([class*="puck-card--caceo-tlink"]) {
  background-color: #ffffff;
  padding-bottom: 0;
}
main:has([class*="puck-card--caceo-tlink"]) .puck-hero-title {
  display: flex;
  align-items: center;
  gap: 1rem;
}
main:has([class*="puck-card--caceo-tlink"]) .puck-hero-title::before {
  content: "";
  width: 3rem;
  height: 3rem;
  border-radius: 1rem;
  flex-shrink: 0;
  background-color: rgba(3, 76, 140, 0.45);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z'/%3E%3Cpath d='M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}
/* Photo strip: edge-to-edge, no gaps, no card treatment, no rounding */
#puck-content:has([class*="puck-card--caceo-tlink"]) > .puck-grid:has(img) {
  max-width: none;
  margin-inline: -2rem;
  margin-block: 0 !important;
  gap: 0 !important;
}
#puck-content:has([class*="puck-card--caceo-tlink"]) > .puck-grid:has(img) > .puck-grid-column {
  background: none;
  border: none;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
}
#puck-content:has([class*="puck-card--caceo-tlink"]) > .puck-grid:has(img) img {
  display: block;
  width: 100%;
  height: 288px;
  object-fit: cover;
  border-radius: 0 !important;
}
/* "Ready to Register?" CTA: light muted band, navy title + copy on the
   left, red primary button on the right (old-site layout). */
#puck-content:has([class*="puck-card--caceo-tlink"]) > .puck-cta {
  background: #eef2f7 !important;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "title buttons" "desc buttons";
  align-items: center;
  column-gap: 3rem;
  padding-block: 4rem;
  padding-inline: max(2rem, calc((100% - 1280px + 3rem) / 2));
  text-align: left;
  margin-block: 0 !important;
}
#puck-content:has([class*="puck-card--caceo-tlink"]) > .puck-cta .puck-cta-title {
  grid-area: title;
  color: var(--color-secondary);
  font-size: 1.5rem;
  margin: 0 0 0.5rem;
}
#puck-content:has([class*="puck-card--caceo-tlink"]) > .puck-cta .puck-cta-description {
  grid-area: desc;
  color: var(--color-textSecondary);
  max-width: 36rem;
  margin: 0;
}
#puck-content:has([class*="puck-card--caceo-tlink"]) > .puck-cta .puck-cta-buttons {
  grid-area: buttons;
  justify-content: flex-end;
}
#puck-content:has([class*="puck-card--caceo-tlink"]) > .puck-cta .puck-cta-primary {
  background-color: var(--caceo-accent);
  border-color: var(--caceo-accent-border);
  color: #ffffff;
  min-height: 2.75rem;
  padding: 0.75rem 1.5rem;
  font-weight: 600;
}
@media (max-width: 768px) {
  #puck-content:has([class*="puck-card--caceo-tlink"]) > .puck-cta {
    grid-template-columns: 1fr;
    grid-template-areas: "title" "desc" "buttons";
    row-gap: 1rem;
  }
  #puck-content:has([class*="puck-card--caceo-tlink"]) > .puck-cta .puck-cta-buttons {
    justify-content: flex-start;
  }
}

/* Upcoming Trainings page — scoped via the Hero followed directly by the
   native EventList block, a structure unique to this page (other EventList
   pages have intervening blocks or a CTA after the hero): calendar-icon
   chip on the hero title, matching the old site's page header. */
main:has(#puck-content > .puck-hero + .recur-event-list) .puck-hero-title {
  display: flex;
  align-items: center;
  gap: 1rem;
}
main:has(#puck-content > .puck-hero + .recur-event-list) .puck-hero-title::before {
  content: "";
  width: 3rem;
  height: 3rem;
  border-radius: 1rem;
  flex-shrink: 0;
  background-color: rgba(3, 76, 140, 0.45);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

/* Quarterly Training page (scoped via .puck-card--caceo-expect): users-icon chip
   on the hero title and a white full-bleed band behind the overview text. */
main:has(.puck-card--caceo-expect) .puck-hero-title {
  display: flex;
  align-items: center;
  gap: 1rem;
}
main:has(.puck-card--caceo-expect) .puck-hero-title::before {
  content: "";
  width: 3rem;
  height: 3rem;
  border-radius: 1rem;
  flex-shrink: 0;
  background-color: rgba(3, 76, 140, 0.45);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M23 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}
/* Overview text (block right after the hero): white full-bleed band */
#puck-content:has(.puck-card--caceo-expect) > :nth-child(2) {
  max-width: none;
  margin-inline: -2rem;
  background-color: #ffffff;
  padding-top: 3rem !important;
  padding-bottom: 3rem !important;
  padding-left: max(2rem, calc((100% - 1280px) / 2)) !important;
  padding-right: max(2rem, calc((100% - 1280px) / 2)) !important;
}
@media (max-width: 768px) {
  #puck-content:has(.puck-card--caceo-expect) > :nth-child(2) {
    padding-left: var(--container-px, 1rem) !important;
    padding-right: var(--container-px, 1rem) !important;
  }
}

/* Certification Courses page (scoped via .caceo-standards-list /
   .caceo-cert-sidebar): award-icon chip on the hero title, uppercase
   tagline line above the subtitle, and no white card treatment on the
   grid columns (content sits on the page background like the old site). */
main:has(.puck-card--caceo-side-accent) .puck-hero-title {
  display: flex;
  align-items: center;
  gap: 1rem;
}
main:has(.puck-card--caceo-side-accent) .puck-hero-title::before {
  content: "";
  width: 3rem;
  height: 3rem;
  border-radius: 1rem;
  flex-shrink: 0;
  background-color: rgba(3, 76, 140, 0.45);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='6'/%3E%3Cpath d='M15.477 12.89 17 22l-5-3-5 3 1.523-9.11'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}
main:has(.puck-card--caceo-side-accent) .puck-hero-subtitle::before {
  content: "Professional Standards \2022  Leadership \2022  Excellence";
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #bfdbfe;
  margin-bottom: 0.5rem;
}
#puck-content > .puck-grid > .puck-grid-column:has(.puck-card--caceo-std),
#puck-content > .puck-grid > .puck-grid-column:has(.puck-card--caceo-side-accent) {
  background: none;
  border: none;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
}

/* Certification grid geometry: 2:1 main/sidebar on desktop (reference is a
   3-col grid with main spanning 2), collapsing to one column at lg/1024px. */
#puck-content > .puck-grid:has(.puck-card--caceo-side-accent) {
  grid-template-columns: 2fr 1fr !important;
}
@media (max-width: 1024px) {
  #puck-content > .puck-grid:has(.puck-card--caceo-side-accent) {
    grid-template-columns: 1fr !important;
  }
}

/* External Training page (scoped via .caceo-xt-external): globe-icon chip
   on the hero title, matching the old site's icon+title header. */
main:has(.caceo-xt-external) .puck-hero-title {
  display: flex;
  align-items: center;
  gap: 1rem;
}
main:has(.caceo-xt-external) .puck-hero-title::before {
  content: "";
  width: 3rem;
  height: 3rem;
  border-radius: 1rem;
  flex-shrink: 0;
  background-color: rgba(3, 76, 140, 0.45);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20'/%3E%3Cpath d='M2 12h20'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

/* Submit button: send icon before the label (SPA uses lucide Send) */
.caceo-xt-submit::before {
  content: "";
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0-.635-.635l-19 6.5a.5.5 0 0 0-.024.937l7.93 3.18a2 2 0 0 1 1.112 1.11z'/%3E%3Cpath d='m21.854 2.147-10.94 10.939'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

/* Host a Training page (scoped via .caceo-xt-host): building-icon chip
   on the hero title, matching the old site's icon+title header. */
main:has(.caceo-xt-host) .puck-hero-title {
  display: flex;
  align-items: center;
  gap: 1rem;
}
main:has(.caceo-xt-host) .puck-hero-title::before {
  content: "";
  width: 3rem;
  height: 3rem;
  border-radius: 1rem;
  flex-shrink: 0;
  background-color: rgba(3, 76, 140, 0.45);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18Z'/%3E%3Cpath d='M6 12H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2'/%3E%3Cpath d='M18 9h2a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-2'/%3E%3Cpath d='M10 6h4'/%3E%3Cpath d='M10 10h4'/%3E%3Cpath d='M10 14h4'/%3E%3Cpath d='M10 18h4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

/* Job Board page (scoped via .puck-card--caceo-jb-cta): briefcase-icon chip
   on the hero title, matching the old site's icon+title header. */
main:has(.puck-card--caceo-jb-cta) .puck-hero-title {
  display: flex;
  align-items: center;
  gap: 1rem;
}
main:has(.puck-card--caceo-jb-cta) .puck-hero-title::before {
  content: "";
  width: 3rem;
  height: 3rem;
  border-radius: 1rem;
  flex-shrink: 0;
  background-color: rgba(3, 76, 140, 0.45);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 20V4a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16'/%3E%3Crect width='20' height='14' x='2' y='6' rx='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

/* Join page (scoped via .recur-product-card — the only page with the
   membership product block): old site renders the body on a white
   full-bleed band with the membership card image and CTA centered in a
   narrow (max-w-2xl) column. Strip the renderer's white column-card
   wrapper and center everything. */
main:has(.recur-product-card) {
  background: #ffffff;
}
#puck-content > .puck-grid:has(.recur-product-card) {
  max-width: 42rem; /* max-w-2xl like the old site */
}
#puck-content > .puck-grid:has(.recur-product-card) > .puck-grid-column {
  background: none;
  border: none;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
}
/* Product card: centered, chrome-less like the old site's plain
   "Ready to join…?" line + red button */
main:has(.recur-product-card) .recur-product-card {
  border: none;
  box-shadow: none;
  background: none;
  text-align: center;
}
main:has(.recur-product-card) .recur-product-card:hover { box-shadow: none; }

/* Join page v2 (scoped via .recur-product-card — the only page with a
   RecurSingleProduct block): the renderer writes the
   product-card chrome and body padding as INLINE styles, so !important
   is required. Hide product metadata (title/price/description) — the
   old site shows only the "Ready to join…" line + red CTA — and keep
   the native checkout button, relabeled via a CSS text swap. */
/* "Ready to join…" line — native Text block (the page's only Text). */
main:has(.recur-product-card) .puck-text p {
  margin: 2rem 0 0;
  text-align: center;
  color: var(--color-textSecondary);
  font-size: 1rem;
}
main:has(.recur-product-card) .recur-product-card {
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
  text-align: center;
}
main:has(.recur-product-card) .recur-product-card-body {
  padding: 0.5rem 0 0 !important;
}
main:has(.recur-product-card) .recur-product-card-title,
main:has(.recur-product-card) .recur-product-card-price,
main:has(.recur-product-card) .recur-product-card-description,
main:has(.recur-product-card) .recur-product-card-image {
  display: none !important;
}
/* Relabel the native checkout anchor to the old site's CTA text and
   style it as the red pill button */
main:has(.recur-product-card) .recur-product-card-button {
  font-size: 0 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 2rem !important;
  border-radius: 0.75rem !important;
  background-color: var(--caceo-accent) !important;
  color: var(--caceo-accent-fg) !important;
  border: 1px solid var(--caceo-accent-border) !important;
}
main:has(.recur-product-card) .recur-product-card-button::before {
  content: "Join / Renew Membership";
  font-size: 0.9375rem;
  font-weight: 600;
  font-family: var(--font-primary);
  line-height: 1;
}

/* Juan Eagle Award page (scoped via .caceo-jea-winner-head):
   award-icon chip on the hero title (accent-tinted box, red award icon)
   like the old site's header. */
main:has(.puck-card--caceo-jea-head) .puck-hero-title {
  display: flex;
  align-items: center;
  gap: 1rem;
}
main:has(.puck-card--caceo-jea-head) .puck-hero-title::before {
  content: "";
  width: 3rem;
  height: 3rem;
  border-radius: 1rem;
  flex-shrink: 0;
  background-color: rgba(191, 10, 48, 0.2);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23BF0A30' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15.477 12.89 1.515 8.526a.5.5 0 0 1-.81.47l-3.58-2.687a1 1 0 0 0-1.197 0l-3.586 2.686a.5.5 0 0 1-.81-.469l1.514-8.526'/%3E%3Ccircle cx='12' cy='8' r='6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

/* Winner header: red "2024 Award Winner" pill beside the heading */
.caceo-jea-winner-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin: 3rem 0 0;
}
.caceo-jea-winner-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 1rem;
  background-color: rgba(191, 10, 48, 0.1);
  border: 1px solid rgba(191, 10, 48, 0.2);
  color: var(--caceo-accent);
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 600;
  white-space: nowrap;
}
.caceo-jea-winner-badge::before {
  content: "";
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23BF0A30' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15.477 12.89 1.515 8.526a.5.5 0 0 1-.81.47l-3.58-2.687a1 1 0 0 0-1.197 0l-3.586 2.686a.5.5 0 0 1-.81-.469l1.514-8.526'/%3E%3Ccircle cx='12' cy='8' r='6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}
.caceo-jea-winner-title {
  margin: 0;
  font-size: 1.75rem;
  color: var(--caceo-secondary);
}

/* Winner grid: strip the renderer's white card treatment from the text
   column (old site shows plain text on the section background) */
main:has(.puck-card--caceo-jea-head) #puck-content > .puck-grid > .puck-grid-column,
#puck-content:has(.puck-card--caceo-jea-head) > .puck-grid > .puck-grid-column {
  background: none;
  border: none;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
}

/* Rodney Morales Award page (scoped via .caceo-memorial-box):
   heart-icon chip on the hero title (accent-tinted box, red heart) */
main:has(.puck-card--caceo-rm-recipient) .puck-hero-title {
  display: flex;
  align-items: center;
  gap: 1rem;
}
main:has(.puck-card--caceo-rm-recipient) .puck-hero-title::before {
  content: "";
  width: 3rem;
  height: 3rem;
  border-radius: 1rem;
  flex-shrink: 0;
  background-color: rgba(191, 10, 48, 0.2);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23BF0A30' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

/* Shield icon before the "About the Award" heading (first block after
   the hero), matching the old site */
#puck-content:has(.puck-card--caceo-rm-recipient) > .puck-hero + * h2::before,
#puck-content:has(.puck-card--caceo-rm-recipient) > .puck-hero + h2::before {
  content: "";
  display: inline-block;
  width: 1.25rem;
  height: 1.25rem;
  margin-right: 0.5rem;
  vertical-align: -0.15rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23034C8C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

/* Strip the renderer's white card chrome from the about grid columns
   (old site shows plain text + plaque image on the section bg) */
#puck-content:has(.puck-card--caceo-rm-recipient) > .puck-grid > .puck-grid-column {
  background: none;
  border: none;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
}

/* Recipient card: heart icon beside the year in the blue header, and a
   small heart in the names pill, like the old site */
.caceo-recipient-card-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.caceo-recipient-card-header::before {
  content: "";
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.8)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}
.caceo-recipient-names::before {
  content: "";
  width: 0.875rem;
  height: 0.875rem;
  flex-shrink: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23BF0A30' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

/* About page: extra breathing room between the hero and the first heading */
#puck-content:has(.puck-card--caceo-geo) > .puck-hero + * {
  margin-top: 2.5rem;
}

/* Board page: the renderer leaves a vertical gap between the Officers
   header block and the officers grid block, exposing the gray page
   background as a bar under the heading. Pull the grid block up over the
   gap and restore the spacing as white padding inside the band. */
#puck-content:has(.puck-card--caceo-member-blue) > :nth-child(3) {
  margin-top: -2rem !important;
  padding-top: 2rem;
}

/* Juan Eagle page: the winner-head Embed renders full-width, so the red
   badge sat left of the container edge. Cap it to the container and center
   so it lines up with the text below. */
.caceo-jea-winner-head {
  max-width: var(--container-max-width);
  margin: 3rem auto 0;
}

/* Certification Courses page: extra breathing room between the hero and
   the first content section */
#puck-content:has(.puck-card--caceo-side-accent) > .puck-hero + * {
  margin-top: 2.5rem;
}

/* Job Board page: breathing room between the hero and the widget, and
   vertical padding inside the widget so the empty state / listings and
   the Post-a-Job band aren't scrunched together. */
#puck-content:has(.puck-card--caceo-jb-cta) > .puck-hero + * {
  margin-top: 2.5rem;
}
#puck-content .recur-job-board {
  padding-top: 1.5rem;
  padding-bottom: 2.5rem;
}
#puck-content .recur-job-board > * {
  margin-block: 1rem;
}
/* Job Board — modern, individual listing cards. The JobBoard renderer has
   no semantic class on its generated grid/cards, but its grid wrapper is
   reliably the direct child with inline display:grid. Scope all overrides
   to that structure so search, empty, and paging states stay untouched. */
#puck-content .recur-job-board > div[style*="display:grid"] {
  gap: 1.25rem !important;
}
#puck-content .recur-job-board > div[style*="display:grid"] > div {
  min-height: 100%;
  min-width: 0;
  overflow: hidden;
  padding: 1.5rem !important;
  gap: 0.875rem !important;
  background: #ffffff !important;
  border: 1px solid rgba(3, 76, 140, 0.16) !important;
  border-top: 4px solid var(--caceo-primary) !important;
  border-radius: 1rem !important;
  box-shadow: 0 2px 8px rgba(2, 48, 89, 0.07) !important;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}
#puck-content .recur-job-board > div[style*="display:grid"] > div:hover {
  transform: translateY(-3px);
  border-color: rgba(3, 76, 140, 0.32) !important;
  box-shadow: 0 12px 24px rgba(2, 48, 89, 0.13) !important;
}
#puck-content .recur-job-board > div[style*="display:grid"] > div > h3 {
  font-family: var(--font-display) !important;
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  color: var(--caceo-secondary) !important;
}
#puck-content .recur-job-board > div[style*="display:grid"] > div > p {
  color: #526578 !important;
  line-height: 1.6 !important;
  overflow-wrap: anywhere;
}
#puck-content .recur-job-board > div[style*="display:grid"] > div > p.caceo-jb-description--collapsed {
  display: -webkit-box !important;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
}
#puck-content .recur-job-board > div[style*="display:grid"] > div > p.caceo-jb-description--fits {
  display: block !important;
  overflow: visible !important;
  -webkit-line-clamp: unset !important;
  -webkit-box-orient: initial !important;
}
.caceo-jb-read-more {
  align-self: flex-start;
  margin: -0.25rem 0 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--caceo-primary);
  font-family: var(--font-primary);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.4;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.caceo-jb-read-more:hover { color: var(--caceo-secondary); }
.caceo-jb-read-more:focus-visible {
  outline: 2px solid var(--caceo-primary);
  outline-offset: 3px;
  border-radius: 2px;
}
#puck-content .recur-job-board > div[style*="display:grid"] > div span {
  border-color: rgba(3, 76, 140, 0.16) !important;
  background: #f0f6fd !important;
  color: var(--caceo-secondary) !important;
}
#puck-content .recur-job-board > div[style*="display:grid"] > div a {
  padding: 0.625rem 1rem !important;
  border-radius: 0.625rem !important;
  background: var(--caceo-primary) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 5px rgba(3, 76, 140, 0.2);
  transition: background-color 160ms ease, transform 160ms ease;
}
#puck-content .recur-job-board > div[style*="display:grid"] > div a:hover {
  background: var(--caceo-secondary) !important;
  transform: translateY(-1px);
  text-decoration: none;
}
@media (max-width: 767px) {
  #puck-content .recur-job-board > div[style*="display:grid"] {
    grid-template-columns: 1fr !important;
  }
  #puck-content .recur-job-board > div[style*="display:grid"] > div {
    padding: 1.25rem !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   LEAVE-SITE CONFIRMATION MODAL (Embed-leave-modal, every page)
   Shown before following the "Report an Incident" external link.
   OWNER-APPROVED EXCEPTION (2026-08-12): the owner chose to keep this
   script Embed — interactive JS with no native equivalent. These
   .caceo-leave-* rules are NOT legacy cleanup candidates.
═══════════════════════════════════════════════════════════════ */
.caceo-leave-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(2, 48, 89, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}
.caceo-leave-overlay[hidden] { display: none; }
.caceo-leave-modal {
  position: relative;
  background: #ffffff;
  border-radius: 0.75rem;
  box-shadow: 0 20px 50px rgba(2, 48, 89, 0.35);
  max-width: 42rem;
  width: 100%;
  padding: 2rem 2.5rem 2.25rem;
  font-family: var(--font-primary);
}
.caceo-leave-close {
  position: absolute;
  top: 1rem;
  right: 1.25rem;
  background: none;
  border: none;
  font-size: 1.125rem;
  line-height: 1;
  color: #64748b;
  cursor: pointer;
  padding: 0.25rem;
}
.caceo-leave-close:hover { color: var(--caceo-secondary); }
.caceo-leave-title {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 1rem;
  font-family: var(--font-display, var(--font-primary));
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--caceo-secondary);
}
.caceo-leave-title-icon {
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23023059' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h6v6'/%3E%3Cpath d='M10 14 21 3'/%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}
.caceo-leave-body {
  margin: 0 0 1.75rem;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: #64748b;
}
.caceo-leave-body strong { color: var(--caceo-secondary); }
.caceo-leave-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.caceo-leave-stay {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 0.5rem;
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--caceo-secondary);
  cursor: pointer;
  font-family: inherit;
}
.caceo-leave-stay:hover { background: #f8fafc; }
.caceo-leave-continue {
  display: inline-flex;
  align-items: center;
  background: var(--caceo-secondary);
  border-radius: 0.5rem;
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  font-weight: 600;
  color: #ffffff !important;
  text-decoration: none;
}
.caceo-leave-continue:hover { opacity: 0.92; }

/* Contact page: extra breathing room between the hero and the first
   content section */
#puck-content:has(.puck-card--caceo-ct-touch) > .puck-hero + * {
  margin-top: 2.5rem;
}

/* Join page: breathing room below the hero, and rounded corners on the
   membership-card image */
#puck-content:has(.recur-product-card) > .puck-hero + * {
  margin-top: 2.5rem;
}
main:has(.recur-product-card) .puck-image img,
main:has(.recur-product-card) .puck-image {
  border-radius: 1rem;
  overflow: hidden;
}

/* Sitewide: main's 2rem bottom padding paints as a gray bar between the
   last content section and the footer on every page — remove it globally
   (supersedes the earlier per-page removals on home/agencies). */
main {
  padding-bottom: 0;
}

/* The footer's own 4rem top margin paints as a gray bar under every page
   — remove it so content bands meet the footer flush. */
.site-footer {
  margin-top: 0;
}

/* Upcoming Trainings page: breathing room between the hero and the
   event list (now directly adjacent — the hidden page hook was removed) */
#puck-content > .puck-hero + .recur-event-list {
  margin-top: 2.5rem;
}

/* Juan Eagle page: breathing room between the recipients list (last
   section) and the footer */
main:has(.puck-card--caceo-jea-head) #puck-content > .puck-grid:last-child {
  margin-bottom: 3rem;
}

/* Rodney Morales page: breathing room between the recipient card (last
   section) and the footer */
#puck-content > .puck-card--caceo-rm-recipient {
  margin-bottom: 3rem;
}

/* Upcoming Trainings page: breathing room between the event list (last
   section) and the footer */
#puck-content > .puck-hero + .recur-event-list {
  margin-bottom: 3rem;
}

/* Certification Courses page: breathing room between the last content
   section and the footer */
#puck-content:has(.puck-card--caceo-side-accent) .puck-image {
  margin-bottom: 3rem;
}

/* Join page: breathing room between the membership CTA (last section)
   and the footer */
main:has(.recur-product-card) .recur-product-card {
  margin-bottom: 3rem;
}

/* =============================================================
   NATIVE CARD VARIANTS (home page HTML-carrier conversion)
   Replaces Embed-mission-cards / Embed-host-training /
   Embed-benefits-body / Embed-pricing-card. Legacy .caceo-mc-* /
   .caceo-host-* / .caceo-mb-* rules purged (all pages converted).
   ============================================================= */

/* Mission value cards — 3-up grid of icon Cards */
#puck-content > .puck-grid:has(.puck-card--caceo-mission) {
  padding: 2rem 0 3rem;
}
.puck-card--caceo-mission {
  background-color: #f8fafc;
  border: 1px solid rgba(2, 48, 89, 0.06);
  border-radius: 0.75rem;
  padding: 1.75rem;
  box-shadow: none;
  text-align: left !important;      /* overrides inline center */
  align-items: flex-start !important;
  gap: 0 !important;
}
.puck-card--caceo-mission > .material-symbols-outlined {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.625rem;
  background-color: rgba(3, 76, 140, 0.08);
  color: var(--caceo-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.375rem !important;
  margin-bottom: 1.25rem;
}
.puck-card--caceo-mission .puck-card-title {
  font-size: 1.0625rem;
  margin-bottom: 0.625rem;
  color: var(--caceo-secondary);
}
.puck-card--caceo-mission .puck-card-description {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--color-textSecondary);
  margin: 0;
}

/* Host-a-training horizontal Card */
#puck-content > .puck-card--caceo-host {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  background-color: rgba(241, 245, 249, 0.4);
  border: 1px solid rgba(2, 48, 89, 0.08);
  border-radius: 1rem;
  padding: 1.5rem;
  box-shadow: none;
  max-width: 56rem;
  margin: 2rem auto 3rem;
}
.puck-card--caceo-host > img {
  width: 10rem !important;
  height: 7rem !important;
  object-fit: cover;
  border-radius: 0.75rem;
}
.puck-card--caceo-host .puck-card-title {
  font-size: 1rem;
  color: var(--caceo-secondary);
  margin-bottom: 0.25rem;
}
.puck-card--caceo-host .puck-card-description {
  font-size: 0.875rem;
  color: var(--color-textSecondary);
  margin: 0 0 0.75rem;
}
.puck-card--caceo-host .puck-card-button {
  display: inline-flex !important;
  align-items: center;
  padding: 0.375rem 0.875rem;
  min-height: 0;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--caceo-secondary);
  background-color: #ffffff;
  border: 1px solid rgba(2, 48, 89, 0.25);
  border-radius: var(--radius);
}
.puck-card--caceo-host .puck-card-button:hover {
  background-color: rgba(2, 48, 89, 0.05);
  opacity: 1;
  box-shadow: none;
}
@media (max-width: 640px) {
  #puck-content > .puck-card--caceo-host { flex-direction: column; align-items: stretch; }
  .puck-card--caceo-host > img { width: 100% !important; height: 9rem !important; }
}

/* Benefits checklist Card — chrome-less, left-aligned */
.puck-card--caceo-benefits {
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
  padding: 0 !important;
  text-align: left !important;
  overflow: visible;
  margin-top: 2rem;
}
.puck-card--caceo-benefits .puck-card-title {
  font-size: 1.125rem;
  color: var(--caceo-secondary);
  margin-bottom: 1rem;
}
.puck-card--caceo-benefits .puck-card-description:empty { display: none; }
.puck-card--caceo-benefits .puck-card-checklist {
  margin: 0 0 2.5rem;
  padding: 0;
  gap: 0.75rem !important;
}
.puck-card--caceo-benefits .puck-card-checklist li {
  color: var(--caceo-secondary);
  line-height: 1.5;
}
.puck-card--caceo-benefits .puck-card-checklist .material-symbols-outlined {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 9999px;
  background-color: rgba(191, 10, 48, 0.10);
  color: var(--caceo-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  margin-top: 0.125rem;
}

/* Amber email notice Card */
.puck-card--caceo-notice {
  background-color: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 1rem;
  padding: 1.25rem !important;
  box-shadow: none;
  align-items: flex-start !important;
}
.puck-card--caceo-notice > .material-symbols-outlined {
  color: #d97706;
  font-size: 1.25rem !important;
  margin-top: 0.125rem;
}
.puck-card--caceo-notice .puck-card-title {
  font-size: 0.875rem;
  color: #78350f;
  margin: 0 0 0.75rem;
}
.puck-card--caceo-notice .puck-card-description {
  font-size: 0.875rem;
  color: #92400e;
  line-height: 1.6;
  margin: 0 0 1rem;
}
.puck-card--caceo-notice .puck-card-button {
  background: transparent;
  border: none;
  padding: 0;
  min-height: 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: #b45309;
  text-decoration: underline;
  text-underline-offset: 2px;
  box-shadow: none;
}
.puck-card--caceo-notice .puck-card-button:hover { color: #78350f; opacity: 1; box-shadow: none; }

/* Pricing Card (right membership column) */
.puck-card--caceo-pricing {
  background-color: rgba(241, 245, 249, 0.4);
  border: 1px solid var(--color-border);
  border-radius: 1.5rem;
  padding: 2.5rem;
  box-shadow: var(--shadow-sm);
  overflow: visible;
}
.puck-card--caceo-pricing > div:first-child {
  height: 10rem !important;
  border-radius: 0.75rem;
  overflow: hidden;
  margin-bottom: 1.5rem;
}
.puck-card--caceo-pricing .puck-card-title {
  font-size: 1.5rem;
  color: var(--caceo-secondary);
  margin-bottom: 0.25rem;
}
.puck-card--caceo-pricing .puck-card-description {
  font-size: 0.875rem;
  color: var(--color-textSecondary);
  margin: 0 0 1.5rem;
}
.puck-card--caceo-pricing .puck-card-meta {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  font-size: 0.875rem;
}
.puck-card--caceo-pricing .puck-card-meta-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 1rem;
}
/* Rows 1-4 form the gray pricing box */
.puck-card--caceo-pricing .puck-card-meta-row:nth-child(-n+4) {
  background-color: rgba(241, 245, 249, 0.6);
}
.puck-card--caceo-pricing .puck-card-meta-row:nth-child(1) {
  border-radius: 0.75rem 0.75rem 0 0;
  padding-top: 1rem;
}
.puck-card--caceo-pricing .puck-card-meta-row:nth-child(-n+3) .puck-card-meta-label { color: var(--color-textSecondary); }
.puck-card--caceo-pricing .puck-card-meta-row:nth-child(-n+3) .puck-card-meta-value { color: var(--caceo-secondary); font-weight: 600; }
.puck-card--caceo-pricing .puck-card-meta-row:nth-child(3) {
  border-top: 1px solid var(--color-border);
  margin-top: 0.5rem;
  padding-top: 0.75rem;
}
.puck-card--caceo-pricing .puck-card-meta-row:nth-child(3) .puck-card-meta-label { color: var(--caceo-primary); font-weight: 600; }
.puck-card--caceo-pricing .puck-card-meta-row:nth-child(3) .puck-card-meta-value {
  color: var(--caceo-primary);
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 700;
}
.puck-card--caceo-pricing .puck-card-meta-row:nth-child(4) {
  border-radius: 0 0 0.75rem 0.75rem;
  padding-bottom: 1rem;
}
.puck-card--caceo-pricing .puck-card-meta-row:nth-child(4) .puck-card-meta-value {
  font-size: 0.75rem;
  color: #15803d;
  font-weight: 500;
}
/* Row 5: big price */
.puck-card--caceo-pricing .puck-card-meta-row:nth-child(5) { padding: 1.25rem 0 0.25rem; }
.puck-card--caceo-pricing .puck-card-meta-row:nth-child(5) .puck-card-meta-value {
  font-family: var(--font-display);
  font-size: 3rem;
  font-weight: 700;
  color: var(--caceo-primary);
  line-height: 1;
}
/* Row 6: runs note */
.puck-card--caceo-pricing .puck-card-meta-row:nth-child(6) { padding: 0; }
.puck-card--caceo-pricing .puck-card-meta-row:nth-child(6) .puck-card-meta-value {
  font-size: 0.75rem;
  color: var(--color-textSecondary);
}
/* Join Now! button — full-width accent red */
.puck-card--caceo-pricing .puck-card-button {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 3.5rem;
  background-color: var(--caceo-accent);
  border: 1px solid var(--caceo-accent-border);
  color: var(--caceo-accent-fg);
  font-size: 1rem;
  font-weight: 600;
}
.puck-card--caceo-pricing .puck-card-button:hover {
  background-color: rgba(191, 10, 48, 0.90);
  opacity: 1;
}

/* Pricing footer Text (login link + questions) below the pricing card */
.puck-card--caceo-pricing + .puck-text {
  border-top: 1px solid var(--color-border);
  margin-top: 1.5rem;
  padding-top: 1.25rem;
}
.puck-card--caceo-pricing + .puck-text p:first-child a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 2.25rem;
  background-color: #ffffff;
  border: 1px solid rgba(2, 48, 89, 0.25);
  border-radius: var(--radius);
  color: var(--caceo-secondary);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  margin-bottom: 0.75rem;
}
.puck-card--caceo-pricing + .puck-text p:first-child a:hover {
  background-color: rgba(2, 48, 89, 0.05);
  opacity: 1;
  text-decoration: none;
}
.puck-card--caceo-pricing + .puck-text p:last-child {
  font-size: 0.75rem;
  text-align: center;
  color: var(--color-textSecondary);
  margin: 0;
}
.puck-card--caceo-pricing + .puck-text p:last-child a {
  color: inherit;
  text-decoration: underline;
}

/* Benefits intro Text (left column, first block) */
#puck-content .puck-grid:has(.puck-card--caceo-benefits) .puck-text:first-child p {
  color: var(--color-textSecondary);
  line-height: 1.7;
  margin-bottom: 0;
}

/* Fixes after first native-card deploy (home conversion):
   1. generic .puck-card-checklist li::before adds a "✓" — the benefits
      variant already renders a check_circle glyph chip, so drop it. */
.puck-card--caceo-benefits .puck-card-checklist li::before { content: none; }
.puck-card--caceo-benefits .puck-card-checklist li { padding-left: 0; }
/* 2. renderer's flex gap splits the pricing rows into separate boxes */
.puck-card--caceo-pricing .puck-card-meta {
  display: flex;
  flex-direction: column;
  gap: 0 !important;
}
/* 3. strip the renderer's white card treatment from mission-grid columns */
#puck-content > .puck-grid > .puck-grid-column:has(.puck-card--caceo-mission) {
  padding: 0;
  background-color: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
}

/* =============================================================
   ABOUT PAGE — native-block conversion (replaces Embed-about-us,
   Embed-about-side, Embed-pillars, Text-history-timeline)
   ============================================================= */

/* Strip renderer white card treatment from the converted columns */
#puck-content > .puck-grid > .puck-grid-column:has(.puck-card--caceo-mission-box),
#puck-content > .puck-grid > .puck-grid-column:has(.puck-card--caceo-geo),
#puck-content > .puck-grid > .puck-grid-column:has([class*="puck-card--caceo-tl-"]) {
  padding: 0;
  background-color: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
}

/* Left column: "About Us" heading + body text */
.puck-grid-column:has(.puck-card--caceo-mission-box) h2 {
  font-size: 1.875rem;
  color: var(--caceo-secondary);
  margin-bottom: 1.5rem;
}
.puck-grid-column:has(.puck-card--caceo-mission-box) .puck-text p {
  color: var(--color-textSecondary);
  line-height: 1.7;
  margin-bottom: 1.25rem;
}

/* Mission box — icon inline with the title via display:contents grid */
.puck-card--caceo-mission-box {
  display: grid !important;
  grid-template-columns: auto 1fr;
  column-gap: 0.5rem;
  row-gap: 1rem;
  align-items: center;
  margin-top: 2rem;
  background: rgba(3, 76, 140, 0.05);
  border: 1px solid rgba(3, 76, 140, 0.15);
  border-radius: 1rem;
  padding: 1.75rem 2rem !important;
  box-shadow: none;
  overflow: visible;
}
.puck-card--caceo-mission-box > div { display: contents; }
.puck-card--caceo-mission-box > .material-symbols-outlined {
  color: var(--caceo-primary);
  font-size: 1.25rem !important;
}
.puck-card--caceo-mission-box .puck-card-title {
  font-size: 1.25rem;
  color: var(--caceo-secondary);
  margin: 0;
}
.puck-card--caceo-mission-box .puck-card-description {
  grid-column: 1 / -1;
  color: var(--caceo-muted);
  line-height: 1.65;
  margin: 0;
}

/* Right column: photo */
.puck-grid-column:has(.puck-card--caceo-geo) .puck-image-img {
  object-fit: cover !important;
  border-radius: 1rem;
  box-shadow: var(--shadow-md);
}
.puck-grid-column:has(.puck-card--caceo-geo) .puck-image { margin-bottom: 1.5rem; }

/* Stats — 3-up light boxes like the old .caceo-ab-stats */
.puck-grid-column:has(.puck-card--caceo-geo) .puck-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.puck-grid-column:has(.puck-card--caceo-geo) .puck-stat-card {
  background-color: rgba(241, 245, 249, 0.4);
  border: 1px solid rgba(226, 232, 240, 0.5);
  border-radius: 0.75rem;
  padding: 1rem;
  text-align: center;
  box-shadow: none;
}
.puck-grid-column:has(.puck-card--caceo-geo) .puck-stat-value {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--caceo-primary);
}
.puck-grid-column:has(.puck-card--caceo-geo) .puck-stat-label {
  font-size: 0.75rem;
  color: var(--color-textSecondary);
  margin-top: 0.25rem;
}

/* Geographic reach box */
.puck-card--caceo-geo {
  display: grid !important;
  grid-template-columns: auto 1fr;
  column-gap: 0.5rem;
  row-gap: 0.5rem;
  align-items: center;
  margin-top: 1rem;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 1rem;
  padding: 1.25rem 1.5rem !important;
  box-shadow: 0 1px 3px rgba(2, 48, 89, 0.06);
  overflow: visible;
}
.puck-card--caceo-geo > div { display: contents; }
.puck-card--caceo-geo > .material-symbols-outlined {
  color: var(--caceo-accent);
  font-size: 1.25rem !important;
}
.puck-card--caceo-geo .puck-card-title {
  font-size: 1rem;
  color: var(--caceo-secondary);
  margin: 0;
}
.puck-card--caceo-geo .puck-card-description {
  grid-column: 1 / -1;
  font-size: 0.875rem;
  color: var(--caceo-muted);
  line-height: 1.6;
  margin: 0;
}

/* History timeline — native Cards; the grid column draws the spine and
   each variant's ::before draws its badge. */
#puck-content > .puck-grid:has([class*="puck-card--caceo-tl-"]) {
  max-width: 720px;
  margin-inline: auto;
}
.puck-grid-column:has([class*="puck-card--caceo-tl-"]) {
  position: relative;
  padding-left: 1.5rem !important;
}
.puck-grid-column:has([class*="puck-card--caceo-tl-"])::before {
  content: "";
  position: absolute;
  left: 1.375rem;
  top: 0;
  bottom: 0;
  width: 1px;
  background: #e2e8f0;
}
[class*="puck-card--caceo-tl-"] {
  position: relative;
  margin-left: 3rem;
  margin-bottom: 2rem;
  background: #ffffff;
  border: 1px solid rgba(226, 232, 240, 0.7);
  border-radius: 0.75rem;
  padding: 1.125rem 1.375rem !important;
  box-shadow: 0 1px 3px rgba(2, 48, 89, 0.06);
  text-align: left !important;
  overflow: visible;
}
[class*="puck-card--caceo-tl-"]::before {
  position: absolute;
  left: -4.5rem;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 2.75rem;
  width: 2.75rem;
  border-radius: 50%;
  background: var(--caceo-primary);
  color: #ffffff;
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 0.75rem;
  box-shadow: 0 2px 6px rgba(3, 76, 140, 0.25);
}
.puck-card--caceo-tl-83::before  { content: "83"; }
.puck-card--caceo-tl-90s::before { content: "90s"; }
.puck-card--caceo-tl-00s::before { content: "00s"; }
.puck-card--caceo-tl-now::before { content: "Now"; }
[class*="puck-card--caceo-tl-"] .puck-card-eyebrow {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--caceo-primary);
  margin: 0 0 0.35rem;
}
[class*="puck-card--caceo-tl-"] .puck-card-title:empty { display: none; }
[class*="puck-card--caceo-tl-"] .puck-card-description {
  font-size: 0.875rem;
  color: var(--caceo-muted);
  line-height: 1.6;
  margin: 0;
}
@media (max-width: 640px) {
  .puck-grid-column:has([class*="puck-card--caceo-tl-"]) { padding-left: 0.75rem !important; }
  .puck-grid-column:has([class*="puck-card--caceo-tl-"])::before { left: 0.875rem; }
  [class*="puck-card--caceo-tl-"] { margin-left: 2.5rem; }
  [class*="puck-card--caceo-tl-"]::before { height: 2.25rem; width: 2.25rem; font-size: 0.65rem; left: -3.5rem; }
}

/* =============================================================
   BOARD PAGE — native-block conversion (replaces Text-officers-*
   and Text-board-members-* HTML carriers)
   ============================================================= */

/* Section headings (bare h2 blocks at children 2 and 4) — old
   .caceo-section-header look: 1.5rem heading + colored rule stripe. */
#puck-content:has(.puck-card--caceo-member-blue) > h2 {
  font-family: 'Outfit', sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--caceo-secondary);
  margin: 0 0 1.5rem 0;
}
#puck-content:has(.puck-card--caceo-member-blue) > h2::after {
  content: "";
  display: block;
  height: 4px;
  width: 3rem;
  border-radius: 9999px;
  margin-top: 0.5rem;
}
#puck-content:has(.puck-card--caceo-member-blue) > :nth-child(2)::after {
  background: var(--caceo-accent);
}
#puck-content:has(.puck-card--caceo-member-blue) > :nth-child(4)::after {
  background: var(--caceo-primary);
}

/* Strip renderer white-card chrome from grid columns; the member Card
   provides its own card treatment. */
#puck-content > .puck-grid > .puck-grid-column:has([class*="puck-card--caceo-member-"]) {
  padding: 0;
  background-color: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
  /* Columns may hold two stacked member cards (row-major fill);
     flex + gap matches the grid's 20px row gap */
  display: flex;
  flex-direction: column;
  gap: 20px;
}
/* Columns with 2+ stacked cards: share the height evenly so rows align.
   Lone-card columns keep natural height (no full-column stretch). */
#puck-content > .puck-grid > .puck-grid-column:has([class*="puck-card--caceo-member-"]:nth-child(2)) [class*="puck-card--caceo-member-"] {
  flex: 1;
}

/* Member card — mirrors old .caceo-member-card */
[class*="puck-card--caceo-member-"] {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 1rem;
  box-shadow: 0 1px 3px rgba(2, 48, 89, 0.06);
  padding: 1.5rem 1rem !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center !important;
  flex: 0 0 auto; /* natural height by default; see stacked-column rule below */
  transition: box-shadow 0.2s, border-color 0.2s;
}
[class*="puck-card--caceo-member-"]:hover {
  box-shadow: 0 4px 12px rgba(2, 48, 89, 0.1);
  border-color: rgba(3, 76, 140, 0.2);
}
[class*="puck-card--caceo-member-"] > div {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Eyebrow (initials) styled as the avatar circle */
[class*="puck-card--caceo-member-"] .puck-card-eyebrow {
  height: 4rem;
  width: 4rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: 0;
  text-transform: none;
  color: #ffffff;
  margin: 0 0 1rem 0;
  flex-shrink: 0;
}
/* Avatar colors from the variant hook (matches React avatarColors) */
.puck-card--caceo-member-blue    .puck-card-eyebrow { background: #034C8C; }
.puck-card--caceo-member-navy    .puck-card-eyebrow { background: #023059; }
.puck-card--caceo-member-red     .puck-card-eyebrow { background: #BF0A30; }
.puck-card--caceo-member-blue-lt .puck-card-eyebrow { background: rgba(3, 76, 140, 0.8); }
.puck-card--caceo-member-navy-lt .puck-card-eyebrow { background: rgba(2, 48, 89, 0.8); }

/* Name */
[class*="puck-card--caceo-member-"] .puck-card-title {
  font-family: 'Outfit', sans-serif;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--caceo-secondary);
  margin: 0 0 0.5rem 0;
  line-height: 1.3;
}

/* Role badge pill (card description) */
[class*="puck-card--caceo-member-"] .puck-card-description {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--caceo-accent);
  background: rgba(191, 10, 48, 0.08);
  border: 1px solid rgba(191, 10, 48, 0.2);
  border-radius: 9999px;
  padding: 0.2rem 0.75rem;
  margin: 0 0 0.625rem 0;
  line-height: 1.4;
  white-space: nowrap;
}

/* Organization line (meta row) with pin icon */
[class*="puck-card--caceo-member-"] .puck-card-meta {
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 0 !important;
}
[class*="puck-card--caceo-member-"] .puck-card-meta-row {
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0.25rem;
}
[class*="puck-card--caceo-member-"] .puck-card-meta-row::before {
  content: "";
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  margin-top: 0.15rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7z'/%3E%3Ccircle cx='12' cy='9' r='2.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}
[class*="puck-card--caceo-member-"] .puck-card-meta-value {
  font-size: 0.75rem;
  color: #64748b;
  line-height: 1.4;
  text-align: center;
}

/* Responsive: 3-col on tablet, 2-col on mobile (matches old grid) */
@media (max-width: 1024px) {
  #puck-content > .puck-grid:has([class*="puck-card--caceo-member-"]) {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}
@media (max-width: 640px) {
  #puck-content > .puck-grid:has([class*="puck-card--caceo-member-"]) {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.875rem !important;
  }
  [class*="puck-card--caceo-member-"] { padding: 1.25rem 0.75rem !important; }
  [class*="puck-card--caceo-member-"] .puck-card-eyebrow {
    height: 3rem;
    width: 3rem;
    font-size: 1rem;
  }
}

/* =============================================================
   AGENCIES PAGE — native-block conversion (org cards, section
   headers, bottom CTA now native; searchable directory remains
   a documented gap Embed)
   ============================================================= */

/* Strip renderer column chrome where cards bring their own look */
#puck-content > .puck-grid > .puck-grid-column:has(.puck-card--caceo-ag-org) {
  padding: 0;
  background-color: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
}

/* Section header Card — icon chip + 1.5rem heading, transparent card */
[class*="puck-card--caceo-aghead-"] {
  display: flex !important;
  flex-direction: row;
  align-items: center !important;
  gap: 0.75rem !important;
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0 !important;
  margin: 3rem 0 2rem;
  text-align: left !important;
}
[class*="puck-card--caceo-aghead-"] > .material-symbols-outlined {
  height: 2.5rem;
  width: 2.5rem;
  border-radius: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 20px !important;
}
.puck-card--caceo-aghead-primary > .material-symbols-outlined {
  background-color: rgba(3, 76, 140, 0.1);
  color: var(--color-primary);
}
.puck-card--caceo-aghead-accent > .material-symbols-outlined {
  background-color: rgba(191, 10, 48, 0.1);
  color: var(--color-accent);
}
.puck-card--caceo-aghead-secondary > .material-symbols-outlined {
  background-color: rgba(2, 48, 89, 0.1);
  color: var(--color-secondary);
}
[class*="puck-card--caceo-aghead-"] .puck-card-title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-secondary);
  margin: 0;
}
[class*="puck-card--caceo-aghead-"] .puck-card-description:empty { display: none; }

/* Org card — linked title with external-link icon, muted description */
.puck-card--caceo-ag-org {
  background-color: var(--color-card, #fff);
  border: 1px solid var(--color-border);
  border-radius: 1rem;
  padding: 1.5rem !important;
  box-shadow: var(--shadow-sm);
  text-align: left !important;
  height: 100%;
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.puck-card--caceo-ag-org:hover {
  box-shadow: var(--shadow-md);
  border-color: rgba(3, 76, 140, 0.2);
}
.puck-card--caceo-ag-org .puck-card-title {
  display: inline-flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1.375;
  margin: 0 0 0.75rem 0;
}
.puck-card--caceo-ag-org .puck-card-title::after {
  content: "";
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  margin-top: 0.125rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cline x1='10' y1='14' x2='21' y2='3'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}
.puck-card--caceo-ag-org:hover .puck-card-title { text-decoration: underline; }
.puck-card--caceo-ag-org .puck-card-description {
  font-size: 0.875rem;
  color: var(--color-textSecondary);
  line-height: 1.625;
  margin: 0;
}

/* State section muted band: header card (child 4) + grid (child 5) */
#puck-content:has(.puck-card--caceo-aghead-accent) > :nth-child(4),
#puck-content:has(.puck-card--caceo-aghead-accent) > :nth-child(5) {
  background-color: var(--color-muted);
  max-width: none;
  margin-inline: -2rem;
  padding-inline: max(2rem, calc((100% - var(--container-max-width)) / 2));
}
#puck-content:has(.puck-card--caceo-aghead-accent) > :nth-child(4) {
  margin-block: 0 !important;
  padding-top: 3rem;
}
#puck-content:has(.puck-card--caceo-aghead-accent) > :nth-child(4) .puck-card {
  margin: 0 0 2rem;
}
#puck-content:has(.puck-card--caceo-aghead-accent) > :nth-child(5) {
  margin-block: 0 !important;
  padding-bottom: 3.5rem;
}

/* Bottom CTA — old .caceo-ag-cta look: light gray band, navy heading,
   red pill button */
#puck-content:has(.puck-card--caceo-ag-org) > .puck-cta {
  background: rgba(226, 232, 240, 0.4) !important;
  background-image: none !important;
  border-top: 1px solid var(--color-border);
  text-align: center;
  padding-block: 3.5rem;
}
#puck-content:has(.puck-card--caceo-ag-org) > .puck-cta .puck-cta-title {
  color: var(--color-secondary) !important;
  font-size: 1.5rem;
}
#puck-content:has(.puck-card--caceo-ag-org) > .puck-cta .puck-cta-description {
  color: var(--color-textSecondary) !important;
  max-width: 48rem;
  margin-inline: auto;
}
#puck-content:has(.puck-card--caceo-ag-org) > .puck-cta .puck-cta-buttons {
  justify-content: center;
}
#puck-content:has(.puck-card--caceo-ag-org) > .puck-cta .puck-cta-primary {
  background-color: var(--color-accent);
  border: none;
  color: #ffffff;
  font-weight: 600;
  padding: 0.75rem 2rem;
  border-radius: 0.75rem;
}

/* Responsive: org card grids collapse to 1-col on mobile */
@media (max-width: 640px) {
  #puck-content > .puck-grid:has(.puck-card--caceo-ag-org) {
    grid-template-columns: 1fr !important;
  }
}

/* =============================================================
   JUAN EAGLE AWARD PAGE — native-block conversion (replaces
   Embed-winner-head, Text-about-juan wrapper, Text-recipients-list)
   ============================================================= */

/* Winner header Card — badge pill (eyebrow) beside the heading */
.puck-card--caceo-jea-head {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin: 3rem auto 0;
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0 !important;
  text-align: left !important;
  overflow: visible;
}
.puck-card--caceo-jea-head > div { display: contents; }
.puck-card--caceo-jea-head .puck-card-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 1rem;
  background-color: rgba(191, 10, 48, 0.1);
  border: 1px solid rgba(191, 10, 48, 0.2);
  color: var(--caceo-accent);
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: normal;
  text-transform: none;
  white-space: nowrap;
  margin: 0;
  order: -1;
}
.puck-card--caceo-jea-head .puck-card-eyebrow::before {
  content: "";
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23BF0A30' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15.477 12.89 1.515 8.526a.5.5 0 0 1-.81.47l-3.58-2.687a1 1 0 0 0-1.197 0l-3.586 2.686a.5.5 0 0 1-.81-.469l1.514-8.526'/%3E%3Ccircle cx='12' cy='8' r='6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}
.puck-card--caceo-jea-head .puck-card-title {
  margin: 0;
  font-size: 1.75rem;
  color: var(--caceo-secondary);
}
.puck-card--caceo-jea-head .puck-card-description:empty { display: none; }
/* Keep the badge + heading inside the left text column so a long title
   wraps instead of running over the winner photo (right grid column =
   50% minus half the 40px grid gap). Re-keyed from the retired
   .caceo-jea-winner-head Embed rule. */
.puck-card--caceo-jea-head {
  padding-right: calc(50% + 20px) !important;
}
@media (max-width: 1024px) {
  .puck-card--caceo-jea-head { padding-right: 0 !important; }
}
@media (max-width: 640px) {
  .puck-card--caceo-jea-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }
}

/* About-the-award box: Text block (child 5: Hero, winner head, grid,
   heading, text) gets the old .caceo-about-box white card treatment */
#puck-content:has(.puck-card--caceo-jea-head) > :nth-child(5) {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 1rem;
  padding: 2rem;
  box-shadow: 0 1px 3px rgba(2, 48, 89, 0.06);
}
#puck-content:has(.puck-card--caceo-jea-head) > :nth-child(5) p {
  color: #64748b;
  line-height: 1.7;
  margin-bottom: 1rem;
}
#puck-content:has(.puck-card--caceo-jea-head) > :nth-child(5) p:last-child { margin-bottom: 0; }
#puck-content:has(.puck-card--caceo-jea-head) > :nth-child(5) strong { color: var(--caceo-secondary); }

/* Past recipients — native Cards as year/detail rows */
#puck-content > .puck-grid > .puck-grid-column:has([class*="puck-card--caceo-recipient"]) {
  padding: 0;
  background-color: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
}
[class*="puck-card--caceo-recipient"] {
  display: grid !important;
  grid-template-columns: 3.5rem 1fr;
  column-gap: 1.25rem;
  align-items: start;
  background: rgba(241, 245, 249, 0.7);
  border: 1px solid rgba(226, 232, 240, 0.6);
  border-radius: 0.75rem;
  padding: 1rem 1.5rem !important;
  text-align: left !important;
  transition: border-color 0.15s, background 0.15s;
  overflow: visible;
}
[class*="puck-card--caceo-recipient"]:hover {
  border-color: rgba(3, 76, 140, 0.2);
  background: rgba(241, 245, 249, 0.95);
}
[class*="puck-card--caceo-recipient"] > div { display: contents; }
[class*="puck-card--caceo-recipient"] .puck-card-eyebrow {
  grid-row: 1 / span 2;
  font-family: 'Outfit', sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: normal;
  text-transform: none;
  color: #94a3b8;
  padding-top: 0.1rem;
  margin: 0;
}
.puck-card--caceo-recipient-first .puck-card-eyebrow { color: var(--caceo-primary); }
[class*="puck-card--caceo-recipient"] .puck-card-title {
  grid-column: 2;
  font-family: var(--font-primary);
  font-weight: 600;
  color: var(--caceo-secondary);
  margin: 0 0 0.2rem 0;
  font-size: 0.9375rem;
  letter-spacing: normal;
}
[class*="puck-card--caceo-recipient"] .puck-card-description {
  grid-column: 2;
  font-size: 0.8125rem;
  color: #64748b;
  line-height: 1.5;
  margin: 0;
}
@media (max-width: 640px) {
  [class*="puck-card--caceo-recipient"] {
    padding: 0.875rem 1rem !important;
    column-gap: 0.875rem;
    grid-template-columns: 2.75rem 1fr;
  }
  [class*="puck-card--caceo-recipient"] .puck-card-eyebrow { font-size: 1rem; }
}

/* =============================================================
   RODNEY MORALES PAGE — native-block conversion (replaces
   Text-recipients-rodney card markup and the memorial-box div)
   ============================================================= */

/* Memorial callout: second Text block in the about grid's left column */
#puck-content:has(.puck-card--caceo-rm-recipient) > .puck-grid > .puck-grid-column:first-child > :nth-child(2) {
  margin-top: 1.25rem;
  background: rgba(3, 76, 140, 0.04);
  border: 1px solid #e2e8f0;
  border-radius: 0.75rem;
  padding: 1.125rem 1.375rem;
}
#puck-content:has(.puck-card--caceo-rm-recipient) > .puck-grid > .puck-grid-column:first-child > :nth-child(2) p {
  font-size: 0.9rem;
  color: var(--caceo-secondary);
  line-height: 1.65;
  font-weight: 500;
  margin: 0;
}
#puck-content:has(.puck-card--caceo-rm-recipient) > .puck-grid > .puck-grid-column:first-child > :nth-child(2) strong {
  color: var(--caceo-secondary);
  font-weight: 700;
}

/* Recipient story Card: eyebrow = blue year band, title = red names pill,
   description = story paragraph */
.puck-card--caceo-rm-recipient {
  display: flex !important;
  flex-direction: column;
  align-items: stretch;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 1rem;
  box-shadow: 0 1px 3px rgba(2, 48, 89, 0.06);
  overflow: hidden;
  padding: 0 !important;
  text-align: left !important;
}
.puck-card--caceo-rm-recipient > div { display: contents; }
.puck-card--caceo-rm-recipient .puck-card-eyebrow {
  order: -1;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--caceo-primary);
  padding: 0.75rem 1.5rem;
  font-family: 'Outfit', sans-serif;
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: normal;
  text-transform: none;
  color: #ffffff;
  margin: 0;
}
.puck-card--caceo-rm-recipient .puck-card-eyebrow::before {
  content: "";
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.8)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}
.puck-card--caceo-rm-recipient .puck-card-title {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-primary);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: normal;
  color: var(--caceo-accent);
  background: rgba(191, 10, 48, 0.07);
  border: 1px solid rgba(191, 10, 48, 0.2);
  border-radius: 9999px;
  padding: 0.3rem 1rem;
  margin: 1.5rem 2rem 1rem;
}
.puck-card--caceo-rm-recipient .puck-card-title::before {
  content: "";
  width: 0.875rem;
  height: 0.875rem;
  flex-shrink: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23BF0A30' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}
.puck-card--caceo-rm-recipient .puck-card-description {
  color: #64748b;
  line-height: 1.7;
  margin: 0;
  padding: 0 2rem 1.5rem;
}
@media (max-width: 640px) {
  .puck-card--caceo-rm-recipient .puck-card-title { margin: 1.25rem 1.25rem 1rem; }
  .puck-card--caceo-rm-recipient .puck-card-description { padding: 0 1.25rem 1.25rem; }
}

/* =============================================================
   TRAINING PAGE — native-block conversion (replaces the
   Text-training-links HTML list with Grid + linked Cards)
   ============================================================= */

/* Strip white chrome from the links grid column */
#puck-content > .puck-grid > .puck-grid-column:has([class*="puck-card--caceo-tlink"]) {
  padding: 0;
  background-color: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
  gap: 0.75rem;
}

/* Link card row: icon chip + label + description (old .caceo-training-link) */
[class*="puck-card--caceo-tlink"] {
  display: flex !important;
  flex-direction: row;
  align-items: center;
  gap: 1rem;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 0.75rem;
  padding: 1rem 1.5rem !important;
  text-align: left !important;
  box-shadow: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  overflow: visible;
}
[class*="puck-card--caceo-tlink"]:hover {
  border-color: rgba(3, 76, 140, 0.35);
  box-shadow: 0 2px 8px rgba(2, 48, 89, 0.08);
  text-decoration: none;
}
[class*="puck-card--caceo-tlink"] > .material-symbols-outlined {
  height: 2.5rem;
  width: 2.5rem;
  border-radius: 0.625rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 20px !important;
  background-color: rgba(3, 76, 140, 0.08);
  color: var(--caceo-primary);
  transition: background-color 0.15s, color 0.15s;
}
[class*="puck-card--caceo-tlink"]:hover > .material-symbols-outlined {
  background-color: var(--caceo-primary);
  color: #ffffff;
}
[class*="puck-card--caceo-tlink"] .puck-card-title {
  font-family: var(--font-primary);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--caceo-secondary);
  margin: 0 0 0.15rem 0;
  letter-spacing: normal;
  transition: color 0.15s;
}
[class*="puck-card--caceo-tlink"]:hover .puck-card-title {
  color: var(--caceo-primary);
}
[class*="puck-card--caceo-tlink"] .puck-card-description {
  font-size: 0.8125rem;
  color: #64748b;
  line-height: 1.5;
  margin: 0;
}
/* External (scholarship) link: small external-link icon after the label */
.puck-card--caceo-tlink-ext .puck-card-title::after {
  content: "";
  display: inline-block;
  width: 0.75rem;
  height: 0.75rem;
  margin-left: 0.375rem;
  vertical-align: -0.05rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cline x1='10' y1='14' x2='21' y2='3'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

/* =============================================================
   CERTIFICATION COURSES — native-block conversion
   (replaces Text-cert-standards / Text-cert-sidebar carriers)
   ============================================================= */

/* Standards: strip chrome from the nested grid + its column
   (old .caceo-standards-list stack) */
.puck-grid-column > .puck-grid:has(.puck-card--caceo-std),
.puck-grid:has(.puck-card--caceo-std) > .puck-grid-column {
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
}
/* Stack spacing between standard cards (old list gap 0.875rem) + the
   old list's 0.5rem top offset under the heading */
.puck-grid:has(> .puck-grid-column > .puck-card--caceo-std) > .puck-grid-column {
  display: flex;
  flex-direction: column;
  gap: 0.875rem !important;
}
.puck-grid-column > .puck-grid:has(.puck-card--caceo-std) {
  margin-top: 0.5rem;
}

/* Standard item card (old .caceo-standard-item) */
.puck-card--caceo-std {
  display: flex !important;
  flex-direction: row;
  align-items: flex-start;
  gap: 1rem;
  background: rgba(241, 245, 249, 0.5);
  border: 1px solid #e2e8f0;
  border-radius: 1rem;
  padding: 1.125rem 1.25rem !important;
  text-align: left !important;
  box-shadow: none;
}
.puck-card--caceo-std > .material-symbols-outlined {
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  background-color: rgba(3, 76, 140, 0.08);
  border-radius: 0.625rem;
  margin-top: 0.1rem;
  /* Render the old tint-filled star SVG exactly; hide the Material glyph */
  font-size: 0 !important;
  color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='rgba(3,76,140,0.3)' stroke='%23034C8C' stroke-width='2'%3E%3Cpolygon points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}
.puck-card--caceo-std .puck-card-title {
  font-family: var(--font-primary);
  font-weight: 600;
  color: var(--caceo-secondary);
  font-size: 0.9rem;
  line-height: 1.625; /* old label was a div inheriting body line-height */
  margin: 0 0 0.2rem;
  letter-spacing: normal;
}
.puck-card--caceo-std .puck-card-description {
  font-size: 0.8125rem;
  color: #64748b;
  line-height: 1.55;
  margin: 0;
}

/* Sidebar: outer column is the sticky stack (old .caceo-cert-sidebar) */
#puck-content > .puck-grid > .puck-grid-column:has(.puck-card--caceo-side-accent) {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  position: sticky;
  top: 7rem;
  align-self: start;
}

/* Each nested grid column is a sidebar card box (old .caceo-sidebar-card).
   Direct-child :has() guard keeps this off the outer Grid-cert-layout. */
.puck-grid:has(> .puck-grid-column > .puck-card--caceo-side-accent) > .puck-grid-column,
.puck-grid:has(> .puck-grid-column > .puck-card--caceo-side-join) > .puck-grid-column {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 1rem;
  padding: 1.375rem 1.5rem;
  box-shadow: 0 1px 3px rgba(2, 48, 89, 0.05);
  display: flex;
  flex-direction: column;
  gap: 0;
}
.puck-grid:has(> .puck-grid-column > .puck-card--caceo-side-accent) > .puck-grid-column {
  background: rgba(3, 76, 140, 0.04);
  border-color: rgba(3, 76, 140, 0.15);
}

/* Card content inside the box: transparent, no chrome */
[class*="puck-card--caceo-side-"] {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0 !important;
  text-align: left !important;
}
[class*="puck-card--caceo-side-"] .puck-card-title {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--caceo-secondary);
  margin: 0 0 0.75rem;
  letter-spacing: normal;
}
/* Award icon inline before the "Get Certified" heading
   (old .caceo-sidebar-heading svg) */
.puck-card--caceo-side-accent .puck-card-title::before {
  content: "";
  display: inline-block;
  width: 1rem;
  height: 1rem;
  margin-right: 0.5rem;
  vertical-align: -0.125rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23034C8C' stroke-width='2'%3E%3Ccircle cx='12' cy='8' r='6'/%3E%3Cpath d='M15.477 12.89 17 22l-5-3-5 3 1.523-9.11'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}
.puck-card--caceo-side-join .puck-card-title { margin-bottom: 0.875rem; }
[class*="puck-card--caceo-side-"] .puck-card-description {
  font-size: 0.8125rem;
  color: #64748b;
  line-height: 1.6;
  margin: 0 0 1rem;
}

/* Sidebar buttons: full-width accent red (old .caceo-sidebar-btn--accent) */
.puck-grid:has(> .puck-grid-column > [class*="puck-card--caceo-side-"]) .puck-button-container {
  width: 100%;
}
.puck-grid:has(> .puck-grid-column > [class*="puck-card--caceo-side-"]) .puck-button {
  display: flex;
  width: 100%;
  justify-content: center;
  gap: 0.375rem;
  padding: 0.5rem 1rem;
  min-height: 0;
  border-radius: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 600;
  background: var(--caceo-accent);
  border: none;
  color: #ffffff;
}
.puck-grid:has(> .puck-grid-column > [class*="puck-card--caceo-side-"]) .puck-button:hover {
  background: rgba(191, 10, 48, 0.85);
  opacity: 1;
  box-shadow: none;
}
/* External-link icon after "Enroll Now" (old inline svg) */
.puck-grid:has(> .puck-grid-column > .puck-card--caceo-side-accent) .puck-button::after {
  content: "";
  display: inline-block;
  width: 0.75rem;
  height: 0.75rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cline x1='10' y1='14' x2='21' y2='3'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

/* ═══════════════════════════════════════════════════════════════
   QUARTERLY TRAINING PAGE — NATIVE BLOCKS (post raw-HTML conversion)
   "What to Expect" Cards (variant caceo-expect) and the Membership
   Value box rebuilt as Card meta rows + Text note + Button inside a
   nested 1-col Grid (Grid-qt-mv). Legacy .caceo-expect- and .caceo-mv-
   rules above are now inert on this page (cleanup deferred).
═══════════════════════════════════════════════════════════════ */

/* Strip renderer chrome from the expect grid columns and the mv grid */
#puck-content > .puck-grid > .puck-grid-column:has(.puck-card--caceo-expect) {
  min-height: 0;
  background: none;
  border: none;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
}
.puck-grid:has(> .puck-grid-column > .puck-card--caceo-expect) > .puck-grid-column {
  display: flex;
  flex-direction: column;
  gap: 1.125rem !important;
}
/* Old Text carrier had padding 20 + grid margin-top .5rem */
#puck-content > .puck-grid:has(> .puck-grid-column > .puck-card--caceo-expect) {
  margin-top: 0; /* h2 margin-bottom alone matches the old heading->grid gap */
}

/* Expect card = old .caceo-expect-card */
.puck-card--caceo-expect {
  align-items: flex-start !important;
  padding: 1.25rem !important;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 1rem;
  box-shadow: 0 1px 3px rgba(2, 48, 89, 0.04);
}
/* Icon chip = old .caceo-expect-icon; exact 16px check-circle SVG,
   Material glyph hidden */
.puck-card--caceo-expect > .material-symbols-outlined {
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  background-color: rgba(3, 76, 140, 0.08);
  border-radius: 0.625rem;
  margin-top: 0.1rem;
  font-size: 0 !important;
  color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23034C8C' stroke-width='2'%3E%3Cpath d='M22 11.08V12a10 10 0 1 1-5.93-9.14'/%3E%3Cpolyline points='22 4 12 14.01 9 11.01'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}
.puck-card--caceo-expect .puck-card-title {
  font-family: var(--font-primary);
  font-weight: 600;
  color: var(--caceo-secondary);
  font-size: 0.9rem;
  line-height: 1.625;
  margin: 0 0 0.3rem;
  letter-spacing: normal;
}
.puck-card--caceo-expect .puck-card-description {
  font-size: 0.8125rem;
  color: #64748b;
  line-height: 1.55;
  margin: 0;
}

/* Membership Value box: the nested grid column is the box
   (old .caceo-mv-box) */
#puck-content > .puck-grid > .puck-grid-column:has(.puck-card--caceo-mv) {
  min-height: 0;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 1rem;
  padding: 2rem;
  box-shadow: 0 1px 3px rgba(2, 48, 89, 0.05);
}
.puck-grid:has(> .puck-grid-column > .puck-card--caceo-mv) > .puck-grid-column {
  display: flex;
  flex-direction: column;
  gap: 0;
}
#puck-content > .puck-grid:has(> .puck-grid-column > .puck-card--caceo-mv) {
  margin-top: 1.5rem; /* old expect-grid -> mv-box distance (25px) */
  max-width: 32rem;
  margin-inline: 0;
  margin-left: max(0px, calc((100% - 1280px) / 2));
}

/* Card chrome off; title = old .caceo-mv-header/.caceo-mv-title with
   inline dollar icon */
.puck-card--caceo-mv {
  padding: 0 !important;
  background: transparent;
  border: none;
  box-shadow: none;
  text-align: left !important; /* minimal layout centers via inline style */
}
.puck-card--caceo-mv .puck-card-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 1.125rem;
  color: var(--caceo-secondary);
  margin: 0 0 30px; /* old 1.25rem + 10px renderer header-height delta */
  letter-spacing: normal;
}
.puck-card--caceo-mv .puck-card-title::before {
  content: "";
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23034C8C' stroke-width='2'%3E%3Cline x1='12' y1='1' x2='12' y2='23'/%3E%3Cpath d='M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}
/* Description prop is empty on this card; the renderer still emits the
   \003c p> (with whitespace, so :empty cannot match) */
.puck-card--caceo-mv .puck-card-description { display: none; }

/* Meta rows = old .caceo-mv-row list; last row is the highlight */
.puck-card--caceo-mv .puck-card-meta {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0 0 0.875rem;
  padding: 0;
  list-style: none;
  border: none;
}
.puck-card--caceo-mv .puck-card-meta-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.875rem;
  line-height: 1.625; /* old rows inherited body line-height */
  padding: 0;
  border: none;
}
.puck-card--caceo-mv .puck-card-meta-row .puck-card-meta-label { color: #64748b; font-weight: 400; }
.puck-card--caceo-mv .puck-card-meta-row .puck-card-meta-value { font-weight: 600; color: var(--caceo-secondary); }
.puck-card--caceo-mv .puck-card-meta-row:last-child {
  border-top: 1px solid #e2e8f0;
  padding-top: 0.75rem;
  margin-top: 0.25rem;
}
.puck-card--caceo-mv .puck-card-meta-row:last-child .puck-card-meta-label {
  font-weight: 600;
  color: var(--caceo-primary);
}
.puck-card--caceo-mv .puck-card-meta-row:last-child .puck-card-meta-value {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 1.125rem;
  color: var(--caceo-primary);
}

/* Green savings note (Text block inside the box) = old .caceo-mv-note */
.puck-grid:has(> .puck-grid-column > .puck-card--caceo-mv) .puck-text p {
  font-size: 0.75rem;
  color: #15803d;
  font-weight: 500;
  margin: 0 0 22px; /* old 1rem + 6px renderer delta */
  line-height: 1.5;
}

/* Full-width accent CTA = old .caceo-qt-btn--accent .caceo-mv-cta */
.puck-grid:has(> .puck-grid-column > .puck-card--caceo-mv) .puck-button-container {
  width: 100%;
}
.puck-grid:has(> .puck-grid-column > .puck-card--caceo-mv) .puck-button {
  width: 100%;
  padding: 0.625rem 1.375rem;
  font-weight: 600;
  font-size: 0.875rem;
  background: var(--caceo-accent);
  border: none;
  color: #ffffff;
  text-decoration: none !important;
}
.puck-grid:has(> .puck-grid-column > .puck-card--caceo-mv) .puck-button:hover {
  background: rgba(191, 10, 48, 0.85);
  opacity: 1;
}

@media (max-width: 640px) {
  #puck-content > .puck-grid:has(> .puck-grid-column > .puck-card--caceo-mv) {
    margin-left: 0;
  }
  #puck-content > .puck-grid > .puck-grid-column:has(.puck-card--caceo-mv) {
    padding: 1.375rem;
  }
}

/* ═══════════════════════════════════════════════════════════════
   EXTERNAL TRAINING PAGE — NATIVE SIDEBAR (post raw-HTML conversion)
   The submission form stays as an Embed (contract v1.2.0 has no form
   component for Recur's challenge/submit pipeline — documented gap);
   the sidebar boxes are now native Cards (variants caceo-xt-why /
   caceo-xt-q) in a top-level 2-col Grid. Shared by the host-training page (variants caceo-xt-hb for the
   handbook box). Legacy .caceo-xt-side/.caceo-xt-box rules now inert.
═══════════════════════════════════════════════════════════════ */

/* Grid geometry = old .caceo-xt-grid: 2fr/1fr, gap 3rem, top-aligned,
   with the old wrap's 4rem block padding and 1.5rem side padding. */
#puck-content > .puck-grid:has(> .puck-grid-column > .puck-card--caceo-xt-why) {
  grid-template-columns: 2fr 1fr !important;
  gap: 3rem !important;
  align-items: start;
  margin-block: 4rem;
  padding-inline: 1.5rem;
}
@media (max-width: 1023px) {
  #puck-content > .puck-grid:has(> .puck-grid-column > .puck-card--caceo-xt-why) {
    grid-template-columns: 1fr !important;
  }
}

/* Strip renderer column chrome from both columns */
#puck-content > .puck-grid > .puck-grid-column:has(.caceo-xt-main),
#puck-content > .puck-grid > .puck-grid-column:has(.puck-card--caceo-xt-why) {
  min-height: 0;
  background: none;
  border: none;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
}

/* Sidebar column stacks like old .caceo-xt-side */
.puck-grid:has(> .puck-grid-column > .puck-card--caceo-xt-why) > .puck-grid-column {
  display: flex;
  flex-direction: column;
  gap: 1.5rem !important;
}

/* Why Submit? card = old .caceo-xt-box.caceo-xt-box-blue */
.puck-card--caceo-xt-why,
.puck-card--caceo-xt-q,
.puck-card--caceo-xt-hb {
  border-radius: 1rem;
  padding: 1.5rem !important;
  text-align: left !important; /* minimal layout centers via inline style */
}
.puck-card--caceo-xt-why {
  background: rgba(3, 76, 140, 0.05);
  border: 1px solid rgba(3, 76, 140, 0.15);
  box-shadow: none;
}
.puck-card--caceo-xt-q,
.puck-card--caceo-xt-hb {
  background: #ffffff;
  border: 1px solid var(--color-border);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.puck-card--caceo-xt-why .puck-card-title,
.puck-card--caceo-xt-q .puck-card-title,
.puck-card--caceo-xt-hb .puck-card-title {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--caceo-secondary);
  margin: 0 0 0.75rem;
  letter-spacing: normal;
}
.puck-card--caceo-xt-why .puck-card-description,
.puck-card--caceo-xt-q .puck-card-description,
.puck-card--caceo-xt-hb .puck-card-description {
  font-size: 0.875rem;
  color: var(--color-textSecondary);
  line-height: 1.6;
  margin: 0 0 1rem;
}

/* Checklist = old .caceo-xt-box ul/li rows with 16px primary check icon */
.puck-card--caceo-xt-why .puck-card-checklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.puck-card--caceo-xt-why .puck-card-checklist li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--color-textSecondary);
  line-height: 1.6;
  padding: 0 !important; /* renderer indents 24px for its own ::before marker */
}
/* The renderer prepends its own \2713 marker via li::before — remove it */
.puck-card--caceo-xt-why .puck-card-checklist li::before {
  content: none !important;
}
/* Exact old 16px stroke check-circle: hide the Material ligature and
   paint the original SVG (primary blue) as a background */
.puck-card--caceo-xt-why .puck-card-checklist li .material-symbols-outlined {
  font-size: 0;
  width: 16px;
  height: 16px;
  margin-top: 0.125rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23034C8C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 11.08V12a10 10 0 1 1-5.93-9.14'/%3E%3Cpolyline points='22 4 12 14.01 9 11.01'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

/* Questions? mailto link = old .caceo-xt-box a */
.puck-card--caceo-xt-q .puck-card-meta {
  list-style: none;
  margin: 0 !important;
  padding: 0 !important;
  border: none;
  gap: 0 !important;
}
.puck-card--caceo-xt-q .puck-card-meta-row,
.puck-card--caceo-xt-q .puck-card-meta > * {
  padding: 0 !important;
  margin: 0 !important;
  border: none;
  line-height: 1.6;
}
/* Handbook download button = old .caceo-xt-btn-outline (full-width,
   centered outline pill; overrides the renderer's primary button look) */
.puck-card--caceo-xt-hb .puck-card-button {
  display: block !important;
  width: 100%;
  text-align: center;
  background: transparent !important;
  color: var(--caceo-secondary) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: 0.75rem;
  padding: 0.5rem 1rem;
  min-height: 0;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.6;
  box-shadow: none;
  text-decoration: none;
  transition: background-color 0.15s ease;
}
.puck-card--caceo-xt-hb .puck-card-button:hover {
  background: rgba(226, 232, 240, 0.4) !important;
  opacity: 1;
}

.puck-card--caceo-xt-q .puck-card-meta a,
.puck-card--caceo-xt-q .puck-card-meta-value {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--caceo-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}



            /* Base styles */
            * {
              margin: 0;
              padding: 0;
              box-sizing: border-box;
            }
            
            body {
              font-family: Inter;
              line-height: 1.6;
              color: var(--color-text, #333);
              background-color: var(--color-background, #ffffff);
            }

            /* Global image safety — prevents oversized AMS/Quill images from breaking layouts */
            img {
              max-width: 100%;
              height: auto;
            }

            /* Public search: uses theme tokens and stays compact in either
               chrome region while allowing the full results page to breathe. */
            .site-search { position:relative; display:flex; align-items:center; gap:.4rem; min-width:0; }
            .site-search-input, .public-search-form input { min-width:0; width:100%; padding:.5rem .65rem; border:1px solid var(--color-border,#d1d5db); border-radius:.375rem; color:var(--color-text,#111827); background:var(--color-background,#fff); font:inherit; }
            .site-search-input[data-input-background="transparent"] { background:transparent; }
            .site-search-button, .public-search-form button { border:0; border-radius:.375rem; padding:.5rem .7rem; background:var(--color-primary,#2563eb); color:var(--color-on-primary,#fff); font:inherit; cursor:pointer; }
            .site-search-icon-button { min-width:2.4rem; min-height:2.4rem; padding:.35rem; font-size:1.35rem; line-height:1; }
            .site-search-suggestions { position:absolute; z-index:100; top:calc(100% + .3rem); left:0; right:0; max-height:18rem; overflow:auto; margin:0; padding:.25rem; list-style:none; border:1px solid var(--color-border,#d1d5db); border-radius:.375rem; background:var(--color-background,#fff); box-shadow:0 8px 20px rgba(0,0,0,.15); }
            .site-search-suggestion { padding:.55rem .65rem; cursor:pointer; color:var(--color-text,#111827); border-radius:.25rem; }
            .site-search-suggestion[aria-selected="true"], .site-search-suggestion:hover { background:var(--color-surface,#f3f4f6); }
            .public-search-page { max-width:900px; margin:0 auto; padding:3rem 1.25rem; color:var(--color-text,#111827); }
            .public-search-page h1 { margin:0 0 1rem; font-size:2rem; }
            .public-search-form { display:flex; gap:.6rem; align-items:end; flex-wrap:wrap; margin-bottom:1.5rem; }
            .public-search-form label { width:100%; font-weight:600; }
            .public-search-form input { flex:1 1 18rem; }
            .public-search-results { display:grid; gap:1rem; padding:0; list-style:none; }
            .public-search-result { padding:1rem; border:1px solid var(--color-border,#e5e7eb); border-radius:.5rem; }
            .public-search-result h2 { margin:.35rem 0; font-size:1.2rem; }.public-search-result p { margin:.35rem 0 .65rem; color:var(--color-textSecondary,#4b5563); }
            .public-search-result a, .public-search-pages a { color:var(--color-primary,#2563eb); }.public-search-type,.public-search-strength { font-size:.8rem; }.public-search-strength { float:right; color:var(--color-textSecondary,#4b5563); }
            .public-search-pages { display:flex; justify-content:center; gap:1rem; margin-top:1.5rem; }
            @media (max-width: 640px) { .site-search { width:100%; }.public-search-form { align-items:stretch; }.public-search-form button { width:100%; } }
            
            /* Quill alignment styles for rich text content */
            .ql-align-center {
              text-align: center;
            }
            .ql-align-right {
              text-align: right;
            }
            .ql-align-justify {
              text-align: justify;
            }
            .ql-indent-1 { padding-left: 3em; }
            .ql-indent-2 { padding-left: 6em; }
            .ql-indent-3 { padding-left: 9em; }
            .ql-indent-4 { padding-left: 12em; }
            .ql-indent-5 { padding-left: 15em; }
            
            /* Quill font families - matches Quill whitelist */
            .ql-font-arial { font-family: Arial, sans-serif; }
            .ql-font-helvetica { font-family: Helvetica, sans-serif; }
            .ql-font-georgia { font-family: Georgia, serif; }
            .ql-font-times-new-roman { font-family: 'Times New Roman', serif; }
            .ql-font-courier-new { font-family: 'Courier New', monospace; }
            .ql-font-verdana { font-family: Verdana, sans-serif; }
            .ql-font-comic-sans { font-family: 'Comic Sans MS', cursive; }
            .ql-font-lucida { font-family: 'Lucida Console', monospace; }
            .ql-font-inter { font-family: 'Inter', sans-serif; }
            .ql-font-poppins { font-family: 'Poppins', sans-serif; }
            .ql-font-permanent-marker { font-family: 'Permanent Marker', cursive; }
            .ql-font-theme-body { font-family: var(--font-primary, system-ui, sans-serif); }
            .ql-font-theme-header { font-family: var(--font-secondary, var(--font-primary, system-ui)); }
            .ql-font-serif { font-family: Georgia, 'Times New Roman', serif; }
            .ql-font-monospace { font-family: 'Courier New', Consolas, monospace; }
            
            /* Quill code blocks */
            pre.ql-syntax,
            .rich-text-content pre,
            .puck-text pre {
              background-color: var(--color-surface, #f5f5f5);
              color: var(--color-text, #333);
              padding: 12px 16px;
              border-radius: 6px;
              overflow-x: auto;
              font-family: 'Courier New', Consolas, monospace;
              font-size: 0.9em;
              line-height: 1.5;
              margin: 16px 0;
              white-space: pre-wrap;
              word-wrap: break-word;
            }
            
            /* Quill inline code */
            .rich-text-content code,
            .puck-text code {
              background-color: var(--color-surface, #f0f0f0);
              padding: 2px 6px;
              border-radius: 3px;
              font-family: 'Courier New', Consolas, monospace;
              font-size: 0.9em;
            }
            
            /* Quill blockquote */
            .rich-text-content blockquote,
            .puck-text blockquote,
            blockquote.ql-blockquote {
              border-left: 4px solid var(--color-primary, #3b82f6);
              padding-left: 16px;
              margin: 16px 0;
              font-style: italic;
              color: var(--color-text-secondary, #666);
            }
            
            /* Quill paragraph spacing */
            p {
              margin-bottom: 15px;
            }
            p:last-child {
              margin-bottom: 0;
            }
            
            /* Rich text content - Quill formatting styles */
            .rich-text-content ul,
            .puck-text ul {
              margin: 15px 0;
              padding-left: 1.5em;
              list-style-type: disc;
              list-style-position: outside;
            }
            
            .rich-text-content ol,
            .puck-text ol {
              margin: 15px 0;
              padding-left: 1.5em;
              list-style-type: decimal;
              list-style-position: outside;
            }
            
            .rich-text-content li,
            .puck-text li {
              margin-bottom: 8px;
              display: list-item;
              padding-left: 0.5em;
            }
            
            /* Nested lists */
            .rich-text-content ul ul,
            .puck-text ul ul {
              list-style-type: circle;
              margin-top: 8px;
              margin-bottom: 8px;
            }
            
            .rich-text-content ul ul ul,
            .puck-text ul ul ul {
              list-style-type: square;
            }
            
            .rich-text-content ol ol,
            .puck-text ol ol {
              list-style-type: lower-alpha;
              margin-top: 8px;
              margin-bottom: 8px;
            }
            
            .rich-text-content ol ol ol,
            .puck-text ol ol ol {
              list-style-type: lower-roman;
            }
            
            /* Responsive Grid - matches Puck editor behavior */
            /* Uses CSS variable for column count set via inline style */
            .puck-grid {
              display: grid;
              gap: 1rem;
            }
            .puck-grid.responsive-grid {
              grid-template-columns: 1fr;  /* Mobile: single column */
            }
            @media (min-width: 768px) {
              .puck-grid.responsive-grid {
                grid-template-columns: var(--grid-template, repeat(var(--grid-columns, 2), 1fr));
              }
            }
            .puck-grid-column {
              /* Structural child wrapper: content components own appearance. */
            }
            
            /* Header Navigation */
            .site-header {
              position: relative;
              
              background: var(--color-surface, #f5f5f5);
              
              padding: 1rem;
              border-bottom: 1px solid var(--color-border, #ddd);
              
              
            }
            
            /* Background image layer — sits above bg color, below all content (same as React approach) */
            
            
            .site-header nav > ul {
              list-style: none;
              display: flex;
              flex-direction: row;
              gap: 2rem;
              max-width: var(--header-max-width, var(--content-max-width, 1200px));
              margin: 0 auto;
              align-items: center;
              justify-content: center;
            }
            
            .site-header nav a,
            .site-header nav a:link,
            .site-header nav a:visited,
            .site-header nav a:hover,
            .site-header nav a:active,
            .site-header .nav-link,
            .site-header .nav-link-dropdown,
            .site-header .nav-menu a {
              color: var(--color-text, #333);
              text-decoration: none;
            }
            
            .site-header nav a:hover,
            .site-header .nav-link:hover,
            .site-header .nav-link-dropdown:hover {
              opacity: 0.8;
              
              text-decoration: none;
            }
            
            /* Navigation Style variants */
            .site-header .nav-link,
                  .site-header .nav-link-dropdown {
                    padding: 0.5rem 1rem;
                    border-radius: 0.375rem;
                    transition: background-color 0.2s ease;
                  }
                  .site-header .nav-link:hover,
                  .site-header .nav-link-dropdown:hover {
                    background-color: rgba(0,0,0,0.05);
                    opacity: 1;
                  }
            
            /* Footer */
            .site-footer {
              background: var(--color-surface, #f5f5f5);
              color: var(--color-text, #333);
              padding: 2rem 1rem 1rem;
              margin-top: 4rem;
              border-top: 1px solid var(--color-border, #ddd);
              
            }
            
            .site-footer a {
              color: var(--color-primary, #1976d2);
              text-decoration: none;
            }
            
            .site-footer a:hover {
              opacity: 0.8;
            }
            
            /* Ensure all footer navigation links have no underline */
            .site-footer ul a,
            .site-footer nav a,
            .site-footer li a {
              text-decoration: none;
            }
            
            /* Main content */
            main {
              max-width: var(--content-max-width, 1200px);
              margin: 0 auto;
              padding: 2rem;
            }

            /* A leading hero sits flush beneath the site header by cancelling main's
               2rem top padding. This applies in every content-width mode (not just
               full width). Only the FIRST child matches, so a hero placed lower on the
               page is never pulled upward. */
            #puck-content > .puck-hero:first-child {
              margin-top: -2rem;
            }
            
            h1, h2, h3, h4, h5, h6 {
              color: var(--color-heading, var(--color-text, #333));
              /* Parity with the editor/preview: .puck-root h1–h6 use the theme's
                 header font (--font-secondary). Without this, published headings
                 silently fall back to the body font. */
              font-family: var(--font-secondary, var(--font-primary, system-ui));
            }

            h1 {
              margin-bottom: 1rem;
            }
            
            .published-note {
              color: var(--color-textSecondary, #666);
              font-size: 0.875rem;
              margin-bottom: 2rem;
            }
            
            .content-preview {
              background: var(--color-surface, #f9f9f9);
              padding: 2rem;
              border-radius: 8px;
              border: 1px solid var(--color-border, #ddd);
            }
            
            /* @pqina/flip v1.8.4 - Vendor CSS for Flip Counter */
            .tick{box-sizing:border-box;-webkit-user-select:none;-ms-user-select:none;user-select:none;cursor:default;position:relative;z-index:1;line-height:1.4}.tick *{box-sizing:inherit}.tick [data-view]{max-width:100%}.tick span[data-view]{display:inline-block}.tick .tick-credits{position:absolute;right:0;bottom:0;opacity:.4;text-decoration:none;font-size:11px;color:inherit}.tick [data-layout~=pad]{margin:-.25em}.tick [data-layout~=pad]>*{margin:.25em}.tick [data-layout~=horizontal]{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:center;justify-content:center}.tick [data-layout~=horizontal][data-layout~=baseline]{-ms-flex-align:baseline;align-items:baseline}.tick [data-layout~=horizontal][data-layout~=center]{-ms-flex-pack:center;justify-content:center}.tick [data-layout~=horizontal][data-layout~=right]{-ms-flex-pack:end;justify-content:flex-end}.tick [data-layout~=horizontal][data-layout~=left]{-ms-flex-pack:start;justify-content:flex-start}.tick [data-layout~=horizontal][data-layout~=fill],.tick [data-layout~=horizontal][data-layout~=stretch]{-ms-flex-line-pack:stretch;align-content:stretch;-ms-flex-wrap:nowrap;flex-wrap:nowrap}.tick [data-layout~=horizontal][data-layout~=fill]>*,.tick [data-layout~=horizontal][data-layout~=stretch]>*{-ms-flex:1 0 0px;flex:1 0 0;width:100%}.tick [data-layout~=horizontal][data-layout~=multi-line]{-ms-flex-wrap:wrap;flex-wrap:wrap}.tick [data-layout~=horizontal][data-layout~=fit]{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-ms-flex-line-pack:center;align-content:center;white-space:nowrap;-ms-flex-pack:start;justify-content:flex-start}.tick [data-layout~=vertical]{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center}.tick [data-layout~=vertical][data-layout~=top]{-ms-flex-pack:start;justify-content:flex-start}.tick [data-layout~=vertical][data-layout~=bottom]{-ms-flex-pack:end;justify-content:flex-end;min-height:100%}.tick [data-layout~=vertical][data-layout~=middle]{-ms-flex-pack:center;justify-content:center;min-height:100%}.tick [data-layout~=vertical][data-layout~=left]{-ms-flex-align:start;align-items:flex-start}.tick [data-layout~=vertical][data-layout~=right]{-ms-flex-align:end;align-items:flex-end}.tick [data-layout~=vertical][data-layout~=center]{text-align:center}.tick [data-layout~=vertical][data-layout~=fill],.tick [data-layout~=vertical][data-layout~=stretch]{-ms-flex-align:stretch;align-items:stretch;min-height:100%}.tick [data-layout~=vertical][data-layout~=fill]>*,.tick [data-layout~=vertical][data-layout~=stretch]>*{-ms-flex:1 0 0px;flex:1 0 0}.tick [data-layout~=vertical]>*+*{margin-top:.5em}.tick [data-layout~=overlay]{position:relative}.tick [data-layout~=overlay]>*{margin:0}.tick [data-layout~=overlay][data-layout~=center]{text-align:center}.tick [data-layout~=overlay][data-layout~=left]{text-align:left}.tick [data-layout~=overlay][data-layout~=right]{text-align:right}.tick [data-layout~=overlay]>[data-overlay=fill],.tick [data-layout~=overlay]>[data-overlay=stretch]{position:absolute;left:0;right:0;top:0;bottom:0}.tick [data-layout~=overlay]>[data-overlay=center]{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;position:absolute;left:0;right:0;top:0;bottom:0}.tick-flip{position:relative;text-align:center}.tick-flip *{border-radius:inherit;white-space:pre;letter-spacing:inherit;text-indent:inherit}.tick-flip-front{border-bottom-left-radius:0;border-bottom-right-radius:0}.tick-flip-back{border-top-left-radius:0;border-top-right-radius:0}.tick-flip-spacer{display:block;visibility:hidden}.tick-flip-shadow{position:absolute;left:1px;right:1px;top:1px;bottom:1px;color:transparent!important;background:transparent!important}.tick-flip-shadow-top{bottom:calc(50% - 1px)}.tick-flip-shadow-bottom{top:calc(50% + 1px)}.tick-flip-card-shadow{position:absolute;left:.15em;right:.15em;bottom:.125em;height:.5em;background-color:transparent;border-radius:0;opacity:0;transform-origin:0 100%;box-shadow:0 .125em .25em rgba(0,0,0,.5),0 .125em .5em rgba(0,0,0,.75);z-index:0}.tick-flip-card{position:absolute;z-index:1;left:0;top:0;width:100%;height:100%;perspective:4em}.tick-flip-panel-back,.tick-flip-panel-front{position:absolute;left:0;width:100%;height:51%;backface-visibility:hidden;transform-style:preserve-3d}.tick-flip-panel-back-text,.tick-flip-panel-front-text{position:absolute;left:-1px;top:0;right:-1px;height:100%;overflow:hidden}.tick-flip-panel-text-wrapper{position:absolute;left:0;top:0;right:0;height:100%}.tick-flip-panel-back-text .tick-flip-panel-text-wrapper{height:200%;top:-100%}.tick-flip-panel-front{transform-origin:center bottom;top:0;z-index:2;box-shadow:inset 0 1px hsla(0,0%,100%,.05)}.tick-flip-panel-back{transform-origin:center top;top:50%;z-index:1;box-shadow:inset 0 -1px rgba(0,0,0,.1)}.tick-flip-panel-back:after{z-index:1;content:"";position:absolute;left:0;top:0;width:100%;height:100%;background-image:linear-gradient(180deg,rgba(0,0,0,.3) 1px,rgba(0,0,0,.15) 0,transparent 30%)}.tick-flip-panel-back-shadow{z-index:2}.tick-flip-panel-back-highlight{z-index:3}.tick-flip-panel-back-highlight,.tick-flip-panel-back-shadow{border-bottom-left-radius:inherit;border-bottom-right-radius:inherit}.tick-flip-panel-back-highlight,.tick-flip-panel-back-shadow,.tick-flip-panel-front-shadow{position:absolute;left:0;top:0;right:0;bottom:0;opacity:0}.tick-flip-panel-front-shadow{background-image:linear-gradient(0deg,rgba(0,0,0,.8),rgba(0,0,0,.3))}.tick-flip-panel-back-shadow{background-image:linear-gradient(180deg,rgba(0,0,0,.7),rgba(0,0,0,.5))}.tick-flip-panel-back-highlight{background-image:linear-gradient(180deg,hsla(0,0%,100%,.15),hsla(0,0%,100%,.3))}.tick [data-style*="shadow:inner"],.tick [data-style*="shadow:inner"] .tick-flip-card-shadow,.tick [data-style*="shadow:none"] .tick-flip-card-shadow,.tick [data-style*="shadow:none"] .tick-flip-panel-back,.tick [data-style*="shadow:none"] .tick-flip-panel-front,.tick [data-style*="shadow:none"] .tick-flip-shadow{box-shadow:none}.tick [data-style*="shadow:none"] .tick-flip-back:after,.tick [data-style*="shadow:none"] .tick-flip-panel-back-shadow,.tick [data-style*="shadow:none"] .tick-flip-panel-back-text:after,.tick [data-style*="shadow:none"] .tick-flip-panel-front-shadow{background-image:none}.tick [data-style*="rounded:none"]{border-radius:0}.tick [data-style*="rounded:panels"] .tick-flip-front,.tick [data-style*="rounded:panels"] .tick-flip-shadow-bottom{border-bottom-left-radius:inherit;border-bottom-right-radius:inherit}.tick [data-style*="rounded:panels"] .tick-flip-back,.tick [data-style*="rounded:panels"] .tick-flip-panel-back:after,.tick [data-style*="rounded:panels"] .tick-flip-shadow-top{border-top-left-radius:inherit;border-top-right-radius:inherit}.tick-flip{margin-left:.0625em;margin-right:.0625em;min-width:1.125em;border-radius:.125em;letter-spacing:.25em;text-indent:.25em}.tick-flip-panel{color:#edebeb;background-color:#333232}.tick-flip-shadow{box-shadow:0 .125em .3125em rgba(0,0,0,.25),0 .02125em .06125em rgba(0,0,0,.25)}
            
            /* Custom Flip Counter Styling */
            .tick {
              font-size: 1rem;
              white-space: nowrap;
              font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
            }

            .tick-flip, .tick-text-inline {
              font-size: 2.5em;
            }

            .tick-label {
              margin-top: 1em;
              font-size: 1em;
              color: var(--color-textSecondary, #696996);
              text-transform: uppercase;
              letter-spacing: 0.1em;
            }

            .tick-char {
              width: 1.5em;
            }

            .tick-text-inline {
              display: inline-block;
              text-align: center;
              min-width: 1em;
              color: var(--color-text, #15151e);
            }

            .tick-text-inline + .tick-text-inline {
              margin-left: -0.325em;
            }

            .tick-group {
              margin: 0 0.5em;
              text-align: center;
            }

            /* Flip Clock Panel - Classic Segmented Display Style */
            .tick-flip-panel {
              color: #ffffff !important;
              background-color: #2b2b2b !important;
              border-radius: 0.15em !important;
              box-shadow: 
                0 0.05em 0 rgba(0, 0, 0, 0.6),
                0 0.15em 0.15em rgba(0, 0, 0, 0.4) !important;
            }

            /* Add subtle gradient for 3D depth effect */
            .tick-flip-panel::before {
              background: linear-gradient(
                to bottom,
                rgba(255, 255, 255, 0.1) 0%,
                rgba(255, 255, 255, 0) 50%,
                rgba(0, 0, 0, 0.2) 100%
              ) !important;
            }

            /* Flip card container with shadow */
            .tick-flip {
              border-radius: 0.15em !important;
              font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
              font-weight: 600 !important;
              box-shadow: 0 0.2em 0.4em rgba(0, 0, 0, 0.3) !important;
            }

            /* Middle divider line between flip panels for segmented look */
            .tick-flip::after {
              background: #1a1a1a !important;
              height: 0.05em !important;
            }

            /* Text positioning and line height */
            .tick-flip-panel-text-wrapper {
              line-height: 1.5 !important;
            }

            /* Spacing between individual digit cards */
            .tick-flip + .tick-flip {
              margin-left: 0.1em;
            }
            
            /* Navigation Dropdown Styles */
            .nav-menu {
              position: relative;
            }
            
            .nav-item-dropdown {
              position: relative;
            }
            
            .nav-link, .nav-link-dropdown {
              color: var(--color-text, #333);
              font-family: Inter;
              text-decoration: none;
              padding: 0.5rem 0.75rem;
              display: inline-flex;
              align-items: center;
              position: relative;
              border-radius: 4px;
              transition: background-color 0.2s, color 0.2s, border-color 0.2s;
              cursor: pointer;
              font-weight: 500;
            }
            
            /* Navigation underline element for underline style */
            .nav-link .nav-underline, .nav-link-dropdown .nav-underline {
              position: absolute;
              bottom: 0;
              left: 50%;
              transform: translateX(-50%);
              height: 2px;
              width: 0%;
              background-color: var(--color-text, #333);
              transition: width 0.2s ease;
            }
            
            /* Default style hover */
            
            .nav-link:hover, .nav-link-dropdown:hover {
              background-color: rgba(0,0,0,0.05);
              
            }
            
            
            /* Underline style hover */
            
            
            /* Pill style hover */
            
            
            /* Bar style hover */
            
            
            .dropdown-arrow {
              font-size: 0.7em;
              margin-left: 0.3rem;
              transition: transform 0.2s;
            }
            
            .nav-item-dropdown.active .dropdown-arrow {
              transform: rotate(180deg);
            }
            
            .nav-dropdown {
              display: none;
              position: absolute;
              top: 100%;
              left: 0;
              min-width: 200px;
              background: #ffffff;
              border: 1px solid var(--color-border, #e5e7eb);
              border-radius: 4px;
              box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
              padding: 0.5rem 0;
              margin-top: 0.25rem;
              list-style: none;
              z-index: 1000;
            }
            
            /* Dropdown visibility controlled by JavaScript with delay support */
            .nav-item-dropdown.active .nav-dropdown {
              display: block;
            }
            
            .nav-dropdown li {
              margin: 0;
            }
            
            .site-header .nav-dropdown a,
            .site-header .nav-dropdown a:link,
            .site-header .nav-dropdown a:visited,
            .site-header .nav-dropdown a:active {
              color: #333333;
              font-family: Inter;
              text-decoration: none;
              padding: 0.5rem 1rem;
              display: block;
              transition: background-color 0.2s, color 0.2s;
              font-weight: 400;
            }
            
            .site-header .nav-dropdown a:hover {
              background-color: rgba(0,0,0,0.05);
              color: #111111;
            }
            
            /* Nested dropdown (fly-out) styles */
            .nav-item-nested {
              position: relative;
            }
            
            .nav-item-nested .dropdown-arrow {
              transform: rotate(0deg);
            }
            
            /* Nested dropdowns fly out to the right - HIDDEN by default */
            .nav-item-nested > .nav-dropdown {
              display: none !important;
              top: 0;
              left: 100%;
              margin-top: 0;
              margin-left: 0;
            }
            
            /* Show nested dropdown ONLY on direct hover (CSS-based, no JS active class) */
            .nav-item-nested:hover > .nav-dropdown {
              display: block !important;
            }
            
            /* Note: Click mode and hover delays are now fully handled by JavaScript */
            
            /* Mobile Navigation Styles */
            .mobile-menu-toggle {
              display: none;
              background: none;
              border: none;
              cursor: pointer;
              padding: 0.5rem;
              color: var(--color-text, #333);
              font-size: 1.5rem;
              line-height: 1;
            }
            
            .mobile-nav {
              display: none;
            }
            
            @media (max-width: 768px) {
              .mobile-menu-toggle {
                display: block;
                margin-left: auto;
              }
              
              .desktop-nav {
                display: none !important;
              }
              
              .mobile-nav {
                display: none;
                position: fixed;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background: var(--color-surface, #ffffff);
                color: var(--color-text, #333);
                z-index: 9999;
                overflow-y: auto;
              }
              
              .mobile-nav.active {
                display: block;
              }
              
              .mobile-nav-header {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 1rem;
                border-bottom: 1px solid var(--color-border, #ddd);
              }
              
              .mobile-nav-close {
                background: none;
                border: none;
                cursor: pointer;
                padding: 0.5rem;
                color: var(--color-text, #333);
                font-size: 1.5rem;
                line-height: 1;
              }
              
              .mobile-nav ul {
                list-style: none;
                margin: 0;
                padding: 0;
              }
              
              .mobile-nav ul li {
                border-bottom: 1px solid var(--color-border, #ddd);
              }
              
              .mobile-nav ul li a {
                display: block;
                padding: 1rem;
                color: var(--color-text, #333);
                text-decoration: none;
                font-size: 1.1rem;
              }
              
              .mobile-nav ul li a:active {
                background: rgba(0,0,0,0.05);
                
              }
              
              /* Nested sublists — real hierarchy: indented, slightly smaller,
                 with a left guide border so parent/child structure is visible */
              .mobile-nav ul ul.mobile-nav-sub {
                margin: 0 0 0 1rem;
                padding: 0;
                border-left: 2px solid var(--color-border, #ddd);
              }
              
              .mobile-nav ul ul.mobile-nav-sub li {
                border-bottom: none;
              }
              
              .mobile-nav ul ul.mobile-nav-sub li a {
                padding: 0.65rem 1rem;
                font-size: 1rem;
              }
            }
            
            /* ----------------------------------------------
               Custom Quill Blot Styles for Rich Text Content
               ---------------------------------------------- */
            
            /* Floatable Image Styles */
            .ql-floatable-image {
              display: inline-block;
              max-width: 100%;
              margin: 12px 0;
              vertical-align: top;
            }
            
            .ql-floatable-image img {
              display: block;
              max-width: 100%;
              height: auto;
              border-radius: 8px;
            }
            
            .ql-floatable-image.float-left {
              float: left;
              margin: 0 20px 12px 0;
              max-width: 50%;
              clear: none;
            }
            
            .ql-floatable-image.float-right {
              float: right;
              margin: 0 0 12px 20px;
              max-width: 50%;
              clear: none;
            }
            
            .ql-floatable-image.float-none {
              float: none;
              display: block;
              margin: 12px auto;
              max-width: 100%;
            }
            
            .ql-floatable-image.width-small { max-width: 25% !important; }
            .ql-floatable-image.width-medium { max-width: 50% !important; }
            .ql-floatable-image.width-large { max-width: 75% !important; }
            .ql-floatable-image.width-full { max-width: 100% !important; }
            
            /* Video Embed Styles */
            .ql-video-embed {
              display: block;
              margin: 16px 0;
              max-width: 100%;
              clear: both;
            }
            
            .ql-video-embed .video-embed-wrapper {
              position: relative;
              padding-bottom: 56.25%;
              height: 0;
              overflow: hidden;
              border-radius: 8px;
            }
            
            .ql-video-embed .video-embed-wrapper iframe,
            .ql-video-embed .video-embed-wrapper video {
              position: absolute;
              top: 0;
              left: 0;
              width: 100%;
              height: 100%;
            }
            
            .ql-video-embed.float-left {
              float: left;
              margin: 0 20px 12px 0;
              clear: none;
            }
            
            .ql-video-embed.float-right {
              float: right;
              margin: 0 0 12px 20px;
              clear: none;
            }
            
            .ql-video-embed.float-none {
              float: none;
              margin: 16px auto;
            }
            
            .ql-video-embed.width-small { width: 200px !important; min-width: 200px !important; }
            .ql-video-embed.width-medium { width: 320px !important; min-width: 320px !important; }
            .ql-video-embed.width-large { width: 480px !important; min-width: 480px !important; }
            .ql-video-embed.width-full { width: 100% !important; max-width: 100% !important; float: none !important; margin: 16px auto !important; }
            
            /* File Card Styles */
            .ql-file-card {
              display: inline-flex;
              align-items: center;
              gap: 12px;
              padding: 12px 16px;
              background: var(--color-surface, #f8fafc);
              border: 1px solid var(--color-border, #e2e8f0);
              border-radius: 8px;
              text-decoration: none;
              color: var(--color-text, inherit);
              margin: 8px 0;
              max-width: 320px;
              transition: all 0.2s ease;
              box-sizing: border-box;
            }
            
            .ql-file-card:hover {
              background: var(--color-surface, #f1f5f9);
              border-color: var(--color-text, #cbd5e1);
              opacity: 0.9;
            }
            
            .ql-file-card .file-icon {
              width: 40px;
              height: 40px;
              border-radius: 8px;
              display: flex;
              align-items: center;
              justify-content: center;
              font-size: 20px;
              flex-shrink: 0;
            }
            
            .ql-file-card .file-icon.pdf { background: #fef2f2; color: #dc2626; }
            .ql-file-card .file-icon.doc { background: #eff6ff; color: #2563eb; }
            .ql-file-card .file-icon.spreadsheet { background: #f0fdf4; color: #16a34a; }
            .ql-file-card .file-icon.default { background: var(--color-surface, #f8fafc); color: var(--color-textSecondary, #64748b); }
            
            .ql-file-card .file-info {
              flex: 1;
              min-width: 0;
              overflow: hidden;
            }
            
            .ql-file-card .file-name {
              font-weight: 600;
              font-size: 14px;
              color: var(--color-text, #1e293b);
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }
            
            .ql-file-card .file-size {
              font-size: 12px;
              color: var(--color-textSecondary, #64748b);
              margin-top: 2px;
            }
            
            .ql-file-card.float-left {
              float: left;
              margin: 8px 16px 8px 0;
            }
            
            .ql-file-card.float-right {
              float: right;
              margin: 8px 0 8px 16px;
            }
            
            /* Mobile Responsive Styles for Quill Blots */
            @media (max-width: 768px) {
              /* File cards on mobile - stacked treatment */
              .ql-file-card {
                display: flex !important;
                flex-direction: column !important;
                align-items: center !important;
                max-width: 120px !important;
                width: auto !important;
                box-sizing: border-box !important;
                padding: 12px !important;
                gap: 6px !important;
                text-align: center !important;
              }
              
              .ql-file-card.float-left,
              .ql-file-card.float-right {
                float: none !important;
                margin: 8px 0 !important;
              }
              
              .ql-file-card .file-icon {
                width: 40px !important;
                height: 40px !important;
                font-size: 18px !important;
                border-radius: 8px !important;
              }
              
              .ql-file-card .file-info {
                min-width: 0 !important;
                width: 100% !important;
                overflow: hidden !important;
                text-align: center !important;
              }
              
              .ql-file-card .file-name {
                max-width: 100% !important;
                font-size: 11px !important;
                overflow: hidden !important;
                text-overflow: ellipsis !important;
                white-space: nowrap !important;
                display: block !important;
              }
              
              .ql-file-card .file-size {
                display: none !important;
              }
              
              /* Floatable images on mobile - remove float and constrain */
              .ql-floatable-image {
                max-width: 100% !important;
                box-sizing: border-box;
              }
              
              .ql-floatable-image.float-left,
              .ql-floatable-image.float-right {
                float: none !important;
                margin: 12px 0 !important;
                max-width: 100% !important;
              }
              
              .ql-floatable-image img {
                max-width: 100% !important;
                height: auto !important;
              }
              
              /* Video embeds on mobile */
              .ql-video-embed.float-left,
              .ql-video-embed.float-right {
                float: none !important;
                margin: 16px 0 !important;
                width: 100% !important;
              }
              
              /* Text content word wrapping */
              .rich-text-content,
              .puck-text {
                max-width: 100% !important;
                overflow-wrap: break-word !important;
                word-wrap: break-word !important;
                word-break: break-word !important;
              }
            }
            
            /* Pull Quote Styles */
            .ql-pull-quote {
              display: block;
              margin: 24px 0;
              padding: 0;
              position: relative;
            }
            
            .ql-pull-quote .pull-quote-wrapper {
              padding: 20px 24px;
              background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
              border-left: 4px solid #3b82f6;
              border-radius: 0 8px 8px 0;
              position: relative;
            }
            
            .ql-pull-quote .pull-quote-mark {
              font-size: 48px;
              line-height: 1;
              color: #3b82f6;
              opacity: 0.3;
              font-family: Georgia, serif;
              position: absolute;
            }
            
            .ql-pull-quote .pull-quote-mark.open {
              top: 8px;
              left: 12px;
            }
            
            .ql-pull-quote .pull-quote-mark.close {
              bottom: 0;
              right: 16px;
            }
            
            .ql-pull-quote .pull-quote-text {
              font-size: 1.25rem;
              font-style: italic;
              font-weight: 500;
              line-height: 1.6;
              color: #334155;
              text-align: center;
              margin: 0;
              padding: 8px 32px;
            }
            
            .ql-pull-quote.float-left {
              float: left;
              margin: 8px 24px 16px 0;
              clear: none;
            }
            
            .ql-pull-quote.float-right {
              float: right;
              margin: 8px 0 16px 24px;
              clear: none;
            }
            
            .ql-pull-quote.float-none {
              float: none;
              margin: 24px auto;
            }
            
            .ql-pull-quote.width-small { width: 200px !important; min-width: 200px !important; }
            .ql-pull-quote.width-medium { width: 280px !important; min-width: 280px !important; }
            .ql-pull-quote.width-large { width: 360px !important; min-width: 360px !important; }
            .ql-pull-quote.width-full { width: 100% !important; max-width: 100% !important; float: none !important; margin: 24px auto !important; }
            
            /* Clear floats after rich text content */
            .text-content::after,
            .rich-text-content::after {
              content: "";
              display: table;
              clear: both;
            }

            /* Render class contract (Task #156): default component structure on
               documented stable classes. Emitted here — after all base styles,
               immediately before the site's custom CSS — so custom CSS overrides
               it at equal specificity. Reproduces the renderer's previous inline
               defaults so sites without custom CSS are unchanged. */
            /* Render class contract v1.9.0 — site chrome structural-only (designer-owned appearance). */
.site-header .header-logo {
  flex-shrink: 0;
}
.site-header .header-logo-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.site-header .header-logo-img {
  width: 100%;
  height: auto;
  object-fit: contain;
}
.site-header .header-nav {
  flex: 1;
}
.site-header .nav-menu {
  list-style: none;
  display: flex;
  width: 100%;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.site-header .header-cta {
  flex-shrink: 0;
}
.site-header .header-cta-button {
  display: inline-block;
}
.site-header .header-social {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}
.site-header .header-social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
}
.site-header .header-contact {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.site-header .header-grid {
  max-width: var(--header-max-width, var(--content-max-width, 1200px));
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.site-header .header-grid-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 40px;
}
.site-header .header-grid-zone {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.site-header .header-grid-zone--center {
  flex: 1;
}
.site-header .header-flex {
  max-width: var(--header-max-width, var(--content-max-width, 1200px));
  display: flex;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
}
.site-footer .site-footer-content {
  max-width: var(--footer-max-width, var(--content-max-width, 1200px));
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
}
.site-footer .site-footer-logo {
  width: 100%;
  max-width: 150px;
  height: auto;
}
.site-footer .site-footer-links {
  list-style: none;
}
.site-footer .site-footer-social {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}
.site-footer .site-footer-empty {
  text-align: center;
}
.site-footer .footer-bottom-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.site-footer .footer-bottom-bar-link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}
            /* Render class contract v1.9.0 — structural-only (designer-owned appearance). */
.puck-card {
  display: block;
  overflow: hidden;
}
.puck-grid-heading {
  text-align: center;
}
.puck-grid-subheading {
  text-align: center;
}
.puck-columns {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
}
.puck-columns-col {
  min-width: 200px;
}
.puck-column {
  min-width: 150px;
  min-height: 100px;
  display: flex;
  flex-direction: column;
}
.puck-button-container {
  display: flex;
  align-self: flex-start;
  width: 100%;
}
.puck-button {
  display: inline-block;
}
.puck-stats-title {
  text-align: center;
}
.puck-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 32px;
}
.puck-stat-card {
  text-align: center;
}
.puck-hero--standard {
  display: flex;
  align-items: center;
  justify-content: center;
}
.puck-hero--carousel {
  position: relative;
  overflow: hidden;
}
.puck-hero--video {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}
.puck-hero--split {
  display: flex;
  flex-wrap: wrap;
}
.puck-hero--minimal {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.puck-hero--offset {
  position: relative;
  display: flex;
}
.puck-hero-content {
  max-width: 800px;
}
.puck-hero--video .puck-hero-content {
  position: relative;
  z-index: 2;
}
.puck-hero--split .puck-hero-content {
  max-width: 500px;
}
.puck-hero--minimal .puck-hero-content {
  max-width: 600px;
}
.puck-hero--offset .puck-hero-content {
  max-width: 500px;
}
.puck-hero-eyebrow {
  display: inline-block;
}
.puck-hero--minimal .puck-hero-subtitle {
  max-width: 500px;
}
.puck-hero-cta-primary {
  display: inline-block;
}
.puck-hero-cta-secondary {
  display: inline-block;
}
.puck-hero--carousel .carousel-slide {
  align-items: center;
  justify-content: center;
}
.puck-hero--carousel .carousel-slides {
  position: relative;
}
.puck-hero--carousel .carousel-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}
.puck-hero--carousel .carousel-prev {
  left: 1rem;
}
.puck-hero--carousel .carousel-next {
  right: 1rem;
}
.puck-hero--carousel .carousel-dots {
  position: absolute;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.5rem;
  z-index: 10;
}
.puck-hero--carousel .carousel-dot {
  width: 12px;
  height: 12px;
}
.puck-hero-video-el {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.puck-hero-video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
}
.puck-hero-split-panel {
  flex: 1;
  min-width: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.puck-hero-split-image {
  flex: 1;
  min-width: 300px;
}
.puck-grid-preset {
  display: grid;
}
.puck-flex {
  display: flex;
}
.puck-flex-item {
  flex-shrink: 0;
}
.puck-video {
  display: flex;
}
.puck-video-inner {
  max-width: 100%;
}
.puck-video-media {
  width: 100%;
  display: block;
}
.puck-cta {
  text-align: center;
}
.puck-cta-description {
  max-width: 600px;
  white-space: pre-wrap;
}
.puck-cta-buttons {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}
.puck-cta-primary {
  display: inline-block;
}
.puck-cta-secondary {
  display: inline-block;
}
.puck-image {
  display: flex;
  max-width: 100%;
}
.puck-image-img {
  display: block;
  max-width: 100%;
}
.puck-image-caption {
  text-align: center;
}
.puck-image-viewer-trigger {
  display: block;
}
.puck-image-viewer-overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}
.puck-image-viewer-img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.puck-image-viewer-close {
  position: absolute;
  top: 16px;
  right: 16px;
}
.puck-image-viewer-previous, .puck-image-viewer-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.puck-image-viewer-previous {
  left: 16px;
}
.puck-image-viewer-next {
  right: 16px;
}
.puck-card-icon-horizontal .puck-card-title {
  text-align: left;
}
.puck-card-description {
  white-space: pre-wrap;
}
.puck-card-featured-overlay {
  position: absolute;
  inset: 0;
}
.puck-card-featured-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}
.puck-card-meta {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
}
.puck-card-meta-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.puck-card-meta-label {
  flex-shrink: 0;
}
.puck-card-avatar {
  width: 120px;
  height: 120px;
  overflow: hidden;
  flex-shrink: 0;
}
.puck-card-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

            /* Member Directory runtime widget appearance. Emitted in FULL for
               all site modes (no structuralOnly variant): the directory is
               built at runtime by an inline script, so on designer-owned
               sites the client inline-style stripper removes its decoration
               and this stylesheet becomes the sole source of its appearance.
               Sits before custom CSS so designer CSS can still override. */
            /* Render class contract v1.9.0 — Member Directory runtime widget (theme-token appearance; overridable by custom CSS below). */
.recur-member-dir-title {
  font-size: 1.875rem;
  font-weight: bold;
  margin: 0 0 16px;
  color: var(--color-text, #333);
  font-family: var(--font-primary, inherit);
}
.recur-member-dir-search {
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid var(--color-border, #e5e5e5);
  background: var(--color-surface, #fff);
  color: var(--color-text, #333);
  font-size: 0.9375rem;
  margin-bottom: 16px;
  font-family: var(--font-primary, inherit);
}
.recur-member-dir-chip {
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid var(--color-border, #e5e5e5);
  background: var(--color-surface, #f5f5f5);
  color: var(--color-text, #333);
  font-family: var(--font-primary, inherit);
}
.recur-member-dir-chip-active {
  background: var(--color-primary, #1976d2);
  color: var(--color-background, #fff);
}
.recur-member-dir-clear {
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  background: transparent;
  color: var(--color-textSecondary, #666);
  border: none;
  cursor: pointer;
  font-family: var(--font-primary, inherit);
}
.recur-member-dir-card {
  background: var(--color-surface, #fff);
  border-radius: 12px;
  border: 1px solid var(--color-border, #e5e5e5);
  padding: 20px;
  cursor: pointer;
  font-family: var(--font-primary, inherit);
}
.recur-member-dir-row {
  background: var(--color-surface, #fff);
  border-radius: 10px;
  border: 1px solid var(--color-border, #e5e5e5);
  padding: 12px 16px;
  cursor: pointer;
  font-family: var(--font-primary, inherit);
}
.recur-member-dir-avatar {
  border-radius: 50%;
  background: var(--color-primary, #1976d2);
  color: var(--color-background, #fff);
  font-weight: 600;
  font-family: var(--font-primary, inherit);
}
.recur-member-dir-name {
  font-weight: 600;
  color: var(--color-text, #333);
  line-height: 1.3;
}
.recur-member-dir-meta {
  font-size: 0.8125rem;
  color: var(--color-textSecondary, #666);
}
.recur-member-dir-tag {
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 500;
  background: var(--color-surface, #f5f5f5);
  color: var(--color-text, #333);
  border: 1px solid var(--color-border, #e5e5e5);
  font-family: var(--font-primary, inherit);
}
.recur-member-dir-empty {
  padding: 40px;
  color: var(--color-textSecondary, #666);
  font-family: var(--font-primary, inherit);
}
.recur-member-dir-page-btn {
  padding: 8px 14px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  background: var(--color-text, #333);
  color: var(--color-surface, #fff);
  font-size: 0.875rem;
  font-weight: 500;
  font-family: var(--font-primary, inherit);
}
.recur-member-dir-page-btn[disabled] {
  cursor: not-allowed;
  background: var(--color-border, #e5e5e5);
  color: var(--color-textSecondary, #999);
}
.recur-member-dir-page-label {
  font-size: 0.875rem;
  color: var(--color-text, #333);
}
.recur-member-dir-modal-backdrop {
  background: rgba(0, 0, 0, 0.55);
  padding: 20px;
  font-family: var(--font-primary, inherit);
}
.recur-member-dir-modal {
  background: var(--color-surface, #fff);
  color: var(--color-text, #333);
  border-radius: 12px;
  border: 1px solid var(--color-border, #e5e5e5);
}
.recur-member-dir-modal-close {
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--color-textSecondary, #666);
  border-radius: 6px;
}
.recur-member-dir-modal-title {
  font-size: 1.375rem;
  font-weight: 700;
  margin: 0;
}
.recur-member-dir-link {
  color: var(--color-primary, #1976d2);
}
.recur-member-dir-meta-sm {
  font-size: 0.75rem;
}
.recur-member-dir-card .recur-member-dir-name {
  font-size: 1rem;
}
.recur-member-dir-row .recur-member-dir-name {
  font-size: 0.9375rem;
}
.recur-member-dir-card .recur-member-dir-avatar {
  font-size: 27px;
}
.recur-member-dir-row .recur-member-dir-avatar {
  font-size: 17px;
}
.recur-member-dir-modal .recur-member-dir-avatar {
  font-size: 24px;
}
.recur-member-dir-chip[data-md-view] {
  border-radius: 6px;
}
.recur-member-dir-modal-body {
  padding: 28px 32px;
}
.recur-member-dir-modal-header {
  margin-bottom: 16px;
}
.recur-member-dir-modal-meta {
  font-size: 0.875rem;
  color: var(--color-textSecondary, #666);
}
.recur-member-dir-modal-location {
  font-size: 0.875rem;
  color: var(--color-textSecondary, #666);
  margin-bottom: 10px;
}
.recur-member-dir-modal-tags {
  margin-bottom: 14px;
}
.recur-member-dir-modal-bio {
  font-size: 0.9375rem;
  line-height: 1.6;
  margin: 0 0 16px;
}
.recur-member-dir-modal-contact {
  font-size: 0.875rem;
}
.recur-member-dir-modal-phone {
  color: var(--color-textSecondary, #666);
}

            /* Newsletter signup runtime widget (footer section + modal).
               Same always-emitted-in-full rule as the member directory: the
               modal is built at runtime by an inline script, so this
               stylesheet is the sole source of its appearance on
               designer-owned sites. Sits before custom CSS so designer CSS
               can still override. */
            /* Render class contract v1.9.0 — Newsletter signup runtime widget (theme-token appearance; overridable by custom CSS below). */
.recur-nl-description {
  margin: 0 0 12px 0;
  font-size: 0.9rem;
  line-height: 1.5;
  opacity: 0.9;
}
.recur-nl-form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  max-width: 320px;
}
.recur-nl-input {
  flex: 1 1 160px;
  min-width: 0;
  padding: 10px 16px;
  border: 1px solid var(--color-border, #d1d5db);
  border-radius: 9999px;
  font-size: 0.9rem;
  background: #ffffff;
  color: #111827;
}
.recur-nl-button {
  padding: 10px 22px;
  border: none;
  border-radius: 9999px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  background: var(--color-primary, #2563eb);
  color: var(--color-buttonText, #ffffff);
}
.recur-nl-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}
.recur-nl-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10050;
  padding: 16px;
}
.recur-nl-modal {
  background: #ffffff;
  color: #111827;
  border-radius: 12px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
  width: 100%;
  max-width: 420px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 24px;
  position: relative;
  text-align: left;
}
.recur-nl-modal-title {
  margin: 0 0 4px 0;
  font-size: 1.25rem;
  font-weight: 700;
  padding-right: 32px;
}
.recur-nl-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  background: none;
  border: none;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  color: #6b7280;
  padding: 4px;
}
.recur-nl-field {
  margin: 12px 0;
}
.recur-nl-label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 4px;
}
.recur-nl-field input[type="text"], .recur-nl-field input[type="email"] {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 0.9rem;
  background: #ffffff;
  color: #111827;
}
.recur-nl-checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 12px 0;
  font-size: 0.85rem;
  line-height: 1.4;
}
.recur-nl-error {
  color: #b91c1c;
  font-size: 0.85rem;
  margin: 8px 0;
}
.recur-nl-success {
  color: #15803d;
  font-size: 0.95rem;
  margin: 8px 0;
  line-height: 1.5;
}
.recur-nl-submit {
  width: 100%;
  padding: 10px 16px;
  border: none;
  border-radius: 9999px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  background: var(--color-primary, #2563eb);
  color: var(--color-buttonText, #ffffff);
  margin-top: 8px;
}
.recur-nl-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

            /* Tenant-provided custom CSS (advanced styling mode only). Sanitized
               to neutralize style-tag escape attempts. In native mode the value
               is stored but intentionally not applied.
               NOTE: do not write the literal closing-style token in this comment
               — the HTML parser will close the surrounding <style> block early
               and dump the rest of the comment into the page. */
            /* =============================================================
   CACEO — Custom CSS for Recur Central Renderer
   stylingMode: "advanced"
   This stylesheet is the SOLE source of visual appearance.
   The renderer's style scrubber strips all decorative inline
   styles; only layout/sizing inline properties survive.
   Target: Recur stable class contract (puck-*, recur-*).
   All values sourced from artifacts/web/src/index.css and
   component source files — see CSS_FIDELITY_GUIDE.md.
   ============================================================= */

/* 1. GOOGLE FONTS
   Recur hoists @import rules above everything else.
   ------------------------------------------------------------ */


/* 2. CSS CUSTOM PROPERTIES
   Override Recur's theme :root with CACEO brand values.
   Source: artifacts/web/src/index.css :root block
   ------------------------------------------------------------ */
:root {
  /* Brand palette — exact hex values per index.css comments */
  --color-primary:       #034C8C;  /* hsl(208 96% 28%) */
  --color-secondary:     #023059;  /* hsl(208 96% 18%) */
  --color-accent:        #BF0A30;  /* hsl(347 90% 39%) Colorado flag red */
  --color-background:    #f0f6fd;  /* hsl(210 40% 98%) */
  --color-surface:       #ffffff;
  --color-text:          #023059;  /* foreground = secondary */
  --color-heading:       #023059;
  --color-textSecondary: #64748b;  /* hsl(215 16% 47%) muted-foreground */
  --color-border:        #d9e4f0;  /* hsl(214 32% 91%) */
  --color-muted:         #f1f5f9;  /* hsl(210 40% 96%) */
  --color-card:          #ffffff;
  --color-input:         #d9e4f0;

  /* CACEO-specific aliases used throughout this file */
  --caceo-primary:        #034C8C;
  --caceo-primary-fg:     #ffffff;
  --caceo-primary-border: #023272;  /* hsl(208 96% 20%) = primary -8% L */
  --caceo-secondary:      #023059;
  --caceo-secondary-fg:   #ffffff;
  --caceo-secondary-border: #011B32; /* hsl(208 96% 10%) = secondary -8% L */
  --caceo-accent:         #BF0A30;
  --caceo-accent-fg:      #ffffff;
  --caceo-accent-border:  #960827;  /* hsl(347 90% 31%) = accent -8% L */
  --caceo-button-outline: rgba(0, 0, 0, 0.10);

  /* Typography */
  --font-primary:   'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-secondary: 'Outfit', 'Inter', sans-serif;
  --font-display:   'Outfit', 'Inter', sans-serif;
  --font-sans:      'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Heading sizes — mirror index.css / Tailwind defaults */
  --heading-h1-size:  2.5rem;   /* 40px */
  --heading-h2-size:  2rem;     /* 32px */
  --heading-h3-size:  1.5rem;   /* 24px */
  --heading-h4-size:  1.25rem;  /* 20px */
  --heading-h5-size:  1.125rem; /* 18px */
  --heading-h6-size:  1rem;     /* 16px */
  --heading-h1-color: var(--color-heading);
  --heading-h2-color: var(--color-heading);
  --heading-h3-color: var(--color-heading);
  --heading-h4-color: var(--color-heading);
  --heading-h5-color: var(--color-heading);
  --heading-h6-color: var(--color-heading);

  /* Radius — source: --radius: 0.5rem in index.css */
  --radius:    0.5rem;   /* 8px */
  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;  /* 12px — card.tsx uses rounded-xl */

  /* Shadows — source: shadow tokens in index.css (navy tint) */
  --shadow-xs: 0px 2px 0px 0px rgba(2, 48, 89, 0.05);
  --shadow-sm: 0px 2px 0px 0px rgba(2, 48, 89, 0.05), 0px 1px 2px -1px rgba(2, 48, 89, 0.05);
  --shadow:    0px 2px 0px 0px rgba(2, 48, 89, 0.05), 0px 1px 2px -1px rgba(2, 48, 89, 0.05);
  --shadow-md: 0px 2px 0px 0px rgba(2, 48, 89, 0.05), 0px 2px 4px -1px rgba(2, 48, 89, 0.05);
  --shadow-lg: 0px 2px 0px 0px rgba(2, 48, 89, 0.05), 0px 4px 6px -1px rgba(2, 48, 89, 0.05);
  --shadow-xl: 0px 2px 0px 0px rgba(2, 48, 89, 0.05), 0px 8px 10px -1px rgba(2, 48, 89, 0.05);

  /* Content width
     --content-max-width: 100% enables the renderer's "Full Width
     (edge-to-edge)" mode: main spans the viewport and heroes break out
     of main's 2rem side padding automatically. Inner content is capped
     by --container-max-width (matches the SPA's max-w-7xl = 1280px). */
  --content-max-width: 100%;
  --container-max-width: 1280px;
  /* Header/footer chrome keeps the boxed container (renderer reads these
     with higher-specificity selectors than our .header-grid rules). */
  --header-max-width: 1280px;
  --footer-max-width: 1280px;
  --container-px: 1.5rem;
  --section-py: 4rem;

  /* Transitions */
  --transition-base: 150ms ease;
}

/* 3. BASE ELEMENT STYLES
   ------------------------------------------------------------ */
body {
  font-family: var(--font-primary);
  font-size: 1rem;
  line-height: 1.625;
  color: var(--color-text);
  background-color: var(--color-background);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Headings — Outfit display font, tracking-tight */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.025em;
  color: var(--color-heading);
}

h1 { font-size: var(--heading-h1-size); }
h2 { font-size: var(--heading-h2-size); }
h3 { font-size: var(--heading-h3-size); }
h4 { font-size: var(--heading-h4-size); }
h5 { font-size: var(--heading-h5-size); }
h6 { font-size: var(--heading-h6-size); }

/* Links */
a {
  color: var(--caceo-primary);
  text-decoration: none;
  transition: opacity var(--transition-base);
}
a:hover {
  opacity: 0.8;
  text-decoration: underline;
}

/* 4. BUTTON STYLES
   Source: artifacts/web/src/components/ui/button.tsx
   Base: inline-flex, rounded-md (0.5rem), text-sm, font-medium, min-h-9, px-4 py-2
   ------------------------------------------------------------ */
.puck-button,
.puck-button-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  min-height: 2.25rem;
  font-family: var(--font-primary);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
  border-radius: var(--radius);
  border: 1px solid var(--caceo-primary-border);
  background-color: var(--caceo-primary);
  color: var(--caceo-primary-fg);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity var(--transition-base), box-shadow var(--transition-base);
  -webkit-font-smoothing: antialiased;
}

.puck-button:hover,
.puck-button-primary:hover {
  opacity: 0.9;
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  color: var(--caceo-primary-fg);
}

.puck-button:active,
.puck-button-primary:active {
  opacity: 0.82;
  box-shadow: none;
}

/* Button container (alignment wrapper) */
.puck-button-container {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* Outline button variant — border rgba(0,0,0,.10), shadow-xs */
.puck-button[data-variant="outline"],
.puck-button--outline {
  background-color: transparent;
  color: var(--color-text);
  border-color: var(--caceo-button-outline);
  box-shadow: var(--shadow-xs);
}
.puck-button[data-variant="outline"]:hover,
.puck-button--outline:hover {
  background-color: rgba(0, 0, 0, 0.04);
  opacity: 1;
}

/* Hero CTA primary button — complete button treatment (the class renders
   standalone, without .puck-button base). Old site: accent red, semibold. */
.puck-hero-cta-primary,
.puck-hero .puck-button-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  min-height: 2.75rem;
  font-family: var(--font-primary);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1;
  border-radius: var(--radius);
  border: 1px solid var(--caceo-accent-border);
  background-color: var(--caceo-accent);
  color: var(--caceo-accent-fg);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity var(--transition-base), box-shadow var(--transition-base);
}
.puck-hero-cta-primary:hover,
.puck-hero .puck-button-primary:hover {
  opacity: 0.9;
  color: var(--caceo-accent-fg);
  text-decoration: none;
  box-shadow: var(--shadow-sm);
}

/* Hero CTA secondary button — outline style */
.puck-hero-cta-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  min-height: 2.25rem;
  font-family: var(--font-primary);
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: var(--radius);
  border: 1px solid rgba(255, 255, 255, 0.5);
  background-color: transparent;
  color: #ffffff;
  cursor: pointer;
  text-decoration: none;
  transition: opacity var(--transition-base), background-color var(--transition-base);
}
.puck-hero-cta-secondary:hover {
  background-color: rgba(255, 255, 255, 0.12);
  opacity: 1;
  text-decoration: none;
  color: #ffffff;
}

/* CTA section button overrides */
.puck-cta-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.5rem 1.5rem;
  min-height: 2.5rem;
  font-family: var(--font-primary);
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: var(--radius);
  background-color: var(--caceo-primary);
  color: var(--caceo-primary-fg);
  border: 1px solid var(--caceo-primary-border);
  cursor: pointer;
  text-decoration: none;
  transition: opacity var(--transition-base);
}
.puck-cta-primary:hover { opacity: 0.9; text-decoration: none; color: var(--caceo-primary-fg); }

.puck-cta-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.5rem 1.5rem;
  min-height: 2.5rem;
  font-family: var(--font-primary);
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: var(--radius);
  background-color: transparent;
  color: var(--caceo-primary);
  border: 1px solid var(--caceo-button-outline);
  box-shadow: var(--shadow-xs);
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--transition-base), opacity var(--transition-base);
}
.puck-cta-secondary:hover { background-color: rgba(3, 76, 140, 0.05); text-decoration: none; }

/* 5. HERO STYLES
   ------------------------------------------------------------ */
.puck-hero {
  position: relative;
  overflow: hidden;
  background-color: var(--caceo-secondary);
  color: #ffffff;
}

/* Hero text */
.puck-hero-title {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: #ffffff;
  margin-bottom: 1rem;
}

.puck-hero-subtitle {
  font-family: var(--font-primary);
  font-size: 1.125rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.88);
  margin-bottom: 1.5rem;
}

.puck-hero-eyebrow {
  font-family: var(--font-primary);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
  margin-bottom: 0.75rem;
}

/* Home hero navy tint — a lighter treatment preserves heading contrast while
   allowing the mountain image to remain visible:
   bg-secondary/55 with multiply blend, plus a softened bottom-up gradient
   (from secondary via secondary/55 to transparent) at 70% opacity.
   The Hero block's own overlay is set to "off" in deploy-home-page.mjs. */
.puck-hero:has(+ .puck-cta) {
  position: relative;
}
.puck-hero:has(+ .puck-cta)::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(2, 48, 89, 0.55);
  mix-blend-mode: multiply;
  pointer-events: none;
}
.puck-hero:has(+ .puck-cta)::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, #023059 0%, rgba(2, 48, 89, 0.55) 50%, rgba(2, 48, 89, 0) 100%);
  opacity: 0.7;
  pointer-events: none;
}
.puck-hero:has(+ .puck-cta) .puck-hero-content {
  position: relative;
  z-index: 1;
}

/* Home hero (the only hero followed by a CTA banner): old site renders
   the eyebrow as a badge pill with a red status dot, a larger display
   title constrained to max-w-3xl, and a max-w-2xl subtitle. */
.puck-hero:has(+ .puck-cta) .puck-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.75rem;
  font-weight: 500;
  letter-spacing: normal;
  text-transform: none;
  color: #ffffff;
  background-color: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 9999px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  margin-bottom: 1.5rem;
}
.puck-hero:has(+ .puck-cta) .puck-hero-eyebrow::before {
  content: '';
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 9999px;
  background-color: var(--caceo-accent);
  flex-shrink: 0;
}
.puck-hero:has(+ .puck-cta) .puck-hero-title {
  font-size: clamp(2.25rem, 4.5vw, 4.5rem); /* text-4xl → lg:text-7xl */
  line-height: 1.1;
  max-width: 48rem;  /* max-w-3xl */
  margin-bottom: 1.5rem;
}
.puck-hero:has(+ .puck-cta) .puck-hero-subtitle {
  max-width: 42rem;  /* max-w-2xl */
}

/* Interior page heroes (not followed by a CTA banner): the old site uses
   a short navy page-header band with a breadcrumb, not a tall photo hero.
   min-height overrides the block's inline 420px value; the inset shadow
   adds the navy tint (secondary/80) over the background photo. */
#puck-content > .puck-hero:not(:has(+ .puck-cta)) {
  min-height: 0 !important;
  box-shadow: inset 0 0 0 9999px rgba(2, 48, 89, 0.62);
}
.puck-hero:not(:has(+ .puck-cta)) .puck-hero-content {
  padding-block: 2.5rem 4rem;
  /* Old-site interior page headers are always left-aligned; override any
     authored center alignment (inline style) */
  text-align: left !important;
  align-items: flex-start !important;
  justify-items: start !important;
}
/* The renderer puts the flex centering + text-align inline on .puck-hero
   itself, so override the container too */
#puck-content > .puck-hero:not(:has(+ .puck-cta)) {
  text-align: left !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
}
.puck-hero:not(:has(+ .puck-cta)) .puck-hero-title,
.puck-hero:not(:has(+ .puck-cta)) .puck-hero-subtitle {
  text-align: left !important;
  margin-inline: 0 !important;
}
/* Renderer caps hero-content at 600-800px and centers it; interior page
   headers on the old site span the full content column */
#puck-content > .puck-hero:not(:has(+ .puck-cta)) .puck-hero-content {
  width: 100%;
  max-width: 1280px !important;
  margin-inline: auto !important;
}
/* Eyebrow styled as the breadcrumb trail ("Home › page") */
.puck-hero:not(:has(+ .puck-cta)) .puck-hero-eyebrow {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  color: #dbeafe; /* blue-100 */
  margin-bottom: 1rem;
}
.puck-hero:not(:has(+ .puck-cta)) .puck-hero-eyebrow::before {
  content: 'Home  ›';
  color: #93c5fd; /* blue-300 */
  white-space: pre;
}
.puck-hero:not(:has(+ .puck-cta)) .puck-hero-title {
  font-size: clamp(2.25rem, 3vw, 3rem); /* text-4xl sm:text-5xl */
  margin-bottom: 1rem;
}
.puck-hero:not(:has(+ .puck-cta)) .puck-hero-subtitle {
  max-width: 42rem;
  color: #bfdbfe; /* blue-200 */
}

.puck-hero-content {
  position: relative;
  z-index: 1;
  max-width: var(--container-max-width);
  margin-inline: auto;
  padding: 5rem var(--container-px);
}

/* 5b. FULL-WIDTH LAYOUT CONTAINMENT
   With --content-max-width: 100%, main spans the viewport (with 2rem
   side padding) and the renderer auto-breaks heroes out via -2rem
   margins. Everything else needs an explicit container cap, and CTA
   bands need the same break-out so their background is full-bleed like
   the old site's section bands.
   ------------------------------------------------------------ */

/* Cap ordinary top-level blocks (Text, Heading, Grid, EventList, Embed…) */
#puck-content > *:not(.puck-hero):not(.puck-cta) {
  max-width: var(--container-max-width);
  margin-inline: auto;
}

/* Heroes render as full-bleed bands: the renderer only breaks them out
   vertically (margin-top: -2rem on :first-child), so break out of main's
   2rem side padding here — otherwise every hero shows white side gutters. */
#puck-content > .puck-hero {
  margin-inline: -2rem;
  border-radius: 0;
}

/* CTA sections render as full-bleed bands (old site: full-width navy/blue
   bands), breaking out of main's 2rem side padding like heroes do. */
#puck-content > .puck-cta {
  margin-inline: -2rem;
  border-radius: 0;
}
#puck-content > .puck-cta > * {
  max-width: var(--container-max-width);
  margin-inline: auto;
}

/* 5c. EVENT BANNER CTA (Home)
   A CTA immediately after the hero is the featured-event banner. Old
   site: full-width primary band, text left, Register button right,
   accent-red button (SPA Home.tsx "Featured Event Banner"). */
#puck-content > .puck-hero + .puck-cta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 3rem;
  text-align: left;
  padding-block: 2.5rem;
  padding-inline: max(2rem, calc((100% - var(--container-max-width)) / 2));
}
#puck-content > .puck-hero + .puck-cta > * {
  max-width: none;
  margin-inline: 0;
}
#puck-content > .puck-hero + .puck-cta .puck-cta-title {
  grid-column: 1;
  margin-bottom: 0.25rem;
}
#puck-content > .puck-hero + .puck-cta .puck-cta-description {
  grid-column: 1;
  margin-bottom: 0;
  color: #bfdbfe; /* blue-200, matches old banner subtitle */
}
#puck-content > .puck-hero + .puck-cta .puck-cta-buttons {
  grid-column: 2;
  grid-row: 1 / span 2;
  margin-top: 0;
  justify-content: flex-end;
}
#puck-content > .puck-hero + .puck-cta .puck-cta-primary {
  background-color: var(--caceo-accent);
  color: var(--caceo-accent-fg);
  border-color: var(--caceo-accent-border);
  font-weight: 600;
  padding: 0.75rem 2rem;
  min-height: 3rem;
}
/* Eyebrow injected above the banner title (Embed-event-countdown) */
#puck-content > .puck-hero + .puck-cta .caceo-evt-eyebrow {
  grid-column: 1;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #ffffff;
  margin-bottom: 0.5rem;
}
.caceo-evt-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 9999px;
  background-color: var(--caceo-accent);
  flex-shrink: 0;
}

/* Countdown cards + Register button share the right column */
#puck-content > .puck-hero + .puck-cta .puck-cta-buttons {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
}
.caceo-cd {
  display: flex;
  gap: 0.75rem;
}
.caceo-cd-unit {
  background-color: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 0.75rem;
  padding: 0.75rem 1rem;
  text-align: center;
  min-width: 68px;
}
.caceo-cd-num {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1;
  color: #ffffff;
}
.caceo-cd-label {
  font-size: 0.75rem;
  color: #bfdbfe;
  margin-top: 0.25rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Hide the countdown script's Embed wrapper so it takes no space */
#puck-content > .puck-cta + * :is(.caceo-evt-hidden) { display: none; }

/* "Want to host a training event?" card (Embed-host-training) —
   SPA: bg-muted/40 rounded-2xl p-6, photo left, small outline button */
@media (max-width: 640px) {
}

/* Membership benefits section (Embed-benefits-body / Embed-pricing-card) */

/* Membership section white band (home): the section's last three top-level
   blocks (Heading, intro Text, membership Grid) render on white, breaking
   out of main's 2rem side padding. Scoped to the home page via the
   .puck-card--caceo-pricing hook, which only exists there. */
#puck-content:has(.puck-card--caceo-pricing) > :nth-last-child(-n+3) {
  background-color: #ffffff;
  max-width: none;
  margin-inline: -2rem;
  padding-inline: max(2rem, calc((100% - var(--container-max-width)) / 2));
  /* Margins between blocks show the page background as gray bars —
     zero them and use white padding for the spacing instead. */
  margin-block: 0 !important;
}
#puck-content:has(.puck-card--caceo-pricing) > :nth-last-child(3) {
  padding-top: 4rem;
  padding-bottom: 1.5rem;
}
#puck-content:has(.puck-card--caceo-pricing) > :nth-last-child(2) {
  padding-bottom: 1.5rem;
}
#puck-content:has(.puck-card--caceo-pricing) > :last-child {
  padding-bottom: 5rem;
}
/* main's own 2rem bottom padding is what shows as a gray bar above the
   footer — negative margins can't paint over it, so remove it on home. */
main:has(.puck-card--caceo-pricing) {
  padding-bottom: 0;
}

/* Mission value cards (Embed-mission-cards) */
@media (max-width: 900px) {
}

@media (max-width: 768px) {
  #puck-content > .puck-hero + .puck-cta {
    grid-template-columns: 1fr;
  }
  #puck-content > .puck-hero + .puck-cta .puck-cta-buttons {
    grid-column: 1;
    grid-row: auto;
    justify-content: flex-start;
    margin-top: 1.25rem;
  }
}

/* 5d. LIGHT CARD CTA
   CTAs authored with a light custom background (e.g. Home "Want to host
   a training event?") are boxed rounded cards inside the container, with
   dark text and an outline button — not full-bleed white-on-blue bands. */
#puck-content > .puck-cta[style*="linear-gradient"] {
  margin-inline: auto;
  max-width: var(--container-max-width);
  border-radius: var(--radius-xl);
  border: 1px solid rgba(3, 76, 140, 0.12);
  text-align: left;
  padding: 2rem;
  color: var(--caceo-secondary);
}
#puck-content > .puck-cta[style*="linear-gradient"] .puck-cta-title {
  color: var(--caceo-secondary);
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
}
#puck-content > .puck-cta[style*="linear-gradient"] .puck-cta-description {
  color: var(--color-text-secondary, #475569);
  font-size: 0.9375rem;
  margin-bottom: 0.75rem;
}
#puck-content > .puck-cta[style*="linear-gradient"] .puck-cta-primary {
  background-color: transparent;
  color: var(--caceo-primary);
  border: 1px solid var(--caceo-button-outline);
  box-shadow: var(--shadow-xs);
}
#puck-content > .puck-cta[style*="linear-gradient"] .puck-cta-primary:hover {
  background-color: rgba(3, 76, 140, 0.05);
  opacity: 1;
}

.puck-hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

/* Hero video overlay (tint) */
.puck-hero-video-overlay {
  background-color: rgba(2, 48, 89, 0.5);
}

/* Carousel dot/nav default visibility */
.puck-hero--carousel .recur-dd-prev,
.puck-hero--carousel .recur-dd-next {
  background-color: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  color: #ffffff;
}

/* 6. CARD STYLES
   Source: artifacts/web/src/components/ui/card.tsx
   rounded-xl = 0.75rem, border, bg-card, shadow
   ------------------------------------------------------------ */
.puck-card {
  background-color: var(--color-card);
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: box-shadow var(--transition-base);
}

.puck-card:hover {
  box-shadow: var(--shadow-md);
}

.puck-card-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.125rem;
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--color-heading);
  margin-bottom: 0.5rem;
}

.puck-card-eyebrow {
  font-family: var(--font-primary);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--caceo-primary);
  margin-bottom: 0.375rem;
}

.puck-card-description {
  font-family: var(--font-primary);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--color-textSecondary);
}

.puck-card-meta,
.puck-card-meta-row {
  font-family: var(--font-primary);
  font-size: 0.8125rem;
  color: var(--color-textSecondary);
  border-top: 1px solid var(--color-border);
  padding-top: 0.75rem;
  margin-top: 0.75rem;
}

.puck-card-meta-label {
  font-weight: 500;
  color: var(--color-text);
}

.puck-card-meta-link {
  color: var(--caceo-primary);
  text-decoration: none;
}
.puck-card-meta-link:hover { text-decoration: underline; }

/* Card button */
.puck-card-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  min-height: 2.25rem;
  font-family: var(--font-primary);
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: var(--radius);
  background-color: var(--caceo-primary);
  color: var(--caceo-primary-fg);
  border: 1px solid var(--caceo-primary-border);
  text-decoration: none;
  transition: opacity var(--transition-base);
}
.puck-card-button:hover { opacity: 0.9; text-decoration: none; color: var(--caceo-primary-fg); }

/* Avatar (circle crop) for person/board cards */
.puck-card-avatar {
  border-radius: 50%;
  overflow: hidden;
}
.puck-card-avatar--ring {
  border: 3px solid var(--color-border);
}
.puck-card-avatar-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Card checklist items */
.puck-card-checklist {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0;
}
.puck-card-checklist li {
  font-size: 0.9375rem;
  color: var(--color-text);
  padding: 0.25rem 0;
  padding-left: 1.5rem;
  position: relative;
}
.puck-card-checklist li::before {
  content: '\2713';
  position: absolute;
  left: 0;
  color: var(--caceo-primary);
  font-weight: 700;
}

/* Featured card variant */
.puck-card--featured,
.puck-card--featured\ {
  background-color: var(--caceo-secondary);
  color: #ffffff;
  border-color: var(--caceo-secondary-border);
}
.puck-card--featured .puck-card-title,
.puck-card--featured .puck-card-eyebrow {
  color: #ffffff;
}
.puck-card--featured .puck-card-description {
  color: rgba(255, 255, 255, 0.85);
}

/* 7. CTA SECTION STYLES
   ------------------------------------------------------------ */
.puck-cta {
  background-color: var(--caceo-primary);
  color: #ffffff;
  border-radius: var(--radius-xl);
}

.puck-cta-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.875rem;
  line-height: 1.2;
  letter-spacing: -0.025em;
  color: #ffffff;
  margin-bottom: 0.75rem;
}

.puck-cta-description {
  font-family: var(--font-primary);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.88);
  margin-bottom: 1.25rem;
}

.puck-cta-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1rem;
}

/* CTA with accent background */
.puck-cta[data-bg="accent"] {
  background-color: var(--caceo-accent);
}

/* 8. STATS STYLES
   ------------------------------------------------------------ */
/* Old site renders stats as light tiles in a row (About sidebar): white
   cards with borders, blue display values, small muted labels. */
.puck-stats {
  background-color: transparent;
  color: var(--color-text);
  padding: 0;
}

.puck-stats-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.75rem;
  color: var(--caceo-secondary);
  letter-spacing: -0.025em;
  margin-bottom: 2rem;
}

.puck-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 1rem !important;
}

.puck-stat-card {
  background-color: var(--color-surface, #ffffff);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 1.25rem 1rem;
  text-align: center;
}

.puck-stat-value {
  font-family: var(--font-display);
  font-size: 1.625rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--caceo-primary);
  margin-bottom: 0.375rem;
}

.puck-stat-label {
  font-family: var(--font-primary);
  font-size: 0.75rem;
  font-weight: 500;
  color: #64748b;
}

.puck-stat-description {
  font-family: var(--font-primary);
  font-size: 0.8125rem;
  color: #64748b;
  margin-top: 0.25rem;
}

@media (max-width: 640px) {
  .puck-stats-grid {
    grid-template-columns: 1fr !important;
  }
}

/* 8b. TOP-LEVEL HEADING BLOCKS — section rhythm
   Heading blocks render as bare h1-h6 tags directly inside #puck-content.
   The old site wraps each section in py-16 sections; recreate that
   breathing room around standalone section headings. */
#puck-content > h2,
#puck-content > h3 {
  margin-top: 3.5rem;
  margin-bottom: 1.5rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.75rem;
  letter-spacing: -0.025em;
  color: var(--caceo-secondary);
}
#puck-content > h2:first-of-type {
  margin-top: 2.5rem;
}
/* Extra space before the block that follows a section's last content */
#puck-content > .puck-text:not(:last-child) {
  margin-bottom: 1.5rem;
}

/* 9. TEXT BLOCK STYLES
   ------------------------------------------------------------ */
.puck-text {
  font-family: var(--font-primary);
  font-size: 1rem;
  line-height: 1.625;
  color: var(--color-text);
}

.puck-text p { margin-bottom: 1rem; }
.puck-text p:last-child { margin-bottom: 0; }
.puck-text strong, .puck-text b { font-weight: 600; }
.puck-text em, .puck-text i { font-style: italic; }
.puck-text ul, .puck-text ol { margin: 0.5rem 0 1rem 1.5rem; }
.puck-text li { margin-bottom: 0.25rem; line-height: 1.6; }
.puck-text a { color: var(--caceo-primary); }
.puck-text a:hover { text-decoration: underline; }
.puck-text h1, .puck-text h2, .puck-text h3,
.puck-text h4, .puck-text h5, .puck-text h6 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--color-heading);
  margin-bottom: 0.75rem;
  margin-top: 1.5rem;
}
.puck-text h1:first-child, .puck-text h2:first-child,
.puck-text h3:first-child { margin-top: 0; }

/* Table styling inside text block */
.puck-table-wrapper {
  overflow-x: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
}
.puck-table-wrapper table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}
.puck-table-wrapper th {
  background-color: var(--caceo-secondary);
  color: #ffffff;
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: 0.875rem;
  padding: 0.75rem 1rem;
  text-align: left;
}
.puck-table-wrapper td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text);
}
.puck-table-wrapper tr:last-child td { border-bottom: none; }
.puck-table-wrapper tr:nth-child(even) td { background-color: rgba(240, 246, 253, 0.6); }

/* 10. HEADING BLOCK
   ------------------------------------------------------------ */
.puck-grid-heading {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--color-heading);
}
.puck-grid-subheading {
  font-family: var(--font-primary);
  color: var(--color-textSecondary);
  line-height: 1.6;
}

/* 11. NAVIGATION BLOCK
   ------------------------------------------------------------ */
.puck-navigation {
  font-family: var(--font-primary);
}

/* Tabs nav variant */
.puck-navigation-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  border-bottom: 2px solid var(--color-border);
}
.puck-navigation-tabs a {
  display: inline-block;
  padding: 0.625rem 1rem;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--color-textSecondary);
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: color var(--transition-base), border-color var(--transition-base);
  text-decoration: none;
}
.puck-navigation-tabs a:hover,
.puck-navigation-tabs a.active {
  color: var(--caceo-primary);
  border-color: var(--caceo-primary);
  text-decoration: none;
}

/* Simple-list nav variant */
.puck-navigation-simple-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.puck-navigation-simple-list li a {
  display: block;
  padding: 0.5rem 0;
  font-size: 0.9375rem;
  color: var(--caceo-primary);
  border-bottom: 1px solid var(--color-border);
  transition: color var(--transition-base);
  text-decoration: none;
}
.puck-navigation-simple-list li a:hover { color: var(--caceo-secondary); }

/* Dropdown nav variant */
.puck-navigation-dropdown {
  font-family: var(--font-primary);
}

/* 12. GRID & FLEX LAYOUT
   ------------------------------------------------------------ */
.puck-grid {
  display: grid;
  gap: 1.5rem;
}

.puck-grid-column {
  min-width: 0; /* prevent overflow */
}

.puck-flex {
  display: flex;
  flex-wrap: wrap;
}

.puck-flex-item {
  min-width: 0;
}

.puck-column {
  min-width: 0;
}

.puck-columns {
  display: grid;
  gap: 1.5rem;
}

.puck-columns-col {
  min-width: 0;
}

/* Grid preset wrapper */
.puck-grid-preset {
  display: grid;
  gap: 1.5rem;
}

/* 12b. PHOTO STRIP GRIDS
   A top-level grid whose columns contain ONLY images renders on the old
   site as a full-bleed edge-to-edge photo strip (Training page). The
   renderer injects a white card treatment on .puck-grid-column
   (padding, radius, surface background); strip it here and let the
   photos fill their cells. Grids with any non-image content keep the
   default treatment. */
#puck-content > .puck-grid:has(> .puck-grid-column > .puck-image):not(:has(> .puck-grid-column > :not(.puck-image))) {
  max-width: none;
  margin-inline: -2rem;
  gap: 0 !important;
}
#puck-content > .puck-grid:has(> .puck-grid-column > .puck-image):not(:has(> .puck-grid-column > :not(.puck-image))) > .puck-grid-column {
  min-height: 0;
  padding: 0;
  border-radius: 0;
  background-color: transparent;
}
#puck-content > .puck-grid:has(> .puck-grid-column > .puck-image):not(:has(> .puck-grid-column > :not(.puck-image))) .puck-image {
  height: 18rem; /* h-72 on the old site */
}
#puck-content > .puck-grid:has(> .puck-grid-column > .puck-image):not(:has(> .puck-grid-column > :not(.puck-image))) .puck-image-figure {
  height: 100%;
}
#puck-content > .puck-grid:has(> .puck-grid-column > .puck-image):not(:has(> .puck-grid-column > :not(.puck-image))) .puck-image-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 0 !important;
}

/* 13. IMAGE & MEDIA
   ------------------------------------------------------------ */
.puck-image {
  overflow: hidden;
}
.puck-image-img {
  display: block;
  max-width: 100%;
  height: auto;
}
.puck-image-caption {
  font-family: var(--font-primary);
  font-size: 0.8125rem;
  color: var(--color-textSecondary);
  text-align: center;
  margin-top: 0.5rem;
}
.puck-image-figure {
  margin: 0;
}

.puck-video {
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.puck-video-inner {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
  overflow: hidden;
}
.puck-video-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* 14. SOCIAL LINKS
   ------------------------------------------------------------ */
.puck-social-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}
.puck-social-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background-color: rgba(3, 76, 140, 0.08);
  color: var(--caceo-primary);
  border: 1px solid rgba(3, 76, 140, 0.12);
  transition: background-color var(--transition-base), color var(--transition-base);
  text-decoration: none;
}
.puck-social-links a:hover {
  background-color: var(--caceo-primary);
  color: #ffffff;
  text-decoration: none;
}

/* 15. FORM INPUT STYLES
   Source: index.css --radius, --border; computed sizes from button.tsx sizing
   ------------------------------------------------------------ */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="search"],
input[type="url"],
input[type="password"],
input[type="number"],
textarea,
select {
  display: block;
  width: 100%;
  height: 2.5rem;
  padding: 0.5rem 0.75rem;
  font-family: var(--font-primary);
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--color-text);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  outline: none;
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
  appearance: none;
  -webkit-appearance: none;
}

textarea {
  height: auto;
  min-height: 7rem;
  resize: vertical;
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--caceo-primary);
  box-shadow: 0 0 0 2px rgba(3, 76, 140, 0.15);
}

input::placeholder,
textarea::placeholder {
  color: var(--color-textSecondary);
  opacity: 0.7;
}

label {
  display: block;
  font-family: var(--font-primary);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text);
  margin-bottom: 0.375rem;
}

/* 16. RECUR EVENT WIDGET STYLES
   ------------------------------------------------------------ */
.recur-event-list {
  font-family: var(--font-primary);
}

.recur-event-list-title {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--color-heading);
  margin-bottom: 1.5rem;
}

.recur-event-list-grid {
  display: grid;
  gap: 1.25rem;
}

.recur-event-card {
  background-color: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}
.recur-event-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.recur-event-card-image img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.recur-event-card-body {
  padding: 1.25rem;
}

.recur-event-card-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.0625rem;
  line-height: 1.35;
  letter-spacing: -0.015em;
  color: var(--color-heading);
  margin-bottom: 0.5rem;
}

.recur-event-card-date {
  font-family: var(--font-primary);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--caceo-primary);
  margin-bottom: 0.375rem;
}

.recur-event-card-description {
  font-family: var(--font-primary);
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--color-textSecondary);
  margin-bottom: 0.75rem;
}

.recur-event-card-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.4375rem 0.875rem;
  min-height: 2rem;
  font-family: var(--font-primary);
  font-size: 0.8125rem;
  font-weight: 500;
  border-radius: var(--radius);
  background-color: var(--caceo-primary);
  color: var(--caceo-primary-fg);
  border: 1px solid var(--caceo-primary-border);
  text-decoration: none;
  transition: opacity var(--transition-base);
}
.recur-event-card-button:hover { opacity: 0.88; text-decoration: none; color: var(--caceo-primary-fg); }

.recur-event-list-empty {
  font-family: var(--font-primary);
  color: var(--color-textSecondary);
  text-align: center;
  padding: 3rem 1.5rem;
}

/* Event calendar widget */
.recur-event-calendar {
  font-family: var(--font-primary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  background-color: var(--color-card);
}

.recur-event-calendar-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  color: var(--color-heading);
}

.recur-event-calendar-day {
  border: 1px solid var(--color-border);
  background-color: var(--color-surface);
}

.recur-event-calendar-event {
  background-color: var(--caceo-primary);
  color: #ffffff;
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  padding: 0.125rem 0.375rem;
}

/* Event modal */
.recur-event-modal-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.375rem;
  color: var(--color-heading);
  margin-bottom: 0.75rem;
}
.recur-event-modal-body { font-family: var(--font-primary); color: var(--color-text); }
.recur-event-modal-button {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 1rem;
  min-height: 2.25rem;
  font-family: var(--font-primary);
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: var(--radius);
  background-color: var(--caceo-primary);
  color: var(--caceo-primary-fg);
  border: 1px solid var(--caceo-primary-border);
  cursor: pointer;
  transition: opacity var(--transition-base);
}
.recur-event-modal-button:hover { opacity: 0.88; }

/* 17. RECUR PRODUCT / SPONSORSHIP WIDGET
   ------------------------------------------------------------ */
.recur-product-list { font-family: var(--font-primary); }

.recur-product-list-title {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--color-heading);
  margin-bottom: 1.5rem;
}

.recur-product-list-grid { display: grid; gap: 1.25rem; }

.recur-product-card {
  background-color: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: box-shadow var(--transition-base);
}
.recur-product-card:hover { box-shadow: var(--shadow-md); }

.recur-product-card-image img { display: block; width: 100%; height: auto; }
.recur-product-card-body { padding: 1.25rem; }

.recur-product-card-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.0625rem;
  color: var(--color-heading);
  margin-bottom: 0.375rem;
}

.recur-product-card-description {
  font-family: var(--font-primary);
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--color-textSecondary);
  margin-bottom: 0.75rem;
}

.recur-product-card-price {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--caceo-primary);
  margin-bottom: 0.75rem;
}

.recur-product-card-button {
  display: inline-flex;
  align-items: center;
  padding: 0.4375rem 0.875rem;
  min-height: 2rem;
  font-family: var(--font-primary);
  font-size: 0.8125rem;
  font-weight: 500;
  border-radius: var(--radius);
  background-color: var(--caceo-accent);
  color: var(--caceo-accent-fg);
  border: 1px solid var(--caceo-accent-border);
  text-decoration: none;
  transition: opacity var(--transition-base);
}
.recur-product-card-button:hover { opacity: 0.88; text-decoration: none; color: var(--caceo-accent-fg); }

.recur-product-list-empty {
  font-family: var(--font-primary);
  color: var(--color-textSecondary);
  text-align: center;
  padding: 3rem 1.5rem;
}

/* Single product/event detail */
.recur-single-event,
.recur-single-product {
  font-family: var(--font-primary);
  color: var(--color-text);
}

/* 18. DONATION WIDGET
   ------------------------------------------------------------ */
.recur-donation { font-family: var(--font-primary); }

.recur-donation-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: -0.025em;
  color: var(--color-heading);
  margin-bottom: 0.5rem;
}

.recur-donation-description {
  font-family: var(--font-primary);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--color-textSecondary);
  margin-bottom: 1.25rem;
}

.recur-donation-amount-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1.25rem;
  font-family: var(--font-primary);
  font-size: 0.9375rem;
  font-weight: 500;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  background-color: var(--color-surface);
  color: var(--color-text);
  cursor: pointer;
  transition: background-color var(--transition-base), border-color var(--transition-base);
}
.recur-donation-amount-button:hover,
.recur-donation-amount-button.selected {
  background-color: var(--caceo-primary);
  color: var(--caceo-primary-fg);
  border-color: var(--caceo-primary-border);
}

.recur-donation-amount-input {
  /* styled by the base input rules above */
}

.recur-donation-frequency { display: flex; gap: 0.5rem; flex-wrap: wrap; }

.recur-donation-frequency-label {
  font-family: var(--font-primary);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text);
}

.recur-donation-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0.625rem 1.5rem;
  min-height: 2.75rem;
  font-family: var(--font-primary);
  font-size: 1rem;
  font-weight: 600;
  border-radius: var(--radius);
  background-color: var(--caceo-accent);
  color: var(--caceo-accent-fg);
  border: 1px solid var(--caceo-accent-border);
  cursor: pointer;
  transition: opacity var(--transition-base);
}
.recur-donation-submit:hover { opacity: 0.9; }

.recur-donation-message {
  font-family: var(--font-primary);
  font-size: 0.8125rem;
  color: var(--color-textSecondary);
  margin-top: 0.75rem;
}

/* 19. BLOG WIDGET STYLES
   ------------------------------------------------------------ */
.recur-blog-list { font-family: var(--font-primary); }

.recur-blog-list-title {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--color-heading);
  margin-bottom: 1.5rem;
}

.recur-blog-list-grid { display: grid; gap: 1.5rem; }

.recur-blog-card {
  background-color: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}
.recur-blog-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }

.recur-blog-card-image img { display: block; width: 100%; height: auto; }

.recur-blog-card-body { padding: 1.25rem; }

.recur-blog-card-tag {
  font-family: var(--font-primary);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--caceo-primary);
  margin-bottom: 0.375rem;
}

.recur-blog-card-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.0625rem;
  line-height: 1.35;
  color: var(--color-heading);
  margin-bottom: 0.5rem;
}

.recur-blog-card-excerpt {
  font-family: var(--font-primary);
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--color-textSecondary);
  margin-bottom: 0.75rem;
}

.recur-blog-card-date {
  font-family: var(--font-primary);
  font-size: 0.8125rem;
  color: var(--color-textSecondary);
}

.recur-blog-card-button {
  display: inline-flex;
  align-items: center;
  padding: 0.375rem 0.75rem;
  font-family: var(--font-primary);
  font-size: 0.8125rem;
  font-weight: 500;
  border-radius: var(--radius);
  color: var(--caceo-primary);
  border: 1px solid var(--color-border);
  text-decoration: none;
  transition: background-color var(--transition-base);
}
.recur-blog-card-button:hover { background-color: rgba(3, 76, 140, 0.05); text-decoration: none; }

.recur-blog-list-empty {
  font-family: var(--font-primary);
  color: var(--color-textSecondary);
  text-align: center;
  padding: 3rem 1.5rem;
}

.recur-blog-pagination { display: flex; gap: 0.5rem; justify-content: center; margin-top: 2rem; }

.recur-blog-pagination-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius);
  font-family: var(--font-primary);
  font-size: 0.875rem;
  font-weight: 500;
  border: 1px solid var(--color-border);
  background-color: var(--color-surface);
  color: var(--color-text);
  cursor: pointer;
  transition: background-color var(--transition-base);
}
.recur-blog-pagination-button:hover,
.recur-blog-pagination-button.active {
  background-color: var(--caceo-primary);
  color: #ffffff;
  border-color: var(--caceo-primary-border);
}

/* Featured post / related posts */
.recur-featured-post,
.recur-blog-featured {
  font-family: var(--font-primary);
}

.recur-blog-related,
.recur-related-posts { font-family: var(--font-primary); }

/* Pagination navigation arrows */
.recur-dd-prev,
.recur-dd-next {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #ffffff;
  cursor: pointer;
  transition: background-color var(--transition-base);
}
.recur-dd-prev:hover,
.recur-dd-next:hover { background-color: rgba(255, 255, 255, 0.28); }

/* 20. JOB BOARD WIDGET
   ------------------------------------------------------------ */
.recur-job-board { font-family: var(--font-primary); color: var(--color-text); }

/* 21. MEDIA DIRECTORY WIDGET
   ------------------------------------------------------------ */
.recur-media-directory,
.recur-drive-directory {
  font-family: var(--font-primary);
  color: var(--color-text);
}

.recur-md-wrap {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  background-color: var(--color-card);
}

.recur-md-heading {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.25rem;
  color: var(--color-heading);
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--color-border);
  background-color: var(--color-surface);
}

.recur-md-search-wrap {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  border-bottom: 1px solid var(--color-border);
}

.recur-md-search {
  flex: 1;
  height: 2.25rem;
  padding: 0.4375rem 0.75rem;
  font-family: var(--font-primary);
  font-size: 0.875rem;
  color: var(--color-text);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  outline: none;
}
.recur-md-search:focus { border-color: var(--caceo-primary); box-shadow: 0 0 0 2px rgba(3,76,140,0.12); }

.recur-md-table { width: 100%; }
.recur-md-table-wrap { overflow-x: auto; }
.recur-md-th { background-color: var(--color-surface); }
.recur-md-th-inner {
  font-family: var(--font-primary);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-textSecondary);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.75rem 1rem;
}
.recur-md-tr { border-bottom: 1px solid var(--color-border); }
.recur-md-td { padding: 0.75rem 1rem; font-size: 0.9375rem; color: var(--color-text); }
.recur-md-tr:hover .recur-md-td { background-color: rgba(240, 246, 253, 0.6); }

.recur-md-name-link {
  color: var(--caceo-primary);
  font-weight: 500;
  text-decoration: none;
}
.recur-md-name-link:hover { text-decoration: underline; }

.recur-md-btn,
.recur-md-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.375rem 0.75rem;
  font-family: var(--font-primary);
  font-size: 0.8125rem;
  font-weight: 500;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  background-color: var(--color-surface);
  color: var(--color-text);
  cursor: pointer;
  transition: background-color var(--transition-base);
}
.recur-md-btn:hover,
.recur-md-icon-btn:hover {
  background-color: var(--caceo-primary);
  color: #ffffff;
  border-color: var(--caceo-primary-border);
}

.recur-md-dl-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--caceo-primary);
  text-decoration: none;
}
.recur-md-dl-cta:hover { text-decoration: underline; }

.recur-md-footer {
  padding: 0.75rem 1.5rem;
  border-top: 1px solid var(--color-border);
  background-color: var(--color-surface);
}

.recur-md-page-btns { display: flex; gap: 0.5rem; justify-content: center; }

.recur-md-prev, .recur-md-next {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  background-color: var(--color-surface);
  color: var(--color-text);
  cursor: pointer;
  transition: background-color var(--transition-base);
}
.recur-md-prev:hover, .recur-md-next:hover {
  background-color: var(--caceo-primary);
  color: #ffffff;
}

.recur-md-empty,
.recur-md-error {
  padding: 2.5rem 1.5rem;
  text-align: center;
  color: var(--color-textSecondary);
  font-size: 0.9375rem;
}

/* Tile view */
.recur-md-grid { display: grid; gap: 1rem; }
.recur-md-tile {
  background-color: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: box-shadow var(--transition-base);
}
.recur-md-tile:hover { box-shadow: var(--shadow-md); }
.recur-md-tile-thumb { background-color: var(--color-muted); }
.recur-md-tile-name { font-size: 0.8125rem; font-weight: 500; padding: 0.625rem; color: var(--color-text); }

/* Modal */
.recur-md-modal {
  background-color: rgba(2, 48, 89, 0.5);
}
.recur-md-modal-body {
  background-color: var(--color-card);
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-xl);
}
.recur-md-modal-head {
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--color-border);
}
.recur-md-modal-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.125rem;
  color: var(--color-heading);
}
.recur-md-modal-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius);
  background-color: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-textSecondary);
  cursor: pointer;
}
.recur-md-modal-close:hover { background-color: var(--color-muted); }

.recur-md-cell-secondary { color: var(--color-textSecondary); font-size: 0.8125rem; }

.recur-md-copied {
  font-size: 0.75rem;
  color: var(--caceo-primary);
  font-weight: 500;
}

.recur-md-size-row { border-bottom: 1px solid var(--color-border); }
.recur-md-size-info { font-size: 0.875rem; }
.recur-md-size-meta { color: var(--color-textSecondary); font-size: 0.8125rem; }
.recur-md-size-name { font-weight: 500; color: var(--color-text); }
.recur-md-size-actions { display: flex; gap: 0.5rem; }
.recur-md-sizes-label { font-size: 0.8125rem; font-weight: 600; color: var(--color-textSecondary); }
.recur-md-nopreview {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-muted);
  color: var(--color-textSecondary);
  font-size: 0.875rem;
}

/* 22. CONTACT WIDGET
   ------------------------------------------------------------ */
.puck-contact-widget {
  font-family: var(--font-primary);
  background-color: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: 2rem;
  box-shadow: var(--shadow);
}

/* Contact widget form controls — the embed script inline-styles fields,
   so use !important to align them with the site design */
.puck-contact-widget h3 {
  font-family: var(--font-display, var(--font-primary));
  color: var(--color-secondary, #023059);
}
.puck-contact-widget input[type="text"],
.puck-contact-widget input[type="email"],
.puck-contact-widget input[type="tel"],
.puck-contact-widget textarea {
  border-radius: 0.5rem !important;
  border-color: var(--color-border) !important;
}
.puck-contact-widget input:focus,
.puck-contact-widget textarea:focus {
  outline: 2px solid rgba(3, 76, 140, 0.35);
  outline-offset: 1px;
}
.puck-contact-widget [data-cf="submit"] {
  background: var(--color-accent, #BF0A30) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 0.625rem !important;
  padding: 0.75rem 1rem !important;
  font-weight: 600 !important;
  font-size: 0.9375rem !important;
  font-family: var(--font-primary) !important;
  transition: opacity 0.15s ease;
}
.puck-contact-widget [data-cf="submit"]:hover {
  opacity: 0.9;
}

/* Agencies directory (Embed block on /agencies) */
.caceo-agencies { font-family: var(--font-primary); color: var(--color-text); }
/* The old site renders each directory section as a full-bleed band that
   alternates white / muted. Break the Embed wrapper out of main's 2rem
   side padding and pad each band so its content column stays at 1280px. */
#puck-content > :has(.caceo-agencies):has(.caceo-agencies) {
  max-width: none;
  margin-inline: -2rem;
}
.caceo-ag-section {
  padding-block: 4rem;
  padding-inline: max(2rem, calc((100% - 1280px + 3rem) / 2));
  background-color: #ffffff;
}
.caceo-ag-section--muted { background-color: var(--color-muted); }
.caceo-ag-section-head { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 2rem; }
.caceo-ag-icon { height: 2.5rem; width: 2.5rem; border-radius: 0.75rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.caceo-ag-icon--primary { background-color: rgba(3, 76, 140, 0.1); color: var(--color-primary); }
.caceo-ag-icon--accent { background-color: rgba(191, 10, 48, 0.1); color: var(--color-accent); }
.caceo-ag-icon--secondary { background-color: rgba(2, 48, 89, 0.1); color: var(--color-secondary); }
.caceo-ag-h2 { font-family: var(--font-display, var(--font-primary)); font-size: 1.5rem; font-weight: 700; color: var(--color-secondary); margin: 0; }
.caceo-ag-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
.caceo-ag-card { background-color: var(--color-card, #fff); border: 1px solid var(--color-border); border-radius: 1rem; padding: 1.5rem; box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,0.05)); transition: box-shadow 0.15s ease, border-color 0.15s ease; }
.caceo-ag-card:hover { box-shadow: var(--shadow-md, 0 4px 6px rgba(0,0,0,0.07)); border-color: rgba(3, 76, 140, 0.2); }
.caceo-ag-card-title { display: inline-flex; align-items: flex-start; gap: 0.5rem; font-size: 1rem; font-weight: 700; color: var(--color-primary); text-decoration: none; line-height: 1.375; margin-bottom: 0.75rem; }
.caceo-ag-card-title:hover { text-decoration: underline; }
.caceo-ag-card-desc { font-size: 0.875rem; color: var(--color-textSecondary); line-height: 1.625; margin: 0; }
.caceo-ag-ext { color: var(--color-textSecondary); display: inline-flex; flex-shrink: 0; margin-top: 0.125rem; }
.caceo-ag-search-wrap { position: relative; max-width: 24rem; margin-bottom: 2rem; }
.caceo-ag-search-icon { position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%); color: var(--color-textSecondary); display: inline-flex; }
.caceo-ag-search { width: 100%; padding: 0.625rem 1rem 0.625rem 2.25rem; font-size: 0.875rem; border: 1px solid var(--color-border); border-radius: 0.5rem; background-color: var(--color-background, #fff); box-sizing: border-box; font-family: inherit; }
.caceo-ag-search:focus { outline: 2px solid rgba(3, 76, 140, 0.3); outline-offset: 0; border-color: var(--color-primary); }
.caceo-ag-h3 { font-size: 1.125rem; font-weight: 700; color: var(--color-secondary); margin: 0 0 1rem; display: flex; align-items: center; gap: 0.5rem; }
.caceo-ag-h3 + .caceo-ag-grid { margin-bottom: 3rem; }
.caceo-ag-dot { display: inline-block; width: 0.75rem; height: 0.75rem; border-radius: 9999px; }
.caceo-ag-dot--primary { background-color: var(--color-primary); }
.caceo-ag-dot--accent { background-color: var(--color-accent); }
.caceo-ag-dot--secondary { background-color: var(--color-secondary); }
.caceo-ag-count { font-size: 0.875rem; font-weight: 400; color: var(--color-textSecondary); }
.caceo-ag-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.25rem; background-color: rgba(226, 232, 240, 0.2); border: 1px solid var(--color-border); border-radius: 1rem; padding: 1rem; }
.caceo-ag-grid--4 { grid-template-columns: repeat(4, 1fr); }
.caceo-ag-grid .caceo-ag-grid { margin-bottom: 0; }
.caceo-ag-link { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem; border-radius: 0.5rem; font-size: 0.875rem; color: var(--color-secondary); text-decoration: none; transition: background-color 0.15s ease, color 0.15s ease; }
.caceo-ag-link:hover { background-color: rgba(226, 232, 240, 0.6); color: var(--color-primary); }
.caceo-ag-link:hover .caceo-ag-ext { color: var(--color-primary); }
.caceo-ag-link .caceo-ag-ext { margin-top: 0; }
.caceo-ag-empty { grid-column: 1 / -1; font-size: 0.875rem; color: var(--color-textSecondary); padding: 1rem 0.75rem; margin: 0; }
.caceo-ag-cta { background-color: rgba(226, 232, 240, 0.4); border-top: 1px solid var(--color-border); padding: 3.5rem var(--container-px, 1.5rem); text-align: center; }
/* Kill the pale gap between the CTA band and the footer (main's 2rem
   bottom padding + the embed wrapper's block margin). */
main:has(.caceo-agencies) { padding-bottom: 0; }
#puck-content > :has(.caceo-agencies):has(.caceo-agencies) { margin-bottom: 0 !important; }
.caceo-ag-cta .caceo-ag-h2 { margin-bottom: 0.75rem; }
.caceo-ag-cta-body { color: var(--color-textSecondary); max-width: 48rem; margin: 0 auto 2rem; }
.caceo-ag-cta-btn { display: inline-flex; align-items: center; justify-content: center; background-color: var(--color-accent); color: #fff; font-weight: 600; padding: 0.75rem 2rem; border-radius: 0.75rem; text-decoration: none; transition: opacity 0.15s ease; }
.caceo-ag-cta-btn:hover { opacity: 0.9; }
@media (max-width: 1024px) {
  .caceo-ag-grid, .caceo-ag-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .caceo-ag-cards { grid-template-columns: 1fr; }
  .caceo-ag-grid, .caceo-ag-grid--4 { grid-template-columns: 1fr; }
  /* Old site uses px-4 (1rem) gutters at mobile; keep bands aligned with
     the CTA's --container-px gutter. */
  .caceo-ag-section { padding-inline: var(--container-px, 1rem); }
}
/* External / Host Training — submission form (Embed block, caceo-xt-*) */
.caceo-xt-h2 { font-family: var(--font-display, var(--font-primary)); font-size: 1.25rem; font-weight: 700; color: var(--color-secondary); margin: 0 0 0.25rem; }
.caceo-xt-note { font-size: 0.875rem; color: var(--color-textSecondary); margin: 0 0 1.5rem; }
.caceo-xt-req { color: var(--color-accent); }
.caceo-xt-card { background-color: rgba(226, 232, 240, 0.2); border: 1px solid var(--color-border); border-radius: 1rem; padding: 1.5rem; margin-bottom: 1.5rem; position: relative; }
.caceo-xt-eyebrow { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-textSecondary); margin: 0 0 1.25rem; }
.caceo-xt-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.caceo-xt-field { margin-bottom: 1.25rem; }
.caceo-xt-2col .caceo-xt-field { margin-bottom: 0; }
.caceo-xt-field label { display: block; font-size: 0.875rem; font-weight: 500; color: var(--color-secondary); margin-bottom: 0.375rem; }
.caceo-xt-field input, .caceo-xt-field textarea { width: 100%; padding: 0.625rem 1rem; border-radius: 0.75rem; border: 1px solid var(--color-border); background-color: var(--color-background); font-size: 0.875rem; color: var(--color-text); font-family: inherit; box-sizing: border-box; }
.caceo-xt-field input:focus, .caceo-xt-field textarea:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 2px rgba(3, 76, 140, 0.3); }
.caceo-xt-field textarea { resize: none; }
.caceo-xt-error { font-size: 0.875rem; color: #dc2626; background-color: #fef2f2; border: 1px solid #fecaca; border-radius: 0.75rem; padding: 0.75rem 1rem; margin: 0 0 1.5rem; }
.caceo-xt-submit { display: inline-flex; align-items: center; gap: 0.5rem; background-color: var(--color-accent); color: #fff; font-weight: 600; font-size: 1rem; height: 3rem; padding: 0 2rem; border: none; border-radius: 0.75rem; cursor: pointer; transition: opacity 0.15s ease; font-family: inherit; }
.caceo-xt-submit:hover { opacity: 0.9; }
.caceo-xt-submit:disabled { opacity: 0.6; cursor: default; }
.caceo-xt-success { text-align: center; padding: 5rem 2rem; background-color: rgba(226, 232, 240, 0.3); border: 1px solid var(--color-border); border-radius: 1.5rem; }
.caceo-xt-success-icon { height: 4rem; width: 4rem; border-radius: 9999px; background-color: #dcfce7; color: #16a34a; display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem; }
.caceo-xt-success h2 { font-family: var(--font-display, var(--font-primary)); font-size: 1.5rem; font-weight: 700; color: var(--color-secondary); margin: 0 0 0.5rem; }
.caceo-xt-success p { color: var(--color-textSecondary); max-width: 24rem; margin: 0 auto 1.5rem; }
.caceo-xt-again { background-color: transparent; border: 1px solid var(--color-border); border-radius: 0.75rem; padding: 0.625rem 1.25rem; font-weight: 500; font-size: 0.875rem; color: var(--color-secondary); cursor: pointer; font-family: inherit; }
.caceo-xt-again:hover { background-color: rgba(226, 232, 240, 0.4); }
.caceo-xt-sublabel { color: var(--color-textSecondary); font-weight: 400; }
.caceo-xt-pills { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.caceo-xt-pill { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; border-radius: 0.75rem; border: 1px solid var(--color-border); font-size: 0.875rem; color: var(--color-textSecondary); cursor: pointer; transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease; font-weight: 400; margin-bottom: 0; }
.caceo-xt-pill:hover { background-color: rgba(226, 232, 240, 0.5); }
.caceo-xt-pill input { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.caceo-xt-pill:has(input:checked) { background-color: rgba(3, 76, 140, 0.1); border-color: rgba(3, 76, 140, 0.4); color: var(--color-primary); font-weight: 500; }
.caceo-xt-pillgroup label:first-child { margin-bottom: 0.5rem; }
@media (max-width: 1023px) {
}
@media (max-width: 639px) {
  .caceo-xt-2col { grid-template-columns: 1fr; gap: 0; }
  .caceo-xt-2col .caceo-xt-field { margin-bottom: 1.25rem; }
}

/* Job Board — Post a Job CTA band (Embed block on /job-board) */
/* Post-a-Job band — native Card (variant caceo-jb-cta, icon-horizontal).
   Values = old .caceo-jb-cta band. Renderer nests the button inside the
   text column, so it is absolutely positioned right-center to reproduce
   the old space-between row; 1232px = old wrap 1280px minus 2x1.5rem
   side padding. */
.puck-card--caceo-jb-cta {
  position: relative;
  max-width: 1232px !important;
  margin-inline: auto;
  margin-bottom: 4rem;
  background: rgba(3, 76, 140, 0.05);
  border: 1px solid rgba(3, 76, 140, 0.15);
  border-radius: 1rem;
  padding: 2rem 12rem 2rem 2rem; /* right gap reserves the button zone */
  gap: 1rem !important;
  box-shadow: none;
}
.puck-card--caceo-jb-cta > .material-symbols-outlined {
  font-size: 0;
  width: 3rem;
  height: 3rem;
  border-radius: 1rem;
  background-color: rgba(3, 76, 140, 0.1);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23034C8C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='8' x2='12' y2='16'/%3E%3Cline x1='8' y1='12' x2='16' y2='12'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}
.puck-card--caceo-jb-cta .puck-card-title {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--caceo-secondary);
  margin: 0 0 0.25rem;
  letter-spacing: normal;
}
.puck-card--caceo-jb-cta .puck-card-description {
  font-size: 0.875rem;
  color: var(--color-textSecondary);
  margin: 0;
}
.puck-card--caceo-jb-cta .puck-card-button {
  position: absolute;
  right: 2rem;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex !important;
  align-items: center;
  gap: 0.5rem;
  background: var(--caceo-primary) !important;
  color: #fff !important;
  font-weight: 600;
  font-size: 1rem;
  padding: 0.75rem 1.5rem;
  border: none !important;
  border-radius: 0.75rem;
  min-height: 0;
  line-height: 1.625;
  text-decoration: none;
  transition: opacity 0.15s ease;
}
.puck-card--caceo-jb-cta .puck-card-button::before {
  content: "";
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='8' x2='12' y2='16'/%3E%3Cline x1='8' y1='12' x2='16' y2='12'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}
.puck-card--caceo-jb-cta .puck-card-button:hover { opacity: 0.9; }
@media (max-width: 767px) {
  .puck-card--caceo-jb-cta { padding: 2rem; }
  .puck-card--caceo-jb-cta .puck-card-button {
    position: static;
    transform: none;
    margin-top: 1rem;
  }
}
/* Native JobBoard block: cap width like the old site's container */
#puck-content .recur-job-board { max-width: 1280px; margin-left: auto; margin-right: auto; padding: 0 var(--container-px, 1.5rem); }

/* Embed wrapper on /agencies spans full width; kill the default 1.5rem margins */
#puck-content .puck-embed, #puck-content [data-puck-component="Embed"] { margin: 0; }

/* Custom content / iframe / embed */
.puck-custom-content,
.puck-dropbox-embed {
  overflow: hidden;
  border-radius: var(--radius-lg);
}

/* 23. SECTION SPACING (applied to .puck-section or plain section elements)
   ------------------------------------------------------------ */
section,
.puck-section {
  padding-top: var(--section-py);
  padding-bottom: var(--section-py);
}

/* When sections have no padding (flush hero) */
.puck-hero {
  padding: 0; /* override section padding for heroes — hero-content has its own */
}

/* 24. RESPONSIVE BREAKPOINTS
   Mirrors the original site's breakpoints (Tailwind defaults: md=768, sm=640)
   ------------------------------------------------------------ */
@media (max-width: 1024px) {
  .puck-grid[data-cols="4"],
  .puck-grid[data-cols="3"] {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  :root {
    --section-py: 2.5rem;
    --container-px: 1rem;
    --heading-h1-size: 1.875rem;
    --heading-h2-size: 1.5rem;
    --heading-h3-size: 1.25rem;
  }

  h1 { font-size: 1.875rem; }
  h2 { font-size: 1.5rem; }
  h3 { font-size: 1.25rem; }

  .puck-hero-content {
    padding: 3.5rem var(--container-px);
  }

  .puck-cta-title { font-size: 1.5rem; }
  .puck-stat-value { font-size: 2rem; }

  .puck-grid[data-cols="4"],
  .puck-grid[data-cols="3"],
  .puck-grid[data-cols="2"] {
    grid-template-columns: 1fr;
  }

  .recur-event-list-grid,
  .recur-product-list-grid,
  .recur-blog-list-grid {
    grid-template-columns: 1fr;
  }

  .puck-cta-buttons {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 640px) {
  :root {
    --section-py: 2rem;
  }

  .puck-hero-title { font-size: 1.75rem; }
  .puck-hero-subtitle { font-size: 1rem; }

  .puck-cta-primary,
  .puck-cta-secondary {
    width: 100%;
    justify-content: center;
  }
}

/* 25. SITE HEADER
   Source: artifacts/web/src/components/Navbar.tsx
   Class contract discovered from caceo.getrecur.org rendered HTML.
   ------------------------------------------------------------ */

/* — Header bar — */
.site-header {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background-color: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-bottom: 1px solid var(--color-border);
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

/* — Grid container — */
.header-grid {
  max-width: 1280px;   /* max-w-7xl */
  margin: 0 auto;
  padding: 0 2rem;     /* lg:px-8 */
}

.header-grid-row {
  display: flex;
  align-items: center;
  height: 7rem;        /* h-28 = 112px */
  gap: 2rem;
}

/* Left zone (logo) */
.header-grid-zone:first-child {
  flex-shrink: 0;
}

/* Center zone (nav) */
.header-grid-zone--center {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Right zone (CTA buttons) */
.header-grid-zone:last-child {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* — Logo — */
.header-custom-section {
  display: flex;
  align-items: center;
}

.header-logo-link {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.header-logo-link:hover {
  opacity: 1;
  text-decoration: none;
}

.header-logo {
  height: 5rem;        /* h-20 = 80px */
  width: auto;
  max-height: 80px;
  object-fit: contain;
  display: block;
}

/* "CACEO" wordmark next to the logo (old site shows logo + wordmark) */
.header-logo-link::after {
  content: "CACEO";
  font-family: var(--font-secondary, var(--font-primary));
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--caceo-primary);
  margin-left: 0.75rem;
  line-height: 1;
}

/* — Desktop nav — */
.desktop-nav.header-nav {
  display: flex;
  align-items: center;
}

.nav-menu {
  display: flex;
  align-items: center;
  gap: 2rem;           /* space-x-8 */
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Nav top-level links / buttons */
.nav-menu > li {
  position: relative;
}

.nav-menu > li > a,
.nav-menu > li > span,
.nav-menu > li > button {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text);
  text-decoration: none;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s ease;
}

.nav-menu > li > a:hover,
.nav-menu > li > span:hover,
.nav-menu > li > button:hover {
  color: var(--caceo-primary);
  text-decoration: none;
  opacity: 1;
}

/* Top-level nav item with dropdown */
.nav-item-dropdown {
  position: relative;
}

/* Top-level dropdown trigger link */
.nav-link-dropdown {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  transition: color 0.15s ease;
}

.nav-link-dropdown:hover {
  color: var(--caceo-primary);
  text-decoration: none;
  opacity: 1;
}

/* Dropdown arrow chevron — the markup emits a "▼" glyph; the old site uses
   a thin outline chevron, so hide the glyph and draw one with borders. */
.dropdown-arrow {
  font-size: 0;
  line-height: 1;
  color: var(--color-textSecondary);
  display: inline-block;
  position: relative;
  width: 0.7rem;
  height: 0.7rem;
  transition: transform 0.2s ease;
}
.dropdown-arrow::after {
  content: "";
  position: absolute;
  left: 0.12rem;
  top: 0.08rem;
  width: 0.34rem;
  height: 0.34rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
}

.nav-item-dropdown:hover .dropdown-arrow,
.nav-item-dropdown.open .dropdown-arrow {
  transform: rotate(180deg);
  color: var(--caceo-primary);
}

/* Dropdown panel — hidden by default, shown on hover / JS-open class */
.nav-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  z-index: 60;
  min-width: 18rem;    /* w-72 = 288px */
  background-color: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: 0.75rem;  /* rounded-xl */
  box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1);
  padding: 0.375rem;   /* p-1.5 */
  overflow: hidden;
  list-style: none;
  margin: 0;
}

/* Show on hover or JS-toggled open */
.nav-item-dropdown:hover .nav-dropdown,
.nav-item-dropdown.open .nav-dropdown,
.nav-item-dropdown[data-open="true"] .nav-dropdown {
  display: block;
}

/* Items inside the dropdown panel */
.nav-dropdown li {
  list-style: none;
}

.nav-dropdown .nav-link {
  display: block;
  padding: 0.625rem 0.75rem;  /* px-3 py-2.5 */
  border-radius: 0.5rem;      /* rounded-lg */
  font-size: 0.875rem;         /* text-sm */
  font-weight: 500;
  color: var(--caceo-secondary);
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.nav-dropdown .nav-link:hover {
  background-color: rgba(241, 245, 249, 0.70);  /* hover:bg-muted/70 */
  color: var(--caceo-primary);
  text-decoration: none;
  opacity: 1;
}

/* Regular (non-dropdown) top-level nav link */
.nav-menu > li > .nav-link {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text);
  text-decoration: none;
  transition: color 0.15s ease;
  white-space: nowrap;
}

.nav-menu > li > .nav-link:hover {
  color: var(--caceo-primary);
  text-decoration: none;
  opacity: 1;
}

/* — Mobile menu toggle (hamburger) — */
.mobile-menu-toggle {
  display: none;
  background: none;
  border: none;
  padding: 0.5rem;
  cursor: pointer;
  color: var(--color-text);
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  transition: color 0.15s ease, background-color 0.15s ease;
}

.mobile-menu-toggle:hover {
  color: var(--caceo-primary);
  background-color: var(--color-muted);
}

/* — CTA buttons in right zone — */
.desktop-nav.header-cta {
  display: flex;
  align-items: center;
}

/* Base CTA anchor */
.header-cta-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1rem;
  min-height: 2.25rem;
  font-family: var(--font-primary);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1;
  border-radius: var(--radius);
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, opacity 0.15s ease;
  /* Fallback: outline style */
  background-color: transparent;
  border: 1px solid rgba(2, 48, 89, 0.30);
  color: var(--caceo-secondary);
}

.header-cta-button:hover {
  text-decoration: none;
  opacity: 1;
}

/* "Member Login" — outline (href targets member.getrecur.com) */
.header-cta-button[href*="member.getrecur"] {
  background-color: transparent;
  border: 1px solid rgba(2, 48, 89, 0.30);
  color: var(--caceo-secondary);
}

.header-cta-button[href*="member.getrecur"]:hover {
  background-color: rgba(2, 48, 89, 0.05);
}

/* "Join CACEO" — accent filled (href="/join") */
.header-cta-button[href="/join"] {
  background-color: var(--caceo-accent);
  border: 1px solid var(--caceo-accent-border);
  color: var(--caceo-accent-fg);
}

.header-cta-button[href="/join"]:hover {
  background-color: rgba(191, 10, 48, 0.90);
}

/* — Mobile nav drawer — */
.mobile-nav {
  display: none;
  position: sticky;
  top: 7rem;
  left: 0;
  right: 0;
  z-index: 49;
  background-color: #ffffff;
  border-bottom: 1px solid var(--color-border);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  padding: 0 1rem 1rem;
}

/* Shown when Recur JS adds open/active class */
.mobile-nav.open,
.mobile-nav.active,
.mobile-nav[aria-hidden="false"] {
  display: block;
}

.mobile-nav-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 0.5rem;
}

.mobile-nav-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--caceo-secondary);
  line-height: 1.3;
}

.mobile-nav-close {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 0.375rem;
  cursor: pointer;
  color: var(--color-textSecondary);
  border-radius: var(--radius);
  transition: color 0.15s ease, background-color 0.15s ease;
  flex-shrink: 0;
}

.mobile-nav-close:hover {
  color: var(--color-text);
  background-color: var(--color-muted);
}

/* Mobile nav list */
.mobile-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mobile-nav ul li a,
.mobile-nav ul li button,
.mobile-nav ul li span {
  display: block;
  padding: 0.75rem;
  font-size: 1rem;
  font-weight: 500;
  color: var(--color-text);
  text-decoration: none;
  border-radius: var(--radius);
  transition: color 0.15s ease, background-color 0.15s ease;
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
}

.mobile-nav ul li a:hover,
.mobile-nav ul li button:hover,
.mobile-nav ul li span:hover {
  color: var(--caceo-primary);
  background-color: var(--color-muted);
  text-decoration: none;
  opacity: 1;
}

/* Mobile sub-items (nested) — generic ul ul and Recur's mobile-nav-sub class */
.mobile-nav ul ul,
.mobile-nav-sub {
  list-style: none;
  padding: 0.25rem 0 0.5rem 0.75rem;
  border-left: 2px solid rgba(3, 76, 140, 0.20);
  margin: 0 0 0.5rem 0.75rem;
}

.mobile-nav ul ul li a,
.mobile-nav ul ul li button,
.mobile-nav-sub li a,
.mobile-nav-sub li button {
  display: block;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-textSecondary);
  text-decoration: none;
  border-radius: var(--radius);
  transition: color 0.15s ease, background-color 0.15s ease;
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
}

.mobile-nav ul ul li a:hover,
.mobile-nav ul ul li button:hover,
.mobile-nav-sub li a:hover,
.mobile-nav-sub li button:hover {
  color: var(--caceo-primary);
  background-color: var(--color-muted);
  text-decoration: none;
  opacity: 1;
}

/* 26. HEADER RESPONSIVE
   md breakpoint = 768px: collapse to mobile layout
   ------------------------------------------------------------ */
@media (max-width: 767px) {
  .header-grid {
    padding: 0 1rem;   /* px-4 */
  }

  .header-grid-row {
    height: 4.5rem;    /* shorter on mobile */
    gap: 0.5rem;
  }

  .header-logo {
    height: 3rem;
    max-height: 48px;
  }

  /* Hide desktop nav and CTA buttons */
  .header-grid-zone--center .desktop-nav.header-nav {
    display: none;
  }

  .header-grid-zone:last-child .desktop-nav.header-cta {
    display: none;
  }

  /* Show hamburger */
  .mobile-menu-toggle {
    display: flex;
  }
}

@media (min-width: 768px) {
  /* Ensure mobile nav is always hidden on desktop */
  .mobile-nav {
    display: none !important;
  }
}

/* 27. SITE FOOTER
   Source: artifacts/web/src/components/Footer.tsx
   Class contract discovered from caceo.getrecur.org rendered HTML.
   Color values:
     bg-secondary   = #023059 (dark navy)
     text-blue-100  = #dbeafe (Tailwind blue-100)
     text-blue-200  = #bfdbfe (Tailwind blue-200)
     text-blue-300  = #93c5fd (Tailwind blue-300)
     text-accent    = #BF0A30 (Colorado red)
   ------------------------------------------------------------ */

/* — Footer wrapper — */
.site-footer {
  background-color: #023059;            /* bg-secondary */
  color: #dbeafe;                       /* text-blue-100 */
  padding-top: 4rem;                    /* pt-16 */
  padding-bottom: 2rem;                 /* pb-8 */
  border-top: 1px solid rgba(3, 76, 140, 0.20);  /* border-primary/20 */
  font-family: var(--font-primary);
}

/* Override any global link color so footer links inherit correctly */
.site-footer a {
  color: inherit;
  text-decoration: none;
}

/* — Content area: max-width container — */
.site-footer-content {
  max-width: 1280px;             /* max-w-7xl */
  margin: 0 auto;
  padding: 0 2rem;               /* px-8 — lg:px-8 */
  display: grid;
  grid-template-columns: repeat(4, 1fr);  /* md:grid-cols-4 */
  gap: 3rem;                     /* gap-12 */
  margin-bottom: 3rem;           /* mb-12 */
}

/* — Brand section (first child) spans 2 of 4 columns — */
.site-footer-section:first-child {
  grid-column: span 2;
}

/* — Section headings — */
.site-footer-title {
  color: #ffffff;
  font-family: var(--font-secondary);    /* font-display */
  font-weight: 700;
  font-size: 1rem;
  margin-bottom: 1rem;           /* mb-4 */
  margin-top: 0;
}

/* Hide the auto-generated heading on the brand column
   (original footer has no visible heading for the brand block) */
.site-footer-section:first-child .site-footer-title {
  display: none;
}

/* — Site-info section: logo — */
.site-footer-logo {
  height: 4rem;                  /* h-16 = 64px */
  width: auto;
  max-height: 64px;
  object-fit: contain;
  display: block;
  margin-bottom: 1.5rem;         /* mb-6 */
}

/* — Site-info section: description text — */
.site-footer-text {
  color: rgba(191, 219, 254, 0.80);  /* text-blue-200/80 */
  max-width: 24rem;              /* max-w-sm ≈ 384px */
  margin-bottom: 1.5rem;         /* mb-6 */
  font-size: 0.875rem;
  line-height: 1.6;
}

/* — Quick Links list — */
.site-footer-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;                  /* space-y-3 */
}

.site-footer-links li a {
  color: #dbeafe;                /* text-blue-100 */
  font-size: 0.875rem;
  text-decoration: none;
  transition: color 0.15s ease;
  display: inline-block;
}

.site-footer-links li a:hover {
  color: #ffffff;                /* hover:text-white */
  opacity: 1;
  text-decoration: none;
}

/* — Custom section wrapper — */
.site-footer-custom {
  display: block;
}

/* — Contact list (inside custom section) — */
.footer-contact-list {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;                  /* space-y-5 */
}

.footer-contact-item {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;                   /* gap-2 */
}

.footer-contact-icon {
  flex-shrink: 0;
  margin-top: 0.125rem;          /* mt-0.5 */
  color: #BF0A30;                /* text-accent */
  stroke: #BF0A30;
  width: 1rem;
  height: 1rem;
}

.footer-contact-label {
  font-size: 0.75rem;            /* text-xs */
  color: rgba(147, 197, 253, 0.70);  /* text-blue-300/70 */
  margin: 0 0 0.125rem 0;        /* mb-0.5 */
  line-height: 1.4;
}

.footer-contact-link {
  color: #dbeafe;                /* text-blue-100 */
  font-size: 0.875rem;           /* text-sm */
  text-decoration: none;
  transition: color 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.footer-contact-link:hover {
  color: #ffffff;
  opacity: 1;
  text-decoration: none;
}

/* — Bottom bar — */
.footer-bottom-bar {
  max-width: 1280px;
  margin: 0 auto;
  padding: 2rem 2rem 0;          /* pt-8, px-8 */
  border-top: 1px solid rgba(255, 255, 255, 0.10);  /* border-white/10 */
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  font-size: 0.875rem;           /* text-sm */
}

.footer-bottom-bar-copy {
  color: rgba(191, 219, 254, 0.60);  /* text-blue-200/60 */
}

.footer-bottom-bar-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;                   /* gap-2 */
  color: rgba(191, 219, 254, 0.60);  /* text-blue-200/60 */
  text-decoration: none;
  transition: color 0.15s ease;
}

.footer-bottom-bar-link:hover {
  color: #dbeafe;                /* hover:text-blue-100 */
  opacity: 1;
  text-decoration: none;
}

/* Recur SVG logo in footer bottom bar */
.footer-bottom-bar-link svg {
  height: 1.25rem;               /* h-5 = 20px */
  width: auto;
  opacity: 0.70;
  display: inline-block;
  vertical-align: middle;
}

/* 28. FOOTER RESPONSIVE
   Below md (768px): single column, bottom bar stacks
   ------------------------------------------------------------ */
@media (max-width: 767px) {
  .site-footer-content {
    grid-template-columns: 1fr;  /* single column */
    gap: 2rem;
    padding: 0 1rem;
    margin-bottom: 2rem;
  }

  /* Brand no longer needs to span 2 cols on mobile */
  .site-footer-section:first-child {
    grid-column: span 1;
  }

  /* Show brand heading on mobile (for visual hierarchy) */
  .site-footer-section:first-child .site-footer-title {
    display: block;
  }

  .site-footer-text {
    max-width: 100%;
  }

  .footer-bottom-bar {
    flex-direction: column;      /* stacks on mobile */
    align-items: center;
    text-align: center;
    padding: 1.5rem 1rem 0;
    gap: 1rem;
  }
}

@media (max-width: 640px) {
  .site-footer {
    padding-top: 3rem;
    padding-bottom: 1.5rem;
  }
}

/* ═══════════════════════════════════════════════════════════════
   ABOUT PAGE — custom HTML block classes
   Used inside puck-text rich-text blocks on the /about page
═══════════════════════════════════════════════════════════════ */

/* Mission callout box */
.caceo-mission-box {
  margin-top: 2rem;
  background: rgba(3, 76, 140, 0.05);
  border: 1px solid rgba(3, 76, 140, 0.15);
  border-radius: 1rem;
  padding: 1.75rem 2rem;
}
.caceo-mission-box h3 {
  font-family: 'Outfit', sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--caceo-secondary);
  margin-top: 0;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.caceo-mission-box h3 svg {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--caceo-primary);
  flex-shrink: 0;
}
.caceo-mission-box p {
  color: var(--caceo-muted);
  line-height: 1.65;
  margin-bottom: 0;
}

/* Geographic reach box */
.caceo-geo-box {
  margin-top: 1rem;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 1rem;
  padding: 1.25rem 1.5rem;
  box-shadow: 0 1px 3px rgba(2, 48, 89, 0.06);
}
.caceo-geo-box h3 {
  font-family: 'Outfit', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--caceo-secondary);
  margin-top: 0;
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.caceo-geo-box h3 svg {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--caceo-accent);
  flex-shrink: 0;
}

/* About page 2-col (Embed-about-us / Embed-about-side) */
.caceo-ab-h2 {
  font-size: 1.875rem;
  color: var(--caceo-secondary);
  margin-bottom: 1.5rem;
}
.caceo-ab-p {
  color: var(--color-textSecondary);
  line-height: 1.7;
  margin-bottom: 1.25rem;
}
.caceo-ab-photo {
  width: 100%;
  height: 16rem;
  object-fit: cover;
  border-radius: 1rem;
  box-shadow: var(--shadow-md);
  margin-bottom: 1.5rem;
  display: block;
}
.caceo-ab-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.caceo-ab-stat {
  background-color: rgba(241, 245, 249, 0.4);
  border: 1px solid rgba(226, 232, 240, 0.5);
  border-radius: 0.75rem;
  padding: 1rem;
  text-align: center;
}
.caceo-ab-stat-val {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--caceo-primary);
}
.caceo-ab-stat-label {
  font-size: 0.75rem;
  color: var(--color-textSecondary);
  margin-top: 0.25rem;
}

/* Strip the renderer's white card treatment from grid columns whose content
   brings its own styling (about 2-col, home membership grid). */
#puck-content > .puck-grid > .puck-grid-column:has(.caceo-ab-left),
#puck-content > .puck-grid > .puck-grid-column:has(.caceo-ab-right),
#puck-content > .puck-grid > .puck-grid-column:has(.puck-card--caceo-benefits),
#puck-content > .puck-grid > .puck-grid-column:has(.puck-card--caceo-pricing) {
  padding: 0;
  background-color: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
}

/* Board page: officers section renders on a white full-bleed band on the
   old site (board members stay on the page background). Blocks 2-3 are
   the Officers header + grid. Scoped via the .caceo-board-grid hook. */
#puck-content:has(.puck-card--caceo-member-blue) > :nth-child(2),
#puck-content:has(.puck-card--caceo-member-blue) > :nth-child(3) {
  background-color: #ffffff;
  max-width: none;
  margin-inline: -2rem;
  margin-block: 0 !important;
  padding-inline: max(2rem, calc((100% - var(--container-max-width)) / 2));
}
#puck-content:has(.puck-card--caceo-member-blue) > :nth-child(2) {
  padding-top: 4rem;
}
#puck-content:has(.puck-card--caceo-member-blue) > :nth-child(3) {
  padding-bottom: 5rem;
}
#puck-content:has(.puck-card--caceo-member-blue) > :nth-child(4) {
  margin-top: 3rem;
}

/* About/Board bottom CTA: the SPA renders
   it as a light gray band with a navy heading, muted copy, and red primary
   + outline secondary buttons — not the default navy CTA band. Scoped to
   each page via a page-unique class hook. */
#puck-content:has(.puck-card--caceo-geo) > .puck-cta,
#puck-content:has(.puck-card--caceo-member-blue) > .puck-cta {
  background: #eef2f7 !important;
  background-image: none !important;
  border-top: 1px solid #e2e8f0;
  text-align: center;
  padding-block: 4rem;
}
#puck-content:has(.puck-card--caceo-geo) > .puck-cta .puck-cta-title,
#puck-content:has(.puck-card--caceo-member-blue) > .puck-cta .puck-cta-title {
  color: var(--caceo-secondary) !important;
  font-size: 1.875rem;
}
#puck-content:has(.puck-card--caceo-geo) > .puck-cta .puck-cta-description,
#puck-content:has(.puck-card--caceo-member-blue) > .puck-cta .puck-cta-description {
  color: var(--color-textSecondary) !important;
  max-width: 48rem;
  margin-inline: auto;
}
#puck-content:has(.puck-card--caceo-geo) > .puck-cta .puck-cta-buttons,
#puck-content:has(.puck-card--caceo-member-blue) > .puck-cta .puck-cta-buttons {
  justify-content: center;
}
#puck-content:has(.puck-card--caceo-geo) > .puck-cta .puck-cta-secondary,
#puck-content:has(.puck-card--caceo-member-blue) > .puck-cta .puck-cta-secondary {
  color: var(--caceo-secondary) !important;
  border: 1px solid rgba(2, 48, 89, 0.3) !important;
  background: transparent;
}
#puck-content:has(.puck-card--caceo-geo) > .puck-cta .puck-cta-secondary:hover,
#puck-content:has(.puck-card--caceo-member-blue) > .puck-cta .puck-cta-secondary:hover {
  background: rgba(2, 48, 89, 0.05);
}

/* Interior heroes (not followed by a CTA band): SPA renders a navy band —
   bg-secondary with the photo at 20% opacity under a secondary/80 overlay.
   Approximate with a heavy navy tint over the background image. */
.puck-hero:not(:has(+ .puck-cta)) {
  position: relative;
}
.puck-hero:not(:has(+ .puck-cta))::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(2, 48, 89, 0.87);
  pointer-events: none;
}
.puck-hero:not(:has(+ .puck-cta)) .puck-hero-content {
  position: relative;
  z-index: 1;
}
.caceo-geo-box p {
  font-size: 0.875rem;
  color: var(--caceo-muted);
  line-height: 1.6;
  margin-bottom: 0;
}

/* History timeline */
.caceo-timeline {
  position: relative;
  max-width: 720px;
  margin: 0 auto;
  padding-left: 1.5rem;
}
.caceo-timeline::before {
  content: "";
  position: absolute;
  left: 1.375rem;
  top: 0;
  bottom: 0;
  width: 1px;
  background: #e2e8f0;
}
.caceo-timeline-item {
  position: relative;
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
  padding-bottom: 2rem;
  padding-left: 3rem;
}
.caceo-timeline-badge {
  position: absolute;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 2.75rem;
  width: 2.75rem;
  border-radius: 50%;
  background: var(--caceo-primary);
  color: #ffffff;
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 0.75rem;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(3, 76, 140, 0.25);
}
.caceo-timeline-card {
  flex: 1;
  background: #ffffff;
  border: 1px solid rgba(226, 232, 240, 0.7);
  border-radius: 0.75rem;
  padding: 1.125rem 1.375rem;
  box-shadow: 0 1px 3px rgba(2, 48, 89, 0.06);
}
.caceo-timeline-year {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--caceo-primary);
  margin-bottom: 0.35rem;
}
.caceo-timeline-card p {
  font-size: 0.875rem;
  color: var(--caceo-muted);
  line-height: 1.6;
  margin: 0;
}

@media (max-width: 640px) {
  .caceo-timeline {
    padding-left: 0.75rem;
  }
  .caceo-timeline::before {
    left: 0.875rem;
  }
  .caceo-timeline-item {
    padding-left: 2.5rem;
  }
  .caceo-timeline-badge {
    height: 2.25rem;
    width: 2.25rem;
    font-size: 0.65rem;
  }
}

/* ═══════════════════════════════════════════════════════════════
   CONTACT PAGE — sidebar link styles
   Native Cards on /contact (post raw-HTML conversion)
═══════════════════════════════════════════════════════════════ */

/* Sidebar — native Cards (variants caceo-ct-*). Values = old
   .caceo-sidebar-card / .caceo-contact-*-link rules. */
#puck-content > .puck-grid > .puck-grid-column:has(.puck-card--caceo-ct-touch) {
  min-height: 0;
  background: none;
  border: none;
  box-shadow: none;
  border-radius: 0;
  padding: 8px; /* keep the renderer's column padding — the old Text
                   carrier sat inside it, so card geometry depends on it */
  display: flex;
  flex-direction: column;
  gap: 1.25rem !important;
}
.puck-card--caceo-ct-touch,
.puck-card--caceo-ct-member,
.puck-card--caceo-ct-training {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 1rem;
  padding: 1.375rem 1.5rem !important;
  box-shadow: 0 1px 3px rgba(2, 48, 89, 0.05);
  text-align: left !important; /* minimal layout centers via inline style */
}
.puck-card--caceo-ct-touch {
  background: rgba(3, 76, 140, 0.04);
  border-color: rgba(3, 76, 140, 0.15);
}
.puck-card--caceo-ct-touch .puck-card-title,
.puck-card--caceo-ct-member .puck-card-title,
.puck-card--caceo-ct-training .puck-card-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--caceo-secondary);
  margin: 0 0 0.875rem;
  letter-spacing: normal;
}
/* "Get in Touch" heading carries a 16px mail icon (old heading svg) */
.puck-card--caceo-ct-touch .puck-card-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}
.puck-card--caceo-ct-touch .puck-card-title::before {
  content: "";
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23034C8C' stroke-width='2'%3E%3Cpath d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'/%3E%3Cpolyline points='22,6 12,13 2,6'/%3E%3C/svg%3E") center no-repeat;
}
.puck-card--caceo-ct-touch .puck-card-description,
.puck-card--caceo-ct-member .puck-card-description,
.puck-card--caceo-ct-training .puck-card-description {
  font-size: 0.8125rem;
  color: #64748b;
  line-height: 1.6;
  margin: 0 0 1rem;
}
/* Meta rows: strip renderer chrome/padding */
.puck-card--caceo-ct-touch .puck-card-meta,
.puck-card--caceo-ct-member .puck-card-meta,
.puck-card--caceo-ct-training .puck-card-meta {
  list-style: none;
  margin: 0 !important;
  padding: 0 !important;
  border: none;
  gap: 0 !important;
}
.puck-card--caceo-ct-touch .puck-card-meta-row,
.puck-card--caceo-ct-member .puck-card-meta-row,
.puck-card--caceo-ct-training .puck-card-meta-row {
  padding: 0 !important;
  margin: 0 !important;
  border: none;
  line-height: 1.75; /* matches the old anchor's line box (body 1.625 + inline-flex baseline) */
}
/* Email link (old .caceo-contact-email-link) — 14px mail icon + text */
.puck-card--caceo-ct-touch .puck-card-meta-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--caceo-primary) !important;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.15s;
}
.puck-card--caceo-ct-touch .puck-card-meta-link::before {
  content: "";
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23034C8C' stroke-width='2'%3E%3Cpath d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'/%3E%3Cpolyline points='22,6 12,13 2,6'/%3E%3C/svg%3E") center no-repeat;
}
/* Portal link (old .caceo-contact-portal-link) */
.puck-card--caceo-ct-member .puck-card-meta-link {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--caceo-primary) !important;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.15s;
}
/* Training card: link flows inline at the end of the sentence, with the
   closing period painted after it (old inline mailto link). */
.puck-card--caceo-ct-training .puck-card-description {
  display: inline;
  margin: 0;
}
.puck-card--caceo-ct-training .puck-card-meta,
.puck-card--caceo-ct-training .puck-card-meta-row {
  display: inline;
}
.puck-card--caceo-ct-training .puck-card-meta-link {
  font-size: 0.8125rem;
  color: var(--caceo-primary) !important;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.15s;
}
.puck-card--caceo-ct-training .puck-card-meta-row::after {
  content: ".";
  font-size: 0.8125rem;
  color: #64748b;
}
.puck-card--caceo-ct-touch .puck-card-meta-link:hover,
.puck-card--caceo-ct-member .puck-card-meta-link:hover,
.puck-card--caceo-ct-training .puck-card-meta-link:hover {
  color: rgba(3, 76, 140, 0.75) !important;
}

/* ═══════════════════════════════════════════════════════════════
   CERTIFICATION COURSES PAGE — standards list, sidebar cards, schedule
   Used in Text blocks on /certification-courses
═══════════════════════════════════════════════════════════════ */

/* Two-column layout: widen the main col vs. sidebar on desktop */
.puck-grid [class*="grid-col-0"]:has(.puck-card--caceo-std) {
  flex: 2 1 0%;
}
.puck-grid [class*="grid-col-1"]:has(.puck-card--caceo-side-accent) {
  flex: 1 1 0%;
}

/* Standards list */
.caceo-standards-list {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  margin-top: 0.5rem;
}
.caceo-standard-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.125rem 1.25rem;
  background: rgba(241, 245, 249, 0.5);
  border: 1px solid #e2e8f0;
  border-radius: 1rem;
}
.caceo-standard-icon {
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  background: rgba(3, 76, 140, 0.08);
  border-radius: 0.625rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 0.1rem;
}
.caceo-standard-body { flex: 1; min-width: 0; }
.caceo-standard-label {
  font-weight: 600;
  color: var(--caceo-secondary);
  font-size: 0.9rem;
  margin-bottom: 0.2rem;
}
.caceo-standard-desc {
  font-size: 0.8125rem;
  color: #64748b;
  line-height: 1.55;
  margin: 0;
}

/* Certification sidebar */
.caceo-cert-sidebar {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  position: sticky;
  top: 7rem; /* clear the fixed header */
}
.caceo-sidebar-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 1rem;
  padding: 1.375rem 1.5rem;
  box-shadow: 0 1px 3px rgba(2, 48, 89, 0.05);
}
.caceo-sidebar-card--accent {
  background: rgba(3, 76, 140, 0.04);
  border-color: rgba(3, 76, 140, 0.15);
}
.caceo-sidebar-heading {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--caceo-secondary);
  margin: 0 0 0.75rem;
  font-family: 'Outfit', sans-serif;
}
.caceo-sidebar-heading-plain {
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--caceo-secondary);
  margin: 0 0 0.875rem;
  font-family: 'Outfit', sans-serif;
}
.caceo-sidebar-body {
  font-size: 0.8125rem;
  color: #64748b;
  line-height: 1.6;
  margin: 0 0 1rem;
}
.caceo-sidebar-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  width: 100%;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 600;
  text-decoration: none !important;
  text-align: center;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  cursor: pointer;
}
.caceo-sidebar-btn--accent {
  background: var(--caceo-accent);
  color: #ffffff !important;
  border: none;
}
.caceo-sidebar-btn--accent:hover { background: rgba(191, 10, 48, 0.85); }
.caceo-sidebar-btn--outline {
  background: transparent;
  color: var(--caceo-secondary) !important;
  border: 1px solid rgba(2, 48, 89, 0.3);
  margin-top: 0.875rem;
}
.caceo-sidebar-btn--outline:hover { background: rgba(2, 48, 89, 0.04); }

/* Certification schedule list (in sidebar card) */
.caceo-schedule-list {
  list-style: none;
  padding: 0;
  margin: 0 0 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.caceo-schedule-item {
  display: flex;
  gap: 0.75rem;
  font-size: 0.8125rem;
}
.caceo-schedule-date {
  flex-shrink: 0;
  font-weight: 700;
  color: var(--caceo-primary);
  width: 5rem;
}
.caceo-schedule-name { color: #64748b; }


@media (max-width: 640px) {
  .caceo-cert-sidebar { position: static; }
  .puck-grid-column:has(> .puck-grid .puck-card--caceo-side-accent) { position: static; }
}

/* ═══════════════════════════════════════════════════════════════
   TRAINING PAGE — resource link list (caceo-training-links)
   Used in Text blocks on /training
═══════════════════════════════════════════════════════════════ */

.caceo-training-links {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 0.5rem;
}

.caceo-training-link {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.125rem 1.375rem;
  background: rgba(241, 245, 249, 0.5);
  border: 1px solid #e2e8f0;
  border-radius: 1rem;
  text-decoration: none !important;
  color: inherit;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.caceo-training-link:hover {
  border-color: rgba(3, 76, 140, 0.3);
  background: rgba(241, 245, 249, 0.9);
  box-shadow: 0 2px 8px rgba(2, 48, 89, 0.06);
  text-decoration: none !important;
}

.caceo-training-link-icon {
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  background: rgba(3, 76, 140, 0.08);
  border-radius: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--caceo-primary);
  transition: transform 0.15s;
}
.caceo-training-link:hover .caceo-training-link-icon {
  transform: scale(1.1);
}

.caceo-training-link-body {
  flex: 1;
  min-width: 0;
}

.caceo-training-link-label {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--caceo-secondary);
  transition: color 0.15s;
  line-height: 1.4;
}
.caceo-training-link:hover .caceo-training-link-label {
  color: var(--caceo-primary);
}

.caceo-training-link-desc {
  font-size: 0.75rem;
  color: #64748b;
  margin: 0.2rem 0 0;
  line-height: 1.55;
}

.caceo-ext-icon {
  display: inline-block;
  vertical-align: middle;
  color: #94a3b8;
  flex-shrink: 0;
}

@media (max-width: 640px) {
  .caceo-training-link {
    padding: 0.875rem 1rem;
    gap: 0.75rem;
  }
  .caceo-training-link-icon {
    width: 2.25rem;
    height: 2.25rem;
  }
}

/* ═══════════════════════════════════════════════════════════════
   AWARD PAGES — custom HTML block classes
   Used in Text blocks on /juan-eagle-award and /rodney-morales-award
═══════════════════════════════════════════════════════════════ */

/* Generic "about" content box (white card with border) */
.caceo-about-box {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 1rem;
  padding: 2rem;
  box-shadow: 0 1px 3px rgba(2, 48, 89, 0.06);
}
.caceo-about-box p {
  color: #64748b;
  line-height: 1.7;
  margin-bottom: 1rem;
}
.caceo-about-box p:last-child { margin-bottom: 0; }
.caceo-about-box strong { color: var(--caceo-secondary); }

/* Memorial / honoree callout box */
.caceo-memorial-box {
  margin-top: 1.25rem;
  background: rgba(3, 76, 140, 0.04);
  border: 1px solid #e2e8f0;
  border-radius: 0.75rem;
  padding: 1.125rem 1.375rem;
}
.caceo-memorial-box p {
  font-size: 0.9rem;
  color: var(--caceo-secondary);
  line-height: 1.65;
  font-weight: 500;
  margin: 0;
}
.caceo-memorial-box strong { color: var(--caceo-secondary); font-weight: 700; }

/* Past recipients list (Juan Eagle) */
.caceo-recipients-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.caceo-recipient-row {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
  background: rgba(241, 245, 249, 0.7);
  border: 1px solid rgba(226, 232, 240, 0.6);
  border-radius: 0.75rem;
  padding: 1rem 1.5rem;
  transition: border-color 0.15s, background 0.15s;
}
.caceo-recipient-row:hover {
  border-color: rgba(3, 76, 140, 0.2);
  background: rgba(241, 245, 249, 0.95);
}
.caceo-recipient-year {
  flex-shrink: 0;
  width: 3.5rem;
  font-family: 'Outfit', sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  color: #94a3b8;
  padding-top: 0.1rem;
}
.caceo-recipient-year--primary { color: var(--caceo-primary); }
.caceo-recipient-detail { flex: 1; }
.caceo-recipient-jurisdiction {
  font-weight: 600;
  color: var(--caceo-secondary);
  margin-bottom: 0.2rem;
  font-size: 0.9375rem;
}
.caceo-recipient-event {
  font-size: 0.8125rem;
  color: #64748b;
  line-height: 1.5;
}

/* Recipient card (Rodney Morales — larger story block) */
.caceo-recipient-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 1rem;
  box-shadow: 0 1px 3px rgba(2, 48, 89, 0.06);
  overflow: hidden;
}
.caceo-recipient-card-header {
  background: var(--caceo-primary);
  padding: 0.75rem 1.5rem;
}
.caceo-recipient-card-year {
  font-family: 'Outfit', sans-serif;
  font-size: 1.125rem;
  font-weight: 700;
  color: #ffffff;
}
.caceo-recipient-card-body {
  padding: 1.5rem 2rem;
}
.caceo-recipient-names {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--caceo-accent);
  background: rgba(191, 10, 48, 0.07);
  border: 1px solid rgba(191, 10, 48, 0.2);
  border-radius: 9999px;
  padding: 0.3rem 1rem;
  margin-bottom: 1rem;
}
.caceo-recipient-card-body p {
  color: #64748b;
  line-height: 1.7;
  margin: 0;
}

@media (max-width: 640px) {
  .caceo-recipient-row {
    padding: 0.875rem 1rem;
    gap: 0.875rem;
  }
  .caceo-recipient-year { width: 2.75rem; font-size: 1rem; }
  .caceo-recipient-card-body { padding: 1.25rem 1.25rem; }
  .caceo-about-box { padding: 1.25rem; }
}

/* ═══════════════════════════════════════════════════════════════
   BOARD PAGE — section headers and people-card grid
   Used inside puck-text rich-text blocks on the /board page
═══════════════════════════════════════════════════════════════ */

/* Section heading + rule stripe (Officers / Board Members) */
.caceo-section-header {
  margin-bottom: 1.5rem;
}
.caceo-section-header h2 {
  font-family: 'Outfit', sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--caceo-secondary);
  margin: 0 0 0.5rem 0;
}
.caceo-section-rule {
  height: 4px;
  width: 3rem;
  border-radius: 9999px;
}
.caceo-section-rule--accent  { background: var(--caceo-accent); }
.caceo-section-rule--primary { background: var(--caceo-primary); }

/* Responsive 5-up card grid */
.caceo-board-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.25rem;
  margin-bottom: 1rem;
}

/* Individual member card */
.caceo-member-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 1rem;
  box-shadow: 0 1px 3px rgba(2, 48, 89, 0.06);
  padding: 1.5rem 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: box-shadow 0.2s, border-color 0.2s;
}
.caceo-member-card:hover {
  box-shadow: 0 4px 12px rgba(2, 48, 89, 0.1);
  border-color: rgba(3, 76, 140, 0.2);
}

/* Avatar circle */
.caceo-member-avatar {
  height: 4rem;
  width: 4rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 1.25rem;
  color: #ffffff;
  margin-bottom: 1rem;
  flex-shrink: 0;
}
/* Avatar color variants matching React avatarColors array */
.av-blue    { background: #034C8C; }
.av-navy    { background: #023059; }
.av-red     { background: #BF0A30; }
.av-blue-lt { background: rgba(3, 76, 140, 0.8); }
.av-navy-lt { background: rgba(2, 48, 89, 0.8); }

/* Name */
.caceo-member-name {
  font-family: 'Outfit', sans-serif;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--caceo-secondary);
  margin: 0 0 0.5rem 0;
  line-height: 1.3;
}

/* Role badge pill */
.caceo-member-role {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--caceo-accent);
  background: rgba(191, 10, 48, 0.08);
  border: 1px solid rgba(191, 10, 48, 0.2);
  border-radius: 9999px;
  padding: 0.2rem 0.75rem;
  margin-bottom: 0.625rem;
  white-space: nowrap;
}

/* Organization line */
.caceo-member-org {
  display: flex;
  align-items: flex-start;
  gap: 0.25rem;
  font-size: 0.75rem;
  color: #64748b;
  line-height: 1.4;
  text-align: center;
}
.caceo-member-org svg {
  flex-shrink: 0;
  margin-top: 0.1rem;
  color: #94a3b8;
}

/* Responsive: collapse to 2-col on tablet, 1-col on mobile */
@media (max-width: 1024px) {
  .caceo-board-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 640px) {
  .caceo-board-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.875rem;
  }
  .caceo-member-card {
    padding: 1.25rem 0.75rem;
  }
  .caceo-member-avatar {
    height: 3rem;
    width: 3rem;
    font-size: 1rem;
  }
}

/* Contact page (scoped via .puck-card--caceo-ct-touch): the old site renders
   the whole content section on a white band and shows a mail-icon chip
   before the hero title. */
main:has(.puck-card--caceo-ct-touch) {
  background-color: #ffffff;
}
main:has(.puck-card--caceo-ct-touch) .puck-hero-title {
  display: flex;
  align-items: center;
  gap: 1rem;
}
main:has(.puck-card--caceo-ct-touch) .puck-hero-title::before {
  content: "";
  width: 3rem;
  height: 3rem;
  border-radius: 1rem;
  flex-shrink: 0;
  background-color: rgba(3, 76, 140, 0.45);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'/%3E%3Cpolyline points='22,6 12,13 2,6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

/* Training page (scoped via .caceo-training-links): white content band,
   book-icon chip on the hero title, full-bleed photo strip, and a light
   left-aligned "Ready to Register?" CTA band like the old site. */
main:has([class*="puck-card--caceo-tlink"]) {
  background-color: #ffffff;
  padding-bottom: 0;
}
main:has([class*="puck-card--caceo-tlink"]) .puck-hero-title {
  display: flex;
  align-items: center;
  gap: 1rem;
}
main:has([class*="puck-card--caceo-tlink"]) .puck-hero-title::before {
  content: "";
  width: 3rem;
  height: 3rem;
  border-radius: 1rem;
  flex-shrink: 0;
  background-color: rgba(3, 76, 140, 0.45);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z'/%3E%3Cpath d='M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}
/* Photo strip: edge-to-edge, no gaps, no card treatment, no rounding */
#puck-content:has([class*="puck-card--caceo-tlink"]) > .puck-grid:has(img) {
  max-width: none;
  margin-inline: -2rem;
  margin-block: 0 !important;
  gap: 0 !important;
}
#puck-content:has([class*="puck-card--caceo-tlink"]) > .puck-grid:has(img) > .puck-grid-column {
  background: none;
  border: none;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
}
#puck-content:has([class*="puck-card--caceo-tlink"]) > .puck-grid:has(img) img {
  display: block;
  width: 100%;
  height: 288px;
  object-fit: cover;
  border-radius: 0 !important;
}
/* "Ready to Register?" CTA: light muted band, navy title + copy on the
   left, red primary button on the right (old-site layout). */
#puck-content:has([class*="puck-card--caceo-tlink"]) > .puck-cta {
  background: #eef2f7 !important;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "title buttons" "desc buttons";
  align-items: center;
  column-gap: 3rem;
  padding-block: 4rem;
  padding-inline: max(2rem, calc((100% - 1280px + 3rem) / 2));
  text-align: left;
  margin-block: 0 !important;
}
#puck-content:has([class*="puck-card--caceo-tlink"]) > .puck-cta .puck-cta-title {
  grid-area: title;
  color: var(--color-secondary);
  font-size: 1.5rem;
  margin: 0 0 0.5rem;
}
#puck-content:has([class*="puck-card--caceo-tlink"]) > .puck-cta .puck-cta-description {
  grid-area: desc;
  color: var(--color-textSecondary);
  max-width: 36rem;
  margin: 0;
}
#puck-content:has([class*="puck-card--caceo-tlink"]) > .puck-cta .puck-cta-buttons {
  grid-area: buttons;
  justify-content: flex-end;
}
#puck-content:has([class*="puck-card--caceo-tlink"]) > .puck-cta .puck-cta-primary {
  background-color: var(--caceo-accent);
  border-color: var(--caceo-accent-border);
  color: #ffffff;
  min-height: 2.75rem;
  padding: 0.75rem 1.5rem;
  font-weight: 600;
}
@media (max-width: 768px) {
  #puck-content:has([class*="puck-card--caceo-tlink"]) > .puck-cta {
    grid-template-columns: 1fr;
    grid-template-areas: "title" "desc" "buttons";
    row-gap: 1rem;
  }
  #puck-content:has([class*="puck-card--caceo-tlink"]) > .puck-cta .puck-cta-buttons {
    justify-content: flex-start;
  }
}

/* Upcoming Trainings page — scoped via the Hero followed directly by the
   native EventList block, a structure unique to this page (other EventList
   pages have intervening blocks or a CTA after the hero): calendar-icon
   chip on the hero title, matching the old site's page header. */
main:has(#puck-content > .puck-hero + .recur-event-list) .puck-hero-title {
  display: flex;
  align-items: center;
  gap: 1rem;
}
main:has(#puck-content > .puck-hero + .recur-event-list) .puck-hero-title::before {
  content: "";
  width: 3rem;
  height: 3rem;
  border-radius: 1rem;
  flex-shrink: 0;
  background-color: rgba(3, 76, 140, 0.45);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

/* Quarterly Training page (scoped via .puck-card--caceo-expect): users-icon chip
   on the hero title and a white full-bleed band behind the overview text. */
main:has(.puck-card--caceo-expect) .puck-hero-title {
  display: flex;
  align-items: center;
  gap: 1rem;
}
main:has(.puck-card--caceo-expect) .puck-hero-title::before {
  content: "";
  width: 3rem;
  height: 3rem;
  border-radius: 1rem;
  flex-shrink: 0;
  background-color: rgba(3, 76, 140, 0.45);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M23 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}
/* Overview text (block right after the hero): white full-bleed band */
#puck-content:has(.puck-card--caceo-expect) > :nth-child(2) {
  max-width: none;
  margin-inline: -2rem;
  background-color: #ffffff;
  padding-top: 3rem !important;
  padding-bottom: 3rem !important;
  padding-left: max(2rem, calc((100% - 1280px) / 2)) !important;
  padding-right: max(2rem, calc((100% - 1280px) / 2)) !important;
}
@media (max-width: 768px) {
  #puck-content:has(.puck-card--caceo-expect) > :nth-child(2) {
    padding-left: var(--container-px, 1rem) !important;
    padding-right: var(--container-px, 1rem) !important;
  }
}

/* Certification Courses page (scoped via .caceo-standards-list /
   .caceo-cert-sidebar): award-icon chip on the hero title, uppercase
   tagline line above the subtitle, and no white card treatment on the
   grid columns (content sits on the page background like the old site). */
main:has(.puck-card--caceo-side-accent) .puck-hero-title {
  display: flex;
  align-items: center;
  gap: 1rem;
}
main:has(.puck-card--caceo-side-accent) .puck-hero-title::before {
  content: "";
  width: 3rem;
  height: 3rem;
  border-radius: 1rem;
  flex-shrink: 0;
  background-color: rgba(3, 76, 140, 0.45);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='6'/%3E%3Cpath d='M15.477 12.89 17 22l-5-3-5 3 1.523-9.11'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}
main:has(.puck-card--caceo-side-accent) .puck-hero-subtitle::before {
  content: "Professional Standards \2022  Leadership \2022  Excellence";
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #bfdbfe;
  margin-bottom: 0.5rem;
}
#puck-content > .puck-grid > .puck-grid-column:has(.puck-card--caceo-std),
#puck-content > .puck-grid > .puck-grid-column:has(.puck-card--caceo-side-accent) {
  background: none;
  border: none;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
}

/* Certification grid geometry: 2:1 main/sidebar on desktop (reference is a
   3-col grid with main spanning 2), collapsing to one column at lg/1024px. */
#puck-content > .puck-grid:has(.puck-card--caceo-side-accent) {
  grid-template-columns: 2fr 1fr !important;
}
@media (max-width: 1024px) {
  #puck-content > .puck-grid:has(.puck-card--caceo-side-accent) {
    grid-template-columns: 1fr !important;
  }
}

/* External Training page (scoped via .caceo-xt-external): globe-icon chip
   on the hero title, matching the old site's icon+title header. */
main:has(.caceo-xt-external) .puck-hero-title {
  display: flex;
  align-items: center;
  gap: 1rem;
}
main:has(.caceo-xt-external) .puck-hero-title::before {
  content: "";
  width: 3rem;
  height: 3rem;
  border-radius: 1rem;
  flex-shrink: 0;
  background-color: rgba(3, 76, 140, 0.45);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20'/%3E%3Cpath d='M2 12h20'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

/* Submit button: send icon before the label (SPA uses lucide Send) */
.caceo-xt-submit::before {
  content: "";
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0-.635-.635l-19 6.5a.5.5 0 0 0-.024.937l7.93 3.18a2 2 0 0 1 1.112 1.11z'/%3E%3Cpath d='m21.854 2.147-10.94 10.939'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

/* Host a Training page (scoped via .caceo-xt-host): building-icon chip
   on the hero title, matching the old site's icon+title header. */
main:has(.caceo-xt-host) .puck-hero-title {
  display: flex;
  align-items: center;
  gap: 1rem;
}
main:has(.caceo-xt-host) .puck-hero-title::before {
  content: "";
  width: 3rem;
  height: 3rem;
  border-radius: 1rem;
  flex-shrink: 0;
  background-color: rgba(3, 76, 140, 0.45);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18Z'/%3E%3Cpath d='M6 12H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2'/%3E%3Cpath d='M18 9h2a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-2'/%3E%3Cpath d='M10 6h4'/%3E%3Cpath d='M10 10h4'/%3E%3Cpath d='M10 14h4'/%3E%3Cpath d='M10 18h4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

/* Job Board page (scoped via .puck-card--caceo-jb-cta): briefcase-icon chip
   on the hero title, matching the old site's icon+title header. */
main:has(.puck-card--caceo-jb-cta) .puck-hero-title {
  display: flex;
  align-items: center;
  gap: 1rem;
}
main:has(.puck-card--caceo-jb-cta) .puck-hero-title::before {
  content: "";
  width: 3rem;
  height: 3rem;
  border-radius: 1rem;
  flex-shrink: 0;
  background-color: rgba(3, 76, 140, 0.45);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 20V4a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16'/%3E%3Crect width='20' height='14' x='2' y='6' rx='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

/* Join page (scoped via .recur-product-card — the only page with the
   membership product block): old site renders the body on a white
   full-bleed band with the membership card image and CTA centered in a
   narrow (max-w-2xl) column. Strip the renderer's white column-card
   wrapper and center everything. */
main:has(.recur-product-card) {
  background: #ffffff;
}
#puck-content > .puck-grid:has(.recur-product-card) {
  max-width: 42rem; /* max-w-2xl like the old site */
}
#puck-content > .puck-grid:has(.recur-product-card) > .puck-grid-column {
  background: none;
  border: none;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
}
/* Product card: centered, chrome-less like the old site's plain
   "Ready to join…?" line + red button */
main:has(.recur-product-card) .recur-product-card {
  border: none;
  box-shadow: none;
  background: none;
  text-align: center;
}
main:has(.recur-product-card) .recur-product-card:hover { box-shadow: none; }

/* Join page v2 (scoped via .recur-product-card — the only page with a
   RecurSingleProduct block): the renderer writes the
   product-card chrome and body padding as INLINE styles, so !important
   is required. Hide product metadata (title/price/description) — the
   old site shows only the "Ready to join…" line + red CTA — and keep
   the native checkout button, relabeled via a CSS text swap. */
/* "Ready to join…" line — native Text block (the page's only Text). */
main:has(.recur-product-card) .puck-text p {
  margin: 2rem 0 0;
  text-align: center;
  color: var(--color-textSecondary);
  font-size: 1rem;
}
main:has(.recur-product-card) .recur-product-card {
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
  text-align: center;
}
main:has(.recur-product-card) .recur-product-card-body {
  padding: 0.5rem 0 0 !important;
}
main:has(.recur-product-card) .recur-product-card-title,
main:has(.recur-product-card) .recur-product-card-price,
main:has(.recur-product-card) .recur-product-card-description,
main:has(.recur-product-card) .recur-product-card-image {
  display: none !important;
}
/* Relabel the native checkout anchor to the old site's CTA text and
   style it as the red pill button */
main:has(.recur-product-card) .recur-product-card-button {
  font-size: 0 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 2rem !important;
  border-radius: 0.75rem !important;
  background-color: var(--caceo-accent) !important;
  color: var(--caceo-accent-fg) !important;
  border: 1px solid var(--caceo-accent-border) !important;
}
main:has(.recur-product-card) .recur-product-card-button::before {
  content: "Join / Renew Membership";
  font-size: 0.9375rem;
  font-weight: 600;
  font-family: var(--font-primary);
  line-height: 1;
}

/* Juan Eagle Award page (scoped via .caceo-jea-winner-head):
   award-icon chip on the hero title (accent-tinted box, red award icon)
   like the old site's header. */
main:has(.puck-card--caceo-jea-head) .puck-hero-title {
  display: flex;
  align-items: center;
  gap: 1rem;
}
main:has(.puck-card--caceo-jea-head) .puck-hero-title::before {
  content: "";
  width: 3rem;
  height: 3rem;
  border-radius: 1rem;
  flex-shrink: 0;
  background-color: rgba(191, 10, 48, 0.2);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23BF0A30' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15.477 12.89 1.515 8.526a.5.5 0 0 1-.81.47l-3.58-2.687a1 1 0 0 0-1.197 0l-3.586 2.686a.5.5 0 0 1-.81-.469l1.514-8.526'/%3E%3Ccircle cx='12' cy='8' r='6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

/* Winner header: red "2024 Award Winner" pill beside the heading */
.caceo-jea-winner-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin: 3rem 0 0;
}
.caceo-jea-winner-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 1rem;
  background-color: rgba(191, 10, 48, 0.1);
  border: 1px solid rgba(191, 10, 48, 0.2);
  color: var(--caceo-accent);
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 600;
  white-space: nowrap;
}
.caceo-jea-winner-badge::before {
  content: "";
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23BF0A30' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15.477 12.89 1.515 8.526a.5.5 0 0 1-.81.47l-3.58-2.687a1 1 0 0 0-1.197 0l-3.586 2.686a.5.5 0 0 1-.81-.469l1.514-8.526'/%3E%3Ccircle cx='12' cy='8' r='6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}
.caceo-jea-winner-title {
  margin: 0;
  font-size: 1.75rem;
  color: var(--caceo-secondary);
}

/* Winner grid: strip the renderer's white card treatment from the text
   column (old site shows plain text on the section background) */
main:has(.puck-card--caceo-jea-head) #puck-content > .puck-grid > .puck-grid-column,
#puck-content:has(.puck-card--caceo-jea-head) > .puck-grid > .puck-grid-column {
  background: none;
  border: none;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
}

/* Rodney Morales Award page (scoped via .caceo-memorial-box):
   heart-icon chip on the hero title (accent-tinted box, red heart) */
main:has(.puck-card--caceo-rm-recipient) .puck-hero-title {
  display: flex;
  align-items: center;
  gap: 1rem;
}
main:has(.puck-card--caceo-rm-recipient) .puck-hero-title::before {
  content: "";
  width: 3rem;
  height: 3rem;
  border-radius: 1rem;
  flex-shrink: 0;
  background-color: rgba(191, 10, 48, 0.2);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23BF0A30' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

/* Shield icon before the "About the Award" heading (first block after
   the hero), matching the old site */
#puck-content:has(.puck-card--caceo-rm-recipient) > .puck-hero + * h2::before,
#puck-content:has(.puck-card--caceo-rm-recipient) > .puck-hero + h2::before {
  content: "";
  display: inline-block;
  width: 1.25rem;
  height: 1.25rem;
  margin-right: 0.5rem;
  vertical-align: -0.15rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23034C8C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

/* Strip the renderer's white card chrome from the about grid columns
   (old site shows plain text + plaque image on the section bg) */
#puck-content:has(.puck-card--caceo-rm-recipient) > .puck-grid > .puck-grid-column {
  background: none;
  border: none;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
}

/* Recipient card: heart icon beside the year in the blue header, and a
   small heart in the names pill, like the old site */
.caceo-recipient-card-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.caceo-recipient-card-header::before {
  content: "";
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.8)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}
.caceo-recipient-names::before {
  content: "";
  width: 0.875rem;
  height: 0.875rem;
  flex-shrink: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23BF0A30' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

/* About page: extra breathing room between the hero and the first heading */
#puck-content:has(.puck-card--caceo-geo) > .puck-hero + * {
  margin-top: 2.5rem;
}

/* Board page: the renderer leaves a vertical gap between the Officers
   header block and the officers grid block, exposing the gray page
   background as a bar under the heading. Pull the grid block up over the
   gap and restore the spacing as white padding inside the band. */
#puck-content:has(.puck-card--caceo-member-blue) > :nth-child(3) {
  margin-top: -2rem !important;
  padding-top: 2rem;
}

/* Juan Eagle page: the winner-head Embed renders full-width, so the red
   badge sat left of the container edge. Cap it to the container and center
   so it lines up with the text below. */
.caceo-jea-winner-head {
  max-width: var(--container-max-width);
  margin: 3rem auto 0;
}

/* Certification Courses page: extra breathing room between the hero and
   the first content section */
#puck-content:has(.puck-card--caceo-side-accent) > .puck-hero + * {
  margin-top: 2.5rem;
}

/* Job Board page: breathing room between the hero and the widget, and
   vertical padding inside the widget so the empty state / listings and
   the Post-a-Job band aren't scrunched together. */
#puck-content:has(.puck-card--caceo-jb-cta) > .puck-hero + * {
  margin-top: 2.5rem;
}
#puck-content .recur-job-board {
  padding-top: 1.5rem;
  padding-bottom: 2.5rem;
}
#puck-content .recur-job-board > * {
  margin-block: 1rem;
}
/* Job Board — modern, individual listing cards. The JobBoard renderer has
   no semantic class on its generated grid/cards, but its grid wrapper is
   reliably the direct child with inline display:grid. Scope all overrides
   to that structure so search, empty, and paging states stay untouched. */
#puck-content .recur-job-board > div[style*="display:grid"] {
  gap: 1.25rem !important;
}
#puck-content .recur-job-board > div[style*="display:grid"] > div {
  min-height: 100%;
  min-width: 0;
  overflow: hidden;
  padding: 1.5rem !important;
  gap: 0.875rem !important;
  background: #ffffff !important;
  border: 1px solid rgba(3, 76, 140, 0.16) !important;
  border-top: 4px solid var(--caceo-primary) !important;
  border-radius: 1rem !important;
  box-shadow: 0 2px 8px rgba(2, 48, 89, 0.07) !important;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}
#puck-content .recur-job-board > div[style*="display:grid"] > div:hover {
  transform: translateY(-3px);
  border-color: rgba(3, 76, 140, 0.32) !important;
  box-shadow: 0 12px 24px rgba(2, 48, 89, 0.13) !important;
}
#puck-content .recur-job-board > div[style*="display:grid"] > div > h3 {
  font-family: var(--font-display) !important;
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  color: var(--caceo-secondary) !important;
}
#puck-content .recur-job-board > div[style*="display:grid"] > div > p {
  color: #526578 !important;
  line-height: 1.6 !important;
  overflow-wrap: anywhere;
}
#puck-content .recur-job-board > div[style*="display:grid"] > div > p.caceo-jb-description--collapsed {
  display: -webkit-box !important;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
}
#puck-content .recur-job-board > div[style*="display:grid"] > div > p.caceo-jb-description--fits {
  display: block !important;
  overflow: visible !important;
  -webkit-line-clamp: unset !important;
  -webkit-box-orient: initial !important;
}
.caceo-jb-read-more {
  align-self: flex-start;
  margin: -0.25rem 0 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--caceo-primary);
  font-family: var(--font-primary);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.4;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.caceo-jb-read-more:hover { color: var(--caceo-secondary); }
.caceo-jb-read-more:focus-visible {
  outline: 2px solid var(--caceo-primary);
  outline-offset: 3px;
  border-radius: 2px;
}
#puck-content .recur-job-board > div[style*="display:grid"] > div span {
  border-color: rgba(3, 76, 140, 0.16) !important;
  background: #f0f6fd !important;
  color: var(--caceo-secondary) !important;
}
#puck-content .recur-job-board > div[style*="display:grid"] > div a {
  padding: 0.625rem 1rem !important;
  border-radius: 0.625rem !important;
  background: var(--caceo-primary) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 5px rgba(3, 76, 140, 0.2);
  transition: background-color 160ms ease, transform 160ms ease;
}
#puck-content .recur-job-board > div[style*="display:grid"] > div a:hover {
  background: var(--caceo-secondary) !important;
  transform: translateY(-1px);
  text-decoration: none;
}
@media (max-width: 767px) {
  #puck-content .recur-job-board > div[style*="display:grid"] {
    grid-template-columns: 1fr !important;
  }
  #puck-content .recur-job-board > div[style*="display:grid"] > div {
    padding: 1.25rem !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   LEAVE-SITE CONFIRMATION MODAL (Embed-leave-modal, every page)
   Shown before following the "Report an Incident" external link.
   OWNER-APPROVED EXCEPTION (2026-08-12): the owner chose to keep this
   script Embed — interactive JS with no native equivalent. These
   .caceo-leave-* rules are NOT legacy cleanup candidates.
═══════════════════════════════════════════════════════════════ */
.caceo-leave-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(2, 48, 89, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}
.caceo-leave-overlay[hidden] { display: none; }
.caceo-leave-modal {
  position: relative;
  background: #ffffff;
  border-radius: 0.75rem;
  box-shadow: 0 20px 50px rgba(2, 48, 89, 0.35);
  max-width: 42rem;
  width: 100%;
  padding: 2rem 2.5rem 2.25rem;
  font-family: var(--font-primary);
}
.caceo-leave-close {
  position: absolute;
  top: 1rem;
  right: 1.25rem;
  background: none;
  border: none;
  font-size: 1.125rem;
  line-height: 1;
  color: #64748b;
  cursor: pointer;
  padding: 0.25rem;
}
.caceo-leave-close:hover { color: var(--caceo-secondary); }
.caceo-leave-title {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 1rem;
  font-family: var(--font-display, var(--font-primary));
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--caceo-secondary);
}
.caceo-leave-title-icon {
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23023059' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h6v6'/%3E%3Cpath d='M10 14 21 3'/%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}
.caceo-leave-body {
  margin: 0 0 1.75rem;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: #64748b;
}
.caceo-leave-body strong { color: var(--caceo-secondary); }
.caceo-leave-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.caceo-leave-stay {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 0.5rem;
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--caceo-secondary);
  cursor: pointer;
  font-family: inherit;
}
.caceo-leave-stay:hover { background: #f8fafc; }
.caceo-leave-continue {
  display: inline-flex;
  align-items: center;
  background: var(--caceo-secondary);
  border-radius: 0.5rem;
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  font-weight: 600;
  color: #ffffff !important;
  text-decoration: none;
}
.caceo-leave-continue:hover { opacity: 0.92; }

/* Contact page: extra breathing room between the hero and the first
   content section */
#puck-content:has(.puck-card--caceo-ct-touch) > .puck-hero + * {
  margin-top: 2.5rem;
}

/* Join page: breathing room below the hero, and rounded corners on the
   membership-card image */
#puck-content:has(.recur-product-card) > .puck-hero + * {
  margin-top: 2.5rem;
}
main:has(.recur-product-card) .puck-image img,
main:has(.recur-product-card) .puck-image {
  border-radius: 1rem;
  overflow: hidden;
}

/* Sitewide: main's 2rem bottom padding paints as a gray bar between the
   last content section and the footer on every page — remove it globally
   (supersedes the earlier per-page removals on home/agencies). */
main {
  padding-bottom: 0;
}

/* The footer's own 4rem top margin paints as a gray bar under every page
   — remove it so content bands meet the footer flush. */
.site-footer {
  margin-top: 0;
}

/* Upcoming Trainings page: breathing room between the hero and the
   event list (now directly adjacent — the hidden page hook was removed) */
#puck-content > .puck-hero + .recur-event-list {
  margin-top: 2.5rem;
}

/* Juan Eagle page: breathing room between the recipients list (last
   section) and the footer */
main:has(.puck-card--caceo-jea-head) #puck-content > .puck-grid:last-child {
  margin-bottom: 3rem;
}

/* Rodney Morales page: breathing room between the recipient card (last
   section) and the footer */
#puck-content > .puck-card--caceo-rm-recipient {
  margin-bottom: 3rem;
}

/* Upcoming Trainings page: breathing room between the event list (last
   section) and the footer */
#puck-content > .puck-hero + .recur-event-list {
  margin-bottom: 3rem;
}

/* Certification Courses page: breathing room between the last content
   section and the footer */
#puck-content:has(.puck-card--caceo-side-accent) .puck-image {
  margin-bottom: 3rem;
}

/* Join page: breathing room between the membership CTA (last section)
   and the footer */
main:has(.recur-product-card) .recur-product-card {
  margin-bottom: 3rem;
}

/* =============================================================
   NATIVE CARD VARIANTS (home page HTML-carrier conversion)
   Replaces Embed-mission-cards / Embed-host-training /
   Embed-benefits-body / Embed-pricing-card. Legacy .caceo-mc-* /
   .caceo-host-* / .caceo-mb-* rules purged (all pages converted).
   ============================================================= */

/* Mission value cards — 3-up grid of icon Cards */
#puck-content > .puck-grid:has(.puck-card--caceo-mission) {
  padding: 2rem 0 3rem;
}
.puck-card--caceo-mission {
  background-color: #f8fafc;
  border: 1px solid rgba(2, 48, 89, 0.06);
  border-radius: 0.75rem;
  padding: 1.75rem;
  box-shadow: none;
  text-align: left !important;      /* overrides inline center */
  align-items: flex-start !important;
  gap: 0 !important;
}
.puck-card--caceo-mission > .material-symbols-outlined {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.625rem;
  background-color: rgba(3, 76, 140, 0.08);
  color: var(--caceo-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.375rem !important;
  margin-bottom: 1.25rem;
}
.puck-card--caceo-mission .puck-card-title {
  font-size: 1.0625rem;
  margin-bottom: 0.625rem;
  color: var(--caceo-secondary);
}
.puck-card--caceo-mission .puck-card-description {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--color-textSecondary);
  margin: 0;
}

/* Host-a-training horizontal Card */
#puck-content > .puck-card--caceo-host {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  background-color: rgba(241, 245, 249, 0.4);
  border: 1px solid rgba(2, 48, 89, 0.08);
  border-radius: 1rem;
  padding: 1.5rem;
  box-shadow: none;
  max-width: 56rem;
  margin: 2rem auto 3rem;
}
.puck-card--caceo-host > img {
  width: 10rem !important;
  height: 7rem !important;
  object-fit: cover;
  border-radius: 0.75rem;
}
.puck-card--caceo-host .puck-card-title {
  font-size: 1rem;
  color: var(--caceo-secondary);
  margin-bottom: 0.25rem;
}
.puck-card--caceo-host .puck-card-description {
  font-size: 0.875rem;
  color: var(--color-textSecondary);
  margin: 0 0 0.75rem;
}
.puck-card--caceo-host .puck-card-button {
  display: inline-flex !important;
  align-items: center;
  padding: 0.375rem 0.875rem;
  min-height: 0;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--caceo-secondary);
  background-color: #ffffff;
  border: 1px solid rgba(2, 48, 89, 0.25);
  border-radius: var(--radius);
}
.puck-card--caceo-host .puck-card-button:hover {
  background-color: rgba(2, 48, 89, 0.05);
  opacity: 1;
  box-shadow: none;
}
@media (max-width: 640px) {
  #puck-content > .puck-card--caceo-host { flex-direction: column; align-items: stretch; }
  .puck-card--caceo-host > img { width: 100% !important; height: 9rem !important; }
}

/* Benefits checklist Card — chrome-less, left-aligned */
.puck-card--caceo-benefits {
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
  padding: 0 !important;
  text-align: left !important;
  overflow: visible;
  margin-top: 2rem;
}
.puck-card--caceo-benefits .puck-card-title {
  font-size: 1.125rem;
  color: var(--caceo-secondary);
  margin-bottom: 1rem;
}
.puck-card--caceo-benefits .puck-card-description:empty { display: none; }
.puck-card--caceo-benefits .puck-card-checklist {
  margin: 0 0 2.5rem;
  padding: 0;
  gap: 0.75rem !important;
}
.puck-card--caceo-benefits .puck-card-checklist li {
  color: var(--caceo-secondary);
  line-height: 1.5;
}
.puck-card--caceo-benefits .puck-card-checklist .material-symbols-outlined {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 9999px;
  background-color: rgba(191, 10, 48, 0.10);
  color: var(--caceo-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  margin-top: 0.125rem;
}

/* Amber email notice Card */
.puck-card--caceo-notice {
  background-color: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 1rem;
  padding: 1.25rem !important;
  box-shadow: none;
  align-items: flex-start !important;
}
.puck-card--caceo-notice > .material-symbols-outlined {
  color: #d97706;
  font-size: 1.25rem !important;
  margin-top: 0.125rem;
}
.puck-card--caceo-notice .puck-card-title {
  font-size: 0.875rem;
  color: #78350f;
  margin: 0 0 0.75rem;
}
.puck-card--caceo-notice .puck-card-description {
  font-size: 0.875rem;
  color: #92400e;
  line-height: 1.6;
  margin: 0 0 1rem;
}
.puck-card--caceo-notice .puck-card-button {
  background: transparent;
  border: none;
  padding: 0;
  min-height: 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: #b45309;
  text-decoration: underline;
  text-underline-offset: 2px;
  box-shadow: none;
}
.puck-card--caceo-notice .puck-card-button:hover { color: #78350f; opacity: 1; box-shadow: none; }

/* Pricing Card (right membership column) */
.puck-card--caceo-pricing {
  background-color: rgba(241, 245, 249, 0.4);
  border: 1px solid var(--color-border);
  border-radius: 1.5rem;
  padding: 2.5rem;
  box-shadow: var(--shadow-sm);
  overflow: visible;
}
.puck-card--caceo-pricing > div:first-child {
  height: 10rem !important;
  border-radius: 0.75rem;
  overflow: hidden;
  margin-bottom: 1.5rem;
}
.puck-card--caceo-pricing .puck-card-title {
  font-size: 1.5rem;
  color: var(--caceo-secondary);
  margin-bottom: 0.25rem;
}
.puck-card--caceo-pricing .puck-card-description {
  font-size: 0.875rem;
  color: var(--color-textSecondary);
  margin: 0 0 1.5rem;
}
.puck-card--caceo-pricing .puck-card-meta {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  font-size: 0.875rem;
}
.puck-card--caceo-pricing .puck-card-meta-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 1rem;
}
/* Rows 1-4 form the gray pricing box */
.puck-card--caceo-pricing .puck-card-meta-row:nth-child(-n+4) {
  background-color: rgba(241, 245, 249, 0.6);
}
.puck-card--caceo-pricing .puck-card-meta-row:nth-child(1) {
  border-radius: 0.75rem 0.75rem 0 0;
  padding-top: 1rem;
}
.puck-card--caceo-pricing .puck-card-meta-row:nth-child(-n+3) .puck-card-meta-label { color: var(--color-textSecondary); }
.puck-card--caceo-pricing .puck-card-meta-row:nth-child(-n+3) .puck-card-meta-value { color: var(--caceo-secondary); font-weight: 600; }
.puck-card--caceo-pricing .puck-card-meta-row:nth-child(3) {
  border-top: 1px solid var(--color-border);
  margin-top: 0.5rem;
  padding-top: 0.75rem;
}
.puck-card--caceo-pricing .puck-card-meta-row:nth-child(3) .puck-card-meta-label { color: var(--caceo-primary); font-weight: 600; }
.puck-card--caceo-pricing .puck-card-meta-row:nth-child(3) .puck-card-meta-value {
  color: var(--caceo-primary);
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 700;
}
.puck-card--caceo-pricing .puck-card-meta-row:nth-child(4) {
  border-radius: 0 0 0.75rem 0.75rem;
  padding-bottom: 1rem;
}
.puck-card--caceo-pricing .puck-card-meta-row:nth-child(4) .puck-card-meta-value {
  font-size: 0.75rem;
  color: #15803d;
  font-weight: 500;
}
/* Row 5: big price */
.puck-card--caceo-pricing .puck-card-meta-row:nth-child(5) { padding: 1.25rem 0 0.25rem; }
.puck-card--caceo-pricing .puck-card-meta-row:nth-child(5) .puck-card-meta-value {
  font-family: var(--font-display);
  font-size: 3rem;
  font-weight: 700;
  color: var(--caceo-primary);
  line-height: 1;
}
/* Row 6: runs note */
.puck-card--caceo-pricing .puck-card-meta-row:nth-child(6) { padding: 0; }
.puck-card--caceo-pricing .puck-card-meta-row:nth-child(6) .puck-card-meta-value {
  font-size: 0.75rem;
  color: var(--color-textSecondary);
}
/* Join Now! button — full-width accent red */
.puck-card--caceo-pricing .puck-card-button {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 3.5rem;
  background-color: var(--caceo-accent);
  border: 1px solid var(--caceo-accent-border);
  color: var(--caceo-accent-fg);
  font-size: 1rem;
  font-weight: 600;
}
.puck-card--caceo-pricing .puck-card-button:hover {
  background-color: rgba(191, 10, 48, 0.90);
  opacity: 1;
}

/* Pricing footer Text (login link + questions) below the pricing card */
.puck-card--caceo-pricing + .puck-text {
  border-top: 1px solid var(--color-border);
  margin-top: 1.5rem;
  padding-top: 1.25rem;
}
.puck-card--caceo-pricing + .puck-text p:first-child a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 2.25rem;
  background-color: #ffffff;
  border: 1px solid rgba(2, 48, 89, 0.25);
  border-radius: var(--radius);
  color: var(--caceo-secondary);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  margin-bottom: 0.75rem;
}
.puck-card--caceo-pricing + .puck-text p:first-child a:hover {
  background-color: rgba(2, 48, 89, 0.05);
  opacity: 1;
  text-decoration: none;
}
.puck-card--caceo-pricing + .puck-text p:last-child {
  font-size: 0.75rem;
  text-align: center;
  color: var(--color-textSecondary);
  margin: 0;
}
.puck-card--caceo-pricing + .puck-text p:last-child a {
  color: inherit;
  text-decoration: underline;
}

/* Benefits intro Text (left column, first block) */
#puck-content .puck-grid:has(.puck-card--caceo-benefits) .puck-text:first-child p {
  color: var(--color-textSecondary);
  line-height: 1.7;
  margin-bottom: 0;
}

/* Fixes after first native-card deploy (home conversion):
   1. generic .puck-card-checklist li::before adds a "✓" — the benefits
      variant already renders a check_circle glyph chip, so drop it. */
.puck-card--caceo-benefits .puck-card-checklist li::before { content: none; }
.puck-card--caceo-benefits .puck-card-checklist li { padding-left: 0; }
/* 2. renderer's flex gap splits the pricing rows into separate boxes */
.puck-card--caceo-pricing .puck-card-meta {
  display: flex;
  flex-direction: column;
  gap: 0 !important;
}
/* 3. strip the renderer's white card treatment from mission-grid columns */
#puck-content > .puck-grid > .puck-grid-column:has(.puck-card--caceo-mission) {
  padding: 0;
  background-color: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
}

/* =============================================================
   ABOUT PAGE — native-block conversion (replaces Embed-about-us,
   Embed-about-side, Embed-pillars, Text-history-timeline)
   ============================================================= */

/* Strip renderer white card treatment from the converted columns */
#puck-content > .puck-grid > .puck-grid-column:has(.puck-card--caceo-mission-box),
#puck-content > .puck-grid > .puck-grid-column:has(.puck-card--caceo-geo),
#puck-content > .puck-grid > .puck-grid-column:has([class*="puck-card--caceo-tl-"]) {
  padding: 0;
  background-color: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
}

/* Left column: "About Us" heading + body text */
.puck-grid-column:has(.puck-card--caceo-mission-box) h2 {
  font-size: 1.875rem;
  color: var(--caceo-secondary);
  margin-bottom: 1.5rem;
}
.puck-grid-column:has(.puck-card--caceo-mission-box) .puck-text p {
  color: var(--color-textSecondary);
  line-height: 1.7;
  margin-bottom: 1.25rem;
}

/* Mission box — icon inline with the title via display:contents grid */
.puck-card--caceo-mission-box {
  display: grid !important;
  grid-template-columns: auto 1fr;
  column-gap: 0.5rem;
  row-gap: 1rem;
  align-items: center;
  margin-top: 2rem;
  background: rgba(3, 76, 140, 0.05);
  border: 1px solid rgba(3, 76, 140, 0.15);
  border-radius: 1rem;
  padding: 1.75rem 2rem !important;
  box-shadow: none;
  overflow: visible;
}
.puck-card--caceo-mission-box > div { display: contents; }
.puck-card--caceo-mission-box > .material-symbols-outlined {
  color: var(--caceo-primary);
  font-size: 1.25rem !important;
}
.puck-card--caceo-mission-box .puck-card-title {
  font-size: 1.25rem;
  color: var(--caceo-secondary);
  margin: 0;
}
.puck-card--caceo-mission-box .puck-card-description {
  grid-column: 1 / -1;
  color: var(--caceo-muted);
  line-height: 1.65;
  margin: 0;
}

/* Right column: photo */
.puck-grid-column:has(.puck-card--caceo-geo) .puck-image-img {
  object-fit: cover !important;
  border-radius: 1rem;
  box-shadow: var(--shadow-md);
}
.puck-grid-column:has(.puck-card--caceo-geo) .puck-image { margin-bottom: 1.5rem; }

/* Stats — 3-up light boxes like the old .caceo-ab-stats */
.puck-grid-column:has(.puck-card--caceo-geo) .puck-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.puck-grid-column:has(.puck-card--caceo-geo) .puck-stat-card {
  background-color: rgba(241, 245, 249, 0.4);
  border: 1px solid rgba(226, 232, 240, 0.5);
  border-radius: 0.75rem;
  padding: 1rem;
  text-align: center;
  box-shadow: none;
}
.puck-grid-column:has(.puck-card--caceo-geo) .puck-stat-value {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--caceo-primary);
}
.puck-grid-column:has(.puck-card--caceo-geo) .puck-stat-label {
  font-size: 0.75rem;
  color: var(--color-textSecondary);
  margin-top: 0.25rem;
}

/* Geographic reach box */
.puck-card--caceo-geo {
  display: grid !important;
  grid-template-columns: auto 1fr;
  column-gap: 0.5rem;
  row-gap: 0.5rem;
  align-items: center;
  margin-top: 1rem;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 1rem;
  padding: 1.25rem 1.5rem !important;
  box-shadow: 0 1px 3px rgba(2, 48, 89, 0.06);
  overflow: visible;
}
.puck-card--caceo-geo > div { display: contents; }
.puck-card--caceo-geo > .material-symbols-outlined {
  color: var(--caceo-accent);
  font-size: 1.25rem !important;
}
.puck-card--caceo-geo .puck-card-title {
  font-size: 1rem;
  color: var(--caceo-secondary);
  margin: 0;
}
.puck-card--caceo-geo .puck-card-description {
  grid-column: 1 / -1;
  font-size: 0.875rem;
  color: var(--caceo-muted);
  line-height: 1.6;
  margin: 0;
}

/* History timeline — native Cards; the grid column draws the spine and
   each variant's ::before draws its badge. */
#puck-content > .puck-grid:has([class*="puck-card--caceo-tl-"]) {
  max-width: 720px;
  margin-inline: auto;
}
.puck-grid-column:has([class*="puck-card--caceo-tl-"]) {
  position: relative;
  padding-left: 1.5rem !important;
}
.puck-grid-column:has([class*="puck-card--caceo-tl-"])::before {
  content: "";
  position: absolute;
  left: 1.375rem;
  top: 0;
  bottom: 0;
  width: 1px;
  background: #e2e8f0;
}
[class*="puck-card--caceo-tl-"] {
  position: relative;
  margin-left: 3rem;
  margin-bottom: 2rem;
  background: #ffffff;
  border: 1px solid rgba(226, 232, 240, 0.7);
  border-radius: 0.75rem;
  padding: 1.125rem 1.375rem !important;
  box-shadow: 0 1px 3px rgba(2, 48, 89, 0.06);
  text-align: left !important;
  overflow: visible;
}
[class*="puck-card--caceo-tl-"]::before {
  position: absolute;
  left: -4.5rem;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 2.75rem;
  width: 2.75rem;
  border-radius: 50%;
  background: var(--caceo-primary);
  color: #ffffff;
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 0.75rem;
  box-shadow: 0 2px 6px rgba(3, 76, 140, 0.25);
}
.puck-card--caceo-tl-83::before  { content: "83"; }
.puck-card--caceo-tl-90s::before { content: "90s"; }
.puck-card--caceo-tl-00s::before { content: "00s"; }
.puck-card--caceo-tl-now::before { content: "Now"; }
[class*="puck-card--caceo-tl-"] .puck-card-eyebrow {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--caceo-primary);
  margin: 0 0 0.35rem;
}
[class*="puck-card--caceo-tl-"] .puck-card-title:empty { display: none; }
[class*="puck-card--caceo-tl-"] .puck-card-description {
  font-size: 0.875rem;
  color: var(--caceo-muted);
  line-height: 1.6;
  margin: 0;
}
@media (max-width: 640px) {
  .puck-grid-column:has([class*="puck-card--caceo-tl-"]) { padding-left: 0.75rem !important; }
  .puck-grid-column:has([class*="puck-card--caceo-tl-"])::before { left: 0.875rem; }
  [class*="puck-card--caceo-tl-"] { margin-left: 2.5rem; }
  [class*="puck-card--caceo-tl-"]::before { height: 2.25rem; width: 2.25rem; font-size: 0.65rem; left: -3.5rem; }
}

/* =============================================================
   BOARD PAGE — native-block conversion (replaces Text-officers-*
   and Text-board-members-* HTML carriers)
   ============================================================= */

/* Section headings (bare h2 blocks at children 2 and 4) — old
   .caceo-section-header look: 1.5rem heading + colored rule stripe. */
#puck-content:has(.puck-card--caceo-member-blue) > h2 {
  font-family: 'Outfit', sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--caceo-secondary);
  margin: 0 0 1.5rem 0;
}
#puck-content:has(.puck-card--caceo-member-blue) > h2::after {
  content: "";
  display: block;
  height: 4px;
  width: 3rem;
  border-radius: 9999px;
  margin-top: 0.5rem;
}
#puck-content:has(.puck-card--caceo-member-blue) > :nth-child(2)::after {
  background: var(--caceo-accent);
}
#puck-content:has(.puck-card--caceo-member-blue) > :nth-child(4)::after {
  background: var(--caceo-primary);
}

/* Strip renderer white-card chrome from grid columns; the member Card
   provides its own card treatment. */
#puck-content > .puck-grid > .puck-grid-column:has([class*="puck-card--caceo-member-"]) {
  padding: 0;
  background-color: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
  /* Columns may hold two stacked member cards (row-major fill);
     flex + gap matches the grid's 20px row gap */
  display: flex;
  flex-direction: column;
  gap: 20px;
}
/* Columns with 2+ stacked cards: share the height evenly so rows align.
   Lone-card columns keep natural height (no full-column stretch). */
#puck-content > .puck-grid > .puck-grid-column:has([class*="puck-card--caceo-member-"]:nth-child(2)) [class*="puck-card--caceo-member-"] {
  flex: 1;
}

/* Member card — mirrors old .caceo-member-card */
[class*="puck-card--caceo-member-"] {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 1rem;
  box-shadow: 0 1px 3px rgba(2, 48, 89, 0.06);
  padding: 1.5rem 1rem !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center !important;
  flex: 0 0 auto; /* natural height by default; see stacked-column rule below */
  transition: box-shadow 0.2s, border-color 0.2s;
}
[class*="puck-card--caceo-member-"]:hover {
  box-shadow: 0 4px 12px rgba(2, 48, 89, 0.1);
  border-color: rgba(3, 76, 140, 0.2);
}
[class*="puck-card--caceo-member-"] > div {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Eyebrow (initials) styled as the avatar circle */
[class*="puck-card--caceo-member-"] .puck-card-eyebrow {
  height: 4rem;
  width: 4rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: 0;
  text-transform: none;
  color: #ffffff;
  margin: 0 0 1rem 0;
  flex-shrink: 0;
}
/* Avatar colors from the variant hook (matches React avatarColors) */
.puck-card--caceo-member-blue    .puck-card-eyebrow { background: #034C8C; }
.puck-card--caceo-member-navy    .puck-card-eyebrow { background: #023059; }
.puck-card--caceo-member-red     .puck-card-eyebrow { background: #BF0A30; }
.puck-card--caceo-member-blue-lt .puck-card-eyebrow { background: rgba(3, 76, 140, 0.8); }
.puck-card--caceo-member-navy-lt .puck-card-eyebrow { background: rgba(2, 48, 89, 0.8); }

/* Name */
[class*="puck-card--caceo-member-"] .puck-card-title {
  font-family: 'Outfit', sans-serif;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--caceo-secondary);
  margin: 0 0 0.5rem 0;
  line-height: 1.3;
}

/* Role badge pill (card description) */
[class*="puck-card--caceo-member-"] .puck-card-description {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--caceo-accent);
  background: rgba(191, 10, 48, 0.08);
  border: 1px solid rgba(191, 10, 48, 0.2);
  border-radius: 9999px;
  padding: 0.2rem 0.75rem;
  margin: 0 0 0.625rem 0;
  line-height: 1.4;
  white-space: nowrap;
}

/* Organization line (meta row) with pin icon */
[class*="puck-card--caceo-member-"] .puck-card-meta {
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 0 !important;
}
[class*="puck-card--caceo-member-"] .puck-card-meta-row {
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0.25rem;
}
[class*="puck-card--caceo-member-"] .puck-card-meta-row::before {
  content: "";
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  margin-top: 0.15rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7z'/%3E%3Ccircle cx='12' cy='9' r='2.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}
[class*="puck-card--caceo-member-"] .puck-card-meta-value {
  font-size: 0.75rem;
  color: #64748b;
  line-height: 1.4;
  text-align: center;
}

/* Responsive: 3-col on tablet, 2-col on mobile (matches old grid) */
@media (max-width: 1024px) {
  #puck-content > .puck-grid:has([class*="puck-card--caceo-member-"]) {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}
@media (max-width: 640px) {
  #puck-content > .puck-grid:has([class*="puck-card--caceo-member-"]) {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.875rem !important;
  }
  [class*="puck-card--caceo-member-"] { padding: 1.25rem 0.75rem !important; }
  [class*="puck-card--caceo-member-"] .puck-card-eyebrow {
    height: 3rem;
    width: 3rem;
    font-size: 1rem;
  }
}

/* =============================================================
   AGENCIES PAGE — native-block conversion (org cards, section
   headers, bottom CTA now native; searchable directory remains
   a documented gap Embed)
   ============================================================= */

/* Strip renderer column chrome where cards bring their own look */
#puck-content > .puck-grid > .puck-grid-column:has(.puck-card--caceo-ag-org) {
  padding: 0;
  background-color: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
}

/* Section header Card — icon chip + 1.5rem heading, transparent card */
[class*="puck-card--caceo-aghead-"] {
  display: flex !important;
  flex-direction: row;
  align-items: center !important;
  gap: 0.75rem !important;
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0 !important;
  margin: 3rem 0 2rem;
  text-align: left !important;
}
[class*="puck-card--caceo-aghead-"] > .material-symbols-outlined {
  height: 2.5rem;
  width: 2.5rem;
  border-radius: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 20px !important;
}
.puck-card--caceo-aghead-primary > .material-symbols-outlined {
  background-color: rgba(3, 76, 140, 0.1);
  color: var(--color-primary);
}
.puck-card--caceo-aghead-accent > .material-symbols-outlined {
  background-color: rgba(191, 10, 48, 0.1);
  color: var(--color-accent);
}
.puck-card--caceo-aghead-secondary > .material-symbols-outlined {
  background-color: rgba(2, 48, 89, 0.1);
  color: var(--color-secondary);
}
[class*="puck-card--caceo-aghead-"] .puck-card-title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-secondary);
  margin: 0;
}
[class*="puck-card--caceo-aghead-"] .puck-card-description:empty { display: none; }

/* Org card — linked title with external-link icon, muted description */
.puck-card--caceo-ag-org {
  background-color: var(--color-card, #fff);
  border: 1px solid var(--color-border);
  border-radius: 1rem;
  padding: 1.5rem !important;
  box-shadow: var(--shadow-sm);
  text-align: left !important;
  height: 100%;
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.puck-card--caceo-ag-org:hover {
  box-shadow: var(--shadow-md);
  border-color: rgba(3, 76, 140, 0.2);
}
.puck-card--caceo-ag-org .puck-card-title {
  display: inline-flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1.375;
  margin: 0 0 0.75rem 0;
}
.puck-card--caceo-ag-org .puck-card-title::after {
  content: "";
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  margin-top: 0.125rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cline x1='10' y1='14' x2='21' y2='3'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}
.puck-card--caceo-ag-org:hover .puck-card-title { text-decoration: underline; }
.puck-card--caceo-ag-org .puck-card-description {
  font-size: 0.875rem;
  color: var(--color-textSecondary);
  line-height: 1.625;
  margin: 0;
}

/* State section muted band: header card (child 4) + grid (child 5) */
#puck-content:has(.puck-card--caceo-aghead-accent) > :nth-child(4),
#puck-content:has(.puck-card--caceo-aghead-accent) > :nth-child(5) {
  background-color: var(--color-muted);
  max-width: none;
  margin-inline: -2rem;
  padding-inline: max(2rem, calc((100% - var(--container-max-width)) / 2));
}
#puck-content:has(.puck-card--caceo-aghead-accent) > :nth-child(4) {
  margin-block: 0 !important;
  padding-top: 3rem;
}
#puck-content:has(.puck-card--caceo-aghead-accent) > :nth-child(4) .puck-card {
  margin: 0 0 2rem;
}
#puck-content:has(.puck-card--caceo-aghead-accent) > :nth-child(5) {
  margin-block: 0 !important;
  padding-bottom: 3.5rem;
}

/* Bottom CTA — old .caceo-ag-cta look: light gray band, navy heading,
   red pill button */
#puck-content:has(.puck-card--caceo-ag-org) > .puck-cta {
  background: rgba(226, 232, 240, 0.4) !important;
  background-image: none !important;
  border-top: 1px solid var(--color-border);
  text-align: center;
  padding-block: 3.5rem;
}
#puck-content:has(.puck-card--caceo-ag-org) > .puck-cta .puck-cta-title {
  color: var(--color-secondary) !important;
  font-size: 1.5rem;
}
#puck-content:has(.puck-card--caceo-ag-org) > .puck-cta .puck-cta-description {
  color: var(--color-textSecondary) !important;
  max-width: 48rem;
  margin-inline: auto;
}
#puck-content:has(.puck-card--caceo-ag-org) > .puck-cta .puck-cta-buttons {
  justify-content: center;
}
#puck-content:has(.puck-card--caceo-ag-org) > .puck-cta .puck-cta-primary {
  background-color: var(--color-accent);
  border: none;
  color: #ffffff;
  font-weight: 600;
  padding: 0.75rem 2rem;
  border-radius: 0.75rem;
}

/* Responsive: org card grids collapse to 1-col on mobile */
@media (max-width: 640px) {
  #puck-content > .puck-grid:has(.puck-card--caceo-ag-org) {
    grid-template-columns: 1fr !important;
  }
}

/* =============================================================
   JUAN EAGLE AWARD PAGE — native-block conversion (replaces
   Embed-winner-head, Text-about-juan wrapper, Text-recipients-list)
   ============================================================= */

/* Winner header Card — badge pill (eyebrow) beside the heading */
.puck-card--caceo-jea-head {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin: 3rem auto 0;
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0 !important;
  text-align: left !important;
  overflow: visible;
}
.puck-card--caceo-jea-head > div { display: contents; }
.puck-card--caceo-jea-head .puck-card-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 1rem;
  background-color: rgba(191, 10, 48, 0.1);
  border: 1px solid rgba(191, 10, 48, 0.2);
  color: var(--caceo-accent);
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: normal;
  text-transform: none;
  white-space: nowrap;
  margin: 0;
  order: -1;
}
.puck-card--caceo-jea-head .puck-card-eyebrow::before {
  content: "";
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23BF0A30' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15.477 12.89 1.515 8.526a.5.5 0 0 1-.81.47l-3.58-2.687a1 1 0 0 0-1.197 0l-3.586 2.686a.5.5 0 0 1-.81-.469l1.514-8.526'/%3E%3Ccircle cx='12' cy='8' r='6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}
.puck-card--caceo-jea-head .puck-card-title {
  margin: 0;
  font-size: 1.75rem;
  color: var(--caceo-secondary);
}
.puck-card--caceo-jea-head .puck-card-description:empty { display: none; }
/* Keep the badge + heading inside the left text column so a long title
   wraps instead of running over the winner photo (right grid column =
   50% minus half the 40px grid gap). Re-keyed from the retired
   .caceo-jea-winner-head Embed rule. */
.puck-card--caceo-jea-head {
  padding-right: calc(50% + 20px) !important;
}
@media (max-width: 1024px) {
  .puck-card--caceo-jea-head { padding-right: 0 !important; }
}
@media (max-width: 640px) {
  .puck-card--caceo-jea-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }
}

/* About-the-award box: Text block (child 5: Hero, winner head, grid,
   heading, text) gets the old .caceo-about-box white card treatment */
#puck-content:has(.puck-card--caceo-jea-head) > :nth-child(5) {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 1rem;
  padding: 2rem;
  box-shadow: 0 1px 3px rgba(2, 48, 89, 0.06);
}
#puck-content:has(.puck-card--caceo-jea-head) > :nth-child(5) p {
  color: #64748b;
  line-height: 1.7;
  margin-bottom: 1rem;
}
#puck-content:has(.puck-card--caceo-jea-head) > :nth-child(5) p:last-child { margin-bottom: 0; }
#puck-content:has(.puck-card--caceo-jea-head) > :nth-child(5) strong { color: var(--caceo-secondary); }

/* Past recipients — native Cards as year/detail rows */
#puck-content > .puck-grid > .puck-grid-column:has([class*="puck-card--caceo-recipient"]) {
  padding: 0;
  background-color: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
}
[class*="puck-card--caceo-recipient"] {
  display: grid !important;
  grid-template-columns: 3.5rem 1fr;
  column-gap: 1.25rem;
  align-items: start;
  background: rgba(241, 245, 249, 0.7);
  border: 1px solid rgba(226, 232, 240, 0.6);
  border-radius: 0.75rem;
  padding: 1rem 1.5rem !important;
  text-align: left !important;
  transition: border-color 0.15s, background 0.15s;
  overflow: visible;
}
[class*="puck-card--caceo-recipient"]:hover {
  border-color: rgba(3, 76, 140, 0.2);
  background: rgba(241, 245, 249, 0.95);
}
[class*="puck-card--caceo-recipient"] > div { display: contents; }
[class*="puck-card--caceo-recipient"] .puck-card-eyebrow {
  grid-row: 1 / span 2;
  font-family: 'Outfit', sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: normal;
  text-transform: none;
  color: #94a3b8;
  padding-top: 0.1rem;
  margin: 0;
}
.puck-card--caceo-recipient-first .puck-card-eyebrow { color: var(--caceo-primary); }
[class*="puck-card--caceo-recipient"] .puck-card-title {
  grid-column: 2;
  font-family: var(--font-primary);
  font-weight: 600;
  color: var(--caceo-secondary);
  margin: 0 0 0.2rem 0;
  font-size: 0.9375rem;
  letter-spacing: normal;
}
[class*="puck-card--caceo-recipient"] .puck-card-description {
  grid-column: 2;
  font-size: 0.8125rem;
  color: #64748b;
  line-height: 1.5;
  margin: 0;
}
@media (max-width: 640px) {
  [class*="puck-card--caceo-recipient"] {
    padding: 0.875rem 1rem !important;
    column-gap: 0.875rem;
    grid-template-columns: 2.75rem 1fr;
  }
  [class*="puck-card--caceo-recipient"] .puck-card-eyebrow { font-size: 1rem; }
}

/* =============================================================
   RODNEY MORALES PAGE — native-block conversion (replaces
   Text-recipients-rodney card markup and the memorial-box div)
   ============================================================= */

/* Memorial callout: second Text block in the about grid's left column */
#puck-content:has(.puck-card--caceo-rm-recipient) > .puck-grid > .puck-grid-column:first-child > :nth-child(2) {
  margin-top: 1.25rem;
  background: rgba(3, 76, 140, 0.04);
  border: 1px solid #e2e8f0;
  border-radius: 0.75rem;
  padding: 1.125rem 1.375rem;
}
#puck-content:has(.puck-card--caceo-rm-recipient) > .puck-grid > .puck-grid-column:first-child > :nth-child(2) p {
  font-size: 0.9rem;
  color: var(--caceo-secondary);
  line-height: 1.65;
  font-weight: 500;
  margin: 0;
}
#puck-content:has(.puck-card--caceo-rm-recipient) > .puck-grid > .puck-grid-column:first-child > :nth-child(2) strong {
  color: var(--caceo-secondary);
  font-weight: 700;
}

/* Recipient story Card: eyebrow = blue year band, title = red names pill,
   description = story paragraph */
.puck-card--caceo-rm-recipient {
  display: flex !important;
  flex-direction: column;
  align-items: stretch;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 1rem;
  box-shadow: 0 1px 3px rgba(2, 48, 89, 0.06);
  overflow: hidden;
  padding: 0 !important;
  text-align: left !important;
}
.puck-card--caceo-rm-recipient > div { display: contents; }
.puck-card--caceo-rm-recipient .puck-card-eyebrow {
  order: -1;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--caceo-primary);
  padding: 0.75rem 1.5rem;
  font-family: 'Outfit', sans-serif;
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: normal;
  text-transform: none;
  color: #ffffff;
  margin: 0;
}
.puck-card--caceo-rm-recipient .puck-card-eyebrow::before {
  content: "";
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.8)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}
.puck-card--caceo-rm-recipient .puck-card-title {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-primary);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: normal;
  color: var(--caceo-accent);
  background: rgba(191, 10, 48, 0.07);
  border: 1px solid rgba(191, 10, 48, 0.2);
  border-radius: 9999px;
  padding: 0.3rem 1rem;
  margin: 1.5rem 2rem 1rem;
}
.puck-card--caceo-rm-recipient .puck-card-title::before {
  content: "";
  width: 0.875rem;
  height: 0.875rem;
  flex-shrink: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23BF0A30' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}
.puck-card--caceo-rm-recipient .puck-card-description {
  color: #64748b;
  line-height: 1.7;
  margin: 0;
  padding: 0 2rem 1.5rem;
}
@media (max-width: 640px) {
  .puck-card--caceo-rm-recipient .puck-card-title { margin: 1.25rem 1.25rem 1rem; }
  .puck-card--caceo-rm-recipient .puck-card-description { padding: 0 1.25rem 1.25rem; }
}

/* =============================================================
   TRAINING PAGE — native-block conversion (replaces the
   Text-training-links HTML list with Grid + linked Cards)
   ============================================================= */

/* Strip white chrome from the links grid column */
#puck-content > .puck-grid > .puck-grid-column:has([class*="puck-card--caceo-tlink"]) {
  padding: 0;
  background-color: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
  gap: 0.75rem;
}

/* Link card row: icon chip + label + description (old .caceo-training-link) */
[class*="puck-card--caceo-tlink"] {
  display: flex !important;
  flex-direction: row;
  align-items: center;
  gap: 1rem;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 0.75rem;
  padding: 1rem 1.5rem !important;
  text-align: left !important;
  box-shadow: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  overflow: visible;
}
[class*="puck-card--caceo-tlink"]:hover {
  border-color: rgba(3, 76, 140, 0.35);
  box-shadow: 0 2px 8px rgba(2, 48, 89, 0.08);
  text-decoration: none;
}
[class*="puck-card--caceo-tlink"] > .material-symbols-outlined {
  height: 2.5rem;
  width: 2.5rem;
  border-radius: 0.625rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 20px !important;
  background-color: rgba(3, 76, 140, 0.08);
  color: var(--caceo-primary);
  transition: background-color 0.15s, color 0.15s;
}
[class*="puck-card--caceo-tlink"]:hover > .material-symbols-outlined {
  background-color: var(--caceo-primary);
  color: #ffffff;
}
[class*="puck-card--caceo-tlink"] .puck-card-title {
  font-family: var(--font-primary);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--caceo-secondary);
  margin: 0 0 0.15rem 0;
  letter-spacing: normal;
  transition: color 0.15s;
}
[class*="puck-card--caceo-tlink"]:hover .puck-card-title {
  color: var(--caceo-primary);
}
[class*="puck-card--caceo-tlink"] .puck-card-description {
  font-size: 0.8125rem;
  color: #64748b;
  line-height: 1.5;
  margin: 0;
}
/* External (scholarship) link: small external-link icon after the label */
.puck-card--caceo-tlink-ext .puck-card-title::after {
  content: "";
  display: inline-block;
  width: 0.75rem;
  height: 0.75rem;
  margin-left: 0.375rem;
  vertical-align: -0.05rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cline x1='10' y1='14' x2='21' y2='3'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

/* =============================================================
   CERTIFICATION COURSES — native-block conversion
   (replaces Text-cert-standards / Text-cert-sidebar carriers)
   ============================================================= */

/* Standards: strip chrome from the nested grid + its column
   (old .caceo-standards-list stack) */
.puck-grid-column > .puck-grid:has(.puck-card--caceo-std),
.puck-grid:has(.puck-card--caceo-std) > .puck-grid-column {
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
}
/* Stack spacing between standard cards (old list gap 0.875rem) + the
   old list's 0.5rem top offset under the heading */
.puck-grid:has(> .puck-grid-column > .puck-card--caceo-std) > .puck-grid-column {
  display: flex;
  flex-direction: column;
  gap: 0.875rem !important;
}
.puck-grid-column > .puck-grid:has(.puck-card--caceo-std) {
  margin-top: 0.5rem;
}

/* Standard item card (old .caceo-standard-item) */
.puck-card--caceo-std {
  display: flex !important;
  flex-direction: row;
  align-items: flex-start;
  gap: 1rem;
  background: rgba(241, 245, 249, 0.5);
  border: 1px solid #e2e8f0;
  border-radius: 1rem;
  padding: 1.125rem 1.25rem !important;
  text-align: left !important;
  box-shadow: none;
}
.puck-card--caceo-std > .material-symbols-outlined {
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  background-color: rgba(3, 76, 140, 0.08);
  border-radius: 0.625rem;
  margin-top: 0.1rem;
  /* Render the old tint-filled star SVG exactly; hide the Material glyph */
  font-size: 0 !important;
  color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='rgba(3,76,140,0.3)' stroke='%23034C8C' stroke-width='2'%3E%3Cpolygon points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}
.puck-card--caceo-std .puck-card-title {
  font-family: var(--font-primary);
  font-weight: 600;
  color: var(--caceo-secondary);
  font-size: 0.9rem;
  line-height: 1.625; /* old label was a div inheriting body line-height */
  margin: 0 0 0.2rem;
  letter-spacing: normal;
}
.puck-card--caceo-std .puck-card-description {
  font-size: 0.8125rem;
  color: #64748b;
  line-height: 1.55;
  margin: 0;
}

/* Sidebar: outer column is the sticky stack (old .caceo-cert-sidebar) */
#puck-content > .puck-grid > .puck-grid-column:has(.puck-card--caceo-side-accent) {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  position: sticky;
  top: 7rem;
  align-self: start;
}

/* Each nested grid column is a sidebar card box (old .caceo-sidebar-card).
   Direct-child :has() guard keeps this off the outer Grid-cert-layout. */
.puck-grid:has(> .puck-grid-column > .puck-card--caceo-side-accent) > .puck-grid-column,
.puck-grid:has(> .puck-grid-column > .puck-card--caceo-side-join) > .puck-grid-column {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 1rem;
  padding: 1.375rem 1.5rem;
  box-shadow: 0 1px 3px rgba(2, 48, 89, 0.05);
  display: flex;
  flex-direction: column;
  gap: 0;
}
.puck-grid:has(> .puck-grid-column > .puck-card--caceo-side-accent) > .puck-grid-column {
  background: rgba(3, 76, 140, 0.04);
  border-color: rgba(3, 76, 140, 0.15);
}

/* Card content inside the box: transparent, no chrome */
[class*="puck-card--caceo-side-"] {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0 !important;
  text-align: left !important;
}
[class*="puck-card--caceo-side-"] .puck-card-title {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--caceo-secondary);
  margin: 0 0 0.75rem;
  letter-spacing: normal;
}
/* Award icon inline before the "Get Certified" heading
   (old .caceo-sidebar-heading svg) */
.puck-card--caceo-side-accent .puck-card-title::before {
  content: "";
  display: inline-block;
  width: 1rem;
  height: 1rem;
  margin-right: 0.5rem;
  vertical-align: -0.125rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23034C8C' stroke-width='2'%3E%3Ccircle cx='12' cy='8' r='6'/%3E%3Cpath d='M15.477 12.89 17 22l-5-3-5 3 1.523-9.11'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}
.puck-card--caceo-side-join .puck-card-title { margin-bottom: 0.875rem; }
[class*="puck-card--caceo-side-"] .puck-card-description {
  font-size: 0.8125rem;
  color: #64748b;
  line-height: 1.6;
  margin: 0 0 1rem;
}

/* Sidebar buttons: full-width accent red (old .caceo-sidebar-btn--accent) */
.puck-grid:has(> .puck-grid-column > [class*="puck-card--caceo-side-"]) .puck-button-container {
  width: 100%;
}
.puck-grid:has(> .puck-grid-column > [class*="puck-card--caceo-side-"]) .puck-button {
  display: flex;
  width: 100%;
  justify-content: center;
  gap: 0.375rem;
  padding: 0.5rem 1rem;
  min-height: 0;
  border-radius: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 600;
  background: var(--caceo-accent);
  border: none;
  color: #ffffff;
}
.puck-grid:has(> .puck-grid-column > [class*="puck-card--caceo-side-"]) .puck-button:hover {
  background: rgba(191, 10, 48, 0.85);
  opacity: 1;
  box-shadow: none;
}
/* External-link icon after "Enroll Now" (old inline svg) */
.puck-grid:has(> .puck-grid-column > .puck-card--caceo-side-accent) .puck-button::after {
  content: "";
  display: inline-block;
  width: 0.75rem;
  height: 0.75rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cline x1='10' y1='14' x2='21' y2='3'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

/* ═══════════════════════════════════════════════════════════════
   QUARTERLY TRAINING PAGE — NATIVE BLOCKS (post raw-HTML conversion)
   "What to Expect" Cards (variant caceo-expect) and the Membership
   Value box rebuilt as Card meta rows + Text note + Button inside a
   nested 1-col Grid (Grid-qt-mv). Legacy .caceo-expect- and .caceo-mv-
   rules above are now inert on this page (cleanup deferred).
═══════════════════════════════════════════════════════════════ */

/* Strip renderer chrome from the expect grid columns and the mv grid */
#puck-content > .puck-grid > .puck-grid-column:has(.puck-card--caceo-expect) {
  min-height: 0;
  background: none;
  border: none;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
}
.puck-grid:has(> .puck-grid-column > .puck-card--caceo-expect) > .puck-grid-column {
  display: flex;
  flex-direction: column;
  gap: 1.125rem !important;
}
/* Old Text carrier had padding 20 + grid margin-top .5rem */
#puck-content > .puck-grid:has(> .puck-grid-column > .puck-card--caceo-expect) {
  margin-top: 0; /* h2 margin-bottom alone matches the old heading->grid gap */
}

/* Expect card = old .caceo-expect-card */
.puck-card--caceo-expect {
  align-items: flex-start !important;
  padding: 1.25rem !important;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 1rem;
  box-shadow: 0 1px 3px rgba(2, 48, 89, 0.04);
}
/* Icon chip = old .caceo-expect-icon; exact 16px check-circle SVG,
   Material glyph hidden */
.puck-card--caceo-expect > .material-symbols-outlined {
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  background-color: rgba(3, 76, 140, 0.08);
  border-radius: 0.625rem;
  margin-top: 0.1rem;
  font-size: 0 !important;
  color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23034C8C' stroke-width='2'%3E%3Cpath d='M22 11.08V12a10 10 0 1 1-5.93-9.14'/%3E%3Cpolyline points='22 4 12 14.01 9 11.01'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}
.puck-card--caceo-expect .puck-card-title {
  font-family: var(--font-primary);
  font-weight: 600;
  color: var(--caceo-secondary);
  font-size: 0.9rem;
  line-height: 1.625;
  margin: 0 0 0.3rem;
  letter-spacing: normal;
}
.puck-card--caceo-expect .puck-card-description {
  font-size: 0.8125rem;
  color: #64748b;
  line-height: 1.55;
  margin: 0;
}

/* Membership Value box: the nested grid column is the box
   (old .caceo-mv-box) */
#puck-content > .puck-grid > .puck-grid-column:has(.puck-card--caceo-mv) {
  min-height: 0;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 1rem;
  padding: 2rem;
  box-shadow: 0 1px 3px rgba(2, 48, 89, 0.05);
}
.puck-grid:has(> .puck-grid-column > .puck-card--caceo-mv) > .puck-grid-column {
  display: flex;
  flex-direction: column;
  gap: 0;
}
#puck-content > .puck-grid:has(> .puck-grid-column > .puck-card--caceo-mv) {
  margin-top: 1.5rem; /* old expect-grid -> mv-box distance (25px) */
  max-width: 32rem;
  margin-inline: 0;
  margin-left: max(0px, calc((100% - 1280px) / 2));
}

/* Card chrome off; title = old .caceo-mv-header/.caceo-mv-title with
   inline dollar icon */
.puck-card--caceo-mv {
  padding: 0 !important;
  background: transparent;
  border: none;
  box-shadow: none;
  text-align: left !important; /* minimal layout centers via inline style */
}
.puck-card--caceo-mv .puck-card-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 1.125rem;
  color: var(--caceo-secondary);
  margin: 0 0 30px; /* old 1.25rem + 10px renderer header-height delta */
  letter-spacing: normal;
}
.puck-card--caceo-mv .puck-card-title::before {
  content: "";
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23034C8C' stroke-width='2'%3E%3Cline x1='12' y1='1' x2='12' y2='23'/%3E%3Cpath d='M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}
/* Description prop is empty on this card; the renderer still emits the
   \003c p> (with whitespace, so :empty cannot match) */
.puck-card--caceo-mv .puck-card-description { display: none; }

/* Meta rows = old .caceo-mv-row list; last row is the highlight */
.puck-card--caceo-mv .puck-card-meta {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0 0 0.875rem;
  padding: 0;
  list-style: none;
  border: none;
}
.puck-card--caceo-mv .puck-card-meta-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.875rem;
  line-height: 1.625; /* old rows inherited body line-height */
  padding: 0;
  border: none;
}
.puck-card--caceo-mv .puck-card-meta-row .puck-card-meta-label { color: #64748b; font-weight: 400; }
.puck-card--caceo-mv .puck-card-meta-row .puck-card-meta-value { font-weight: 600; color: var(--caceo-secondary); }
.puck-card--caceo-mv .puck-card-meta-row:last-child {
  border-top: 1px solid #e2e8f0;
  padding-top: 0.75rem;
  margin-top: 0.25rem;
}
.puck-card--caceo-mv .puck-card-meta-row:last-child .puck-card-meta-label {
  font-weight: 600;
  color: var(--caceo-primary);
}
.puck-card--caceo-mv .puck-card-meta-row:last-child .puck-card-meta-value {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 1.125rem;
  color: var(--caceo-primary);
}

/* Green savings note (Text block inside the box) = old .caceo-mv-note */
.puck-grid:has(> .puck-grid-column > .puck-card--caceo-mv) .puck-text p {
  font-size: 0.75rem;
  color: #15803d;
  font-weight: 500;
  margin: 0 0 22px; /* old 1rem + 6px renderer delta */
  line-height: 1.5;
}

/* Full-width accent CTA = old .caceo-qt-btn--accent .caceo-mv-cta */
.puck-grid:has(> .puck-grid-column > .puck-card--caceo-mv) .puck-button-container {
  width: 100%;
}
.puck-grid:has(> .puck-grid-column > .puck-card--caceo-mv) .puck-button {
  width: 100%;
  padding: 0.625rem 1.375rem;
  font-weight: 600;
  font-size: 0.875rem;
  background: var(--caceo-accent);
  border: none;
  color: #ffffff;
  text-decoration: none !important;
}
.puck-grid:has(> .puck-grid-column > .puck-card--caceo-mv) .puck-button:hover {
  background: rgba(191, 10, 48, 0.85);
  opacity: 1;
}

@media (max-width: 640px) {
  #puck-content > .puck-grid:has(> .puck-grid-column > .puck-card--caceo-mv) {
    margin-left: 0;
  }
  #puck-content > .puck-grid > .puck-grid-column:has(.puck-card--caceo-mv) {
    padding: 1.375rem;
  }
}

/* ═══════════════════════════════════════════════════════════════
   EXTERNAL TRAINING PAGE — NATIVE SIDEBAR (post raw-HTML conversion)
   The submission form stays as an Embed (contract v1.2.0 has no form
   component for Recur's challenge/submit pipeline — documented gap);
   the sidebar boxes are now native Cards (variants caceo-xt-why /
   caceo-xt-q) in a top-level 2-col Grid. Shared by the host-training page (variants caceo-xt-hb for the
   handbook box). Legacy .caceo-xt-side/.caceo-xt-box rules now inert.
═══════════════════════════════════════════════════════════════ */

/* Grid geometry = old .caceo-xt-grid: 2fr/1fr, gap 3rem, top-aligned,
   with the old wrap's 4rem block padding and 1.5rem side padding. */
#puck-content > .puck-grid:has(> .puck-grid-column > .puck-card--caceo-xt-why) {
  grid-template-columns: 2fr 1fr !important;
  gap: 3rem !important;
  align-items: start;
  margin-block: 4rem;
  padding-inline: 1.5rem;
}
@media (max-width: 1023px) {
  #puck-content > .puck-grid:has(> .puck-grid-column > .puck-card--caceo-xt-why) {
    grid-template-columns: 1fr !important;
  }
}

/* Strip renderer column chrome from both columns */
#puck-content > .puck-grid > .puck-grid-column:has(.caceo-xt-main),
#puck-content > .puck-grid > .puck-grid-column:has(.puck-card--caceo-xt-why) {
  min-height: 0;
  background: none;
  border: none;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
}

/* Sidebar column stacks like old .caceo-xt-side */
.puck-grid:has(> .puck-grid-column > .puck-card--caceo-xt-why) > .puck-grid-column {
  display: flex;
  flex-direction: column;
  gap: 1.5rem !important;
}

/* Why Submit? card = old .caceo-xt-box.caceo-xt-box-blue */
.puck-card--caceo-xt-why,
.puck-card--caceo-xt-q,
.puck-card--caceo-xt-hb {
  border-radius: 1rem;
  padding: 1.5rem !important;
  text-align: left !important; /* minimal layout centers via inline style */
}
.puck-card--caceo-xt-why {
  background: rgba(3, 76, 140, 0.05);
  border: 1px solid rgba(3, 76, 140, 0.15);
  box-shadow: none;
}
.puck-card--caceo-xt-q,
.puck-card--caceo-xt-hb {
  background: #ffffff;
  border: 1px solid var(--color-border);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.puck-card--caceo-xt-why .puck-card-title,
.puck-card--caceo-xt-q .puck-card-title,
.puck-card--caceo-xt-hb .puck-card-title {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--caceo-secondary);
  margin: 0 0 0.75rem;
  letter-spacing: normal;
}
.puck-card--caceo-xt-why .puck-card-description,
.puck-card--caceo-xt-q .puck-card-description,
.puck-card--caceo-xt-hb .puck-card-description {
  font-size: 0.875rem;
  color: var(--color-textSecondary);
  line-height: 1.6;
  margin: 0 0 1rem;
}

/* Checklist = old .caceo-xt-box ul/li rows with 16px primary check icon */
.puck-card--caceo-xt-why .puck-card-checklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.puck-card--caceo-xt-why .puck-card-checklist li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--color-textSecondary);
  line-height: 1.6;
  padding: 0 !important; /* renderer indents 24px for its own ::before marker */
}
/* The renderer prepends its own \2713 marker via li::before — remove it */
.puck-card--caceo-xt-why .puck-card-checklist li::before {
  content: none !important;
}
/* Exact old 16px stroke check-circle: hide the Material ligature and
   paint the original SVG (primary blue) as a background */
.puck-card--caceo-xt-why .puck-card-checklist li .material-symbols-outlined {
  font-size: 0;
  width: 16px;
  height: 16px;
  margin-top: 0.125rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23034C8C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 11.08V12a10 10 0 1 1-5.93-9.14'/%3E%3Cpolyline points='22 4 12 14.01 9 11.01'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

/* Questions? mailto link = old .caceo-xt-box a */
.puck-card--caceo-xt-q .puck-card-meta {
  list-style: none;
  margin: 0 !important;
  padding: 0 !important;
  border: none;
  gap: 0 !important;
}
.puck-card--caceo-xt-q .puck-card-meta-row,
.puck-card--caceo-xt-q .puck-card-meta > * {
  padding: 0 !important;
  margin: 0 !important;
  border: none;
  line-height: 1.6;
}
/* Handbook download button = old .caceo-xt-btn-outline (full-width,
   centered outline pill; overrides the renderer's primary button look) */
.puck-card--caceo-xt-hb .puck-card-button {
  display: block !important;
  width: 100%;
  text-align: center;
  background: transparent !important;
  color: var(--caceo-secondary) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: 0.75rem;
  padding: 0.5rem 1rem;
  min-height: 0;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.6;
  box-shadow: none;
  text-decoration: none;
  transition: background-color 0.15s ease;
}
.puck-card--caceo-xt-hb .puck-card-button:hover {
  background: rgba(226, 232, 240, 0.4) !important;
  opacity: 1;
}

.puck-card--caceo-xt-q .puck-card-meta a,
.puck-card--caceo-xt-q .puck-card-meta-value {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--caceo-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}


            /* PROTECTED footer bottom bar + Recur attribution (Task: protect
               bottom-bar styling from custom CSS). Emitted AFTER the tenant's
               custom CSS and with !important on every declaration so no
               custom CSS can restyle, shrink, hide, or recolor the bottom bar
               or the "Built by"/"Powered by" badge. Emitted in FULL for all
               site modes, including designer-owned (advanced custom-CSS). */
            /* Render class contract v1.9.0 — PROTECTED footer bottom bar + Recur attribution (emitted after custom CSS; not overridable). */
.site-footer .footer-bottom-bar {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0.5rem !important;
  margin-top: 1rem !important;
  border-top: 1px solid var(--color-border, #ddd) !important;
  padding: 0.5rem 0 0 !important;
  font-size: 0.6875rem !important;
  color: inherit !important;
  position: static !important;
  transform: none !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}
.site-footer .footer-bottom-bar .footer-bottom-bar-link {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  align-items: center !important;
  gap: 0.375rem !important;
  color: #4d4d4d !important;
  background: #ffffff !important;
  border-radius: 3px !important;
  padding: 2px 8px !important;
  text-decoration: none !important;
  font-size: 0.6875rem !important;
  position: static !important;
  transform: none !important;
  filter: none !important;
  width: auto !important;
  height: auto !important;
  max-width: none !important;
  max-height: none !important;
  overflow: visible !important;
  clip-path: none !important;
  transition: opacity 0.2s !important;
}
.site-footer .footer-bottom-bar .footer-bottom-bar-link svg {
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: 25px !important;
  width: auto !important;
  vertical-align: middle !important;
}
.site-footer .footer-bottom-bar .footer-bottom-bar-link:hover {
  opacity: 0.8 !important;
}