/* Fitness Business Romania — events site.
   Hand-written, no build step. Tokens first, then base, layout and chrome. */

/* ---------- Fonts: Poppins, self-hosted, latin + latin-ext subset ---------- */

@font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/vendor/fonts/poppins-400.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/vendor/fonts/poppins-500.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/vendor/fonts/poppins-600.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/vendor/fonts/poppins-700.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 800; font-display: swap; src: url("/assets/vendor/fonts/poppins-800.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 900; font-display: swap; src: url("/assets/vendor/fonts/poppins-900.woff2") format("woff2"); }

/* Quicksand, for the RomaniaActive series lockup only. Loaded when a page uses it. */
@font-face { font-family: "Quicksand"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/vendor/fonts/quicksand-500.woff2") format("woff2"); }
@font-face { font-family: "Quicksand"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/vendor/fonts/quicksand-700.woff2") format("woff2"); }

/* ---------- Tokens ---------- */

:root {
  /* Brand palette */
  --fbr-cyan: #50daff;
  --fbr-sky: #139be8;
  --fbr-blue: #006bc9;
  --fbr-yellow: #ffbf29;
  --fbr-orange: #ff8a0d;
  --fbr-pink: #ff2b66;
  --fbr-light-purple: #9953c4;
  --fbr-purple: #681da3;
  --fbr-deep-purple: #493dbd;

  /* Dark surfaces */
  --fbr-dark-bkg: #1f033b;
  --fbr-dark-card: #2a0a4e;

  /* Card and control borders, visible against the page at 3:1. */
  --fbr-input-border: #8a48bd;

  /* Darker pink for white text; the brand pink stays for fills without text. */
  /* Primary button background, dark enough for white text. */
  --fbr-pink-cta: #ea0041;

  /* Small text on light backgrounds. The brand colours are calibrated for the dark
     theme and fall under 4.5:1 here. Not for use on dark. */
  --fbr-pink-on-light: #d6003c;
  --fbr-orange-on-light: #a8480a;

  /* RomaniaActive series palette, the same values as the summit's print and social
     material. The brand red is for fills; white text sits on --ra-red-cta. */
  --ra-blue: #1a4b9b;
  --ra-navy: #213a8e;
  --ra-red: #ed1c24;
  --ra-red-cta: #d1121a;
  --ra-red-dark: #b8050f;
  --ra-yellow: #fcd526;
  --ra-flag: linear-gradient(to right, var(--ra-blue) 0 33.333%, var(--ra-yellow) 33.333% 66.666%, var(--ra-red) 66.666% 100%);

  /* Neutrals */
  --slate-50: #f8fafc;
  --slate-100: #f1f5f9;
  --slate-200: #e2e8f0;
  --slate-300: #cbd5e1;
  --slate-400: #94a3b8;
  --slate-500: #64748b;
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-800: #1e293b;
  --slate-900: #0f172a;
  --slate-950: #020617;

  /* Gradients */
  --gradient-brand: linear-gradient(to right, var(--fbr-blue), var(--fbr-cyan), var(--fbr-purple));
  --gradient-cta: linear-gradient(to right, var(--fbr-pink-cta), var(--fbr-purple));
  --gradient-divider: linear-gradient(to right, var(--fbr-cyan), var(--fbr-pink));

  /* Metrics */
  --header-h: 68px;
  --container-max: 72rem;
  --radius-card: 1rem;
  --radius-pill: 9999px;
  --focus-ring: 0 0 0 3px rgba(80, 218, 255, .45);
}

/* ---------- Base ---------- */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-padding-top: calc(var(--header-h) + 1rem); }
body { padding-top: var(--header-h); }

body {
  margin: 0;
  font-family: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--slate-100);
  background: var(--fbr-dark-bkg);
  -webkit-text-size-adjust: 100%;
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3 { line-height: 1.2; margin: 0 0 .75rem; font-weight: 800; }

/* Lists carry no bullets by default; running text restores them below. */
ul, ol { list-style: none; margin: 0; padding: 0; }

/* Running text is the exception: a list inside a legal document or a written answer is
   read as a list, so it keeps its marker and its indent. */
.legal__section ul, .legal__section ol,
.faq__a ul, .faq__a ol,
.identity__body ul, .identity__body ol {
  list-style: revert;
  margin: revert;
  padding: revert;
}

h1 { font-size: 1.625rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.125rem; }
p { margin: 0 0 1rem; }

/* Links without underline by default. */
a { color: var(--fbr-cyan); text-decoration: none; }
a:hover { color: #fff; }

:focus-visible { outline: 2px solid var(--fbr-cyan); outline-offset: 2px; box-shadow: var(--focus-ring); }

/* Keyboard users reach the content without walking the whole menu. */
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  padding: .75rem 1rem;
  background: #fff;
  color: var(--slate-900);
  z-index: 100;
}
.skip:focus { left: 0; }

/* ---------- Layout ---------- */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: 1rem;
}
/* Same width as .container, so every box on the site lines up. */
.container--6xl,
.container--4xl { max-width: var(--container-max); }

/* Long-form text keeps a readable measure. */
.legal__section p,
.legal__section li { max-width: 46rem; }

.section { padding-block: 3rem; }

@media (min-width: 640px) {
  .container { padding-inline: 1.5rem; }
  h1 { font-size: 2rem; }
  h2 { font-size: 1.875rem; }
}

@media (min-width: 1024px) {
  .container { padding-inline: 2rem; }
  .section { padding-block: 5rem; }
  h1 { font-size: 2.375rem; }
}

/* ---------- Header ---------- */
/* White over a dark page, the same chrome the magazine wears. */

.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 50; padding-block: .75rem;
  background: rgba(255, 255, 255, .95); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--slate-100); box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
  transition: box-shadow .3s;
}
.site-header.is-scrolled { box-shadow: 0 6px 20px -8px rgba(15, 23, 42, .18); }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.site-header__logo { display: block; min-width: 0; }
.site-header__logo img { height: 45px; width: auto; }
@media (min-width: 768px) { .site-header__logo img { height: 60px; } }

/* Nav appears at 900px, not 768px: the entries plus the CTA need the room. */
.nav { display: none; align-items: center; gap: 1.5rem; }
@media (min-width: 900px) { .nav { display: flex; } }
@media (min-width: 1100px) { .nav { gap: 2rem; } }

/* nowrap so an overflow becomes visible instead of silently wrapping. */
.nav .btn { white-space: nowrap; }
.nav__link { white-space: nowrap; position: relative; font-size: .875rem; font-weight: 600; color: var(--slate-700); transition: color .2s; }
.nav__link::after {
  content: ""; position: absolute; left: 0; bottom: -4px; height: 2px; width: 0;
  background: var(--gradient-divider); transition: width .3s;
}
.nav__link:hover { color: var(--fbr-blue); }
.nav__link:hover::after { width: 100%; }

.nav-toggle {
  display: inline-flex; align-items: center; justify-content: center; padding: .5rem;
  min-width: 44px; min-height: 44px;
  color: var(--slate-900); font-size: 1.5rem; position: relative; z-index: 60;
  background: none; border: 0; cursor: pointer;
}
.nav-toggle:hover { color: var(--fbr-pink-on-light); }
@media (min-width: 900px) { .nav-toggle { display: none; } }

