/* Catalyst 2026 homepage — Figma Web-Design "Oct 30" (3054:38) */

.home {
  --home-pad: clamp(64px, 8vw, 120px);
  --ink-soft: #b2b2b2;
  --line: #504949;
  --line-subtle: #363030;
  --panel: rgba(255, 255, 255, 0.1);
  --field: rgba(255, 255, 255, 0.2);
  --paper: #fafafa;
  --quiet: #808080;
}

.home .nav {
  position: sticky;
  top: 0;
  z-index: 50;
  opacity: 1;
  animation: none;
  background: rgba(28, 23, 23, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.home .nav.is-hidden { transform: none; }
.home .nav-inner { gap: 24px; }
.home .nav-links {
  display: flex;
  align-items: center;
  gap: 24px;
}
.home .nav-links a {
  color: var(--ink);
  font-size: 14px;
  line-height: 19px;
  text-decoration: none;
}
.home .nav-menu {
  display: none;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  cursor: pointer;
}
.home .nav-cta .btn-pill {
  min-width: 120px;
  padding: 10px 24px;
  font-size: 14px;
  font-weight: 400;
  line-height: 19px;
}
.home .btn:hover .btn-pill { transform: none; }
.home .btn-light .btn-pill {
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.home .btn-light:hover .btn-pill,
.home .btn-light:focus-visible .btn-pill {
  background: var(--ink-dark);
  color: #fff;
}
.home .nav-cta:hover .btn-pill,
.home .nav-cta:focus-visible .btn-pill {
  box-shadow: inset 0 0 0 1.5px #fff;
}
.home .btn-light:disabled:hover .btn-pill,
.home .btn-light:disabled:focus-visible .btn-pill {
  background: var(--light);
  color: var(--ink-dark);
  box-shadow: none;
}

/* Hero frame 3115:96 is 1728×958, including the 80px header.
   The section below the nav is the remaining 878px. */
.home {
  --nav-h: 80px;
  --hero-frame: 878;
}
.home .nav {
  height: var(--nav-h);
  padding-top: 0;
  padding-bottom: 0;
  display: flex;
  align-items: center;
}
.home .nav-inner { width: 100%; }

.home .hero {
  position: relative;
  height: min(878px, calc(878 / 1728 * 100vw));
  padding: 0;
  overflow: hidden;
  display: block;
}
.home .hero-glow {
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 20%;
  width: min(680px, 46vw);
  height: 72%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(48, 122, 110, 0.5), rgba(18, 52, 50, 0.16) 58%, transparent 74%);
  pointer-events: none;
}
.home .hero-intro {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: min(1140px, calc(100% - 40px));
  margin: min(40px, calc(40 / 1728 * 100vw)) auto 0;
  gap: 24px;
  pointer-events: none;
}
.home .hero-intro .btn { pointer-events: auto; margin-top: 8px; }
.home .hero-title {
  font-size: min(92px, calc(92 / 1728 * 100vw));
  line-height: 1.24;
  font-weight: 500;
  letter-spacing: 0;
}
.home .hero-lede {
  max-width: 782px;
  color: var(--ink);
  font-size: min(20px, calc(20 / 1728 * 100vw));
  line-height: 1.4;
}
.home .hero .btn-pill {
  min-width: 120px;
  padding: 14px 24px;
  font-size: 16px;
  font-weight: 500;
  line-height: 22px;
}

.home .hero-gallery {
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  top: 26%;
  height: 66%;
  overflow: hidden;
  pointer-events: none;
}
.home .hero-ribbon {
  position: absolute;
  inset: 0;
  perspective: 2000px;
  perspective-origin: 50% 46%;
  --ribbon-w: 200px;
  --ribbon-h: 268px;
}
.home .hero-ribbon-card {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--ribbon-w);
  height: var(--ribbon-h);
  margin: 0;
  border-radius: 18px;
  overflow: hidden;
  background: #2a2424;
  box-shadow: 0 22px 40px rgba(0, 0, 0, 0.38);
  transform: translate3d(-50%, -50%, 0);
  backface-visibility: hidden;
  will-change: transform;
}
.home .hero-ribbon-card img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center 30%;
  display: block;
  pointer-events: none;
  user-select: none;
}

