@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Condensed:wght@500;600;700&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap');

/* ==========================================================================
   ECS2027-modern — site stylesheet for run.events Pages (page system v2)
   Layout mode: EMBEDDED (Smart Hub column). White ground, rounded colour bands
   in plum and amber, gradient feature cards, pill buttons, bold condensed type.
   Rules: class selectors only; element selectors only inside :where();
   no !important; no id selectors; no viewport units.
   ========================================================================== */

#pb-650{
  /* re:tokens v1 — base tokens below are patched deterministically on Save. Do not hand-edit. */

  /* BASE TOKENS */
  --color-primary:   #7656F5;
  --color-secondary: #A5416F;
  --color-accent:    #FFB23F;
  --font-heading: "IBM Plex Sans Condensed", system-ui, sans-serif;
  --font-body:    "IBM Plex Sans", system-ui, sans-serif;

  /* DERIVED SHADES (static fallbacks; refreshed below where relative colour is supported) */
  --color-primary-hover:   #5F41E6;
  --color-secondary-hover: #8C355D;
  --color-accent-hover:    #F59F1C;
  --color-accent-soft:     #FFD98F;
  --color-primary-soft:    #F1EDFF;

  /* GROUND, SURFACES, TEXT */
  --color-bg:              #FFFFFF;
  --color-surface:         #FFFFFF;
  --color-surface-alt:     #F4F1FE;
  --color-surface-dark:    #2A1740;
  --color-border:          #E6E1F2;
  --color-text:            #1D1433;
  --color-text-muted:      #5B5470;
  --color-text-inverse:    #FFFFFF;
  --color-text-on-primary:   #FFFFFF;
  --color-text-on-secondary: #FFFFFF;
  --color-text-on-accent:    #1D1433;
  --color-text-on-surface-dark: #FFFFFF;
  --color-error:           #C4201A;
  --color-focus-ring:      rgba(118, 86, 245, 0.45);

  /* TYPE */
  /* two families only: the base's label, meta and badge roles use the body face */
  --font-mono: var(--font-body);
  --font-weight-heading: 700;
  --line-height-body: 1.6;
  --tracking-display: -0.01em;
  --text-mega:       clamp(2.5rem, 7cqi, 3.75rem);
  --text-display:    clamp(2.25rem, 6cqi, 3.5rem);
  --text-display-xl: clamp(2.75rem, 8cqi, 4.5rem);
  --text-h1:         clamp(2rem, 5cqi, 3rem);
  --text-h2:         clamp(1.75rem, 4.2cqi, 2.5rem);
  --text-h3:         clamp(1.25rem, 2.4cqi, 1.5rem);
  --text-h4:         1.125rem;
  --text-lead:       clamp(1.0625rem, 1.6cqi, 1.25rem);
  --text-body:       1rem;
  --text-small:      0.875rem;
  --text-overline:   0.8125rem;
  --text-numeral:    clamp(3rem, 8cqi, 4.75rem);
  --measure-heading: 22ch;
  --measure-display: 16ch;
  --measure-lead:    56ch;
  --measure-body:    68ch;

  /* SPACE, SHAPE, DEPTH, MOTION */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2.5rem;
  --space-2xl: 4rem;
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-full: 999px;
  --shadow-sm: 0 4px 14px rgba(29, 20, 51, 0.06);
  --shadow-md: 0 12px 30px rgba(29, 20, 51, 0.12);
  --shadow-lg: 0 22px 50px rgba(29, 20, 51, 0.18);
  --transition-fast: 160ms ease;
  --transition-base: 240ms ease;
  --lift-y: -6px;
  --lift-shadow: 0 22px 44px rgba(118, 86, 245, 0.22);

  /* LAYOUT MODE: EMBEDDED (Smart Hub column; the page is not the viewport) */
  --page-max: 70rem;
  --bleed: 0px;
  --section-pad: clamp(2rem, 6cqi, 3.5rem);
  --gutter: clamp(1rem, 4%, 2rem);
  --gutter-sm: 1rem;

  /* GRADIENTS AND GROUNDS */
  --gradient-brand: linear-gradient(135deg, #7656F5 0%, #A5416F 100%);
  --gradient-amber: linear-gradient(135deg, #FFB23F 0%, #FFD98F 100%);
  --gradient-photo: linear-gradient(to top, rgba(29, 20, 51, 0.92) 0%, rgba(29, 20, 51, 0.72) 50%, rgba(29, 20, 51, 0.3) 100%);
  --hero-gradient: var(--gradient-brand);
  --text-gradient: linear-gradient(94deg, #7656F5, #A5416F);
  --section-gradient: var(--gradient-brand);
  --band-bg: #FFB23F;
  --section-dark-bg: #2A1740;
  --section-dark-color: #FFFFFF;
  --footer-bg: #A5416F;
  --footer-color: #FFFFFF;
  --stat-panel-bg: transparent;
  --stat-panel-color: #1D1433;
  --panel-bg: #FFFFFF;
  --panel-color: #1D1433;
  --btn-primary-bg-on-dark: #FFFFFF;
  --btn-primary-text-on-dark: #7656F5;
  --frame-offset-color: #FFB23F;
  --media-tint: transparent;
  --overlap-amount: 3rem;
  --bento-row-min: 12rem;
}

@supports (color: hsl(from red h s l)) {
  #pb-650{
    --color-primary-hover:   hsl(from var(--color-primary) h s calc(l - 8));
    --color-secondary-hover: hsl(from var(--color-secondary) h s calc(l - 8));
    --color-accent-hover:    hsl(from var(--color-accent) h s calc(l - 8));
    --color-accent-soft:     hsl(from var(--color-accent) h s calc(l + 15));
    --color-primary-soft:    hsl(from var(--color-primary) h s 96);
    --gradient-brand: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
    --gradient-amber: linear-gradient(135deg, var(--color-accent) 0%, hsl(from var(--color-accent) h s calc(l + 15)) 100%);
    --text-gradient: linear-gradient(94deg, var(--color-primary), var(--color-secondary));
    --band-bg: var(--color-accent);
    --footer-bg: var(--color-secondary);
    --btn-primary-text-on-dark: var(--color-primary);
    --frame-offset-color: var(--color-accent);
  }
}

/* ==========================================================================
   1. PAGE AND TYPE
   ========================================================================== */

#pb-650{
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  line-height: var(--line-height-body);
}

