/* Refonte de l'accueil uniquement — 02/08/2026 */

.home-page {
  --home-ink: #11130f;
  --home-paper: #eee9de;
  --home-paper-light: #f7f2e8;
  --home-accent: #d99b47;
  --home-line: rgba(32, 35, 28, .2);
  --home-gutter: clamp(20px, 4vw, 72px);
  --home-max: 1600px;
  --home-enter: cubic-bezier(.16, 1, .3, 1);
  --home-micro: 180ms;
  --home-standard: 520ms;
  --home-cinematic: 1100ms;
  min-width: 320px;
  color: var(--home-ink);
  background: var(--home-paper);
}

.home-page main {
  position: relative;
  z-index: 1;
}

/* Header superposé au film, puis plus dense au défilement. */
.home-page .site-header {
  position: fixed !important;
  inset: 0 0 auto !important;
  z-index: 50 !important;
  height: auto !important;
  padding: 0 !important;
  border: 0 !important;
  background: linear-gradient(180deg, rgba(5, 7, 5, .64), transparent) !important;
  box-shadow: none !important;
  transition:
    background var(--home-standard) var(--home-enter),
    backdrop-filter var(--home-standard) var(--home-enter) !important;
}

.home-page .site-header.is-scrolled {
  background: rgba(10, 12, 9, .82) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.1) !important;
  backdrop-filter: blur(18px) saturate(1.1) !important;
}

.home-page .header-row {
  width: min(calc(100% - (2 * var(--home-gutter))), var(--home-max)) !important;
  min-height: clamp(74px, 7vw, 98px) !important;
  grid-template-columns: 1fr auto !important;
  transition: min-height var(--home-standard) var(--home-enter) !important;
}

.home-page .site-header.is-scrolled .header-row {
  min-height: 68px !important;
}

.home-page .brand-text {
  color: #f8f2e6 !important;
  font-size: clamp(21px, 1.7vw, 29px) !important;
  font-weight: 700 !important;
  line-height: .88 !important;
  letter-spacing: -.03em !important;
  text-shadow: 0 2px 20px rgba(0, 0, 0, .3) !important;
  transition: color var(--home-micro) ease, transform var(--home-micro) ease !important;
}

.home-page .brand-text:hover {
  color: var(--home-accent) !important;
  transform: translateY(-1px) !important;
}

.home-page .brand-text span {
  margin-top: 9px !important;
  color: rgba(248, 242, 230, .68) !important;
  font-size: 7px !important;
  letter-spacing: .42em !important;
}

.home-page .header-right {
  grid-column: 2 !important;
  justify-self: end !important;
}

.home-page .site-nav {
  gap: clamp(22px, 3vw, 46px) !important;
}

.home-page .site-nav a {
  position: relative !important;
  padding: 10px 0 !important;
  color: rgba(248, 242, 230, .82) !important;
  font-size: 9px !important;
  font-weight: 400 !important;
  letter-spacing: .25em !important;
  transition: color var(--home-micro) ease !important;
}

.home-page .site-nav a::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  right: .25em !important;
  bottom: 5px !important;
  left: 0 !important;
  height: 1px !important;
  background: var(--home-accent) !important;
  transform: scaleX(0) !important;
  transform-origin: right !important;
  transition: transform var(--home-standard) var(--home-enter) !important;
}

.home-page .site-nav a:is(:hover, :focus-visible) {
  color: #fff9ec !important;
}

.home-page .site-nav a:is(:hover, :focus-visible)::after {
  transform: scaleX(1) !important;
  transform-origin: left !important;
}

@font-face {
  font-family: "Climate Crisis";
  src: url("../fonts/climate-crisis/ClimateCrisis-Regular-VariableFont_YEAR.ttf") format("truetype-variations");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

/* Hero plein écran : le film reste le seul ancrage visuel. */
.home-page .hero {
  min-height: 100svh !important;
  display: grid !important;
  align-items: end !important;
  overflow: clip !important;
  isolation: isolate !important;
  background: #060806 !important;
}

.home-page .hero::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  width: auto !important;
  height: auto !important;
  border: 0 !important;
  border-radius: 0 !important;
  background:
    linear-gradient(90deg, rgba(4, 6, 4, .72) 0%, rgba(4, 6, 4, .22) 46%, rgba(4, 6, 4, .08) 68%),
    linear-gradient(180deg, rgba(4, 6, 4, .14) 40%, rgba(4, 6, 4, .9) 100%) !important;
  transform: none !important;
  pointer-events: none !important;
}