.home .hero-stats {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 82%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: min(120px, calc(120 / 1728 * 100vw));
  width: min(1528px, calc(100% - 48px));
}
.home .stat-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: min(253px, 30%);
  text-align: center;
}
.home .stat-value {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(32px, calc(48 / 1728 * 100vw), 48px);
  line-height: 1.208;
  letter-spacing: 0;
}
.home .stat-label {
  font-size: clamp(14px, calc(16 / 1728 * 100vw), 16px);
  line-height: 1.375;
  letter-spacing: 0;
}

.home .section {
  padding: var(--home-pad) 0;
}
.home .section-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(40px, 4.6vw, 64px);
  line-height: 1.12;
}
.home .section-lede {
  color: var(--ink);
  font-size: 20px;
  line-height: 28px;
  opacity: 0.85;
}

/* Sponsors */
.home .sponsors {
  text-align: center;
  /* The next section supplies the matching gap under the logos. */
  padding-bottom: 0;
}
.home .sponsors-title {
  font-weight: 700;
  font-size: clamp(22px, 2vw, 31px);
  line-height: 1.38;
  opacity: 0.85;
  margin-bottom: 48px;
}
.home .logo-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 40px 40px;
}
.home .logo-row img {
  width: auto;
  height: auto;
  object-fit: contain;
  flex: none;
}
.home .logo-row img.logo-ne { width: 151px; height: 56px; object-fit: cover; }
.home .logo-row img.logo-usstm { width: 69px; height: 62px; object-fit: cover; object-position: bottom; }
.home .logo-row img.logo-backstretch { width: 164px; height: 51px; }
.home .logo-row img.logo-trans { width: 151px; height: 49px; object-fit: cover; }
.home .logo-row img.logo-ps43 { width: 55px; height: 56px; object-fit: cover; }
.home .logo-row img.logo-jane { width: 71px; height: 56px; }
.home .logo-row img.logo-se { width: auto; height: 51px; object-fit: contain; object-position: center; }
.home .logo-row img.logo-june { width: 127px; height: 41px; object-fit: cover; }
.home .logo-row img.logo-volley { width: 137px; height: 56px; object-fit: cover; }
.home .logo-row img.logo-cail { width: 107px; height: 36px; object-fit: cover; }
.home .logo-row img.logo-cmg { width: 135px; height: 35px; object-fit: cover; }
.home .logo-row img.logo-gruvi { width: 83px; height: 55px; }
.home .logo-row img.logo-lovable { width: 192px; height: 35px; }

/* Winners */
.home .winners-head { margin-bottom: 64px; }
.home .winners-head .section-lede { max-width: 1096px; margin-top: 24px; }
.home .winner-grid {
  display: grid;
  grid-template-columns: minmax(0, 573fr) minmax(280px, 421.333fr) minmax(0, 492fr);
  gap: 20px;
  align-items: stretch;
}
.home .winner-photo {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  background: #000;
  min-height: 0;
}
.home .winner-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
}
.home .winner-photo-main { min-height: 531px; height: 100%; }
.home .winner-side {
  display: flex;
  flex-direction: column;
  gap: 14px;
  height: 100%;
  min-height: 0;
}
.home .winner-photo-second { flex: 1 1 auto; min-height: 0; }
.home .place-row { flex: none; width: 100%; }
.home .prize-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding: 48px 32px;
  border-radius: 20px;
  border: 1px solid #b2b2b2;
  background: rgba(255, 255, 255, 0.1);
}
/* Full-width wash sampled from Figma 3063:667. The #0060c8 band tracks the pointer. */
.home .prize-hue {
  position: absolute;
  left: 0;
  width: 100%;
  height: 120%;
  top: 0;
  pointer-events: none;
  background: linear-gradient(
    in srgb 180deg,
    rgba(0, 28, 60, 0) 0%,
    rgba(2, 32, 64, 0.7) 12%,
    #041f3e 18%,
    #003a77 23%,
    #004898 30%,
    #0058b8 36%,
    #0060c8 43%,
    #004c9c 49%,
    #0e4f96 55%,
    #224369 62%,
    rgba(43, 54, 72, 0.45) 70%,
    rgba(28, 23, 23, 0) 80%
  );
  transform: translate3d(0, -18%, 0);
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.home .prize-card.is-lit .prize-hue { transition: none; }
.home .prize-card > :not(.prize-hue) { position: relative; z-index: 1; }
.home .prize-card h3 {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 22px;
}
.home .prize-item { display: flex; flex-direction: column; gap: 18px; }
.home .prize-item-head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.home .prize-item-head img { width: 32px; height: 32px; }
.home .prize-item-head strong { font-size: 24px; line-height: 32px; }
.home .prize-item p { font-size: 16px; line-height: 22px; }
.home .place-row { display: flex; gap: 20px; }
.home .place-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px;
  border-radius: 20px;
  background: var(--panel);
}
.home .place-card span { font-size: 16px; line-height: 22px; }
.home .place-card strong {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(28px, 2.2vw, 40px);
  line-height: 1.15;
  white-space: nowrap;
}
.home .place-card em {
  font-style: normal;
  font-weight: 500;
  font-size: 20px;
  line-height: 28px;
}

