.framer-project-card :is(.project-lighthouse-desktop, .project-lighthouse-tablet, .project-lighthouse-phone) :is(.f-EO43GQvYU, .f-KfZZuIyZp) {
  transition: background-color .18s ease, color .18s ease;
}
.framer-project-card:hover :is(.project-lighthouse-desktop, .project-lighthouse-tablet, .project-lighthouse-phone) .f-EO43GQvYU {
  background: #fff;
  --node-border: 1px solid #ffc928;
}
.framer-project-card:hover :is(.project-lighthouse-desktop, .project-lighthouse-tablet, .project-lighthouse-phone) .f-KfZZuIyZp {
  color: #ffc928;
}

/* Keep the desktop illustration together as the card grows beyond its 960px master. */
.project-lighthouse-desktop .f-oUdWoM2ou {
  left: calc(100% - 552.5px);
}
.project-lighthouse-desktop .f-pze1e7IwD {
  left: calc(100% - 553.5px);
}
.project-lighthouse-desktop .f-OLjevnm1o,
.project-lighthouse-desktop .f-hBLeUw2Ys {
  left: calc(100% - 427.5px);
}
.project-lighthouse-desktop .f-mM7MY3MEJ {
  left: calc(100% - 460px);
}
.project-lighthouse-desktop:is(:hover, .is-active) .f-mM7MY3MEJ,
.framer-project-card:focus-visible .project-lighthouse-desktop .f-mM7MY3MEJ {
  left: calc(-291px - var(--project-card-width, 960px) * .0239583333);
  width: calc(var(--project-card-width, 960px) * 1.0447916667);
}

/* Keep a solid phone underneath the single fading interface layer. */
.framer-project-card .project-lighthouse-desktop .project-node:is(.f-oUdWoM2ou, .f-OLjevnm1o, .f-ytPwLFaGX, .f-A2O1z49ot, .f-Rev8L6aUI, .f-rA6hJrqVU) {
  opacity: 1;
  visibility: visible;
  transition: none;
}
.framer-project-card .project-lighthouse-desktop .project-node.f-ytPwLFaGX {
  background-image: url("./selected-projects/4asSqDFBe4gQhXKqSerGZrbQsQ.png");
}
.framer-project-card .project-lighthouse-desktop .project-node.f-A2O1z49ot {
  background-image: url("./selected-projects/Ml4L5ZApGUYrPQaxrwAFTZ8W8jw.png");
}
.framer-project-card .project-lighthouse-desktop .project-node:is(.f-Rev8L6aUI, .f-rA6hJrqVU) {
  background-image: url("./selected-projects/za89hDhO3s3x8bS5lV34G3I.png");
}
.framer-project-card .project-lighthouse-desktop .project-node:is(.f-pze1e7IwD, .f-hBLeUw2Ys) {
  opacity: 1;
  visibility: visible;
  transition: none;
}
.framer-project-card .project-lighthouse-desktop .project-node.f-pze1e7IwD {
  left: calc(100% - 552.5px);
}
.framer-project-card .project-lighthouse-desktop .project-node:is(.f-ZQorPBWG9, .f-FvP7Ld_YE) {
  opacity: 0;
  visibility: visible;
  transition: opacity .35s ease;
}
.framer-project-card .project-lighthouse-desktop:is(:hover, .is-active) .project-node:is(.f-ZQorPBWG9, .f-FvP7Ld_YE),
.framer-project-card:focus-visible .project-lighthouse-desktop .project-node:is(.f-ZQorPBWG9, .f-FvP7Ld_YE) {
  opacity: 1;
}
.framer-project-card .project-lighthouse-desktop .project-node:is(.f-vA1_Z_EFP, .f-Rv3j7xTy3) {
  opacity: 1;
  visibility: visible;
  transition: none;
  z-index: 1;
}

/* Keep the scene, foreground car, and rotated fade in the same right-aligned space. */
.project-hhi-desktop .project-mask-space {
  position: absolute;
  right: 0;
  top: 0;
  width: 960px;
  height: 300px;
  pointer-events: none;
}

/* Keep the complete desktop laptop shifted equally in every interaction state. */
.project-southern-desktop .f-lDC1RvMN1 {
  transform: translateX(96px);
}

/* The phones exchange high and low positions without shifting horizontally. */
.project-nalu-desktop .f-vEbs4xjTD {
  right: 154px;
  top: calc(100% - 237.27px);
  bottom: auto;
  transform: none;
}
.project-nalu-desktop .f-ukKuCQCkl {
  right: 275px;
  top: 24px;
  bottom: auto;
  transform: none;
}
.project-nalu-desktop:is(:hover, .is-active) .f-vEbs4xjTD,
.framer-project-card:focus-visible .project-nalu-desktop .f-vEbs4xjTD {
  top: 24px;
  bottom: auto;
  transform: none;
}
.project-nalu-desktop:is(:hover, .is-active) .f-ukKuCQCkl,
.framer-project-card:focus-visible .project-nalu-desktop .f-ukKuCQCkl {
  top: calc(100% - 237.27px);
  bottom: auto;
  transform: none;
}

.project-hhi-desktop .project-stage,
.project-nalu-desktop .project-stage {
  --project-duration: .7s;
}

/* The mobile laptop is one fixed-proportion assembly, including its video screen. */
.project-southern-phone .f-lDC1RvMN1 {
  left: auto;
  right: 13.22px;
  bottom: 16.4px;
  width: 243.78px;
  height: 147.86px;
}
.project-southern-phone .f-jbTXAi2nD {
  inset: 0;
  width: 100%;
  height: 100%;
}
.project-southern-phone .f-EQBWhI1ZD {
  left: 22px;
  bottom: 11px;
}
.project-southern-phone .f-dJEPIPEOE {
  left: 20px;
  bottom: 16.5px;
}
.project-hhi-phone .f-WjUbRsjJK {
  background-size: contain;
}
.project-southern-phone .f-OHtJKsw6I {
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Match Southern Crafted's mobile copy and arrow alignment across all four cards. */
.framer-project-card .project-phone .project-stage {
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 32px;
  padding: 27px;
}
.framer-project-card .project-phone [data-layer="Card Copy"] {
  flex: 1 0 0px;
  width: 0;
  min-width: 0;
  gap: 8px;
}
.framer-project-card .project-phone [data-layer="Subtitle"] {
  width: max-content;
  max-width: calc(100% + 64px);
  white-space: normal;
}
.project-nalu-phone [data-layer="Subtitle"] {
  font-size: 14px;
}
.framer-project-card .project-phone .project-stage > :has(> .project-arrow) {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
}