@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');

/* ==========================================================================
   H2H-modern — site stylesheet for run.events Pages (page system v2)
   Layout mode: EMBEDDED (Smart Hub column). White ground, rounded colour bands
   in red and orange, 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-470{
  /* re:tokens v1 — base tokens below are patched deterministically on Save. Do not hand-edit. */

  /* BASE TOKENS */
  --color-primary:   #13598A;
  --color-secondary: #C91618;
  --color-accent:    #E8883D;
  --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:   #0E4266;
  --color-secondary-hover: #A41214;
  --color-accent-hover:    #E1721B;
  --color-accent-soft:     #F0B281;
  --color-primary-soft:    #EDF6FD;

  /* GROUND, SURFACES, TEXT */
  --color-bg:              #FFFFFF;
  --color-surface:         #FFFFFF;
  --color-surface-alt:     #F1F8FE;
  --color-surface-dark:    #172440;
  --color-border:          #E1E9F2;
  --color-text:            #142333;
  --color-text-muted:      #546370;
  --color-text-inverse:    #FFFFFF;
  --color-text-on-primary:   #FFFFFF;
  --color-text-on-secondary: #FFFFFF;
  --color-text-on-accent:    #142333;
  --color-text-on-surface-dark: #FFFFFF;
  --color-error:           #C4201A;
  --color-focus-ring:      rgba(19, 89, 138, 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(2.25rem, 5cqi, 3.25rem);
  --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(20, 35, 51, 0.06);
  --shadow-md: 0 12px 30px rgba(20, 35, 51, 0.12);
  --shadow-lg: 0 22px 50px rgba(20, 35, 51, 0.18);
  --transition-fast: 160ms ease;
  --transition-base: 240ms ease;
  --lift-y: -6px;
  --lift-shadow: 0 22px 44px rgba(19, 89, 138, 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, #13598A 0%, #C91618 100%);
  --gradient-amber: linear-gradient(135deg, #E8883D 0%, #F0B281 100%);
  --gradient-photo: linear-gradient(to top, rgba(20, 35, 51, 0.92) 0%, rgba(20, 35, 51, 0.72) 50%, rgba(20, 35, 51, 0.3) 100%);
  --hero-gradient: var(--gradient-brand);
  --text-gradient: linear-gradient(94deg, #13598A, #C91618);
  --section-gradient: var(--gradient-brand);
  --band-bg: #E8883D;
  --section-dark-bg: #172440;
  --section-dark-color: #FFFFFF;
  --footer-bg: #C91618;
  --footer-color: #FFFFFF;
  --stat-panel-bg: transparent;
  --stat-panel-color: #142333;
  --panel-bg: #FFFFFF;
  --panel-color: #142333;
  --btn-primary-bg-on-dark: #FFFFFF;
  --btn-primary-text-on-dark: #13598A;
  --frame-offset-color: #E8883D;
  --media-tint: transparent;
  --overlap-amount: 3rem;
  --bento-row-min: 12rem;
}

@supports (color: hsl(from red h s l)) {
  #pb-470{
    --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-470{
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  line-height: var(--line-height-body);
}

#pb-470 :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-470 :where(.runevents__section) :where(a:not(.runevents__btn)){
  color: var(--color-primary);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
}

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

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

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

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

/* gradient text only on white and pale grounds: on a colour band, a dark section, a photo hero
   or a coloured card it sinks into the ground, so there it is plain text in the ground's colour */
#pb-470 .runevents__section--dark .runevents__text-gradient,#pb-470 .runevents__section--primary .runevents__text-gradient,#pb-470 .runevents__section--secondary .runevents__text-gradient,#pb-470 .runevents__section--gradient .runevents__text-gradient,#pb-470 .runevents__section--band .runevents__text-gradient,#pb-470 .runevents__hero .runevents__text-gradient,#pb-470 .runevents__bento-cell--dark .runevents__text-gradient,#pb-470 .runevents__bento-cell--center .runevents__text-gradient{
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  color: inherit;
}

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

#pb-470 .runevents__section--band,#pb-470 .runevents__section--secondary,#pb-470 .runevents__section--primary,#pb-470 .runevents__section--dark,#pb-470 .runevents__section--gradient,#pb-470 .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-470 .runevents__section:first-of-type{
  margin-top: 0;
}

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

/* orange 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-470 .runevents__section--band{
  max-width: var(--page-max);
  margin-inline: auto;
  background: var(--color-accent);
  color: var(--color-text);
}

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

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

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

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

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

/* red and gradient bands: eyebrows in white (orange on red is too weak) */
#pb-470 .runevents__section--secondary .runevents__eyebrow,#pb-470 .runevents__section--gradient .runevents__eyebrow{
  color: var(--color-text-on-secondary);
  opacity: 1;
}

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