.mobile-menu {
  position: fixed; inset: 0; z-index: 40; background: var(--slate-950);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2rem;
  padding-top: 5rem; opacity: 0; transform: translateX(100%);
  transition: opacity .3s ease, transform .35s cubic-bezier(.22, 1, .36, 1); pointer-events: none;
}
.mobile-menu.is-open { opacity: 1; transform: none; pointer-events: auto; }
.mobile-menu__link { font-size: 1.5rem; font-weight: 600; color: #fff; transition: color .2s; text-decoration: none; }
.mobile-menu__link:hover { color: var(--fbr-cyan); }

/* The mobile menu is hidden from 900px, where the desktop nav appears. */
@media (min-width: 900px) { .mobile-menu { display: none; } }

body.is-menu-open { overflow: hidden; }

@media (min-width: 900px) {
  .nav { display: flex; }
  .nav-toggle { display: none; }
  .mobile-menu { display: none; }
  .site-header__logo img { height: 45px; }
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 44px;
  padding: .625rem 1.25rem;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font: inherit;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

.btn--primary { background: var(--gradient-cta); color: #fff; }
.btn--primary:hover { color: #fff; filter: brightness(1.08); }

/* Outline button on a dark section; light sections get their own colours below. */
.btn--outline { background: transparent; color: #fff; border-color: var(--fbr-input-border); }
.btn--outline:hover { color: #fff; border-color: var(--fbr-cyan); }

.section--light .btn--outline,
.section--white .btn--outline,
.card .btn--outline {
  color: var(--slate-800);
  border-color: var(--slate-400);
}

.section--light .btn--outline:hover,
.section--white .btn--outline:hover,
.card .btn--outline:hover {
  color: var(--slate-900);
  border-color: var(--slate-700);
}

/* A dark card inside a light section keeps the dark treatment. */
.section--dark .card .btn--outline { color: #fff; border-color: var(--fbr-input-border); }
.upnext__cal .btn--outline { color: #fff; border-color: var(--fbr-input-border); }
.upnext__cal .btn--outline:hover { color: #fff; border-color: var(--fbr-cyan); }

/* ---------- Footer ---------- */

/* Footer: four columns on a light band, then the legal bar. */

.site-footer { background: var(--slate-50); border-top: 1px solid var(--slate-200); padding: 5rem 0 2.5rem; }
.footer__grid { display: grid; gap: 3rem; margin-bottom: 4rem; }
@media (min-width: 768px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .footer__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.footer__brand img.logo { width: 200px; height: auto; margin-bottom: 1.5rem; }
.footer__brand p { color: var(--slate-600); font-size: .875rem; line-height: 1.7; margin-bottom: 1.5rem; }
.footer__brand .support { color: var(--slate-600); font-size: .875rem; }
.footer__brand .support p { margin-bottom: .5rem; font-weight: 500; }
.footer__brand .support img { height: 32px; width: auto; }
.footer__col h3 { color: var(--slate-900); font-size: 1rem; font-weight: 700; margin-bottom: 1.5rem; }
.footer__col ul { display: flex; flex-direction: column; gap: .75rem; font-size: .875rem; list-style: none; margin: 0; padding: 0; }
.footer__col a { color: var(--slate-600); transition: color .2s; display: inline-flex; align-items: center; min-height: 24px; }
.footer__col a:hover { color: var(--fbr-blue); }
.footer__promo { background: #fff; padding: 1.5rem; border-radius: 1rem; border: 1px solid var(--slate-200); box-shadow: 0 1px 2px rgba(0,0,0,.05); transition: box-shadow .3s; }
.footer__promo:hover { box-shadow: 0 8px 18px -8px rgba(0,0,0,.12); }
.footer__promo img { height: 24px; width: auto; margin-bottom: 1rem; }
.footer__promo p { font-size: .75rem; color: var(--slate-600); margin-bottom: 1rem; line-height: 1.5; }
.footer__promo a { font-size: .75rem; font-weight: 700; color: #fff; background: var(--fbr-blue); padding: .5rem 1rem; border-radius: .5rem; display: inline-block; transition: background .2s; }
.footer__promo a:hover { background: var(--fbr-cyan); }
.footer__legal { border-top: 1px solid var(--slate-200); padding-top: 2rem; display: flex; flex-direction: column; align-items: center; gap: 1rem; font-size: .75rem; color: var(--slate-600); }
@media (min-width: 768px) { .footer__legal { flex-direction: row; flex-wrap: wrap; justify-content: space-between; row-gap: 1rem; } }
.footer__legal p { margin: 0; }
.footer__legal .links { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem 1.5rem; }
/* Footer link colours. */
.footer__legal .links a,
.footer__brand .support a { color: var(--slate-600); }

/* Footer links without underline. */
.site-footer a { text-decoration: none; }
/* Legal links keep an underline so they stand out from the copyright line. */
.footer__legal .links a { display: inline-flex; align-items: center; min-height: 24px; text-decoration: underline; }
.footer__legal a:hover, .footer__brand .support a:hover { color: var(--fbr-blue); }

/* ---------- Company details dialog ---------- */

.company-modal { width: min(32rem, calc(100% - 2rem)); max-width: none; max-height: calc(100% - 2rem); margin: auto; padding: 0; border: 0; background: transparent; color: var(--slate-700); }
.company-modal::backdrop { background: rgba(0, 0, 0, .8); }
.company-modal__card { position: relative; display: grid; gap: 1rem; padding: 2rem 1.5rem 1.5rem; border-radius: 1rem; background: #fff; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .5); }
@media (min-width: 640px) { .company-modal__card { padding: 2.5rem 2rem 2rem; } }
/* Stays in view while the dialog scrolls; the negative margins keep it out of the flow. */
.company-modal__close { position: sticky; top: .75rem; z-index: 1; justify-self: end; margin: -1.25rem -.75rem -1.5rem 0; display: inline-flex; width: 2.75rem; height: 2.75rem; align-items: center; justify-content: center; border: 0; border-radius: 9999px; background: #fff; color: var(--slate-600); font-size: 1.25rem; cursor: pointer; }
@media (min-width: 640px) { .company-modal__close { margin: -1.75rem -1.25rem -1rem 0; } }
.company-modal__close:hover { background: var(--slate-100); color: var(--slate-900); }
.company-modal__logo { justify-self: center; width: 12.5rem; height: auto; margin: -1rem 0 .5rem; }
.company-modal__title { margin: 0; color: var(--slate-900); font-size: 1.375rem; font-weight: 800; }
.company-modal__lead { margin: 0; color: var(--slate-600); font-size: .9375rem; line-height: 1.6; }
.company-modal__facts { display: grid; gap: .75rem; margin: 0; }
.company-modal__facts div { display: grid; gap: .125rem; padding-bottom: .75rem; border-bottom: 1px solid var(--slate-200); }
.company-modal__facts dt { color: var(--slate-600); font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.company-modal__facts dd { margin: 0; color: var(--slate-900); font-size: .9375rem; font-weight: 500; overflow-wrap: anywhere; }
.company-modal__facts a, .company-modal__links a { color: var(--fbr-blue); text-decoration: underline; }
.company-modal__facts a { display: inline-flex; align-items: center; min-height: 44px; }
.company-modal__links { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin: 0; font-size: .875rem; }
.company-modal__links a { display: inline-flex; align-items: center; min-height: 44px; }
/* Without script, or without dialog support, the anchor shows the details in place. */
.company-modal:target:not([open]) { position: static; inset: auto; display: block; margin: 2rem auto; }
.company-modal:target:not([open]) .company-modal__close { display: none; }

/* "Add to calendar" dialog: same shell as the company one, three ways stacked. */
.calmodal__event { display: grid; gap: .375rem; padding: 1rem; border-radius: .75rem; background: var(--slate-50); border: 1px solid var(--slate-200); }
.calmodal__event p { display: flex; align-items: flex-start; gap: .5rem; margin: 0; color: var(--slate-700); font-size: .9375rem; }
.calmodal__event i { flex-shrink: 0; margin-top: .2rem; color: var(--fbr-purple); }
.calmodal__event .calmodal__name { color: var(--slate-900); font-weight: 700; }
.calmodal__ways { display: grid; gap: .75rem; margin: 0; padding: 0; list-style: none; }
.calmodal__way { display: grid; gap: .5rem; padding: 1rem; border: 1px solid var(--slate-200); border-radius: .75rem; }
.calmodal__way-title { display: flex; align-items: flex-start; gap: .625rem; margin: 0; color: var(--slate-900); font-weight: 700; }
.calmodal__way-title i { flex-shrink: 0; margin-top: .2rem; color: var(--fbr-purple); }
.calmodal__way-title small { display: block; color: var(--slate-600); font-size: .8125rem; font-weight: 500; }
.calmodal__steps { margin: 0; color: var(--slate-700); font-size: .875rem; line-height: 1.55; }
.calmodal__cta { margin-top: .25rem; }
.calmodal__note { margin: 0; color: var(--slate-600); font-size: .8125rem; }

/* ---------- Shared section variants ---------- */

.section--tight { padding-block: 1.25rem; }
.section--panel { background: var(--fbr-dark-card); border-block: 1px solid var(--fbr-input-border); }
.section--cta { background: var(--fbr-dark-card); border-block: 1px solid var(--fbr-input-border); }

.eyebrow {
  margin: 0 0 .75rem;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fbr-cyan);
}

.section-divider {
  width: 6rem;
  height: 4px;
  margin-bottom: 1.5rem;
  border-radius: var(--radius-pill);
  background: var(--gradient-divider);
}

.btn--lg { min-height: 52px; padding: .875rem 1.75rem; font-size: 1.0625rem; }
.btn--block { display: flex; width: 100%; }

/* ---------- Event hero ---------- */

.ehero {
  position: relative;
  padding-block: 2.5rem 2rem;
  background: var(--fbr-dark-bkg);
  color: var(--slate-100);
}

.ehero__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.75rem; align-items: center; }
.ehero__text { display: flex; flex-direction: column; align-items: flex-start; gap: .625rem; min-width: 0; }

.ehero__title { margin: 0; max-width: 24ch; font-size: 1.625rem; color: #fff; }
.ehero__promise { margin: 0; max-width: 54ch; font-size: 1.0625rem; color: var(--slate-200); }
.ehero__meta { margin: .375rem 0 0; font-weight: 800; color: #fff; }
.ehero__state { margin: 0; font-weight: 600; font-size: .9375rem; color: var(--fbr-cyan); }
.ehero__cta { margin: .75rem 0 0; }
.ehero__note { margin: 0; font-size: .875rem; color: var(--slate-300); }

.ehero__figure { margin: 0; min-width: 0; }

.ehero__figure img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-panel);
  border: 1px solid var(--fbr-input-border);
}

.ehero__figure figcaption {
  margin-top: .5rem;
  font-size: .8125rem;
  color: var(--slate-400);
}

@media (min-width: 900px) {
  .ehero { padding-block: 4rem 3rem; }
  .ehero__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 3rem; }
  .ehero__title { font-size: 2.375rem; }
}

/* ---------- Event hero, RomaniaActive series ---------- */

.ehero--ra { padding-block: 2rem 0; background: #fff; color: var(--slate-700); overflow: clip; }
.ehero--ra .ehero__grid { gap: 2.5rem; }
.ehero--ra .ehero__text { gap: .75rem; }

.ra-lockup {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "logo logo" "bars words";
  align-items: center;
  gap: .875rem 1rem;
  margin: 0 0 .5rem;
  font-family: "Quicksand", "Poppins", system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.05;
  color: var(--ra-blue);
}

.ra-lockup__logo { grid-area: logo; width: 9.5rem; height: auto; }
.ra-lockup__bars { grid-area: bars; width: 2.5rem; height: auto; }
.ra-lockup__words { grid-area: words; display: flex; flex-direction: column; gap: .375rem; min-width: 0; }
.ra-lockup__name { font-size: 1.625rem; }
.ra-lockup__place { font-size: 1.25rem; font-weight: 500; }

.ehero__when {
  margin: .25rem 0 0;
  font-family: "Quicksand", "Poppins", system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.2;
  color: var(--ra-navy);
}
.ehero__when span { display: block; }
.ehero__venue { font-size: 1.125rem; color: var(--ra-blue); }

.ehero--ra .ehero__lead { margin: .5rem 0 0; max-width: 40ch; font-size: 1.125rem; font-weight: 700; color: var(--slate-900); }
.ehero--ra .ehero__promise { max-width: 56ch; color: var(--slate-700); }

.ehero__edition {
  align-self: flex-start;
  margin: 0;
  padding: .3125rem .875rem;
  border-radius: var(--radius-pill);
  background: var(--ra-navy);
  color: #fff;
  font-family: "Quicksand", "Poppins", system-ui, sans-serif;
  font-size: .875rem;
  font-weight: 700;
  letter-spacing: .02em;
}

.ehero__proof { display: flex; align-items: center; gap: .5rem; margin: 0; font-size: .9375rem; font-weight: 600; color: var(--slate-700); }
.ehero__proof::before { content: ""; flex: none; width: .625rem; height: .625rem; border-radius: var(--radius-pill); background: var(--ra-yellow); }

.ehero--ra .ehero__state { color: var(--ra-navy); }
.ehero--ra .ehero__note { color: var(--slate-600); }
.ehero__cta--row { display: flex; flex-wrap: wrap; gap: .75rem; }

.btn--ra { background: var(--ra-red-cta); color: #fff; }
.btn--ra:hover { background: var(--ra-red-dark); color: #fff; }
.btn--ra-outline { background: transparent; color: var(--ra-blue); border: 2px solid var(--ra-blue); }
.btn--ra-outline:hover { background: var(--ra-blue); color: #fff; }

.ehero--ra .ehero__figure { position: relative; margin-left: 1.5rem; }
.ehero--ra .ehero__figure img { border: 0; border-radius: 1.5rem; }

/* Video above, two photos under it; the capsules sit on the video's left edge. */
.ehero__media { display: grid; gap: .75rem; }
.ehero__video { position: relative; }
.ehero__video .vgate { border: 0; border-radius: 1.5rem; }
.ehero__photos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.ehero__photos img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 1rem; }
.ehero__media .ra-bars { z-index: 3; }

/* The three capsules of the RomaniaActive mark, over the photo's edge. */
.ra-bars { position: absolute; left: -1.5rem; bottom: -1.25rem; width: auto; height: 62%; pointer-events: none; }

.ra-bars__red { fill: var(--ra-red); }
.ra-bars__yellow { fill: var(--ra-yellow); }
.ra-bars__blue { fill: var(--ra-blue); }

/* The flag: three equal thirds, the separator the summit's material uses everywhere. */
.ra-flag { height: 6px; background: var(--ra-flag); }
.ehero--ra > .ra-flag { margin-top: 2.5rem; }

/* Narrow phones: a smaller lockup, and the button right after date and venue. */
@media (max-width: 29.99rem) {
  .ehero--ra { padding-top: 1.25rem; }
  .ehero--ra .ehero__text { gap: .5rem; }
  .ehero__edition { font-size: .8125rem; }
  .ra-lockup { gap: .5rem .75rem; margin-bottom: .25rem; }
  .ra-lockup__logo { width: 7rem; }
  .ra-lockup__bars { width: 2rem; }
  .ra-lockup__name { font-size: 1.375rem; }
  .ra-lockup__place { font-size: 1.0625rem; }
  .ehero__when { font-size: 1.25rem; }
  .ehero__venue { font-size: 1rem; }
  .ehero--ra .ehero__cta, .ehero--ra .ehero__note { order: 1; }
  .ehero--ra .ehero__lead, .ehero--ra .ehero__promise, .ehero--ra .ehero__proof, .ehero--ra .ehero__state { order: 2; }
  .ehero--ra .btn--lg { font-size: 1rem; padding-inline: 1.25rem; }
}

@media (min-width: 30rem) {
  .ra-lockup { grid-template-columns: auto auto minmax(0, 1fr); grid-template-areas: "logo bars words"; }
  .ra-lockup__logo { width: 8.5rem; }
}

@media (min-width: 900px) {
  .ehero--ra { padding-block: 3.5rem 0; }
  .ehero--ra .ehero__grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 4.5rem; }
  .ehero--ra .ehero__figure { order: -1; margin-left: 2.5rem; }
  .ra-bars { left: -2.5rem; bottom: -2rem; height: 64%; }
  .ra-lockup__logo { width: 10.5rem; }
  .ra-lockup__bars { width: 3rem; }
  .ra-lockup__name { font-size: 2.25rem; }
  .ra-lockup__place { font-size: 1.5rem; }
  .ehero__when { font-size: 2rem; }
  .ehero__venue { font-size: 1.375rem; }
  .ehero--ra > .ra-flag { margin-top: 3.5rem; }
}

/* ---------- Event hero, RomaniaActive series, upcoming edition ---------- */
/* Full-bleed photo under a blue duotone, the summit's lockup, a large heading and the
   three capsules, as on the campaign's social and print material. */

.rahero {
  --duo: 14 38 92;
  --rahero-accent: var(--ra-yellow);
  position: relative;
  isolation: isolate;
  overflow: clip;
  background: rgb(var(--duo));
  color: #fff;
}

.rahero__photo { position: absolute; inset: 0; z-index: -1; display: block; }
.rahero__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }

/* Duotone: the photo in grey, the tone multiplied over it, then a wash where the text sits. */
.ra-duotone img { filter: grayscale(1) contrast(1.1); }
.ra-duotone::before,
.ra-duotone::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.ra-duotone::before { background: rgb(var(--duo)); mix-blend-mode: multiply; opacity: .85; }
.ra-duotone::after {
  background: linear-gradient(180deg, rgb(var(--duo) / .84) 0%, rgb(var(--duo) / .86) 45%, rgb(var(--duo) / .96) 100%);
}

.rahero__grid { display: grid; padding-block: 2rem 2.5rem; }
.rahero__text { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }

.rahero__heading { display: flex; flex-direction: column; gap: 1rem; margin: 0; }
/* The lockup: white RomaniaActive mark, the capsules in colour, the summit's name as text. */
.rahero__lockup { display: flex; align-items: center; gap: .875rem; }
.rahero__mark { flex: none; width: 7.5rem; height: auto; }
.rahero__lockbars { flex: none; width: auto; height: 3.25rem; }
.rahero__lockbars g { opacity: 1; }
.rahero__summit {
  max-width: 9.5em;
  font-family: "Quicksand", "Poppins", system-ui, sans-serif;
  font-size: 1.3125rem;
  font-weight: 700;
  line-height: 1.1;
}

.ra-eyebrow { font-size: .8125rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.rahero__eyebrow { color: var(--rahero-accent); }

.rahero__title {
  max-width: 18ch;
  font-size: clamp(1.875rem, 1.25rem + 2.6vw, 3.375rem);
  font-weight: 900;
  line-height: 1.04;
  letter-spacing: .01em;
  text-wrap: balance;
}

.rahero__when { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin: 0; padding: 0; list-style: none; font-size: 1rem; font-weight: 600; }
.rahero__when li { display: flex; align-items: center; gap: .5rem; }
.rahero__when i { flex: none; width: 1.25em; color: var(--rahero-accent); text-align: center; }
.rahero__date { font-size: 1.25rem; font-weight: 800; }
.rahero__promise { max-width: 52ch; margin: 0; color: rgb(255 255 255 / .86); }
.rahero__cta { display: flex; flex-wrap: wrap; gap: .75rem; margin: .25rem 0 0; }
.rahero__state { margin: 0; font-weight: 600; color: var(--rahero-accent); }
.rahero__proof { display: flex; align-items: center; gap: .5rem; margin: 0; font-size: .9375rem; font-weight: 600; }
.rahero__proof::before { content: ""; flex: none; width: .625rem; height: .625rem; border-radius: var(--radius-pill); background: var(--ra-yellow); }

.btn--ra-ghost { background: transparent; color: #fff; border: 2px solid rgb(255 255 255 / .9); }
.btn--ra-ghost:hover { background: #fff; color: rgb(var(--duo)); }

/* The capsules: the lockup already carries them on a phone, so the large set starts wider. */
.rahero__bars { display: none; }

@media (max-width: 47.99rem) {
  .rahero__promise { font-size: .9375rem; }
}

@media (min-width: 48rem) {
  .ra-duotone::after {
    background: linear-gradient(90deg, rgb(var(--duo) / .96) 0%, rgb(var(--duo) / .82) 50%, rgb(var(--duo) / .35) 100%);
  }
  .rahero__grid {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 2rem;
    min-height: min(80vh, 44rem);
    padding-block: 2.5rem 0;
  }
  .rahero__text { align-self: center; padding-bottom: 2.5rem; }
  .rahero__lockup { gap: 1.125rem; }
  .rahero__mark { width: 10.125rem; }
  .rahero__lockbars { height: 4.375rem; }
  .rahero__summit { font-size: 1.75rem; }
  .rahero__date { font-size: 1.5rem; }
  .rahero__bars { display: block; align-self: end; width: auto; height: min(30rem, 62vh); }
  .rahero__bars g { opacity: 1; }
  .rahero__bars rect { transform-box: fill-box; transform-origin: 50% 100%; animation: ra-rise .9s cubic-bezier(.2, .7, .2, 1) both; }
  .rahero__bars rect:nth-child(2) { animation-delay: .12s; }
  .rahero__bars rect:nth-child(1) { animation-delay: .24s; }
}

@media (min-width: 64rem) {
  .rahero__grid { gap: 4rem; }
  .rahero__bars { height: min(34rem, 66vh); margin-right: 2rem; }
}

@keyframes ra-rise { from { transform: translateY(100%); } }

@media (prefers-reduced-motion: reduce) {
  .rahero__bars rect { animation: none; }
}

/* ---------- The next summit on the home page ---------- */
/* The summit page's hero, as a card: the duotone room, the lockup, the way in. */
.rateaser {
  --duo: 14 38 92;
  --rahero-accent: var(--ra-yellow);
  position: relative;
  isolation: isolate;
  overflow: clip;
  display: grid;
  margin-bottom: 2.5rem;
  border-radius: 1.25rem;
  background: rgb(var(--duo));
  color: #fff;
  box-shadow: 0 12px 24px -16px rgba(0,0,0,.35);
}
.rateaser__photo { position: absolute; inset: 0; z-index: -1; display: block; }
.rateaser__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.rateaser__body { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; min-width: 0; padding: 1.75rem 1.5rem 2rem; }
/* Scoped past .section--light h3 and a, which would paint the heading dark on the blue. */
.section .rateaser__heading { display: flex; flex-direction: column; align-items: flex-start; gap: .875rem; margin: 0; color: #fff; }
.section .rateaser a.rateaser__title {
  max-width: 22ch;
  color: #fff;
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: .01em;
  text-decoration: none;
  text-wrap: balance;
}
.section .rateaser a.rateaser__title:hover { color: #fff; text-decoration: underline; text-underline-offset: .15em; }
.rateaser__days {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  display: flex;
  align-items: baseline;
  gap: .4rem;
  margin: 0;
  padding: .5rem .9rem;
  border-radius: var(--radius-pill);
  background: #fff;
  color: rgb(var(--duo));
  font-size: .8125rem;
  font-weight: 700;
}
.rateaser__days span { font-size: 1.5rem; font-weight: 900; line-height: 1; color: var(--ra-red-cta); }
.rateaser__bars { display: none; }
.rateaser > .ra-flag { align-self: end; }

@media (max-width: 47.99rem) {
  .rateaser__days { position: static; justify-self: start; margin: 1.5rem 1.25rem 0; }
  .rateaser__body { padding: 1.25rem 1.25rem 2rem; }
  /* A narrower lockup, so the summit's name stays inside the card at 320. */
  .rateaser .rahero__lockup { gap: .625rem; }
  .rateaser .rahero__mark { width: 6rem; }
  .rateaser .rahero__lockbars { height: 2.75rem; }
  .rateaser .rahero__summit { min-width: 0; font-size: 1.0625rem; }
}

@media (min-width: 48rem) {
  .rateaser { grid-template-columns: minmax(0, 1fr) auto; }
  .rateaser__body { padding: 2.5rem 2.5rem 3rem; }
  .rateaser__bars { display: block; align-self: end; width: auto; height: 17rem; margin-right: 2.5rem; }
  .rateaser > .ra-flag { grid-column: 1 / -1; }
}

/* ---------- Organiser bar ---------- */
/* Who organises and who co-organises has to be readable, not inferred from logos. */

.eorg { background: var(--fbr-dark-card); border-block: 1px solid var(--fbr-input-border); }

.eorg__line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .25rem .75rem;
  margin: 0;
  font-size: .9375rem;
}

.eorg__label { color: var(--slate-300); }
.eorg__sep { color: var(--slate-400); }

.ecount__ics {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  min-height: 44px;
  margin-top: .25rem;
  font-size: .875rem;
  font-weight: 600;
  color: var(--fbr-cyan);
}
.ecount__ics:hover { color: #fff; }

.tshare__actions { display: flex; flex-wrap: wrap; gap: .75rem; }

.ticket__agenda { margin: .75rem 0 0; font-weight: 600; }
.ticket__agenda a { display: inline-flex; align-items: center; gap: .375rem; min-height: 44px; }

/* ---------- The ticket, RomaniaActive series ---------- */
/* A white card and a blue stub split by a perforation with two notches, as on the
   summit's invitation. The notches take the colour of the section behind. */

.ra-ticket {
  --notch-bg: #fff;
  position: relative;
  display: grid;
  border-radius: 1.25rem;
  background: #fff;
  box-shadow: 0 1px 2px rgb(15 23 42 / .06), 0 12px 32px -12px rgb(14 38 92 / .25);
  overflow: hidden;
}
.ra-ticket::before { content: ""; position: absolute; inset: 0 0 auto; z-index: 1; height: 6px; background: var(--ra-flag); }

.ra-ticket__main { padding: 2rem 1.5rem 1.75rem; }
.ra-ticket__eyebrow { margin: 0; color: var(--ra-blue); }
.ra-ticket__lead { max-width: 52ch; margin: .75rem 0 0; color: var(--slate-600); }


/* The short colour bar above each fact, in the colours of the flag. */
.ra-mark { display: block; width: 2rem; height: 4px; margin-bottom: .375rem; border-radius: 2px; }
.ra-mark--blue { background: var(--ra-blue); }
.ra-mark--yellow { background: var(--ra-yellow); }
.ra-mark--red { background: var(--ra-red); }

.ra-ticket__stub {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 1.25rem;
  padding: 2rem 1.5rem;
  border-top: 2px dashed rgb(255 255 255 / .45);
  background: var(--ra-blue);
  color: #fff;
}
.ra-ticket__stubtext { margin: 0; font-size: 1.0625rem; font-weight: 600; line-height: 1.45; }

/* The notches, on the perforation line. */
.ra-ticket__stub::before,
.ra-ticket__stub::after {
  content: "";
  position: absolute;
  top: -13px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--notch-bg);
}
.ra-ticket__stub::before { left: -12px; }
.ra-ticket__stub::after { right: -12px; }


@media (min-width: 64rem) {
  .ra-ticket { grid-template-columns: minmax(0, 1fr) 19rem; }
  .ra-ticket__main { padding: 2.75rem 3rem 2.5rem; }
  .ra-ticket__stub { padding: 2.5rem 2rem; border-top: 0; border-left: 2px dashed rgb(255 255 255 / .45); }
  .ra-ticket__stub::before,
  .ra-ticket__stub::after { left: -13px; right: auto; }
  .ra-ticket__stub::before { top: -12px; }
  .ra-ticket__stub::after { top: auto; bottom: -12px; }
}

/* ---------- The venue, RomaniaActive series, upcoming edition ---------- */
/* The hall seen through the three capsules, rising left to right, each ending in a colour
   of the flag, as on the summit's social material. One image, three windows onto it. */

.rvenue { background: var(--slate-100); }
.rvenue__grid { display: grid; gap: 2.5rem; align-items: center; }

.rvenue__windows {
  --win-h: 18rem;
  --win-gap: .75rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--win-gap);
  align-items: end;
  height: var(--win-h);
}
.rvenue__window { position: relative; overflow: hidden; border-radius: 999px; }
.rvenue__window--1 { height: 72%; }
.rvenue__window--2 { height: 86%; }
.rvenue__window--3 { height: 100%; }
.rvenue__window img {
  position: absolute;
  bottom: 0;
  width: calc(300% + 2 * var(--win-gap));
  max-width: none;
  height: var(--win-h);
  object-fit: cover;
}
.rvenue__window--1 img { left: 0; }
.rvenue__window--2 img { left: calc(-100% - var(--win-gap)); }
.rvenue__window--3 img { left: calc(-200% - 2 * var(--win-gap)); }
.rvenue__window::after { content: ""; position: absolute; inset: auto 0 0; height: 18%; }
.rvenue__window--1::after { background: var(--ra-blue); }
.rvenue__window--2::after { background: var(--ra-yellow); }
.rvenue__window--3::after { background: var(--ra-red); }

.rvenue__eyebrow { margin: 0; color: var(--ra-blue); }
.rvenue__title { margin: .5rem 0 0; font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.5rem); font-weight: 900; letter-spacing: .01em; line-height: 1.05; color: var(--slate-900); }
.rvenue__address { display: flex; align-items: center; gap: .5rem; margin: .75rem 0 0; font-weight: 600; color: var(--slate-700); }
.rvenue__address i { color: var(--ra-blue); }
.rvenue__lead { max-width: 56ch; margin: 1rem 0 0; font-size: 1.0625rem; color: var(--slate-700); }

.rvenue__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem 1.5rem; margin: 1.75rem 0 0; padding: 0; list-style: none; }
.rvenue__facts li { display: grid; gap: .25rem; align-content: start; }
.rvenue__facts strong { font-size: 1.0625rem; font-weight: 800; color: var(--slate-900); }
.rvenue__facts span:not(.ra-mark) { font-size: .9375rem; color: var(--slate-600); }

.rvenue__map { margin: 1.75rem 0 0; }
.btn--ra-blue { background: var(--ra-blue); color: #fff; }
.btn--ra-blue:hover { background: var(--ra-navy); color: #fff; }
.rvenue__history { margin: 1rem 0 0; font-size: .875rem; color: var(--slate-600); }

@media (min-width: 48rem) {
  .rvenue__windows { --win-h: 26rem; --win-gap: 1rem; }
}

@media (min-width: 64rem) {
  .rvenue__grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 4rem; }
  .rvenue__windows { --win-h: 32rem; }
}

/* ---------- RomaniaActive series, upcoming edition: principles, last year, price ---------- */

.rprinciples__title,
.rlast__title { margin: 0; font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.5rem); font-weight: 900; letter-spacing: .01em; line-height: 1.05; color: var(--slate-900); }
.rprinciples__lead { max-width: 60ch; margin: .75rem 0 0; font-size: 1.0625rem; color: var(--slate-700); }
.rprinciples__list { display: grid; gap: 1.5rem; margin: 2rem 0 0; padding: 0; list-style: none; }
.rprinciples__list li { display: grid; gap: .5rem; align-content: start; font-weight: 600; color: var(--slate-800); }

/* Last year's edition: the video beside six photographs, on the hero's blue. */
.rlast { padding-bottom: 0; background: rgb(14 38 92); color: #fff; }
.rlast__eyebrow { margin: 0; color: var(--ra-yellow); }
.rlast__title { margin-top: .5rem; color: #fff; }
.rlast__grid { display: grid; gap: 1rem; margin: 2rem 0 3.5rem; }
.rlast__photos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; margin: 0; padding: 0; list-style: none; }
.rlast__photos img { display: block; width: 100%; height: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: .75rem; }

/* The price on the ticket. */
.rprice .ra-ticket { --notch-bg: var(--slate-50); }
.rprice__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem 1rem; margin: .5rem 0 0; }
.rprice__amount { font-size: clamp(2.75rem, 2rem + 3vw, 4rem); font-weight: 900; line-height: 1; color: var(--slate-900); }
.rprice__vat { font-size: .9375rem; font-weight: 600; color: var(--slate-600); }
.rprice__inclabel { margin: 1.5rem 0 0; font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ra-blue); }
.rprice__includes { display: grid; gap: .625rem; margin: .75rem 0 0; padding: 0; list-style: none; }
.rprice__includes li { display: flex; gap: .625rem; color: var(--slate-700); }
.rprice__includes i { flex: none; margin-top: .25rem; color: var(--ra-blue); }
.ra-ticket__stubtitle { margin: 0; font-size: 1.125rem; font-weight: 800; }
.ra-ticket__stub .ra-ticket__stubtext { font-size: .9375rem; font-weight: 500; }
/* Scoped past .section--light a, which would paint the link blue on the blue stub. */
.section .ra-ticket__stub a:not(.btn) { color: #fff; font-weight: 700; text-underline-offset: 3px; }
.ra-ticket__stubtext { overflow-wrap: anywhere; }
.rprice__agenda { display: inline-flex; align-items: center; gap: .375rem; min-height: 44px; }

@media (min-width: 40rem) {
  .rprinciples__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 3rem; }
  .rprice__includes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem 2rem; }
}

@media (min-width: 64rem) {
  .rprinciples__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .rlast__grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: center; gap: 1.5rem; }
}

/* Past speakers on a RomaniaActive page: four a row at most, each inside the flag's ring. */
.faces.faces--ra { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem 1rem; margin-bottom: 2rem; }
.faces--ra .face img {
  width: 7.5rem;
  height: 7.5rem;
  max-width: none;
  padding: 5px;
  border: 0;
  background: conic-gradient(var(--ra-blue) 0 33.333%, var(--ra-yellow) 0 66.666%, var(--ra-red) 0);
}

.face__role { display: block; margin-top: .25rem; font-size: .8125rem; line-height: 1.35; color: var(--ra-yellow); }

@media (min-width: 35rem) {
  .faces.faces--ra { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 48rem) {
  .faces.faces--ra { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .faces--ra .face img { width: 9rem; height: 9rem; }
}

/* ---------- Agenda coming soon: the day as a line, RomaniaActive series ---------- */
/* Four stops on one line in the flag's colours; vertical on a phone, across from 48rem. */

.ragenda__eyebrow { margin: 0; color: var(--ra-blue); }
.ragenda__title { margin: .5rem 0 0; font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.5rem); font-weight: 900; letter-spacing: .01em; line-height: 1.05; color: var(--slate-900); }
.ragenda__lead { max-width: 56ch; margin: .75rem 0 0; font-size: 1.0625rem; color: var(--slate-600); }

.ragenda__line { position: relative; display: grid; gap: 1.75rem; margin: 2.5rem 0 0; padding: 0 0 0 2.25rem; list-style: none; }
.ragenda__line::before { content: ""; position: absolute; top: .5rem; bottom: .5rem; left: .5625rem; width: 4px; border-radius: 2px; background: linear-gradient(var(--ra-blue) 0 33.333%, var(--ra-yellow) 33.333% 66.666%, var(--ra-red) 66.666% 100%); }
.ragenda__stop { position: relative; display: grid; gap: .25rem; }
.ragenda__stop strong { font-size: 1.125rem; font-weight: 800; color: var(--slate-900); }
.ragenda__stop span:not(.ragenda__dot) { font-size: .9375rem; color: var(--slate-600); }
.ragenda__dot { position: absolute; top: .125rem; left: -2.25rem; width: 1.375rem; height: 1.375rem; border: 4px solid #fff; border-radius: 50%; box-shadow: 0 0 0 1px var(--slate-200); }
.ragenda__dot--blue { background: var(--ra-blue); }
.ragenda__dot--yellow { background: var(--ra-yellow); }
.ragenda__dot--red { background: var(--ra-red); }

.ragenda__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; margin-top: 2.5rem; padding: 1.25rem 1.5rem; border-radius: 1rem; background: var(--slate-100); }
.ragenda__foot p { margin: 0; font-weight: 600; color: var(--slate-800); }

@media (min-width: 48rem) {
  .ragenda__line { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; padding: 2.5rem 0 0; }
  .ragenda__line::before { top: .5625rem; bottom: auto; left: 0; right: 0; width: auto; height: 4px; background: var(--ra-flag); }
  .ragenda__dot { top: -2.5rem; left: 0; }
}

/* Last year's lead photograph. */
.rlast__lead img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }

/* Films of the past editions, two across from 48rem. */
.rvideos__eyebrow { margin: 0; color: var(--ra-blue); }
.rvideos__title { margin: .5rem 0 0; font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.5rem); font-weight: 900; letter-spacing: .01em; line-height: 1.05; color: var(--slate-900); }
.rvideos__list { display: grid; gap: 1.5rem; margin: 2rem 0 0; padding: 0; list-style: none; }
.rvideos__item .vgate { border-radius: 1.25rem; }
.rvideos__caption { display: flex; align-items: center; gap: .5rem; margin: .75rem 0 0; font-weight: 800; color: var(--slate-900); }
.rvideos__caption::before { content: ""; width: 2rem; height: 4px; border-radius: 2px; background: var(--ra-flag); }

@media (min-width: 48rem) {
  .rvideos__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; }
}

/* Last year's photographs open large. */
.rlast__photo { display: block; height: 100%; border-radius: .75rem; overflow: hidden; }
.rlast__photo img { transition: transform .3s; }
.rlast__photo:hover img { transform: scale(1.04); }
.rlast__more { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; margin: 0; padding: 0; list-style: none; }
.rlast__more img { display: block; width: 100%; height: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: .75rem; }

@media (min-width: 48rem) {
  .rlast__more { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 64rem) {
  .rlast__more { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  .rlast__photo img { transition: none; }
}

.lightbox { width: min(72rem, calc(100% - 2rem)); max-width: none; max-height: calc(100% - 2rem); margin: auto; padding: 0; border: 0; background: transparent; overflow: visible; }
.lightbox::backdrop { background: rgb(5 12 30 / .92); }
.lightbox__img { display: block; width: 100%; max-height: calc(100vh - 7rem); object-fit: contain; border-radius: .75rem; }
.lightbox__count { margin: .75rem 0 0; text-align: center; font-weight: 600; color: #fff; }
.lightbox__btn {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: var(--slate-900);
  font-size: 1.125rem;
  cursor: pointer;
}
.lightbox__btn:hover { background: var(--ra-yellow); }
.lightbox__btn--close { top: -1.25rem; right: -.5rem; }
.lightbox__btn--prev,
.lightbox__btn--next { top: calc(50% - 2.25rem); }
.lightbox__btn--prev { left: .5rem; }
.lightbox__btn--next { right: .5rem; }

/* ---------- Organisers with their logos, on a themed series ---------- */

.eorgs { padding-block: 3rem 1.75rem; }
.eorgs__title {
  margin: 0 0 1rem;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ra-navy);
}
.section--white .eorgs__title, .section--light .eorgs__title { color: var(--ra-navy); }

/* Organisers and partners share one light-grey band under the hero. */
.section--light.eorgs, .section--light.epartners--band { background: var(--slate-100); }

/* Three organisers a row at every width, each centred in its third. */
.eorgs__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: center; margin: 0; padding: .75rem 0; list-style: none; }
.eorgs__item { display: flex; align-items: center; justify-content: center; min-width: 0; padding-inline: .75rem; }
.eorgs__item + .eorgs__item { border-left: 1px solid var(--slate-200); }
.eorgs__logo { display: flex; align-items: center; min-height: 44px; }
.eorgs__logo img { width: auto; max-width: 100%; height: 48px; object-fit: contain; }
.eorgs__logo--text { font-weight: 800; font-size: 1.25rem; color: var(--slate-900); }

@media (min-width: 640px) {
  .eorgs__item { padding-inline: 2rem; }
  .eorgs__logo img { max-width: min(100%, 14rem); height: 64px; }
}

/* ---------- The exchange: what you arrive with, what you leave with ---------- */

.exchange { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; gap: 1rem; }

.exchange__row {
  display: grid;
  /* minmax(0, 1fr) and not 1fr: a track's automatic minimum is its content, and a long
     unbroken word would push the column past the screen and drag the page with it. */
  grid-template-columns: minmax(0, 1fr);
  gap: .75rem;
  padding: 1.25rem;
  border: 1px solid var(--fbr-input-border);
  border-radius: var(--radius-card);
  background: var(--fbr-dark-card);
}

.exchange__cell { min-width: 0; }
.exchange__cell p { margin: 0; }

.exchange__label {
  display: block;
  margin-bottom: .25rem;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.exchange__cell--from .exchange__label { color: var(--slate-400); }
.exchange__cell--from p { color: var(--slate-300); }
.exchange__cell--to .exchange__label { color: var(--fbr-cyan); }
.exchange__cell--to p { color: #fff; font-weight: 500; }

.exchange__note { max-width: 60ch; color: var(--slate-300); font-size: .9375rem; }

@media (min-width: 768px) {
  .exchange__row { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 2rem; align-items: center; }
  /* The divider only makes sense once the cells sit side by side. */
  .exchange__cell--to { border-left: 1px solid var(--fbr-input-border); padding-left: 2rem; }
}

/* ---------- Who it is for ---------- */

.audience { margin: 0 0 1.5rem; padding: 0; list-style: none; display: grid; gap: .75rem; }

.audience li {
  position: relative;
  padding-left: 1.75rem;
  color: var(--slate-200);
}

.audience li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .55em;
  width: .625rem;
  height: .625rem;
  border-radius: var(--radius-pill);
  background: var(--gradient-divider);
}

.audience__exclude {
  max-width: 60ch;
  padding-top: 1rem;
  border-top: 1px solid var(--fbr-input-border);
  font-weight: 600;
  color: #fff;
}

/* ---------- Venue ---------- */

.evenue__text { max-width: 60ch; font-size: 1.0625rem; }
.evenue__history { max-width: 60ch; color: var(--slate-300); font-size: .9375rem; }

/* ---------- Past editions ---------- */

.eproof__lead { max-width: 60ch; color: var(--slate-200); }

.editions {
  list-style: none;
  margin: 1.5rem 0;
  padding: 0;
  display: grid;
  gap: .75rem;
}

.edition {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .25rem 1rem;
  padding: .875rem 1.125rem;
  border: 1px solid var(--fbr-input-border);
  border-radius: var(--radius-card);
}

.edition__year { font-weight: 800; color: #fff; font-size: 1.125rem; min-width: 3.5rem; }
.edition__count { font-weight: 600; color: var(--fbr-cyan); }
.edition__venue { color: var(--slate-300); font-size: .9375rem; }

.eproof__total { font-size: 1.25rem; font-weight: 800; color: #fff; }
.eproof__note { max-width: 62ch; color: var(--slate-300); }
.eproof__topics { max-width: 62ch; color: var(--slate-200); }

.speakers-past { margin-bottom: 1.25rem; }
.speakers-past__label { margin-bottom: .25rem; font-size: .8125rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--fbr-cyan); }
.speakers-past p { max-width: 70ch; color: var(--slate-200); margin: 0; }

@media (min-width: 640px) {
  .editions { grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
  .edition { flex-direction: column; }
}

/* ---------- FAQ ---------- */


/* ---------- Interest form ---------- */

.einterest__lead { max-width: 60ch; font-size: 1.0625rem; }
/* A long email address breaks rather than widening the page. */
.einterest__lead,
.ticket__notetext { overflow-wrap: anywhere; }

.iform { margin-top: 1.5rem; }

.iform__row { display: grid; gap: 1rem; margin-bottom: 1rem; }

.iform__field { display: flex; flex-direction: column; gap: .375rem; min-width: 0; }
.iform__field label { font-weight: 600; font-size: .9375rem; }

.iform__field input {
  min-height: 48px;
  padding: .625rem .875rem;
  font: inherit;
  color: #fff;
  background: var(--fbr-dark-bkg);
  border: 1px solid var(--fbr-input-border);
  border-radius: .5rem;
}

.iform__field input::placeholder { color: var(--slate-400); }

.iform__check { display: flex; align-items: flex-start; gap: .625rem; margin-bottom: .5rem; }
.iform__check input { width: 24px; height: 24px; margin-top: .125rem; flex: none; }
.iform__check label { font-size: .9375rem; color: var(--slate-200); }

.iform__withdraw { font-size: .8125rem; color: var(--slate-300); }

.iform__extra {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.iform__submit { margin: 1.25rem 0 .5rem; }
.iform__note { font-size: .8125rem; color: var(--slate-300); }

@media (min-width: 640px) {
  .iform__row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .iform__submit .btn { width: auto; display: inline-flex; }
}

/* ---------- Closing ---------- */

.eclosing p { max-width: 60ch; }

/* ---------- Form alert ---------- */

.formalert {
  margin-bottom: 1.5rem;
  padding: 1rem 1.25rem;
  border: 2px solid var(--fbr-pink-cta);
  border-radius: var(--radius-card);
  background: rgba(234, 0, 65, .12);
}

.formalert__title { margin: 0 0 .25rem; font-weight: 800; color: #fff; }
.formalert__intro { margin: 0 0 .5rem; color: var(--slate-100); }
.formalert__list { margin: 0; padding-left: 1.25rem; }
.formalert__list li { color: var(--slate-100); }

/* Each item links to its field, so it gets the 24px target size. */
.formalert__list a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  color: #fff;
}

.iform__field [aria-invalid="true"] {
  border-width: 2px;
  border-color: var(--fbr-pink-cta);
  box-shadow: 0 0 0 3px rgba(234, 0, 65, .22);
}

.iform__field select {
  min-height: 48px;
  padding: .625rem .875rem;
  font: inherit;
  color: #fff;
  background: var(--fbr-dark-bkg);
  border: 1px solid var(--fbr-input-border);
  border-radius: .5rem;
}

.thanks__lead { font-size: 1.125rem; }
.thanks__event { color: var(--fbr-cyan); }

/* ---------- Legal documents ---------- */

.legal__lead { font-size: 1.0625rem; color: var(--slate-200); }

.legal__section { margin-top: 2.5rem; }
.legal__section:first-of-type { margin-top: 1.5rem; }
.legal__section h2 { font-size: 1.25rem; }
.legal__section p { max-width: 70ch; color: var(--slate-100); }

/* A table wider than the screen scrolls inside its own box rather than dragging the
   page with it. The wrapper is focusable so the scroll is reachable from a keyboard. */
.legal__tablewrap {
  overflow-x: auto;
  margin: 1rem 0 1.5rem;
  border: 1px solid var(--fbr-input-border);
  border-radius: var(--radius-card);
}

.legal__table {
  width: 100%;
  border-collapse: collapse;
  font-size: .875rem;
}

.legal__table th,
.legal__table td {
  padding: .625rem .875rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--fbr-input-border);
}

.legal__table th {
  font-weight: 700;
  color: #fff;
  background: var(--fbr-dark-card);
  white-space: nowrap;
}

.legal__table td { color: var(--slate-100); min-width: 10rem; }
.legal__table tr:last-child td { border-bottom: 0; }

@media (min-width: 768px) {
  .legal__section h2 { font-size: 1.5rem; }
}

/* ---------- Cookie choice ---------- */

/* Cookie choice: a white card at the bottom, three buttons of equal weight. */
.cookie {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 200;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding: 1rem;
  opacity: 0;
  transform: translateY(120%);
  transition: opacity .3s ease, transform .4s cubic-bezier(.22, 1, .36, 1);
  pointer-events: none;
}

@media (min-width: 768px) { .cookie { padding: 1.5rem; align-items: center; } }

.cookie.is-open { opacity: 1; transform: none; pointer-events: auto; }

.cookie__inner {
  width: 100%;
  max-width: 56rem;
  padding: 1.5rem;
  background: #fff;
  border: 1px solid var(--slate-100);
  border-radius: 1rem;
  box-shadow: 0 8px 30px rgba(0, 0, 0, .12);
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
}

@media (min-width: 768px) { .cookie__inner { padding: 2rem; } }

.cookie__row { display: flex; gap: 1rem; align-items: flex-start; }
.cookie__row > div { flex: 1 1 auto; min-width: 0; }
@media (min-width: 768px) { .cookie__row { gap: 1.5rem; } }

.cookie__icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  font-size: 1.5rem;
  color: var(--fbr-blue);
  background: rgba(80, 218, 255, .2);
  border-radius: 50%;
}

@media (min-width: 768px) { .cookie__icon { width: 3.5rem; height: 3.5rem; } }

.cookie__title { margin: 0; font-size: 1.25rem; color: var(--slate-900); }
.cookie__text { margin: .5rem 0 0; font-size: .875rem; line-height: 1.6; color: var(--slate-600); }

.cookie__policy { margin: .75rem 0 0; font-size: .875rem; }
.cookie__policy a { display: inline-flex; align-items: center; min-height: 24px; color: var(--fbr-blue); text-decoration: underline; }

/* Three buttons, and they must read as three of the same thing. Column on a phone, row
   from 640px, each taking an equal share so none of them is the obvious one. */
.cookie__actions {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  margin-top: 1.5rem;
}

@media (min-width: 640px) { .cookie__actions { flex-direction: row; } }

.cookie__btn {
  flex: 1 1 0;
  justify-content: center;
  padding: .875rem 1.5rem;
  font-size: .875rem;
  font-weight: 700;
  white-space: nowrap;
  color: var(--slate-800);
  background: #fff;
  border: 1px solid var(--slate-300);
  border-radius: 9999px;
}

.cookie__btn:hover { color: var(--slate-900); background: var(--slate-50); border-color: var(--slate-500); }

.cookie__cat { margin-top: 1.25rem; }

.cookie__toggle {
  display: flex;
  gap: .625rem;
  align-items: center;
  cursor: pointer;
}

.cookie__toggle input { width: 24px; height: 24px; flex: none; accent-color: var(--fbr-pink-cta); }
.cookie__catname { font-weight: 700; color: var(--slate-900); }
.cookie__catdesc { margin: .25rem 0 0; font-size: .875rem; color: var(--slate-600); }


/* The way back to the choice, in every footer. A button and not a link, because without
   JavaScript there is nothing for it to open. */
.footer__legal-btn {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0;
  font: inherit;
  font-size: .75rem;
  color: var(--slate-600);
  background: none;
  border: 0;
  text-decoration: underline;
  cursor: pointer;
}
.footer__legal-btn:hover { color: var(--fbr-blue); }

/* ---------- Agenda ---------- */

.agenda { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }

.agenda__slot {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .25rem;
  padding: 1rem 1.125rem;
  border: 1px solid var(--fbr-input-border);
  border-radius: var(--radius-card);
}

.agenda__time { margin: 0; font-weight: 800; color: var(--fbr-cyan); font-size: .9375rem; }
.agenda__body { min-width: 0; }
.agenda__title { margin: 0; font-weight: 600; color: #fff; }
.agenda__who { margin: .125rem 0 0; font-size: .9375rem; color: var(--slate-300); }

@media (min-width: 640px) {
  .agenda__slot { grid-template-columns: 8.5rem minmax(0, 1fr); gap: 1.25rem; align-items: baseline; }
}

/* ---------- Agenda: typed slots ---------- */
/* Talks and panels are cards with a coloured edge; pauses are lighter rows. */

.agenda-sum { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.75rem; }
.eagenda__intro { max-width: 62ch; }

.section--white .agenda__slot.agenda__slot--talk { border-left: 4px solid var(--fbr-blue); }
.section--white .agenda__slot.agenda__slot--panel { border-left: 4px solid var(--fbr-purple); }

.section--white .agenda__slot.agenda__slot--break,
.section--white .agenda__slot.agenda__slot--lunch { background: var(--slate-50); border-style: dashed; }
.section--white .agenda__slot.agenda__slot--lunch { background: #fff8e6; border-color: #f0d68a; }
.section--white .agenda__slot.agenda__slot--logistic { background: transparent; border-color: transparent; padding-block: .375rem; }

.agenda__badge {
  display: inline-block;
  margin: 0 0 .375rem;
  padding: .125rem .625rem;
  border-radius: var(--radius-pill);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.agenda__badge--talk { background: #e3effa; color: #00508f; }
.agenda__badge--panel { background: #f2e7fa; color: var(--fbr-purple); }

.eagenda h3.agenda__title { margin: 0; font-size: 1.0625rem; font-weight: 700; }
.agenda__title--pause { display: flex; align-items: center; gap: .5rem; }
.agenda__title--pause i { color: var(--slate-500); }
.section--white .agenda__slot--lunch .agenda__title--pause i { color: var(--fbr-orange-on-light); }
.section--white .agenda__slot--logistic .agenda__title { font-weight: 600; color: var(--slate-700); }

.agenda__text { margin: .25rem 0 0; font-size: .9375rem; color: var(--slate-600); }

.agenda__questions { list-style: disc; margin: .5rem 0 0; padding-left: 1.25rem; font-size: .9375rem; color: var(--slate-700); }
.agenda__questions li + li { margin-top: .25rem; }

.agenda__rolelabel {
  margin: .875rem 0 .375rem;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--slate-600);
}

.agenda__people { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; margin-top: .625rem; }
.agenda__rolelabel + .agenda__people { margin-top: 0; }
.aperson { display: flex; align-items: center; gap: .625rem; min-width: 0; }

.aperson__photo {
  flex: none;
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: var(--radius-pill);
  border: 2px solid var(--slate-200);
}
.aperson__photo--none { display: flex; align-items: center; justify-content: center; background: var(--slate-100); color: var(--slate-400); }
.aperson__text { min-width: 0; }
.aperson__name { display: block; font-size: .9375rem; font-weight: 700; line-height: 1.3; color: var(--slate-900); }
.aperson__role { display: block; font-size: .8125rem; line-height: 1.35; color: var(--slate-600); }

/* ---------- Speakers ---------- */

/* Three speakers per row at most, so each line stays readable. */
.speakers {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.5rem 1rem;
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 30rem) {
  .speakers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 48rem) {
  .speakers { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.speaker { min-width: 0; text-align: center; }

.speaker__photo {
  width: 100%;
  max-width: 160px;
  aspect-ratio: 1;
  margin: 0 auto .625rem;
  object-fit: cover;
  border-radius: var(--radius-pill);
  border: 2px solid var(--fbr-input-border);
}

.speaker__photo--none { display: block; background: var(--fbr-dark-bkg); }
.speaker__name { margin: 0; font-weight: 700; color: #fff; font-size: .9375rem; }
.speaker__role { margin: .125rem 0 0; font-size: .8125rem; color: var(--slate-300); }

.speaker__bio { margin-top: .5rem; text-align: left; font-size: .875rem; }
.speaker__bio summary { display: flex; align-items: center; justify-content: center; min-height: 44px; font-weight: 600; cursor: pointer; color: var(--fbr-blue); }
.speaker__bio p { margin: .25rem 0 0; color: var(--slate-700); }

/* ---------- Gallery ---------- */

.gallery {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}

/* An edition's films, above its photographs and wider than a tile. */
.gallery__videos {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  margin-bottom: 1rem;
}

.gallery__photo {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-card);
  border: 1px solid var(--fbr-input-border);
}

.gallery__video {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: .5rem;
  padding: 1.25rem;
  aspect-ratio: 4 / 3;
  background: var(--fbr-dark-card);
  border: 1px solid var(--fbr-input-border);
  border-radius: var(--radius-card);
}

.gallery__videotitle { margin: 0; font-weight: 700; color: #fff; }
.gallery__videotext { margin: 0; font-size: .875rem; color: var(--slate-200); }

/* ---------- Light sections ---------- */
/* The page is dark, so a light section has to state its own text colours; inheriting
   would leave slate-100 on white. */

.section--light { background: var(--slate-50); color: var(--slate-700); }
.section--white { background: #fff; color: var(--slate-700); }
.section--dark  { background: var(--fbr-dark-bkg); color: var(--slate-100); }

.section--light h1, .section--light h2, .section--light h3,
.section--white h1, .section--white h2, .section--white h3 { color: var(--slate-900); }

.section--light a:not(.btn), .section--white a:not(.btn) { color: var(--fbr-blue); }
.section--light a:not(.btn):hover, .section--white a:not(.btn):hover { color: var(--fbr-purple); }

.section--light .eyebrow, .section--white .eyebrow { color: var(--fbr-pink-on-light); }

/* ---------- Bits the sections are built from ---------- */

.gradient-text {
  background: var(--gradient-brand);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 32px;
  padding: .25rem .875rem;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-pill);
  background: #fff;
  font-size: .8125rem;
  font-weight: 600;
  color: var(--slate-700);
}
.chip__dot { width: .5rem; height: .5rem; border-radius: var(--radius-pill); background: var(--fbr-pink-on-light); }

.section--dark .chip { background: var(--fbr-dark-card); border-color: var(--fbr-input-border); color: var(--slate-100); }
.section--dark .chip__dot { background: var(--fbr-cyan); }

/* Numbers that carry the argument. */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
  gap: 1px;
  margin: 2rem 0;
  background: var(--fbr-input-border);
  border: 1px solid var(--fbr-input-border);
  border-radius: var(--radius-card);
  overflow: hidden;
}

.stat { padding: 1.25rem 1rem; text-align: center; background: var(--fbr-dark-card); }
.stat__label { display: block; font-size: .6875rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--slate-300); }
.stat__value { display: block; margin-top: .25rem; font-size: 1.875rem; font-weight: 900; color: #fff; line-height: 1.1; }

.section--light .stats, .section--white .stats { background: var(--slate-200); border-color: var(--slate-200); }
.section--light .stat, .section--white .stat { background: #fff; }
.section--light .stat__label, .section--white .stat__label { color: var(--slate-600); }
.section--light .stat__value, .section--white .stat__value { color: var(--slate-900); }

/* A card, which is what most grids on this site are made of. */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: 1.25rem;
}

.card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 1.5rem;
  border: 1px solid var(--fbr-input-border);
  border-radius: var(--radius-card);
  background: var(--fbr-dark-card);
}

.card__title { margin: 0 0 .375rem; font-size: 1.0625rem; font-weight: 700; color: #fff; }
.card__text { margin: 0; font-size: .9375rem; color: var(--slate-200); }

.section--light .card, .section--white .card { background: #fff; border-color: var(--slate-200); box-shadow: 0 1px 2px rgba(15, 23, 42, .04); }
.section--light .card__title, .section--white .card__title { color: var(--slate-900); }
.section--light .card__text, .section--white .card__text { color: var(--slate-600); }

/* A sentence that carries more weight than the paragraph around it. */
.pullquote {
  margin: 1.5rem 0 0;
  padding: .875rem 1.125rem;
  border-left: 4px solid var(--fbr-pink-on-light);
  border-radius: 0 .5rem .5rem 0;
  background: #fff;
  font-weight: 700;
  color: var(--slate-900);
}
.section--dark .pullquote { background: var(--fbr-dark-card); border-left-color: var(--fbr-cyan); color: #fff; }

.lead { max-width: 50rem; }

/* ---------- Home hero ---------- */

.hero { padding-block: 3rem 2.5rem; text-align: left; }
.hero__inner { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; }
.hero__title { margin: 0; max-width: 24ch; font-size: 1.625rem; }
.hero .lead { margin: 0; color: var(--slate-600); }
.hero__cta { display: flex; flex-wrap: wrap; gap: .75rem; margin: .5rem 0 0; }

@media (min-width: 768px) {
  .hero { padding-block: 5rem 4rem; }
  .hero__title { font-size: 2.25rem; }
}

@media (min-width: 1100px) {
  .hero__title { font-size: 2.75rem; }
}

/* ---------- Event cards ---------- */

.card__eyebrow {
  margin: 0 0 .375rem;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fbr-pink-on-light);
}
.section--dark .card__eyebrow { color: var(--fbr-cyan); }

.card__title a { color: inherit; text-decoration: none; }
.card__title a:hover { text-decoration: underline; }

.card__meta { margin: 0 0 .5rem; font-size: .9375rem; font-weight: 600; color: var(--slate-600); }
.section--dark .card__meta { color: var(--slate-300); }

.card__foot { margin: auto 0 0; padding-top: 1rem; }

/* ---------- Editions as a list ---------- */

.editions--list { grid-template-columns: minmax(0, 1fr); }

.editions--list .edition {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .25rem 1rem;
}

.edition__body { display: flex; flex-direction: column; min-width: 0; flex: 1 1 14rem; }
.edition__body a { font-weight: 700; text-decoration: none; }
.edition__body a:hover { text-decoration: underline; }

/* Edition list colours on both light section variants. */
.section--light .edition,
.section--white .edition { border-color: var(--slate-200); }

.section--light .edition__year,
.section--white .edition__year { color: var(--slate-900); }

.section--light .edition__count,
.section--white .edition__count { color: var(--fbr-pink-on-light); }

.section--light .edition__venue,
.section--white .edition__venue,
.section--light .edition__when,
.section--white .edition__when { color: var(--slate-500); }

.edition__when { font-size: .9375rem; color: var(--slate-300); }

/* ---------- More buttons ---------- */

.btn--dark-outline { background: transparent; color: var(--slate-800); border-color: var(--slate-300); }
.btn--dark-outline:hover { color: var(--slate-900); border-color: var(--slate-900); }

.btn--slate { background: var(--slate-800); color: #fff; border-color: var(--slate-800); }
.btn--slate:hover { background: var(--slate-900); color: #fff; border-color: var(--slate-900); }

.btn--sm { min-height: 40px; padding: .4375rem .875rem; font-size: .875rem; }

/* ---------- Hero with pictures ---------- */

.hero__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; align-items: center; }
.hero__text { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; min-width: 0; }
.hero__proof { margin: 0; color: var(--slate-600); font-size: .875rem; font-weight: 600; }

.hero__shots {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .625rem;
  min-width: 0;
}

.hero__shots img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-card);
}

/* The four tiles step out of line, so the block reads as photographs rather than a table. */
.hero__shots img:nth-child(2) { margin-top: 1.5rem; }
.hero__shots img:nth-child(3) { margin-top: -1.5rem; }

@media (min-width: 900px) {
  .hero__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 3rem; }
}

/* Home hero on the FBR violet: the mission on the left, the four photographs on the right,
   the gradient band underneath. */
.hero--duo {
  position: relative;
  overflow: clip;
  padding-block: 2.5rem 0;
  background: rgb(31 3 59);
  color: #fff;
}
.hero--duo .hero__grid { padding-bottom: 2.5rem; }
.hero--duo .hero__title { max-width: 20ch; color: #fff; font-size: clamp(2rem, 1.3rem + 2.4vw, 3.25rem); font-weight: 900; line-height: 1.06; letter-spacing: .01em; text-wrap: balance; }
.hero--duo .lead { max-width: 46ch; color: rgb(255 255 255 / .86); }
.hero--duo .hero__proof { color: rgb(255 255 255 / .78); }
.hero--duo .chip { background: rgb(255 255 255 / .08); border-color: rgb(255 255 255 / .22); color: #fff; }
.hero--duo .chip__dot { background: var(--fbr-cyan); }
.hero--duo .btn--ra-ghost:hover { color: rgb(31 3 59); }

.hero__band { height: .375rem; background: var(--gradient-divider); }

@media (min-width: 900px) {
  .hero--duo { padding-top: 3.5rem; }
  .hero--duo .hero__grid { padding-bottom: 3.5rem; }
}

/* ---------- Stats on a dark band ---------- */

.stats--bare {
  margin: 0;
  background: none;
  border: 0;
  border-radius: 0;
  gap: 1rem;
}

.stats--bare .stat { background: none; padding: .5rem; }
.stats--bare .stat__value { font-size: 2.25rem; }
.stats--bare .stat__label { margin-top: .125rem; }
.stat__value + .stat__label { display: block; }

/* ---------- The featured event ---------- */

.feature {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-panel);
  background: #fff;
  box-shadow: 0 10px 30px -18px rgba(15, 23, 42, .35);
}

.feature__image { width: 100%; height: 100%; min-height: 220px; object-fit: cover; }
.feature__body { display: flex; flex-direction: column; gap: .375rem; padding: 1.75rem; min-width: 0; }
.feature__title { margin: 0; font-size: 1.5rem; }
.feature__title a { color: var(--slate-900); text-decoration: none; }
.feature__title a:hover { text-decoration: underline; }
.feature__meta { margin: 0; font-weight: 700; color: var(--slate-700); }
.feature__state { margin: 0; color: var(--fbr-pink-on-light); font-weight: 600; font-size: .9375rem; }
.feature__cta { display: flex; flex-wrap: wrap; gap: .625rem; margin: .875rem 0 0; }

@media (min-width: 768px) {
  .feature { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .feature__body { padding: 2.25rem; }
  .feature__title { font-size: 1.875rem; }
}

/* ---------- What a day looks like ---------- */

.daygrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: 1rem;
  margin-top: 1.5rem;
}

.daygrid__video {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: .5rem;
  padding: 1.5rem;
  aspect-ratio: 4 / 3;
  background: var(--fbr-dark-card);
  border: 1px solid var(--fbr-input-border);
  border-radius: var(--radius-card);
}

.daygrid__shot { display: block; min-width: 0; }

.daygrid__shot img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-card);
  border: 1px solid var(--fbr-input-border);
  transition: transform .3s;
}
.daygrid__shot:hover img { transform: scale(1.02); }

@media (min-width: 768px) {
  .daygrid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .daygrid__video { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
}

/* ---------- The faces ---------- */

.faces {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 7rem), 1fr));
  gap: 1.25rem .75rem;
}

.face { min-width: 0; text-align: center; }

.face img {
  width: 100%;
  max-width: 112px;
  aspect-ratio: 1;
  margin: 0 auto .5rem;
  object-fit: cover;
  border-radius: var(--radius-pill);
  border: 2px solid var(--slate-200);
}

.face__name { display: block; font-size: .8125rem; font-weight: 600; color: var(--slate-700); line-height: 1.3; }

/* ---------- Partner logos ---------- */

/* Four across at most, for the same reason. */
.logos {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
  align-items: center;
}

@media (min-width: 35rem) {
  .logos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 48rem) {
  .logos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Scoped to the logo wall. */
.logos .logo {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: .875rem;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-card);
  background: #fff;
}

.logos .logo img {
  width: auto;
  max-width: 100%;
  height: 48px;
  object-fit: contain;
  filter: grayscale(1);
  opacity: .78;
  transition: filter .3s, opacity .3s;
}
.logos .logo:hover img { filter: none; opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .daygrid__shot img, .logos .logo img { transition: none; }
}

/* The band under a themed hero: logos in colour, four across from 48rem. */
.epartners--band { padding-block: 1.75rem 3.5rem; }
.epartners--band .logos { margin-top: 0; }

/* Two sizes for partners, never labelled: four large logos a row, then up to five
   smaller ones, centred. */
/* The large row: three across, with room between them; the logos keep their size. */
.logos.logos--lg { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
.logos--lg .logo { padding: 1.25rem 1rem; }
.logos--lg .logo img { height: 64px; }
.logos.logos--sm {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .75rem;
  margin-top: 1rem;
}
.logos--sm .logo { flex: 0 1 calc((100% - 1.5rem) / 3); padding: .75rem; }
.logos--lg .logo img { max-width: 100%; }

/* On a phone three large logos a row come out smaller than the small row: one a row keeps
   the difference in size. */
@media (max-width: 34.99rem) {
  .logos.logos--lg { grid-template-columns: minmax(0, 1fr); }
  .logos--lg .logo img { height: 56px; }
}
.logos--sm .logo img { height: 32px; }
/* The link, not the logo, is the touch target: 44px high even when the logo is 32. */
.logos--sm .logo a { display: flex; align-items: center; justify-content: center; min-height: 44px; }


@media (min-width: 48rem) {
  .logos.logos--lg { gap: 1.5rem; }
  .logos--lg .logo img { height: 80px; }
  /* The smaller row is laid out as if it held four: each logo a quarter wide, centred. */
  .logos.logos--sm { gap: 1.5rem; margin-top: 1.5rem; }
  .logos--sm .logo { flex-basis: calc((100% - 4.5rem) / 4); }
  .logos--sm .logo img { height: 40px; }
}
.logos--color .logo img { filter: none; opacity: 1; }
.epartners__borrowed { margin: 0 0 1rem; font-size: .875rem; color: var(--slate-600); }

/* ---------- Faces on a dark band ---------- */

.faces--dark { margin-top: 1rem; }
.faces--dark .face img { border-color: var(--fbr-input-border); }
.faces--dark .face__name { color: var(--slate-200); }

.eproof__facetitle {
  margin: 2rem 0 0;
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--fbr-cyan);
}

/* ---------- FAQ as separated blocks ---------- */
/* A definition list ran the questions and answers together into a wall. */

/* FAQ accordion. Without scripts every answer stays open. */
.faq__list {
  margin: 2rem 0 0;
  padding: 1.5rem;
  background: #fff;
  border: 1px solid var(--slate-200);
  border-radius: 1.5rem;
  box-shadow: 0 20px 40px -20px rgba(148, 163, 184, .5);
}

@media (min-width: 768px) { .faq__list { padding: 2.5rem; } }

.faq__item { border-bottom: 1px solid var(--slate-100); }
.faq__item:last-child { border-bottom: 0; }

/* The question is inside an h3 for the outline; reset so it does not look like one. */
.faq__heading { margin: 0; font-weight: inherit; line-height: inherit; font-size: inherit; }

.faq__q {
  width: 100%;
  padding: 1.5rem 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
}

.faq__q .q-text { font-size: 1.125rem; font-weight: 500; color: var(--slate-800); padding-right: 2rem; transition: color .2s; }
@media (min-width: 768px) { .faq__q .q-text { font-size: 1.25rem; } }
.faq__q:hover .q-text { color: var(--fbr-blue); }

.faq__toggle {
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background: var(--slate-100);
  color: var(--slate-500);
  transition: background .2s, color .2s;
}

.faq__q:hover .faq__toggle { background: rgba(0, 107, 201, .1); color: var(--fbr-blue); }
.faq__toggle .fa-minus { display: none; }
.faq__item.is-open .q-text { color: var(--fbr-blue); }
.faq__item.is-open .faq__toggle { background: rgba(0, 107, 201, .1); color: var(--fbr-blue); }
.faq__item.is-open .faq__toggle .fa-plus { display: none; }
.faq__item.is-open .faq__toggle .fa-minus { display: inline-block; }

.faq__a { overflow: hidden; transition: max-height .35s ease; }
.faq__a-inner { margin: 0; padding-bottom: 1.5rem; max-width: 68ch; font-size: 1.125rem; line-height: 1.7; color: var(--slate-600); }

/* ---------- The bar that follows you on a phone ---------- */
/* The form is thousands of pixels down on a narrow screen, so the way to it travels. */

/* A full-width band on a phone, a compact pill bottom-right from 768px. */
.sticky-cta {
  position: fixed;
  inset: auto .75rem .75rem .75rem;
  z-index: 90;
  display: flex;
  gap: .5rem;
  opacity: 0;
  transform: translateY(150%);
  transition: opacity .3s ease, transform .3s cubic-bezier(.22, 1, .36, 1);
  pointer-events: none;
}

@media (min-width: 768px) { .sticky-cta { inset: auto 1.5rem 1.5rem auto; } }

.sticky-cta.is-visible { opacity: 1; transform: none; pointer-events: auto; }

/* Out of the way when the form it points at is on screen, and untouchable while away. */
.sticky-cta.is-hidden-by-form { opacity: 0; transform: translateY(150%); pointer-events: none; }

.sticky-cta__btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .9375rem 1.25rem;
  font-size: .9375rem;
  font-weight: 700;
  color: #fff;
  background: var(--gradient-cta);
  border-radius: 9999px;
  box-shadow: 0 12px 28px -6px rgba(255, 43, 102, .5);
}

@media (min-width: 768px) { .sticky-cta__btn { flex: 0 0 auto; } }

.sticky-cta__close {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  color: var(--slate-200);
  background: var(--fbr-dark-card);
  border: 1px solid var(--fbr-input-border);
  border-radius: 50%;
  cursor: pointer;
}

@media (min-width: 768px) { .sticky-cta__close { width: 2.375rem; height: 2.375rem; } }

.sticky-cta__close:hover { color: #fff; border-color: var(--fbr-cyan); }

/* ---------- Components on a light background ---------- */
/* Colour overrides for components placed on light sections. */

.section--light .exchange__row,
.section--white .exchange__row { background: #fff; border-color: var(--slate-200); }

.section--light .exchange__cell--from .exchange__label,
.section--white .exchange__cell--from .exchange__label { color: var(--slate-500); }

.section--light .exchange__cell--from p,
.section--white .exchange__cell--from p { color: var(--slate-600); }

.section--light .exchange__cell--to .exchange__label,
.section--white .exchange__cell--to .exchange__label { color: var(--fbr-pink-on-light); }

.section--light .exchange__cell--to p,
.section--white .exchange__cell--to p { color: var(--slate-900); }

.section--light .exchange__cell--to,
.section--white .exchange__cell--to { border-left-color: var(--slate-200); }

.section--light .exchange__note,
.section--white .exchange__note { color: var(--slate-600); }

.section--light .audience li,
.section--white .audience li { color: var(--slate-700); }

.section--light .audience__exclude,
.section--white .audience__exclude { color: var(--slate-900); border-top-color: var(--slate-200); }

.section--light .evenue__text,
.section--white .evenue__text { color: var(--slate-700); }

.section--light .evenue__history,
.section--white .evenue__history { color: var(--slate-500); }

.section--light .agenda__slot,
.section--white .agenda__slot { background: #fff; border-color: var(--slate-200); }

.section--light .agenda__time,
.section--white .agenda__time { color: var(--fbr-pink-on-light); }

.section--light .agenda__title,
.section--white .agenda__title { color: var(--slate-900); }

.section--light .agenda__who,
.section--white .agenda__who { color: var(--slate-600); }

.section--light .speaker__photo,
.section--white .speaker__photo { border-color: var(--slate-200); }

.section--light .speaker__name,
.section--white .speaker__name { color: var(--slate-900); }

.section--light .speaker__role,
.section--white .speaker__role { color: var(--slate-600); }

.section--light .speaker__photo--none,
.section--white .speaker__photo--none { background: var(--slate-100); }

/* The form on a white section. */
.section--light .iform__field label,
.section--white .iform__field label { color: var(--slate-800); }

.section--light .iform__field input,
.section--white .iform__field input,
.section--light .iform__field select,
.section--white .iform__field select {
  color: var(--slate-900);
  background: #fff;
  border-color: var(--slate-300);
}

.section--light .iform__field input::placeholder,
.section--white .iform__field input::placeholder { color: var(--slate-400); }

.section--light .iform__check label,
.section--white .iform__check label { color: var(--slate-700); }

.section--light .iform__withdraw,
.section--white .iform__withdraw,
.section--light .iform__note,
.section--white .iform__note { color: var(--slate-500); }

.section--light .einterest__lead,
.section--white .einterest__lead { color: var(--slate-600); }

.section--light .formalert,
.section--white .formalert { background: #fff5f7; border-color: var(--fbr-pink-on-light); }

.section--light .formalert__title,
.section--white .formalert__title { color: var(--slate-900); }

.section--light .formalert__intro,
.section--white .formalert__intro,
.section--light .formalert__list li,
.section--white .formalert__list li { color: var(--slate-700); }

.section--light .formalert__list a,
.section--white .formalert__list a { color: var(--fbr-pink-on-light); }

.section--light .lead,
.section--white .lead { color: var(--slate-600); }

/* ---------- Page head with a few pictures beside it ---------- */

.pagehead__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.75rem; align-items: center; }
.pagehead__text { min-width: 0; }
.pagehead__shots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; min-width: 0; }

.pagehead__shots img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--radius-card);
}
.pagehead__shots img:nth-child(2) { margin-top: 1.25rem; }

@media (min-width: 900px) {
  .pagehead__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 3rem; }
}

/* ---------- Edition cards ---------- */

.edcards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: 1.25rem;
  margin-top: 1.75rem;
}

.edcard { min-width: 0; }

.edcard__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-card);
  background: #fff;
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
  transition: box-shadow .3s, transform .3s;
}

.edcard__link:hover { box-shadow: 0 14px 30px -18px rgba(15, 23, 42, .4); transform: translateY(-3px); }

.edcard__image { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }

.edcard__image--none {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  font-weight: 900;
  color: #fff;
  background: var(--gradient-brand);
}

.edcard__body { display: flex; flex-direction: column; gap: .1875rem; padding: 1.125rem; min-width: 0; }
.edcard__year { font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--fbr-pink-on-light); }
.edcard__title { font-weight: 700; color: var(--slate-900); line-height: 1.3; }
.edcard__where { font-size: .875rem; color: var(--slate-500); }
.edcard__count { margin-top: .375rem; font-size: .875rem; font-weight: 700; color: var(--fbr-blue); }

@media (prefers-reduced-motion: reduce) {
  .edcard__link { transition: none; }
  .edcard__link:hover { transform: none; }
}

/* ---------- Contact ---------- */

.contactcard__lines { display: flex; flex-direction: column; gap: .125rem; }
.contactcard__person { font-weight: 700; color: var(--slate-900); }
.section--dark .contactcard__person { color: #fff; }

.contactcard__lines a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  font-weight: 600;
  width: fit-content;
}

.contactid {
  margin: 1.25rem 0;
  padding: 1.125rem 1.25rem;
  border-left: 4px solid var(--fbr-blue);
  border-radius: 0 .5rem .5rem 0;
  background: var(--slate-50);
  font-style: normal;
  line-height: 1.7;
  color: var(--slate-700);
}

/* ---------- Thanks ---------- */

.thanks__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  margin: 0 0 1rem;
  font-size: 1.75rem;
  font-weight: 900;
  color: #fff;
  background: var(--gradient-cta);
  border-radius: var(--radius-pill);
}

.thanks__event {
  margin-top: 1.25rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-card);
  background: var(--slate-50);
  color: var(--slate-700);
}
.thanks__event strong { color: var(--slate-900); }

/* ---------- Registration and invitation pages ---------- */

.regpage .container { max-width: 46rem; }
.regpage__sub { margin-top: 2rem; font-size: 1.25rem; }
.regdata { margin: 1rem 0 1.5rem; border: 1px solid var(--slate-200); border-radius: var(--radius-card); }
.regdata__row { display: grid; grid-template-columns: minmax(7rem, 30%) 1fr; gap: 1rem; padding: .75rem 1.25rem; }
.regdata__row + .regdata__row { border-top: 1px solid var(--slate-200); }
.regdata dt { color: var(--slate-600); }
.regdata dd { margin: 0; color: var(--slate-900); font-weight: 600; overflow-wrap: anywhere; }
.regpage__form { margin-top: 1.5rem; }
.regpage__email { margin-top: 1.25rem; color: var(--slate-700); overflow-wrap: anywhere; }
.einterest__code { margin-top: 1.25rem; color: var(--slate-600); }
.einterest__code a { display: inline-block; padding: .625rem 0; font-weight: 600; }
.regpage__form .iform__check a { display: inline-block; padding: .25rem 0; }
.regpage .formalert { margin-top: 1rem; }
@media (max-width: 29.99rem) {
  .regdata__row { grid-template-columns: 1fr; gap: .125rem; }
}

/* ---------- Legal document contents ---------- */

.legal__toc {
  margin: 1.5rem 0 2.5rem;
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--fbr-input-border);
  border-radius: var(--radius-card);
  background: var(--fbr-dark-card);
}

.legal__toctitle {
  margin: 0 0 .75rem;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fbr-cyan);
}

.legal__toclist {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: .125rem;
  counter-reset: none;
}

.legal__toclist a {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  font-size: .9375rem;
  color: var(--slate-100);
  text-decoration: none;
}
.legal__toclist a:hover { color: var(--fbr-cyan); text-decoration: underline; }

/* The heading a fragment lands on must clear the fixed header. */
.legal__section { scroll-margin-top: calc(var(--header-h) + 1.5rem); }
/* Addresses and emails in the documents are long single words; they wrap instead of widening the page. */
.legal__section { overflow-wrap: anywhere; }
.legal__table th { overflow-wrap: normal; }

@media (min-width: 768px) {
  .legal__toclist { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .125rem 1.5rem; }
}

/* Long addresses wrap instead of widening the card. */
.contactcard__lines a { overflow-wrap: anywhere; }

/* ---------- The urgency band and the ticket block ---------- */

/* Three figures under the hero: how long is left, when and where, how many fit.
   minmax(0, 1fr) rather than 1fr, because a long date refuses to shrink otherwise. */
.ecount { background: var(--fbr-dark-bkg); color: var(--slate-100); }

.ecount__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  gap: 1px;
  background: var(--fbr-input-border);
  border-radius: var(--radius-card);
  overflow: hidden;
}

.ecount__cell {
  min-width: 0;
  padding: 1.25rem 1rem;
  text-align: center;
  background: var(--fbr-dark-card);
}

.ecount__figure {
  margin: 0;
  font-size: 2.25rem;
  font-weight: 900;
  line-height: 1.05;
  color: #fff;
}

.ecount__figure--sm { font-size: 1.5rem; }

.ecount__label {
  margin: .25rem 0 0;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--slate-300);
}

.ecount__cell--days .ecount__figure { color: var(--fbr-cyan); }

.tickets {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), minmax(0, 1fr)));
  gap: 1rem;
  margin-top: 2rem;
}