/* Built together — Figma 3040:439, 1728×986.
   Photos rise into these positions, then each one keeps moving up
   on its own as the section scrolls away. Scroll travel uses `translate`
   so it does not fight this entrance `transform`. */
.home .mosaic {
  position: relative;
  width: 100%;
  aspect-ratio: 1728 / 986;
  height: auto;
  overflow: hidden;
}
.home .mosaic-copy {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 12.17%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: min(1500px, 86.8%);
  text-align: center;
  pointer-events: none;
}
.home .mosaic-copy .section-title {
  font-size: min(64px, 3.7vw);
  line-height: 1.125;
  letter-spacing: 0;
}
.home .mosaic-copy .section-lede {
  opacity: 1;
  width: min(780px, 100%);
  margin: 0 0 24px;
  font-size: 20px;
  line-height: 28px;
}
.home .mosaic-copy .btn { pointer-events: auto; }
.home .mosaic-shot {
  --delay: 0.08s;
  position: absolute;
  z-index: 1;
  border-radius: 12px;
  opacity: 0;
  transform: translate3d(0, 46vh, 0) scale(0.94);
}
.home .mosaic.is-in .mosaic-shot {
  animation: mosaic-rise 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: var(--delay);
}
@keyframes mosaic-rise {
  from { opacity: 0; transform: translate3d(0, 46vh, 0) scale(0.94); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
.home .mosaic-photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
  transform-origin: var(--ox, 50%) var(--oy, 50%);
  transition:
    transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.4s ease,
    box-shadow 0.4s ease;
}
.home .mosaic-shot:hover { z-index: 2; }
.home .mosaic-shot:hover .mosaic-photo {
  transform: scale(1.06);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}
.home .mosaic:has(.mosaic-shot:hover) .mosaic-photo { opacity: 0.85; }
.home .mosaic:has(.mosaic-shot:hover) .mosaic-shot:hover .mosaic-photo { opacity: 1; }
.home .shot-a { left: 66.03%; top: 31.34%; width: 14.81%; height: 31.24%; --delay: 0.46s; }
.home .shot-b { left: 40.34%; top: 41.78%; width: 19.44%; height: 49.7%; --delay: 0.24s; }
.home .shot-c { left: 4.75%; top: 33.67%; width: 25.69%; height: 32.45%; --delay: 0.38s; }
.home .shot-d { left: 62.04%; top: 60.55%; width: 27.03%; height: 27.08%; --delay: 0.08s; }
.home .shot-e { left: 24.07%; top: 56.8%; width: 14%; height: 29.51%; --delay: 0.14s; }
.home .shot-f { left: 9.66%; top: 72.72%; width: 10.94%; height: 16.43%; --delay: 0s; }
.home .shot-g { left: 81.89%; top: 35.9%; width: 10.94%; height: 16.43%; --delay: 0.32s; }

/* Speakers */
.home .speakers {
  background: var(--paper);
  color: var(--ink-dark);
}
.home .speakers .section-title,
.home .speakers .section-lede { color: var(--ink-dark); }
.home .speakers-head {
  display: flex;
  align-items: flex-end;
  gap: 24px;
  margin-bottom: 64px;
}
.home .speakers-copy { flex: 1 1 auto; min-width: 0; }
.home .speakers-head .section-lede { margin-top: 24px; opacity: 0.85; }
.home .speakers-nav {
  display: flex;
  align-items: center;
  gap: 24px;
  flex: 0 0 auto;
}
.home .speaker-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: #e5e5e5;
  color: var(--ink-dark);
  cursor: pointer;
}
.home .speaker-nav-next {
  background: var(--ink-dark);
  color: var(--light);
}
.home .speaker-nav:disabled {
  opacity: 0.5;
  cursor: default;
}
.home .speaker-nav:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}
.home .speaker-nav svg { display: block; }
.home .speaker-row {
  list-style: none;
  display: flex;
  gap: 32px;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 0;
  scrollbar-width: none;
  cursor: grab;
  -webkit-overflow-scrolling: touch;
}
.home .speaker-row::-webkit-scrollbar { display: none; }
.home .speaker-row.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.home .speaker-card.scroll-reveal,
.home .speaker-card.scroll-reveal.is-in { translate: none; }
.home .speaker-card {
  flex: 0 0 min(331px, calc(100vw - var(--gutter) * 2 - 56px));
  width: min(331px, calc(100vw - var(--gutter) * 2 - 56px));
  min-width: 0;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.home .speaker-card .speaker-photo { margin-bottom: 16px; }
.home .speaker-card h3 { margin-bottom: 12px; }
.home .speaker-photo {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 20px;
  background: #e5e5e5;
}
.home .speaker-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
}
.home .speaker-photo img.crop-anuj,
.home .speaker-photo img.crop-wendy {
  position: absolute;
  max-width: none;
  object-fit: fill;
}
.home .speaker-photo img.crop-anuj { width: 100%; height: 141.73%; left: 0; top: -5.55%; }
.home .speaker-photo img.crop-wendy { width: 104.05%; height: 104.05%; left: -2.07%; top: -2.11%; }
.home .speaker-card h3 {
  font-size: 31px;
  line-height: 43px;
  font-weight: 700;
}
.home .speaker-card p {
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: var(--line);
  font-size: 20px;
  line-height: 28px;
}