.home-page .hero::after {
  content: "" !important;
  position: absolute !important;
  inset: auto 0 0 !important;
  z-index: 4 !important;
  width: 100% !important;
  height: clamp(36px, 4vw, 70px) !important;
  border: 0 !important;
  border-radius: 52% 52% 0 0 / 100% 100% 0 0 !important;
  background: var(--home-paper) !important;
  transform: translateY(55%) !important;
  pointer-events: none !important;
}

.home-page .hero-media,
.home-page .hero-video {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

.home-page .hero-media {
  z-index: 0 !important;
  overflow: hidden !important;
  background: #060806 !important;
  transform: translate3d(0, var(--hero-shift, 0px), 0) scale(1.04) !important;
  transform-origin: center center !important;
  will-change: transform !important;
}

.home-page .hero-video {
  object-fit: cover !important;
  object-position: 50% 50% !important;
  opacity: 0 !important;
  filter: saturate(.82) contrast(1.08) brightness(.86) !important;
  transition: opacity 220ms ease-out;
}

.home-page.is-hero-video-ready .hero-video {
  opacity: 1 !important;
}

.home-page .hero-overlay {
  display: none !important;
}

.home-page .hero-content {
  position: relative !important;
  inset: auto !important;
  transform: none !important;
  z-index: 3 !important;
  width: min(calc(100% - (2 * var(--home-gutter))), var(--home-max)) !important;
  margin: 0 auto !important;
  padding: clamp(130px, 17vh, 210px) 0 clamp(132px, 17vh, 190px) !important;
}

.home-page .hero-title {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  width: min(100%, 1000px) !important;
  max-width: none !important;
  margin: 0 !important;
  color: #f8f2e6 !important;
  font-family: var(--font-title) !important;
  font-size: clamp(64px, 9.6vw, 164px) !important;
  font-style: italic !important;
  font-weight: 400 !important;
  line-height: .74 !important;
  letter-spacing: -.065em !important;
  text-transform: none !important;
  white-space: normal !important;
  text-wrap: balance !important;
  text-shadow: 0 7px 34px rgba(0, 0, 0, .26) !important;
}

.home-page .hero-title .hero-word,
.home-page .hero-title .hero-word--theatre,
.home-page .hero-title .hero-word--film,
.home-page .hero-title .hero-word--performance {
  display: block !important;
  font-size: inherit !important;
  line-height: inherit !important;
  letter-spacing: inherit !important;
  text-transform: none !important;
  color: inherit !important;
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}

.home-page.has-motion .hero-title .hero-word,
.home-page.has-motion .hero-title .hero-word--theatre,
.home-page.has-motion .hero-title .hero-word--film,
.home-page.has-motion .hero-title .hero-word--performance {
  opacity: 0 !important;
  transform: translateY(42px) !important;
  animation: home-title-in var(--home-cinematic) var(--home-enter) forwards !important;
}

.home-page .hero-title .hero-word--film {
  margin-left: clamp(44px, 10vw, 170px) !important;
  animation-delay: 90ms !important;
}

.home-page .hero-title .hero-word--performance {
  margin-left: clamp(8px, 2vw, 32px) !important;
  color: var(--home-accent) !important;
  animation-delay: 180ms !important;
}

@keyframes home-title-in {
  to { opacity: 1; transform: translateY(0); }
}

.home-page .hero-forest {
  position: absolute !important;
  z-index: 2 !important;
  right: 0 !important;
  bottom: clamp(15px, 2vw, 30px) !important;
  left: 0 !important;
  height: clamp(90px, 16vw, 230px) !important;
  overflow: hidden !important;
  opacity: .7 !important;
  pointer-events: none !important;
}

.home-page .hero-forest img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  object-position: center bottom !important;
  filter: sepia(.7) saturate(.6) brightness(3.2) contrast(1.2) !important;
  mix-blend-mode: screen !important;
  opacity: .25 !important;
}

