/* RoadHack24 — static rebuild of the Framer site.
   Breakpoints mirror Framer: desktop ≥1200, tablet 810–1199, phone <810. */

:root {
  --yellow: #ffdd00;
  --green: #094f20;
  --black: #000;
  --muted: rgba(0, 0, 0, 0.4);
  --wrap: 820px;
  --gutter: 10px;
  --card-shadow:
    rgba(0, 0, 0, 0.43) 0.12px 0.36px 0.53px -1.25px,
    rgba(0, 0, 0, 0.38) 0.46px 1.37px 2.03px -2.5px,
    rgba(0, 0, 0, 0.15) 2px 6px 8.85px -3.75px,
    rgba(0, 0, 0, 0.027) 0 0.6px 2.05px -0.42px,
    rgba(0, 0, 0, 0.035) 0 2.29px 7.78px -0.83px,
    rgba(0, 0, 0, 0.075) 0 10px 34px -1.25px;
  --btn-shadow: rgba(0, 0, 0, 0.2) 4px 4px 15px 2px, rgba(0, 0, 0, 0.1) 0 0 0 1px;
  --pill-shadow:
    rgba(0, 0, 0, 0.1) 0 0.6px 1.08px -0.67px,
    rgba(0, 0, 0, 0.11) 0 2.29px 4.12px -1.33px,
    rgba(0, 0, 0, 0.15) 0 10px 18px -2px;
  --spring: cubic-bezier(0.22, 1.25, 0.36, 1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--yellow);
  color: var(--black);
  font: 400 16px/1.4 Inter, system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; }
a { color: inherit; }
p, h1, h2, h3, ul, ol { margin: 0; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

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

/* ---------- Page background: glow + grain ---------- */
.page { position: relative; overflow: clip; }

.bg-glow,
.bg-noise {
  position: absolute;
  pointer-events: none;
  z-index: 0;
}
.bg-glow {
  left: 31.9%;
  width: 79.2%;
  top: -23.7%;
  height: 100%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0) 100%);
  opacity: 0.4;
  transform: rotate(1deg);
}
.bg-noise {
  inset: 0;
  background: url("../img/noise.png") 0 0 / 128px auto repeat;
  mix-blend-mode: hard-light;
  opacity: 0.1;
}
.page > :not(.bg-glow):not(.bg-noise) { position: relative; z-index: 1; }

/* ---------- Layout ---------- */
.wrap {
  width: min(var(--wrap), calc(100% - var(--gutter) * 2));
  margin-inline: auto;
}
.section { padding-block: 80px; }
.prose { max-width: 600px; }
/* Framer sets balanced wrapping on most copy; mirror it for identical line breaks. */
.balance,
.prose p,
p.prose,
.hero__title,
.hero__lead,
.sched-card__body,
.person__name,
.criterion p,
.mono { text-wrap: balance; }
.prose > p + p { margin-top: 16px; }

.h2 {
  font-size: 32px;
  line-height: 1.2;
  font-weight: 900;
  max-width: 600px;
  margin-bottom: 40px;
}

.mono {
  font-family: "Space Mono", ui-monospace, monospace;
  font-size: 14px;
  line-height: 1.4;
  letter-spacing: -0.02em;
}

.credit {
  font-size: 10px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  opacity: 0.4;
  text-align: right;
}
.credit a { text-decoration: underline; }

/* ---------- Top header ---------- */
.topbar {
  width: min(1080px, calc(100% - var(--gutter) * 2));
  margin-inline: auto;
  height: 84px;
  padding-top: 20px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
}
.brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 79px;
  text-decoration: none;
}
.brand__label {
  font-size: 10px;
  line-height: 10px;
  font-weight: 600;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  opacity: 0.8;
  white-space: nowrap;
}
.brand__logo { width: 79px; height: 30px; margin-top: 4px; display: block; }

.topnav {
  display: flex;
  gap: 10px;
  padding-top: 12px;
}
.navlink {
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  text-decoration: none;
  opacity: 0.8;
  white-space: nowrap;
  transition: opacity 0.2s;
}
.navlink:hover { opacity: 1; }

