@font-face {
  font-family: "Manrope";
  src: url("../assets/manrope-regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Manrope";
  src: url("../assets/manrope-medium.ttf") format("truetype");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "Manrope";
  src: url("../assets/manrope-bold.ttf") format("truetype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Manrope";
  src: url("../assets/manrope-extrabold.ttf") format("truetype");
  font-style: normal;
  font-weight: 800;
  font-display: swap;
}

/* Brand display faces, converted to woff2 from the MGP Medium (500) OTF masters.
   The default-width cuts are the correct ones: their glyph advances match the
   Figma text widths to within ~1px, whereas the Narrow/Wide/Expanded cuts are
   25-40% off. */
@font-face {
  font-family: "MGP Display";
  src: url("../assets/mgp-display.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "MGP Display";
  src: url("../assets/mgp-display-regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "MGP Inline";
  src: url("../assets/mgp-inline-regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "MGP Inline";
  src: url("../assets/mgp-inline.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "JetBrains Mono";
  src: url("../assets/jetbrains-mono-regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "JetBrains Mono";
  src: url("../assets/jetbrains-mono-medium.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "Manrope";
  src: url("../assets/manrope-semibold.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

:root {
  color-scheme: light;
  font-family: "Manrope", Arial, sans-serif;
  font-synthesis: none;
  text-rendering: geometricPrecision;
  --navy-900: #0a1a33;
  --navy-700: #20375b;
  --orange-500: #f59300;
  --orange-700: #b86e00;
  --blue-500: #026eb5;
  --slate-500: #525f7a;
  --hairline: #c2c9d6;
  --live-green: #00b87a;
  --cream-100: #fff7eb;
  --font-display: "MGP Display", "Manrope", Arial, sans-serif;
  --font-inline: "MGP Inline", "Manrope", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
}

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

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

html,
body {
  min-width: 320px;
  min-height: 100%;
  margin: 0;
}

/* html-qualified so the SDK's injected `body { background-color: #fff }` cannot
   repaint the page once the login has been opened. */
html body {
  background: #e9e7e4;
}

.page {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  overflow: hidden;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

button {
  font: inherit;
}

.hero {
  position: relative;
  width: 100%;
  aspect-ratio: 360 / 800;
  overflow: hidden;
  isolation: isolate;
  background: #f6f3ef;
}

.hero__background {
  position: absolute;
  z-index: -1;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  user-select: none;
}

.site-header {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  /* mweb runs menu + logo from the left with the CTA pushed right, so the
     spacing comes from the CTA's auto margin rather than space-between. */
  justify-content: flex-start;
  gap: 8px;
  width: 100%;
  height: 56px;
  padding: 8px 12px;
  background: #fff;
}

.brand,
.menu-button {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 8px;
  border: 0;
  background: transparent;
}

.brand {
  order: 2;
  width: 90px;
}

.brand img {
  display: block;
  width: 74px;
  height: 24px;
  object-fit: contain;
}

.menu-button {
  order: 1;
  width: 40px;
  cursor: pointer;
}

.menu-button img {
  display: block;
  width: 24px;
  height: 24px;
}

.desktop-nav {
  display: none;
}

/* Continue Voting CTA (Figma nodes 869:24845 desktop, 869:25499 mweb). On mweb
   it reads "Vote Now" and the header runs menu, logo, then the CTA pushed to
   the right edge. */
/* Author display rules outrank the UA [hidden] rule, so hiding these needs
   saying explicitly. Both are withdrawn when the categories API fails. */
.categories-section[hidden],
.continue-voting[hidden] {
  display: none;
}

.continue-voting {
  display: inline-flex;
  order: 4;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  padding: 8px 16px;
  border: 1.2px solid #fff7eb;
  border-radius: 1000px;
  background: linear-gradient(90deg, var(--orange-700) 0%, #ffad33 55%, #ffdead 100%);
  color: #fff7eb;
  font-family: "Manrope", Arial, sans-serif;
  font-size: 12px;
  font-weight: 700;
  line-height: 16px;
  cursor: pointer;
  box-shadow: 0 4px 16px rgb(245 147 0 / 24%);
  transition:
    box-shadow 300ms ease-out,
    transform 300ms ease-out;
}

.continue-voting:hover,
.continue-voting:focus-visible {
  box-shadow: 0 6px 20px rgb(245 147 0 / 36%);
  transform: translateY(-1px);
}

.continue-voting__label {
  white-space: nowrap;
}

/* The long label with the running count is desktop only. */
.continue-voting__label--full {
  display: none;
}

/* mweb with votes cast (Figma 869:26173): the count replaces "Vote Now" and
   the arrow is hidden, which is what makes room for the longer label. */
.continue-voting[data-has-votes="true"] .continue-voting__label--short {
  display: none;
}

.continue-voting[data-has-votes="true"] .continue-voting__label--full {
  display: inline;
}

.continue-voting[data-has-votes="true"] .continue-voting__icon {
  display: none;
}

/* Every votable award voted: the CTA stops inviting a vote and offers a review
   instead. Overrides both other labels at either breakpoint. */
.continue-voting__label--done {
  display: none;
}

.continue-voting[data-complete="true"] .continue-voting__label--short,
.continue-voting[data-complete="true"] .continue-voting__label--full {
  display: none;
}

.continue-voting[data-complete="true"] .continue-voting__label--done {
  display: inline;
}

.continue-voting__icon {
  display: block;
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
}

.site-header__account-actions {
  display: contents;
}

.user-account {
  position: relative;
  z-index: 3;
  display: none;
  order: 3;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.user-account__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #18365f;
  color: #fff;
  font-family: "Manrope", Arial, sans-serif;
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
}

.user-account__avatar:focus-visible,
.user-account__logout:focus-visible {
  outline: 2px solid #0875bc;
  outline-offset: 2px;
}

.user-account__dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  display: none;
  min-width: 112px;
  padding: 6px;
  border: 1px solid rgb(24 54 95 / 14%);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 8px 24px rgb(0 0 31 / 18%);
}

.user-account__dropdown::before {
  position: absolute;
  top: -9px;
  right: 0;
  left: 0;
  height: 9px;
  content: "";
}

.user-account:hover .user-account__dropdown,
.user-account:focus-within .user-account__dropdown {
  display: block;
}

.user-account__logout {
  width: 100%;
  padding: 8px 12px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #18365f;
  font-family: "Manrope", Arial, sans-serif;
  font-size: 13px;
  font-weight: 700;
  line-height: 18px;
  text-align: left;
  cursor: pointer;
}

.user-account__logout:hover {
  background: #eef6fc;
}

/* mweb order: menu, logo, account, CTA — set on the controls above. */

body.menu-open,
body.panel-modal-open,
body.vote-modal-open {
  overflow: hidden;
}

.mobile-menu {
  position: fixed;
  z-index: 1000;
  inset: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100dvh;
  overflow-y: auto;
  background-color: #00001f;
  background-image: radial-gradient(
    50% 157% at 50% 0%,
    #0286de 0%,
    #01558d 100%
  );
  color: #fff;
}

/* Author display rules beat the UA's [hidden] { display: none }, so blocks that
   are switched off for launch need this to actually disappear. */
[hidden] {
  display: none !important;
}

.mobile-menu[hidden] {
  display: none;
}

/* Close on the left, logo on the right. */
.mobile-menu__header {
  display: flex;
  flex: 0 0 72px;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 72px;
  padding: 16px 8px 16px 16px;
}

.mobile-menu__close {
  position: relative;
  display: flex;
  flex: 0 0 40px;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 8px;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.mobile-menu__close span,
.mobile-menu__close span::after {
  position: absolute;
  width: 15px;
  height: 1.6px;
  border-radius: 2px;
  background: #ccc;
}

.mobile-menu__close span {
  transform: rotate(45deg);
}

.mobile-menu__close span::after {
  left: 0;
  transform: rotate(-90deg);
  content: "";
}

.mobile-menu__logo {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
}

.mobile-menu__logo img {
  display: block;
  width: 135px;
  height: 40px;
  object-fit: contain;
}

.mobile-menu__navigation {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 24px;
}

.mobile-menu__navigation a {
  padding: 6px 0;
  color: #fff;
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 400;
  line-height: 36px;
  letter-spacing: 0.336px;
  text-decoration: none;
}

.mobile-menu__logout {
  width: fit-content;
  padding: 6px 0;
  border: 0;
  background: transparent;
  color: #fff;
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 400;
  line-height: 36px;
  letter-spacing: 0.336px;
  text-align: left;
  cursor: pointer;
}

.mobile-menu__logout:hover {
  color: #ffad33;
}

/* Pushes the follow-us and legal blocks to the bottom of the sheet. */
.mobile-menu__spacer {
  flex: 1 1 auto;
  min-height: 0;
}

.mobile-menu__social-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 48px 24px 24px;
}

.mobile-menu__social-title {
  margin: 0;
  color: #dfe3ec;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
}

.mobile-menu__socials {
  display: flex;
  align-items: center;
  gap: 16px;
}

.mobile-menu__socials a {
  display: flex;
  flex: 0 0 32px;
  align-items: center;
  justify-content: center;
  height: 32px;
  border-radius: 50%;
  background: rgb(255 255 255 / 20%);
}

.mobile-menu__socials img {
  display: block;
  width: 16px;
  height: 16px;
}

.mobile-menu__footer {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding: 24px 24px 48px;
}

.mobile-menu__footer > span {
  display: block;
  height: 1px;
  background: #f2f4f8;
}

.mobile-menu__footer p {
  margin: 0;
  color: #ccc;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
}

.mobile-menu a:focus-visible,
.mobile-menu__close:focus-visible,
.mobile-menu__logout:focus-visible {
  outline: 2px solid #ffad33;
  outline-offset: 2px;
}

.menu-button:focus-visible,
.brand:focus-visible,
.notify-button:focus-visible,
.desktop-nav a:focus-visible {
  outline: 2px solid #0875bc;
  outline-offset: 2px;
}

.hero__content {
  position: absolute;
  z-index: 1;
  top: 72px;
  right: 16px;
  bottom: 24px;
  left: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero__badges {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap  /* two pills exceed 360px on one line */;
}

.hero-badge {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  margin: 0;
  /* Right padding is 14px, not 16px: CSS letter-spacing appends a trailing 2px
     space after the last glyph that Figma does not, so trimming it here keeps
     the pill at the spec'd 216px with 16px of visual space on both sides. */
  padding: 8px 14px 8px 16px;
  border: 1px solid var(--hairline);
  border-radius: 32px;
  background: rgb(255 255 255 / 20%);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  color: var(--slate-500);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  letter-spacing: 2px;
  text-transform: uppercase;
  white-space: nowrap;
}

.hero-badge--live {
  /* Now a link into the awards grid, so it is shown at every width. */
  display: flex;
  border-color: var(--live-green);
  color: var(--live-green);
  cursor: pointer;
  text-decoration: none;
}

.hero-badge--live:hover,
.hero-badge--live:focus-visible {
  background: rgb(255 255 255 / 32%);
}

.hero-badge__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--live-green);
}

.awards-title {
  display: flex;
  flex-direction: column;
  margin: 12px 0 0;
  text-align: center;
}

/* Line-by-line reveal lifted from the Version 2 prototype: each line is a mask
   and the text slides up out of it, staggered. */
.awards-title__line {
  display: block;
  overflow: hidden;
}

.awards-title__line > span {
  display: inline-block;
  transform: translateY(110%);
  transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.awards-title.is-visible .awards-title__line > span {
  transform: translateY(0);
}

.awards-title__line:nth-child(1) > span {
  transition-delay: 50ms;
}

.awards-title__line:nth-child(2) > span {
  transition-delay: 180ms;
}

.awards-title__line:nth-child(3) > span {
  transition-delay: 310ms;
}

.awards-title__line > span {
  color: var(--blue-500);
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: 500;
  line-height: 52.8px;
  letter-spacing: 0.48px;
}

/* Per-line overrides are scoped as children so they outrank `.awards-title__line > span`,
   which would otherwise win on specificity and flatten the gradients. */
.awards-title__line > .awards-title__wordmark {
  background-image: linear-gradient(90deg, #b86e00 0%, #f59300 50%, #ffad33 100%);
  font-size: 34px;
  line-height: 44.9px;
  letter-spacing: 0.41px;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.awards-title__line > .awards-title__year {
  font-family: var(--font-inline);
}

.hero__description {
  margin: 12px 0 0;
  color: var(--slate-500);
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  text-align: center;
}

.hero__actions {
  display: flex;
  margin-top: 16px;
}

.notify-button {
  display: flex;
  padding: 2px;
  border: 0;
  border-radius: 100px;
  background: linear-gradient(135deg, #b86e00 0%, #ffad33 55%, #ffdead 100%);
  box-shadow: 0 16px 32px -16px rgb(184 110 0 / 40%);
  cursor: pointer;
  /* The footer CTA uses this class on an <a>, so the UA underline is removed. */
  text-decoration: none;
  transition: transform 160ms ease, box-shadow 160ms ease;
}

/* Figma draws the 1.2px ring as an INSIDE stroke, which does not affect the
   frame size. An inset shadow reproduces that; a real border would inflate
   the pill past the 143x52 / 175x60 spec. */
.notify-button > span {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 32px;
  border-radius: 100px;
  background: linear-gradient(135deg, #b86e00 0%, #ffad33 55%, #ffdead 100%);
  box-shadow: inset 0 0 0 1.2px var(--cream-100);
  color: var(--cream-100);
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  white-space: nowrap;
}

.notify-button:hover {
  transform: translateY(-1px);
}

.notify-button:active,
.notify-button.is-pressed {
  transform: translateY(1px);
}

.hero-stats {
  display: flex;
  gap: 16px;
  width: 100%;
  margin-top: auto;
}

.hero-stat {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: 4px;
  text-align: center;
}

.hero-stat__value {
  background-image: linear-gradient(180deg, #000033 0%, #000099 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-family: var(--font-inline);
  font-size: 24px;
  font-weight: 500;
  line-height: 31.7px;
}

.hero-stat__label {
  color: var(--slate-500);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 400;
  line-height: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* The middle stat sits over the dark sedan on mobile, so it inverts to stay legible. */
.hero__rail {
  display: none;
}

.sponsors-section {
  position: relative;
  width: 100%;
  padding: 48px 24px;
  overflow: hidden;
  background-color: #05070c;
  background-image: radial-gradient(50% 157% at 50% 0%, #0286de 0%, #01558d 100%);
}

.sponsors-section__container {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.sponsors-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding-top: 0;
}

.sponsors-header__eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0;
  color: #ffc670;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: 4px;
  text-transform: uppercase;
}

/* The 1440 frame sets this at 52px with a hard two-line break. That break cannot
   survive at 360px - the longer line would need ~15px to fit - so the mobile
   size is scaled down and allowed to wrap naturally. The mobile Figma frame
   still specifies Fraunces here, a face no longer used anywhere else in the
   design, so MGP Display is carried over from the desktop frame instead. */
.sponsors-header__title {
  margin: 0;
  color: #fff;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 400;
  line-height: 36px;
  text-align: center;
}

/* Figma's 1px INSIDE stroke does not grow the frame, so an inset shadow is used
   here too - a real border would add 2px to the card height. */
.title-partner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 32px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgb(184 110 0 / 20%) 0%, rgb(184 110 0 / 0%) 100%);
  box-shadow: inset 0 0 0 1px var(--orange-700);
  text-align: center;
}

.title-partner__label {
  margin: 0;
  color: #ffad33;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: 4px;
  text-transform: uppercase;
}

.title-partner__name {
  margin: 0;
  padding: 12px 0;
  color: #fffbf5;
  font-size: 32px;
  font-weight: 700;
  line-height: 48px;
  white-space: nowrap;
}

.title-partner__description {
  margin: 0;
  color: #ccc;
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
}

.partner-group {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.partner-group__label {
  margin: 0;
  padding-top: 0;
  color: #b3b3b3;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  letter-spacing: 4px;
  text-align: center;
  text-transform: uppercase;
}

/* Edge fade uses mask rather than a colour overlay, so it stays correct
   regardless of the section background behind it. */
.partner-marquee {
  display: flex;
  width: 100%;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent 0%, #000 15%, #000 85%, transparent 100%);
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0%,
    #000 15%,
    #000 85%,
    transparent 100%
  );
  min-height: 48px;
  align-items: center;
}

/* Trailing padding equals the item gap so translating one full track width
   lands the duplicate exactly where the original started. */
.partner-marquee__track {
  display: flex;
  flex: 0 0 auto;
  gap: 32px;
  margin: 0;
  padding: 0 32px 0 0;
  list-style: none;
  animation: partner-marquee 30s linear infinite;
}

.partner-marquee__track li {
  color: #ccc;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 400;
  line-height: 32px;
  white-space: nowrap;
}

@keyframes partner-marquee {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-100%);
  }
}

.sessions-section {
  width: 100%;
  padding: 48px 16px;
  background: var(--cream-100);
}

.sessions-section__inner {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.sessions-head {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0;
}

.sessions-head__reveal {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sessions-head__eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--orange-500);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: 4px;
  text-transform: uppercase;
}

.sessions-head__title {
  margin: 0;
  color: var(--blue-500);
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 400;
  line-height: 36px;
}

.sessions-head__note {
  margin: 0;
  color: #585f73;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
}

/* Horizontal filmstrip. Scroll-snap gives the chevrons and native swipe the
   same stopping points. */
.sessions-filmstrip {
  display: flex;
  gap: 32px;
  margin: 0;
  padding: 0;
  overflow-x: visible;
  list-style: none;
  scroll-snap-type: none;
  scrollbar-width: none;
  flex-direction: column;
}

.sessions-filmstrip::-webkit-scrollbar {
  display: none;
}

/* isolation creates a stacking context so the z-index:-2 photo paints above the
   card's own opaque background instead of behind it. */
.session-card {
  position: relative;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  justify-content: flex-end  /* only the info block remains, and it sits at the bottom */;
  height: 246px;
  padding: 16px;
  overflow: hidden;
  border-radius: 16px;
  background: #026eb6;
  isolation: isolate;
  scroll-snap-align: start;
}

.session-card__image {
  position: absolute;
  z-index: -2;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
}

/* Blue wash sits over the photo at 20%, matching the card's second fill. */
.session-card::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: rgb(2 110 182 / 20%);
  content: "";
}

/* Bottom scrim. The mask supplies the alpha ramp so the colour and the 8px
   backdrop blur fade in together, as the Figma gradient + background blur do. */
.session-card::after {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: #000c14;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  mask-image: linear-gradient(
    180deg,
    transparent 75%,
    rgb(0 0 0 / 50%) 88%,
    #000 100%
  );
  -webkit-mask-image: linear-gradient(
    180deg,
    transparent 75%,
    rgb(0 0 0 / 50%) 88%,
    #000 100%
  );
  content: "";
}

.session-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.session-card__badge {
  margin: 0;
  /* Right padding trimmed by 2px to absorb the trailing letter-space CSS adds
     after the last glyph, keeping the pill at the spec'd 107px. */
  padding: 4px 8px;
  border: 1px solid #e8ac42;
  border-radius: 24px;
  background: rgb(232 172 66 / 16%);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color: #e8ac42;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  letter-spacing: 2px;
  text-transform: uppercase;
  white-space: nowrap;
}

.session-card__play {
  display: none;
  flex: 0 0 50px;
  align-items: center;
  justify-content: center;
  height: 50px;
  padding: 0;
  border: 1px solid #e8ac42;
  border-radius: 50%;
  background: rgb(232 172 66 / 16%);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  cursor: pointer;
}

.session-card__play-icon {
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 10px solid #fff;
}

.session-card__info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.session-card__kicker {
  margin: 0;
  color: #e8ac42;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.session-card__title {
  margin: 0;
  color: #f3f1ea;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
}

/* Figma hides the description and time; they are the card's hover state. */
.session-card__reveal {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 0;
  margin-top: -4px;
  overflow: hidden;
  opacity: 0;
  transition:
    max-height 320ms ease,
    margin-top 320ms ease,
    opacity 220ms ease;
}

.session-card__description {
  margin: 0;
  color: #8a8fa3;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
}

@media (hover: hover) {
  .session-card:hover .session-card__reveal {
    max-height: 120px;
    margin-top: 0;
    opacity: 1;
    transition-delay: 300ms;
  }
}

.session-card:focus-within .session-card__reveal {
  max-height: 120px;
  margin-top: 0;
  opacity: 1;
}

.sessions-progress {
  display: none;
  align-items: center;
  gap: 16px;
  padding: 0 16px;
}

.sessions-progress__count {
  margin: 0;
  color: #585f73;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  white-space: nowrap;
}

.sessions-progress__bar {
  flex: 1 1 auto;
  height: 2px;
  border-radius: 4px;
  background: rgb(11 18 32 / 10%);
}

.sessions-progress__fill {
  display: block;
  width: 25%;
  height: 2px;
  border-radius: 4px;
  background: #006eb8;
  transition: width 240ms ease;
}

.sessions-progress__control {
  position: relative;
  flex: 0 0 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 48px;
  background: #fff;
  cursor: pointer;
}

/* The previous control renders unfilled until it becomes usable, matching the
   disabled treatment in the design. */
.sessions-progress__control:disabled {
  background: transparent;
  cursor: not-allowed;
}

.sessions-progress__control::before {
  position: absolute;
  top: 15px;
  width: 9px;
  height: 9px;
  border-top: 1.5px solid #00253e;
  border-right: 1.5px solid #00253e;
  content: "";
}

.sessions-progress__control:disabled::before {
  border-color: #5b6178;
}

.sessions-progress__control--previous::before {
  left: 17px;
  transform: rotate(-135deg);
}

.sessions-progress__control--next::before {
  left: 14px;
  transform: rotate(45deg);
}

.panel-modal {
  width: calc(100% - 32px);
  max-width: 840px;
  max-height: calc(100dvh - 32px);
  margin: auto;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 24px;
  background: #fff;
  color: var(--navy-900);
  box-shadow: 0 32px 80px rgb(0 14 42 / 32%);
}

.panel-modal::backdrop {
  background: rgb(0 10 31 / 72%);
  backdrop-filter: blur(5px);
}

.panel-modal[open] {
  animation: panel-modal-enter 180ms ease-out;
}

.panel-modal__shell {
  display: flex;
  flex-direction: column;
  max-height: calc(100dvh - 32px);
}

.panel-modal__header {
  position: relative;
  flex: 0 0 auto;
  padding: 24px 56px 24px 24px;
  overflow: hidden;
  background:
    radial-gradient(circle at 100% 0%, rgb(50 151 255 / 38%), transparent 42%),
    linear-gradient(135deg, #071832 0%, #102f63 58%, #123f82 100%);
  color: #fff;
}

.panel-modal__header::after {
  position: absolute;
  right: -38px;
  bottom: -74px;
  width: 168px;
  height: 168px;
  border: 24px solid rgb(255 255 255 / 7%);
  border-radius: 50%;
  content: "";
  pointer-events: none;
}

.panel-modal__heading {
  position: relative;
  z-index: 1;
}

.panel-modal__heading p {
  margin: 0 0 10px;
  color: #8fcfff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  line-height: 16px;
  text-transform: uppercase;
}

.panel-modal__heading h2 {
  max-width: 680px;
  margin: 0;
  font-size: 23px;
  font-weight: 700;
  letter-spacing: -0.4px;
  line-height: 31px;
}

.panel-modal__close {
  position: absolute;
  z-index: 2;
  top: 16px;
  right: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid rgb(255 255 255 / 22%);
  border-radius: 50%;
  background: rgb(255 255 255 / 10%);
  cursor: pointer;
}

.panel-modal__close span {
  display: block;
  color: #fff;
  font-size: 28px;
  font-weight: 400;
  line-height: 1;
}

.panel-modal__close:focus-visible {
  outline: 2px solid #9ed5ff;
  outline-offset: 3px;
}

.panel-modal__content {
  display: grid;
  gap: 28px;
  padding: 24px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-color: #9ed5ff transparent;
}

.panel-modal__section h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
  color: var(--navy-900);
  font-size: 18px;
  font-weight: 800;
  line-height: 26px;
}

.panel-modal__section h3::before {
  display: block;
  flex: 0 0 4px;
  width: 4px;
  height: 24px;
  border-radius: 4px;
  background: linear-gradient(180deg, #0275bc 0%, #1f31d0 100%);
  content: "";
}

.panel-modal__section ul {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.panel-modal__section li {
  position: relative;
  margin: 0;
  padding-left: 22px;
  color: var(--navy-700);
  font-size: 14px;
  font-weight: 400;
  line-height: 21px;
}

.panel-modal__section li::before {
  position: absolute;
  top: 7px;
  left: 2px;
  width: 8px;
  height: 8px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #0875bc;
  box-shadow: 0 0 0 2px #9ed5ff;
  content: "";
}

.panel-modal__section--speakers {
  padding: 20px;
  border: 1px solid #cbe8ff;
  border-radius: 16px;
  background: #f0f8ff;
}

.panel-modal__section--speakers li {
  font-weight: 500;
}

@keyframes panel-modal-enter {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* display: flex below outranks the UA [hidden] rule. */
.countdown-section[hidden] {
  display: none;
}

.countdown-section {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 48px 24px;
  overflow: hidden;
  gap: 16px;
  background-color: #05070c;
  background-image: radial-gradient(50% 157% at 50% 0%, #0286de 0%, #01558d 100%);
}

.countdown-section__dots {
  display: none;
}

.countdown-section__eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: #ffc670;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: 4px;
  text-transform: uppercase;
}

.countdown-section__title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding-top: 0;
  color: var(--cream-100);
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 400;
  line-height: 38px;
  text-align: center;
}

.countdown-section__title-accent {
  color: #ffc670;
}

.countdown-section__description {
  margin: 0;
  color: #e6e6e6;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  text-align: center;
}

.countdown-clock {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 4px;
  padding-top: 4px;
}

.countdown-clock__unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

/* Deadline passed: the clock reads 00:00:00:00, so it is dimmed rather than
   left glowing as though it were still running. */
.countdown-clock.is-elapsed {
  opacity: 0.55;
}

.countdown-clock__unit strong {
  background-image: linear-gradient(225deg, #ffdead 0%, #ffad33 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-family: var(--font-inline);
  font-size: clamp(24px, 10vw, 48px)  /* 4 units must fit a 360px screen */;
  font-weight: 400;
  line-height: 1.33;
  /* Applied to the element, not the clipped text, so the glow still renders. */
  filter: drop-shadow(0 0 20px rgb(232 172 66 / 25%));
}

.countdown-clock__unit span {
  color: #ccc;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  letter-spacing: 3.2px;
  text-transform: uppercase;
}

.countdown-clock__separator {
  color: transparent;
  font-family: var(--font-display);
  font-size: clamp(24px, 10vw, 48px);
  font-weight: 400;
  line-height: 1.33;
  filter: drop-shadow(0 0 20px rgb(232 172 66 / 25%));
  background-image: linear-gradient(225deg, #ffdead 0%, #ffad33 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

.voting-notify-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  padding-top: 24px;
}

.voting-notify-form__row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 16px;
}

.voting-notify-form__input {
  width: 100%;
  padding: 12px 24px;
  border: 1px solid #fff;
  border-radius: 100px;
  background: rgb(255 255 255 / 20%);
  color: #fff;
  font-family: inherit;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
}

.voting-notify-form__input::placeholder {
  color: #fff;
  opacity: 1;
}

.voting-notify-form__input:focus-visible {
  outline: 2px solid #ffad33;
  outline-offset: 2px;
}

.notify-button--on-dark {
  justify-content: center;
}

.notify-button--on-dark > span {
  padding: 16px 32px;
  box-shadow: inset 0 0 0 1.2px #fff;
  color: #fff;
}

.countdown-section__hint {
  margin: 0;
  color: #b3b3b3;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  text-align: center;
  text-transform: uppercase;
}

.categories-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 48px 16px;
  gap: 32px;
  background: var(--cream-100);
}

.categories-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 0;
}

.categories-head__eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--orange-500);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: 4px;
  text-transform: uppercase;
}

.categories-head__title {
  margin: 0;
  padding-top: 0;
  color: var(--blue-500);
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 400;
  line-height: 36px;
  text-align: center;
  letter-spacing: 0.8px;
}

.categories-head__list {
  margin: 0;
  padding-top: 0;
  color: #585f73;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  text-align: center;
}

/* Tabs scroll horizontally on narrow screens rather than wrapping. */
.category-tabs {
  display: flex;
  gap: 8px;
  width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}

.category-tabs::-webkit-scrollbar {
  display: none;
}

.category-tab {
  position: relative;
  flex: 0 0 auto;
  padding: 8px 16px 12px;
  border: 0;
  background: transparent;
  color: #585f73;
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
}

.category-tab::after {
  position: absolute;
  right: 16px;
  bottom: 0;
  left: 16px;
  height: 2px;
  border-radius: 2px;
  background: var(--orange-700);
  content: "";
  opacity: 0;
  transition: opacity 160ms ease;
}

.category-tab.is-active {
  color: #0b1220;
}

.category-tab.is-active::after {
  opacity: 1;
}

/* ---------------------------------------------------------- featured vote */
.featured-vote {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  max-width: 1280px;
}

.featured-vote[hidden] {
  display: none;
}

.featured-vote__head {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
}

.featured-vote__eyebrow {
  margin: 0;
  color: var(--orange-700);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.featured-vote__title {
  margin: 0;
  color: var(--blue-500);
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 400;
  line-height: 36px;
  text-transform: uppercase;
}

.featured-vote__description {
  margin: 0;
  color: var(--slate-500);
  font-size: 14px;
  line-height: 20px;
}

.featured-vote__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  width: 100%;
}

.featured-vote__grid .vote-card {
  min-width: 0;
}

.featured-vote__disclaimer {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  margin: 0;
  padding: 6px 10px;
  border-radius: 100px;
  background: #fff;
  color: var(--orange-700);
  font-size: 12px;
  line-height: 16px;
}

.featured-vote__disclaimer-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border: 1px solid currentcolor;
  border-radius: 50%;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
}

.category-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  order: 3;
}

.featured-vote {
  order: 2;
}

.category-tabs {
  order: 1;
}

.category-grid,
.featured-vote,
.category-tabs {
  max-width: 1280px;
}

.category-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 16px;
  border-radius: 16px;
  background: #026eb6;
  box-shadow: 0 16px 48px rgb(0 131 245 / 8%);
  /* isolate so the ::before overlay can sit above the card's own background */
  isolation: isolate;
  transition:
    box-shadow 240ms ease,
    transform 240ms ease;
}

/* display:flex on the card beats the UA's [hidden] { display: none }, so the
   filter's hidden attribute needs an explicit rule to take effect. */
.category-card[hidden] {
  display: none;
}

/* Highlighted treatment: layered radials, a warm hairline and an orange glow.
   background-image cannot be transitioned, so the gradients live on an overlay
   whose opacity animates instead. */
.category-card::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: inherit;
  background-image:
    radial-gradient(50% 150% at 50% 100%, rgb(245 147 0 / 20%) 0%, rgb(245 147 0 / 0%) 100%),
    radial-gradient(50% 93% at 50% 0%, #026eb6 0%, #014979 50%, #01253d 100%);
  opacity: 0;
  transition: opacity 240ms ease;
  content: "";
}

/* Hover is gated behind a real pointer so it cannot stick after a tap;
   focus-within gives keyboard and touch users the same affordance. */
@media (hover: hover) {
  .category-card:hover {
    box-shadow:
      inset 0 0 0 0.4px var(--orange-500),
      0 16px 32px rgb(245 147 0 / 40%);
    transform: translateY(-2px);
  }

  .category-card:hover::before {
    opacity: 1;
  }

  .category-card:hover .category-card__vote {
    color: #ffad33;
  }
}

.category-card:focus-within {
  box-shadow:
    inset 0 0 0 0.4px var(--orange-500),
    0 16px 32px rgb(245 147 0 / 40%);
  transform: translateY(-2px);
}

.category-card:focus-within::before {
  opacity: 1;
}

.category-card:focus-within .category-card__vote {
  color: #ffad33;
}

.category-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.category-card__serial {
  display: flex;
  flex: 0 0 48px;
  align-items: center;
  justify-content: center;
  height: 48px;
  margin: 0;
  border-radius: 10px;
  background: linear-gradient(135deg, #f59300 0%, #ffc670 100%);
  color: #fff;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.category-card__tag {
  margin: 0;
  padding: 4px 8px;
  border-radius: 48px;
  box-shadow: inset 0 0 0 0.4px #fff;
  color: #ccc;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  white-space: nowrap;
}

.category-card__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 6px;
}

.category-card__title {
  margin: 0;
  color: #fff;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
}

.category-card__description {
  margin: 0;
  color: #e6e6e6;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
}

/* Awards with no shortlist: the footer has nothing to say, and the card should
   not invite a click or a hover lift. */
.category-card[data-empty="true"] .category-card__footer {
  display: none;
}

.category-card[data-empty="true"] {
  cursor: default;
}

.category-card[data-empty="true"]:hover,
.category-card[data-empty="true"]:focus-within {
  box-shadow: 0 16px 48px rgb(0 131 245 / 8%);
  transform: none;
}

.category-card[data-empty="true"]:hover::before,
.category-card[data-empty="true"]:focus-within::before {
  opacity: 0;
}

.category-card__vote[hidden] {
  display: none;
}

.category-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto;
  padding-top: 6px;
}

.category-card__nominees {
  color: #ccc;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

/* Vote Now is a real button now, so the inherited control styling is reset.
   It only opens the nominee modal; voting happens on the nominee cards. */
.category-card__vote {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 6px 0;
  border: 0;
  background: none;
  color: #fff;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
  text-decoration: none;
  cursor: pointer;
  transition: color 200ms ease;
}

.category-card__vote-arrow {
  width: 20px;
  height: 20px;
  background-color: currentcolor;
}

/* ---------------------------------------------------- voted category card */
/* Figma 1023:23969. The sheet turns blue, the serial chip keeps its amber
   gradient but swaps the number for a tick on a blue disc, and the pick is
   named in amber gradient text beside a pill thumbnail. */
.category-card[data-voted="true"] {
  background-color: #0299fd;
  background-image: radial-gradient(50% 50% at 50% 100%, #027aca 0%, #0299fd 100%);
  box-shadow: inset 0 0 0 0.4px #ffad33, 0 16px 32px -24px rgb(2 153 253 / 40%);
}

/* The hover overlay would fight the lighter blue sheet. */
.category-card[data-voted="true"]::before {
  display: none;
}

.category-card[data-voted="true"]:hover,
.category-card[data-voted="true"]:focus-within {
  box-shadow: inset 0 0 0 0.4px #ffad33, 0 16px 32px rgb(2 153 253 / 40%);
}

/* The chip keeps the default amber gradient; only its contents change.
   font-size: 0 collapses the "#02" so the tick can sit centred on its own. */
.category-card[data-voted="true"] .category-card__serial {
  position: relative;
  font-size: 0;
}

.category-card[data-voted="true"] .category-card__serial::before {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #027aca;
  content: "";
}

.category-card[data-voted="true"] .category-card__serial::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  background-color: #fff;
  content: "";
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%20-960%20960%20960%22%3E%3Cpath%20d%3D%22m424-296%20282-282-56-56-226%20226-114-114-56%2056%20170%20170Zm56%20216q-83%200-156-31.5T197-197q-54-54-85.5-127T80-480q0-83%2031.5-156T197-763q54-54%20127-85.5T480-880q83%200%20156%2031.5T763-763q54%2054%2085.5%20127T880-480q0%2083-31.5%20156T763-197q-54%2054-127%2085.5T480-80Zm0-80q134%200%20227-93t93-227q0-134-93-227t-227-93q-134%200-227%2093t-93%20227q0%20134%2093%20227t227%2093Z%22%2F%3E%3C%2Fsvg%3E");
  mask-repeat: no-repeat;
  mask-size: contain;
  transform: translate(-50%, -50%);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%20-960%20960%20960%22%3E%3Cpath%20d%3D%22m424-296%20282-282-56-56-226%20226-114-114-56%2056%20170%20170Zm56%20216q-83%200-156-31.5T197-197q-54-54-85.5-127T80-480q0-83%2031.5-156T197-763q54-54%20127-85.5T480-880q83%200%20156%2031.5T763-763q54%2054%2085.5%20127T880-480q0%2083-31.5%20156T763-197q-54%2054-127%2085.5T480-80Zm0-80q134%200%20227-93t93-227q0-134-93-227t-227-93q-134%200-227%2093t-93%20227q0%20134%2093%20227t227%2093Z%22%2F%3E%3C%2Fsvg%3E");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
}

.category-card[data-voted="true"] .category-card__tag {
  box-shadow: inset 0 0 0 0.4px #ffdead;
  color: #fff7eb;
}

.category-card[data-voted="true"] .category-card__title {
  color: #ffdead;
}

.category-card[data-voted="true"] .category-card__description {
  color: #ffdead;
}

.category-card[data-voted="true"] .category-card__nominees {
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  line-height: 28px;
  text-transform: none;
}

/* "Vote Now" and its arrow give way to the thumbnail. */
.category-card[data-voted="true"] .category-card__vote > span {
  display: none;
}

.category-card__thumb {
  display: block;
  width: 57px;
  height: 32px;
  flex: 0 0 auto;
  border-radius: 1000px;
  object-fit: cover;
}

/* -----------------------------------------------------------------------------
   Login gate

   Plain overlay: the SSO SDK ships its own stylesheets for everything it
   renders inside .sso-gate__sdk, so this only centres the panel.
   -------------------------------------------------------------------------- */
.sso-gate {
  width: 100vw;
  max-width: none;
  height: 100dvh;
  max-height: none;
  padding: 0;
  border: 0;
  margin: 0;
  background: none;
  overflow: hidden;
}

.sso-gate::backdrop {
  background: rgb(5 8 15 / 80%);
}

/* The SDK lays itself out full-viewport (its own .content-wrap is
   height: calc(100vh - 60px)), so this is only a positioning shell. */
.sso-gate__sdk {
  width: 100%;
  height: 100%;
  overflow: auto;
}

/* The SDK ships one markup tree for two presentations: a full-page login and a
   popup. Only the popup is wanted here, so its page shell is stripped of its
   boxes — display: contents removes .content-wrap's calc(100vh - 60px) height
   and building.png background without touching the DOM, which matters because
   the SDK rebuilds these wrappers on every screen change (phone -> OTP ->
   success). What remains is .signup_popup, which is already a fixed, dimmed,
   self-contained overlay. */
.sso-gate .wrapper,
.sso-gate .content-wrap,
.sso-gate .container {
  display: contents;
}

.sso-gate__close {
  position: fixed;
  z-index: 1;
  top: 16px;
  right: 16px;
  display: flex;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgb(255 255 255 / 90%);
  box-shadow: 0 2px 8px rgb(5 8 15 / 24%);
  cursor: pointer;
}

.sso-gate__close-icon {
  width: 16px;
  height: 16px;
  background-color: var(--navy-900);
}

.sso-gate__loading {
  margin: 0;
  padding: 48px 24px;
  color: #fff;
  font-size: 14px;
  text-align: center;
}

.category-grid__empty {
  margin: 0;
  color: #585f73;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 20px;
  letter-spacing: 1.2px;
  text-align: center;
  text-transform: uppercase;
}

.category-grid__empty[hidden] {
  display: none;
}

.categories-footer {
  display: flex;
  order: 4;
  justify-content: center;
  padding-top: 16px;
}

.categories-footer__more {
  padding: 12px 0;
  border: 0;
  background: transparent;
  color: var(--orange-700);
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
  line-height: 24px;
  letter-spacing: 1.2px;
  cursor: pointer;
  border-bottom: 2px solid #ffad33;
  transition: color 200ms ease, border-bottom-color 200ms ease;
}

/* No underline on hover: the 2px orange rule underneath is already the
   button's line, so a second one just looks like a mistake. */
.categories-footer__more:hover {
  color: #ffad33;
  border-bottom-color: #b86e00;
}

.category-tab:focus-visible,
.categories-footer__more:focus-visible {
  outline: 2px solid #0875bc;
  outline-offset: 2px;
}

.jury-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 48px 16px;
  gap: 24px;
  background: #fffbf5;
}

.jury-head {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  padding-top: 0;
}

.jury-head__eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--orange-500);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: 4px;
  text-transform: uppercase;
}

.jury-head__title {
  display: flex;
  flex-direction: column;
  margin: 0;
  color: var(--blue-500);
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 400;
  line-height: 36px;
  letter-spacing: 0.8px;
}

.jury-head__note {
  margin: 0;
  color: #585f73;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
}

.jury-panel {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
}

.jury-panel__featured,
.jury-panel__grid {
  display: grid;
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.jury-panel__grid {
  grid-template-columns: 1fr;
}

/* The 2026 portraits are full-bleed square photos with their own backgrounds
   baked in, so the card needs no frame asset behind them. The flat colour is
   only a fallback for the moment before the image paints. */
.jury-card {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 16px;
  background: #05080f;
  isolation: isolate;
}

.jury-card--featured {
  border-radius: 32px;
}

/* Portrait fills the card edge to edge. */
.jury-card__photo {
  position: absolute;
  inset: 0;
  overflow: hidden;
  isolation: isolate;
}

.jury-card__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

/* The 2026 portraits arrive already colour-graded, so the old #007ACC COLOR
   blend that tinted the cut-outs against the frame is no longer applied. */

/* Bottom scrim. Solid colour plus a mask so the fill and the 4px backdrop blur
   ramp in together. Figma ramps the grid cards from 60% and the featured card
   from 50%, so the two variants get their own stops. */
.jury-card::after {
  position: absolute;
  inset: 0;
  background: #05080f;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  mask-image: linear-gradient(
    180deg,
    transparent 60%,
    rgb(0 0 0 / 50%) 80%,
    #000 100%
  );
  -webkit-mask-image: linear-gradient(
    180deg,
    transparent 60%,
    rgb(0 0 0 / 50%) 80%,
    #000 100%
  );
  content: "";
}

.jury-card--featured::after {
  mask-image: linear-gradient(
    180deg,
    transparent 50%,
    rgb(0 0 0 / 50%) 75%,
    #000 100%
  );
  -webkit-mask-image: linear-gradient(
    180deg,
    transparent 50%,
    rgb(0 0 0 / 50%) 75%,
    #000 100%
  );
}

.jury-card__meta {
  position: absolute;
  z-index: 1;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px;
}

.jury-card__name {
  margin: 0;
  color: #fff;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 400;
  line-height: 32px;
}

.jury-card__role {
  margin: 0;
  color: #e6e6e6;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
}

/* Figma keeps each juror's bio and tags hidden; they are the hover state.
   max-height animates the reveal, and meta's ::before deepens the scrim so the
   extra copy stays legible where it rises above the card's gradient. */
.jury-card__bio {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-height: 0;
  margin-top: -4px;
  overflow: hidden;
  opacity: 0;
  transition:
    max-height 300ms ease,
    margin-top 300ms ease,
    opacity 200ms ease;
}

.jury-card__bio-text {
  margin: 0;
  color: #ccc;
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
}

.jury-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.jury-card__tags li {
  padding: 6px 12px;
  border-radius: 24px;
  background: rgb(255 255 255 / 10%);
  box-shadow: inset 0 0 0 0.5px rgb(255 255 255 / 90%);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #b3b3b3;
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  white-space: nowrap;
}

.jury-card__meta::before {
  position: absolute;
  z-index: -1;
  inset: -40px -16px -16px;
  background: linear-gradient(180deg, rgb(5 8 15 / 0%) 0%, rgb(5 8 15 / 85%) 55%);
  opacity: 0;
  transition: opacity 240ms ease;
  content: "";
}

@media (hover: hover) {
  .jury-card:hover .jury-card__bio {
    max-height: 240px;
    margin-top: 4px;
    opacity: 1;
    transition-delay: 300ms;
  }

  .jury-card:hover .jury-card__meta::before {
    opacity: 1;
    transition-delay: 300ms;
  }
}

.jury-card:focus-within .jury-card__bio {
  max-height: 240px;
  margin-top: 4px;
  opacity: 1;
}

.jury-card:focus-within .jury-card__meta::before {
  opacity: 1;
}

.jury-card--featured .jury-card__name {
  font-size: 20px;
  line-height: 32px;
}

.jury-card--featured .jury-card__role {
  font-size: 16px;
  line-height: 24px;
}

/* Shared icon plumbing. Each .icon-* rule below only supplies the mask shape;
   colour comes from background-color so icons inherit their context. */
[class*="icon-"] {
  display: block;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
}

.evaluate-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 48px 16px;
  gap: 32px;
  background-color: #05070c;
  background-image: radial-gradient(50% 157% at 50% 0%, #0286de 0%, #01558d 100%);
}

.evaluate-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding-top: 0;
}

.evaluate-head__eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: #ffc670;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: 4px;
  text-transform: uppercase;
}

.evaluate-head__title {
  margin: 0;
  padding-top: 0;
  color: #fff;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 400;
  line-height: 36px;
  text-align: center;
}

.evaluate-head__description {
  margin: 0;
  color: #e6e6e6;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  text-align: center;
  margin-top: 6px;
}

.evaluate-timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
  padding-inline: 8px;
}

.evaluate-step {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  padding-block: 16px;
}

/* Mobile connector between consecutive nodes.
   The 32px rhythm lives in each step's padding rather than the list gap, so the
   line below one node and the line above the next meet exactly at the step
   boundary. Each half is anchored to the node (50% + 24px node radius + 8px
   clearance) and runs to the step's edge, which stays exact no matter how tall
   the cards are — the cards here differ by 120px. Negative margins on the outer
   steps keep the section the same height as the old gap-based spacing. */
.evaluate-step:first-child {
  margin-top: -16px;
}

.evaluate-step:last-child {
  margin-bottom: -16px;
}

.evaluate-step:not(:last-child)::after,
.evaluate-step:not(:first-child)::before {
  position: absolute;
  left: 24px;
  width: 2px;
  border-radius: 8px;
  background: linear-gradient(180deg, #b86e00 0%, #ffad33 50%, #ffdead 100%);
  content: "";
  transform: translateX(-50%);
}

.evaluate-step:not(:last-child)::after {
  top: calc(50% + 32px);
  bottom: 0;
}

.evaluate-step:not(:first-child)::before {
  top: 0;
  bottom: calc(50% + 32px);
}

/* Node column sits left of the card on mobile and becomes the centre spine
   on desktop. */
.evaluate-step__node {
  display: flex;
  flex: 0 0 48px;
  align-items: center;
  justify-content: center;
  order: -1;
  height: 48px;
  border-radius: 48px;
  background: #ffad33;
}

.evaluate-step__icon {
  width: 24px;
  height: 24px;
  background-color: #fffbf5;
}

.evaluate-card {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 4px;
  padding: 16px;
  border-radius: 16px;
  background: var(--cream-100);
}

.evaluate-card__number {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  margin: 0;
}

.evaluate-card__number strong {
  color: var(--orange-500);
  font-family: var(--font-inline);
  font-size: 28px;
  font-weight: 400;
  line-height: 36px;
}

.evaluate-card__total {
  color: #ffc670;
  font-family: var(--font-inline);
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
}

.evaluate-card__title {
  margin: 4px 0 0;
  color: #014979;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
}

.evaluate-card__description {
  margin: 0;
  color: var(--navy-700);
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
}

.entrants-section {
  width: 100%;
  padding: 48px 16px;
  background: #fffbf5;
  gap: 24px;
}

.entrants-section__inner {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.entrants-head {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0;
}

.entrants-head__reveal {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.entrants-head__eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--orange-500);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

.entrants-head__title {
  margin: 0;
  color: var(--blue-500);
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 400;
  line-height: 36px;
  letter-spacing: 0;
}

.entrants-head__note {
  margin: 0;
  color: #585f73;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
}

/* Horizontal scroller on narrow screens, five-up row on desktop. */
.entrants-grid {
  display: grid;
  gap: 16px;
  margin: 0;
  padding: 0;
  overflow-x: visible;
  list-style: none;
  scroll-snap-type: none;
  scrollbar-width: none;
  grid-template-columns: repeat(2, minmax(0, 1fr))  /* minmax(0,…) or a long word skews the split */;
}

.entrants-grid::-webkit-scrollbar {
  display: none;
}

.entrant-card {
  display: flex;
  flex: initial;
  flex-direction: column;
  gap: 16px;
  padding: 16px;
  border-radius: 16px;
  background: #026eb6;
  scroll-snap-align: start;
  min-height: 216px;
  position: relative;
  isolation: isolate;
  transition: box-shadow 240ms ease, transform 240ms ease;
}

/* Was a pinned modifier; now an animated hover state like the category cards.
   The gradients sit on an overlay because background-image cannot transition. */
.entrant-card::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: inherit;
  background-image:
    radial-gradient(50% 150% at 50% 100%, rgb(245 147 0 / 20%) 0%, rgb(245 147 0 / 0%) 100%),
    radial-gradient(50% 93% at 50% 0%, #026eb6 0%, #014979 50%, #01253d 100%);
  opacity: 0;
  transition: opacity 240ms ease;
  content: "";
}

@media (hover: hover) {
  .entrant-card:hover::before {
    opacity: 1;
  }

  .entrant-card:hover {
    box-shadow:
      inset 0 0 0 0.4px var(--orange-500),
      0 16px 32px -24px rgb(245 147 0 / 40%);
    transform: translateY(-2px);
  }
}

.entrant-card:focus-within::before {
  opacity: 1;
}

.entrant-card:focus-within {
  box-shadow:
    inset 0 0 0 0.4px var(--orange-500),
    0 16px 32px -24px rgb(245 147 0 / 40%);
  transform: translateY(-2px);
}

/* Figma groups the title and description with an 8px gap, inside the card's
   16px rhythm. Without this wrapper both inherit 16px and the card runs 8px
   over the spec'd 216px height. */
.entrant-card__info {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.entrant-card__badge {
  display: flex;
  flex: 0 0 40px  /* Figma: 40x40 with 8px padding around a 24px icon */;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  padding: 8px;
  box-sizing: border-box;
  position: relative;
}

/* Figma gives the badge a 1px inside gradient stroke and no fill, which is what
   makes the 40x40 box read as a container rather than empty space. A gradient
   border needs the two-layer mask trick, and it has to live on a pseudo-element:
   masking the badge itself would erase the icon inside it. */
.entrant-card__badge::before {
  position: absolute;
  inset: 0;
  border: 1px solid transparent;
  border-radius: inherit;
  background: linear-gradient(135deg, #ffdead 0%, #ffad33 100%) border-box;
  mask:
    linear-gradient(#000 0 0) padding-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
  -webkit-mask:
    linear-gradient(#000 0 0) padding-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  pointer-events: none;
  content: "";
}

/* Supplied as artwork now, so the badge is only a frame for the image. */
.entrant-card__icon {
  display: block;
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.entrant-card__title {
  margin: 0;
  color: var(--cream-100);
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
}

.entrant-card__description {
  margin: 0;
  color: #e6e6e6;
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
}

.entrant-card__title,
.entrant-card__description {
  overflow-wrap: anywhere;
}

.contact-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 48px 24px;
  gap: 32px;
  background-color: #05070c;
  background-image: radial-gradient(50% 157% at 50% 0%, #0286de 0%, #01558d 100%);
}

.contact-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding-top: 0;
}

.contact-head__eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: #ffc670;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: 4px;
  text-transform: uppercase;
}

.contact-head__title {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  padding-top: 0;
  color: #fff;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 400;
  line-height: 36px;
  text-align: center;
}

.contact-head__description {
  margin: 0;
  color: #e6e6e6;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  text-align: center;
  margin-top: 6px;
}

.contact-head__description a {
  color: #ffc670;
}

.contact-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.contact-person {
  display: grid;
  flex-direction: column;
  position: relative;
  grid-template-columns: 54px 1fr;
  column-gap: 16px;
  align-items: start;
  row-gap: 0;
}

.contact-person__top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 0;
  grid-column: 1;
  grid-row: 1 / span 4;
}

/* Figma gives the container no fill; the tinted backdrop sits on the 56px inner
   circle and shows through the cut-out portrait above it. */
.contact-person__avatar {
  flex: 0 0 54px;
  width: 54px;
  height: 54px;
  padding: 3px;
  overflow: hidden;
  border-radius: 50%;
}

/* No photograph supplied for these contacts yet, so the frame stands alone. */
/* No photographs supplied, so the frame carries the person's initials. */
.contact-person__avatar--initials {
  display: flex;
  align-items: center;
  justify-content: center;
  background: url("../assets/contact-avatar-frame.webp") center / cover no-repeat;
  color: #ffc670;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.5px;
  line-height: 1;
}

.contact-person__avatar img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: url("../assets/contact-avatar-frame.webp") center / cover no-repeat;
  object-fit: cover;
  object-position: bottom center;
}

/* Gradient rule runs from the avatar to the end of its column. */
.contact-person__rule {
  flex: 1 1 auto;
  height: 2px;
  border-radius: 8px;
  background: linear-gradient(90deg, #ffad33 0%, #ffc670 50%, #ffdead 100%);
  display: none;
}

/* Mobile draws a vertical rule from one avatar down to the next, in place of
   the horizontal rule desktop puts beside each avatar. */
.contact-person:not(:last-child)::after {
  position: absolute;
  top: 54px;
  left: 26px;
  width: 2px;
  height: 98px;
  border-radius: 4px;
  background: linear-gradient(180deg, #ffad33 0%, #ffc670 50%, #ffdead 100%);
  content: "";
}

.contact-person__label {
  margin: 0 0 4px;
  color: #ffad33;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  letter-spacing: 2px;
  text-transform: uppercase;
  grid-column: 2;
}

.contact-person__name {
  margin: 0 0 8px;
  color: var(--cream-100);
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 400;
  line-height: 28px;
  grid-column: 2;
}

.contact-person__row {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0 0 8px;
  color: #ccc;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  grid-column: 2;
  transition: color 200ms ease;
}

/* Figma hides a second icon per row: an arrow on email, a copy glyph on phone. */
.contact-person__hover-icon {
  display: inline-block;
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  background-color: currentcolor;
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: 16px 16px;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 200ms ease, transform 200ms ease;
}

/* Hovering anywhere on the person reveals both affordances at once, rather than
   making the user find each row, and warms the email to the accent colour. */
@media (hover: hover) {
  .contact-person:hover .contact-person__hover-icon {
    opacity: 1;
    transform: none;
  }

  .contact-person:hover .contact-person__row:not(.contact-person__row--muted),
  .contact-person:hover .contact-person__row:not(.contact-person__row--muted) a {
    color: #ffc670;
  }
}

.contact-person:focus-within .contact-person__hover-icon {
  opacity: 1;
  transform: none;
}

.contact-person:focus-within .contact-person__row:not(.contact-person__row--muted),
.contact-person:focus-within .contact-person__row:not(.contact-person__row--muted) a {
  color: #ffc670;
}

.contact-person__row:last-child {
  margin-bottom: 0;
}

.contact-person__row--muted {
  color: #b3b3b3;
}

.contact-person__row a {
  color: inherit;
  text-decoration: none;
  overflow-wrap: anywhere;
  transition: color 200ms ease;
}

.contact-person__row a:hover {
  text-decoration: underline;
}

.contact-person__icon {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  background-color: currentcolor;
}

.contact-person__row a:focus-visible,
.contact-head__description a:focus-visible {
  outline: 2px solid #ffad33;
  outline-offset: 2px;
}

/* contract_edit */
.icon-contract-edit {
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2026%2026%22%3E%3Cpath%20d%3D%22M8.81565%206.42093H18.5526C18.8434%206.42093%2019.0871%206.51934%2019.2837%206.71617C19.4805%206.91299%2019.5789%207.15691%2019.5789%207.44793C19.5789%207.73871%2019.4805%207.98241%2019.2837%208.179C19.0871%208.37537%2018.8434%208.47355%2018.5526%208.47355H8.81565C8.52487%208.47355%208.28118%208.37514%208.08458%208.17832C7.88776%207.98149%207.78935%207.73769%207.78935%207.4469C7.78935%207.15588%207.88776%206.91219%208.08458%206.71583C8.28118%206.51923%208.52487%206.42093%208.81565%206.42093ZM8.81565%2010.3685H18.5526C18.8434%2010.3685%2019.0871%2010.4669%2019.2837%2010.6637C19.4805%2010.8603%2019.5789%2011.1041%2019.5789%2011.3951C19.5789%2011.6861%2019.4805%2011.9298%2019.2837%2012.1262C19.0871%2012.3228%2018.8434%2012.4211%2018.5526%2012.4211H8.81565C8.52487%2012.4211%208.28118%2012.3227%208.08458%2012.1258C7.88776%2011.929%207.78935%2011.6851%207.78935%2011.3941C7.78935%2011.1033%207.88776%2010.8596%208.08458%2010.663C8.28118%2010.4666%208.52487%2010.3685%208.81565%2010.3685ZM3.42103%2025.9998C2.46497%2025.9998%201.65578%2025.6687%200.993467%2025.0064C0.331156%2024.3441%200%2023.5349%200%2022.5788V19.8683C0%2019.5178%200.118596%2019.224%200.355787%2018.9871C0.59275%2018.7501%200.886503%2018.6316%201.23704%2018.6316H4.10524V2.47375C4.10524%201.79342%204.34745%201.21104%204.83186%200.726627C5.31628%200.242209%205.89866%200%206.57898%200H20.7893C21.4696%200%2022.052%200.242209%2022.5364%200.726627C23.0208%201.21104%2023.263%201.79342%2023.263%202.47375V10.5525C23.263%2010.8433%2023.1646%2011.0871%2022.9678%2011.2839C22.771%2011.4805%2022.5271%2011.5788%2022.2364%2011.5788C21.9453%2011.5788%2021.7017%2011.4805%2021.5053%2011.2839C21.3087%2011.0871%2021.2104%2010.8433%2021.2104%2010.5525V2.47375C21.2104%202.35082%2021.1709%202.2499%2021.092%202.17099C21.0131%202.09208%2020.9122%202.05262%2020.7893%202.05262H6.57898C6.45606%202.05262%206.35513%202.09208%206.27622%202.17099C6.19731%202.2499%206.15786%202.35082%206.15786%202.47375V18.6316H10.4998C10.7906%2018.6316%2011.0344%2018.7299%2011.2312%2018.9265C11.4278%2019.1233%2011.5261%2019.3673%2011.5261%2019.6583C11.5261%2019.9491%2011.4278%2020.1927%2011.2312%2020.3893C11.0344%2020.5857%2010.7906%2020.6839%2010.4998%2020.6839H2.05262V22.5788C2.05262%2022.9665%202.18376%2023.2915%202.44604%2023.5538C2.70832%2023.8161%203.03331%2023.9472%203.42103%2023.9472H10.4998C10.7906%2023.9472%2011.0344%2024.0456%2011.2312%2024.2424C11.4278%2024.4393%2011.5261%2024.6831%2011.5261%2024.9739C11.5261%2025.2649%2011.4278%2025.5086%2011.2312%2025.7049C11.0344%2025.9015%2010.7906%2025.9998%2010.4998%2025.9998H3.42103ZM14.5264%2024.7628V22.8997C14.5264%2022.7387%2014.5561%2022.5827%2014.6157%2022.4317C14.6754%2022.2807%2014.7693%2022.1411%2014.8972%2022.013L21.9551%2014.9892C22.1253%2014.8191%2022.309%2014.6994%2022.5063%2014.63C22.7036%2014.5609%2022.9008%2014.5264%2023.0981%2014.5264C23.3132%2014.5264%2023.5213%2014.5666%2023.7225%2014.6471C23.9236%2014.7279%2024.1064%2014.849%2024.2708%2015.0105L25.5366%2016.2892C25.684%2016.4596%2025.798%2016.6439%2025.8787%2016.8421C25.9595%2017.0403%2025.9998%2017.2385%2025.9998%2017.4367C25.9998%2017.6348%2025.963%2017.8366%2025.8893%2018.0418C25.8157%2018.2471%2025.6981%2018.4348%2025.5366%2018.6049L18.5129%2025.6287C18.385%2025.7568%2018.2455%2025.8507%2018.0945%2025.9102C17.9433%2025.97%2017.7872%2025.9998%2017.6262%2025.9998H15.7631C15.4125%2025.9998%2015.1188%2025.8812%2014.8818%2025.644C14.6449%2025.4071%2014.5264%2025.1133%2014.5264%2024.7628ZM16.1579%2024.3683H17.4579L21.8997%2019.9049L21.2709%2019.2549L20.6339%2018.6131L16.1579%2023.0684V24.3683ZM21.2709%2019.2549L20.6339%2018.6131L21.8997%2019.9049L21.2709%2019.2549Z%22%2F%3E%3C%2Fsvg%3E");
}
/* search_hands_free */
.icon-search-hands-free {
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2026%2026%22%3E%3Cpath%20d%3D%22M7.93303%2024.9749C6.35137%2024.2916%204.97543%2023.3648%203.80521%2022.1946C2.63499%2021.0244%201.70824%2019.6485%201.02494%2018.0668C0.341647%2016.4854%200%2014.7964%200%2012.9999C0%2011.2034%200.341647%209.51446%201.02494%207.93303C1.70824%206.35137%202.63499%204.97543%203.80521%203.80521C4.97543%202.63499%206.35137%201.70824%207.93303%201.02494C9.51446%200.341648%2011.2034%200%2012.9999%200C14.7964%200%2016.4854%200.341648%2018.0668%201.02494C19.6485%201.70824%2021.0244%202.63499%2022.1946%203.80521C23.3648%204.97543%2024.2916%206.35137%2024.9749%207.93303C25.6582%209.51446%2025.9998%2011.2034%2025.9998%2012.9999C25.9998%2014.7964%2025.6582%2016.4854%2024.9749%2018.0668C24.2916%2019.6485%2023.3648%2021.0244%2022.1946%2022.1946C21.0244%2023.3648%2019.6485%2024.2916%2018.0668%2024.9749C16.4854%2025.6582%2014.7964%2025.9998%2012.9999%2025.9998C11.2034%2025.9998%209.51446%2025.6582%207.93303%2024.9749ZM11.9736%2023.8367V19.0736C10.6841%2018.8086%209.58675%2018.2235%208.68155%2017.3183C7.77634%2016.4131%207.19123%2015.3157%206.92622%2014.0262H2.16312C2.38412%2016.6438%203.42012%2018.8631%205.27112%2020.6842C7.1219%2022.5051%209.35606%2023.556%2011.9736%2023.8367ZM14.0262%2023.8367C16.6438%2023.5982%2018.8779%2022.5578%2020.7287%2020.7157C22.5797%2018.8736%2023.6157%2016.6438%2023.8367%2014.0262H19.0736C18.8086%2015.3157%2018.2235%2016.4131%2017.3183%2017.3183C16.4131%2018.2235%2015.3157%2018.8086%2014.0262%2019.0736V23.8367ZM2.16312%2011.9736H6.84206L9.8317%208.94463C10.0561%208.71131%2010.3227%208.53068%2010.6315%208.40274C10.9403%208.27456%2011.2596%208.21047%2011.5894%208.21047H14.4104C14.7402%208.21047%2015.0595%208.27456%2015.3683%208.40274C15.6771%208.53068%2015.9437%208.71131%2016.1681%208.94463L19.1578%2011.9736H23.8367C23.5735%209.14373%2022.4068%206.78276%2020.3367%204.89071C18.2665%202.99865%2015.8209%202.05262%2012.9999%202.05262C10.1789%202.05262%207.73335%202.99865%205.66317%204.89071C3.59299%206.78276%202.42631%209.14373%202.16312%2011.9736Z%22%2F%3E%3C%2Fsvg%3E");
}
/* connect_without_contact */
.icon-connect-without-contact {
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2026%2026%22%3E%3Cpath%20d%3D%22M19.7168%2025.9998C19.3598%2025.9998%2019.0635%2025.8812%2018.8276%2025.644C18.5916%2025.4071%2018.4736%2025.1133%2018.4736%2024.7628V23.0129C17.5579%2022.7516%2016.7421%2022.3187%2016.0262%2021.7143C15.3105%2021.1099%2014.7517%2020.3814%2014.3499%2019.5286C14.2201%2019.2743%2014.2201%2019.0156%2014.3499%2018.7524C14.4796%2018.4892%2014.6802%2018.2991%2014.9516%2018.1821C15.189%2018.0817%2015.4279%2018.0917%2015.6683%2018.2119C15.9087%2018.3318%2016.0938%2018.512%2016.2236%2018.7524C16.606%2019.5016%2017.1524%2020.0986%2017.8626%2020.5433C18.573%2020.988%2019.3468%2021.2104%2020.1841%2021.2104H24.2893C24.7644%2021.2104%2025.1683%2021.3767%2025.501%2021.7092C25.8336%2022.0419%2025.9998%2022.4458%2025.9998%2022.9209V24.7683C25.9998%2025.1172%2025.8818%2025.4097%2025.6458%2025.6458C25.4099%2025.8818%2025.1134%2025.9998%2024.7563%2025.9998H19.7168ZM20.5406%2018.4592C20.0748%2017.9933%2019.842%2017.4279%2019.842%2016.7631C19.842%2016.0982%2020.0748%2015.5328%2020.5406%2015.0669C21.0065%2014.6012%2021.5719%2014.3683%2022.2367%2014.3683C22.9015%2014.3683%2023.4669%2014.6012%2023.9328%2015.0669C24.3986%2015.5328%2024.6314%2016.0982%2024.6314%2016.7631C24.6314%2017.4279%2024.3986%2017.9933%2023.9328%2018.4592C23.4669%2018.9249%2022.9015%2019.1578%2022.2367%2019.1578C21.5719%2019.1578%2021.0065%2018.9249%2020.5406%2018.4592ZM1.24354%2011.6315C0.886389%2011.6315%200.5899%2011.5135%200.354077%2011.2774C0.118026%2011.0414%200%2010.7489%200%2010.3999V8.55258C0%208.07751%200.166262%207.6736%200.498786%207.34085C0.831539%207.00832%201.23545%206.84206%201.71052%206.84206H5.81575C6.65299%206.84206%207.42683%206.6197%208.13726%206.17496C8.84747%205.73023%209.39381%205.13326%209.77628%204.38405C9.90605%204.1439%2010.0911%203.94878%2010.3315%203.79871C10.5719%203.64864%2010.822%203.61751%2011.0817%203.70532C11.3764%203.79312%2011.5908%203.95939%2011.7249%204.20411C11.8592%204.44882%2011.8754%204.69126%2011.7735%204.93142C11.3947%205.85259%2010.8316%206.63076%2010.0842%207.26593C9.33679%207.90087%208.48416%208.36043%207.52627%208.6446V10.3948C7.52627%2010.7451%207.40824%2011.0389%207.17219%2011.2761C6.93637%2011.513%206.63999%2011.6315%206.28307%2011.6315H1.24354ZM2.06699%204.09087C1.60127%203.62492%201.36841%203.05954%201.36841%202.39472C1.36841%201.7299%201.60127%201.16452%202.06699%200.698574C2.53293%200.232858%203.09831%200%203.76313%200C4.42795%200%204.99334%200.232858%205.45928%200.698574C5.925%201.16452%206.15786%201.7299%206.15786%202.39472C6.15786%203.05954%205.925%203.62492%205.45928%204.09087C4.99334%204.55659%204.42795%204.78944%203.76313%204.78944C3.09831%204.78944%202.53293%204.55659%202.06699%204.09087ZM10.4468%2015.3946C10.156%2015.3946%209.91232%2015.2962%209.71573%2015.0994C9.51936%2014.9028%209.42118%2014.6591%209.42118%2014.3683C9.42118%2011.6098%2010.3796%209.27327%2012.2966%207.35864C14.2137%205.44423%2016.5533%204.48702%2019.3155%204.48702C19.6063%204.48702%2019.8501%204.58532%2020.0469%204.78192C20.2435%204.97874%2020.3418%205.22266%2020.3418%205.51367C20.3418%205.80446%2020.2435%206.04815%2020.0469%206.24475C19.8501%206.44112%2019.6063%206.5393%2019.3155%206.5393C17.1372%206.5393%2015.2856%207.30048%2013.7608%208.82284C12.2359%2010.3452%2011.4735%2012.1937%2011.4735%2014.3683C11.4735%2014.6591%2011.3752%2014.9028%2011.1786%2015.0994C10.9817%2015.2962%2010.7378%2015.3946%2010.4468%2015.3946ZM15.2362%2015.3946C14.9452%2015.3946%2014.7015%2015.2962%2014.5052%2015.0994C14.3086%2014.9028%2014.2103%2014.6591%2014.2103%2014.3683C14.2103%2012.9595%2014.7089%2011.7565%2015.7063%2010.7591C16.7039%209.7618%2017.9069%209.26313%2019.3155%209.26313C19.6063%209.26313%2019.8501%209.36154%2020.0469%209.55836C20.2435%209.75518%2020.3418%209.99899%2020.3418%2010.2898C20.3418%2010.5808%2020.2435%2010.8245%2020.0469%2011.0209C19.8501%2011.2174%2019.6063%2011.3157%2019.3155%2011.3157C18.4762%2011.3157%2017.7575%2011.6146%2017.1596%2012.2124C16.5618%2012.8102%2016.2629%2013.5288%2016.2629%2014.3683C16.2629%2014.6591%2016.1645%2014.9028%2015.9677%2015.0994C15.7711%2015.2962%2015.5273%2015.3946%2015.2362%2015.3946Z%22%2F%3E%3C%2Fsvg%3E");
}

/* FAQ accordion chevrons, swapped via the [open] state. */
:root {
  --chevron-down: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2012%207%22%3E%3Cpath%20d%3D%22M5.55742%206.93341C5.43273%206.88888%205.31695%206.81318%205.21008%206.70631L0.293902%201.79013C0.0979673%201.5942%200%201.34482%200%201.04202C0%200.739208%200.0979673%200.489836%200.293902%200.293902C0.489836%200.0979673%200.739208%200%201.04202%200C1.34482%200%201.5942%200.0979673%201.79013%200.293902L5.95819%204.46197L10.1263%200.293902C10.3222%200.0979673%2010.5716%200%2010.8744%200C11.1772%200%2011.4265%200.0979673%2011.6225%200.293902C11.8184%200.489836%2011.9164%200.739208%2011.9164%201.04202C11.9164%201.34482%2011.8184%201.5942%2011.6225%201.79013L6.70631%206.70631C6.59943%206.81318%206.48365%206.88888%206.35897%206.93341C6.23428%206.97794%206.10069%207.00021%205.95819%207.00021C5.8157%207.00021%205.6821%206.97794%205.55742%206.93341Z%22%2F%3E%3C%2Fsvg%3E");
  --chevron-up: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2012%207%22%3E%3Cpath%20d%3D%22M5.93519%202.55506L1.78322%206.70703C1.58804%206.9022%201.33963%206.99979%201.03799%206.99979C0.736353%206.99979%200.487945%206.9022%200.292767%206.70703C0.097589%206.51185%200%206.26344%200%205.9618C0%205.66016%200.097589%205.41175%200.292767%205.21658L5.18996%200.319382C5.40288%200.106461%205.65129%200%205.93519%200C6.21908%200%206.46749%200.106461%206.68041%200.319382L11.5776%205.21658C11.7728%205.41175%2011.8704%205.66016%2011.8704%205.9618C11.8704%206.26344%2011.7728%206.51185%2011.5776%206.70703C11.3824%206.9022%2011.134%206.99979%2010.8324%206.99979C10.5307%206.99979%2010.2823%206.9022%2010.0872%206.70703L5.93519%202.55506Z%22%2F%3E%3C%2Fsvg%3E");
}

/* call-made: NO URL */
/* content-copy: NO URL */

/* Figma call_made, 1 subpath(s) */
.icon-call-made {
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cg%20transform%3D%22translate%283.45%203.2%29%22%3E%3Cpath%20d%3D%22M7.35%202.05L1.01667%208.38333C0.894444%208.50556%200.755556%208.56389%200.6%208.55833C0.444444%208.55278%200.305556%208.48889%200.183333%208.36667C0.0611111%208.24444%200%208.10278%200%207.94167C0%207.78056%200.0611111%207.63889%200.183333%207.51667L6.5%201.2L3.55%201.2C3.38%201.2%203.2375%201.14283%203.1225%201.0285C3.0075%200.914167%202.95%200.7725%202.95%200.6035C2.95%200.4345%203.0075%200.291667%203.1225%200.175C3.2375%200.0583333%203.38%200%203.55%200L7.95%200C8.12%200%208.2625%200.0574996%208.3775%200.1725C8.4925%200.2875%208.55%200.43%208.55%200.6L8.55%205C8.55%205.17%208.49283%205.3125%208.3785%205.4275C8.26417%205.5425%208.1225%205.6%207.9535%205.6C7.7845%205.6%207.64167%205.5425%207.525%205.4275C7.40833%205.3125%207.35%205.17%207.35%205L7.35%202.05Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}

/* Figma content_copy, 1 subpath(s) */
.icon-content-copy {
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cg%20transform%3D%22translate%282.4%201.6%29%22%3E%3Cpath%20d%3D%22M3.6%2010.4C3.27%2010.4%202.9875%2010.2825%202.7525%2010.0475C2.5175%209.8125%202.4%209.53%202.4%209.2L2.4%201.2C2.4%200.87%202.5175%200.5875%202.7525%200.3525C2.9875%200.1175%203.27%200%203.6%200L10%200C10.33%200%2010.6125%200.1175%2010.8475%200.3525C11.0825%200.5875%2011.2%200.87%2011.2%201.2L11.2%209.2C11.2%209.53%2011.0825%209.8125%2010.8475%2010.0475C10.6125%2010.2825%2010.33%2010.4%2010%2010.4L3.6%2010.4ZM3.6%209.2L10%209.2L10%201.2L3.6%201.2L3.6%209.2ZM1.2%2012.8C0.87%2012.8%200.5875%2012.6825%200.3525%2012.4475C0.1175%2012.2125%200%2011.93%200%2011.6L0%203C0%202.83%200.0571666%202.6875%200.1715%202.5725C0.285833%202.4575%200.4275%202.4%200.5965%202.4C0.7655%202.4%200.908333%202.4575%201.025%202.5725C1.14167%202.6875%201.2%202.83%201.2%203L1.2%2011.6L8.2%2011.6C8.37%2011.6%208.5125%2011.6572%208.6275%2011.7715C8.7425%2011.8858%208.8%2012.0275%208.8%2012.1965C8.8%2012.3655%208.7425%2012.5083%208.6275%2012.625C8.5125%2012.7417%208.37%2012.8%208.2%2012.8L1.2%2012.8Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}

/* Figma close glyph, 1 subpath(s), 13x13 in a 24 box */
.icon-close {
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cg%20transform%3D%22translate%285.42%205.42%29%22%3E%3Cpath%20d%3D%22M6.575%207.975L1.675%2012.875C1.49167%2013.0583%201.25833%2013.15%200.975%2013.15C0.691667%2013.15%200.458333%2013.0583%200.275%2012.875C0.0916667%2012.6917%200%2012.4583%200%2012.175C0%2011.8917%200.0916667%2011.6583%200.275%2011.475L5.175%206.575L0.275%201.675C0.0916667%201.49167%200%201.25833%200%200.975C0%200.691667%200.0916667%200.458333%200.275%200.275C0.458333%200.0916667%200.691667%200%200.975%200C1.25833%200%201.49167%200.0916667%201.675%200.275L6.575%205.175L11.475%200.275C11.6583%200.0916667%2011.8917%200%2012.175%200C12.4583%200%2012.6917%200.0916667%2012.875%200.275C13.0583%200.458333%2013.15%200.691667%2013.15%200.975C13.15%201.25833%2013.0583%201.49167%2012.875%201.675L7.975%206.575L12.875%2011.475C13.0583%2011.6583%2013.15%2011.8917%2013.15%2012.175C13.15%2012.4583%2013.0583%2012.6917%2012.875%2012.875C12.6917%2013.0583%2012.4583%2013.15%2012.175%2013.15C11.8917%2013.15%2011.6583%2013.0583%2011.475%2012.875L6.575%207.975Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}

.icon-mail {
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2013%2010%22%3E%3Cpath%20d%3D%22M1.21875%209.75C0.891493%209.75%200.606554%209.62869%200.363932%209.38607C0.121311%209.14344%200%208.8585%200%208.53125V1.21875C0%200.891493%200.121311%200.606554%200.363932%200.363932C0.606554%200.121311%200.891493%200%201.21875%200H11.7812C12.1164%200%2012.4033%200.121311%2012.642%200.363932C12.8807%200.606554%2013%200.891493%2013%201.21875V8.53125C13%208.8585%2012.8807%209.14344%2012.642%209.38607C12.4033%209.62869%2012.1164%209.75%2011.7812%209.75H1.21875ZM11.7812%202.65755L6.81992%205.50638C6.76463%205.53685%206.71159%205.56055%206.66081%205.57747C6.61002%205.5944%206.55642%205.60286%206.5%205.60286C6.44358%205.60286%206.39279%205.5944%206.34765%205.57747C6.30252%205.56055%206.25219%205.53685%206.19666%205.50638L1.21875%202.65755V8.53125H11.7812V2.65755ZM6.5%204.2487L11.7643%201.21875H1.2526L6.5%204.2487ZM1.21875%202.43919V2.59137V1.70117V1.70964V1.21875V1.70879V1.70117V2.59289V2.44055V8.53125V2.43919Z%22%2F%3E%3C%2Fsvg%3E");
}

.icon-call {
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2012%2012%22%3E%3Cpath%20d%3D%22M11.0539%2011.9956C9.6139%2011.8885%208.24833%2011.5345%206.95714%2010.9335C5.66595%2010.3325%204.50863%209.52032%203.4852%208.49689C2.46176%207.47345%201.65253%206.31614%201.05751%205.02495C0.462493%203.73375%200.111431%202.36818%200.00432742%200.928232C-0.0194734%200.678323%200.0549041%200.461141%200.22746%200.276684C0.400016%200.0922281%200.611248%200%200.861157%200H3.28884C3.49115%200%203.66668%200.0624771%203.81543%200.187431C3.96419%200.312386%204.06237%200.470066%204.10997%200.660472L4.53838%202.57049C4.56218%202.72519%204.55326%202.87395%204.51161%203.01675C4.46995%203.15956%204.40153%203.27856%204.30632%203.37376L2.57481%205.12312C2.81282%205.57534%203.08653%206.0097%203.39594%206.42622C3.70535%206.84273%204.05047%207.23545%204.43128%207.60436C4.78829%207.96137%205.1691%208.29161%205.57372%208.59507C5.97833%208.89853%206.40674%209.16926%206.85896%209.40727L8.62617%207.69361C8.72137%207.59841%208.84038%207.52998%208.98318%207.48833C9.12599%207.44668%209.27474%207.43775%209.42945%207.46155L11.3395%207.87212C11.5418%207.93162%2011.7024%208.03575%2011.8214%208.1845C11.9404%208.33326%2011.9999%208.50879%2011.9999%208.7111V11.1388C11.9999%2011.3887%2011.9047%2011.5999%2011.7143%2011.7725C11.5239%2011.945%2011.3038%2012.0194%2011.0539%2011.9956Z%22%2F%3E%3C%2Fsvg%3E");
}

.icon-social-x {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%3Cpath%20d%3D%22M12.6%201.33301H14.6667L9.60001%207.13301L15.3333%2014.6663H10.7333L7.13334%2010.2663L3.00001%2014.6663H0.933338L6.33334%208.46634L0.666672%201.33301H5.33334L8.60001%205.39967L12.6%201.33301Z%22%20fill%3D%22%23E6E6E6%22%2F%3E%20%3C%2Fsvg%3E");
}
.icon-social-instagram {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%3Cpath%20d%3D%22M10.6667%202H5.33333C3.49238%202%202%203.49238%202%205.33333V10.6667C2%2012.5076%203.49238%2014%205.33333%2014H10.6667C12.5076%2014%2014%2012.5076%2014%2010.6667V5.33333C14%203.49238%2012.5076%202%2010.6667%202Z%22%20stroke%3D%22%23E6E6E6%22%20stroke-width%3D%221.06667%22%2F%3E%20%3Cpath%20d%3D%22M7.99999%2010.6663C9.47275%2010.6663%2010.6667%209.47243%2010.6667%207.99967C10.6667%206.52692%209.47275%205.33301%207.99999%205.33301C6.52724%205.33301%205.33333%206.52692%205.33333%207.99967C5.33333%209.47243%206.52724%2010.6663%207.99999%2010.6663Z%22%20stroke%3D%22%23E6E6E6%22%20stroke-width%3D%221.06667%22%2F%3E%20%3C%2Fsvg%3E");
}
.icon-social-youtube {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%3Cpath%20d%3D%22M14.6667%207.99967C14.6667%207.99967%2014.6667%205.86634%2014.4%204.86634C14.2%204.26634%2013.7333%203.79967%2013.1333%203.59967C12.1333%203.33301%208.00001%203.33301%208.00001%203.33301C8.00001%203.33301%203.86668%203.33301%202.86668%203.59967C2.26668%203.79967%201.80001%204.26634%201.60001%204.86634C1.33334%205.86634%201.33334%207.99967%201.33334%207.99967C1.33334%207.99967%201.33334%2010.133%201.60001%2011.133C1.80001%2011.733%202.26668%2012.1997%202.86668%2012.3997C3.86668%2012.6663%208.00001%2012.6663%208.00001%2012.6663C8.00001%2012.6663%2012.1333%2012.6663%2013.1333%2012.3997C13.7333%2012.1997%2014.2%2011.733%2014.4%2011.133C14.6667%2010.133%2014.6667%207.99967%2014.6667%207.99967ZM6.66668%2010.133V5.86634L10.3333%207.99967L6.66668%2010.133Z%22%20fill%3D%22%23E6E6E6%22%2F%3E%20%3C%2Fsvg%3E");
}
.icon-social-facebook {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%3Cpath%20d%3D%22M8.99999%2014.6665V8.9998H10.6667L11%206.66647H8.99999V5.13314C8.99999%204.46647%209.19999%203.9998%2010.1333%203.9998H10.6667V1.86647C10.4667%201.86647%209.79999%201.7998%209.06666%201.7998C7.46666%201.7998%206.33332%202.7998%206.33332%204.5998V6.66647H4.66666V8.9998H6.33332V14.6665H8.99999Z%22%20fill%3D%22%23E6E6E6%22%2F%3E%20%3C%2Fsvg%3E");
}
.icon-arrow-right-alt {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2216%22%20height%3D%2212%22%20viewBox%3D%220%200%2016%2012%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%3Cmask%20id%3D%22mask0_557_13335%22%20style%3D%22mask-type%3Aalpha%22%20maskUnits%3D%22userSpaceOnUse%22%20x%3D%22-5%22%20y%3D%22-7%22%20width%3D%2226%22%20height%3D%2226%22%3E%20%3Crect%20x%3D%22-4.10915%22%20y%3D%22-6.61215%22%20width%3D%2224.6549%22%20height%3D%2224.6549%22%20fill%3D%22%23D9D9D9%22%2F%3E%20%3C%2Fmask%3E%20%3Cg%20mask%3D%22url%28%23mask0_557_13335%29%22%3E%20%3Cpath%20d%3D%22M12.4815%206.74208H1.02729C0.736222%206.74208%200.492241%206.64363%200.295345%206.44674C0.0984483%206.24984%200%206.00586%200%205.7148C0%205.42373%200.0984483%205.17975%200.295345%204.98285C0.492241%204.78596%200.736222%204.68751%201.02729%204.68751H12.4815L9.55376%201.75974C9.34831%201.55428%209.24986%201.31458%209.25842%201.04064C9.26698%200.766698%209.36543%200.526998%209.55376%200.321541C9.75922%200.116083%2010.0032%200.00907436%2010.2857%200.000513643C10.5682%20-0.00804708%2010.8122%200.0904012%2011.0176%200.295859L15.7175%204.99569C15.8202%205.09842%2015.893%205.20971%2015.9358%205.32956C15.9786%205.44941%2016%205.57782%2016%205.7148C16%205.85177%2015.9786%205.98018%2015.9358%206.10003C15.893%206.21988%2015.8202%206.33117%2015.7175%206.4339L11.0176%2011.1337C10.8122%2011.3392%2010.5682%2011.4376%2010.2857%2011.4291C10.0032%2011.4205%209.75922%2011.3135%209.55376%2011.108C9.36543%2010.9026%209.26698%2010.6629%209.25842%2010.3889C9.24986%2010.115%209.34831%209.87531%209.55376%209.66985L12.4815%206.74208Z%22%20fill%3D%22white%22%2F%3E%20%3C%2Fg%3E%20%3C%2Fsvg%3E");
}

/* Material Symbols outlines used by the voting pop up. */
.icon-radio-unchecked {
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%20-960%20960%20960%22%3E%3Cpath%20d%3D%22M480-80q-83%200-156-31.5T197-197q-54-54-85.5-127T80-480q0-83%2031.5-156T197-763q54-54%20127-85.5T480-880q83%200%20156%2031.5T763-763q54%2054%2085.5%20127T880-480q0%2083-31.5%20156T763-197q-54%2054-127%2085.5T480-80Zm0-80q133%200%20226.5-93.5T800-480q0-133-93.5-226.5T480-800q-133%200-226.5%2093.5T160-480q0%20133%2093.5%20226.5T480-160Z%22%2F%3E%3C%2Fsvg%3E");
}

.icon-check-circle {
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%20-960%20960%20960%22%3E%3Cpath%20d%3D%22m424-296%20282-282-56-56-226%20226-114-114-56%2056%20170%20170Zm56%20216q-83%200-156-31.5T197-197q-54-54-85.5-127T80-480q0-83%2031.5-156T197-763q54-54%20127-85.5T480-880q83%200%20156%2031.5T763-763q54%2054%2085.5%20127T880-480q0%2083-31.5%20156T763-197q-54%2054-127%2085.5T480-80Zm0-80q134%200%20227-93t93-227q0-134-93-227t-227-93q-134%200-227%2093t-93%20227q0%20134%2093%20227t227%2093Z%22%2F%3E%3C%2Fsvg%3E");
}

.icon-info {
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%20-960%20960%20960%22%3E%3Cpath%20d%3D%22M440-280h80v-240h-80v240Zm40-320q17%200%2028.5-11.5T520-640q0-17-11.5-28.5T480-680q-17%200-28.5%2011.5T440-640q0%2017%2011.5%2028.5T480-600Zm0%20520q-83%200-156-31.5T197-197q-54-54-85.5-127T80-480q0-83%2031.5-156T197-763q54-54%20127-85.5T480-880q83%200%20156%2031.5T763-763q54%2054%2085.5%20127T880-480q0%2083-31.5%20156T763-197q-54%2054-127%2085.5T480-80Zm0-80q134%200%20227-93t93-227q0-134-93-227t-227-93q-134%200-227%2093t-93%20227q0%20134%2093%20227t227%2093Z%22%2F%3E%3C%2Fsvg%3E");
}

.faq-section {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 48px 16px;
  gap: 48px;
  background: var(--cream-100);
}

.faq-head {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 0;
}

.faq-head__reveal {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.faq-head__eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--orange-500);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: 4px;
  text-transform: uppercase;
}

/* The FAQ heading uses the outlined Inline face, unlike the other section
   headings which use MGP Display. */
.faq-head__title {
  display: flex;
  flex-direction: column;
  margin: 0;
  color: var(--blue-500);
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 400;
  line-height: 36px;
  letter-spacing: 0.8px;
}

.faq-head__note {
  margin: 0;
  color: #585f73;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
}

.faq-list {
  display: flex;
  flex-direction: column;
}

/* Divider sits on top of each row, matching the design's top-only stroke. */
.faq-item {
  border-top: 1px solid #e1e4eb;
}

.faq-item__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 0;
  cursor: pointer;
  list-style: none;
}

.faq-item__summary::-webkit-details-marker {
  display: none;
}

.faq-item[open] .faq-item__summary {
  padding-bottom: 8px;
}

.faq-item__question {
  color: #0a0f1c;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 1.2px;
}

.faq-item__chevron {
  display: flex;
  flex: 0 0 40px;
  align-items: center;
  justify-content: center;
  height: 40px;
  border-radius: 48px;
  background: #fff;
}

.faq-item__chevron::before {
  width: 20px;
  height: 20px;
  background-color: var(--orange-700);
  content: "";
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  mask-image: var(--chevron-down);
  -webkit-mask-image: var(--chevron-down);
}

.faq-item[open] .faq-item__chevron {
  background: var(--orange-500);
}

.faq-item[open] .faq-item__chevron::before {
  background-color: #fff;
  mask-image: var(--chevron-up);
  -webkit-mask-image: var(--chevron-up);
}

.faq-item__answer {
  padding: 8px 0 24px;
}

.faq-item__answer p {
  margin: 0;
  color: #6b6357;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
}

.faq-item__summary:focus-visible {
  outline: 2px solid #0875bc;
  outline-offset: 2px;
}

.site-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 48px 16px;
  gap: 48px;
  background-color: #05070c;
  background-image: radial-gradient(50% 157% at 50% 0%, #0286de 0%, #01558d 100%);
}

.site-footer__closing {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  width: 100%;
  padding-bottom: 0;
}

.site-footer__statement {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  color: #fff;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
  letter-spacing: 0;
  text-align: center;
}

/* Figma tints "glamour" and "credibility" inside the closing statement. */
.site-footer__statement-accent {
  color: #ffc670;
}

.site-footer__cta-arrow {
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-left: 4px;
  background-color: currentcolor;
  vertical-align: -4px;
}

.site-footer__grid {
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: 100%;
}

.site-footer__brand {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.site-footer__logo img {
  display: block;
  width: 148px;
  height: 48px;
  object-fit: contain;
}

.site-footer__tagline {
  margin: 0;
  color: #e6e6e6;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
}

.site-footer__socials {
  display: flex;
  gap: 10px;
}

.site-footer__socials a {
  display: flex;
  flex: 0 0 38px;
  align-items: center;
  justify-content: center;
  height: 38px;
  border: 1px solid #f3f1ea;
  border-radius: 19px;
}

.site-footer__socials span {
  width: 16px;
  height: 16px;
  background-color: #e6e6e6;
}

.site-footer__column {
  display: flex;
  flex-direction: column;
}

.site-footer__column-title {
  margin: 0;
  color: #b3b3b3;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  line-height: 16px;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.site-footer__column ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer__column li:first-child {
  padding-top: 24px;
}

.site-footer__column li + li {
  padding-top: 7px;
}

.site-footer__column a {
  display: block;
  padding-bottom: 8px;
  color: #e6e6e6;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  text-decoration: none;
}

.site-footer__column a:hover {
  text-decoration: underline;
}

.site-footer__bottom {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  padding-top: 24px;
  border-top: 1px solid #f3f1ea;
}

.site-footer__bottom p {
  margin: 0;
  color: #ccc;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.site-footer__logo:focus-visible,
.site-footer__socials a:focus-visible,
.site-footer__column a:focus-visible {
  outline: 2px solid #ffad33;
  outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
   Custom cursor, ported from the Version 2 prototype: a small dot that tracks
   the pointer exactly, plus a ring that eases toward it so it trails slightly.
   Fine-pointer only; both are parked off-screen until the first mouse move so
   they never flash in the top-left corner on load.
   --------------------------------------------------------------------------- */
.cursor-dot,
.cursor-ring {
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  display: none;
  border-radius: 50%;
  transform: translate(-100px, -100px);
  pointer-events: none;
  will-change: transform;
}

.cursor-dot {
  width: 6px;
  height: 6px;
  background: #e8ac42;
}

.cursor-ring {
  width: 38px;
  height: 38px;
  border: 1px solid rgb(232 172 66 / 70%);
  transition:
    width 250ms cubic-bezier(0.16, 1, 0.3, 1),
    height 250ms cubic-bezier(0.16, 1, 0.3, 1),
    background-color 250ms ease,
    border-color 250ms ease;
}

/* Grows over anything interactive. */
.cursor-ring.is-active {
  width: 64px;
  height: 64px;
  border-color: rgb(232 172 66 / 90%);
  background-color: rgb(232 172 66 / 8%);
}

@media (hover: hover) and (pointer: fine) {
  .cursor-dot,
  .cursor-ring {
    display: block;
  }
}

/* ---------------------------------------------------------------------------
   Nominee Modal (mobile first, per Figma 657:37256)
   --------------------------------------------------------------------------- */
/* =============================================================================
   Voting Pop Up — Figma node 752:58157

   Cream panel over a dimmed page: header (logo, award progress, close), the
   award's own copy with prev/next category controls, the tab strip, the nominee
   cards and the voting disclaimer.

   Mobile-first here; the desktop numbers from the design live in the
   min-width: 1024px block further down.
   ========================================================================== */
.vote-modal {
  /* mweb takes the whole screen (Figma node 869:25138). */
  width: 100vw;
  max-width: none;
  height: 100dvh;
  max-height: none;
  padding: 0;
  border: 0;
  border-radius: 0;
  margin: 0;
  background: var(--cream-100);
  overflow: hidden;
}

.vote-modal::backdrop {
  background: rgb(10 26 51 / 70%);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.vote-modal__panel {
  position: relative;
  display: flex;
  /* A definite height is what lets .vote-modal__content become a scroller:
     on mweb this resolves against the dialog's 100dvh, on desktop the dialog
     is auto-height and max-height: inherit supplies the bound instead. */
  height: 100%;
  max-height: inherit;
  min-height: 0;
  flex-direction: column;
}

/* ------------------------------------------------------------------ header */
.vote-modal__bar {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px;
}

.vote-modal__logo {
  display: block;
  width: 104px;
  height: auto;
}

.vote-modal__progress {
  display: none;
  align-items: center;
  gap: 14px;
}

.vote-modal__progress-text {
  margin: 0;
  color: var(--slate-500);
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 1.2px;
  white-space: nowrap;
}

.vote-modal__progress-track {
  width: 400px;
  height: 6px;
  overflow: hidden;
  border-radius: 4px;
  background: #fff;
}

.vote-modal__progress-fill {
  display: block;
  width: 0;
  height: 100%;
  border-radius: 8px;
  background: linear-gradient(90deg, var(--orange-700) 0%, #ffad33 55%, #ffdead 100%);
  transition: width 300ms ease-out;
}

.vote-modal__close {
  display: flex;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 48px;
  background: none;
  cursor: pointer;
}

.vote-modal__close-icon {
  width: 16px;
  height: 16px;
  background-color: var(--orange-700);
}

/* ----------------------------------------------------------------- content */
.vote-modal__content {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  flex-direction: column;
  gap: 20px;
  padding: 0 16px;
  /* The single scroll container. overscroll-behavior stops the gesture from
     chaining to the page once the list hits either end. */
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* mweb: arrows flank the category label, with the title and description
   centred beneath. Desktop rearranges this same grid in its own block. */
.vote-modal__intro {
  display: grid;
  align-items: center;
  gap: 0;
  grid-template-columns: auto 1fr auto;
  text-align: center;
}

.vote-modal__intro .vote-nav--prev {
  grid-area: 1 / 1;
}

.vote-modal__intro .vote-modal__eyebrow {
  justify-content: center;
  grid-area: 1 / 2;
}

.vote-modal__intro .vote-nav--next {
  grid-area: 1 / 3;
}

.vote-modal__title {
  grid-area: 2 / 1 / 3 / 4;
}

.vote-modal__description {
  grid-area: 3 / 1 / 4 / 4;
}

.vote-modal__eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--orange-700);
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 3px;
  text-transform: uppercase;
}

.vote-modal__title {
  margin: 16px 0 0;
  color: var(--blue-500);
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 400;
  line-height: 32px;
  letter-spacing: 1.2px;
}

.vote-modal__description {
  margin: 8px 0 0;
  color: var(--slate-500);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
}

.vote-modal__description:empty {
  display: none;
}

/* -------------------------------------------------- prev / next category */
/* The wrapper the arrows used to share; they are grid children now. */
.vote-modal__nav {
  display: contents;
}

/* Collapsed to the supplied circular button; on hover the circle gives way to a
   bare arrow and the label expands beside it over a 1px rule. Figma's hover
   variant strokes the bottom edge only (individualStrokeWeights bottom: 1). */
.vote-nav {
  display: flex;
  height: 24px;
  align-items: center;
  padding: 0;
  border: 0;
  border-bottom: 1px solid transparent;
  background: none;
  color: var(--orange-700);
  cursor: pointer;
  transition: border-color 300ms ease-out;
}

.vote-nav__icon {
  position: relative;
  display: grid;
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  place-items: center;
  transition: width 300ms ease-out;
}

/* mweb uses the plain chevrons; the circular button art is desktop only. */
.vote-nav__icon-chevron {
  display: block;
  width: 24px;
  height: 24px;
  transition: opacity 150ms ease-out;
}

.vote-nav__icon-circle {
  display: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transition: opacity 300ms ease-out;
}

/* Desktop-only: the bare arrow that replaces the circle on hover. */
.vote-nav__icon-arrow {
  display: none;
  width: 24px;
  height: 24px;
  background-color: currentcolor;
  opacity: 0;
  transition: opacity 300ms ease-out;
}

.vote-nav--prev .vote-nav__icon-arrow {
  transform: scaleX(-1);
}

.vote-nav__label {
  max-width: 0;
  overflow: hidden;
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  transition:
    max-width 300ms ease-out,
    padding 300ms ease-out,
    opacity 300ms ease-out;
}

/* .vote-nav sets display:flex, which outranks the UA [hidden] rule, so hiding
   needs saying explicitly. visibility keeps the grid column's width, so the
   centred eyebrow does not jump when a control drops away. */
.vote-nav[hidden] {
  visibility: hidden;
  pointer-events: none;
}

.vote-nav:hover,
.vote-nav:focus-visible {
  border-bottom-color: #ffad33;
}

.vote-nav:hover .vote-nav__icon,
.vote-nav:focus-visible .vote-nav__icon {
  width: 24px;
}

.vote-nav:hover .vote-nav__icon-circle,
.vote-nav:focus-visible .vote-nav__icon-circle {
  opacity: 0;
}

.vote-nav:hover .vote-nav__icon-arrow,
.vote-nav:focus-visible .vote-nav__icon-arrow {
  opacity: 1;
}

/* mweb tap feedback (Figma 869:25153): the flat chevron flashes as a 36px
   white disc holding a 20px amber arrow. The label never appears here — the
   text is kept in the DOM purely as the button's accessible name. */
.vote-nav__icon::before {
  position: absolute;
  z-index: 0;
  top: 50%;
  left: 50%;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #fff;
  content: "";
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.6);
  transition:
    opacity 150ms ease-out,
    transform 150ms ease-out;
}

.vote-nav.is-tapped .vote-nav__icon::before {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* Glyphs ride above the disc. */
.vote-nav__icon-chevron,
.vote-nav__icon-arrow {
  position: relative;
  z-index: 1;
}

.vote-nav.is-tapped .vote-nav__icon-chevron {
  opacity: 0;
}

.vote-nav.is-tapped .vote-nav__icon-arrow {
  display: block;
  width: 20px;
  height: 20px;
  opacity: 1;
}

/* -------------------------------------------------------------- tab strip */
.vote-modal__tabs {
  display: flex;
  flex: 0 0 auto;
  gap: 24px;
  border-bottom: 1px solid rgb(0 0 0 / 10%);
  overflow-x: auto;
  scrollbar-width: none;
}

.vote-modal__tabs::-webkit-scrollbar {
  display: none;
}

.vote-tab {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
  padding: 12px 0 10px;
  border: 0;
  background: none;
  color: #585f73;
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: color 300ms linear;
}

/* Underline grows in from the centre on hover and for the active tab. */
.vote-tab::after {
  position: absolute;
  right: 8px;
  bottom: 0;
  left: 8px;
  height: 2px;
  border-radius: 4px;
  background: var(--orange-500);
  transform: scaleX(0);
  content: "";
  transition: transform 300ms linear;
}

/* Hover only recolours: bolding here changed the label's width and shunted
   every neighbouring tab sideways. Weight is reserved for the active tab. */
.vote-tab:hover,
.vote-tab:focus-visible {
  color: #026eb6;
}

.vote-tab.is-active {
  color: #026eb6;
  font-weight: 700;
}

/* Pulsing dot on the award currently being voted on (Figma 893:15386): 8px,
   blue, ahead of the label, and only while that tab is active and unvoted. */
.vote-tab__dot {
  display: none;
  position: relative;
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--blue-500);
}

.vote-tab.is-active:not([data-voted="true"]) .vote-tab__dot {
  display: block;
}

/* The design pairs the dot with an 8px gap; the voted tick uses 4px. */
.vote-tab.is-active:not([data-voted="true"]) {
  gap: 8px;
}

.vote-tab__dot::after {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: inherit;
  content: "";
  animation: vote-dot-pulse 1600ms ease-out infinite;
}

@keyframes vote-dot-pulse {
  0% {
    opacity: 0.55;
    transform: scale(1);
  }

  70% {
    opacity: 0;
    transform: scale(2.6);
  }

  100% {
    opacity: 0;
    transform: scale(2.6);
  }
}

/* Underline belongs to the label, so clear the dot too (8px + 8px gap). */
.vote-tab.is-active:not([data-voted="true"])::after {
  left: 24px;
}

/* Voted awards show a filled tick beside the tab label (Figma node
   893:15305). Hidden rather than absent so the strip does not reflow as
   votes land. */
.vote-tab__tick {
  display: none;
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

.vote-tab[data-voted="true"] .vote-tab__tick {
  display: block;
}

/* Underline belongs to the label, so clear the leading tick (16px + 4px gap). */
.vote-tab[data-voted="true"]::after {
  left: 28px;
}

.vote-tab:hover::after,
.vote-tab:focus-visible::after,
.vote-tab.is-active::after {
  transform: scaleX(1);
}

/* ---------------------------------------------------------- nominee cards */
/* mweb stacks full-width cards that scroll vertically; desktop turns this back
   into a row of four. */
.vote-modal__cards {
  display: flex;
  /* Not a scroller of its own: a nested scroller inside the content column
     swallowed the gesture and left nothing able to scroll. */
  flex: 0 0 auto;
  flex-direction: column;
  gap: 26px;
  /* Bottom padding clears the 34px veil so the last card is fully readable
     once the list is scrolled to the end. */
  padding: 4px 0 34px;
  scrollbar-width: none;
}

.vote-modal__cards::-webkit-scrollbar {
  display: none;
}

/* mweb card: image on the left, copy and CTA on the right. */
.vote-card {
  position: relative;
  display: flex;
  width: 100%;
  min-height: 119px;
  flex: 0 0 auto;
  flex-direction: row;
  overflow: hidden;
  border: 0.4px solid transparent;
  border-radius: 16px;
  background: #026eb6;
  transition:
    background 300ms ease-out,
    border-color 300ms ease-out,
    box-shadow 300ms ease-out,
    transform 300ms ease-out;
}

.vote-card__media {
  /* mweb: 112x84 pinned to the card's top-left corner, in every state
     (Figma 1015:23820). align-self stops the flex row stretching it. */
  position: relative;
  width: 112px;
  height: 84px;
  flex: 0 0 112px;
  align-self: flex-start;
  overflow: hidden;
  border-radius: 16px;
  margin: 0;
  background: rgb(255 255 255 / 8%);
}

/* Scoped to the photo, not every img in the media box: a descendant selector
   here also captured the voted tick and stretched it over the artwork. */
.vote-card__photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Selection dot: desktop only — the mweb card has no room for it. */
.vote-card__badge {
  display: none;
  position: absolute;
  top: 12px;
  right: 12px;
  width: 24px;
  height: 24px;
  background-color: #fffbf5;
  filter: drop-shadow(0 2px 12px rgb(245 147 0 / 40%));
  opacity: 0;
  transition: opacity 300ms ease-out;
}

.vote-card__info {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 16px;
  padding: 12px;
}

.vote-card__meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.vote-card__brand {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: #ffc670;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.vote-card__name {
  margin: 0;
  color: #fff;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0.4px;
  overflow-wrap: anywhere;
}

/* mweb has no hover, so the CTA ships in its filled "Cast my Vote" state; the
   desktop block reverts it to the plain row that morphs on hover. */
.vote-card__cta {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  margin-top: auto;
  padding: 10px 20px;
  border: 0;
  border-radius: 32px;
  background: linear-gradient(90deg, var(--orange-500) 0%, #ffc670 100%);
  color: #fffbf5;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  line-height: 16px;
  cursor: pointer;
  box-shadow: 0 2px 12px rgb(245 147 0 / 40%);
  transition:
    padding 300ms ease-out,
    background 300ms ease-out,
    box-shadow 300ms ease-out;
}

.vote-card__cta-stack {
  display: grid;
}

.vote-card__cta-label {
  grid-area: 1 / 1;
  white-space: nowrap;
  transition: opacity 300ms ease-out;
}

.vote-card__cta-label[data-vote-idle] {
  opacity: 0;
}

.vote-card__cta-icon {
  width: 0;
  height: 20px;
  flex: 0 0 auto;
  margin-left: 0;
  background-color: currentcolor;
  opacity: 0;
  transition:
    width 300ms ease-out,
    margin 300ms ease-out,
    opacity 300ms ease-out;
}

/* ------------------------------------------------------------ hover state */
.vote-card:hover,
.vote-card:focus-within {
  border-color: #ffad33;
  background:
    radial-gradient(70% 140% at 50% 0%, rgb(245 147 0 / 10%) 0%, rgb(245 147 0 / 0%) 100%),
    radial-gradient(70% 140% at 50% 0%, #21a5fd 0%, #01558d 100%);
  box-shadow: 0 16px 32px -24px rgb(245 147 0 / 40%);
  transform: translateY(-4px) scale(1.02);
}

.vote-card:hover .vote-card__badge,
.vote-card:focus-within .vote-card__badge {
  opacity: 1;
}

.vote-card:hover .vote-card__cta:not(:disabled),
.vote-card:focus-within .vote-card__cta:not(:disabled) {
  padding: 10px 20px;
  background: linear-gradient(90deg, var(--orange-500) 0%, #ffc670 100%);
  box-shadow: 0 2px 12px rgb(245 147 0 / 40%);
}

/* The trailing arrow collapses so the pill closes up around the label. */
.vote-card:hover .vote-card__cta:not(:disabled) .vote-card__cta-icon,
.vote-card:focus-within .vote-card__cta:not(:disabled) .vote-card__cta-icon {
  width: 0;
  margin-left: 0;
  opacity: 0;
}

.vote-card:hover .vote-card__cta:not(:disabled) .vote-card__cta-label[data-vote-idle],
.vote-card:focus-within .vote-card__cta:not(:disabled) .vote-card__cta-label[data-vote-idle] {
  opacity: 0;
}

.vote-card:hover .vote-card__cta:not(:disabled) .vote-card__cta-label[data-vote-hover],
.vote-card:focus-within .vote-card__cta:not(:disabled) .vote-card__cta-label[data-vote-hover] {
  opacity: 1;
}

/* ------------------------------------------------------------ voted state
   From the overlay frame's voted card variant: the card turns amber, the dot
   becomes a check and the CTA becomes a white "Voted" pill. */
.vote-card__cta:disabled {
  cursor: default;
}

.vote-card[data-voted="true"] {
  /* Two stacked radials, exactly as the design layers them: an #ffdead glow
     rising from the bottom centre over an amber-to-#b86e00 base. */
  border-color: #ffad33;
  background:
    radial-gradient(50% 50% at 50% 100%, #ffdead 0%, #f59300 100%),
    radial-gradient(50% 93.4% at 50% 50%, #ffad33 0%, #b86e00 100%);
  box-shadow: 0 16px 32px -24px rgb(245 147 0 / 40%);
}

/* The hover dot gives way to the tick once the vote is in. */
.vote-card[data-voted="true"] .vote-card__badge {
  display: none;
}

/* White plate with the amber tick sitting 2px inside it, which is what makes
   the ring read against the amber card. mweb pins it top-left. */
.vote-card__tick {
  display: none;
  position: absolute;
  z-index: 1;
  top: 8px;
  left: 8px;
  width: 20px;
  height: 20px;
  padding: 2px;
  border-radius: 50%;
  background: #fff;
  box-sizing: border-box;
}

.vote-card[data-voted="true"] .vote-card__tick {
  display: block;
}

.vote-card[data-voted="true"] .vote-card__brand {
  color: #fffbf5;
}

/* Voted cards keep only the idle label, so it has to be visible even on mweb
   where the unvoted card shows the hover label instead. */
.vote-card[data-voted="true"] .vote-card__cta-label[data-vote-idle] {
  opacity: 1;
}

/* mweb: the unchosen cards have had their button removed, so the height held
   for it is no longer needed. The voted card keeps it. */
.vote-card[data-voted="false"] {
  min-height: 0;
}

.vote-card[data-voted="true"] .vote-card__cta:disabled {
  padding: 10px 20px;
  background: #fff;
  color: var(--orange-700);
  box-shadow: none;
}

/* =============================================================================
   Voting Complete Overlay — Figma node 926:20240
   Fills the dialog once every award has a vote: frosted veil, then a cream card
   carrying the rail, the closing message and two ways onward.
   ========================================================================== */
.vote-done {
  position: absolute;
  z-index: 4;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  border-radius: inherit;
  /* Nothing but a centring layer: the card is the visible object. The blur is
     what separates it from the awards behind (BACKGROUND_BLUR 16 in Figma). */
  background: none;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.vote-done[hidden] {
  display: none;
}

.vote-done__close {
  position: absolute;
  z-index: 2;
  top: 8px;
  right: 8px;
  display: grid;
  width: 48px;
  height: 48px;
  padding: 12px;
  border: 0;
  border-radius: 48px;
  background: none;
  color: var(--orange-700);
  cursor: pointer;
  place-items: center;
  box-sizing: border-box;
}

.vote-done__close-icon {
  width: 24px;
  height: 24px;
  background-color: currentcolor;
}

/* Prototype timings from 926:20240: the card smart-animates in over 300ms and
   the rail over 250ms, both linear. */
@keyframes vote-done-card-in {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.96);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes vote-done-rail-in {
  from {
    opacity: 0;
    transform: scale(0.94);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* Confetti bursts outward as the card lands. */
@keyframes vote-done-confetti-left {
  from {
    opacity: 0;
    transform: translate(12px, 16px) scale(0.5) rotate(-18deg);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes vote-done-confetti-right {
  from {
    opacity: 0;
    transform: scaleX(-1) translate(12px, 16px) scale(0.5) rotate(-18deg);
  }

  to {
    opacity: 1;
    transform: scaleX(-1);
  }
}

.vote-done:not([hidden]) .vote-done__card {
  animation: vote-done-card-in 300ms linear both;
}

.vote-done:not([hidden]):not([data-rail="out"]) .vote-done__rail {
  animation: vote-done-rail-in 250ms linear both;
  animation-delay: 300ms;
}

/* Once the tally lands the rail bows out and the message takes its place. */
.vote-done__rail {
  transition:
    opacity 200ms ease-out,
    transform 200ms ease-out;
}

.vote-done[data-rail="out"] .vote-done__rail {
  opacity: 0;
  transform: scale(0.96);
}

.vote-done[data-revealed="true"] .vote-done__rail {
  display: none;
}

.vote-done[data-revealed="true"] .vote-done__confetti--left {
  animation: vote-done-confetti-left 420ms ease-out both;
  animation-delay: 80ms;
}

.vote-done[data-revealed="true"] .vote-done__confetti--right {
  animation: vote-done-confetti-right 420ms ease-out both;
  animation-delay: 160ms;
}

.vote-done__card {
  position: relative;
  display: flex;
  width: 100%;
  max-width: 320px;
  /* Design height (926:20240), so the box does not resize when the rail hands
     over to the message. Content is centred, which puts the rail mid-card. */
  min-height: 424px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 24px;
  border: 1px solid #ffdead;
  border-radius: 32px;
  background: var(--cream-100);
  box-sizing: border-box;
  text-align: center;
  box-shadow: 0 16px 32px rgb(0 0 0 / 12%);
}

/* Confetti flanks the card, bleeding past its edges as in the frame. */
/* Level with the space between the two buttons, hard against each outer edge
   of the actions block. margin-top does the vertical centring so transform is
   left free for the burst animation. */
.vote-done__confetti {
  position: absolute;
  z-index: 0;
  top: 50%;
  /* Only 44px sits beside a centred 184px button, so the pieces bleed 12px past
     the card edge to gain size while still clearing the buttons. */
  width: 56px;
  height: 56px;
  margin-top: -28px;
  pointer-events: none;
}

.vote-done__confetti--left {
  left: -12px;
}

.vote-done__confetti--right {
  right: -12px;
  transform: scaleX(-1);
}

/* Card content sits above the burst. */
.vote-done__rail,
.vote-done__eyebrow,
.vote-done__title,
.vote-done__copy,
.vote-done__actions,
.vote-done__footnote {
  position: relative;
  z-index: 1;
}

.vote-done__rail {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 24px;
  border-radius: 1000px;
  background: #fffbf5;
  box-sizing: border-box;
}

.vote-done__count {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: var(--slate-500);
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 1.2px;
  white-space: nowrap;
}

.vote-done__count strong {
  color: var(--orange-700);
  font-weight: 400;
}

.vote-done__track {
  width: 100%;
  height: 6px;
  overflow: hidden;
  border-radius: 4px;
  background: #fff;
}

.vote-done__fill {
  display: block;
  /* Driven from 0 to 100% by the tally; JS owns the width. */
  width: 0;
  height: 100%;
  border-radius: 8px;
  background: linear-gradient(90deg, var(--orange-700) 0%, #ffad33 50%, #ffdead 100%);
}

/* Stage 1: only the rail exists. Everything else is out of the layout, so the
   rail is centred rather than pinned above invisible content. */
.vote-done:not([data-revealed="true"]) .vote-done__eyebrow,
.vote-done:not([data-revealed="true"]) .vote-done__title,
.vote-done:not([data-revealed="true"]) .vote-done__copy,
.vote-done:not([data-revealed="true"]) .vote-done__actions,
.vote-done:not([data-revealed="true"]) .vote-done__footnote,
.vote-done:not([data-revealed="true"]) .vote-done__confetti {
  display: none;
}

/* Stage 3: the message and the confetti arrive together, staggered. */
@keyframes vote-done-part-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.vote-done[data-revealed="true"] .vote-done__eyebrow,
.vote-done[data-revealed="true"] .vote-done__title,
.vote-done[data-revealed="true"] .vote-done__copy,
.vote-done[data-revealed="true"] .vote-done__actions,
.vote-done[data-revealed="true"] .vote-done__footnote {
  animation: vote-done-part-in 300ms ease-out both;
}

.vote-done[data-revealed="true"] .vote-done__title {
  animation-delay: 60ms;
}

.vote-done[data-revealed="true"] .vote-done__copy {
  animation-delay: 120ms;
}

.vote-done[data-revealed="true"] .vote-done__actions {
  animation-delay: 180ms;
}

.vote-done[data-revealed="true"] .vote-done__footnote {
  animation-delay: 240ms;
}

.vote-done__eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--orange-700);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

.vote-done__title {
  margin: 6px 0 0;
  color: var(--blue-500);
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 400;
  line-height: 32px;
}

.vote-done__copy {
  margin: 6px 0 0;
  color: var(--slate-500);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
}

.vote-done__actions {
  position: relative;
  display: flex;
  /* Full width so the confetti can sit at the card's content edges while the
     buttons stay centred. */
  align-self: stretch;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}

/* 2px gradient ring around a gradient pill, per the design's nested frames. */
.vote-done__cta {
  flex: 0 0 auto;
  padding: 14px 24px;
  border: 2px solid #ffdead;
  border-radius: 100px;
  background: linear-gradient(90deg, var(--orange-700) 0%, #ffad33 50%, #ffdead 100%);
  color: #fff7eb;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
  cursor: pointer;
}

.vote-done__link {
  padding: 14px 0;
  border: 0;
  background: none;
  color: var(--orange-700);
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
  cursor: pointer;
}

.vote-done__footnote {
  margin: 0;
  color: var(--orange-700);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}

/* =============================================================================
   Voting Progress Overlay — Figma node 752:63396

   Frosted cream veil over the whole pop up once a vote lands: a rail with the
   running vote count and a CTA into the next award.
   ========================================================================== */
.vote-progress {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 24px;
  border-radius: inherit;
  background: rgb(255 247 235 / 40%);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.vote-progress[hidden] {
  display: none;
}

.vote-progress__rail {
  /* mweb (Figma node 869:26227): count centred above a full-width track. */
  display: flex;
  width: min(100%, 615px);
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-radius: 1000px;
  background: var(--cream-100);
  box-shadow: 0 4px 16px rgb(245 147 0 / 16%);
}

.vote-progress__count {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: var(--slate-500);
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 1.2px;
  white-space: nowrap;
}

.vote-progress__count strong {
  color: var(--orange-700);
  font-weight: 400;
}

.vote-progress__track {
  width: 100%;
  max-width: none;
  height: 6px;
  overflow: hidden;
  border-radius: 4px;
  background: #fff;
}

.vote-progress__fill {
  display: block;
  width: 0;
  height: 100%;
  border-radius: 8px;
  background: linear-gradient(90deg, var(--orange-700) 0%, #ffad33 55%, #ffdead 100%);
  /* Ticks up 300ms linear once the overlay has settled, as the prototype does
     on its 0.8s timeout. */
  transition: width 300ms linear;
}

.vote-progress__next {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.vote-progress__next-label {
  margin: 0;
  color: #29303d;
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 1.2px;
}

/* Translucent pill at rest; the gradient sweeps in from the left on hover. */
.vote-progress__cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  overflow: hidden;
  padding: 18px 32px;
  border: 2px solid var(--cream-100);
  border-radius: 1000px;
  background: rgb(255 255 255 / 40%);
  color: #fffbf5;
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  cursor: pointer;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.vote-progress__cta::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(90deg, var(--orange-700) 0%, #ffad33 55%, #ffdead 100%);
  content: "";
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 300ms linear;
}

.vote-progress__cta:hover::before,
.vote-progress__cta:focus-visible::before {
  transform: scaleX(1);
}

/* The gradient sweeps in on its own as soon as the overlay appears, the way a
   "next episode" button fills, instead of waiting for a hover it may never get
   on touch. forwards holds the filled state once it lands. */
@keyframes vote-cta-fill {
  from {
    transform: scaleX(0);
  }

  to {
    transform: scaleX(1);
  }
}

.vote-progress:not([hidden]) .vote-progress__cta::before {
  animation: vote-cta-fill 2500ms linear forwards;
}

.vote-progress__cta-label {
  position: relative;
}

.vote-progress__cta-icon {
  position: relative;
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  background-color: currentcolor;
}

/* ---------------------------------------------------------------- footer */
/* mweb bottom bar: info icon, award rail, count. Desktop shrinks this back to
   the white disclaimer pill. */
/* display: flex below would beat the UA [hidden] rule. */
.vote-modal__footer[hidden] {
  display: none;
}

.vote-modal__footer {
  /* mweb: the awards rail is a bottom sheet pinned over the scrolling cards
     (Figma node 869:25172). Full-bleed, so the 16px content padding is
     cancelled and re-applied inside. */
  position: sticky;
  z-index: 2;
  bottom: 0;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 14px;
  min-height: 64px;
  margin: 0 -16px;
  padding: 8px 16px 12px;
  background: var(--cream-100);
}

/* The cards fade and blur into the sheet rather than meeting a hard edge:
   34px tall, cream ramping 0 -> 50% -> 100% opacity, with a progressive
   background blur of 0 -> 4px. The mask is what makes the blur progressive:
   a single backdrop-filter revealed gradually from top to bottom. */
.vote-modal__footer::before {
  position: absolute;
  right: 0;
  bottom: 100%;
  left: 0;
  height: 34px;
  backdrop-filter: blur(4px);
  background: linear-gradient(
    180deg,
    rgb(255 247 235 / 0%) 0%,
    rgb(255 247 235 / 50%) 50%,
    rgb(255 247 235 / 100%) 100%
  );
  content: "";
  mask-image: linear-gradient(180deg, rgb(0 0 0 / 0%) 0%, rgb(0 0 0 / 100%) 100%);
  pointer-events: none;
  -webkit-backdrop-filter: blur(4px);
  -webkit-mask-image: linear-gradient(180deg, rgb(0 0 0 / 0%) 0%, rgb(0 0 0 / 100%) 100%);
}

.vote-modal__footer .vote-modal__progress-text {
  font-size: 16px;
}

/* mweb: the same paragraph doubles as the tooltip, sitting 4px above the icon
   with the mirrored square corner (Figma 1018:23937 radii [12, 12, 12, 0]). */
.vote-modal__disclaimer {
  display: none;
  position: absolute;
  z-index: 3;
  bottom: calc(100% + 4px);
  left: 0;
  width: 232px;
  max-width: min(232px, calc(100vw - 32px));
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 8px 16px;
  border-radius: 12px 12px 12px 0;
  background: #fff;
  box-sizing: border-box;
  color: var(--orange-700);
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  text-align: center;
  box-shadow: 0 4px 8px rgb(0 0 0 / 8%);
}

.vote-modal__info-button[aria-expanded="true"] + .vote-modal__disclaimer {
  display: block;
}

/* The plate moved to the button so the icon can be pressed; the glyph itself
   is just the 20px asset now. */
.vote-modal__info {
  position: relative;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
}

.vote-modal__info-button {
  display: grid;
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
  place-items: center;
  box-sizing: border-box;
  transition: border-radius 150ms ease-out;
}

/* Pressed: the top-left corner squares off to meet the tooltip above it
   (Figma 1018:23937 radii [0, 24, 24, 24]). */
.vote-modal__info-button[aria-expanded="true"] {
  border-radius: 0 24px 24px 24px;
}

.vote-modal__disclaimer-icon {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  box-sizing: border-box;
}

.vote-modal__progress-track--footer {
  flex: 1 1 auto;
  max-width: none;
}

.vote-modal__footer .vote-modal__progress-text {
  color: var(--slate-500);
}

/* Shown when a category has no nominees yet. */
.vote-modal__empty {
  margin: 0;
  padding: 32px 0;
  color: var(--slate-500);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  letter-spacing: 1.2px;
  text-align: center;
  text-transform: uppercase;
  /* fill the row so the text centres in the grid */
  flex: 1 1 100%;
}

/* ------------------------------------------------------- awards ceremony */
/* Figma 994:23538 (mweb) / 994:23561 (desktop). Photographic backdrop with
   the ceremony details centred over it. */
.venue-section {
  width: 100%;
  padding: 80px 24px;
  /* Radial blue sits under the artwork so the seams blend on any aspect. */
  background-color: #026db6;
  background-image: url("../assets/awards-venue-bg-mweb.webp");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.venue-section__inner {
  display: flex;
  flex-direction: column;
  gap: 50px;
}

.venue-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}

.venue-head__eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: #ffdead;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: 4px;
  text-transform: uppercase;
}

/* Amber vertical gradient across the glyphs, per the design's text fill. */
.venue-head__title {
  margin: 0;
  background: linear-gradient(180deg, #ffad33 0%, #ffdead 100%);
  background-clip: text;
  color: transparent;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 400;
  line-height: 32px;
  letter-spacing: 1.2px;
  -webkit-background-clip: text;
}

.venue-head__note {
  margin: 0;
  color: #e1e4eb;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
}

.venue-contact {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 60px;
}

.venue-contact__divider {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 8px;
}

/* Rules run saturated at the trophy and fade towards the outer edges. */
.venue-contact__rule {
  height: 2px;
  flex: 1 1 auto;
}

.venue-contact__rule--left {
  background: linear-gradient(90deg, #ffdead 0%, #ffc670 50%, #ffad33 100%);
}

.venue-contact__rule--right {
  background: linear-gradient(90deg, #ffad33 0%, #ffc670 50%, #ffdead 100%);
}

.venue-contact__badge {
  display: grid;
  width: 54px;
  height: 54px;
  flex: 0 0 auto;
  padding: 3px;
  box-sizing: border-box;
  place-items: center;
}

.venue-contact__trophy {
  width: 48px;
  height: 48px;
  border-radius: 50%;
}

.venue-contact__info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}

.venue-contact__date {
  margin: 0;
  color: #ffc670;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.venue-contact__time {
  margin: 0;
  color: #f9fafb;
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
}

.venue-contact__place {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  color: #fff;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
}

.venue-contact__pin {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

@media (min-width: 1024px) {
  .mobile-menu {
    display: none;
  }

  .page {
    max-width: none;
  }

  .page
    > section:not(.hero):not(.sponsors-section):not(.sessions-section):not(
      .countdown-section
    ):not(.categories-section):not(.jury-section):not(.evaluate-section):not(
      .entrants-section
    ):not(.contact-section):not(.faq-section):not(.venue-section) {
    max-width: 480px;
    margin-inline: auto;
  }

  .hero {
    height: 910px;
    aspect-ratio: auto;
  }

  .site-header {
    top: 0;
    left: 0;
    justify-content: space-between;
    gap: 0;
    width: 100%;
    height: 96px;
    padding: 24px 120px;
    border-radius: 0;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transform: none;
  }

  .brand {
    order: 0;
    width: 148px;
    height: 48px;
    padding: 0;
  }

  .brand img {
    width: 148px;
    height: 48px;
  }

  .desktop-nav {
    display: flex;
    align-items: flex-start;
    gap: 32px;
    height: 40px;
  }

  .site-header__account-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    order: 3;
    flex: 0 0 auto;
  }

  .site-header__account-actions .user-account,
  .site-header__account-actions .continue-voting {
    order: 0;
  }

  .continue-voting {
    order: 4;
    gap: 8px;
    margin-left: 0;
    padding: 12px 24px;
    font-size: 14px;
    line-height: 20px;
  }

  /* Desktop keeps the short label until there is a vote to continue from. */
  .continue-voting__label--short {
    display: inline;
  }

  .continue-voting__label--full {
    display: none;
  }

  .continue-voting[data-has-votes="true"] .continue-voting__label--short {
    display: none;
  }

  .continue-voting[data-has-votes="true"] .continue-voting__label--full {
    display: inline;
  }

  /* Desktop has room for the arrow in both states. */
  .continue-voting[data-has-votes="true"] .continue-voting__icon {
    display: block;
  }

  .continue-voting[data-complete="true"] .continue-voting__label--short,
  .continue-voting[data-complete="true"] .continue-voting__label--full {
    display: none;
  }

  .continue-voting[data-complete="true"] .continue-voting__label--done {
    display: inline;
  }

  .continue-voting__icon {
    width: 24px;
    height: 24px;
  }

  .site-header__account-actions .user-account {
    align-self: stretch;
  }

  .user-account {
    display: flex;
  }

  .user-account__avatar {
    width: 40px;
    height: 40px;
  }

  .desktop-nav a {
    display: block;
    padding-top: 8px;
    color: var(--slate-500);
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    text-decoration: none;
  }

  .desktop-nav a::after {
    display: block;
    height: 2px;
    margin-top: 6px;
    border-radius: 4px;
    background: linear-gradient(90deg, #b86e00 0%, #f59300 50%, #ffad33 100%);
    content: "";
    opacity: 0;
    transition: opacity 160ms ease;
  }

  .desktop-nav a:hover::after,
  .desktop-nav a:focus-visible::after {
    opacity: 1;
  }

  .menu-button {
    display: none;
  }

  .hero__content {
    top: 144px;
    right: auto;
    bottom: auto;
    left: 120px;
    align-items: flex-start;
    width: 669px;
  }

  .hero-badge--live {
    display: flex;
  }

  .awards-title {
    align-items: flex-start;
    margin-top: 24px;
    text-align: left;
  }

  .awards-title__line > span {
    background-image: none;
    color: var(--blue-500);
    font-size: 72px;
    line-height: 96px;
    letter-spacing: normal;
  }

  .awards-title__line > .awards-title__wordmark {
    background-image: linear-gradient(90deg, #b86e00 0%, #f59300 50%, #ffad33 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-size: 72px;
    line-height: 96px;
    letter-spacing: 2px;
  }

  .awards-title__line > .awards-title__year {
    margin-top: 16px;
  }

  .hero__description {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 614px;
    margin-top: 24px;
    font-size: 16px;
    line-height: 24px;
    text-align: left;
  }

  .hero__description::before {
    flex: 0 0 2px;
    height: 36px;
    border-radius: 8px;
    background: var(--orange-500);
    content: "";
  }

  .hero__actions {
    margin-top: 24px;
    padding: 8px 0 24px;
  }

  .notify-button > span {
    padding: 16px 48px;
  }

  .hero-stats {
    width: 500px;
    margin-top: 48px;
  }

  .hero-stat {
    flex: 0 0 156px;
    text-align: left;
  }

  .hero-stat__value {
    background-image: linear-gradient(180deg, #026eb6 0%, #01375b 100%);
    font-size: 32px;
    line-height: 40px;
  }

  .hero-stat__label {
    font-size: 12px;
    line-height: 16px;
  }

  .hero__rail {
    position: fixed;
    z-index: 1;
    top: 50%;
    right: 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    width: 16px;
    transform: translateY(-50%);
  }

  /* Tracks progress through the whole page, so it stays put as the hero leaves. */
  .hero__rail-track {
    overflow: hidden;
  }

  .hero__rail-label {
    color: var(--slate-500);
    font-family: var(--font-mono);
    font-size: 12px;
    line-height: 16px;
    letter-spacing: 2px;
    text-transform: uppercase;
    writing-mode: vertical-rl;
  }

  .hero__rail-track {
    position: relative;
    width: 4px;
    height: 280px;
    border-radius: 4px;
    background: #fff;
  }

  .hero__rail-fill {
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 0%;
    border-radius: 8px;
    background: linear-gradient(180deg, #b86e00 0%, #ffad33 50%, #ffdead 100%);
    transition: height 100ms linear;
  }

  /* Figma paints a blue radial on top of two navy ones on desktop, while the
     mobile frame is navy. Swap the stops for #000066/#000033/#00001f to match
     mobile if the blue turns out to be unintended. */
  .sponsors-section {
    padding: 120px;
    background-image: radial-gradient(50% 157% at 50% 0%, #0286de 0%, #01558d 100%);
  }

  .sponsors-section__container {
    align-items: center;
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: 48px;
  }

  .sponsors-header {
    width: 100%;
    padding-top: 0;
    gap: 16px;
  }

  .sponsors-header__eyebrow {
    font-size: 16px;
    line-height: 24px;
  }

  .sponsors-header__title {
    font-size: 52px;
    line-height: 70px;
    letter-spacing: 1.2px;
  }

  .sponsors-header__title span {
    display: block;
  }

  .title-partner {
    width: 480px;
    padding: 48px;
    background: linear-gradient(180deg, rgb(255 173 51 / 40%) 0%, rgb(255 173 51 / 0%) 100%);
    box-shadow: inset 0 0 0 1px #ffad33;
  }

  .title-partner__label {
    font-size: 14px;
    line-height: 20px;
  }

  .title-partner__name {
    padding: 16px 0;
    font-size: 52px;
    line-height: 64px;
    font-weight: 600;
  }

  .title-partner__description {
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
  }

  .partner-group {
    gap: 24px;
    width: 100%;
  }

  .partner-group__label {
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 3px;
    padding-top: 16px;
  }

  .partner-group--associate .partner-group__label {
    padding-top: 32px;
  }

  .partner-marquee__track {
    gap: 64px;
    padding-right: 64px;
  }

  .partner-marquee__track li {
    font-size: 32px;
    line-height: 48px;
  }

  .sessions-section {
    padding: 120px 0;
  }

  /* Max width lives on the wrapper: auto inline margins on a stretched flex
     child collapse it to content width, which zeroed the progress bar. The
     24px inline padding keeps content off the viewport edge below 1248. */
  .sessions-section__inner {
    max-width: 1248px;
    margin-inline: auto;
    padding-inline: 24px;
    gap: 8px;
  }

  .sessions-head {
    flex-direction: row;
    align-items: flex-end;
    gap: 200px;
    padding: 8px 0 0;
  }

  .sessions-head__reveal {
    flex: 1 1 850px;
    gap: 16px;
  }

  .sessions-head__eyebrow {
    font-size: 16px;
    line-height: 24px;
  }

  /* Flex column so the whitespace between the two block spans does not
     generate a phantom third line box. 51px rather than the spec'd 52px:
     at 52px the longer line measures 851px against the 850px column, so it
     wrapped to a third line. */
  .sessions-head__title {
    display: flex;
    flex-direction: column;
    font-size: 51px;
    line-height: 70px;
    letter-spacing: 1.2px;
  }

  .sessions-head__title span {
    display: block;
  }

  .sessions-head__note {
    flex: 0 0 150px;
  }

  .sessions-filmstrip {
    gap: 32px;
    padding: 48px 0 32px;
    flex-direction: row;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
  }

  .session-card {
    flex: 0 0 510px;
    padding: 16px 24px 24px;
    height: 340px;
  }

  /* Mobile stacks the cards and drops the play CTA, so desktop restores the
     filmstrip treatment. */
  .session-card__badge {
    padding: 8px 10px 8px 12px;
  }

  .session-card__play {
    display: flex;
  }

  .session-card__title {
    font-size: 20px;
    line-height: 28px;
  }

  .sessions-progress {
    padding: 0;
    display: flex;
  }

  .panel-modal,
  .panel-modal__shell {
    max-height: calc(100dvh - 64px);
  }

  .panel-modal {
    border-radius: 28px;
  }

  .panel-modal__header {
    padding: 32px 88px 32px 40px;
  }

  .panel-modal__heading p {
    margin-bottom: 12px;
    font-size: 12px;
  }

  .panel-modal__heading h2 {
    font-size: 32px;
    letter-spacing: -0.7px;
    line-height: 42px;
  }

  .panel-modal__close {
    top: 24px;
    right: 24px;
    width: 44px;
    height: 44px;
  }

  .panel-modal__content {
    grid-template-columns: minmax(0, 1.65fr) minmax(240px, 0.9fr);
    align-items: start;
    gap: 32px;
    padding: 32px 40px 40px;
  }

  .panel-modal__content--single {
    grid-template-columns: 1fr;
  }

  .panel-modal__section h3 {
    font-size: 20px;
    line-height: 28px;
  }

  .panel-modal__section ul {
    gap: 16px;
  }

  .panel-modal__section li {
    font-size: 15px;
    line-height: 23px;
  }

  .panel-modal__section--speakers {
    padding: 24px;
  }

  .countdown-section {
    gap: 16px;
    padding: 120px;
    background-image: radial-gradient(50% 157% at 50% 0%, #0286de 0%, #01558d 100%);
  }

  /* Decorative speckle. Coordinates come straight from the 1440-wide frame, so
     the layer is centred on a 1440px canvas and every dot is a box-shadow of a
     single 3px element rather than 20 extra DOM nodes. */
  .countdown-section__dots {
    position: absolute;
    top: 0;
    left: 50%;
    display: block;
    width: 3px;
    height: 3px;
    margin-left: -720px;
    border-radius: 50%;
    box-shadow:
      1288px 811px #e8ac42, 1145px 152px #e8ac42, 708px 709px #e8ac42,
      707px 292px #e8ac42, 845px 70px #e8ac42, 158px 611px #e8ac42,
      154px 684px #e8ac42, 1015px 798px #e8ac42, 119px 848px #e8ac42,
      755px 528px #e8ac42, 840px 590px #e8ac42, 998px 113px #e8ac42,
      710px 54px #e8ac42, 768px 764px #e8ac42, 35px 620px #e8ac42,
      690px 578px #e8ac42, 872px 341px #e8ac42, 1071px 65px #e8ac42,
      1270px 843px #e8ac42, 480px 762px #e8ac42;
  }

  .countdown-section__eyebrow {
    font-size: 16px;
    line-height: 24px;
  }

  .countdown-section__title {
    font-size: 52px;
    line-height: 70px;
    letter-spacing: 1.2px;
    padding-top: 4px;
  }

  .countdown-section__description {
    max-width: 696px;
    font-size: 15.5px;
    line-height: 23.25px;
  }

  .countdown-clock {
    gap: 24px;
    padding-top: 24px;
  }

  .countdown-clock__unit strong {
    font-size: 72px;
    line-height: 80px;
    filter: drop-shadow(0 0 40px rgb(232 172 66 / 25%));
  }

  .countdown-clock__unit span {
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 3.2px;
  }

  .countdown-clock__separator {
    font-size: 72px;
    line-height: 80px;
    filter: drop-shadow(0 0 40px rgb(232 172 66 / 25%));
  }

  .voting-notify-form {
    gap: 40px;
    width: 520px;
    padding-top: 32px;
  }

  .voting-notify-form__row {
    flex-direction: row;
    align-items: center;
  }

  .voting-notify-form__input {
    flex: 1 1 auto;
    padding: 16px 24px;
  }

  /* Scoped to the countdown's horizontal row: as a bare modifier this
     flex-basis became a height on the footer CTA, which sits in a column. */
  .voting-notify-form__row .notify-button--on-dark {
    flex: 0 0 143px;
  }

  /* Same specificity as `.notify-button > span` above, so it must come after it
     to keep the countdown button's 32px inline padding. */
  .notify-button--on-dark > span {
    padding: 16px 32px;
  }

  .categories-section {
    gap: 32px;
    padding: 120px 80px;
  }

  .categories-head {
    width: 100%;
    max-width: 1280px;
    padding: 8px 0 12px;
  }

  .categories-head__eyebrow {
    font-size: 16px;
    line-height: 24px;
  }

  .categories-head__title {
    max-width: 1008px;
    font-size: 52px;
    line-height: 70px;
    letter-spacing: 1.2px;
  }

  .categories-head__list {
    max-width: 1168px;
    font-size: 16px;
    line-height: 24px;
  }

  .category-tabs {
    justify-content: center;
    max-width: 1280px;
    overflow-x: visible;
  }

  .category-tab {
    font-size: 16px;
  }

  .featured-vote__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
  }

  .featured-vote__title {
    font-size: 28px;
    line-height: 36px;
  }

  .featured-vote__description {
    font-size: 14px;
    line-height: 20px;
  }

  .category-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    max-width: 1280px;
  }

  /* Mobile uses the tighter card metrics; desktop restores the spec'd ones. */
  .category-card {
    padding: 24px;
  }

  .category-card__body {
    gap: 8px;
  }

  .category-card__title {
    font-size: 20px;
    line-height: 32px;
  }

  .categories-footer {
    padding-top: 16px;
  }

  .categories-footer__more {
    font-size: 16px;
  }

  .jury-section {
    gap: 56px;
    padding: 120px 80px;
  }

  .jury-head {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    max-width: 1280px;
    padding-top: 8px;
  }

  .jury-head__reveal {
    display: flex;
    flex: 0 1 632px;
    flex-direction: column;
    gap: 16px;
  }

  .jury-head__eyebrow {
    font-size: 16px;
    line-height: 24px;
  }

  /* 51px rather than the spec'd 52px: at 52px the longer line measures 632.5px
     against the 632px column, so it wrapped to a third line. */
  .jury-head__title {
    font-size: 51px;
    line-height: 70px;
    letter-spacing: 1.2px;
  }

  .jury-head__note {
    flex: 0 0 388px;
  }

  .jury-panel {
    flex-direction: row;
    gap: 40px;
    max-width: 1280px;
  }

  /* Featured card is one square half, the four-up grid the other. */
  .jury-panel__featured {
    flex: 1 1 620px;
  }

  .jury-panel__grid {
    flex: 1 1 620px;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
  }

  .jury-card__meta {
    padding: 16px;
  }

  .jury-card--featured .jury-card__meta {
    padding: 32px;
  }

  .jury-card__name {
    font-size: 28px;
    line-height: 38px;
  }

  .jury-card__role {
    font-size: 16px;
    line-height: 24px;
  }

  .jury-card--featured .jury-card__name {
    font-size: 40px;
    line-height: 56px;
  }

  .jury-card--featured .jury-card__role {
    font-size: 20px;
    line-height: 28px;
  }

  .jury-card--featured .jury-card__bio {
    gap: 12px;
  }

  .jury-card--featured .jury-card__bio-text {
    font-size: 16px;
    line-height: 24px;
  }

  .jury-card--featured .jury-card__tags li {
    padding: 8px 16px;
    font-size: 14px;
    line-height: 20px;
  }

  @media (hover: hover) {
    .jury-card--featured:hover .jury-card__bio {
      margin-top: 12px;
    }
  }

  .jury-card--featured:focus-within .jury-card__bio {
    margin-top: 12px;
  }

  .evaluate-section {
    gap: 56px;
    padding: 120px 160px;
    background-image: radial-gradient(50% 157% at 50% 0%, #0286de 0%, #01558d 100%);
  }

  .evaluate-head {
    max-width: 853px;
    gap: 12px;
    padding-top: 8px;
  }

  .evaluate-head__eyebrow {
    font-size: 16px;
    line-height: 24px;
  }

  /* 51px rather than 52px: at 52px this line measures 853.4px against the
     853px column and wrapped to a second line. */
  .evaluate-head__title {
    font-size: 51px;
    line-height: 70px;
    letter-spacing: 1.2px;
  }

  .evaluate-head__description {
    max-width: 757px;
    font-size: 16px;
    line-height: 24px;
  }

  .evaluate-timeline {
    gap: 48px;
    max-width: 1120px;
  }

  /* Card | node | card. The empty half keeps the spine centred so the cards
     alternate sides. */
  .evaluate-step {
    display: grid;
    grid-template-columns: 1fr 64px 1fr;
    align-items: center;
    gap: 40px;
  }

  /* Desktop draws one connector down the centre spine, so the mobile
     two-halves-per-step approach is switched off. */
  .evaluate-step {
    padding-block: 0;
  }

  .evaluate-step:first-child,
  .evaluate-step:last-child {
    margin-top: 0;
    margin-bottom: 0;
  }

  .evaluate-step:not(:first-child)::before {
    content: none;
  }

  .evaluate-step__node {
    flex: 0 0 64px;
    grid-row: 1;
    grid-column: 2;
    order: 0;
    height: 64px;
  }

  .evaluate-step__icon {
    width: 32px;
    height: 32px;
  }

  /* Both cells are pinned to row 1: on the reversed step the card sits in
     column 3 and comes first in the DOM, so sparse auto-placement would
     otherwise push the node into a second row. */
  .evaluate-card {
    grid-row: 1;
    grid-column: 1;
    min-height: 208px;
    padding: 24px;
    gap: 8px;
  }

  .evaluate-step--reverse .evaluate-card {
    grid-column: 3;
  }

  /* Connector between consecutive nodes. For a row of height h the line starts
     h/2+40 from the top and runs h-32, which lands 8px clear of the next node
     for any equal row height (176px at the spec'd 208px rows). */
  .evaluate-step:not(:last-child)::after {
    position: absolute;
    top: calc(50% + 40px);
    left: 50%;
    width: 2px;
    height: calc(100% - 60px);
    border-radius: 8px;
    background: linear-gradient(180deg, #b86e00 0%, #ffad33 50%, #ffdead 100%);
    content: "";
    transform: translateX(-50%);
  }

  .evaluate-card__number strong {
    font-size: 44px;
    line-height: 56px;
  }

  .evaluate-card__total {
    font-size: 22px;
    line-height: 40px;
  }

  .evaluate-card__title {
    font-size: 24px;
    line-height: 36px;
  }

  .evaluate-card__description {
    font-size: 16px;
    line-height: 24px;
  }

  .entrants-section {
    padding: 120px 0;
  }

  .entrants-section__inner {
    max-width: 1200px;
    margin-inline: auto;
  }

  .entrants-head {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
    padding: 8px 0 0;
  }

  .entrants-head__reveal {
    flex: 0 1 701px;
  }

  .entrants-head__eyebrow {
    font-size: 16px;
    line-height: 24px;
  }

  /* 51px rather than 52px: at 52px "Who Should Enter?" measures 702.1px
     against the 701px column. */
  .entrants-head__title {
    font-size: 51px;
    line-height: 70px;
    letter-spacing: 1.2px;
  }

  .entrants-head__note {
    flex: 0 0 294px;
  }

  .entrants-grid {
    gap: 32px;
    padding: 48px 0 32px;
    overflow-x: visible;
    display: flex;
  }

  .entrant-card {
    flex: 1 1 0;
    min-height: 252px;
    padding: 24px;
  }

/* Figma desktop badge is 56x56 with 12px padding, not the mobile 40x40:
     a 32px icon in a 40px badge leaves only 4px and reads as cramped. */
  .entrant-card__badge {
    flex: 0 0 56px;
    width: 56px;
    height: 56px;
    padding: 12px;
  }

  /* Desktop uses different stops for the same stroke. */
  .entrant-card__badge::before {
    background: linear-gradient(135deg, #ffc670 0%, #fff7eb 100%) border-box;
  }

  .entrant-card__icon {
    width: 32px;
    height: 32px;
  }

  .contact-section {
    gap: 56px;
    padding: 120px 160px;
    background-image: radial-gradient(50% 157% at 50% 0%, #0286de 0%, #01558d 100%);
  }

  .contact-head {
    max-width: 620px;
    gap: 12px;
    padding-top: 8px;
  }

  .contact-head__eyebrow {
    font-size: 16px;
    line-height: 24px;
  }

  /* 50px rather than 52px: Figma's text node is 633px wide inside a 620px
     container, so at 52px "Have a question?" wraps here. */
  .contact-head__title {
    font-size: 50px;
    line-height: 70px;
    letter-spacing: 1.2px;
  }

  .contact-head__description {
    font-size: 16px;
    line-height: 24px;
  }

  .contact-list {
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
    max-width: 1120px;
  }

  .contact-person__top {
    margin-bottom: 32px;
    grid-row: auto;
  }

  .contact-person__rule {
    display: block;
  }

  /* A short lead-in before the first avatar, so the row reads as one continuous
     rail punctuated by people rather than starting abruptly at a face.
     Pseudo-element rather than markup: it is pure decoration. */
  .contact-person:first-child .contact-person__top::before {
    flex: 0 0 88px;
    height: 2px;
    border-radius: 8px;
    background: linear-gradient(90deg, #ffad33 0%, #ffc670 50%, #ffdead 100%);
    content: "";
  }

  /* The rule runs from one avatar to the next, so it has to cross the 40px
     grid gap and stop 8px short of the following avatar. */
  .contact-person:not(:last-child) .contact-person__top {
    margin-right: -32px;
  }

  .contact-person {
    display: flex;
    flex-direction: column;
    align-items: stretch  /* base grid uses start; flex column must stretch or the rule cannot grow */;
  }

  .contact-person__avatar {
    flex: 0 0 62px;
    width: 62px;
    height: 62px;
  }

  .contact-person__avatar--initials {
    font-size: 18px;
  }

  .contact-person__label {
    margin: 0 0 8px;
  }

  .contact-person__name {
    font-size: 24px;
    line-height: 32px;
    margin: 0 0 12px;
  }

  .contact-person__row {
    margin: 0 0 12px;
  }

  .contact-person:not(:last-child)::after {
    display: none;
  }

  .faq-section {
    gap: 48px;
    padding: 160px;
  }

  /* width:100% is required: auto inline margins on a stretched flex child
     collapse it to content width. */
  .faq-head {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
    width: 100%;
    max-width: 1120px;
    margin-inline: auto;
    padding-top: 8px;
  }

  .faq-head__reveal {
    flex: 0 1 665px;
    gap: 16px;
  }

  .faq-head__eyebrow {
    font-size: 16px;
    line-height: 24px;
  }

  .faq-head__title {
    font-size: 52px;
    line-height: 70px;
    letter-spacing: 1.2px;
    font-family: var(--font-inline);
  }

  .faq-head__note {
    flex: 0 0 255px;
  }

  .faq-list {
    width: 100%;
    max-width: 1120px;
    margin-inline: auto;
  }

  .faq-item__summary {
    gap: 32px;
    padding: 32px 0;
  }

  .faq-item[open] .faq-item__summary {
    padding-bottom: 8px;
  }

  .faq-item__question {
    font-size: 28px;
    line-height: 36px;
  }

  .faq-item__chevron {
    flex: 0 0 48px;
    height: 48px;
  }

  .faq-item__chevron::before {
    width: 24px;
    height: 24px;
  }

  /* Answer is inset from the right so the measure stays readable. */
  .faq-item__answer {
    padding: 8px 400px 32px 0;
  }

  .faq-item__answer p {
    font-size: 18px;
    line-height: 28px;
  }

  /* Side padding tracks the viewport: 11.1vw is 160px at 1440 but shrinks below
     it, so the 1120px content column never forces a horizontal scrollbar. */
  .site-footer {
    gap: 48px;
    padding: 60px clamp(24px, 11.1vw, 160px) 80px;
    background-image: radial-gradient(50% 157% at 50% 0%, #0286de 0%, #01558d 100%);
  }

  .site-footer__closing {
    gap: 32px;
    max-width: 1120px;
    padding-bottom: 80px;
  }

  /* Figma sets 36px and lets the text node (1273px) overflow its 1120px frame.
     Reproduced by letting the statement exceed the column and scaling with the
     viewport: 2.5vw is exactly 36px at 1440 and keeps the two nowrap lines at
     ~89% of viewport width, so they never overflow on narrower desktops. */
  .site-footer__statement {
    max-width: none;
    font-size: min(36px, 2.5vw);
    line-height: 1.9;
    font-family: var(--font-inline);
    letter-spacing: 1.2px;
  }

  .site-footer__statement span {
    white-space: nowrap;
  }

  /* Footer CTA is the wide variant: 48px inline padding and a 24px arrow. */
  .site-footer .notify-button--on-dark > span {
    padding: 16px 48px;
  }

  .site-footer__cta-arrow {
    width: 24px;
    height: 24px;
    vertical-align: -5px;
  }

  .site-footer__grid {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 40px;
    max-width: 1120px;
    padding-top: 48px;
  }

  /* Equal thirds rather than a rigid 347px basis: 1120px minus two 40px gaps
     divides to 346.67px, matching the spec while still able to shrink. */
  .site-footer__brand {
    flex: 1 1 200px;
    padding-bottom: 34px;
  }

  .site-footer__tagline {
    max-width: 300px;
  }

  .site-footer__column {
    flex: 1 1 200px;
  }

  .site-footer__bottom {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    max-width: 1120px;
    padding-top: 24px;
  }

  /* -------------------------------------------------------------------------
     Nominee Modal, desktop (per Figma 657:32140)
     ------------------------------------------------------------------------- */
  /* ---------------------------------------------------------------------------
     Voting Pop Up at the design's own scale (Figma node 752:58157, 1424x884).
     ------------------------------------------------------------------------ */
  .vote-modal {
    width: min(100% - 24px, 1424px);
    height: auto;
    max-height: min(92vh, 884px);
    border: 1px solid #ffdead;
    border-radius: 48px;
    margin: auto;
    box-shadow: 0 16px 32px rgb(0 0 0 / 25%);
  }

  /* Back to copy on the left with the arrows top-right. */
  .vote-modal__intro {
    gap: 16px;
    grid-template-columns: 1fr auto auto;
    text-align: left;
  }

  .vote-modal__intro .vote-modal__eyebrow {
    justify-content: flex-start;
    grid-area: 1 / 1;
  }

  .vote-modal__intro .vote-nav--prev {
    grid-area: 1 / 2;
  }

  .vote-modal__intro .vote-nav--next {
    grid-area: 1 / 3;
  }

  /* Desktop swaps the mweb chevrons for the circular button art. */
  .vote-nav {
    height: 48px;
  }

  .vote-nav__icon {
    width: 48px;
    height: 48px;
  }

  .vote-nav__icon-chevron {
    display: none;
  }

  .vote-nav__icon-circle {
    display: block;
  }

  .vote-nav__icon-arrow {
    display: block;
  }

  /* Desktop reveals the label on keyboard focus, as before. */
  .vote-nav:hover .vote-nav__label,
  .vote-nav:focus-visible .vote-nav__label {
    max-width: 260px;
    padding: 0 8px;
    opacity: 1;
  }

  /* The tap flash is mweb-only: desktop already shows the circle and arrow. */
  .vote-nav__icon::before {
    display: none;
  }

  .vote-modal__title {
    grid-area: 2 / 1 / 3 / 2;
  }

  .vote-modal__description {
    grid-area: 3 / 1 / 4 / 2;
  }

  .vote-modal__bar {
    gap: 16px;
    padding: 32px;
  }

  .vote-modal__logo {
    width: 148px;
  }

  .vote-modal__progress {
    display: flex;
  }

  .vote-modal__close {
    width: 48px;
    height: 48px;
  }

  .vote-modal__close-icon {
    width: 20px;
    height: 20px;
  }

  .vote-modal__content {
    gap: 24px;
    padding: 0 120px 40px;
  }

  .vote-modal__intro {
    padding-top: 24px;
  }

  .vote-modal__title {
    font-size: 28px;
    line-height: 36px;
  }

  .vote-modal__description {
    max-width: 731px;
    font-size: 16px;
    line-height: 24px;
  }

  .vote-modal__tabs {
    gap: 32px;
  }

  .vote-tab {
    font-size: 16px;
  }

  .vote-tab::after {
    right: 16px;
    left: 16px;
  }

  .vote-tab[data-voted="true"]::after {
    left: 36px;
  }

  .vote-tab.is-active:not([data-voted="true"])::after {
    left: 32px;
  }

  .vote-modal__cards {
    flex-direction: row;
    gap: 24px;
    padding: 4px 0 8px;
    overflow-x: auto;
    overflow-y: visible;
  }

  .vote-card {
    width: 278px;
    height: auto;
    flex-direction: column;
  }

  /* Desktop lays the cards out in a row of equal height, so the reserved
     height stays regardless of which one was chosen. */
  .vote-card[data-voted="false"] {
    min-height: 119px;
  }

  .vote-card__media {
    width: auto;
    height: auto;
    flex: 0 0 auto;
    align-self: stretch;
    aspect-ratio: 278 / 156;
    /* Only the lower corners are rounded, which lifts the image off the blue
       panel behind it. */
    border-radius: 0 0 16px 16px;
    margin: 0;
  }

  /* Desktop moves the tick to the top-right of the artwork, at 24px. */
  .vote-card__tick {
    right: 8px;
    left: auto;
    width: 24px;
    height: 24px;
  }

  .vote-card__meta {
    gap: 8px;
  }

  .vote-card__badge {
    display: block;
  }

  /* Plain row at rest; the hover rules above morph it into the pill. */
  .vote-card__cta {
    padding: 10px 0;
    background: none;
    font-size: 14px;
    line-height: 20px;
    box-shadow: none;
  }

  .vote-card__cta-label[data-vote-idle] {
    opacity: 1;
  }

  .vote-card__cta-label[data-vote-hover] {
    opacity: 0;
  }

  .vote-card__cta-icon {
    width: 20px;
    margin-left: 8px;
    opacity: 1;
  }

  .vote-card__info {
    padding: 24px;
    gap: 12px;
  }

  .vote-card__brand {
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 4px;
  }

  .vote-card__name {
    font-size: 18px;
    line-height: 28px;
  }

  .vote-modal__panel {
    position: relative;
  }

  .vote-progress {
    gap: 40px;
    padding: 48px;
  }

  .vote-progress__rail {
    flex-direction: row;
    justify-content: space-between;
    gap: 16px;
    padding: 32px;
  }

  .vote-progress__track {
    max-width: 400px;
  }

  /* ----------------------------------------------- voting complete, desktop */
  /* Figma 920:19626: a 578x432 sheet, the rail turned horizontal, larger type. */
  .vote-done__card {
    max-width: 578px;
    min-height: 432px;
    padding: 32px 49px;
    gap: 12px;
  }

  .vote-done__rail {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 32px;
  }

  .vote-done__track {
    max-width: 265px;
  }

  .vote-done__eyebrow {
    font-size: 14px;
    line-height: 20px;
  }

  .vote-done__title {
    font-size: 24px;
    line-height: 36px;
  }

  .vote-done__copy {
    font-size: 16px;
    line-height: 24px;
  }

  .vote-done__actions {
    gap: 16px;
    margin-top: 16px;
  }

  .vote-done__cta {
    padding: 16px 48px;
    font-size: 16px;
    line-height: 24px;
  }

  .vote-done__footnote {
    font-size: 16px;
    line-height: 24px;
  }

  .vote-done__confetti {
    width: 88px;
    height: 88px;
    margin-top: -44px;
  }

  .vote-modal__footer {
    /* Desktop keeps the white pill sitting inline under the cards. */
    position: static;
    align-self: flex-start;
    gap: 8px;
    min-height: 0;
    margin: 0;
    padding: 8px 16px 8px 8px;
    border-radius: 24px;
    background: #fff;
  }

  .vote-modal__footer::before {
    display: none;
  }

  .vote-modal__disclaimer-icon {
    /* No disc here: the desktop footer is itself a white pill. */
    width: 20px;
    height: 20px;
    padding: 0;
    background: none;
  }

  /* Desktop: no tooltip. The icon is a plain glyph and the disclaimer sits
     inline beside it inside the footer pill. */
  .vote-modal__info {
    gap: 8px;
  }

  .vote-modal__info-button {
    width: 20px;
    height: 20px;
    border-radius: 0;
    background: none;
    cursor: default;
  }

  .vote-modal__info-button[aria-expanded="true"] {
    border-radius: 0;
  }

  .vote-modal__disclaimer,
  .vote-modal__info-button[aria-expanded="true"] + .vote-modal__disclaimer {
    display: flex;
    position: static;
    width: auto;
    max-width: none;
    padding: 0;
    border-radius: 0;
    background: none;
    font-size: 14px;
    line-height: 20px;
    text-align: left;
    box-shadow: none;
  }

  /* The rail lives in the header on desktop. */
  .vote-modal__progress-track--footer,
  .vote-modal__footer .vote-modal__progress-text {
    display: none;
  }

  .vote-modal__empty {
    padding: 48px 0;
    font-size: 14px;
    line-height: 20px;
  }

/* ----------------------------------------------------- awards ceremony */
  .venue-section {
    padding: 80px 0;
    background-image: url("../assets/awards-venue-bg.webp");
  }

  .venue-head {
    /* width: 100% is required: auto inline margins would otherwise cancel the
       flex stretch and leave this shrink-to-fit. */
    width: 100%;
    max-width: 620px;
    margin-inline: auto;
  }

  .venue-head__eyebrow {
    font-size: 16px;
    line-height: 24px;
  }

  .venue-head__title {
    /* Drawn on one line, overflowing the 620px heading column. */
    font-size: 52px;
    line-height: 70px;
    white-space: nowrap;
  }

  .venue-head__note {
    font-size: 16px;
    line-height: 24px;
  }

  .venue-contact {
    width: 100%;
    max-width: 1120px;
    margin-inline: auto;
  }

  .venue-contact__divider {
    gap: 16px;
  }

  .venue-contact__badge {
    width: 62px;
    height: 62px;
  }

  .venue-contact__trophy {
    width: 56px;
    height: 56px;
  }

  .venue-contact__info {
    gap: 12px;
  }

  .venue-contact__date {
    font-size: 22px;
    line-height: 32px;
  }

  .venue-contact__time {
    font-size: 20px;
    line-height: 28px;
  }

  .venue-contact__place {
    gap: 8px;
    font-size: 18px;
    line-height: 28px;
  }

  .venue-contact__pin {
    width: 24px;
    height: 24px;
  }
}

@media (max-width: 359px) {
  .hero__content {
    right: 12px;
    left: 12px;
  }

  .awards-title__line > span {
    font-size: 34px;
    line-height: 44px;
  }

  .awards-title__line > .awards-title__wordmark {
    font-size: 29px;
    line-height: 38px;
  }

  .hero__description {
    font-size: 11px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .vote-tab__dot::after {
    animation: none;
  }

  .vote-progress:not([hidden]) .vote-progress__cta::before {
    animation: none;
    transform: scaleX(1);
  }

  .vote-done:not([hidden]) .vote-done__card,
  .vote-done:not([hidden]):not([data-rail="out"]) .vote-done__rail {
    animation: none;
  }

  .vote-done__rail {
    transition: none;
  }

  .vote-done[data-revealed="true"] .vote-done__eyebrow,
  .vote-done[data-revealed="true"] .vote-done__title,
  .vote-done[data-revealed="true"] .vote-done__copy,
  .vote-done[data-revealed="true"] .vote-done__actions,
  .vote-done[data-revealed="true"] .vote-done__footnote,
  .vote-done[data-revealed="true"] .vote-done__confetti--left,
  .vote-done[data-revealed="true"] .vote-done__confetti--right {
    animation: none;
  }

  .notify-button {
    transition: none;
  }

  .partner-marquee__track {
    animation: none;
  }

  .category-card,
  .category-card::before {
    transition: none;
  }

  .category-card:hover,
  .category-card:focus-within {
    transform: none;
  }

  .cursor-dot,
  .cursor-ring {
    display: none !important;
  }

  .jury-card__bio,
  .jury-card__meta::before,
  .session-card__reveal,
  .contact-person__hover-icon,
  .contact-person__row,
  .entrant-card,
  .entrant-card::before,
  .awards-title__line > span,
  .hero__rail-fill {
    transition: none;
  }

  .jury-card:hover .jury-card__bio,
  .jury-card:hover .jury-card__meta::before,
  .session-card:hover .session-card__reveal {
    transition-delay: 0ms;
  }

  .entrant-card:hover,
  .entrant-card:focus-within {
    transform: none;
  }

  .contact-person__hover-icon,
  .awards-title__line > span {
    transform: none;
  }

  .partner-marquee {
    overflow-x: auto;
  }

  .panel-modal[open] {
    animation: none;
  }
}