/* Shared light ending and compact contact handle for the main Pappenberg.io pages. */
.shared-finale {
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding: clamp(6rem, 10vw, 10rem) 0 clamp(4rem, 7vw, 7rem);
  color: #20382a;
  background: radial-gradient(ellipse at 86% 27%, #d5e6d9 0%, transparent 48%),
    radial-gradient(ellipse at 12% 90%, #f7f7ee 0%, transparent 45%),
    linear-gradient(150deg, #eef2e9, #e2ebe0 65%, #e7eee4);
}
.shared-finale::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: -18%;
  right: -30vw;
  width: min(75vw, 70rem);
  aspect-ratio: 1;
  border: 1px solid #769b8024;
  border-radius: 50%;
  box-shadow: 0 0 0 7rem #769b8009, 0 0 0 14rem #769b8005;
  pointer-events: none;
}
.shared-finale__inner {
  position: relative;
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  align-items: center;
  gap: clamp(3rem, 7vw, 7rem);
  width: min(1240px, calc(100% - 6rem));
  margin: auto;
  padding-top: clamp(3rem, 6vw, 6rem);
}
.shared-finale__inner::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: min(10rem, 24%);
  height: 2px;
  background: #709b7f;
}
.shared-finale__eyebrow {
  display: block;
  color: #52765d;
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.shared-finale h2 {
  margin: 1.4rem 0;
  color: #20382a;
  font-family: "Poiret One", "Century Gothic", sans-serif;
  font-size: clamp(3rem, 5vw, 5rem);
  font-weight: 400;
  letter-spacing: -.035em;
  line-height: 1.1;
  text-transform: none;
}
.shared-finale h2 span { color: #6d9578; }
.shared-finale__copy p {
  margin: 0 0 1.8rem;
  color: #42594a;
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.85;
}
.shared-finale__link {
  display: inline-flex;
  align-items: center;
  gap: 2rem;
  padding: 1rem 1.4rem;
  border: 1px solid #315440;
  border-radius: 999px;
  background: #315440;
  color: #f7f8f2;
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: .9rem;
  text-decoration: none;
  transition: background-color .25s ease, color .25s ease, transform .3s ease;
}
.shared-finale__link:hover { background: #e1eae0; color: #20382a; transform: translateY(-2px); }
.shared-finale__link:focus-visible,
.shared-finale__logo:focus-visible { outline: 2px solid #315440; outline-offset: 6px; }
.shared-finale__footer {
  padding: 2.25rem 1.5rem calc(5.5rem + env(safe-area-inset-bottom));
  border-top: 1px solid #789a7d35;
  background: #f6f6f6;
  opacity: 0;
  transform: translateY(.65rem);
  transition: opacity .35s ease, transform .45s cubic-bezier(.22, 1, .36, 1);
}
.shared-finale__footer.is-visible,
.shared-finale__footer:focus-within { opacity: 1; transform: none; }
.shared-finale__footer-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1.5rem;
  width: min(1240px, 100%);
  margin: auto;
}
.shared-finale__logo {
  display: inline-flex;
  align-items: baseline;
  color: #20382a;
  font-family: "Caviar Dreams", "Century Gothic", sans-serif;
  font-size: 1.25rem;
  font-weight: 400;
  letter-spacing: -.063em;
  line-height: 1;
  text-decoration: none;
}
.shared-finale__logo-suffix { margin-left: .025em; color: #729b80; font-weight: 700; }
.shared-finale__footer-signoff {
  color: #52705b;
  font: 400 .75rem/1.5 "DM Sans", system-ui, sans-serif;
  letter-spacing: .02em;
  text-align: center;
}
.shared-finale__footer-links { display: flex; justify-content: flex-end; gap: 1.5rem; }
.shared-finale__footer-links a {
  color: #425d4a;
  font: 500 .72rem/1.5 "DM Sans", system-ui, sans-serif;
  text-decoration: none;
  text-underline-offset: .25em;
}
.shared-finale__footer-links a:hover { text-decoration: underline; }
.shared-finale__footer-links a:focus-visible { outline: 2px solid #315440; outline-offset: 4px; }

.shared-finale-page > main::after { display: none !important; }

/* At the page end, keep the green edge and a usable, compact contact handle. */
.shared-finale-page .hero-start:not(.is-return).is-footer {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 4px;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: #78a18c;
  box-shadow: 0 -1px 0 #54816666;
  transform: none;
}
.shared-finale-page .hero-start:not(.is-return).is-minimized .hero-start__toggle,
.shared-finale-page .hero-start:not(.is-return).is-footer .hero-start__toggle {
  transition: width .55s cubic-bezier(.22, 1, .36, 1),
    height .45s cubic-bezier(.22, 1, .36, 1),
    background-color .25s ease;
}
.shared-finale-page .hero-start:not(.is-return).is-footer .hero-start__toggle {
  inset: auto max(1rem, env(safe-area-inset-right)) 0 auto;
  display: grid;
  width: 4.75rem;
  height: 2.75rem;
  place-items: center;
  padding: 0;
  border: 1px solid #ffffff6b;
  border-bottom: 0;
  border-radius: 0;
  background: #78a18c;
  color: #173629;
  box-shadow: inset 0 1px #ffffff5c;
  clip-path: polygon(0 100%, 0 20%, 8% 20%, 8% 8%, 20% 8%, 20% 0,
    80% 0, 80% 8%, 92% 8%, 92% 20%, 100% 20%, 100% 100%);
  filter: drop-shadow(0 -.25rem .4rem #193a2840);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  cursor: pointer;
  transform-origin: center bottom;
  animation: finale-contact-breathe 11.2s ease-in-out infinite;
}
.shared-finale-page .hero-start:not(.is-return).is-footer .hero-start__toggle::after {
  content: '↗';
  position: static;
  display: block;
  color: #173629;
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 1.15rem;
  font-weight: 400;
  line-height: 1;
  opacity: 1;
  transform: none;
  animation: none;
}
.shared-finale-page .hero-start:not(.is-return).is-footer .hero-start__toggle:hover,
.shared-finale-page .hero-start:not(.is-return).is-footer .hero-start__toggle:focus-visible {
  background: #9cc1a9;
  animation-play-state: paused;
}
.shared-finale-page .hero-start:not(.is-return).is-footer .hero-start__toggle:focus-visible {
  filter: drop-shadow(0 0 .32rem #183c28);
}
.shared-finale-page .hero-start:not(.is-return).is-footer .hero-start__label,
.shared-finale-page .hero-start:not(.is-return).is-footer .hero-start__state-label,
.shared-finale-page .hero-start:not(.is-return).is-footer .hero-start__footer {
  display: none !important;
}
@keyframes finale-contact-breathe {
  0%, 20%, 100% { transform: scale(1); }
  43% { transform: scale(.94, .96); }
  66% { transform: scale(1.03, 1.02); }
  82% { transform: scale(1); }
}

@media (max-width: 1200px) {
  .shared-finale { padding-block: clamp(5rem, 8vw, 7rem) clamp(4rem, 7vw, 6rem); }
  .shared-finale__inner {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    width: min(44rem, calc(100% - 3rem));
    padding-top: 2.5rem;
    text-align: center;
  }
  .shared-finale__inner::before { left: 50%; transform: translateX(-50%); }
  .shared-finale h2 { margin: 1.15rem 0 0; }
  .shared-finale__copy { display: flex; align-items: center; flex-direction: column; }
  .shared-finale__copy p { max-width: 38rem; margin-bottom: 1.5rem; }
  .shared-finale__footer-inner { grid-template-columns: 1fr; justify-items: center; gap: .8rem; }
  .shared-finale__footer-links { justify-content: center; }
}
@media (max-width: 600px) {
  .shared-finale { padding-block: 4.75rem 3.75rem; }
  .shared-finale__inner { width: calc(100% - 36px); gap: 1.25rem; }
  .shared-finale h2 { font-size: clamp(2.65rem, 10.5vw, 3.8rem); }
  .shared-finale__copy p { font-size: .96rem; line-height: 1.7; }
  .shared-finale__footer { padding-bottom: calc(5.5rem + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) {
  .shared-finale__footer,
  .shared-finale__link { transition: none; transform: none; }
  .shared-finale-page .hero-start:not(.is-return).is-footer .hero-start__toggle { animation: none; }
}

/* The project preview starts the light green closing scene. */
.digital-finale .site-finale {
  color: #20382a;
  background: linear-gradient(150deg, #eef2e9, #e2ebe0 65%, #e7eee4);
}
.digital-finale .site-finale::before { border-color: #769b8024; box-shadow: 0 0 0 7rem #769b8009, 0 0 0 14rem #769b8005; }
.site-finale .finale-projects { padding-bottom: clamp(3rem, 6vw, 6rem); color: #20382a; }
.site-finale #projects-title, .site-finale .web-teaser-card__title { color: #20382a; }
.site-finale #projects-title span, .site-finale .web-eyebrow,
.site-finale .web-teaser-card__title > span { color: #52765d; }
.site-finale .web-teaser__heading p { color: #59695b; }
.site-finale .web-projects-link { color: #355a40; border-color: #7d9e84; }
.site-finale .web-teaser__selection { min-width: 0; position: relative; }
.site-finale .web-teaser__grid {
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 1.5rem) / 2);
  gap: 1.5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: #9bb29d transparent;
  padding-bottom: .75rem;
}
.site-finale .web-teaser-card { min-width: 0; scroll-snap-align: start; border: 0; padding-bottom: .5rem; }
.site-finale .web-teaser__next {
  display: grid; place-items: center; margin: .6rem 0 0 auto;
  width: 2.5rem; height: 2.5rem; border: 1px solid #78998080;
  border-radius: 50%; background: transparent; color: #355a40;
  font: inherit; font-size: 1.35rem; cursor: pointer;
}
.site-finale .web-teaser__next[hidden] { display: none; }
.site-finale .web-teaser__next:hover { background: #cbdccd; }
.site-finale .web-teaser__next:focus-visible,
.site-finale .web-teaser__grid:focus-visible { outline: 2px solid #355a40; outline-offset: 4px; }

/* Project windows and ongoing care share one uninterrupted background. */
.shared-closing-scene {
  position: relative; isolation: isolate; overflow: clip;
  background: radial-gradient(ellipse at 86% 27%, #d5e6d9 0%, transparent 48%),
    radial-gradient(ellipse at 12% 90%, #f7f7ee 0%, transparent 45%),
    linear-gradient(150deg, #eef2e9, #e2ebe0 65%, #e7eee4);
}
.shared-closing-scene::before {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  right: -35vw; top: 5%; width: 95vw; height: 95vw;
  border: 1px solid #769b8024; border-radius: 50%;
  box-shadow: 0 0 0 7rem #769b8009, 0 0 0 14rem #769b8005;
}
.shared-closing-scene .site-finale,
.shared-closing-scene .shared-finale { background: transparent; }
.shared-closing-scene .site-finale::before,
.shared-closing-scene .shared-finale::before { content: none; }
.site-finale .web-teaser__grid {
  grid-template-columns: minmax(0, 1.3fr) minmax(0, .85fr);
  grid-auto-flow: row; grid-auto-columns: auto;
  overflow: hidden; align-items: center;
}
.site-finale .web-teaser-card img {
  filter: grayscale(1) sepia(.18) saturate(.55) brightness(1.14) contrast(.88); opacity: 1;
  transition: filter .55s ease, transform .7s cubic-bezier(.2,.7,.2,1);
}
.site-finale .web-teaser-card:hover img,
.site-finale .web-teaser-card:focus-visible img { filter: grayscale(1) sepia(.18) saturate(.55) brightness(1.18) contrast(.88); transform: scale(1.045); }
.shared-finale .shared-finale__link {
  min-width: 16.5rem; min-height: 3rem;
  justify-content: space-between; gap: 2rem; padding: .9rem 1.5rem;
  border: 1px solid #c9e5d34d; border-radius: 999px;
  background: linear-gradient(120deg, #527b60ed, #244c35f5);
  color: #f0f6ef; font: 500 .95rem/1.4 "DM Sans", sans-serif;
  letter-spacing: .025em; text-transform: none;
  box-shadow: 0 4px 20px #071b1433, inset 0 1px #e4f6e51f;
}
.shared-finale .shared-finale__link:hover { background: linear-gradient(120deg, #608c6eed, #2e5c42f5); color: #f0f6ef; }
@media (max-width: 600px) {
  .site-finale .web-teaser__grid { gap: 1rem; grid-template-columns: minmax(0, 1.2fr) minmax(0, .9fr); }
  .shared-finale .shared-finale__link { min-width: min(16.5rem, 100%); }
}
@media (prefers-reduced-motion: reduce) {
  .site-finale .web-teaser-card img { transition: none; }
  .site-finale .web-teaser-card:hover img { transform: none; }
}
.shared-finale .shared-finale__link:hover {
  background: #e1eae0;
  color: #20382a;
  border-color: #355a40;
  box-shadow: none;
  filter: none;
}

/* Quiet color crossfades across the shared calls to action. */
.shared-finale .shared-finale__link,
.shared-finale .shared-finale__link:hover {
  transform: none;
  animation: none;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.site-finale .web-projects-link,
.digital-visual .dv-cta {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  min-height: 3rem;
  padding: .9rem 1.5rem;
  border: 1px solid #355a40;
  border-radius: 999px;
  background: #e1eae0;
  color: #20382a;
  font: 500 .95rem/1.4 "DM Sans", sans-serif;
  letter-spacing: .025em;
  text-transform: none;
  box-shadow: none;
  transform: none;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
.site-finale .web-projects-link:hover,
.digital-visual .dv-cta:hover {
  background: #355f45;
  color: #f0f6ef;
  border-color: #527b60;
  transform: none;
}