.ticket {
  min-width: 0;
  padding: 1.75rem;
  background: var(--fbr-dark-card);
  border: 1px solid var(--fbr-input-border);
  border-radius: var(--radius-card);
}

.ticket__name { margin: 0 0 .75rem; font-size: .9375rem; font-weight: 700; color: #fff; }
.ticket__price { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem; }
.ticket__amount { font-size: 2.5rem; font-weight: 900; line-height: 1; color: #fff; }
.ticket__vat { font-size: .8125rem; font-weight: 700; color: var(--fbr-cyan); }
.ticket__unit { font-size: .8125rem; color: var(--slate-300); }

.ticket__desc { margin: .75rem 0 0; color: var(--slate-200); }
.ticket__until { margin: .5rem 0 0; font-size: .8125rem; font-weight: 700; color: var(--fbr-yellow); }

.ticket__inclabel {
  margin: 1.25rem 0 .5rem;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--slate-300);
}

.ticket__includes { margin: 0; padding: 0; list-style: none; }
.ticket__includes li { position: relative; padding: .375rem 0 .375rem 1.5rem; color: var(--slate-100); }
.ticket__includes li::before { content: ""; position: absolute; left: 0; top: .9rem; width: .5rem; height: .5rem; border-radius: 50%; background: var(--fbr-cyan); }

.ticket--note { background: transparent; border-style: dashed; }
.ticket__notetitle { margin: 0; font-size: 1.125rem; font-weight: 800; color: #fff; }
.ticket__notetext { margin: .5rem 0 1.25rem; color: var(--slate-200); }

.section--light .ecount__cell, .section--white .ecount__cell { background: #fff; }
.section--light .ecount__figure, .section--white .ecount__figure { color: var(--slate-900); }
.section--light .ecount__label, .section--white .ecount__label { color: var(--slate-500); }

/* The line under a speaker: what you learn, or what he spoke about. */
.speaker__line {
  margin: .5rem 0 0;
  font-size: .875rem;
  line-height: 1.5;
  color: var(--slate-700);
  text-align: left;
}

.speaker__linelabel {
  display: block;
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--slate-500);
}

.section--dark .speaker__line { color: var(--slate-200); }
.section--dark .speaker__linelabel { color: var(--slate-300); }

/* The hall, named. */
/* The venue of an edition: photograph and details side by side from tablet up. */
.vcard { display: grid; grid-template-columns: minmax(0, 1fr); overflow: hidden; border: 1px solid var(--slate-200); border-radius: var(--radius-card); background: var(--slate-50); }
.vcard__photo img { display: block; width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.vcard__body { display: flex; flex-direction: column; align-items: flex-start; gap: .75rem; padding: 1.5rem; }
.vcard__eyebrow { margin: 0; color: var(--fbr-pink-on-light); font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.vcard__name { margin: 0; color: var(--slate-900); font-size: 1.5rem; font-weight: 800; line-height: 1.2; }
.vcard__facts { display: flex; flex-direction: column; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.vcard__facts li { display: flex; align-items: flex-start; gap: .625rem; color: var(--slate-700); }
.vcard__facts i { flex-shrink: 0; margin-top: .2rem; color: var(--fbr-purple); }
.vcard .evenue__text, .vcard .evenue__history { margin: 0; }
.vcard__map { margin: .5rem 0 0; }

@media (min-width: 768px) {
  .vcard--photo { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
  .vcard--photo .vcard__photo img { aspect-ratio: auto; min-height: 18rem; }
  .vcard__body { justify-content: center; padding: 2.25rem; }
}

/* Partners of one edition, and the invitation to the ones that are not yet. */
.epartners__tier {
  margin: 2rem 0 .75rem;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--slate-600);
}

.esponsor__box {
  padding: 2.5rem;
  background: #fff;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-card);
  text-align: center;
}

.esponsor__box h2 { margin-top: 0; }
.esponsor__note { margin: .75rem 0 0; font-size: .875rem; color: var(--slate-600); }

.section--dark .esponsor__box { background: var(--fbr-dark-card); border-color: var(--fbr-input-border); }
.section--dark .esponsor__note { color: var(--slate-300); }

/* ---------- The app page ---------- */

.apphero__state {
  margin: 1rem 0 1.5rem;
  padding: .75rem 1rem;
  display: inline-block;
  font-weight: 700;
  color: var(--slate-800);
  background: var(--slate-100);
  border-left: 3px solid var(--fbr-orange-on-light);
  border-radius: var(--radius-card);
}

/* A card whose text is not written yet. Same treatment as an unwritten testimonial,
   because it means the same thing and must read the same way. */
.card--placeholder { border-style: dashed; border-color: var(--slate-400); background: var(--slate-100); }

.card__flag {
  margin: 0 0 .5rem;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--slate-600);
}

.appshots { margin-top: 2rem; color: var(--slate-700); }

/* A figure that carries the scope it is true for. */
.stats__note { margin-top: .75rem; font-size: .875rem; color: var(--slate-300); }
.section--light .stats__note, .section--white .stats__note { color: var(--slate-600); }

/* Why the events exist, who convenes them, and the way to the partner page. */
.why__body { max-width: 68ch; color: var(--slate-700); }
.section--dark .why__body { color: var(--slate-200); }

.authority__note { margin-top: 1.5rem; font-size: .9375rem; color: var(--slate-300); }
.section--light .authority__note, .section--white .authority__note { color: var(--slate-600); }

.partnerhook__box {
  padding: 2.5rem;
  text-align: center;
  background: #fff;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-card);
}

.partnerhook__box h2 { margin-top: 0; }
.partnerhook__box .lead { margin-left: auto; margin-right: auto; }

/* The visible trail, matching the BreadcrumbList in the markup. */
.crumbs {
  padding: 0;
  font-size: .8125rem;
  background: #fff;
  border-bottom: 1px solid var(--slate-200);
}

.crumbs .container { display: flex; flex-wrap: wrap; gap: .25rem .5rem; align-items: center; }

/* 24px minimum, which a 13px line does not reach on its own. */
.crumbs a, .crumbs [aria-current] { display: inline-flex; align-items: center; min-height: 44px; }
.crumbs a { padding: 0 .25rem; margin: 0 -.25rem; }

/* The next-step cards keep the small button, at the full target height. */
.emore .btn--sm { min-height: 44px; }
.crumbs a { color: var(--slate-600); }
.crumbs span[aria-hidden] { color: var(--slate-400); }
.crumbs [aria-current] { color: var(--slate-800); font-weight: 700; }

/* ---------- Icons ---------- */

/* Icons mark a repeated kind of item and are always aria-hidden. */

.card__icon {
  margin-right: .5rem;
  color: var(--fbr-cyan);
}

.section--light .card__icon,
.section--white .card__icon,
.card .card__icon { color: var(--fbr-pink-on-light); }

.section--dark .card .card__icon { color: var(--fbr-cyan); }

/* A list where the mark carries meaning: you get this, and this one you do not. */
.audience li,
.ticket__includes li {
  display: flex;
  gap: .625rem;
  align-items: flex-start;
  padding: .375rem 0;
}

.audience li i,
.ticket__includes li i { flex: 0 0 auto; margin-top: .2em; }
.audience li i { color: var(--fbr-pink-on-light); }
.ticket__includes li i { color: var(--fbr-cyan); }

.audience__exclude { display: flex; gap: .625rem; align-items: flex-start; }
.audience__exclude i { flex: 0 0 auto; margin-top: .2em; color: var(--slate-500); }

/* The dot the tick replaced. */
.ticket__includes li::before { content: none; }
.audience li::before { content: none; }

.ecount__icon { display: block; margin-bottom: .5rem; font-size: 1.125rem; color: var(--fbr-cyan); }
.section--light .ecount__icon, .section--white .ecount__icon { color: var(--fbr-pink-on-light); }

/* The arrow between "you come with" and "you leave with" IS the row's meaning. */
.exchange__arrow {
  align-self: center;
  color: var(--fbr-cyan);
  font-size: 1.125rem;
}

.agenda__who { display: flex; gap: .5rem; align-items: baseline; }
.agenda__who i { flex: 0 0 auto; color: var(--slate-500); }

.contactcard__lines a { display: flex; gap: .5rem; align-items: baseline; }
.contactcard__lines a i { flex: 0 0 auto; color: var(--slate-500); }

/* ---------- Scroll reveal ---------- */

/* Only elements armed by the script are hidden; without scripts everything shows. */
.reveal.is-armed {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .6s ease, transform .6s cubic-bezier(.22, 1, .36, 1);
}

.reveal.is-armed.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal.is-armed { opacity: 1; transform: none; transition: none; }
}

/* The price of an edition that has happened: a fact, not an offer. */
.tickets__note { margin-top: 1rem; font-size: .875rem; color: var(--slate-300); }
.section--light .tickets__note, .section--white .tickets__note { color: var(--slate-600); }

/* ---------- Pillars: recap highlights of a past edition ---------- */
.pillars { display: grid; gap: 1.5rem; }
@media (min-width: 640px) { .pillars { grid-template-columns: 1fr 1fr; } }
.pillar { padding: 1.5rem; border-radius: 1rem; background: #fff; border: 1px solid var(--slate-200); box-shadow: 0 4px 6px -1px rgba(0,0,0,.08); transition: transform .3s, box-shadow .3s; }
.pillar:hover { transform: translateY(-4px); box-shadow: 0 12px 20px -8px rgba(0,0,0,.15); }
.pillar__icon { display: inline-flex; margin-bottom: 1rem; padding: .75rem; background: var(--slate-50); border: 1px solid var(--slate-100); border-radius: .5rem; font-size: 1.5rem; }
.pillar__icon.i-blue { color: var(--fbr-blue); } .pillar__icon.i-pink { color: var(--fbr-pink); } .pillar__icon.i-yellow { color: var(--fbr-yellow); } .pillar__icon.i-purple { color: var(--fbr-purple); }
.pillar h3 { font-size: 1.25rem; color: var(--slate-900); margin-bottom: .5rem; }
.pillar p { color: var(--slate-700); font-size: .875rem; line-height: 1.6; }

/* Recap of a past edition: what the day actually was. */
.recap__lead { font-size: 1.125rem; color: var(--slate-800); margin-bottom: 1.25rem; }
.recap__text { color: var(--slate-700); line-height: 1.7; margin-bottom: 1rem; max-width: 46rem; }
.recap__notes { margin-top: 2.5rem; }

/* ---------- Issues: horizontal cards, used for the 2027 calendar ---------- */
.issues__head { text-align: center; margin-bottom: 4rem; }
.issues__head h2 { font-size: 2.25rem; font-weight: 800; color: #fff; margin-bottom: 1.5rem; }
@media (min-width: 768px) { .issues__head h2 { font-size: 3rem; } }
.issues__head .section-divider { margin: 0 auto 1.5rem; }
.issues__head p { color: var(--slate-400); font-size: 1.125rem; max-width: 42rem; margin: 0 auto; }
.issues__list { display: flex; flex-direction: column; gap: 3rem; }

.issue {
  position: relative; display: flex; flex-direction: column; gap: 2rem; padding: 2rem;
  /* rgba of --fbr-dark-card. Changes together with the token: .issue--latest below
     uses it directly, and a divergence shows two card shades in one grid. */
  border-radius: 1.5rem; border: 1px solid var(--fbr-border-purple); background: rgba(42,10,78,.5);
}
@media (min-width: 1024px) { .issue { flex-direction: row; gap: 3rem; padding: 3rem; } }
.issue--latest { background: var(--fbr-dark-card); border-color: rgba(104,29,163,.4); box-shadow: 0 20px 40px -12px rgba(104,29,163,.2); }
.issue__ribbon {
  position: absolute; top: 0; right: 1rem; transform: translateY(-50%);
  background: var(--gradient-cta); color: #fff; font-size: .75rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; padding: .5rem 1.5rem; border-radius: 9999px; box-shadow: 0 8px 16px -6px rgba(0,0,0,.4);
}
@media (min-width: 1024px) { .issue__ribbon { right: 3rem; } }
.issue__cover { width: 100%; flex-shrink: 0; display: flex; justify-content: center; }
@media (min-width: 1024px) { .issue__cover { width: 33.333%; justify-content: flex-start; } }
.issue__cover img { width: 100%; max-width: 24rem; border-radius: .5rem; box-shadow: 0 25px 50px -12px rgba(0,0,0,.5); object-fit: cover; aspect-ratio: 1/1.4; transition: transform .5s; }
.issue__cover img:hover { transform: translateY(-8px); }
.issue__content { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.issue__meta { display: flex; align-items: center; gap: .75rem; font-size: .875rem; font-weight: 500; color: var(--slate-400); margin-bottom: 1rem; flex-wrap: wrap; }
.issue__badge { color: #fff; padding: .25rem .75rem; background: var(--fbr-dark-bkg); border: 1px solid var(--fbr-border-purple); border-radius: .375rem; }
.issue__meta .sep { width: 4px; height: 4px; background: var(--slate-400); border-radius: 9999px; }
.issue__title { font-size: 1.5rem; color: #fff; margin-bottom: 1rem; line-height: 1.25; }
@media (min-width: 768px) { .issue__title { font-size: 1.875rem; } }
.issue__desc { color: var(--slate-300); margin-bottom: 2rem; line-height: 1.7; }
.issue__list { display: flex; flex-direction: column; gap: .75rem; margin-bottom: 2rem; }
.issue__list li { display: flex; align-items: flex-start; gap: .75rem; color: var(--slate-300); font-size: .875rem; }
.issue__list i { color: var(--fbr-cyan); flex-shrink: 0; margin-top: .15rem; }
.issue__title a { transition: color .2s; }
.issue__title a:hover { color: var(--fbr-cyan); }
.issue__actions { margin-top: auto; }
.issue__more { display: inline-flex; align-items: center; gap: .5rem; margin-top: 1rem; min-height: 24px; color: var(--fbr-cyan); font-size: .8125rem; font-weight: 700; transition: color .2s, gap .2s; }
.issue__more:hover { color: #fff; gap: .75rem; }
@media (max-width: 639px) { .issue__more { width: 100%; justify-content: center; } }

/* Announced issue: dashed border distinguishes it without looking broken. The
   ribbon uses cyan rather than the CTA gradient, because it is not an action. */
.issue--upcoming { border-style: dashed; background: rgba(42,10,78,.28); }
.issue__ribbon--soon { background: var(--fbr-dark-card); border: 1px dashed var(--fbr-light-purple); color: var(--fbr-cyan); }
.issue__cover-soon {
  width: 100%; max-width: 24rem; aspect-ratio: 1/1.4; border-radius: .5rem;
  border: 2px dashed var(--fbr-border-purple); background: linear-gradient(to bottom right, var(--fbr-dark-card), var(--fbr-dark-bkg));
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem;
}
.issue__cover-soon-num { font-size: 2.25rem; font-weight: 800; color: #fff; letter-spacing: -.02em; }
.issue__cover-soon-label { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--fbr-cyan); }
.issue__soon { display: inline-flex; align-items: center; gap: .5rem; font-size: .9375rem; font-weight: 700; color: var(--fbr-cyan); }
.issue__soon i { flex-shrink: 0; }
@media (max-width: 639px) { .issue__soon { width: 100%; justify-content: center; } }

/* Brand tokens used by the blocks above. */
:root {
  --fbr-yellow-websafe: #ffcc33;
  --fbr-orange-websafe: #ff9900;
  --fbr-pink-websafe: #ff3366;
  --fbr-purple-websafe: #663399;
  --fbr-violet-websafe: #9966cc;
  --fbr-indigo-websafe: #3333cc;
  --fbr-blue-deep-websafe: #0066cc;
  --fbr-blue-websafe: #0099ff;
  --fbr-cyan-websafe: #66ccff;
  --fbr-border-purple: #3b165c;
  --fbr-black: #000000;
  --fbr-near-black: #0b0214;
  --fbr-violet-on-dark: #b177dc;
}

/* Month names scale with the viewport so they fit at 320px. */
.issue__cover-soon-num--month {
  font-size: clamp(1.25rem, 7vw, 2.25rem);
  max-width: 100%;
  overflow-wrap: anywhere;
  text-align: center;
}

/* The player that replaces the consent placeholder. Without this it renders at the browser
   default of 300x150 — wrong shape, and wider than the column on a 320px screen. */
.embed-frame {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: var(--radius-card);
}

/* ---------- About, collab, cross-promotion, lead cards, inside ---------- */
/* About: title, body and quote beside a column of pillars. */
.about__grid { display: grid; gap: 4rem; align-items: center; }
@media (min-width: 1024px) { .about__grid { grid-template-columns: 1fr 1fr; } }
.about__title { font-size: 1.875rem; font-weight: 800; color: var(--slate-950); margin-bottom: 1.5rem; }
@media (min-width: 768px) { .about__title { font-size: 3rem; } }
.about__divider { margin: 0 0 2rem; }
.about__body { display: flex; flex-direction: column; gap: 1.5rem; color: var(--slate-700); font-size: 1.125rem; font-weight: 500; line-height: 1.7; }
.about__quote { padding: 1rem; border-left: 4px solid var(--fbr-pink); background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.05); border-radius: 0 .5rem .5rem 0; }
.about__quote p { color: var(--fbr-pink-on-light); font-weight: 700; font-style: italic; }

/* Collab: dark panel with a glow and a card with a sweep. */
.collab { position: relative; overflow: hidden; background: var(--fbr-dark-card); }
.collab__overlay { position: absolute; inset: 0; background: linear-gradient(to bottom right, rgba(73,61,189,.1), transparent, rgba(11,2,20,.5)); pointer-events: none; }
.collab__glow { position: absolute; top: 0; right: 0; width: 50%; height: 50%; background: rgba(104,29,163,.05); filter: blur(64px); border-radius: 9999px; pointer-events: none; }
.collab__inner { position: relative; z-index: 10; }
.collab h2 { font-size: 2.25rem; font-weight: 800; color: #fff; margin-bottom: 1.5rem; }
@media (min-width: 768px) { .collab h2 { font-size: 3rem; } }
.collab .section-divider { margin: 0 0 2rem; }
.collab__body { color: var(--slate-300); font-size: 1.125rem; margin-bottom: 2.5rem; line-height: 1.7; font-weight: 500; display: flex; flex-direction: column; gap: 1.5rem; text-align: left; }

.collab__card { position: relative; overflow: hidden; display: inline-block; text-align: left; max-width: 42rem; width: 100%; padding: 2rem; background: var(--fbr-dark-bkg); border: 1px solid var(--fbr-border-purple); border-radius: 1rem; box-shadow: 0 20px 40px -12px rgba(11,2,20,.5); transition: border-color .3s; }
.collab__card:hover { border-color: rgba(80,218,255,.3); }
.collab__card .shine { position: absolute; inset: 0; background: linear-gradient(to right, transparent, rgba(255,255,255,.03), transparent); transform: translateX(-100%); transition: transform 1s; pointer-events: none; }
.collab__card:hover .shine { transform: translateX(100%); }
.collab__card h3 { color: #fff; font-size: 1.125rem; margin-bottom: .5rem; display: flex; align-items: center; gap: .5rem; position: relative; }
.collab__card h3 i { color: var(--fbr-cyan); }
.collab__card .muted { color: var(--slate-400); margin-bottom: 1rem; font-size: .875rem; position: relative; }
.collab__card .email { color: var(--fbr-cyan); font-size: 1.25rem; font-weight: 700; position: relative; word-break: break-all; }
.collab__card .email:hover { text-decoration: underline; }
.collab__card .hint { color: var(--slate-400); font-size: .75rem; margin-top: .5rem; position: relative; }

/* Cross-promotion: two-column block. */
.gymprofit { position: relative; overflow: hidden; background: var(--fbr-dark-card); border: 1px solid var(--fbr-border-purple); border-radius: 1.5rem; margin-bottom: 3rem; box-shadow: 0 25px 50px -12px rgba(0,0,0,.5); }
.gymprofit__pattern { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .2; background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 40px 40px; }
.gymprofit__grid { position: relative; z-index: 10; display: grid; }
@media (min-width: 1024px) { .gymprofit__grid { grid-template-columns: 3fr 2fr; } }
.gp-left { padding: 2rem; display: flex; flex-direction: column; justify-content: space-between; border-bottom: 1px solid rgba(255,255,255,.1); }
@media (min-width: 1024px) { .gp-left { padding: 4rem; border-bottom: 0; border-right: 1px solid rgba(255,255,255,.1); } }
.gp-left h3 { font-size: 2.25rem; font-weight: 900; color: #fff; line-height: 1.1; letter-spacing: -.02em; margin-bottom: 1.5rem; }
@media (min-width: 768px) { .gp-left h3 { font-size: 3rem; } }
@media (min-width: 1024px) { .gp-left h3 { font-size: 3.75rem; } }
.gp-left h3 .cyan { color: var(--fbr-cyan); }
.gp-left__desc { color: var(--slate-300); font-size: 1rem; line-height: 1.7; max-width: 42rem; margin-bottom: 3rem; }
@media (min-width: 768px) { .gp-left__desc { font-size: 1.125rem; } }
.gp-left__desc strong { color: #fff; }
.gp-features { display: grid; gap: 2rem; padding-top: 2rem; border-top: 1px solid rgba(255,255,255,.1); }
@media (min-width: 640px) { .gp-features { grid-template-columns: 1fr 1fr; } }
.gp-feature { display: flex; gap: 1rem; }
.gp-feature__icon { width: 2.5rem; height: 2.5rem; border-radius: .75rem; background: rgba(30,41,59,.5); border: 1px solid rgba(255,255,255,.05); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.gp-feature__icon.i-blue { color: var(--fbr-blue); } .gp-feature__icon.i-orange { color: var(--fbr-orange); }
.gp-feature h4 { color: #fff; font-size: .875rem; margin-bottom: .25rem; text-transform: uppercase; letter-spacing: .03em; }
.gp-feature p { color: var(--slate-400); font-size: .75rem; line-height: 1.4; }
.gp-right { padding: 2rem; display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--fbr-dark-bkg); position: relative; overflow: hidden; }
@media (min-width: 1024px) { .gp-right { padding: 4rem; } }
.gp-cards { position: relative; width: 8rem; height: 8rem; margin-bottom: 2rem; }
.gp-cards .card-a { position: absolute; top: 0; left: 0; width: 5rem; height: 5rem; background: #fff; border-radius: 1rem; box-shadow: 0 20px 25px -5px rgba(0,0,0,.3); z-index: 10; display: flex; align-items: center; justify-content: center; transform: rotate(-12deg) translateY(.5rem); color: var(--slate-900); font-size: 2.5rem; }
.gp-cards .card-b { position: absolute; bottom: .5rem; right: 0; width: 5rem; height: 5rem; background: var(--fbr-blue); border-radius: 1rem; box-shadow: 0 25px 50px -12px rgba(0,0,0,.5); z-index: 20; display: flex; align-items: center; justify-content: center; transform: rotate(6deg); color: #fff; font-size: 2.5rem; }
.gp-right .btn { width: 100%; max-width: 20rem; margin-bottom: 1.5rem; box-shadow: 0 0 0 rgba(255,255,255,0); }
.gp-right .btn--white:hover { box-shadow: 0 0 20px rgba(255,255,255,.3); }
.gp-keywords { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; font-size: .625rem; font-weight: 700; color: var(--slate-400); text-transform: uppercase; letter-spacing: .1em; }

/* Lead cards: icon, title, text. */
.topics { border-top: 1px solid var(--slate-100); text-align: center; }
.topics__inner { margin: 0 auto; }
.topics h2 { font-size: 1.875rem; font-weight: 800; color: var(--slate-900); margin-bottom: 1.5rem; letter-spacing: -.02em; }
@media (min-width: 768px) { .topics h2 { font-size: 3rem; } }
.topics__desc { color: var(--slate-600); font-size: 1.125rem; margin-bottom: 2.5rem; line-height: 1.7; font-weight: 500; }
@media (min-width: 768px) { .topics__desc { font-size: 1.25rem; } }
.topics__cards { display: grid; gap: 1.5rem; margin-bottom: 3rem; text-align: left; }
@media (min-width: 768px) { .topics__cards { grid-template-columns: repeat(3,1fr); } }
.lead-card { padding: 1.5rem; background: #fff; border-radius: 1rem; border: 1px solid var(--slate-200); transition: box-shadow .3s; }
.lead-card:hover { box-shadow: 0 12px 20px -8px rgba(0,0,0,.12); }
.lead-card h3 { font-weight: 700; color: var(--slate-900); margin-bottom: .5rem; display: flex; align-items: center; gap: .5rem; font-size: 1rem; }
.lead-card h3 i { font-size: 1.1rem; } .lead-card .i-blue { color: var(--fbr-blue); } .lead-card .i-purple { color: var(--fbr-purple); } .lead-card .i-pink { color: var(--fbr-pink); }
.lead-card p { color: var(--slate-600); font-size: .875rem; line-height: 1.6; }
.topics__actions { display: flex; flex-direction: column; gap: 1rem; justify-content: center; align-items: center; }
@media (min-width: 640px) { .topics__actions { flex-direction: row; } }
.topics__note { margin-top: 2rem; font-size: .875rem; color: var(--slate-600); font-weight: 500; }

/* Inside: figures band, topic grid, row of names. */
.inside__head { max-width: 46rem; margin-bottom: 3rem; }
.inside__head h2 { font-size: 1.875rem; color: #fff; margin-bottom: 1rem; }
@media (min-width: 768px) { .inside__head h2 { font-size: 2.5rem; } }
.inside__head .section-divider { margin-bottom: 1.5rem; }
.inside__head p { color: var(--slate-300); font-size: 1.0625rem; line-height: 1.75; }

.inside__stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--fbr-border-purple); border: 1px solid var(--fbr-border-purple); border-radius: 1.25rem; overflow: hidden; margin-bottom: 3rem; }
@media (min-width: 700px) { .inside__stats { grid-template-columns: repeat(4, 1fr); } }
.inside__stats > div { background: var(--fbr-dark-card); padding: 1.5rem 1.25rem; text-align: center; }
.inside__stats dt { color: var(--slate-400); font-size: .6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; margin-bottom: .5rem; }
.inside__stats dd { color: #fff; font-size: 1.75rem; font-weight: 900; line-height: 1; }
@media (min-width: 768px) { .inside__stats dd { font-size: 2.25rem; } }

.inside__grid { display: grid; gap: 1.25rem; margin-bottom: 3rem; }
@media (min-width: 640px) { .inside__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .inside__grid { grid-template-columns: repeat(3, 1fr); } }
.rubrica { background: var(--fbr-dark-card); border: 1px solid var(--fbr-border-purple); border-radius: 1.25rem; padding: 1.75rem; transition: transform .3s, border-color .3s; }
.rubrica:hover { transform: translateY(-4px); border-color: var(--fbr-light-purple); }
.rubrica__icon { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: .75rem; background: var(--fbr-dark-bkg); color: var(--fbr-cyan); font-size: 1.125rem; margin-bottom: 1.25rem; }
.rubrica h3 { color: #fff; font-size: 1.0625rem; margin-bottom: .625rem; line-height: 1.35; }
.rubrica p { color: var(--slate-400); font-size: .875rem; line-height: 1.65; }

.inside__names { display: flex; flex-direction: column; gap: 1rem; padding-top: 2rem; border-top: 1px solid var(--fbr-border-purple); }
.inside__names-row { color: #fff; font-size: .9375rem; font-weight: 600; line-height: 1.6; }
.inside__names-row span { display: block; color: var(--slate-400); font-size: .6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; margin-bottom: .375rem; }

/* Six topic cards. */
@media (min-width: 640px) { .topics__cards--six { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .topics__cards--six { grid-template-columns: repeat(3, 1fr); } }

/* Recordings on the landing page: two per row from tablet up. */
.videogrid { display: grid; gap: 1.5rem; }
@media (min-width: 700px) { .videogrid { grid-template-columns: 1fr 1fr; } }

/* Tag chips. */
.chips { display: flex; flex-wrap: wrap; gap: .625rem; }
.chips li { padding: .5rem 1rem; border-radius: 9999px; background: var(--fbr-dark-card); border: 1px solid var(--fbr-border-purple); color: var(--slate-200); font-size: .8125rem; font-weight: 500; }

/* Next edition card: image with countdown, then the body with tags. */
.upnext__card { display: grid; gap: 0; overflow: hidden; border-radius: 1.25rem; border: 1px solid var(--slate-200); background: #fff; box-shadow: 0 12px 24px -16px rgba(0,0,0,.25); margin-bottom: 2.5rem; }
@media (min-width: 900px) { .upnext__card { grid-template-columns: 5fr 7fr; } }
.upnext__media { position: relative; }
.upnext__media img { display: block; width: 100%; height: 100%; min-height: 14rem; object-fit: cover; }
.upnext__days { position: absolute; left: 1rem; bottom: 1rem; display: flex; align-items: baseline; gap: .4rem; margin: 0; padding: .5rem .9rem; border-radius: 9999px; background: var(--fbr-near-black); color: #fff; font-size: .8125rem; font-weight: 600; }
.upnext__days span { font-size: 1.5rem; font-weight: 900; line-height: 1; color: var(--fbr-cyan); }
.upnext__body { padding: 1.75rem; display: flex; flex-direction: column; gap: .85rem; }
@media (min-width: 900px) { .upnext__body { padding: 2.5rem; } }
.upnext__title { font-size: 1.5rem; line-height: 1.25; color: var(--slate-950); }
@media (min-width: 768px) { .upnext__title { font-size: 1.875rem; } }
.upnext__title a:hover { color: var(--fbr-pink-on-light); }
.upnext__chips { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; padding: 0; margin: 0; }
.upnext__chips li { display: inline-flex; align-items: center; gap: .45rem; padding: .4rem .8rem; border-radius: 9999px; background: var(--slate-50); border: 1px solid var(--slate-200); color: var(--slate-700); font-size: .8125rem; font-weight: 600; }
.upnext__chips i { color: var(--fbr-purple); }
.upnext__cta { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: auto; }
.upnext__cal { padding: 1.75rem; border-radius: 1rem; background: var(--fbr-dark-bkg); }
.upnext__caltext h3 { color: #fff; font-size: 1.25rem; margin-bottom: .5rem; }
.upnext__caltext p { color: var(--slate-300); font-size: .9375rem; line-height: 1.65; margin-bottom: 1.5rem; max-width: 48rem; }
.calmonths { list-style: none; padding: 0; margin: 0; display: grid; gap: .75rem; }
@media (min-width: 640px) { .calmonths { grid-template-columns: 1fr 1fr; } }
.calmonths li { display: flex; flex-direction: column; gap: .2rem; padding: .85rem 1rem; border-radius: .75rem; background: var(--fbr-dark-card); border: 1px solid var(--fbr-border-purple); }
.calmonths__when { color: var(--fbr-cyan); font-size: .6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; }
.calmonths__what { color: #fff; font-size: .9375rem; font-weight: 600; line-height: 1.35; }
.calmonths__desc { color: var(--slate-300); font-size: .8125rem; line-height: 1.55; margin-top: .15rem; }
.calmonths__where { display: inline-flex; align-items: center; gap: .35rem; color: var(--slate-400); font-size: .75rem; margin-top: .35rem; }
.calmonths__where i { color: var(--fbr-light-purple); }

/* ---------- Page hero on the FBR violet (calendar, archive) ---------- */

.pagehero { position: relative; overflow: clip; padding-top: 2.5rem; background: rgb(31 3 59); color: #fff; }
.pagehero__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; align-items: center; padding-bottom: 2.5rem; }
.pagehero__eyebrow { margin: 0 0 .75rem; color: var(--fbr-cyan); font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.pagehero__title { margin: 0 0 1rem; max-width: 18ch; color: #fff; font-size: clamp(2rem, 1.3rem + 2.4vw, 3.25rem); font-weight: 900; line-height: 1.06; text-wrap: balance; }
.pagehero .lead { margin: 0; max-width: 46ch; color: rgb(255 255 255 / .86); }
.pagehero__note { margin: .75rem 0 0; max-width: 46ch; color: rgb(255 255 255 / .7); font-size: .9375rem; }
.pagehero__cta { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.5rem 0 0; }

@media (min-width: 900px) {
  .pagehero { padding-top: 3.5rem; }
  .pagehero__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 3rem; padding-bottom: 3.5rem; }
}

/* Figures and series shortcuts inside the hero (archive). */
.pagehero__stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.5rem; margin: 1.75rem 0 0; }
.pagehero__stats div { display: flex; flex-direction: column-reverse; gap: .25rem; }
.pagehero__stats dd { margin: 0; color: #fff; font-size: 2rem; font-weight: 900; line-height: 1; }
.pagehero__stats dt { color: var(--slate-300); font-size: .6875rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.pagehero__jump { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.75rem; }
.pagehero__jump a { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; padding: .5rem 1rem; border: 1px solid rgb(255 255 255 / .22); border-radius: 9999px; background: rgb(255 255 255 / .08); color: #fff; font-size: .875rem; font-weight: 600; text-decoration: none; transition: background-color .2s; }
.pagehero__jump a:hover, .pagehero__jump a:focus-visible { background: rgb(255 255 255 / .16); }
.pagehero__jump span { color: var(--fbr-cyan); font-weight: 800; }

@media (min-width: 600px) {
  .pagehero__stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* The year at a glance: one row per month, each a jump to its card. */
.calglance { padding: 1.25rem; border: 1px solid var(--fbr-border-purple); border-radius: 1.25rem; background: var(--fbr-dark-card); }
.calglance__title { margin: 0 0 .75rem; color: var(--fbr-cyan); font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.calglance__list { display: grid; gap: .25rem; margin: 0; padding: 0; list-style: none; }
.calglance__item { display: flex; align-items: center; gap: 1rem; min-height: 44px; padding: .625rem; border-radius: .75rem; color: #fff; text-decoration: none; transition: background-color .2s; }
.calglance__item:hover, .calglance__item:focus-visible { background: rgb(255 255 255 / .07); }
.calglance__month { flex-shrink: 0; display: grid; place-items: center; width: 3.25rem; height: 3.25rem; border-radius: .625rem; background: var(--gradient-cta); font-size: .875rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.calglance__body { display: flex; flex-direction: column; min-width: 0; }
.calglance__name { font-size: .9375rem; font-weight: 700; line-height: 1.3; }
.calglance__where { color: var(--slate-300); font-size: .8125rem; }

/* The calendar list on white: dark heading, cards keep the violet as a solid fill. */
.issues--light .issues__head h2 { color: var(--slate-900); }
.issues--light .issues__head p { color: var(--slate-600); }
.issues--light .issue__title { color: #fff; }
/* Past .section--white a:not(.btn), which paints links blue. */
.issues--light a.issue__more:not(.btn) { color: var(--fbr-cyan); }
.issues--light a.issue__more:not(.btn):hover { color: #fff; }
.issue--cal .issue__more { min-height: 44px; }

/* Calendar cards: no cover panel, a date badge beside the title. */
.issue--cal { flex-direction: column; background: var(--fbr-dark-bkg); border-color: var(--fbr-light-purple); }
.issue--cal .issue__content { width: 100%; }
.calcard__head { display: flex; align-items: flex-start; gap: 1.25rem; margin-bottom: 1.25rem; }
.calcard__titles { flex: 1; min-width: 0; }
.calcard__titles .issue__title { margin-bottom: 0; }
.caldate { flex-shrink: 0; display: flex; flex-direction: column; width: 4.5rem; margin: 0; overflow: hidden; border-radius: .75rem; background: #fff; text-align: center; box-shadow: 0 12px 24px -12px rgb(0 0 0 / .5); }
.caldate__month { padding: .35rem 0; background: var(--gradient-cta); color: #fff; font-size: 1rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.caldate__year { padding: .4rem 0 .45rem; color: rgb(31 3 59); font-size: 1.125rem; font-weight: 800; }
.caldate__full { position: absolute; color: rgb(31 3 59); width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

@media (max-width: 479px) {
  .calcard__head { gap: .875rem; }
  .caldate { width: 3.75rem; }
  .caldate__month { font-size: .875rem; }
  .caldate__year { font-size: 1rem; }
  .issue--cal .issue__meta { gap: .25rem .75rem; }
  .issue--cal .issue__meta .sep { display: none; }
}
.upnext__calcta { margin: 1.5rem 0 0; }

/* The day, as a room full of people: one wide recording, then a band of photographs. */
.community__video { max-width: 46rem; margin: 0 auto 2.5rem; aspect-ratio: 16 / 9; }
.shots { display: grid; gap: .75rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 640px) { .shots { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .shots { grid-template-columns: repeat(4, 1fr); } }
.shots__item img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-card); border: 1px solid var(--fbr-border-purple); transition: transform .3s, border-color .3s; }
.shots__item:hover img { transform: translateY(-3px); border-color: var(--fbr-light-purple); }

/* Six faces per row on wide screens. */
@media (min-width: 640px) { .faces--six { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1024px) { .faces--six { grid-template-columns: repeat(6, 1fr); } }
.faces__more { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--slate-200); color: var(--slate-700); font-size: .9375rem; line-height: 1.7; }
.faces__more span { display: block; color: var(--slate-500); font-size: .6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; margin-bottom: .375rem; }

/* Topic card additions: who the series is for and its facts. */
.rubrica__for { margin-top: 1rem; color: var(--slate-300); font-size: .8125rem; line-height: 1.6; }
.rubrica__for span { display: block; color: var(--fbr-cyan); font-size: .6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; margin-bottom: .25rem; }
.rubrica__facts { list-style: none; padding: 0; margin: 1.25rem 0 0; display: flex; flex-direction: column; gap: .5rem; }
.rubrica__facts li { display: flex; align-items: center; gap: .5rem; color: var(--slate-400); font-size: .8125rem; font-weight: 600; }
.rubrica__facts i { color: var(--fbr-light-purple); flex-shrink: 0; }

/* The logo wall under the mission block. */
.misiune__partners { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--fbr-border-purple); }
.misiune__partnerslead { color: var(--slate-300); font-size: .9375rem; line-height: 1.7; margin-bottom: 1.5rem; }
.misiune__partnerslead span { display: block; color: var(--fbr-cyan); font-size: .6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; margin-bottom: .375rem; }
.collab__alt { margin-top: 2rem; }

/* The magazine cover in the right column of the cross-promotion block. */
.magcover { display: block; width: 100%; max-width: 15rem; margin-bottom: 2rem; }
.magcover img { display: block; width: 100%; height: auto; border-radius: .5rem; box-shadow: 0 25px 50px -12px rgba(0,0,0,.5); transition: transform .3s; }
.magcover:hover img { transform: translateY(-6px); }

/* The three pillars stack in one column: at two per row the third left a hole on desktop. */
@media (min-width: 640px) { .pillars--stacked { grid-template-columns: 1fr; } }

/* The figures, inside the opening section rather than alone between two of them. */
.why__stats { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--slate-200); }

@media (min-width: 640px) { .pillars--stacked { grid-template-columns: 1fr; } }

.why__stats { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--slate-200); }

/* ---------- Video placeholder until marketing cookies are accepted ---------- */
.vgate {
  position: relative; overflow: hidden; display: block; width: 100%;
  aspect-ratio: 16 / 9; border-radius: var(--radius-card);
  border: 1px solid var(--fbr-border-purple); background: var(--fbr-dark-card);
}
.vgate__cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vgate__veil { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(11,2,20,.78), rgba(11,2,20,.9)); }
.vgate__body {
  position: relative; z-index: 2; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .5rem; padding: 1.25rem; text-align: center;
}
.vgate__title { margin: 0; color: #fff; font-weight: 700; font-size: 1rem; line-height: 1.3; }
.vgate__text { margin: 0; color: var(--slate-300); font-size: .8125rem; line-height: 1.45; max-width: 30rem; }
.vgate__play {
  display: flex; align-items: center; justify-content: center;
  width: 4rem; height: 4rem; margin: .35rem 0; border-radius: 9999px;
  background: rgba(255,255,255,.12); border: 2px solid rgba(255,255,255,.55);
  color: #fff; font-size: 1.35rem; padding-left: .2rem;
  transition: transform .3s, background .3s, border-color .3s;
}
.vgate:hover .vgate__play { transform: scale(1.08); background: rgba(255,255,255,.2); border-color: #fff; }
.vgate__btn { margin-top: .35rem; }
@media (max-width: 480px) {
  .vgate__play { width: 3rem; height: 3rem; font-size: 1.05rem; }
  .vgate__text { display: none; }
}

/* Mission section on white: logo wall and note colours. */
.section--white .misiune__partners { border-top-color: var(--slate-200); }
.section--white .misiune__partnerslead { color: var(--slate-700); }
.section--white .misiune__partnerslead span { color: var(--fbr-pink-on-light); }
.section--white .authority__note { color: var(--slate-600); }

/* FAQ heading. */
.faq__head { text-align: center; margin-bottom: 4rem; }
/* FAQ sits on a light section, so the light-background variant applies. */
.faq__eyebrow { color: var(--fbr-pink-on-light); display: block; margin-bottom: .5rem; }
.faq__head h2 { font-size: 1.875rem; color: var(--slate-900); margin-bottom: 1.5rem; }
@media (min-width: 768px) { .faq__head h2 { font-size: 3rem; } }
.faq__head .section-divider { margin: 0 auto 1.5rem; }
.faq__head p { color: var(--slate-600); font-size: 1.125rem; max-width: 48rem; margin: 0 auto; }

/* Close, top right. Dismisses for this visit and records nothing. */
.cookie__inner { position: relative; }
.cookie__close {
  position: absolute; top: .75rem; right: .75rem;
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0;
  background: none; border: 0; border-radius: .5rem; cursor: pointer;
  color: var(--slate-600); font-size: 1rem; line-height: 1;
}
.cookie__close:hover { color: var(--slate-900); background: var(--slate-50); }
.cookie__close:focus-visible { outline: 2px solid var(--fbr-purple); outline-offset: 2px; }
/* Room for the close button, so a long title cannot slide under it. */
.cookie__main .cookie__title, .cookie__settings .cookie__title { padding-right: 2.5rem; }

/* The save button in the settings panel carries the weight. */
.cookie__btn--primary { background: var(--gradient-cta); color: #fff; border-color: transparent; }
.cookie__btn--primary:hover { color: #fff; background: var(--gradient-cta); border-color: transparent; filter: brightness(1.08); }

/* Figures. */
.pfigure { background: var(--fbr-dark-card); border: 1px solid var(--fbr-border-purple); border-radius: 1rem; padding: 1.5rem 1.25rem; }
.pfigure__value { font-size: 1.75rem; font-weight: 900; line-height: 1.1; margin-bottom: .5rem; background: var(--gradient-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }
@media (min-width: 768px) { .pfigure__value { font-size: 2rem; } }
.pfigure__label { color: var(--slate-200); font-size: .8125rem; font-weight: 600; line-height: 1.45; }
/* slate-400, not slate-500: 13px on dark needs at least 4.5:1. */
.pfigure__period { color: var(--slate-400); font-size: .75rem; line-height: 1.5; margin-top: .5rem; }
.pfigures {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px;
  margin: 3rem 0 0; padding: 0;
  background: var(--fbr-border-purple);
  border: 1px solid var(--fbr-border-purple);
  border-radius: 1.25rem; overflow: hidden;
}
@media (min-width: 700px) { .pfigures { grid-template-columns: repeat(4, 1fr); } }
.pfigures .pfigure { border: 0; border-radius: 0; padding: 1.75rem 1.25rem; text-align: center; }
.pfigures .pfigure__value { font-size: 2.25rem; margin-bottom: .35rem; }
.pfigures .pfigure__label { color: #fff; font-size: .875rem; }
.pfigures .pfigure__period { color: var(--slate-400); margin-top: .35rem; }

/* The topics section keeps its centred cards but the heading reads from the left, like
   every other heading on the page. */
.topics--left { text-align: left; }
.topics--left .topics__inner { margin-left: 0; }

/* The shield sits on the heading line, so the copy under it starts at the card edge. */
.cookie__title { display: flex; align-items: center; gap: .75rem; }
.cookie__title .cookie__icon { flex-shrink: 0; }

/* Photo band borders on a light section. */
.section--white .shots__item img, .section--light .shots__item img { border-color: var(--slate-200); }
.section--white .shots__item:hover img, .section--light .shots__item:hover img { border-color: var(--fbr-purple); }

/* Two contact cards per row: four across made each one a column of broken lines. */
@media (min-width: 720px) { .cards--two { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Who organises, and who invoices: two columns so the section uses the container it sits in. */
.whogrid { display: grid; gap: 2.5rem; margin-top: 2rem; }
@media (min-width: 900px) { .whogrid { grid-template-columns: 3fr 2fr; gap: 4rem; } }
.whogrid__col h3 { font-size: 1.125rem; color: var(--slate-900); margin-bottom: 1rem; }
.whogrid__lead { color: var(--slate-600); font-size: .9375rem; line-height: 1.65; margin-bottom: 1rem; }
.whogrid__list { margin: 0; }
.whogrid__list dt { font-weight: 700; color: var(--slate-900); margin-top: 1.25rem; }
.whogrid__list dt:first-child { margin-top: 0; }
.whogrid__list dd { margin: .35rem 0 0; color: var(--slate-700); font-size: .9375rem; line-height: 1.7; }

/* The figures band on a dark section. */
.pfigures--dark { margin-top: 2.5rem; }
.contactpartner__cta { margin-top: 2rem; }

/* ---------- Partner page ---------- */
.partner-hero { padding-block: calc(var(--header-h) + 2rem) 5rem; }
/* Two columns from 1000px. Below that the figures card goes horizontal. */
.partner-hero__grid { display: grid; gap: 2.5rem; align-items: start; }
@media (min-width: 1000px) { .partner-hero__grid { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 4rem; } }
.partner-hero__inner { display: flex; flex-direction: column; align-items: flex-start; gap: 1.25rem; }
/* No 704px cap needed: the grid gives the text its width. */
@media (min-width: 1000px) { .partner-hero h1, .partner-hero__lead { max-width: none; } }

.partner-hero__proof {
  background: var(--fbr-dark-card); border: 1px solid var(--fbr-border-purple);
  border-radius: 1.25rem; padding: 1.5rem;
}
@media (min-width: 1000px) { .partner-hero__proof { padding: 1.75rem; } }
/* On mobile, one ROW per figure, with value and label side by side: three columns
   at 390px wrapped the longest label over four lines. */
.partner-hero__proof dl { display: grid; grid-template-columns: 1fr; gap: .875rem; }
.partner-hero__proof dl > div { display: flex; align-items: baseline; gap: .75rem; }
@media (min-width: 1000px) {
  .partner-hero__proof dl { gap: 1.375rem; }
  .partner-hero__proof dl > div { display: block; }
}
.partner-hero__proof dd {
  margin: 0; font-size: 1.5rem; font-weight: 900; line-height: 1.1; flex-shrink: 0;
  background: var(--gradient-brand); -webkit-background-clip: text; background-clip: text; color: transparent;
}
@media (min-width: 1000px) { .partner-hero__proof dd { font-size: 1.875rem; margin-bottom: .25rem; } }
.partner-hero__proof dt { color: var(--slate-200); font-size: .8125rem; font-weight: 600; line-height: 1.4; }
/* Divider only in the vertical layout, where reading runs top to bottom. */
@media (min-width: 1000px) {
  .partner-hero__proof dl > div + div { padding-top: 1.375rem; border-top: 1px solid var(--fbr-border-purple); }
}
.partner-hero__proof-note {
  margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--fbr-border-purple);
  color: var(--slate-400); font-size: .75rem;
}
.partner-hero__proof-note a { color: var(--fbr-cyan); font-weight: 700; display: inline-flex; align-items: center; min-height: 24px; }
.partner-hero__proof-note a:hover { color: #fff; }
.partner-hero__eyebrow { color: var(--fbr-yellow); display: block; }
.partner-hero h1 { font-size: 1.875rem; font-weight: 900; color: #fff; line-height: 1.15; letter-spacing: -.02em; max-width: 44rem; }
@media (min-width: 768px) { .partner-hero h1 { font-size: 2.75rem; } }
.partner-hero__lead { color: var(--slate-300); font-size: 1.0625rem; line-height: 1.75; max-width: 44rem; }
.partner-hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; width: 100%; margin-top: .5rem; }
@media (min-width: 640px) { .partner-hero__actions { width: auto; } }

/* Section headings. The page alternates light/white/dark backgrounds. */
.partner-about h2, .partner-figures h2, .partner-paths h2, .partner-channel h2,
.partner-why h2, .partner-list h2, .partner-steps h2, .partner-cta h2 { font-size: 1.75rem; font-weight: 800; line-height: 1.2; }
@media (min-width: 768px) {
  .partner-about h2, .partner-figures h2, .partner-paths h2, .partner-channel h2,
  .partner-why h2, .partner-list h2, .partner-steps h2, .partner-cta h2 { font-size: 2.25rem; }
}
.partner-about h2, .partner-paths h2, .partner-channel h2, .partner-why h2, .partner-steps h2 { color: var(--slate-900); }
.partner-figures h2, .partner-list h2, .partner-cta h2 { color: #fff; }
.partner-about .section-divider, .partner-figures .section-divider, .partner-paths .section-divider,
.partner-channel .section-divider, .partner-why .section-divider, .partner-list .section-divider,
.partner-steps .section-divider, .partner-cta .section-divider { margin-block: 1rem 1.75rem; }
.partner-hero__note { color: var(--slate-400); font-size: .875rem; display: flex; align-items: center; gap: .5rem; }
.partner-hero__note i { color: var(--fbr-cyan); }

/* ---- 2. Who we are ---- */
.partner-about__lead { color: var(--slate-600); font-size: 1.0625rem; line-height: 1.75; max-width: 48rem; margin-bottom: 2.5rem; }
.partner-about__grid { display: grid; gap: 1.5rem; }
@media (min-width: 700px) { .partner-about__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .partner-about__grid { grid-template-columns: repeat(4, 1fr); } }
.pabout { background: #fff; border: 1px solid var(--slate-200); border-radius: 1.25rem; padding: 1.75rem; }
.pabout__icon { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: .75rem; background: var(--slate-100); color: var(--fbr-blue); font-size: 1.125rem; margin-bottom: 1.25rem; }
.pabout h3 { color: var(--slate-900); font-size: 1.0625rem; margin-bottom: .625rem; }
.pabout p { color: var(--slate-600); font-size: .9375rem; line-height: 1.7; }

/* ---- 3. Strength figures (on dark) ---- */
.partner-figures__lead { color: var(--slate-300); font-size: 1.0625rem; line-height: 1.75; max-width: 46rem; margin-bottom: 2.5rem; }
/* Six figures: fixed 3 columns from 700px, giving two even rows. */
.partner-figures__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
@media (min-width: 700px) { .partner-figures__grid { grid-template-columns: repeat(3, 1fr); } }
.pfigure { background: var(--fbr-dark-card); border: 1px solid var(--fbr-border-purple); border-radius: 1rem; padding: 1.5rem 1.25rem; }
.pfigure__value { font-size: 1.75rem; font-weight: 900; line-height: 1.1; margin-bottom: .5rem; background: var(--gradient-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }
@media (min-width: 768px) { .pfigure__value { font-size: 2rem; } }
.pfigure__label { color: var(--slate-200); font-size: .8125rem; font-weight: 600; line-height: 1.45; }
/* slate-400, not slate-500: 13px on dark needs at least 4.5:1. */
.pfigure__period { color: var(--slate-400); font-size: .75rem; line-height: 1.5; margin-top: .5rem; }

/* ---- 4. Three routes in ---- */
.partner-paths__lead { color: var(--slate-600); font-size: 1.0625rem; line-height: 1.75; max-width: 46rem; margin-bottom: 2.5rem; }
.partner-paths__grid { display: grid; gap: 1.5rem; }
@media (min-width: 800px) { .partner-paths__grid { grid-template-columns: repeat(3, 1fr); } }
.ppath {
  display: flex; flex-direction: column; align-items: flex-start;
  background: var(--slate-50); border: 1px solid var(--slate-200); border-radius: 1.25rem; padding: 1.75rem;
  transition: border-color .3s, transform .3s, box-shadow .3s;
}
.ppath:hover { border-color: var(--fbr-blue); transform: translateY(-4px); box-shadow: 0 16px 32px -12px rgba(0,107,201,.25); }
.ppath__icon { display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: .875rem; background: #fff; border: 1px solid var(--slate-200); color: var(--fbr-blue); font-size: 1.25rem; margin-bottom: 1.25rem; }
.ppath h3 { color: var(--slate-900); font-size: 1.25rem; margin-bottom: .375rem; }
.ppath__title { color: var(--slate-700); font-size: .875rem; font-weight: 600; margin-bottom: .75rem; }
.ppath__tagline { color: var(--slate-600); font-size: .9375rem; line-height: 1.7; margin-bottom: 1.25rem; }
.ppath__link { margin-top: auto; display: inline-flex; align-items: center; min-height: 24px; gap: .5rem; color: var(--fbr-blue); font-size: .875rem; font-weight: 700; transition: gap .2s; }
.ppath:hover .ppath__link { gap: .75rem; }

/* ---- 5/6/7. One section per channel ---- */
.pchannel__head { max-width: 48rem; margin-bottom: 2.5rem; }
.pchannel__eyebrow { display: inline-flex; align-items: center; gap: .5rem; color: var(--fbr-blue); font-size: .75rem; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; margin-bottom: 1rem; }
.pchannel__tagline { color: var(--slate-800); font-size: 1.125rem; font-weight: 600; line-height: 1.6; margin-bottom: 1rem; }
.pchannel__desc { color: var(--slate-600); font-size: 1.0625rem; line-height: 1.75; }
.pchannel__facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 1rem; margin-bottom: 2.5rem; }
.pchannel__facts li { background: #fff; border: 1px solid var(--slate-200); border-radius: 1rem; padding: 1.25rem; }
.pchannel__facts strong { display: block; color: var(--slate-900); font-size: 1.5rem; font-weight: 900; line-height: 1.1; margin-bottom: .375rem; }
.pchannel__facts span { color: var(--slate-600); font-size: .8125rem; line-height: 1.45; }
/* auto-fit: channels have 3 or 4 formats, so a fixed 4-column grid would gap. */
.pchannel__formats { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.pchannel__cta { margin-top: 2.5rem; }

/* Themed for light backgrounds, since the channel sections are light. */
.pformat { background: #fff; border: 1px solid var(--slate-200); border-radius: 1.25rem; padding: 1.5rem; transition: border-color .3s, transform .3s; }
.pformat:hover { border-color: var(--fbr-blue); transform: translateY(-4px); }
.pformat h3, .pformat h4 { color: var(--slate-900); font-size: 1.0625rem; margin-bottom: .625rem; }
.pformat p { color: var(--slate-600); font-size: .9375rem; line-height: 1.7; margin-bottom: 1.125rem; }
.pformat ul { display: flex; flex-direction: column; gap: .5rem; }
.pformat li { display: flex; gap: .625rem; align-items: flex-start; color: var(--slate-700); font-size: .875rem; line-height: 1.5; }
/* green-500, not green-400, which is invisible on white. */
.pformat li i { color: var(--green-500); margin-top: .25rem; flex-shrink: 0; font-size: .75rem; }

/* ---- Series timeline ---- */
/* The series block: intro and figures on the left, the editions on the right. */
.pchannel__top { display: grid; gap: 2.5rem; margin-bottom: 3rem; }
@media (min-width: 900px) { .pchannel__top { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 3.5rem; } }
.pchannel__main { min-width: 0; }
.pchannel__main .pchannel__facts { margin-bottom: 0; }
.pchannel__aside { min-width: 0; padding: 1.75rem; border-radius: 1.25rem; background: #fff; border: 1px solid var(--slate-200); align-self: start; }
.pchannel__aside .pevents__head { font-size: 1.0625rem; margin-bottom: 1.25rem; }
.pevents__head--formats { margin-top: 0; padding-top: 2.5rem; border-top: 1px solid var(--slate-200); }
.pevents__head { color: var(--slate-900); font-size: 1.375rem; font-weight: 800; margin-bottom: 2rem; }
.pevents__grid { display: grid; gap: 1.5rem; }
@media (min-width: 900px) { .pevents__grid { grid-template-columns: repeat(3, 1fr); } }
.pseries { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--slate-200); border-radius: 1.25rem; padding: 1.75rem; }
.pseries__head { display: flex; flex-direction: column; gap: .5rem; margin-bottom: .875rem; }
.pseries__head h4 { color: var(--slate-900); font-size: 1.125rem; font-weight: 800; }
.pseries__role { align-self: flex-start; background: var(--slate-100); color: var(--slate-700); font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: .25rem .625rem; border-radius: 9999px; }
.pseries__desc { color: var(--slate-600); font-size: .9375rem; line-height: 1.7; margin-bottom: 1.5rem; }
.pseries__timeline { display: flex; flex-direction: column; gap: 0; margin-bottom: 1.25rem; }
.pseries__timeline li { display: flex; gap: 1rem; padding-bottom: 1rem; position: relative; }
/* Timeline rule stops at the last item. */
.pseries__timeline li::before {
  content: ''; position: absolute; left: 1.5625rem; top: 1.75rem; bottom: 0; width: 2px; background: var(--slate-200);
}
.pseries__timeline li:last-child { padding-bottom: 0; }
.pseries__timeline li:last-child::before { display: none; }
.pseries__year {
  flex-shrink: 0; width: 3.25rem; height: 1.75rem; display: inline-flex; align-items: center; justify-content: center;
  background: var(--fbr-blue); color: #fff; font-size: .75rem; font-weight: 800; border-radius: 9999px;
}
.pseries__timeline li.is-upcoming .pseries__year { background: var(--slate-100); color: var(--slate-600); border: 1px dashed var(--slate-400); }
.pseries__body { display: flex; flex-direction: column; gap: .125rem; padding-top: .1875rem; }
.pseries__where { color: var(--slate-900); font-size: .875rem; font-weight: 600; }
.pseries__count { color: var(--slate-600); font-size: .8125rem; }
.pseries__count--soon { color: var(--slate-600); font-style: italic; }
.pseries__total { margin-top: auto; padding-top: 1rem; border-top: 1px dashed var(--slate-200); color: var(--fbr-blue); font-size: .875rem; font-weight: 800; }

/* ---- 8. Partner brands ---- */
/* Six slots: two columns on mobile, four on desktop. */
.partner-list__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; align-items: center; }
@media (min-width: 700px) { .partner-list__grid { grid-template-columns: repeat(4, 1fr); } }
.partner-list__grid li { display: flex; align-items: center; justify-content: center; min-height: 5rem; padding: 1rem; background: #fff; border: 1px solid var(--slate-200); border-radius: .875rem; }
.partner-list__grid img { max-height: 3rem; width: auto; height: auto; object-fit: contain; }
.partner-list__grid span { color: var(--slate-700); font-weight: 700; font-size: .875rem; text-align: center; }

/* ---- 9. Why it is worth it now ---- */
.partner-why__grid { display: grid; gap: 1.5rem; }
@media (min-width: 800px) { .partner-why__grid { grid-template-columns: repeat(3, 1fr); } }
.partner-why__card { background: #fff; border: 1px solid var(--slate-200); border-radius: 1.25rem; padding: 1.75rem; }
.partner-why__icon { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: .75rem; background: var(--slate-100); color: var(--fbr-blue); font-size: 1.125rem; margin-bottom: 1.25rem; }
.partner-why__card h3 { color: var(--slate-900); font-size: 1.0625rem; margin-bottom: .625rem; }
.partner-why__card p { color: var(--slate-600); font-size: .9375rem; line-height: 1.7; }

.partner-steps__list { display: flex; flex-direction: column; gap: 1.75rem; }
.partner-steps__list li { display: flex; gap: 1.25rem; align-items: flex-start; }
.partner-steps__num { flex-shrink: 0; font-size: 1.5rem; font-weight: 900; letter-spacing: -.02em; background: var(--gradient-cta); -webkit-background-clip: text; background-clip: text; color: transparent; min-width: 2.5rem; }
.partner-steps__list h3 { color: var(--slate-900); font-size: 1.0625rem; margin-bottom: .375rem; }
.partner-steps__list p { color: var(--slate-600); font-size: .9375rem; line-height: 1.7; }

/* The form column is the dominant one: two-column fields need the width, and
   the pitch beside it is short. */
.partner-cta__grid { display: grid; gap: 2.5rem; align-items: start; }
@media (min-width: 950px) { .partner-cta__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: 3.5rem; } }
@media (min-width: 1280px) { .partner-cta__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 4rem; } }
.partner-cta__pitch p { color: var(--slate-300); font-size: 1.0625rem; line-height: 1.75; max-width: 34rem; }
.partner-cta__contact { margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid var(--fbr-border-purple); }
.partner-cta__contact-label { color: var(--slate-400); font-size: .6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; margin-bottom: .875rem; }
.partner-cta__contact-person { display: flex; flex-direction: column; margin-bottom: .5rem; }
.partner-cta__contact-person strong { color: #fff; font-weight: 600; }
.partner-cta__contact-person span { color: var(--slate-400); font-size: .875rem; }
.partner-cta__email { color: var(--fbr-cyan); font-weight: 600; word-break: break-all; display: inline-flex; align-items: center; min-height: 24px; }
.partner-cta__email:hover { color: #fff; }
/* General brochure, free download. The block renders only if the PDF exists. */
.partner-cta__brochure { margin-top: 2rem; padding-top: 2rem; border-top: 1px solid var(--fbr-border-purple); }
.partner-cta__brochure-title { color: #fff; font-size: 1rem; font-weight: 700; margin-bottom: .5rem; }
.partner-cta__brochure p { color: var(--slate-300); font-size: .9375rem; line-height: 1.7; margin-bottom: 1.25rem; }
.partner-cta__box { background: var(--fbr-dark-card); border: 1px solid var(--fbr-border-purple); border-radius: 1.5rem; padding: 1.75rem; }
@media (min-width: 640px) { .partner-cta__box { padding: 2.5rem; } }
.partner-cta__form-title { color: #fff; font-size: 1.25rem; margin-bottom: 1.75rem; }

.partner-sent { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; }
.partner-sent__icon { font-size: 2.5rem; color: var(--green-400); line-height: 1; }
.partner-sent h3 { color: #fff; font-size: 1.375rem; }
.partner-sent p { color: var(--slate-300); line-height: 1.7; }

/* Green tokens for the confirmation state. */
:root {
  --green-400: #4ade80;
  --green-500: #22c55e;
}

/* Panels on white sections get a light fill. */
.section--white .pchannel__aside,
.section--white .pchannel__facts li,
.section--white .pformat { background: var(--slate-50); }

/* Home films: the edition under each one. */
.videogrid > li { min-width: 0; }
.videogrid__caption { margin: .75rem 0 0; color: var(--slate-300); font-size: .9375rem; font-weight: 600; }
.videogrid__caption a { display: inline-flex; align-items: center; min-height: 24px; color: var(--fbr-cyan); }
.videogrid__caption a:hover { color: #fff; }