#pb-650 :where(.runevents__page, .runevents__section) :where(h1, h2, h3, h4){
  font-family: var(--font-heading);
  font-weight: var(--font-weight-heading);
  line-height: 1.05;
  letter-spacing: var(--tracking-display);
}

#pb-650 :where(.runevents__section) :where(a:not(.runevents__btn)){
  color: var(--color-primary);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
}

#pb-650 .runevents__display,#pb-650 .runevents__numeral,#pb-650 .runevents__stat-figure,#pb-650 .runevents__fact-figure,#pb-650 .runevents__quote{
  font-family: var(--font-heading);
  font-weight: 700;
}

#pb-650 .runevents__lead{
  color: var(--color-text-muted);
  text-wrap: pretty;
}

#pb-650 .runevents__eyebrow{
  font-family: var(--font-heading);
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--color-secondary);
}

#pb-650 .runevents__text-gradient{
  background-image: var(--text-gradient);
}

/* ==========================================================================
   2. SECTIONS AND COLOUR BANDS (rounded panels inside the column)
   ========================================================================== */

#pb-650 .runevents__section--band,#pb-650 .runevents__section--secondary,#pb-650 .runevents__section--primary,#pb-650 .runevents__section--dark,#pb-650 .runevents__section--gradient,#pb-650 .runevents__section--light{
  border-radius: var(--radius-lg);
  margin-block: var(--space-md);
}