#pb-470 .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-470 .runevents__container > :where(h2, h3) + :where(p){
  margin-top: var(--space-lg);
}

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

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

#pb-470 .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-470 :where(.runevents__section) :where(p, h2, h3, h4, address) + :where(ul, ol){
  margin-top: var(--space-md);
}

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

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

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

#pb-470 :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-470 .runevents__cell > * + *,#pb-470 .runevents__panel > * + *{
  margin-top: var(--space-md);
}

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

/* several blocks stacked in one section keep a steady gap */
#pb-470 .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-470 .runevents__section--secondary .runevents__lead,#pb-470 .runevents__section--primary .runevents__lead,#pb-470 .runevents__section--gradient .runevents__lead,#pb-470 .runevents__section--dark .runevents__lead{
  color: inherit;
  opacity: 0.9;
}

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

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

#pb-470 .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-470 .runevents__hero-overlay{
  background: var(--gradient-photo);
}

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

#pb-470 .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-470 .runevents__hero-inner > .runevents__display{
  max-width: 20ch;
}

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

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

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

/* the orange sticker badge in the top right corner of the hero */
#pb-470 .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-470 .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-470 .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-470 .runevents__btn:hover{
  transform: translateY(-1px);
}

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

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

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

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

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

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

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

/* on photos, red bands and dark grounds: white pill with blue text */
#pb-470 .runevents__hero .runevents__btn--primary,#pb-470 .runevents__section--secondary .runevents__btn--primary,#pb-470 .runevents__section--primary .runevents__btn--primary,#pb-470 .runevents__section--gradient .runevents__btn--primary,#pb-470 .runevents__section--dark .runevents__btn--primary,#pb-470 .runevents__bento-cell--dark .runevents__btn--primary,#pb-470 .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-470 .runevents__hero .runevents__btn--outline,#pb-470 .runevents__section--secondary .runevents__btn--outline,#pb-470 .runevents__section--primary .runevents__btn--outline,#pb-470 .runevents__section--gradient .runevents__btn--outline,#pb-470 .runevents__section--dark .runevents__btn--outline,#pb-470 .runevents__bento-cell--dark .runevents__btn--outline{
  color: var(--color-text-inverse);
}

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

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

#pb-470 :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-470 .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-470 .runevents__card:hover{
  box-shadow: var(--lift-shadow);
}

#pb-470 .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-470 .runevents__card-body > :where(h2, p, ul, address) + :where(h3, h4){
  margin-top: var(--space-md);
}

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

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

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

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

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

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

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

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

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

#pb-470 .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-470 .runevents__bento-cell > :where(.runevents__btn, .runevents__btn-row):last-child{
  margin-top: var(--space-md);
  align-self: flex-start;
}

/* blue to red feature card, white text */
#pb-470 .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-470 .runevents__bento-cell--media{
  background: var(--color-surface-dark);
  color: var(--color-text-on-surface-dark);
}

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

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

/* orange feature card (bento "center" cell); text sits bottom left like every other card */
#pb-470 .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-470 .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 orange card.
   ========================================================================== */

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

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

/* each figure in a row sizes to its own column, so a long figure breaks between words
   instead of running into the next column */
#pb-470 .runevents__numeral-row > *{
  container-type: inline-size;
}

#pb-470 .runevents__numeral-row .runevents__numeral{
  font-size: clamp(1.75rem, 22cqi, 3.25rem);
  overflow-wrap: break-word;
}