/* Créations : édition photo en deux colonnes, sans chrome superflu. */
.home-page #projets {
  position: relative !important;
  z-index: 5 !important;
  margin: 0 !important;
  padding: clamp(92px, 11vw, 180px) 0 clamp(90px, 12vw, 190px) !important;
  overflow: clip !important;
  color: var(--home-ink) !important;
  background:
    radial-gradient(circle at 8% 22%, rgba(169, 119, 59, .1), transparent 27%),
    radial-gradient(circle at 96% 70%, rgba(63, 88, 66, .08), transparent 24%),
    linear-gradient(rgba(238, 233, 222, .94), rgba(238, 233, 222, .94)),
    url("../images/paper-texture-generated.jpg") !important;
  background-size: auto, auto, auto, 780px auto !important;
}

.home-page #projets::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  right: var(--home-gutter) !important;
  left: var(--home-gutter) !important;
  height: 1px !important;
  background: var(--home-line) !important;
}

.home-page #projets .container {
  width: min(calc(100% - (2 * var(--home-gutter))), var(--home-max)) !important;
  margin: 0 auto !important;
}

.home-page #projets .section-head,
.home-page #projets .section-head--centered {
  display: grid !important;
  grid-template-columns: minmax(0, 1.1fr) minmax(280px, .55fr) !important;
  align-items: end !important;
  gap: clamp(28px, 6vw, 120px) !important;
  margin: 0 0 clamp(54px, 8vw, 120px) !important;
  text-align: left !important;
}

.home-page #projets .section-head > div {
  display: contents !important;
}

.home-page #projets .section-title {
  position: relative !important;
  margin: 0 !important;
  color: var(--home-ink) !important;
  font-size: clamp(68px, 11vw, 180px) !important;
  font-style: italic !important;
  font-weight: 400 !important;
  line-height: .8 !important;
  letter-spacing: -.07em !important;
  text-transform: none !important;
}

.home-page #projets .section-title::after {
  content: none !important;
  display: none !important;
}

.home-page #projets .section-intro {
  max-width: 470px !important;
  margin: 0 0 .35em !important;
  padding-top: 22px !important;
  border-top: 1px solid var(--home-line) !important;
  color: rgba(17, 19, 15, .68) !important;
  font-family: var(--font-body) !important;
  font-size: clamp(15px, 1.15vw, 19px) !important;
  font-weight: 400 !important;
  line-height: 1.55 !important;
  letter-spacing: 0 !important;
}

.home-page #projets .projects-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: clamp(34px, 5vw, 84px) clamp(24px, 4vw, 68px) !important;
  align-items: start !important;
}

.home-page #projets .project-card,
.home-page #projets .project-card:nth-child(even) {
  position: relative !important;
  display: grid !important;
  grid-template-rows: none !important;
  min-height: 0 !important;
  height: auto !important;
  width: 100% !important;
  max-width: none !important;
  justify-self: stretch !important;
  aspect-ratio: 4 / 3 !important;
  overflow: hidden !important;
  isolation: isolate !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #111 !important;
  box-shadow: none !important;
  transform: none !important;
  opacity: 0 !important;
  transition:
    opacity var(--home-cinematic) var(--home-enter),
    transform var(--home-cinematic) var(--home-enter) !important;
}

.home-page #projets .project-card:nth-child(even) {
  margin-top: clamp(66px, 9vw, 142px) !important;
}

.home-page #projets .project-card.is-visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

.home-page #projets .project-card:not(.is-visible) {
  transform: translateY(36px) !important;
}

.home-page #projets .project-card::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  border: 0 !important;
  background: linear-gradient(180deg, transparent 35%, rgba(4, 5, 4, .2) 58%, rgba(4, 5, 4, .94) 100%) !important;
  transition: background var(--home-standard) ease !important;
  pointer-events: none !important;
}

.home-page #projets .project-card::after {
  content: "" !important;
  position: absolute !important;
  inset: 14px !important;
  z-index: 3 !important;
  border: 1px solid rgba(255, 250, 239, .32) !important;
  opacity: 0 !important;
  transform: scale(.985) !important;
  transition: opacity var(--home-standard) ease, transform var(--home-standard) var(--home-enter) !important;
  pointer-events: none !important;
}