.socials {
  justify-self: end;
  display: flex;
  gap: 14px;
  padding-top: 12px;
}
.socials a { display: block; width: 20px; height: 20px; opacity: 0.8; transition: opacity 0.2s; }
.socials a:hover { opacity: 1; }
.socials svg { width: 100%; height: 100%; fill: currentColor; display: block; }

/* ---------- Hero ---------- */
.hero {
  padding-top: 80px;
  padding-bottom: 120px;
  text-align: center;
}
.hero__inner { display: flex; flex-direction: column; align-items: center; }

.tag {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 9px;
  border: 1px solid var(--green);
  border-radius: 20px;
  color: var(--green);
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  white-space: nowrap;
}

.hero__title {
  margin-top: 40px;
  max-width: 600px;
  font-size: 48px;
  line-height: 1.2;
  font-weight: 900;
}
.hero__title .word { display: inline-block; white-space: nowrap; }
.hero__title .ch { display: inline-block; }

.hero__lead {
  margin-top: 20px;
  max-width: 420px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  padding: 0 20px;
  border-radius: 25px;
  background: var(--green);
  box-shadow: var(--btn-shadow);
  color: #fff;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.25s var(--ease-out), background-color 0.2s;
}
.btn > span { opacity: 0.8; transition: opacity 0.2s; }
.btn:hover > span { opacity: 1; }
.btn:active { transform: scale(0.97); }
.hero__cta { margin-top: 40px; }

/* Prize podium */
.podium {
  margin-top: 80px;
  width: 552px;
  max-width: 100%;
  height: 138px;
  border-radius: 40px 40px 0 0;
  background: rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
}
.podium__place {
  font-family: "Space Mono", ui-monospace, monospace;
  text-align: center;
  white-space: nowrap;
}
.podium__rank { font-size: 14px; line-height: 16.8px; letter-spacing: -0.02em; }
.podium__amount { font-size: 18px; line-height: 21.6px; font-weight: 700; letter-spacing: -0.02em; }
.podium__place--first .podium__amount { font-size: 20px; line-height: 24px; }
.podium__rank span, .podium__amount span { color: var(--muted); }
.podium__winner { font-size: 14px; line-height: 16.8px; letter-spacing: -0.02em; }
.podium__first { display: flex; align-items: center; gap: 10px; }
.laurel { width: 31px; height: 50px; fill: var(--green); display: block; }
.laurel--right { width: 29px; }

/* Hero photo + polaroids */
.hero__media {
  position: relative;
  width: min(1080px, calc(100% - var(--gutter) * 2));
  margin-inline: auto;
  text-align: left;
}
.hero__photo {
  height: 600px;
  border-radius: 4px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.05);
}
.hero__photo img { width: 100%; height: 100%; object-fit: cover; }
.hero__photo-credit { position: absolute; top: calc(100% + 5px); right: 5px; }

.polaroid-slot {
  position: absolute;
  width: 300px;
  height: 300px;
  z-index: 2;
}
.polaroid {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 10px;
  background: #fff;
  border-radius: 4px;
  box-shadow: var(--card-shadow);
  transform: rotate(var(--rot));
}
.polaroid::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: url("../img/noise.png") 0 0 / 128px auto repeat;
  mix-blend-mode: multiply;
  opacity: 0.05;
  pointer-events: none;
}
.polaroid__img { height: 230px; overflow: hidden; }
.polaroid__img img { width: 100%; height: 100%; object-fit: cover; }
.polaroid__caption {
  padding: 8px 5px 0;
  font-family: Caveat, cursive;
  font-size: 20px;
  line-height: 1;
  letter-spacing: -0.02em;
}
.polaroid .credit { position: absolute; right: 5px; bottom: 5px; }

.polaroid--a { --rot: 9deg; right: -60px; top: 204px; }
.polaroid--b { --rot: -4deg; left: 50px; top: 367px; }
.polaroid--c { --rot: 7deg; left: 660px; top: 272px; }

