/* Motion and visibility for the locally saved 21st page. */
body.header-on-light:not(.footer-active) #header > a:first-child span {
  color: #10362b !important;
  text-shadow: 0 1px 7px rgba(255, 255, 255, .45);
}
body.header-on-light:not(.footer-active) #header > a:first-child span span {
  color: #07965a !important;
}
#portfolio {
  background: linear-gradient(180deg, #c8f0dd 0%, #a8e5cb 46%, #69b78f 100%) !important;
  position: relative !important;
  z-index: 11 !important;
  isolation: isolate;
}
/* portfolio::before removed */
/* The existing scrubbed ellipse rises gently above the Projects section. */
#portfolio .circle-clip {
  display: block !important;
  height: 30vh !important;
  background: #c8f0dd !important;
  box-shadow: none !important;
}

/* Trim the narrow artwork edge visible at the top of the UrbanEase frame. */
#portfolio .portfolio-gallery-card:first-child > img {
  object-fit: cover !important;
  transform: scale(1.035) translateY(-1%) !important;
  transform-origin: center center;
}

/* Trim the narrow artwork edge visible at the top of the UrbanEase frame. */
#portfolio .portfolio-gallery-card:first-child > img {
  object-fit: cover !important;
  transform: scale(1.035) translateY(-1%) !important;
  transform-origin: center center;
}
#portfolio > .portfolio-sticky-container {
  background: linear-gradient(180deg, #c8f0dd 0%, #a8e5cb 65%, #69b78f 100%) !important;
}
#portfolio .portfolio-card-yellow {
  will-change: transform;
  transform: translate3d(0, 100%, 0);
}
#portfolio .portfolio-card-yellow:first-child { transform: translate3d(0, 0, 0); }
#portfolio .w-px.origin-top { transform: scaleY(0); }
#portfolio .portfolio-sticky-container > div:nth-child(2) > div:last-child {
  border: 1px solid rgba(8, 70, 48, .55) !important;
}
#work-with-me {
  background: linear-gradient(180deg,
    #69b78f 0%, #367652 9%, #123b29 19%,
    #081d15 28%, #070707 38%, #070707 100%) !important;
}

/* The reference moves this row across the viewport while its section is pinned. */
#services .services-row { will-change: transform; }
#services .services-card { background: linear-gradient(155deg, #162c25, #09221b) !important; }
#services .services-card.active,
#services .services-card:hover { background: linear-gradient(145deg, #b8f0d0, #6fd1a2) !important; }
#services .services-card h3,
#services .services-card p,
#services .services-card li,
#services .services-card a { color: #f5fff9 !important; }
#services .services-card svg { color: #79d5b3 !important; }
#services .services-card.active h3,
#services .services-card:hover h3,
#services .services-card.active li,
#services .services-card:hover li { color: #071d16 !important; }