.home-page #projets .project-card img,
.home-page #projets .project-card--girls img,
.home-page #projets .project-card--songe img,
.home-page #projets .project-card--premier img,
.home-page #projets .project-card--hiero img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  aspect-ratio: auto !important;
  object-fit: cover !important;
  object-position: center !important;
  filter: saturate(.82) contrast(1.03) brightness(.88) !important;
  transform: scale(1.01) !important;
  transition:
    filter 800ms var(--home-enter),
    transform 900ms var(--home-enter) !important;
}

.home-page #projets .project-card--girls img {
  object-position: 58% 50% !important;
}

.home-page #projets .project-card--premier img {
  object-position: 50% 46% !important;
}

.home-page #projets .project-card-body,
.home-page #projets .project-card--girls .project-card-body,
.home-page #projets .project-card--songe .project-card-body,
.home-page #projets .project-card--premier .project-card-body,
.home-page #projets .project-card--hiero .project-card-body {
  position: absolute !important;
  inset: auto 0 0 !important;
  z-index: 2 !important;
  align-self: end !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(190px, .7fr) !important;
  gap: 10px 24px !important;
  min-height: 0 !important;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  padding: clamp(24px, 3vw, 48px) !important;
  border: 0 !important;
  background: transparent !important;
  color: #fff9ee !important;
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

.home-page #projets .project-card .project-type {
  position: static !important;
  inset: auto !important;
  grid-column: 1 / -1 !important;
  margin: 0 !important;
  color: rgba(255, 249, 238, .7) !important;
  font-size: 8px !important;
  font-weight: 400 !important;
  letter-spacing: .25em !important;
  opacity: 1 !important;
  transform: none !important;
}

.home-page #projets .project-card h3,
.home-page #projets .project-card--hiero h3,
.home-page #projets .project-card--songe h3,
.home-page #projets .project-card--premier h3 {
  position: static !important;
  inset: auto !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  color: #fff9ee !important;
  font-size: clamp(31px, 3.2vw, 57px) !important;
  font-style: italic !important;
  font-weight: 400 !important;
  line-height: .92 !important;
  letter-spacing: -.045em !important;
  text-transform: none !important;
  white-space: normal !important;
  text-wrap: balance !important;
  opacity: 1 !important;
  transform: none !important;
}

.home-page #projets .project-card p {
  position: static !important;
  inset: auto !important;
  width: auto !important;
  max-width: none !important;
  white-space: normal !important;
  overflow-wrap: break-word !important;
  align-self: end !important;
  margin: 0 !important;
  color: rgba(255, 249, 238, .76) !important;
  font-size: clamp(12px, .85vw, 14px) !important;
  font-weight: 400 !important;
  line-height: 1.48 !important;
  opacity: 1 !important;
  transform: translateY(6px) !important;
  transition: opacity var(--home-standard) ease, transform var(--home-standard) var(--home-enter) !important;
}

@media (hover: hover) and (pointer: fine) {
  .home-page #projets .project-card p {
    opacity: .82 !important;
  }

  .home-page #projets .project-card:is(:hover, :focus-visible) p {
    opacity: 1 !important;
    transform: translateY(0) !important;
  }

  .home-page #projets .project-card:is(:hover, :focus-visible)::before {
    background: linear-gradient(180deg, rgba(4, 5, 4, .04) 22%, rgba(4, 5, 4, .28) 50%, rgba(4, 5, 4, .96) 100%) !important;
  }

  .home-page #projets .project-card:is(:hover, :focus-visible)::after {
    opacity: 1 !important;
    transform: scale(1) !important;
  }

  .home-page #projets .project-card:is(:hover, :focus-visible) img {
    filter: saturate(1) contrast(1.04) brightness(.94) !important;
    transform: scale(1.055) !important;
  }
}