/* the page starts and ends flush: no white strip above the first or below the last section.
   Standalone Smart Hub pages put a hidden page-title heading before the first section,
   so this counts sections, not children. */
#pb-650 .runevents__section:first-of-type{
  margin-top: 0;
}

#pb-650 .runevents__section:last-of-type{
  margin-bottom: 0;
}

/* amber band: dark text, never white. Contained like every other section
   (the base lets bands run full width for standalone pages; here they are panels in the column) */
#pb-650 .runevents__section--band{
  max-width: var(--page-max);
  margin-inline: auto;
  background: var(--color-accent);
  color: var(--color-text);
}

/* plum band: white text */
#pb-650 .runevents__section--secondary{
  background: var(--color-secondary);
  color: var(--color-text-on-secondary);
}

#pb-650 .runevents__section--primary{
  background: var(--color-primary);
  color: var(--color-text-on-primary);
}

#pb-650 .runevents__section--gradient{
  background: var(--gradient-brand);
  color: var(--color-text-on-primary);
}

#pb-650 .runevents__section--light{
  background: var(--color-surface-alt);
}

#pb-650 .runevents__section--secondary .runevents__eyebrow,#pb-650 .runevents__section--primary .runevents__eyebrow,#pb-650 .runevents__section--gradient .runevents__eyebrow,#pb-650 .runevents__section--dark .runevents__eyebrow{
  color: var(--color-accent);
  opacity: 1;
}

#pb-650 .runevents__section--gradient .runevents__eyebrow::before{
  background: currentColor;
}

#pb-650 .runevents__section--band .runevents__eyebrow{
  color: var(--color-text);
}

/* text placed straight into a section (band break, closing call to action) gets room to breathe */
#pb-650 .runevents__container > :where(h2, h3) + :where(p){
  margin-top: var(--space-lg);
}

#pb-650 .runevents__container > :where(p) + :where(p){
  margin-top: var(--space-md);
}

#pb-650 .runevents__container > .runevents__btn-row{
  margin-top: var(--space-xl);
}

#pb-650 .runevents__container > .runevents__btn-row + :where(p){
  margin-top: var(--space-lg);
}

/* lists, figures and addresses: the base zeroes their margins, so give them the same rhythm as text */
#pb-650 :where(.runevents__section) :where(p, h2, h3, h4, address) + :where(ul, ol){
  margin-top: var(--space-md);
}

#pb-650 :where(.runevents__section) :where(li + li){
  margin-top: var(--space-sm);
}

#pb-650 :where(.runevents__section) :where(figure){
  margin: 0;
}

#pb-650 :where(.runevents__section) :where(address){
  font-style: normal;
}

#pb-650 :where(.runevents__section) :where(h2, h3, h4) + .runevents__numeral-row{
  margin-top: var(--space-lg);
}

/* free text inside row cells and panels stacks with a steady gap */
#pb-650 .runevents__cell > * + *,#pb-650 .runevents__panel > * + *{
  margin-top: var(--space-md);
}

/* a card or photo fills its row cell only when it is alone there */
#pb-650 .runevents__cell > .runevents__card:not(:only-child),#pb-650 .runevents__cell > .runevents__media-frame:not(:only-child){
  height: auto;
}

/* several blocks stacked in one section keep a steady gap */
#pb-650 .runevents__container > :where(.runevents__embed, .runevents__bento, .runevents__card-grid, .runevents__stat-panel, .runevents__numeral-row, .runevents__split, .runevents__row, .runevents__media-frame, .runevents__panel)
  + :where(.runevents__embed, .runevents__bento, .runevents__card-grid, .runevents__stat-panel, .runevents__numeral-row, .runevents__split, .runevents__row, .runevents__media-frame, .runevents__panel){
  margin-top: var(--space-xl);
}

#pb-650 .runevents__section--secondary .runevents__lead,#pb-650 .runevents__section--primary .runevents__lead,#pb-650 .runevents__section--gradient .runevents__lead,#pb-650 .runevents__section--dark .runevents__lead{
  color: inherit;
  opacity: 0.9;
}