/* Case studies — one challenge at a time, swapped in place */
.home .cases {
  background: var(--paper);
  color: var(--ink-dark);
}
.home .cases-track,
.home .cases-sticky,
.home .case-panel,
.home .case-note {
  overflow: visible;
}
.home .cases-sticky {
  position: static;
  height: auto;
  background: transparent;
}
.home .cases-frame {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.home .cases-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: end;
  margin-bottom: 0;
}
.home .cases-head .section-title,
.home .cases-head .section-lede { color: var(--ink-dark); }
.home .cases-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
}
.home .cases-switcher { display: contents; }
.home .case-nav { display: none; }
.home .challenger-list,
.home .case-panel { padding: 40px 0; }
.home .challenger-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}
.home .challenger-list button {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  font-weight: 700;
  font-size: 31px;
  line-height: 43px;
  color: var(--quiet);
  width: fit-content;
  max-width: calc(100% + 20px);
  margin-left: -10px;
  padding: 2px 10px;
  border-radius: 8px;
  background: transparent;
  transition: color 0.2s ease, background-color 0.2s ease;
}
.home .challenger-list button.is-active { color: var(--ink-dark); }
.home .challenger-list button:hover {
  background: var(--ink-dark);
  color: #fff;
}
.home .challenger-list button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: 2px;
}
.home .case-panel { min-width: 0; }
.home .case-panel[hidden] { display: none; }
.home .case-logo { height: 64px; width: auto; max-width: 220px; object-fit: contain; object-position: left center; margin-bottom: 12px; }
.home .case-logo-se {
  width: 186px;
  height: 64px;
  max-width: none;
  aspect-ratio: auto;
  object-fit: fill;
  object-position: bottom;
}
.home .case-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 40px;
  line-height: 56px;
  margin-bottom: 12px;
}
.home .case-summary { font-size: 16px; line-height: 22px; margin-bottom: 40px; }
.home .case-photos {
  display: grid;
  grid-template-columns: 374fr 151fr 216fr;
  gap: 12px;
  margin-bottom: 24px;
}
.home .case-photos > img,
.home .case-photos > .case-shot {
  width: 100%;
  aspect-ratio: 374 / 220;
  height: auto;
  object-fit: cover;
  border-radius: 22px;
  display: block;
}
.home .case-photos > :nth-child(2) { aspect-ratio: 151 / 220; }
.home .case-photos > :nth-child(3) { aspect-ratio: 215.75 / 220; }
.home .case-photos > .case-shot {
  position: relative;
  overflow: hidden;
  background: #e5e5e5;
}
.home .case-photos > .case-shot-empty { background: transparent; }
.home .case-photos > .case-shot img {
  position: absolute;
  display: block;
  max-width: none;
  border-radius: 0;
  object-fit: fill;
}
.home .case-photos > img.is-bottom { object-position: center bottom; }
.home .case-shot img.crop-ova-1 { width: 117.39%; height: 100%; left: -8.62%; top: 0; }
.home .case-shot img.crop-ova-2 { width: 151.79%; height: 156%; left: -25.9%; top: -15.09%; }
.home .case-shot img.crop-ps43-2 { width: 118.65%; height: 121.91%; left: -9.32%; top: -6.43%; }
.home .case-shot img.crop-fandrop-2 { width: 215.73%; height: 100%; left: -45.52%; top: 0; }
.home .case-note {
  background: #e5e5e5;
  border-radius: 20px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 16px;
  line-height: 22px;
}
.home .case-note strong { font-weight: 500; }
@keyframes cases-enter {
  from { opacity: 0; transform: translateY(28px); }
  to { opacity: 1; transform: none; }
}
.home .case-panel.is-entering {
  animation: cases-enter 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Event image — Figma 3054:762, 1728×690.
   The photo is larger than the frame and clipped to that crop. */
.home .banner {
  position: relative;
  aspect-ratio: 1728 / 690;
  display: flex;
  align-items: center;
  padding: 0;
  overflow: hidden;
  color: #e5e5e5;
}
.home .banner-media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.home .banner-photo {
  position: absolute;
  width: 110.77%;
  height: auto;
  left: 0.02%;
  top: -15.08%;
  max-width: none;
}
.home .banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(73.89183156776527deg, rgba(0, 0, 0, 0.6) 40.285%, rgba(102, 102, 102, 0) 84.043%);
}
.home .banner-copy {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  width: min(1728px, 100%);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 32px;
}
.home .banner-title {
  max-width: 893px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 64px;
  line-height: 72px;
  letter-spacing: 0;
  color: #e5e5e5;
}
.home .banner-copy p {
  width: 100%;
  max-width: 893px;
  font-weight: 700;
  font-size: 24px;
  line-height: 32px;
  letter-spacing: 0;
  opacity: 0.85;
  color: #e5e5e5;
}

