/* ==========================================================================
   College Hackathon page: "Dot Matrix" theme
   Black and white with one red accent. Instrument Sans for everything you read;
   the dot-matrix face only for LED elements.
   ========================================================================== */

.dm {
  --black: #000;
  --white: #f4f4f2;
  --grey: #9a9a96;
  --grey-2: #3a3a38;
  --red: #ff2a1f;

  --font-dot: "Doto", monospace;
  --font-ui: "Instrument Sans", "Inter", system-ui, sans-serif;

  background: var(--black);
  color: var(--white);
  font-family: var(--font-ui);
}
.dm ::selection { background: var(--red); color: #fff; }

/* Doto with fully round dots, to match the LED board. */
.dm-countdown__value,
.dm-stat__num { font-variation-settings: "ROND" 100; }
.dm :focus-visible { outline-color: var(--red); }

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

/* ---------- Button ---------- */

.dm-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  height: 50px;
  padding: 0 1.4rem;
  border-radius: 6px;
  background: var(--white);
  color: var(--black);
  font-family: var(--font-ui);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
  transition: background-color 0.25s, color 0.25s;
}
.dm-btn span { transition: transform 0.3s var(--ease-out); }
.dm-btn:hover { background: var(--red); color: #fff; }
.dm-btn:hover span { transform: translateX(4px); }

/* ---------- Nav ---------- */

.dm .nav { color: var(--white); }
.dm .nav.is-scrolled::before {
  background: rgba(0, 0, 0, 0.75);
  border-color: rgba(255, 255, 255, 0.08);
}
.dm-brand { gap: 0.45rem; font-family: var(--font-ui); font-size: 1.1rem; font-weight: 600; letter-spacing: -0.02em; }
/* "College '27" after the logo, lettered in the LED board's dot face with the year lit red,
   the same way the board spells HACKTULANE '27. The high school page's sticker, in this page's language. */
.dm-tag {
  margin-left: 0.35rem;
  font-family: var(--font-dot);
  font-variation-settings: "ROND" 100;
  font-size: 1.45rem;
  font-weight: 900;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
}
.dm-tag b { color: var(--red); font-weight: inherit; text-shadow: 0 0 10px rgba(255, 42, 31, 0.55); }
@media (max-width: 420px) { .dm-tag { font-size: 1.2rem; } }
.dm .nav__links {
  font-family: var(--font-ui);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  text-transform: none;
}
.dm .nav__links a { opacity: 0.6; }
.dm .nav__links a:hover { opacity: 1; }
.dm .nav__links a::after { display: none; }
.dm .mobile-menu { background: var(--black); }
.dm .mobile-menu a:not(.dm-btn) { font-family: var(--font-ui); font-weight: 600; letter-spacing: -0.04em; }
.dm .mobile-menu .dm-btn { margin-top: 1.5rem; }

/* ---------- Hero ---------- */

.dm-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: clamp(1.5rem, 4vh, 3rem);
  min-height: 100svh;
  padding: calc(var(--nav-h) + clamp(0.5rem, 2vh, 1.5rem)) var(--gutter) clamp(2rem, 5vh, 3.5rem);
  overflow: hidden;
}

/* The LED board fills whatever height is left. */
.dm-board {
  position: relative;
  flex: 1;
  min-height: clamp(180px, 36vh, 460px);
  margin: 0 calc(var(--gutter) * -0.5);
}
.dm-board canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