/* Keep the reference list-and-preview composition on desktop. */
#awards > div:first-child { align-items: flex-start !important; gap: 5vw !important; }
#awards > div:first-child > div:first-child { width: 48% !important; flex: 0 0 48%; min-width: 0; }
#awards h2 { font-size: clamp(48px, 4.3vw, 82px) !important; }
#awards .awards-container { cursor: pointer; }
#awards .awards-container::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: calc(100vw - 8vw);
  height: 1px;
  background: rgba(255, 255, 255, .28);
  pointer-events: none;
}
#awards .awards-container:focus-visible { outline: 2px solid #78e4b0; outline-offset: 4px; }
#awards .awards-container:hover h3,
#awards .awards-container:focus-visible h3,
#awards .awards-container.is-active h3 { color: #9cebc0 !important; }
#awards .image-container {
  display: flex !important;
  position: sticky !important;
  top: 25vh !important;
  right: auto !important;
  width: 42vw !important;
  flex: 0 0 42vw;
  margin-top: clamp(130px, 12vw, 220px);
  opacity: 1 !important;
  pointer-events: auto !important;
  z-index: 2;
}
#awards .image-container > div {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1.8;
  border: 1px solid rgba(139, 235, 181, .28);
  border-radius: 22px !important;
  background: #10231c !important;
  box-shadow: 0 24px 65px rgba(0, 0, 0, .32);
  transform: none !important;
}
#awards .image-container > div > div {
  opacity: 0 !important;
  transform: none !important;
  transition: opacity .55s ease !important;
}
#awards .image-container > div > div.is-active { opacity: 1 !important; }
#awards .image-container img { object-fit: contain !important; background: #e9eeeb; }
#awards .certificate-open {
  position: absolute;
  right: 18px;
  bottom: 18px;
  z-index: 3;
  padding: 9px 14px;
  border: 1px solid rgba(255,255,255,.55);
  border-radius: 999px;
  background: rgba(7, 22, 17, .8);
  color: white;
  font-size: 14px;
  text-decoration: none;
  backdrop-filter: blur(10px);
}
#awards > .mobile-certificates {
  display: none !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 28px);
  padding: 2vw 4vw 9vw;
}
#awards .mobile-certificates figure {
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(146, 234, 186, .28);
  border-radius: 18px;
  background: #10211b;
  box-shadow: 0 18px 45px rgba(0, 0, 0, .2);
}
#awards .mobile-certificates img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: contain;
  background: #e9eeeb;
}
#awards .mobile-certificates figcaption {
  padding: 16px;
  color: #fff;
  font-size: clamp(14px, 1.1vw, 19px);
  line-height: 1.25;
}

/* Entrances are enabled only after the repair script attaches observers. */
.motion-ready #about .about-fact-folder,
.motion-ready #work-with-me .work-card,
.motion-ready #awards .mobile-certificates figure,
.motion-ready .motion-heading {
  opacity: 0;
  transform: translate3d(0, 32px, 0);
  transition: opacity .7s ease, transform .7s cubic-bezier(.16, 1, .3, 1), box-shadow .35s ease;
}
.motion-ready #about .about-fact-folder.in-view,
.motion-ready #work-with-me .work-card.in-view,
.motion-ready #awards .mobile-certificates figure.in-view,
.motion-ready .motion-heading.in-view {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
.motion-ready #work-with-me .work-card .absolute.inset-0.h-px {
  transform: scaleX(var(--line-progress, 0));
  transform-origin: left center;
  transition: none !important;
}
#work-with-me .work-card .absolute.inset-0.h-px { background: #77e8ae !important; }
html, body, .elenavoss-body { overflow-x: clip; }
#services { overflow-x: clip; }
#about .about-fact-folder.in-view:hover,
#about .about-fact-folder.in-view:focus-visible {
  transform: perspective(900px) translate3d(0, -8px, 0) rotateX(3deg) !important;
  box-shadow: 0 25px 50px rgba(8, 72, 54, .18) !important;
}
#about .about-fact-folder.is-open { z-index: 12; }

@media (max-width: 1025px) {
  #awards .awards-container::after { width: 100%; }
  #awards > div:first-child > div:first-child { width: 100% !important; flex-basis: 100%; }
  #awards .image-container { display: none !important; }
  #awards > .mobile-certificates { display: grid !important; }
  #awards > .mobile-certificates { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 24px 5vw 70px; }
}
@media (max-width: 700px) {
  /* portfolio::before removed */
  #awards { padding-top: 100px !important; }
  #awards > .mobile-certificates { grid-template-columns: minmax(0, 1fr); }
  #services { height: auto !important; }
  #services .services-sticky { position: relative !important; height: auto !important; overflow: visible !important; }
  #services .services-row { width: 100% !important; transform: none !important; display: grid !important; grid-template-columns: 1fr !important; padding: 30px 5vw 70px !important; gap: 18px !important; }
  #services .services-card { width: 100% !important; height: auto !important; min-height: 320px; }
}
@media (prefers-reduced-motion: reduce) {
  .motion-ready #about .about-fact-folder,
  .motion-ready #work-with-me .work-card,
  .motion-ready #awards .mobile-certificates figure,
  .motion-ready .motion-heading { opacity: 1; transform: none; transition: none; }
  #portfolio .portfolio-card-yellow { will-change: auto; }
}