/* Testimonials (Figma 3050:208). */
.home .testimonials { display: none !important; }
.home .testimonials-head { margin-bottom: 64px; }
.home .testimonials-head .section-lede { max-width: 1096px; margin-top: 24px; }
.home .testimonial-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  align-items: stretch;
}
.home .quote-card,
.home .quote-photo {
  min-height: 460px;
  height: auto;
  border-radius: 20px;
  overflow: hidden;
}
.home .quote-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
  padding: 32px 24px;
  background: var(--panel);
}
.home .quote-card p {
  font-size: 20px;
  line-height: 28px;
  color: var(--ink);
}
.home .quote-copy {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.home .quote-card .quote-by {
  font-size: 16px;
  font-weight: 500;
  line-height: 22px;
}
.home .quote-logo {
  width: 98px;
  height: 32px;
  max-width: none;
  object-fit: cover;
  object-position: left center;
}
.home .quote-photo {
  position: relative;
  container-type: size;
  background: #000;
}
/* Figma places the photo at 207.7% × 109.78%, shifted to a focal point
   right of center. Scale by whichever axis needs it, and keep that point
   centered so the picture covers the card without stretching. */
.home .quote-photo img {
  position: absolute;
  width: max(207.7cqw, calc(109.78cqh * 2400 / 1603));
  height: auto;
  max-width: none;
  left: 50%;
  top: 50%;
  transform: translate(-67.215%, -54.46%);
}
.home .quote-card-media { gap: 48px; }
.home .quote-still {
  position: relative;
  flex: 1 1 auto;
  width: 100%;
  min-height: 140px;
  border-radius: 20px;
  overflow: hidden;
}
.home .quote-still img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}
.home .quote-person {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}
.home .quote-avatar {
  position: relative;
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: 50%;
  overflow: hidden;
}
.home .quote-avatar img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center 28%;
}
.home .quote-person p {
  font-size: 16px;
  font-weight: 500;
  line-height: 22px;
}