#pb-650 .runevents__section--band .runevents__lead{
  color: var(--color-text);
}

/* ==========================================================================
   3. HERO — full photo card, text bottom left on a dark gradient
   ========================================================================== */

#pb-650 .runevents__hero{
  position: relative;
  border-radius: var(--radius-lg);
  padding-top: clamp(5.25rem, 9cqi, 6rem); /* room for the corner badge in narrow columns */
  min-height: clamp(22rem, 58cqi, 34rem);
  display: flex;
  align-items: flex-end;
  color: var(--color-text-on-surface-dark);
}

#pb-650 .runevents__hero-overlay{
  background: var(--gradient-photo);
}

#pb-650 .runevents__hero-inner{
  max-width: min(100%, 40rem);
}

#pb-650 .runevents__hero .runevents__display{
  font-size: var(--text-display);
  line-height: 1.02;
  text-wrap: pretty; /* balance would break short headlines at a hyphen */
}

#pb-650 .runevents__hero-inner > .runevents__display{
  max-width: 20ch;
}

#pb-650 .runevents__hero--gradient,#pb-650 .runevents__hero--split{
  background: var(--hero-gradient);
}

#pb-650 .runevents__hero--split{
  align-items: center;
}

#pb-650 .runevents__hero--compact{
  min-height: clamp(14rem, 36cqi, 20rem);
}

/* the amber sticker badge in the top right corner of the hero */
#pb-650 .runevents__hero .runevents__badge{
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  z-index: 3;
  transform: rotate(-3deg);
  box-shadow: var(--shadow-md);
}

/* ==========================================================================
   4. BUTTONS — pills with a chevron
   ========================================================================== */

#pb-650 .runevents__btn{
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  border-radius: var(--radius-full);
  padding-inline: 1.5rem;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.01em;
  text-decoration: none;
  transition: background-color var(--transition-fast), color var(--transition-fast),
              transform var(--transition-fast), box-shadow var(--transition-fast);
}

#pb-650 .runevents__btn::after{
  content: "";
  width: 0.45em;
  height: 0.45em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  flex: none;
}

#pb-650 .runevents__btn:hover{
  transform: translateY(-1px);
}

#pb-650 .runevents__btn--primary{
  background: var(--color-primary);
  color: var(--color-text-on-primary);
  border-color: var(--color-primary);
}

#pb-650 .runevents__btn--primary:hover{
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
}

#pb-650 .runevents__btn--secondary{
  background: var(--color-secondary);
  color: var(--color-text-on-secondary);
  border-color: var(--color-secondary);
}

#pb-650 .runevents__btn--secondary:hover{
  background: var(--color-secondary-hover);
  border-color: var(--color-secondary-hover);
}

/* the single loudest call to action: amber with dark text */
#pb-650 .runevents__btn--accent{
  background: var(--color-accent);
  color: var(--color-text-on-accent);
  border-color: var(--color-accent);
}

#pb-650 .runevents__btn--accent:hover{
  background: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
  color: var(--color-text-on-accent);
}

#pb-650 .runevents__btn--outline{
  background: transparent;
  color: var(--color-primary);
  border: 2px solid currentColor;
}

/* on photos, plum bands and dark grounds: white pill with violet text */
#pb-650 .runevents__hero .runevents__btn--primary,#pb-650 .runevents__section--secondary .runevents__btn--primary,#pb-650 .runevents__section--primary .runevents__btn--primary,#pb-650 .runevents__section--gradient .runevents__btn--primary,#pb-650 .runevents__section--dark .runevents__btn--primary,#pb-650 .runevents__bento-cell--dark .runevents__btn--primary,#pb-650 .runevents__bento-cell--media .runevents__btn--primary{
  background: var(--btn-primary-bg-on-dark);
  color: var(--btn-primary-text-on-dark);
  border-color: var(--btn-primary-bg-on-dark);
}