/* ---------- Schedule ---------- */
.schedule { display: flex; flex-direction: column; gap: 20px; }
.card {
  background: #fff;
  border-radius: 4px;
  box-shadow: var(--card-shadow);
}
.sched-card {
  position: sticky;
  top: var(--stick);
  padding: 21px 20px 40px;
  transform-origin: 50% 50%;
  will-change: transform;
}
.sched-card:nth-child(1) { --stick: 20px; }
.sched-card:nth-child(2) { --stick: 80px; }
.sched-card:nth-child(3) { --stick: 160px; }
.sched-card:nth-child(4) { --stick: 220px; }
.sched-card__head { display: flex; align-items: center; }
.sched-card__num {
  width: 28px;
  height: 28px;
  border-radius: 40px;
  background: var(--green);
  color: #fff;
  font-size: 14px;
  line-height: 28px;
  font-weight: 500;
  text-align: center;
  flex: none;
}
.sched-card .tag { border-radius: 40px; }
.sched-card__body { margin-top: 41px; max-width: 600px; }

/* ---------- Jury ---------- */
.jury {
  display: grid;
  grid-template-columns: repeat(4, 190px);
  justify-content: space-between;
  row-gap: 40px;
}
.person { display: block; text-decoration: none; }
.person__photo {
  aspect-ratio: 190 / 143;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 0 0 transparent;
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
}
.person__photo img { width: 100%; height: 100%; object-fit: cover; }
a.person:hover .person__photo { transform: scale(1.01); box-shadow: var(--card-shadow); }
.person__name { margin-top: 10px; font-weight: 700; }
.person__role { font-size: 14px; line-height: 1.4; opacity: 0.6; }
.jury-note { margin-top: 60px; }

/* ---------- Prizes ---------- */
.prize-pool {
  container-type: inline-size;
  margin-bottom: 40px;
}
.prize-pool__amount {
  font-family: "Space Mono", ui-monospace, monospace;
  font-weight: 700;
  font-size: 20.43cqw;
  line-height: 0.8;
  color: var(--green);
  white-space: nowrap;
  letter-spacing: 0;
}
.prizes__body { position: relative; }
.prizes__note { margin-top: 40px; }

/* ---------- Criteria ---------- */
.criteria {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 40px;
  row-gap: 40px;
}
.criterion { display: flex; gap: 20px; padding-bottom: 20px; }
.criterion svg { width: 60px; height: 60px; flex: none; fill: var(--green); }
.criterion p { max-width: 310px; }

/* ---------- Disciplines ---------- */
.disciplines {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: 40px;
  row-gap: 40px;
}
.discipline { padding-bottom: 20px; }
.discipline img { width: 120px; height: 120px; object-fit: contain; }
.discipline p { margin-top: 20px; }

/* ---------- Location ---------- */
.location { display: flex; gap: 20px; align-items: flex-start; }
.location__main { flex: 3 1 0; min-width: 0; }
.location__photo { height: 395px; border-radius: 4px; overflow: hidden; }
.location__photo img { width: 100%; height: 100%; object-fit: cover; }
.location__text { margin-top: 20px; }
.location__map {
  flex: 2 1 0;
  min-width: 0;
  height: 460px;
  border-radius: 4px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.05);
}
.location__map iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ---------- Registration ---------- */
.registration .prose { margin-top: -20px; }
.reg-box { margin-top: 40px; padding: 4px; }
.reg-box__inner {
  height: 180px;
  border-radius: 2px;
  background: var(--yellow);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 1.4;
  text-align: center;
}

/* ---------- FAQ ---------- */
.faq { display: flex; flex-direction: column; gap: 20px; }
.faq__q {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
}
.faq__icon { position: relative; width: 16px; height: 16px; flex: none; }
.faq__icon svg { position: absolute; inset: 0; width: 16px; height: 16px; fill: currentColor; transition: opacity 0.2s; }
.faq__icon .i-plus { opacity: 0.4; }
.faq__icon .i-minus { opacity: 0; }
.faq__item.is-open .i-plus { opacity: 0; }
.faq__item.is-open .i-minus { opacity: 1; }
.faq__title { font-size: 24px; line-height: 1.2; font-weight: 600; max-width: 794px; }
.faq__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s var(--ease-out);
}
.faq__item.is-open .faq__panel { grid-template-rows: 1fr; }
.faq__panel > div { overflow: hidden; visibility: hidden; transition: visibility 0.35s; }
.faq__item.is-open .faq__panel > div { visibility: visible; transition: none; }
.faq__answer { padding: 10px 0 0 26px; max-width: 626px; }
.faq__answer ul, .faq__answer ol { padding-left: 16px; }

