/* ------------------------------------------------------------------
   Homepage case-study block.

   Every rule is scoped to #projects-applications, an element this
   project adds next to the Framer section it replaces, so nothing here
   can restyle the Framer page itself. The untouched Framer section is
   hidden with the attribute selector at the end of this file.
------------------------------------------------------------------- */

#projects-applications {
  padding: 96px 0;
  background: #ffffff;
}

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

#projects-applications .aec-wrap {
  width: 100%;
  max-width: 1044px;
  margin: 0 auto;
  padding: 0 24px;
}

#projects-applications .aec-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px 32px;
  margin-bottom: 30px;
}

#projects-applications .aec-eyebrow {
  margin: 0 0 14px;
  color: #6E7178;
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.13em;
  line-height: 1.5;
  text-transform: uppercase;
}

#projects-applications .aec-heading {
  margin: 0;
  max-width: 20ch;
  color: #1C1E21;
  font-family: "Hedvig Letters Serif", "Times New Roman", serif;
  font-size: clamp(30px, 3.4vw, 44px);
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1.05;
}

#projects-applications .aec-all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  border-bottom: 1px solid #1C1E21;
  color: #1C1E21;
  font-family: "Geist", "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: border-color 300ms ease, gap 300ms ease;
}

#projects-applications .aec-all:hover,
#projects-applications .aec-all:focus-visible {
  gap: 12px;
  border-color: #6E7178;
}

/* ---------- bordered block ---------- */

#projects-applications .aec-block {
  border: 1px solid #F1EAE2;
  background: #ffffff;
}

#projects-applications .aec-feature {
  display: grid;
  gap: 16px;
  padding: 0 24px;
  color: inherit;
  text-decoration: none;
  transition: background-color 500ms ease-out;
}

@media (min-width: 1024px) {
  #projects-applications .aec-feature {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

@media (min-width: 1200px) {
  #projects-applications .aec-feature {
    padding: 0 64px;
  }
}

#projects-applications .aec-feature:hover,
#projects-applications .aec-feature:focus-visible {
  background: #F7F4F0;
}

#projects-applications .aec-feature:focus-visible,
#projects-applications .aec-minor:focus-visible,
#projects-applications .aec-all:focus-visible {
  outline: 2px solid #1C1E21;
  outline-offset: -3px;
}

#projects-applications .aec-feature-copy {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  padding-top: 28px;
}

@media (min-width: 1024px) {
  #projects-applications .aec-feature-copy {
    min-height: 380px;
    padding: 56px 0;
  }
}

#projects-applications .aec-brand {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  margin: 0;
  color: #1C1E21;
  font-family: "Geist", "Helvetica Neue", Arial, sans-serif;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.3;
}

#projects-applications .aec-brand span {
  color: #6E7178;
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

#projects-applications .aec-tags {
  display: block;
  margin-bottom: 12px;
  color: #6E7178;
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.11em;
  line-height: 1.7;
  text-transform: uppercase;
}

#projects-applications .aec-card-title {
  margin: 0 0 20px;
  color: #1C1E21;
  font-family: "Hedvig Letters Serif", "Times New Roman", serif;
  font-size: clamp(25px, 2.6vw, 33px);
  font-weight: 400;
  letter-spacing: -0.025em;
  line-height: 1.12;
}

#projects-applications .aec-sub {
  display: block;
  margin-top: 10px;
  color: rgba(28, 30, 33, 0.5);
  font-family: "Geist", "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: -0.005em;
  line-height: 1.55;
}

#projects-applications .aec-read {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  color: #1C1E21;
  font-family: "Geist", "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  font-weight: 500;
}

#projects-applications .aec-read svg,
#projects-applications .aec-all svg {
  flex: none;
  transition: transform 500ms ease-out;
}