.dm-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: clamp(2rem, 6vw, 6rem);
}
.dm-hero__title {
  max-width: 14ch;
  margin: 0;
  font-size: clamp(2.6rem, 5.4vw, 5.6rem);
  font-weight: 600;
  line-height: 0.98;
  letter-spacing: -0.032em;
}
/* Event name above the headline, so the page says which hackathon it is. */
.dm-hero__kicker {
  display: block;
  margin-bottom: 1.1rem;
  color: var(--grey);
  font-size: clamp(1rem, 1.2vw, 1.15rem);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.dm-hero__lede {
  max-width: 30rem;
  margin: 1.25rem 0 0;
  color: var(--grey);
  font-size: clamp(1rem, 1.25vw, 1.15rem);
  line-height: 1.5;
}

.dm-hero__side { display: flex; flex-direction: column; align-items: flex-start; }
.dm-countdown { display: flex; flex-direction: column; gap: 0.3rem; margin: 0; }
.dm-countdown__label { color: var(--grey); font-size: 0.95rem; }
.dm-countdown__value {
  color: var(--red);
  font-family: var(--font-dot);
  font-size: clamp(2rem, 3.6vw, 3.4rem);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: 0.02em;
  white-space: nowrap;
  text-shadow: 0 0 22px rgba(255, 42, 31, 0.5);
}
.dm-countdown__value i { margin: 0 0.06em; font-family: var(--font-ui); font-style: normal; font-weight: 500; }
.dm-hero__when { margin: 1rem 0 1.5rem; color: var(--white); font-size: 1rem; }

/* Entrance after the page is ready (the board lights up first). */
html.js .dm-hero__grid {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 1s var(--ease-out) 0.8s, transform 1s var(--ease-out) 0.8s;
}
html.js .is-ready .dm-hero__grid { opacity: 1; transform: none; }

@media (max-width: 899px) {
  .dm-hero__grid { grid-template-columns: minmax(0, 1fr); }
  .dm-board { min-height: 36vh; }
}

/* Over light sections the nav switches to ink on paper. */
.dm .nav.is-light { color: #111; }
.dm .nav.is-light::before { background: rgba(241, 239, 233, 0.85); border-color: rgba(0, 0, 0, 0.08); }

/* ---------- Sections and curtains ---------- */

.dm { --paper: #f1efe9; --ink: #111110; --ink-soft: #55534e; }
/* The footer is shared with the main site, so it keeps the main site's ink colour. */
.dm .footer { --ink: #0f2219; }

/* A section's panel rises over the previous section: scaled and rounded until it settles.
   JS drives --p from 0 to 1. The section behind it shows the previous section's colour. */
.dm-panel {
  --p: 1;
  padding: clamp(5rem, 11vw, 9rem) var(--gutter);
  border-radius: calc((1 - var(--p)) * 48px) calc((1 - var(--p)) * 48px) 0 0;
  transform: scale(calc(0.9 + var(--p) * 0.1));
  transform-origin: 50% 0;
  will-change: transform;
}
.dm-sec,
.dm-about { position: relative; z-index: 1; scroll-margin-top: var(--nav-h); }
.dm-sec--light,
.dm-about { background: var(--black); }
.dm-sec--light .dm-panel,
.dm-about__panel { background: var(--paper); color: var(--ink); }
.dm-sec--dark { background: var(--paper); }
.dm-sec--dark .dm-panel { background: var(--black); color: var(--white); }

.dm-about__panel { padding-top: clamp(5rem, 12vw, 10rem); }

.dm-head { margin-bottom: clamp(3rem, 7vw, 5.5rem); }
.dm-head--split {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem 3rem;
}
.dm-kicker { margin: 0 0 1.25rem; color: var(--grey); font-size: 1rem; }
.dm-sec--light .dm-kicker,
.dm-partners .dm-kicker { color: #6d6b66; }
.dm-h2 {
  max-width: 18ch;
  margin: 0;
  font-size: clamp(2.4rem, 5.4vw, 5.2rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.035em;
}
.dm-lede { max-width: 28rem; margin: 0; color: var(--ink-soft); font-size: 1.08rem; line-height: 1.55; }
.dm-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.05rem;
  font-weight: 600;
  border-bottom: 1.5px solid currentColor;
  padding-bottom: 0.15rem;
  transition: color 0.25s;
}
.dm-link span { transition: transform 0.3s var(--ease-out); }
.dm-link:hover { color: var(--red); }
.dm-link:hover span { transform: translateX(4px); }
.dm-about__kicker { margin: 0 0 1.75rem; color: #6d6b66; font-size: 1rem; }
.dm-statement {
  max-width: 24ch;
  margin: 0;
  font-size: clamp(2rem, 4.6vw, 4.6rem);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -0.035em;
}
.dm-statement .w { opacity: calc(0.16 + var(--on, 1) * 0.84); }
.dm-about__cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 4vw, 4rem);
  max-width: 76rem;
  margin-top: clamp(4rem, 9vw, 7rem);
  padding-top: 2rem;
  border-top: 1px solid rgba(0, 0, 0, 0.14);
}
.dm-about__col h3 { margin: 0 0 0.6rem; font-size: 1.35rem; font-weight: 600; letter-spacing: -0.02em; }
.dm-about__col p { margin: 0; color: #55534e; font-size: 1.02rem; line-height: 1.55; }

@media (max-width: 759px) {
  .dm-about__cols { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Numbers (dark, pinned) ---------- */

.dm-stats { position: relative; scroll-margin-top: var(--nav-h); }
.dm-stats__track { position: relative; }
.dm-stats__stage {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(2rem, 6vh, 4rem);
  padding: clamp(5rem, 10vw, 8rem) 0;
  overflow: hidden;
}
.dm-stats__track.is-pinned .dm-stats__stage {
  position: sticky;
  top: 0;
  height: 100svh;
  padding: var(--nav-h) 0 0;
}
.dm-stats__title {
  margin: 0;
  padding: 0 var(--gutter);
  font-size: clamp(1.8rem, 3.4vw, 3rem);
  font-weight: 500;
  letter-spacing: -0.03em;
}
.dm-stats__rail {
  display: flex;
  gap: clamp(3rem, 8vw, 9rem);
  width: max-content;
  padding: 0 var(--gutter);
  will-change: transform;
}
.dm-stat { width: clamp(16rem, 34vw, 30rem); }
.dm-stat__num {
  margin: 0;
  font-family: var(--font-dot);
  font-size: clamp(6rem, 15vw, 15rem);
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.dm-stat__num em { color: var(--red); font-style: normal; text-shadow: 0 0 30px rgba(255, 42, 31, 0.45); }
.dm-stat__label {
  max-width: 18rem;
  margin: 1.25rem 0 0;
  color: var(--grey);
  font-size: clamp(1rem, 1.3vw, 1.2rem);
  line-height: 1.45;
}
.dm-stats__progress { height: 2px; margin: 0 var(--gutter); background: var(--grey-2); }
.dm-stats__progress span { display: block; height: 100%; background: var(--red); transform: scaleX(0); transform-origin: left; }

/* Phones: a plain vertical list. */
.dm-stats__track:not(.is-pinned) .dm-stats__rail { flex-direction: column; width: auto; gap: 3rem; }
.dm-stats__track:not(.is-pinned) .dm-stat { width: auto; }
.dm-stats__track:not(.is-pinned) .dm-stats__progress { display: none; }
@media (max-width: 479px) {
  .dm-hero__side .dm-btn { width: 100%; justify-content: center; }
}

/* Round LED dots for every dot-matrix number below. */
.dm-clock__time,
.dm-grand__num,
.dm-cta__led { font-family: var(--font-dot); font-variation-settings: "ROND" 100; font-weight: 800; }

/* ---------- Schedule (light) with a sticky LED clock ---------- */

.dm-sched {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: start;
  gap: clamp(2rem, 6vw, 6rem);
}
.dm-sched__aside { position: sticky; top: calc(var(--nav-h) + 2rem); }
.dm-clock {
  padding: clamp(1.25rem, 2.5vw, 2rem);
  border-radius: 20px;
  background: #050505;
  background-image: radial-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1.2px);
  background-size: 9px 9px;
  color: var(--white);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.55);
}
.dm-clock__top { display: flex; justify-content: space-between; color: var(--grey); font-size: 0.95rem; }
.dm-clock__top span:first-child { color: var(--red); font-weight: 600; }
.dm-clock__time {
  margin: 0.6rem 0 0.3rem;
  font-size: clamp(4.5rem, 11vw, 9.5rem);
  line-height: 1;
  letter-spacing: 0.02em;
  text-shadow: 0 0 26px rgba(255, 255, 255, 0.25);
}
.dm-clock__time i { margin: 0 0.04em; font-family: var(--font-ui); font-style: normal; font-weight: 500; }
.dm-clock__time.is-flip { animation: dm-flip 0.45s var(--ease-out); }
@keyframes dm-flip {
  0% { opacity: 0.2; transform: translateY(-14%); filter: blur(3px); }
  100% { opacity: 1; transform: none; filter: none; }
}
.dm-clock__title { min-height: 1.5em; margin: 0; font-size: 1.15rem; font-weight: 500; }
.dm-clock__rail { height: 3px; margin-top: 1.25rem; border-radius: 2px; background: #2a2a28; overflow: hidden; }
.dm-clock__rail span { display: block; height: 100%; background: var(--red); transform: scaleX(0); transform-origin: left; }

.dm-sched__list { margin: 0; padding: 0; list-style: none; }
.dm-ev {
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 1fr);
  gap: 1.5rem;
  padding: clamp(1.4rem, 3vw, 2.1rem) 0;
  border-top: 1px solid rgba(0, 0, 0, 0.12);
  opacity: 0.35;
  transition: opacity 0.45s var(--ease-out);
}
.dm-ev:last-child { border-bottom: 1px solid rgba(0, 0, 0, 0.12); }
.dm-ev.is-on,
.dm-ev.is-past { opacity: 1; }
.dm-ev.is-past { opacity: 0.55; }
.dm-ev__time { padding-top: 0.3rem; color: var(--ink-soft); font-size: 0.95rem; font-variant-numeric: tabular-nums; }
.dm-ev.is-on .dm-ev__time { color: var(--red); font-weight: 600; }
.dm-ev h3 { margin: 0; font-size: clamp(1.4rem, 2.2vw, 1.9rem); font-weight: 600; letter-spacing: -0.025em; }
.dm-ev p { margin: 0.4rem 0 0; color: var(--ink-soft); font-size: 1.02rem; line-height: 1.5; }

@media (max-width: 899px) {
  .dm-sched { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .dm-sched__aside { top: calc(var(--nav-h) + 0.5rem); z-index: 2; }
  .dm-clock { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 0 1rem; padding: 0.9rem 1.1rem; border-radius: 14px; }
  .dm-clock__top { grid-column: 1 / -1; font-size: 0.85rem; }
  .dm-clock__time { margin: 0.2rem 0 0; font-size: 3rem; }
  .dm-clock__title { font-size: 0.95rem; }
  .dm-clock__rail { grid-column: 1 / -1; margin-top: 0.6rem; }
  .dm-ev { grid-template-columns: minmax(0, 1fr); gap: 0.4rem; }
}

/* ---------- Prizes (dark) ---------- */

.dm-grand {
  display: grid;
  grid-template-columns: auto minmax(0, 22rem);
  align-items: end;
  justify-content: space-between;
  gap: 2rem 4rem;
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
.dm-grand__num {
  margin: 0;
  font-size: clamp(5.5rem, 17vw, 17rem);
  line-height: 0.85;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-shadow: 0 0 40px rgba(255, 255, 255, 0.18);
}
.dm-grand__num em { color: var(--red); font-style: normal; text-shadow: 0 0 40px rgba(255, 42, 31, 0.5); }
.dm-grand__copy h3 { margin: 0 0 0.5rem; font-size: 1.5rem; font-weight: 600; letter-spacing: -0.02em; }
.dm-grand__copy p { margin: 0; color: var(--grey); font-size: 1.05rem; line-height: 1.55; }

.dm-tracks { margin: 0; padding: 0; list-style: none; }
.dm-track {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) auto;
  align-items: baseline;
  gap: 1rem 2rem;
  padding: clamp(1.25rem, 2.5vw, 1.8rem) 0.25rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  transition: background-color 0.3s, padding 0.4s var(--ease-out);
}
.dm-track:hover { padding-left: 1rem; padding-right: 1rem; background: rgba(255, 255, 255, 0.04); }
.dm-track__name { font-size: clamp(1.3rem, 2.2vw, 1.9rem); font-weight: 600; letter-spacing: -0.025em; }
.dm-track__text { color: var(--grey); font-size: 1rem; }
.dm-track__amt { color: var(--red); font-size: clamp(1.4rem, 2.2vw, 2rem); font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
/* Rows wipe in from the left. */
html.js .dm-track[data-reveal] { clip-path: inset(0 100% 0 0); transition: clip-path 1s var(--ease-out) var(--d, 0ms), background-color 0.3s, padding 0.4s var(--ease-out); }
html.js .dm-track[data-reveal].is-in { clip-path: inset(0 0 0 0); }

@media (max-width: 759px) {
  .dm-grand { grid-template-columns: minmax(0, 1fr); }
  .dm-track { grid-template-columns: minmax(0, 1fr) auto; }
  .dm-track__text { grid-column: 1 / -1; grid-row: 2; }
}

/* ---------- Career fair (dark, pinned): one constellation, one star per company ---------- */

.dm-fair { position: relative; z-index: 1; background: var(--black); color: var(--white); scroll-margin-top: var(--nav-h); }
.dm-fair__track { position: relative; }
.dm-fair__stage {
  --av: clamp(48px, 4.8vw, 92px);
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.5fr);
  gap: clamp(2rem, 5vw, 5rem);
  height: 100vh;
  height: 100svh;
  padding: calc(var(--nav-h) + clamp(1.5rem, 5vh, 3.5rem)) var(--gutter) clamp(2rem, 6vh, 4rem);
  overflow: hidden;
}
.dm-fair__track.is-pinned .dm-fair__stage { position: sticky; top: 0; }
/* Fade the glow out before the section's bottom edge so it doesn't end in a hard line. */
.dm-fair__stage::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 28%;
  background: linear-gradient(transparent, var(--black));
  pointer-events: none;
}

.dm-fair__glow {
  position: absolute;
  left: -18%;
  bottom: -55%;
  width: min(80vw, 1100px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 42, 31, 0.42), rgba(255, 42, 31, 0.12) 55%, transparent);
  pointer-events: none;
}
.dm-fair__stars { position: absolute; inset: 0 -12% 0 0; pointer-events: none; will-change: transform; }
.dm-fair__stars i {
  position: absolute;
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  background: var(--white);
  animation: dm-twinkle var(--t) ease-in-out var(--dl) infinite;
}
.dm-fair__stars i.is-red { background: var(--red); box-shadow: 0 0 6px var(--red); }
@keyframes dm-twinkle { 0%, 100% { opacity: 0.12; } 50% { opacity: 0.75; } }

.dm-fair__side { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; min-height: 0; }
.dm-fair .dm-h2 { font-size: clamp(2.4rem, 4.6vw, 4.6rem); }
.dm-fair__lede { max-width: 24rem; margin: 1.25rem 0 0; color: var(--grey); font-size: 1.05rem; line-height: 1.55; }
.dm-fair__logo {
  position: relative;
  width: 100%;
  max-width: 21rem;
  aspect-ratio: 2 / 1;
  margin-top: clamp(1.5rem, 5vh, 3rem);
  border: 1px solid #262624;
  border-radius: 16px;
  background: rgba(10, 10, 10, 0.75);
  backdrop-filter: blur(6px);
  overflow: hidden;
}
.dm-fair__logo > span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: clamp(1.3rem, 2vw, 1.75rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.5s, transform 0.6s var(--ease-out);
}
.dm-fair__logo > span.is-on { opacity: 1; transform: none; }
.dm-fair__logo > span.is-img { background: #fff; }
.dm-fair__logo img { max-width: 62%; max-height: 52%; object-fit: contain; }
/* Who's coming from the ringed company. Every company's block sits in the same grid cell, so the
   panel keeps the height of the tallest one and doesn't jump as the ring moves. */
.dm-fair__reps { display: grid; width: 100%; max-width: 21rem; margin-top: 1rem; }
.dm-fair__rep {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.4s, transform 0.55s var(--ease-out), visibility 0s 0.4s;
}
.dm-fair__rep.is-on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.dm-fair__meet { display: flex; align-items: center; gap: 0.75rem; margin: 0; color: var(--grey); font-size: 0.98rem; line-height: 1.35; }
.dm-fair__meet strong { color: var(--white); font-weight: 600; }
.dm-fair__faces { display: flex; flex: none; }
.dm-fair__faces > span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-left: -10px;
  overflow: hidden;
  border: 1.5px solid var(--white);
  border-radius: 50%;
  background: #121211;
  box-shadow: 0 0 0 3px var(--black);
  color: var(--white);
  font-family: var(--font-dot);
  font-size: 0.72rem;
  font-variation-settings: "ROND" 100;
  font-weight: 800;
}
.dm-fair__faces > span:first-child { margin-left: 0; }
.dm-fair__faces img { width: 100%; height: 100%; object-fit: cover; }
.dm-fair__roles { margin: 0.45rem 0 0; color: var(--grey); font-size: 0.85rem; line-height: 1.45; }
.dm-fair__index { display: flex; gap: 6px; margin: 1.1rem 0 0; padding: 0; list-style: none; }
.dm-fair__index button {
  width: clamp(1.6rem, 2.4vw, 2.4rem);
  height: 22px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.dm-fair__index button::before {
  content: "";
  display: block;
  height: 3px;
  border-radius: 2px;
  background: #343432;
  transition: background-color 0.3s;
}
.dm-fair__index button.is-past::before { background: #8a8a86; }
.dm-fair__index button.is-on::before { background: var(--red); box-shadow: 0 0 10px rgba(255, 42, 31, 0.6); }
.dm-fair__index button:hover::before { background: var(--white); }
.dm-fair__index button:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.dm-fair__more { margin-top: 1.5rem; }

/* Capped width keeps the stars together on very wide screens instead of spreading to the edges */
.dm-fair__sky { position: relative; z-index: 1; justify-self: center; width: calc(100% - var(--av)); max-width: 980px; margin: 2vh 0 9vh; }
.dm-con { position: absolute; inset: 0; visibility: hidden; will-change: transform, opacity; }
/* Red comet trail from one company's star to the next; it fades from its tail to a bright head. */
.dm-con__trail {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 2px;
  margin-top: -1px;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(255, 42, 31, 0), rgba(255, 42, 31, 0.55) 55%, #ff6a5f);
  box-shadow: 0 0 10px rgba(255, 42, 31, 0.55);
  opacity: 0;
  transform-origin: 0 50%;
  pointer-events: none;
}
.dm-con__node {
  position: absolute;
  z-index: 1;
  width: var(--av);
  height: var(--av);
  margin: calc(var(--av) / -2) 0 0 calc(var(--av) / -2);
  transform: scale(0);
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.dm-con__node.is-lit { transform: scale(1); }
.dm-con__node.is-on { z-index: 2; transform: scale(1.22); }
.dm-con__av {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border: 1.5px solid var(--white);
  border-radius: 50%;
  background: #121211;
  color: var(--white);
  font-family: var(--font-dot);
  font-size: calc(var(--av) * 0.36);
  font-variation-settings: "ROND" 100;
  font-weight: 800;
  transition: border-color 0.35s, box-shadow 0.35s, color 0.35s;
}
.dm-con__av img { width: 100%; height: 100%; object-fit: cover; }
/* Logos sit on white so full-colour and dark logos both read */
.dm-con__av.is-logo { background: #fff; }
.dm-con__av.is-logo img { padding: 20%; object-fit: contain; }

/* Extra people from the same company: small moons slowly circling its star */
.dm-con__orbit { position: absolute; inset: 0; pointer-events: none; animation: dm-orbit 30s linear infinite; }
@keyframes dm-orbit { to { transform: rotate(360deg); } }
.dm-con__moon {
  --moon: rotate(var(--a)) translateX(calc(var(--av) / 2 + 11px));
  position: absolute;
  left: 50%;
  top: 50%;
  width: 7px;
  height: 7px;
  margin: -3.5px;
  border-radius: 50%;
  background: var(--white);
  box-shadow: 0 0 8px rgba(244, 244, 242, 0.55);
  transform: var(--moon) scale(0);
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) var(--md), background-color 0.35s, box-shadow 0.35s;
}
.dm-con__node.is-lit .dm-con__moon { transform: var(--moon) scale(1); }
.dm-con__node.is-on .dm-con__moon { background: var(--red); box-shadow: 0 0 8px var(--red); }
@media (prefers-reduced-motion: reduce) { .dm-con__orbit { animation: none; } }
.dm-con__node.is-on .dm-con__av {
  border-color: var(--red);
  color: var(--red);
  box-shadow: 0 0 0 4px rgba(255, 42, 31, 0.22), 0 0 28px rgba(255, 42, 31, 0.55);
}
.dm-con__tip {
  position: absolute;
  top: calc(100% + 16px);
  left: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--grey);
  font-size: 0.72rem;
  line-height: 1.3;
  white-space: nowrap;
  /* Every star is labelled: dim until the ring reaches it, a little brighter once visited */
  opacity: 0.45;
  transform: translate(-50%, 0);
  transform-origin: 50% 0;
  transition: opacity 0.3s, transform 0.4s var(--ease-out);
  pointer-events: none;
}
.dm-con__tip strong { color: var(--white); font-size: clamp(0.8rem, 0.95vw, 0.95rem); font-weight: 600; }
.dm-con__sub { display: none; }
.dm-con__node.is-past .dm-con__tip { opacity: 0.7; }
.dm-con__node.is-on .dm-con__tip { opacity: 1; transform: translate(-50%, 0) scale(calc(1 / 1.22)); }
.dm-con__node.is-on .dm-con__sub { display: block; }
/* The hover card replaces the small label */
.dm-con__node.is-hover .dm-con__tip { opacity: 0; }
.dm-con__node.is-lit { cursor: pointer; }
.dm-con__node.is-hover { z-index: 3; transform: scale(1.22); }
.dm-con__node.is-hover .dm-con__av { border-color: var(--white); box-shadow: 0 0 0 4px rgba(244, 244, 242, 0.18), 0 0 24px rgba(244, 244, 242, 0.35); }

/* Hover card: a light paper badge, so it stands out from the black sky */
.dm-pop {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 4;
  width: clamp(190px, 16vw, 236px);
  padding: 8px;
  border-radius: 18px;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 30px 60px -18px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(255, 255, 255, 0.06), 0 0 60px -12px rgba(255, 42, 31, 0.4);
  pointer-events: none;
  visibility: hidden;
}
.dm-pop.is-open { visibility: visible; animation: dm-pop-in 0.55s var(--ease-out) both; }
.dm-pop.is-left.is-open { animation-name: dm-pop-in-left; }
@keyframes dm-pop-in {
  from { clip-path: inset(40% 100% 40% 0 round 18px); opacity: 0; }
  to { clip-path: inset(-40px -40px -60px -40px round 18px); opacity: 1; }
}
@keyframes dm-pop-in-left {
  from { clip-path: inset(40% 0 40% 100% round 18px); opacity: 0; }
  to { clip-path: inset(-40px -40px -60px -40px round 18px); opacity: 1; }
}
.dm-pop__img {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border-radius: 12px;
  background-color: #070707;
  /* LED-board dot grid behind the initials */
  background-image: radial-gradient(circle, #222220 1.2px, transparent 1.6px);
  background-size: 9px 9px;
  overflow: hidden;
}
.dm-pop__img img { width: 100%; height: 100%; object-fit: cover; }
.dm-pop__img img.is-logo { padding: 22%; object-fit: contain; }

/* Several people from one company: a list in place of the big photo */
.dm-pop__list { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.dm-pop__list li { display: flex; align-items: center; gap: 0.7rem; padding: 0.35rem; color: var(--ink-soft); font-size: 0.8rem; line-height: 1.3; }
.dm-pop__list strong { display: block; color: var(--ink); font-size: 0.95rem; font-weight: 600; letter-spacing: -0.01em; }
.dm-pop__face {
  display: grid;
  flex: none;
  place-items: center;
  width: 44px;
  height: 44px;
  overflow: hidden;
  border-radius: 10px;
  background-color: #070707;
  background-image: radial-gradient(circle, #222220 1.2px, transparent 1.6px);
  background-size: 7px 7px;
  color: var(--red);
  font-family: var(--font-dot);
  font-size: 1rem;
  font-variation-settings: "ROND" 100;
  font-weight: 800;
}
.dm-pop__face img { width: 100%; height: 100%; object-fit: cover; }
.dm-pop.is-open .dm-pop__list li { animation: dm-pop-up 0.6s var(--ease-out) both; animation-delay: calc(var(--i) * 60ms); }
.dm-pop__list + .dm-pop__label { padding-top: 0.3rem; }
.dm-pop__img span {
  color: var(--red);
  font-family: var(--font-dot);
  font-size: clamp(3.5rem, 5vw, 4.5rem);
  font-variation-settings: "ROND" 100;
  font-weight: 800;
  text-shadow: 0 0 22px rgba(255, 42, 31, 0.6);
}
.dm-pop.is-open .dm-pop__img > * { animation: dm-pop-zoom 0.9s var(--ease-out) both; }
@keyframes dm-pop-zoom { from { transform: scale(1.15); } to { transform: none; } }
.dm-pop__label {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.85rem 0.5rem 0.45rem;
  color: var(--ink-soft);
  font-size: 0.85rem;
  line-height: 1.3;
}
.dm-pop__label strong { color: var(--ink); font-size: 1.1rem; font-weight: 600; letter-spacing: -0.015em; }
.dm-pop__co { order: 3; margin-top: 0.45rem; padding-top: 0.5rem; border-top: 1px solid rgba(17, 17, 16, 0.12); color: var(--red); font-weight: 600; }
.dm-pop.is-open .dm-pop__label > * { animation: dm-pop-up 0.6s var(--ease-out) both; }
.dm-pop.is-open .dm-pop__label > :nth-child(2) { animation-delay: 60ms; }
.dm-pop.is-open .dm-pop__label > :nth-child(3) { animation-delay: 120ms; }
@keyframes dm-pop-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---------- Custom cursor: a red dot inside a ring of LED dots ---------- */

html.dm-cursor-on,
html.dm-cursor-on * { cursor: none !important; }
html.dm-cursor-on input,
html.dm-cursor-on textarea { cursor: text !important; }
.dm-cursor { position: fixed; top: 0; left: 0; z-index: 9999; pointer-events: none; opacity: 0; transition: opacity 0.3s; }
.dm-cursor.is-on { opacity: 1; }
.dm-cursor__dot {
  position: fixed;
  top: -3.5px;
  left: -3.5px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 10px rgba(255, 42, 31, 0.8);
  transition: width 0.25s, height 0.25s, top 0.25s, left 0.25s;
}
.dm-cursor__ring {
  position: fixed;
  top: -20px;
  left: -20px;
  width: 40px;
  height: 40px;
}
.dm-cursor__spin { position: absolute; inset: 0; animation: dm-spin 8s linear infinite; }
.dm-cursor__spin i {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 3px;
  height: 3px;
  margin: -1.5px;
  border-radius: 50%;
  background: #fff;
  transform: rotate(calc(var(--i) * 30deg)) translateY(var(--r, -18px));
  transition: transform 0.45s var(--ease-out), width 0.3s, height 0.3s, background 0.25s;
}
/* Over the light sections the LED dots switch to ink so they stay visible */
.dm-cursor.is-light .dm-cursor__spin i { background: #1c1b19; }
@keyframes dm-spin { to { transform: rotate(360deg); } }
/* Over something clickable: the ring opens up and spins faster, the dot grows */
.dm-cursor.is-link .dm-cursor__spin { animation-duration: 3s; }
.dm-cursor.is-link .dm-cursor__spin i { --r: -30px; width: 4px; height: 4px; margin: -2px; }
.dm-cursor.is-link .dm-cursor__dot { top: -6px; left: -6px; width: 12px; height: 12px; }
/* Pressing pulls the ring in */
.dm-cursor.is-down .dm-cursor__spin i { --r: -10px; }
/* Over text fields: get out of the way of the caret */
.dm-cursor.is-text { opacity: 0; }

@media (max-width: 759px) {
  .dm-fair__stage {
    --av: 40px;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    gap: 0;
  }
  .dm-fair__lede, .dm-fair__more { display: none; }
  .dm-fair__logo { display: none; }
  .dm-fair__reps { margin-top: 0.75rem; }
  .dm-fair__roles { display: none; }
  .dm-fair__index { margin-top: 0.5rem; }
  .dm-fair__side { justify-content: flex-start; }
  .dm-fair__sky { width: calc(100% - var(--av) - 1rem); margin: 3rem 0 4rem; }
  .dm-con__tip strong { font-size: 0.72rem; }
}

/* ---------- FAQ (dark) ---------- */

.dm-faq {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  align-items: start;
  gap: clamp(2.5rem, 6vw, 6rem);
}
.dm-faq__head { position: sticky; top: calc(var(--nav-h) + 2rem); }
.dm-search {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  max-width: 24rem;
  margin-top: 2.5rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  color: var(--grey);
  transition: border-color 0.3s;
}
.dm-search:focus-within { border-color: var(--white); color: var(--white); }
.dm-search svg { width: 20px; height: 20px; flex: none; }
.dm-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  color: var(--white);
  font: inherit;
  font-size: 1.1rem;
  outline: none;
}
.dm-search input::placeholder { color: var(--grey); }
.dm-faq__mail { margin: 1.5rem 0 0; color: var(--grey); }
.dm-faq__mail a { color: var(--white); border-bottom: 1px solid currentColor; }
.dm-faq__mail a:hover { color: var(--red); }

.dm-q { border-top: 1px solid rgba(255, 255, 255, 0.14); }
.dm-q:last-of-type { border-bottom: 1px solid rgba(255, 255, 255, 0.14); }
.dm-q h3 { margin: 0; }
.dm-q__btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  width: 100%;
  padding: 1.5rem 0;
  font-size: clamp(1.15rem, 1.7vw, 1.45rem);
  font-weight: 500;
  letter-spacing: -0.015em;
  text-align: left;
  transition: color 0.25s;
}
.dm-q__btn:hover { color: #fff; }
/* Plus that turns into a red cross. */
.dm-q__btn i { position: relative; flex: none; width: 16px; height: 16px; transition: transform 0.45s var(--ease-out); }
.dm-q__btn i::before,
.dm-q__btn i::after { content: ""; position: absolute; top: 50%; left: 0; width: 100%; height: 1.5px; background: currentColor; translate: 0 -50%; }
.dm-q__btn i::after { rotate: 90deg; }
.dm-q.is-open .dm-q__btn i { transform: rotate(45deg); color: var(--red); }
.dm-q__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.5s var(--ease-out); }
.dm-q.is-open .dm-q__panel { grid-template-rows: 1fr; }
.dm-q__panel > div { overflow: hidden; }
.dm-q__panel p { max-width: 38rem; margin: 0; padding: 0 2.5rem 1.6rem 0; color: var(--grey); font-size: 1.05rem; line-height: 1.6; }
.dm-faq__empty { padding: 1.5rem 0; color: var(--grey); }

@media (max-width: 899px) {
  .dm-faq { grid-template-columns: minmax(0, 1fr); }
  .dm-faq__head { position: static; }
}

/* ---------- Team (light) ---------- */

.dm-team {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 3.5rem) clamp(1rem, 2.5vw, 2rem);
}
.dm-member-slot { will-change: transform; }
.dm-member { margin: 0; }
html.js .dm-member[data-reveal] { opacity: 0; transform: translateY(30px); transition: opacity 0.9s var(--ease-out) var(--d, 0ms), transform 0.9s var(--ease-out) var(--d, 0ms); }
html.js .dm-member[data-reveal].is-in { opacity: 1; transform: none; }
.dm-member__avatar {
  display: grid;
  place-items: center;
  aspect-ratio: 5 / 4;
  overflow: hidden;
  border-radius: 14px;
  background: #050505;
  background-image: radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1.2px);
  background-size: 8px 8px;
}
.dm-member__avatar img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); transition: filter 0.5s; }
.dm-member__avatar span {
  color: var(--white);
  font-family: var(--font-dot);
  font-size: clamp(3rem, 6vw, 5rem);
  font-variation-settings: "ROND" 100;
  font-weight: 800;
  transition: color 0.3s, text-shadow 0.3s;
}
.dm-member:hover .dm-member__avatar span { color: var(--red); text-shadow: 0 0 24px rgba(255, 42, 31, 0.6); }
.dm-member:hover .dm-member__avatar img { filter: none; }
.dm-member figcaption { display: flex; flex-direction: column; gap: 0.15rem; padding-top: 0.9rem; }
.dm-member strong { font-size: 1.15rem; font-weight: 600; letter-spacing: -0.015em; }
.dm-member figcaption span { color: var(--ink-soft); }

@media (max-width: 899px) { .dm-team { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 599px) { .dm-team { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Partners (light) ---------- */

.dm-partners {
  position: relative;
  z-index: 1;
  padding: clamp(3rem, 7vw, 6rem) 0 clamp(4rem, 8vw, 7rem);
  overflow: hidden;
  background: var(--paper);
  color: var(--ink);
  scroll-margin-top: var(--nav-h);
}
.dm-partners .dm-head { padding: 0 var(--gutter); }
.dm-marquee { display: grid; gap: 1rem; }
.dm-marquee__row { display: flex; width: max-content; will-change: transform; }
.dm-marquee__track { display: flex; gap: 1rem; margin: 0; padding: 0 1rem 0 0; list-style: none; }
.dm-logo {
  display: grid;
  place-items: center;
  width: clamp(11rem, 18vw, 16rem);
  height: clamp(5.5rem, 8vw, 7rem);
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 14px;
  background: #fff;
}
.dm-logo { overflow: hidden; }
.dm-logo > a { display: grid; place-items: center; width: 100%; height: 100%; }
.dm-logo img { max-width: 70%; max-height: 55%; object-fit: contain; }
/* Open slot: one word on a dashed outline. */
.dm-logo--ph {
  border: 1.5px dashed rgba(0, 0, 0, 0.22);
  background: transparent;
  color: #8a8780;
}
.dm-logo--ph span {
  font-size: clamp(1.5rem, 2.4vw, 2.1rem);
  font-weight: 700;
  letter-spacing: -0.03em;
}

/* ---------- Final call ---------- */

.dm-cta {
  position: relative;
  z-index: 1;
  padding: 0 var(--gutter) clamp(4rem, 8vw, 7rem);
  background: var(--paper);
}
.dm-cta__panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(3.5rem, 8vw, 6.5rem) var(--gutter);
  border-radius: 28px;
  background: #050505;
  background-image: radial-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1.2px);
  background-size: 10px 10px;
  color: var(--white);
  text-align: center;
}
.dm-cta__led {
  margin: 0;
  font-size: clamp(3.5rem, 11vw, 10rem);
  line-height: 0.9;
  letter-spacing: 0.01em;
  text-shadow: 0 0 34px rgba(255, 255, 255, 0.2);
}
.dm-cta__led em { color: var(--red); font-style: normal; text-shadow: 0 0 34px rgba(255, 42, 31, 0.55); }
.dm-cta__title { margin: clamp(1.5rem, 3vw, 2.25rem) 0 0.6rem; font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 600; letter-spacing: -0.03em; }
.dm-cta__text { margin: 0 0 2rem; color: var(--grey); font-size: 1.05rem; }

/* ---------- Preloader: LED counter + a row of dots lighting up, then a CRT switch-off ---------- */

@property --dm-n { syntax: "<integer>"; inherits: false; initial-value: 0; }

.dm-pre {
  background-color: var(--black);
  background-image: radial-gradient(circle, #161615 1.2px, transparent 1.6px);
  background-size: 12px 12px;
  transition: clip-path 0.55s cubic-bezier(0.7, 0, 0.2, 1) 0.18s, visibility 0s 0.75s;
  clip-path: inset(0 0 0 0);
}
/* Switch off: the content blinks out, the screen collapses to a bright line, then to nothing. */
body.is-ready .dm-pre { opacity: 1; clip-path: inset(50% 0 50% 0); }
body.is-ready .dm-pre__inner { opacity: 0; transform: scaleY(0.2); }
.dm-pre::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto;
  height: 2px;
  margin-top: -1px;
  background: var(--white);
  box-shadow: 0 0 18px var(--white), 0 0 40px var(--red);
  opacity: 0;
}
body.is-ready .dm-pre::after { animation: dm-pre-line 0.75s ease-out both; }
@keyframes dm-pre-line { 0% { opacity: 0; } 30% { opacity: 1; } 100% { opacity: 0; transform: scaleX(0); } }

.dm-pre__inner { display: grid; justify-items: center; gap: 1.5rem; transition: opacity 0.18s, transform 0.25s; }
.dm-pre__count {
  margin: 0;
  color: var(--white);
  font-family: var(--font-dot);
  font-size: clamp(5rem, 14vw, 9rem);
  font-variation-settings: "ROND" 100;
  font-weight: 800;
  line-height: 0.9;
  counter-reset: n var(--dm-n);
  animation: dm-pre-count 1.05s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.dm-pre__count::before { content: counter(n); }
.dm-pre__dots { display: flex; gap: clamp(6px, 1.2vw, 10px); }
.dm-pre__dots i {
  width: clamp(7px, 1.3vw, 10px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: #262624;
  animation: dm-pre-dot 0.25s ease-out calc(var(--i) * 48ms) forwards;
}
.dm-pre__label { margin: 0.5rem 0 0; color: var(--white); font-family: var(--font-ui); font-size: 1rem; font-weight: 600; }
.dm-pre__label span { color: var(--grey); font-weight: 400; }
@keyframes dm-pre-count { to { --dm-n: 100; } }
@keyframes dm-pre-dot { to { background: var(--red); box-shadow: 0 0 10px rgba(255, 42, 31, 0.8); } }