#pb-650 .runevents__hero .runevents__btn--outline,#pb-650 .runevents__section--secondary .runevents__btn--outline,#pb-650 .runevents__section--primary .runevents__btn--outline,#pb-650 .runevents__section--gradient .runevents__btn--outline,#pb-650 .runevents__section--dark .runevents__btn--outline,#pb-650 .runevents__bento-cell--dark .runevents__btn--outline{
  color: var(--color-text-inverse);
}

/* on amber bands the main button stays violet */
#pb-650 .runevents__section--band .runevents__btn--primary{
  background: var(--color-primary);
  color: var(--color-text-on-primary);
}

#pb-650 .runevents__section--band .runevents__btn--outline{
  color: var(--color-text);
}

#pb-650 :where(.runevents__btn):focus-visible{
  outline: 3px solid var(--color-focus-ring);
  outline-offset: 3px;
}

/* ==========================================================================
   5. CARDS — rounded, equal height, buttons aligned at the bottom
   ========================================================================== */

#pb-650 .runevents__card{
  border-radius: var(--radius-lg);
  background: var(--color-surface-alt);
  box-shadow: none;
  border: 0;
  display: flex;
  flex-direction: column;
  overflow: clip;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

#pb-650 .runevents__card:hover{
  box-shadow: var(--lift-shadow);
}

#pb-650 .runevents__card-body{
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  gap: var(--space-sm);
}

/* a new heading inside a card starts a new group */
#pb-650 .runevents__card-body > :where(h2, p, ul, address) + :where(h3, h4){
  margin-top: var(--space-md);
}

#pb-650 .runevents__card-body > :where(.runevents__btn, .runevents__btn-row):last-child,#pb-650 .runevents__card > :where(.runevents__btn, .runevents__btn-row):last-child{
  margin-top: auto;
}

#pb-650 .runevents__card-media,#pb-650 .runevents__card-media--wide{
  border-radius: var(--radius-md);
  overflow: clip;
}

#pb-650 .runevents__card--flush .runevents__card-media,#pb-650 .runevents__card--flush .runevents__card-media--wide{
  border-radius: 0;
}

/* the "more" tile: amber gradient, dark text */
#pb-650 .runevents__card-more{
  border-radius: var(--radius-lg);
  background: var(--gradient-amber);
  color: var(--color-text-on-accent);
}

/* cards on colour bands */
#pb-650 .runevents__section--secondary .runevents__card,#pb-650 .runevents__section--primary .runevents__card,#pb-650 .runevents__section--gradient .runevents__card,#pb-650 .runevents__section--dark .runevents__card{
  background: rgba(255, 255, 255, 0.12);
  color: inherit;
}

#pb-650 .runevents__section--band .runevents__card{
  background: var(--color-surface);
  color: var(--color-text);
}

#pb-650 .runevents__section--light .runevents__card{
  background: var(--color-surface);
}

/* ==========================================================================
   6. BENTO — two thirds plus one third, gradient and photo cards
   ========================================================================== */

#pb-650 .runevents__bento{
  gap: var(--space-md);
}

#pb-650 .runevents__bento-cell{
  border-radius: var(--radius-lg);
  border: 0;
  background: var(--color-surface-alt);
  color: var(--color-text);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--space-sm);
  overflow: clip;
  position: relative;
}

#pb-650 .runevents__bento-cell > :where(.runevents__btn, .runevents__btn-row):last-child{
  margin-top: var(--space-md);
  align-self: flex-start;
}

/* violet to plum feature card, white text */
#pb-650 .runevents__bento-cell--dark{
  background: var(--gradient-brand);
  color: var(--color-text-on-primary);
}

/* photo cell: the image fills the cell. For text on a photo, place a hero inside the cell. */
#pb-650 .runevents__bento-cell--media{
  background: var(--color-surface-dark);
  color: var(--color-text-on-surface-dark);
}

#pb-650 .runevents__bento-cell--media > :where(img, picture, .runevents__media-frame){
  border-radius: 0;
}

