/* Reorganized from the saved Web Felix patches. Exposure font file pending. */
#felix-home {
  width: 100% !important;
  max-width: none;
  margin-inline: 0 !important;
  padding-inline: 0 !important;
  overflow: clip !important;
}

/* Keep all Home project covers at the original card proportions. */
#felix-home #work .fh-work-grid > a > div:first-child {
  height: clamp(300px, 34vw, 520px) !important;
  background-position: center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
}

/* Berlin Fashion Week uses the corrected uploaded cover. */
#felix-home #work a[href*="berlin-fashion-week"] > div:first-child {
  background-image: url("https://felixdigitaldesigner.com/wp-content/uploads/2026/09/berlinfashionweek_cover-1.webp") !important;
}

@media (max-width: 760px) {
#felix-home .fh-work-grid {
    flex-direction: column;
  }
}

/* Verified Home hero composition from master. */


.hero {
  position: relative;
  min-height: calc(100svh - 79px);
  padding: clamp(52px, 9vw, 120px) clamp(20px, 4vw, 64px) 44px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: var(--pastel);
}
.hero-kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.status-dot {
  width: 9px;
  height: 9px;
  background: var(--red);
  border-radius: 50%;
  box-shadow: 0 0 0 5px rgba(239, 66, 76, 0.13);
}
.hero h1 {
  position: relative;
  z-index: 2;
  margin: 5vh 0;
  font-size: clamp(62px, 10.2vw, 164px);
  letter-spacing: -0.065em;
}
.hero h1 em { font-style: italic; font-weight: 400; }
.hero h1 span { color: var(--blue); }
.hero-bottom { position: relative; z-index: 2; display: flex; align-items: end; justify-content: space-between; gap: 40px; }
.hero-bottom p {
  max-width: 560px;
  margin: 0 0 12px;
  font-size: clamp(16px, 1.7vw, 18px);
  font-weight: 300;
  line-height: 1.55;
}
.hero-orbit {
  position: absolute;
  right: 62px;
  top: 14%;
  width: 280px;
  height: 280px;
  border: 1px solid rgba(40, 191, 219, 0.55);
  border-radius: 50%;
  animation: spin 32s linear infinite;
}
.hero-orbit span { position: absolute; padding: 5px 9px; background: var(--pastel); color: var(--dark); font-size: 13px; font-weight: 600; }
.hero-orbit span:nth-child(1) { left: 10px; top: 34px; }
.hero-orbit span:nth-child(2) { right: -10px; top: 130px; }
.hero-orbit span:nth-child(3) { left: 90px; bottom: -4px; }
@media (max-width: 760px) {
  .hero { min-height: calc(92svh - 70px); padding-top: 52px; }
  .hero-orbit { width: 190px; height: 190px; right: -90px; top: 8%; }
  .hero-orbit span:nth-child(2), .hero-orbit span:nth-child(3) { display: none; }
  .hero-bottom { align-items: end; }
  .hero-bottom p { max-width: 68%; }
}
@media (max-width: 480px) {
  .hero h1 { font-size: clamp(54px, 17vw, 76px); }
  .hero-bottom p { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-orbit { animation: none; }
}
@keyframes spin { to { transform: rotate(360deg); } }