/* Contact */
.home .contact-grid {
  display: grid;
  grid-template-columns: 1fr minmax(280px, 744px);
  gap: 48px;
  align-items: center;
}
.home .contact-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(56px, 7vw, 100px);
  line-height: 1;
  margin-bottom: 64px;
}
.home .contact-title .line-indent {
  display: block;
  padding-left: 0.37em;
  margin-top: 0.12em;
}
.home .contact-copy {
  max-width: 547px;
  color: var(--ink-soft);
  font-size: 16px;
  line-height: 22px;
  margin-bottom: 40px;
}
.home .contact-email {
  color: var(--ink);
  font-size: 16px;
  line-height: 22px;
  text-underline-offset: 3px;
}
.home .contact-form { display: flex; flex-direction: column; gap: 40px; }
.home .field { display: flex; flex-direction: column; gap: 13px; }
.home .fields { display: flex; flex-direction: column; gap: 24px; }
.home .field label { font-size: 16px; line-height: 22px; }
.home .field input,
.home .field select {
  width: 100%;
  appearance: none;
  background: var(--field);
  border: 1px solid var(--line-subtle);
  border-radius: 12px;
  color: var(--ink);
  font: inherit;
  font-size: 16px;
  line-height: 22px;
  padding: 12px 16px;
}
.home .field input::placeholder { color: var(--ink); opacity: 0.6; }
.home .field select { color: rgba(229, 229, 229, 0.6); }
.home .field select:valid,
.home .field select option { color: var(--ink); }
.home .field select option[value=""] { color: #504949; }
.home .select-wrap { position: relative; }
.home .select-wrap .select-chevron {
  position: absolute;
  right: 16px;
  top: 50%;
  width: 24px;
  height: 24px;
  margin-top: -12px;
  pointer-events: none;
}
.home .form-success,
.home .form-error { font-size: 16px; line-height: 22px; }
.home .form-error a { color: var(--ink); }

.home .footer { padding: 32px 0 48px; }
.home .footer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.home .footer-logo { height: 32px; width: auto; }
.home .footer-note {
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 500;
  line-height: 17px;
}

@media (max-width: 1100px) {
  .home .winner-grid,
  .home .cases-head,
  .home .cases-body,
  .home .contact-grid {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }
  .home .winner-photo-main,
  .home .winner-photo-second { min-height: 320px; height: 360px; }
  .home .testimonial-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home .quote-card { height: auto; min-height: 460px; }
  .home .quote-card-media { height: auto; min-height: 460px; }
  .home .quote-photo { height: auto; aspect-ratio: 364 / 460; }
  .home .mosaic { aspect-ratio: auto; height: auto; min-height: 0; display: block; padding: 64px 0 24px; overflow: visible; }
  .home .mosaic-copy { position: relative; left: auto; top: auto; transform: none; width: auto; margin: 0 auto 32px; }
  .home .mosaic.is-in .mosaic-shot { animation: none; }
  .home .mosaic-shot {
    position: relative;
    left: auto;
    top: auto;
    width: calc(50% - 8px);
    height: 220px;
    display: inline-block;
    margin: 4px;
    vertical-align: top;
    opacity: 1;
    transform: none;
  }
  .home .mosaic-photo { width: 100%; height: 100%; }
  .home .shot-b { height: 320px; }
}

@media (max-width: 720px) {
  .home {
    --gutter: 20px;
    --home-pad: 64px;
    --nav-h: 72px;
  }
  .home .nav { padding-top: 22px; padding-bottom: 22px; }
  .home .nav-menu { display: block; }
  .home .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 8px 20px 24px;
    background: rgba(28, 23, 23, 0.96);
  }
  .home .nav.is-open .nav-links { display: flex; }
  .home .nav-links a:not(.nav-cta) { display: inline; font-size: 16px; line-height: 22px; }

  .home .section-title { font-size: 32px; line-height: 38px; }
  .home .section-lede { font-size: 16px; line-height: 25px; }
  .home .sponsors-title { font-size: 22px; line-height: 30px; margin-bottom: 48px; }
  .home .logo-row { gap: 12px 12px; }
  .home .logo-row img.logo-ne { width: 65px; height: 24px; }
  .home .logo-row img.logo-usstm { width: 30px; height: 27px; }
  .home .logo-row img.logo-backstretch { width: 71px; height: 22px; }
  .home .logo-row img.logo-trans { width: 66px; height: 21px; }
  .home .logo-row img.logo-ps43 { width: 24px; height: 24px; }
  .home .logo-row img.logo-jane { width: 31px; height: 25px; }
  .home .logo-row img.logo-se { width: auto; height: 23px; }
  .home .logo-row img.logo-june { width: 55px; height: 18px; }
  .home .logo-row img.logo-volley { width: 60px; height: 24px; }
  .home .logo-row img.logo-cail { width: 46px; height: 16px; }
  .home .logo-row img.logo-cmg { width: 58px; height: 15px; }
  .home .logo-row img.logo-gruvi { width: 36px; height: 24px; }
  .home .logo-row img.logo-lovable { width: 83px; height: 15px; }

  .home .winners-head { margin-bottom: 40px; }
  .home .winners-head .section-lede { margin-top: 16px; }
  .home .winner-grid { gap: 12px; }
  .home .winner-photo-main { height: 335px; min-height: 0; }
  .home .winner-photo-second { display: none; }
  .home .prize-card { padding: 32px 24px; gap: 24px; }
  .home .prize-card h3 { font-size: 16px; line-height: 22px; font-weight: 400; }
  .home .prize-item { gap: 14px; }
  .home .prize-item-head strong { font-size: 24px; line-height: 28px; }
  .home .place-row { flex-direction: row; gap: 12px; }
  .home .place-card {
    flex: 1 1 0;
    min-width: 0;
    min-height: 151px;
    padding: 24px;
    gap: 12px;
  }
  .home .place-card span { font-size: 16px; line-height: 22px; font-weight: 400; white-space: normal; }
  .home .place-card strong { font-size: 28px; line-height: 35px; white-space: nowrap; }
  .home .place-card em { font-size: 16px; line-height: 22px; font-weight: 500; }

  .home .mosaic {
    height: 553px;
    min-height: 0;
    aspect-ratio: auto;
    display: block;
    padding: 0;
    overflow: hidden;
  }
  .home .mosaic-copy {
    position: absolute;
    left: 20px;
    right: 20px;
    top: 64px;
    width: auto;
    margin: 0;
    transform: none;
    text-align: left;
    align-items: flex-start;
    gap: 16px;
  }
  .home .mosaic-copy .section-title { font-size: 32px; line-height: 38px; }
  .home .mosaic-copy .section-lede { width: auto; margin: 0; font-size: 16px; line-height: 25px; }
  .home .mosaic-copy .btn { align-self: center; margin-top: 24px; }
  .home .mosaic-shot {
    position: absolute;
    display: block;
    margin: 0;
    opacity: 1;
    transform: none;
    animation: none;
  }
  .home .shot-a { left: 71.9%; top: 50.3%; width: 20.1%; height: 17.9%; }
  .home .shot-b { left: 36.8%; top: 56.4%; width: 26.4%; height: 28%; }
  .home .shot-c { left: -11.9%; top: 51.7%; width: 35.1%; height: 18.4%; }
  .home .shot-d { left: 66.4%; top: 67.1%; width: 36.8%; height: 15.4%; }
  .home .shot-e { left: 14.4%; top: 64.7%; width: 19.2%; height: 16.8%; }
  .home .shot-f { left: -5.5%; top: 74%; width: 15.2%; height: 9.2%; }
  .home .shot-g { left: 93.5%; top: 53%; width: 14.9%; height: 9.2%; }

  .home .speakers-head {
    flex-direction: column;
    align-items: stretch;
    margin-bottom: 40px;
  }
  .home .speakers-head .section-lede { margin-top: 16px; }
  .home .speakers-nav { align-self: flex-end; }
  .home .speaker-card {
    flex-basis: 253px;
    width: 253px;
  }
  .home .speaker-card h3 { font-size: 22px; line-height: 30px; }
  .home .speaker-card p { font-size: 16px; line-height: 25px; }

  .home .cases-head { gap: 24px; }
  .home .challenger-list {
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 16px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0 0 8px;
    scrollbar-width: none;
  }
  .home .challenger-list::-webkit-scrollbar { display: none; }
  .home .challenger-list button {
    flex: none;
    font-size: 24px;
    line-height: 33px;
    white-space: nowrap;
    margin-left: 0;
  }
  .home .case-photos { grid-template-columns: 174fr 70fr 101fr; gap: 8px; }
  .home .case-photos > img,
  .home .case-photos > .case-shot { height: 102px; aspect-ratio: auto; }

  .home .cases-switcher {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
  }
  .home .case-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: #e5e5e5;
    color: var(--ink-dark);
    cursor: pointer;
    flex: none;
  }
  .home .case-nav-next { background: var(--ink-dark); color: var(--light); }
  .home .case-nav:disabled { opacity: 0.4; cursor: default; }
  .home .case-nav:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
  }
  .home .case-nav svg { display: block; }

  .home .banner { min-height: 393px; aspect-ratio: auto; }
  .home .banner-photo {
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    object-fit: cover;
    object-position: center 38%;
  }
  .home .banner-title { font-size: 32px; line-height: 38px; }
  .home .banner-copy { gap: 24px; }
  .home .banner-copy p { font-size: 18px; line-height: 26px; }

  .home .testimonials-head { margin-bottom: 40px; }
  .home .testimonials-head .section-lede { margin-top: 16px; }
  .home .testimonial-row {
    display: flex;
    gap: 24px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    margin-right: calc(-1 * var(--gutter));
    padding-right: var(--gutter);
  }
  .home .testimonial-row::-webkit-scrollbar { display: none; }
  .home .quote-card,
  .home .quote-photo {
    flex: 0 0 305px;
    width: 305px;
    height: auto;
    min-height: 340px;
    scroll-snap-align: start;
  }
  .home .quote-photo {
    height: auto;
    aspect-ratio: auto;
    align-self: stretch;
  }
  .home .quote-card-media { height: auto; }
  .home .quote-still { height: 148px; flex: none; }
  .home .quote-card.scroll-reveal,
  .home .quote-photo.scroll-reveal,
  .home .quote-card.scroll-reveal.is-in,
  .home .quote-photo.scroll-reveal.is-in { translate: none; }

  .home .contact-title { font-size: 48px; line-height: 48px; margin-bottom: 48px; }
  .home .contact-title .line-indent { display: block; padding-left: 26px; margin-top: 30px; }
  .home .contact-form { gap: 32px; }
  .home .fields { gap: 16px; }
  .home .field { gap: 10px; }
  .home .field input,
  .home .field select { padding: 9px 12px; }
  .home .field-phone { display: none; }
  .home .btn-pill { padding: 10px 24px; font-size: 16px; font-weight: 500; line-height: 22px; }
  .home .contact .btn-submit { width: 100%; }
  .home .contact .btn-pill { width: 100%; justify-content: center; }

  .home .footer { padding: 24px 0; }
  .home .footer-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
}