/* Tablette */
@media (max-width: 980px) {
  .home-page .hero-content {
    padding-bottom: clamp(126px, 17vh, 170px) !important;
  }

  .home-page .hero-title {
    width: min(100%, 840px) !important;
    font-size: clamp(70px, 12vw, 118px) !important;
  }

  .home-page #projets .section-head,
  .home-page #projets .section-head--centered {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }

  .home-page #projets .section-intro {
    max-width: 560px !important;
    margin: 0 !important;
  }

  .home-page #projets .projects-grid {
    gap: 28px 22px !important;
  }

  .home-page #projets .project-card,
  .home-page #projets .project-card:nth-child(even) {
    aspect-ratio: 4 / 4.45 !important;
  }

  .home-page #projets .project-card:nth-child(even) {
    margin-top: 70px !important;
  }

  .home-page #projets .project-card-body,
  .home-page #projets .project-card--girls .project-card-body,
  .home-page #projets .project-card--songe .project-card-body,
  .home-page #projets .project-card--premier .project-card-body,
  .home-page #projets .project-card--hiero .project-card-body {
    grid-template-columns: 1fr !important;
  }
}

/* Mobile : une composition propre, sans dépendance au survol. */
@media (max-width: 780px) {
  .home-page {
    --home-gutter: clamp(18px, 5vw, 26px);
  }

  .home-page .header-row {
    min-height: 72px !important;
  }

  .home-page .brand-text {
    font-size: 21px !important;
  }

  .home-page .menu-toggle {
    display: inline-flex !important;
    min-width: 52px !important;
    min-height: 44px !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 8px 10px !important;
    border: 1px solid rgba(248, 242, 230, .4) !important;
    border-radius: 0 !important;
    color: rgba(248, 242, 230, .9) !important;
    background: rgba(5, 7, 5, .18) !important;
  }

  .home-page .site-nav {
    top: calc(100% + 8px) !important;
    right: 0 !important;
    min-width: min(260px, calc(100vw - 2 * var(--home-gutter))) !important;
    padding: 12px 20px !important;
    border: 1px solid rgba(248, 242, 230, .16) !important;
    background: rgba(9, 12, 9, .96) !important;
    box-shadow: 0 22px 60px rgba(0, 0, 0, .3) !important;
    -webkit-backdrop-filter: blur(18px) !important;
    backdrop-filter: blur(18px) !important;
  }

  .home-page .site-nav a {
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
  }

  .home-page .hero {
    min-height: 100svh !important;
  }

  .home-page .hero::before {
    background:
      linear-gradient(90deg, rgba(4, 6, 4, .46), rgba(4, 6, 4, .06)),
      linear-gradient(180deg, rgba(4, 6, 4, .18) 30%, rgba(4, 6, 4, .92) 100%) !important;
  }

  .home-page .hero-video {
    object-position: 54% center !important;
  }

  .home-page .hero-content {
    padding: 116px 0 clamp(120px, 18vh, 160px) !important;
  }

  .home-page .hero-title {
    width: 100% !important;
    font-size: clamp(57px, 18.5vw, 88px) !important;
    line-height: .8 !important;
    letter-spacing: -.06em !important;
  }

  .home-page .hero-title .hero-word--film {
    margin-left: clamp(22px, 11vw, 46px) !important;
  }

  .home-page .hero-title .hero-word--performance {
    margin-left: 0 !important;
    font-size: .7em !important;
    letter-spacing: -.07em !important;
  }

  .home-page .hero-forest {
    height: 120px !important;
  }

  .home-page #projets {
    padding: 92px 0 100px !important;
  }

  .home-page #projets .section-head,
  .home-page #projets .section-head--centered {
    margin-bottom: 54px !important;
  }

  .home-page #projets .section-title {
    font-size: clamp(62px, 21vw, 92px) !important;
  }

  .home-page #projets .section-intro {
    padding-top: 18px !important;
    font-size: 15px !important;
  }

  .home-page #projets .projects-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  .home-page #projets .project-card,
  .home-page #projets .project-card:nth-child(even) {
    aspect-ratio: 4 / 5.1 !important;
    margin-top: 0 !important;
  }

  .home-page #projets .project-card-body,
  .home-page #projets .project-card--girls .project-card-body,
  .home-page #projets .project-card--songe .project-card-body,
  .home-page #projets .project-card--premier .project-card-body,
  .home-page #projets .project-card--hiero .project-card-body {
    gap: 9px !important;
    padding: 26px 24px !important;
  }

  .home-page #projets .project-card h3,
  .home-page #projets .project-card--hiero h3,
  .home-page #projets .project-card--songe h3,
  .home-page #projets .project-card--premier h3 {
    font-size: clamp(35px, 11vw, 50px) !important;
  }

  .home-page #projets .project-card p {
    font-size: 13px !important;
    line-height: 1.5 !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-page .hero-media {
    transform: none !important;
    will-change: auto !important;
  }

  .home-page .hero-title .hero-word,
  .home-page #projets .project-card,
  .home-page #projets .project-card:not(.is-visible) {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition-duration: .01ms !important;
  }

  .home-page #projets .project-card img,
  .home-page #projets .project-card::after,
  .home-page .site-nav a::after {
    transition: none !important;
  }
}