#pb-650 .runevents__bento-cell--media .runevents__hero{
  min-height: 100%;
  border-radius: 0;
}

/* amber feature card (bento "center" cell); text sits bottom left like every other card */
#pb-650 .runevents__bento-cell--center{
  background: var(--gradient-amber);
  color: var(--color-text-on-accent);
  align-items: stretch;
  justify-content: flex-end;
  text-align: left;
}

#pb-650 .runevents__section--band .runevents__bento-cell{
  background: var(--color-surface);
}

/* ==========================================================================
   7. KEY FIGURES
   On colour bands: large numerals in equal columns, no boxes.
   In white sections: each figure in its own amber card.
   ========================================================================== */

#pb-650 .runevents__numeral-row{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(9rem, 100%), 1fr));
  gap: var(--space-lg);
}

#pb-650 .runevents__numeral{
  color: var(--color-primary);
  line-height: 0.95;
  letter-spacing: -0.01em;
}

/* figures inside a row cell or a card sit in half the width: one size smaller */
#pb-650 .runevents__cell .runevents__numeral,#pb-650 .runevents__card .runevents__numeral{
  font-size: clamp(2.5rem, 6.5cqi, 4rem);
}

/* labels under figures: sentence case in the body face, not the base's small caps */
#pb-650 .runevents__numeral-label,#pb-650 .runevents__stat-label,#pb-650 .runevents__fact-label{
  font-size: var(--text-body);
  letter-spacing: 0;
  text-transform: none;
}

#pb-650 .runevents__numeral-label{
  font-weight: 500;
  color: var(--color-text-muted);
}

#pb-650 .runevents__section--secondary .runevents__numeral,#pb-650 .runevents__section--primary .runevents__numeral,#pb-650 .runevents__section--gradient .runevents__numeral,#pb-650 .runevents__section--dark .runevents__numeral{
  color: var(--color-accent);
}

#pb-650 .runevents__section--secondary .runevents__numeral-label,#pb-650 .runevents__section--primary .runevents__numeral-label,#pb-650 .runevents__section--gradient .runevents__numeral-label,#pb-650 .runevents__section--dark .runevents__numeral-label{
  color: inherit;
}

#pb-650 .runevents__section--band .runevents__numeral{
  color: var(--color-secondary);
}

#pb-650 .runevents__section--band .runevents__numeral-label{
  color: var(--color-text);
}

#pb-650 .runevents__stat-panel{
  background: transparent;
  border: 0;
  box-shadow: none;
  gap: var(--space-md);
  padding: 0;
}

#pb-650 .runevents__stat,#pb-650 .runevents__stat + .runevents__stat{
  background: var(--gradient-amber);
  color: var(--color-text-on-accent);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  border: 0;
  container-type: inline-size; /* the figure sizes to its own card, not the section */
}

#pb-650 .runevents__stat > * + *{
  margin-top: var(--space-sm);
}

#pb-650 .runevents__stat-figure{
  font-size: clamp(2rem, 30cqi, 4rem);
  line-height: 0.95;
  color: var(--color-text-on-accent);
}

#pb-650 .runevents__stat-label{
  color: var(--color-text-on-accent);
  font-weight: 500;
}

#pb-650 .runevents__fact-figure{
  color: var(--color-primary);
}

/* ==========================================================================
   8. MEDIA, SPLIT, OVERLAP, VIDEO
   ========================================================================== */

#pb-650 .runevents__media-frame,#pb-650 .runevents__split-media,#pb-650 .runevents__overlap-media,#pb-650 .runevents__fact-media,#pb-650 .runevents__embed{
  border-radius: var(--radius-lg);
  overflow: clip;
}

#pb-650 .runevents__card .runevents__media-frame,#pb-650 .runevents__bento-cell .runevents__media-frame{
  border-radius: var(--radius-md);
}

#pb-650 .runevents__overlap-panel{
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