/* Scroll reveals. `translate` is independent of `transform`, so centered
   blocks such as the gallery title keep their own positioning. */
.home .scroll-reveal {
  opacity: 0;
  translate: 0 36px;
  transition: opacity 0.5s ease, translate 0.5s ease;
}
.home .scroll-reveal.is-in {
  opacity: 1;
  translate: 0 0;
  transition:
    opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1),
    translate 0.95s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--reveal-delay, 0ms);
}
.home .sponsors-title.scroll-reveal.is-in { opacity: 0.85; }
.no-js .scroll-reveal { opacity: 1; translate: none; }
.no-js .home .sponsors-title { opacity: 0.85; }

@media (prefers-reduced-motion: reduce) {
  .home .mosaic-shot { transform: none; opacity: 1; animation: none; }
  .home .mosaic-photo { transform: none; opacity: 1; transition: none; }
  .home .case-panel.is-entering { animation: none; }
  .home .challenger-list button { transition: none; }
  .home .scroll-reveal { opacity: 1; translate: none; transition: none; }
  .home .sponsors-title { opacity: 0.85; }
  .home .hero-ribbon-card { will-change: auto; }
}

/* Mobile hero 3116:56 — the arc is wider than the phone and cropped
   to the center cards. Stats stack in the dip. */
@media (max-width: 900px) {
  .home .hero {
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0;
  }
  .home .hero-intro {
    order: 0;
    width: min(362px, calc(100% - 40px));
    margin: 0 auto;
    gap: 24px;
  }
  .home .hero-intro .btn { margin-top: 0; }
  .home .hero-title {
    font-size: 64px;
    line-height: 1.24;
  }
  .home .hero-lede {
    max-width: none;
    font-size: 16px;
    line-height: 22px;
  }
  .home .hero-gallery {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    width: 100%;
    height: 320px;
    margin-top: 28px;
    flex: none;
    transform: none;
  }
  .home .hero-ribbon {
    perspective: 1400px;
    --ribbon-w: 118px;
    --ribbon-h: 158px;
  }
  .home .hero-ribbon-card { border-radius: 14px; }
  .home .hero-stats {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    width: min(362px, calc(100% - 40px));
    margin-top: 28px;
  }
  .home .stat-block { width: min(253px, 100%); }
  .home .stat-value { font-size: 32px; line-height: 33px; }
  .home .stat-label { font-size: 16px; line-height: 22px; }
}