/* Figma 626:177: 1728px canvas; 80px outer margin; 524/1044 columns.
   Loaded only by the homepage so Webflow's shared pages stay independent. */

.home {
  --home-outer: min(4.62962963vw, 80px);
  --home-inset: clamp(24px, calc(8.333333vw - 64px), 80px);
  --home-columns: minmax(0, 524fr) minmax(0, 1044fr);
}

.home-layout {
  display: grid;
  grid-template-columns: var(--home-columns);
  max-width: 1568px;
  margin: 0 auto;
  width: calc(100% - var(--home-outer) * 2);
  padding: 160px 0 384px;
}
.home .home-layout .section {
  display: block;
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
}
.home .home-layout .hero {
  padding: 0 var(--home-inset);
}
.home .hero > .content {
  position: sticky;
  top: 160px;
  width: 100%;
  margin: 0;
}
.home .hero .wrapper { text-align: left; }
.home .hero .intro-wrap:not(.fixed) { gap: 24px; }
.home .intro-wrap,
.home .intro-wrap.fixed {
  gap: 0;
  height: auto;
  padding: 0;
}
.home .hero .display-xl,
.home .hero .typed-words {
  min-height: 24px;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  letter-spacing: -.5px;
}
.home .handtitlewrap { align-items: center; }
.home .hero .typed-words {
  position: relative;
  flex: none;
  width: max-content;
  max-width: 100%;
  height: 24px;
  white-space: nowrap;
}
.home .handlottie {
  position: static;
  width: 24px;
  height: 24px;
  margin: 0 0 0 8px;
}
.home .text-lg,
.home .text-sm,
.home .text-link-l {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 0;
}
.home .text-link-l { display: inline; }
.home .hero .social-icons-wrapper.desktop {
  display: flex;
  justify-content: flex-start;
  gap: 16px;
  margin-top: 64px;
  padding: 0;
}
.home .hero .social-icon { width: 24px; height: 24px; }
.home .hero .social-link { padding: 0; }
.home .home-projects { min-width: 0; padding: 0 var(--home-inset); }
.home .content.card-list { gap: 80px; }
.home .project-card,
.home .project-card:hover,
.home .project-card.locked {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  gap: 32px;
  min-height: 200px;
  height: auto;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
}
.home .project-card .cardcontentwrapper {
  flex: 0 1 391px;
  align-self: stretch !important;
  min-width: 0;
  width: auto;
  max-width: 391px;
  padding: 16px 0;
}
.home .projecttitlewrapper { gap: 8px; margin-bottom: 4px; }
.home .project-card .display-sm {
  font-size: 18px;
  font-weight: 600;
  line-height: 24px;
  letter-spacing: -.5px;
}
.home .project-description-wrapper { gap: 16px; padding: 0; }
.home .project-description-wrapper p { width: 100%; }
.home .tags-wrapper { gap: 4px; }
.home .tag { padding: 5px 10px; border-radius: 2px; }
.home .tag-label { font-size: 10px; line-height: 14px; letter-spacing: 1.3px; }
.home .lottiewrapper {
  flex: 0 0 320px;
  width: 320px;
  height: 200px;
  overflow: hidden;
  border: 1px solid var(--neutral-70);
  border-radius: 8px;
}
.home .cardlottie { width: 100%; height: 100%; margin: 0; }
.home .fader { display: none; }

/* One shared highlight moves between rows without shifting their content. */
.home .content.card-list { position: relative; isolation: isolate; --highlight-inset: 32px; }
.home .card-list > .card-link-wrapper { position: relative; }
.home .project-highlight {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  pointer-events: none;
  border-radius: 4px;
  background: rgb(41 41 41 / 30%);
  opacity: 0;
  transition: opacity 240ms ease-out;
}
.home .project-highlight.is-active {
  opacity: 1;
  transition: transform 500ms cubic-bezier(.22, 1, .36, 1),
    width 500ms cubic-bezier(.22, 1, .36, 1),
    height 500ms cubic-bezier(.22, 1, .36, 1),
    opacity 240ms ease-out;
}
.home .card-link-wrapper:focus-visible {
  outline: 2px solid #d4d4d4;
  outline-offset: 8px;
  border-radius: 4px;
}