/* ---------- Partners ---------- */
.partners { padding-bottom: 90px; }
.partners__group + .partners__group { margin-top: 50px; }
.partners__label { text-align: center; margin-bottom: 50px; }
.logos {
  display: grid;
  justify-content: center;
  grid-template-columns: repeat(3, 160px);
  column-gap: 100px;
  row-gap: 60px;
}
.logos--4 { grid-template-columns: repeat(4, 135px); column-gap: 60px; }
.logos a { display: block; height: 80px; transition: transform 0.25s var(--ease-out); }
.logos a:hover { transform: scale(1.04); }
.logos img { width: 100%; height: 100%; object-fit: contain; }

/* ---------- Gallery slideshow ---------- */
.gallery { padding: 80px 0 60px; overflow: hidden; }
.gallery__track {
  display: flex;
  gap: 10px;
  padding: 0 0 20px 7px;
  margin: 0;
  list-style: none;
  will-change: transform;
}
.gallery__track.is-animating { transition: transform 0.6s var(--ease-out); }
.gallery__slide {
  flex: none;
  width: 348px;
  height: 440px;
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
  box-shadow: var(--card-shadow);
}
.gallery__slide img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Footer ---------- */
.footer { padding-block: 80px; }
.footer__cols { display: grid; grid-template-columns: repeat(3, 280px); }
.footer__title { font-weight: 700; }
.footer__links { margin-top: 20px; list-style: none; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.footer__links a { text-decoration: none; transition: opacity 0.2s; }
.footer__links a:hover { opacity: 0.6; }
.footer__links .is-current { color: var(--green); }

.made-by {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 80px 0 10px 10px;
  text-decoration: none;
  font-size: 14px;
  line-height: 1.2;
  font-weight: 500;
}
.made-by__mark { width: 34px; height: 34px; background: #000; }
.made-by__sub { display: block; color: var(--muted); }

/* ---------- Floating nav pill ---------- */
.dock {
  position: fixed;
  left: 50%;
  bottom: 8px;
  z-index: 10;
  transform: translate(-50%, 70px);
  transition: transform 0.5s var(--spring);
}
.dock.is-visible { transform: translate(-50%, 0); }
.dock__bar {
  display: flex;
  align-items: center;
  gap: 20px;
  height: 50px;
  padding: 4px 4px 4px 20px;
  border-radius: 30px;
  background: rgba(255, 255, 255, 0.8);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: var(--pill-shadow);
}
.dock__links { display: flex; gap: 10px; }
.dock .btn { height: 42px; }
.dock__toggle, .dock__menu { display: none; }

/* ---------- Load + scroll animations (only when JS is running) ---------- */
.js .intro { opacity: 0; transform: translateY(12px); }
.js .intro-fade { opacity: 0; }
.js .hero__title .ch { opacity: 0; filter: blur(10px); }
.is-loaded .intro,
.is-loaded .intro-fade {
  opacity: 1;
  transform: none;
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
  transition-delay: var(--d, 0s);
}
.is-loaded .hero__title .ch {
  opacity: 1;
  filter: blur(0);
  transition: opacity 0.6s var(--ease-out), filter 0.6s var(--ease-out);
  transition-delay: calc(0.3s + var(--i) * 0.03s);
}

.js .polaroid-slot .polaroid {
  opacity: 0;
  transform: translate(20px, var(--from-y, 40px)) rotate(calc(var(--rot) + var(--spin, 20deg))) scale(1.1);
}
.polaroid--b { --spin: -20deg; --from-y: 60px; }
.js .polaroid-slot.in-view .polaroid {
  opacity: 1;
  transform: rotate(var(--rot));
  transition: opacity 0.6s var(--ease-out), transform 1s var(--spring);
}

.js .prize-pool__amount { opacity: 0.2; transform: translateX(80px) scale(1.2); transform-origin: 50% 50%; }
.js .prize-pool__amount.in-view {
  opacity: 1;
  transform: none;
  transition: opacity 0.8s var(--ease-out), transform 1s var(--ease-out);
}

/* ---------- Tablet ---------- */
@media (max-width: 1199.98px) {
  .topbar { display: flex; justify-content: space-between; }
  .polaroid--a { right: -11px; top: 205px; }
  .polaroid--b { left: 30px; top: 427px; }
  .polaroid--c { left: 470px; top: 392px; }
  .hero { padding-bottom: 180px; }
  .sched-card { padding-bottom: 33px; }
  .jury { row-gap: 30px; }
  #home-prizes { padding-bottom: 180px; }
  .logos { column-gap: 90px; }
  .logos--4 { grid-template-columns: repeat(4, 128px); column-gap: 60px; }
  .gallery__track { padding-left: 0; }
  .gallery__slide { width: 255px; height: 360px; }
  .footer__cols { grid-template-columns: repeat(3, 270px); }
}

/* ---------- Phone ---------- */
@media (max-width: 809.98px) {
  .topbar { width: 100%; padding-inline: 20px 22px; }
  .topnav { display: none; }

  .hero { padding-bottom: 160px; }
  .section:not(#home-about), .footer { padding-block: 40px; }
  .section.partners:not(#home-about) { padding-bottom: 90px; }
  .hero__title { font-size: 40px; max-width: 370px; }
  .hero__lead { max-width: 370px; }
  .hero__cta { display: none; }
  .podium {
    width: 323px;
    height: 294px;
    flex-direction: column;
    gap: 40px;
  }
  .podium__place--second { order: 2; }
  .podium__first { order: 1; }
  .podium__place--third { order: 3; }
  .hero__photo { height: 500px; }

  .polaroid-slot { width: 240px; height: 260px; }
  .polaroid__img { height: 190px; }
  .polaroid--a { right: -27px; top: 54px; }
  .polaroid--b { left: -8px; top: 351px; }
  .polaroid--c { display: none; }

  .jury { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 10px; }

  .criteria { grid-template-columns: 1fr; }
  .criterion p { max-width: none; }

  .disciplines { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; row-gap: 20px; }

  .location { flex-direction: column; }
  .location__main, .location__map { flex: none; width: 100%; }
  .location__photo { height: 373px; }
  .location__map { height: 400px; }

  .logos { grid-template-columns: repeat(3, 97px); column-gap: 29px; row-gap: 30px; }
  .logos a { height: 64px; }
  .logos--2 { grid-template-columns: repeat(2, 160px); column-gap: 30px; }
  .logos--2 a { height: 80px; }
  .logos--4 { grid-template-columns: repeat(3, 97px); column-gap: 29px; }

  .gallery { padding: 40px 0 20px; }
  .gallery__slide { width: 190px; height: 300px; }

  .footer__cols { grid-template-columns: 1fr; row-gap: 20px; }

  /* Mobile dock: hamburger + registration, expands into a menu */
  .dock {
    left: 8px;
    right: 8px;
    transform: none;
  }
  .dock.is-visible { transform: none; }
  .dock__bar {
    position: relative;
    flex-direction: column;
    justify-content: flex-end;
    height: auto;
    padding: 4px;
    gap: 0;
    border-radius: 30px;
  }
  .dock__links { display: none; }
  .dock__menu {
    display: grid;
    grid-template-rows: 0fr;
    width: 100%;
    transition: grid-template-rows 0.45s var(--spring);
  }
  .dock__menu > div { overflow: hidden; }
  .dock__menu nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 41px 0 36px;
  }
  .dock.is-open .dock__menu { grid-template-rows: 1fr; }
  .dock__row { display: flex; align-items: center; gap: 20px; width: 100%; }
  .dock__toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 37px;
    height: 40px;
    margin-left: 4px;
    border-radius: 25px;
    flex: none;
  }
  .dock__toggle svg { width: 24px; height: 24px; fill: currentColor; }
  .dock__toggle .i-close { display: none; }
  .dock.is-open .dock__toggle .i-close { display: block; }
  .dock.is-open .dock__toggle .i-menu { display: none; }
  .dock .btn { flex: 1; height: 50px; }
}

@media (min-width: 810px) {
  .dock__row { display: contents; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; transition-delay: 0s !important; }
}