#projects-applications .aec-feature:hover .aec-read svg,
#projects-applications .aec-feature:focus-visible .aec-read svg,
#projects-applications .aec-minor:hover .aec-read svg,
#projects-applications .aec-minor:focus-visible .aec-read svg {
  transform: translateX(4px);
}

#projects-applications .aec-media {
  padding: 28px 0;
}

@media (min-width: 1024px) {
  #projects-applications .aec-media {
    padding: 48px 0;
  }
}

#projects-applications .aec-frame {
  height: 100%;
  padding: 8px;
  border: 1px solid #F1EAE2;
  background: #ffffff;
}

#projects-applications .aec-frame img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 14 / 9;
  object-fit: cover;
  transition: transform 500ms ease-out;
}

#projects-applications .aec-feature:hover .aec-frame img,
#projects-applications .aec-feature:focus-visible .aec-frame img {
  transform: scale(1.04);
}

/* ---------- two-up row with dot gutters ---------- */

#projects-applications .aec-row {
  display: flex;
  border-top: 1px solid #F1EAE2;
}

#projects-applications .aec-dots {
  display: none;
  flex: none;
  width: 112px;
  background-image: radial-gradient(#6E7178 1px, transparent 1px);
  background-size: 10px 10px;
  opacity: 0.16;
}

@media (min-width: 1280px) {
  #projects-applications .aec-dots {
    display: block;
  }
}

#projects-applications .aec-grid {
  display: grid;
  flex: 1 1 auto;
  min-width: 0;
}

@media (min-width: 1024px) {
  #projects-applications .aec-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

#projects-applications .aec-minor {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  padding: 28px 24px;
  color: inherit;
  text-decoration: none;
  transition: background-color 500ms ease-out;
}

@media (min-width: 1024px) {
  #projects-applications .aec-minor {
    min-height: 320px;
    padding: 40px 32px;
  }
}

#projects-applications .aec-minor:hover,
#projects-applications .aec-minor:focus-visible {
  background: #F7F4F0;
}

#projects-applications .aec-minor + .aec-minor {
  border-top: 1px solid #F1EAE2;
}

@media (min-width: 1024px) {
  #projects-applications .aec-minor + .aec-minor {
    border-top: 0;
    border-left: 1px solid #F1EAE2;
  }
}

/* ---------- small screens ---------- */

@media (max-width: 809.98px) {
  #projects-applications {
    padding: 64px 0;
  }

  #projects-applications .aec-wrap {
    padding: 0 20px;
  }

  #projects-applications .aec-feature {
    padding: 0 16px;
  }

  #projects-applications .aec-feature-copy {
    gap: 20px;
    padding-top: 24px;
  }

  #projects-applications .aec-media {
    padding: 4px 0 20px;
  }

  #projects-applications .aec-brand {
    font-size: 18px;
  }

  #projects-applications .aec-brand span {
    flex: 1 0 100%;
    padding-top: 2px;
  }

  #projects-applications .aec-card-title {
    font-size: 24px;
    line-height: 1.18;
  }

  #projects-applications .aec-sub {
    margin-top: 9px;
    font-size: 14px;
    line-height: 1.5;
  }

  #projects-applications .aec-read {
    min-height: 46px;
  }

  #projects-applications .aec-minor {
    padding: 26px 16px 30px;
  }
}

@media (hover: none) {
  #projects-applications .aec-feature:hover,
  #projects-applications .aec-minor:hover {
    background: #ffffff;
  }

  #projects-applications .aec-feature:hover .aec-frame img {
    transform: none;
  }

  #projects-applications .aec-read svg {
    transform: none !important;
  }
}

/* The Framer section this block replaces stays in the DOM (Framer owns it)
   but is hidden, so its anchor and React node remain valid. */
#partners-projects[data-ae-hidden="true"] {
  display: none !important;
}

/* The Framer page stacks its own sections; keep this block in front of any
   later sibling section that would otherwise paint over it. */
#projects-applications {
  position: relative;
  z-index: 3;
  isolation: isolate;
}