/* Accueil autonome : un seul écran, sans bandeau ni contenu sous le hero. */
.home-page {
  height: 100svh !important;
  min-height: 100svh !important;
  overflow: hidden !important;
  background: #050705 !important;
}

.home-page main {
  height: 100svh !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

.home-page .site-header,
.home-page .site-header.is-scrolled {
  background: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

.home-page .hero {
  height: 100svh !important;
  min-height: 100svh !important;
  max-height: 100svh !important;
}

.home-page .hero::before {
  background: linear-gradient(
    90deg,
    rgba(4, 6, 4, .62) 0%,
    rgba(4, 6, 4, .22) 42%,
    transparent 70%
  ) !important;
}

.home-page .hero::after,
.home-page .hero-forest {
  content: none !important;
  display: none !important;
}

.home-page .hero-media {
  --hero-shift: 0px !important;
  transform: scale(1.025) !important;
}

.home-page .hero-title .hero-word,
.home-page .hero-title .hero-word--theatre,
.home-page .hero-title .hero-word--film,
.home-page .hero-title .hero-word--performance {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}

/* Nouvelle signature du hero : la marque remplace les disciplines. */
.home-page .header-row {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
}

.home-page .header-right {
  margin-left: auto !important;
  justify-self: auto !important;
}

.home-page .site-nav a::after,
.home-page .site-nav a:hover::after,
.home-page .site-nav a:focus-visible::after {
  content: none !important;
  display: none !important;
  transform: none !important;
}

.home-page .site-nav a:hover,
.home-page .site-nav a:focus-visible {
  border-color: transparent !important;
  color: #e0a62f !important;
  text-decoration: none !important;
}

.home-page .site-nav a,
.home-page .site-nav a:visited,
.home-page .site-nav a:hover,
.home-page .site-nav a:focus-visible {
  display: inline-flex !important;
  min-width: 0 !important;
  min-height: 0 !important;
  align-items: center !important;
  padding: 10px 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-family: "Climate Crisis", var(--font-title) !important;
  font-size: clamp(9px, .72vw, 12px) !important;
  font-style: normal !important;
  font-weight: 400 !important;
  font-variation-settings: "YEAR" 1988 !important;
  font-synthesis: none !important;
  line-height: 1 !important;
  letter-spacing: .06em !important;
  text-decoration: none !important;
  text-shadow: none !important;
  text-transform: uppercase !important;
  transform: none !important;
  transition: color 180ms ease !important;
}

.home-page .site-nav a,
.home-page .site-nav a:visited {
  color: #fffaf0 !important;
}

.home-page .site-nav a:hover,
.home-page .site-nav a:focus-visible {
  color: #e0a62f !important;
}

.home-page .hero-title--brand {
  display: flex !important;
  width: min(66.666vw, 1040px) !important;
  max-width: 66.666vw !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: clamp(4px, .5vw, 8px) !important;
  font-style: normal !important;
  line-height: 1 !important;
  letter-spacing: normal !important;
}

.home-page .hero-title--brand .hero-brand-name {
  display: inline-flex !important;
  flex-wrap: nowrap !important;
  margin: 0 !important;
  color: #e0a62f !important;
  opacity: .94;
  font-family: "Climate Crisis", var(--font-title) !important;
  font-size: clamp(48px, 6.5vw, 108px) !important;
  font-style: normal !important;
  font-weight: 400 !important;
  font-variation-settings: "YEAR" 1988 !important;
  line-height: .84 !important;
  letter-spacing: -.025em !important;
  text-transform: uppercase !important;
  text-shadow: 0 8px 34px rgba(0, 0, 0, .3) !important;
  white-space: nowrap !important;
}

.home-page .hero-title--brand .hero-brand-subtitle {
  display: block !important;
  margin: 0 0 0 .04em !important;
  color: #fffaf0 !important;
  opacity: .92;
  font-family: "Climate Crisis", var(--font-title) !important;
  font-size: clamp(17px, 2vw, 31px) !important;
  font-style: normal !important;
  font-weight: 400 !important;
  font-variation-settings: "YEAR" 1988 !important;
  line-height: 1 !important;
  letter-spacing: .08em !important;
  text-transform: lowercase !important;
  text-shadow: 0 4px 22px rgba(0, 0, 0, .42) !important;
}

.home-page .hero-brand-name,
.home-page .hero-brand-subtitle {
  position: relative !important;
  isolation: isolate;
}

.home-page .hero-letter {
  display: inline-block;
}

.home-page .hero-title--brand .hero-brand-name .hero-letter {
  color: inherit !important;
  font: inherit !important;
  font-variation-settings: inherit !important;
  letter-spacing: inherit !important;
  line-height: inherit !important;
  text-shadow: inherit !important;
  text-transform: inherit !important;
}

.home-page.has-title-draw .hero-brand-name .hero-letter {
  opacity: 0;
  transform: translate3d(0, .14em, 0);
  will-change: transform, opacity;
  animation: home-brand-letter-in 520ms cubic-bezier(.2, .78, .24, 1) forwards;
}

.home-page.has-title-draw .hero-brand-name .hero-letter:nth-child(2) { animation-delay: 58ms; }
.home-page.has-title-draw .hero-brand-name .hero-letter:nth-child(3) { animation-delay: 116ms; }
.home-page.has-title-draw .hero-brand-name .hero-letter:nth-child(4) { animation-delay: 174ms; }
.home-page.has-title-draw .hero-brand-name .hero-letter:nth-child(5) { animation-delay: 232ms; }
.home-page.has-title-draw .hero-brand-name .hero-letter:nth-child(6) { animation-delay: 290ms; }
.home-page.has-title-draw .hero-brand-name .hero-letter:nth-child(7) { animation-delay: 348ms; }
.home-page.has-title-draw .hero-brand-name .hero-letter:nth-child(8) { animation-delay: 406ms; }
.home-page.has-title-draw .hero-brand-name .hero-letter:nth-child(9) { animation-delay: 464ms; }
.home-page.has-title-draw .hero-brand-name .hero-letter:nth-child(10) { animation-delay: 522ms; }

.home-page.has-title-draw .hero-brand-subtitle {
  opacity: 0;
  transform: translate3d(0, .16em, 0);
  will-change: transform, opacity;
  animation: home-brand-subtitle-in 580ms cubic-bezier(.2, .78, .24, 1) 650ms forwards;
}

@keyframes home-brand-letter-in {
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes home-brand-subtitle-in {
  to {
    opacity: .92;
    transform: translate3d(0, 0, 0);
  }
}

@media (max-width: 780px) {
  .home-page .hero-title--brand {
    width: 66.666vw !important;
    max-width: 66.666vw !important;
    gap: 4px !important;
  }

  .home-page .hero-title--brand .hero-brand-name {
    font-size: clamp(26px, 7.6vw, 56px) !important;
    line-height: .88 !important;
    letter-spacing: -.02em !important;
  }

  .home-page .hero-title--brand .hero-brand-subtitle {
    font-size: clamp(14px, 4vw, 19px) !important;
    letter-spacing: .06em !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-page .hero-video {
    transition: none;
  }

  .home-page.has-title-draw .hero-brand-name .hero-letter,
  .home-page.has-title-draw .hero-brand-subtitle {
    opacity: 1;
    transform: none;
    animation: none;
  }

  .home-page.has-title-draw .hero-brand-subtitle {
    opacity: .92;
  }
}