#pb-650 .runevents__panel{
  border-radius: var(--radius-lg);
  border: 0;
}

#pb-650 .runevents__panel--dark{
  background: var(--gradient-brand);
  color: var(--color-text-on-primary);
}

/* ==========================================================================
   9. SMALLER PARTS
   ========================================================================== */

/* amber pill with dark text on every ground; a row of badges wraps with even gaps */
#pb-650 .runevents__badge,#pb-650 .runevents__section .runevents__badge{
  display: inline-flex;
  align-items: center;
  margin: 0 0.4rem 0.5rem 0;
  padding: 0.4rem 0.9rem;
  border: 0;
  border-radius: var(--radius-full);
  background: var(--color-accent);
  color: var(--color-text-on-accent);
  font-family: var(--font-heading);
  font-size: var(--text-small);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: none;
}

/* on the amber band a badge turns white so it stays visible */
#pb-650 .runevents__section--band .runevents__badge{
  background: var(--color-surface);
}

#pb-650 .runevents__quote{
  color: var(--color-primary);
  line-height: 1.12;
}

#pb-650 .runevents__section--secondary .runevents__quote,#pb-650 .runevents__section--gradient .runevents__quote,#pb-650 .runevents__section--dark .runevents__quote{
  color: inherit;
}

#pb-650 .runevents__agenda-row{
  border-radius: var(--radius-md);
  background: var(--color-surface-alt);
  padding: var(--space-md) var(--space-lg);
  border: 0;
  margin-block: var(--space-sm);
}

#pb-650 .runevents__faq-item{
  border-radius: var(--radius-md);
  background: var(--color-surface-alt);
  padding: var(--space-md) var(--space-lg);
  border: 0;
  margin-block: var(--space-sm);
}

#pb-650 .runevents__faq-question{
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--text-h4);
}

#pb-650 .runevents__tier{
  border-radius: var(--radius-lg);
  background: var(--color-surface-alt);
  border: 0;
}

#pb-650 .runevents__tier--featured{
  background: var(--gradient-brand);
  color: var(--color-text-on-primary);
  border: 0;
}

#pb-650 .runevents__logo-frame{
  border-radius: var(--radius-md);
  border-color: var(--color-border);
}

#pb-650 .runevents__input,#pb-650 .runevents__textarea,#pb-650 .runevents__select{
  border-radius: var(--radius-md);
  border: 2px solid var(--color-border);
}

#pb-650 .runevents__input:focus-visible,#pb-650 .runevents__textarea:focus-visible,#pb-650 .runevents__select:focus-visible{
  border-color: var(--color-primary);
  outline: 3px solid var(--color-focus-ring);
  outline-offset: 1px;
}

#pb-650 .runevents__divider{
  color: var(--color-border);
}

/* ==========================================================================
   10. EMBEDDED FORMS
   Cognito Forms in "chameleon" mode take the page's styles: rounded fields,
   condensed labels and the violet pill button. Pipedrive forms render in their
   own iframe; only their container is styled.
   ========================================================================== */

#pb-650 .cog-cognito{
  font-family: var(--font-body);
  color: var(--color-text);
}

#pb-650 .cog-cognito .cog-label{
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--text-body);
}

#pb-650 .cog-cognito :where(input:not([type="checkbox"]):not([type="radio"]), textarea, select),#pb-650 .cog-cognito .el-input__inner{
  box-sizing: border-box;
  width: 100%;
  min-height: 48px;
  padding: 0.7rem 1rem;
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
}

#pb-650 .cog-cognito :where(input, textarea, select):focus-visible{
  border-color: var(--color-primary);
  outline: 3px solid var(--color-focus-ring);
  outline-offset: 1px;
}

#pb-650 .cog-cognito .cog-button--primary,#pb-650 .cog-cognito .cog-button--submit{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 1.75rem;
  border: 0;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  color: var(--color-text-on-primary);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

#pb-650 .cog-cognito .cog-button--primary:hover,#pb-650 .cog-cognito .cog-button--submit:hover{
  background: var(--color-primary-hover);
}