/* figures inside a row cell, a card or a bento cell sit in less width: one size smaller */
#pb-470 .runevents__cell .runevents__numeral,#pb-470 .runevents__card .runevents__numeral,#pb-470 .runevents__bento-cell .runevents__numeral{
  font-size: clamp(2rem, 4.5cqi, 2.75rem);
}

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

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

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

/* red and gradient bands: figures in white (orange on red is too weak) */
#pb-470 .runevents__section--secondary .runevents__numeral,#pb-470 .runevents__section--gradient .runevents__numeral{
  color: var(--color-text-on-secondary);
}

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

/* orange band and orange cards: figures and labels in dark text (red or grey on orange is too weak) */
#pb-470 .runevents__section--band .runevents__numeral,#pb-470 .runevents__bento-cell--center .runevents__numeral,#pb-470 .runevents__bento-cell--center .runevents__numeral-label{
  color: var(--color-text-on-accent);
}

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

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

#pb-470 .runevents__stat,#pb-470 .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-470 .runevents__stat > * + *{
  margin-top: var(--space-sm);
}

#pb-470 .runevents__stat-figure{
  font-size: clamp(1.75rem, 24cqi, 2.75rem);
  line-height: 0.95;
  color: var(--color-text-on-accent);
}

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

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

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

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

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

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

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

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

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

/* orange pill with dark text on every ground; a row of badges wraps with even gaps */
#pb-470 .runevents__badge,#pb-470 .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 orange band a badge turns white so it stays visible */
#pb-470 .runevents__section--band .runevents__badge{
  background: var(--color-surface);
}

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

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

#pb-470 .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-470 .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-470 .runevents__faq-question{
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--text-h4);
}

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

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

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

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

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

#pb-470 .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 blue pill button. Pipedrive forms render in their
   own iframe; only their container is styled.
   ========================================================================== */

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

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

#pb-470 .cog-cognito :where(input:not([type="checkbox"]):not([type="radio"]), textarea, select),#pb-470 .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-470 .cog-cognito :where(input, textarea, select):focus-visible{
  border-color: var(--color-primary);
  outline: 3px solid var(--color-focus-ring);
  outline-offset: 1px;
}

#pb-470 .cog-cognito .cog-button--primary,#pb-470 .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-470 .cog-cognito .cog-button--primary:hover,#pb-470 .cog-cognito .cog-button--submit:hover{
  background: var(--color-primary-hover);
}

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

#pb-470 .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-470 .runevents__media-frame,#pb-470 .runevents__card-media,#pb-470 .runevents__fact-media,#pb-470 .runevents__overlap-media,#pb-470 .runevents__hero-figure{
  position: relative;
  overflow: clip;
}

#pb-470 .runevents__media-frame > :where(img, picture, video),#pb-470 .runevents__card-media > :where(img, picture, video),#pb-470 .runevents__fact-media > :where(img, picture, video),#pb-470 .runevents__overlap-media > :where(img, picture, video),#pb-470 .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-470 .runevents__hero-media,#pb-470 .runevents__media-frame > :where(img, video),#pb-470 .runevents__card-media > :where(img, video),#pb-470 .runevents__fact-media > :where(img, video),#pb-470 .runevents__overlap-media > :where(img, video),#pb-470 .runevents__hero-figure > :where(img, video),#pb-470 .runevents__bento-cell--media :where(img),#pb-470 .runevents__logo-frame :where(img),#pb-470 .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-470 .runevents__media-frame--wide{
  aspect-ratio: 16 / 9;
  height: auto;
}

#pb-470 .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-470 .runevents__container > .runevents__media-frame{
  aspect-ratio: 16 / 9;
  height: auto;
}

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

#pb-470 .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-470 .runevents__card-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
  grid-auto-rows: 1fr;
}

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

/* a photo cell never collapses, even when the bento stacks into one column */
#pb-470 .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-470 .runevents__bento{
    grid-auto-rows: minmax(var(--bento-row-min), 1fr);
  }
}

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

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