.home .coffee-banner {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 80px 0;
  padding: 40px 44px;
  background: #262626;
}
.home .coffee-banner h2,
.home .section-title-wrapper .display-md {
  font-size: 21px;
  font-weight: 600;
  line-height: 28px;
  letter-spacing: -.5px;
}
.home .coffee-banner h2 { color: #f5f5f5; }
.home .coffee-banner p { color: #d4d4d4; font-size: 16px; line-height: 24px; }
.home .coffee-links { display: flex; gap: 20px; padding-top: 16px; }
.home .coffee-links a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #d4d4d4;
  font-size: 16px;
  line-height: 20px;
  text-decoration: none;
}
.home .coffee-links img { flex: none; width: 20px; height: 20px; }
.home .coffee-links a:hover { opacity: .7; }
.home .content.cards-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 382px));
  grid-template-rows: auto;
  gap: 8px;
}
.home .cards-grid .section-title-wrapper {
  grid-area: auto / 1 / auto / -1 !important;
  margin: 0 0 32px;
}
.home .section-title-wrapper .display-md { margin-bottom: 8px; }
.home .small-card-list-column { display: contents; }
.home .cards-grid .card-link-wrapper { grid-area: auto !important; }
.home .small-project-card,
.home .small-project-card:hover,
.home .small-project-card.locked,
.home .small-project-card.mobile-reposition,
.home .small-project-card.locked.mobilereposition {
  gap: 24px;
  margin: 0;
  padding: 0 0 40px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  box-shadow: none;
  transform: none;
  text-align: left;
}
.home .image-2 { width: 100%; height: 200px; border-radius: 4px; }
.home .small-card-content-wrapper { gap: 4px; padding: 0; }
.home .small-card-content-wrapper .projecttitlewrapper { margin: 0; }
.home .small-project-card .display-sm { font-size: 18px; font-weight: 500; line-height: 28px; letter-spacing: -.5px; }
.home .small-project-image-frame {
  width: 100%;
  height: 200px;
  flex: none;
  overflow: hidden;
  border-radius: 4px;
}
.home .small-project-image-frame .image-2 {
  display: block;
  height: 100%;
  border-radius: 0;
  transition: transform 350ms ease-out;
}
.home .cards-grid .card-link-wrapper:focus-visible .image-2 { transform: scale(1.04); }
@media (hover: hover) and (pointer: fine) {
  .home .cards-grid .card-link-wrapper:hover .image-2 { transform: scale(1.04); }
}
@media (prefers-reduced-motion: reduce) {
  .home .project-highlight,
  .home .project-highlight.is-active,
  .home .small-project-image-frame .image-2 { transition: none; }
  .home .cards-grid .card-link-wrapper:is(:hover, :focus-visible) .image-2 { transform: none; }
}
.home .section.footer { display: block; padding: 0; }
.home .section.footer > .content {
  display: grid;
  grid-template-columns: var(--home-columns);
  width: calc(100% - var(--home-outer) * 2);
  max-width: 1568px;
  margin: 0 auto;
  padding: 0;
}
.home .footer-link-wrapper {
  grid-column: 2 !important;
  margin: 0;
  padding: 0 var(--home-inset) 80px;
}
.home .disclaimer-wrapper {
  display: block;
  border: 0;
  background-color: var(--neutral-80);
  padding: 16px 0;
}
.home .disaclaimer {
  color: var(--neutral-40);
  width: calc(100% - var(--home-outer) * 2);
  max-width: 1568px;
  margin: 0 auto;
  padding: 0 var(--home-inset);
  font-family: inherit;
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  letter-spacing: 0;
}

@media (max-width: 1439px) and (min-width: 992px) {
  .home .lottiewrapper { flex-basis: 40%; width: 40%; }
}
@media (max-width: 991px) {
  .home { --home-outer: 32px; --home-inset: 0px; }
  .home-layout { display: block; padding: 64px 0 192px; }
  .home .hero > .content { position: static; }
  .home .hero .wrapper { max-width: 480px; }
  .home .hero .social-icons-wrapper.desktop { margin-top: 32px; }
  .home .home-projects { margin-top: 128px; }
  .home .content.card-list { --highlight-inset: 16px; }
  .home .project-card .cardcontentwrapper { flex: 1; }
  .home .lottiewrapper { flex-basis: 40%; width: 40%; }
  .home .section.footer > .content { display: block; padding: 0; }
  .home .disaclaimer { padding: 0; }
}
@media (max-width: 599px) {
  .home { --home-outer: 24px; }
  .home .project-card,
  .home .project-card:hover,
  .home .project-card.locked,
  .home .project-card.locked:hover { flex-direction: column; gap: 16px; }
  .home .project-card .cardcontentwrapper { max-width: none; padding: 0; }
  .home .lottiewrapper { flex: none; width: 100%; }
  .home .coffee-banner { padding: 32px 24px; }
  .home .content.cards-grid { grid-template-columns: minmax(0, 1fr); }
  .home .disclaimer-wrapper { margin: 0; border-radius: 0; bottom: auto; }
  .home .disaclaimer { font-size: 12px; line-height: 16px; }
}