#pb-650 .cog-cognito .cog-button--primary:focus-visible,#pb-650 .cog-cognito .cog-button--submit:focus-visible{
  outline: 3px solid var(--color-focus-ring);
  outline-offset: 3px;
}

#pb-650 .pipedriveWebForms{
  border-radius: var(--radius-md);
  overflow: clip;
}

/* ==========================================================================
   11. PHOTOS FILL THEIR FRAMES; CARDS IN A GRID ARE ONE SIZE
   A photo always covers the whole space its frame is given; cropping is fine.
   It is laid over the frame instead of relying on percentage heights, which
   fall back to the photo's own height whenever the frame's height is not yet
   definite. The frame takes its size from the layout, never from the photo.
   ========================================================================== */

#pb-650 .runevents__media-frame,#pb-650 .runevents__card-media,#pb-650 .runevents__fact-media,#pb-650 .runevents__overlap-media,#pb-650 .runevents__hero-figure{
  position: relative;
  overflow: clip;
}

#pb-650 .runevents__media-frame > :where(img, picture, video),#pb-650 .runevents__card-media > :where(img, picture, video),#pb-650 .runevents__fact-media > :where(img, picture, video),#pb-650 .runevents__overlap-media > :where(img, picture, video),#pb-650 .runevents__hero-figure > :where(img, picture, video){
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

/* The page editor gives every photo and video it loads a rule of its own
   ("max-width: 100%; height: auto"), and a save from the Visual view keeps it.
   That rule outranks the classes, so the size is pinned through the two
   properties it never sets: whatever "height" says, a photo or video stays
   exactly as tall as its frame. */
#pb-650 .runevents__hero-media,#pb-650 .runevents__media-frame > :where(img, video),#pb-650 .runevents__card-media > :where(img, video),#pb-650 .runevents__fact-media > :where(img, video),#pb-650 .runevents__overlap-media > :where(img, video),#pb-650 .runevents__hero-figure > :where(img, video),#pb-650 .runevents__bento-cell--media :where(img),#pb-650 .runevents__logo-frame :where(img),#pb-650 .runevents__embed :where(iframe, video){
  min-height: 100%;
  max-height: 100%;
}

/* frame shapes that the base took from the photo now sit on the frame itself */
#pb-650 .runevents__media-frame--wide{
  aspect-ratio: 16 / 9;
  height: auto;
}

#pb-650 .runevents__media-frame--tall{
  aspect-ratio: 4 / 5;
  height: auto;
}

/* a photo standing on its own in a section gets a fixed landscape shape */
#pb-650 .runevents__container > .runevents__media-frame{
  aspect-ratio: 16 / 9;
  height: auto;
}

/* a photo beside text fills the full height of the text column */
#pb-650 .runevents__split-media{
  display: flex;
  flex-direction: column;
}

#pb-650 .runevents__split-media > .runevents__media-frame{
  flex: 1 1 auto;
}

/* card grids: equal columns (a short last row keeps the same card width; columns
   no card ever uses are dropped, so two cards share the full row) and every row
   as tall as the tallest card */
#pb-650 .runevents__card-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
  grid-auto-rows: 1fr;
}

#pb-650 .runevents__stat-panel{
  grid-auto-rows: 1fr;
}

/* a photo cell never collapses, even when the bento stacks into one column */
#pb-650 .runevents__bento-cell--media{
  min-height: var(--bento-row-min);
}

/* bento rows share one height wherever the bento has more than one column */
@container (min-width: 621px) {
  #pb-650 .runevents__bento{
    grid-auto-rows: minmax(var(--bento-row-min), 1fr);
  }
}

/* chrome (EIC preview only; community pages show the page content alone) */
#pb-650 .runevents__header,#pb-650 .runevents__footer{
  font-family: var(--font-body);
}

#pb-650 .runevents__footer{
  border-radius: var(--radius-lg);
}