/* animated last line of the page (desktop + mobile): the bottom edge of the contact frame stays dark until the end of the page is reached, then light spreads out from the centre ---- */
.contact-frame { position: relative; overflow: visible; border-bottom-color: rgba(201,160,106,0.16) !important; }
.contact-frame.line-in { border-bottom-color: rgba(214,172,114,0.7) !important; transition: border-bottom-color 1.2s ease 2.2s; }
@media (prefers-reduced-motion: reduce) { .contact-frame.line-in { transition: none; } }

/* animated: when the end of the page comes into view, the last line spreads out from the centre (slowly, with a bright leading edge), then a light keeps travelling along it ---- */
@property --spread { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
@keyframes endLineSpread {
  0%   { --spread: 0%;  filter: brightness(1.7); box-shadow: 0 0 8px 0 rgba(240,205,150,0.55); }
  100% { --spread: 54%; filter: brightness(1);   box-shadow: 0 0 5px 0 rgba(201,160,106,0.2); }
}
@keyframes endLineComet { 0% { background-position: 100% 0, 0 0; } 78%, 100% { background-position: 0% 0, 0 0; } }
.contact-frame::before {
  content: ''; position: absolute; left: 4px; right: 4px; bottom: -1px; height: 1px; pointer-events: none; border-radius: 1px; --spread: 0%;
  background:
    linear-gradient(90deg, rgba(246,222,176,0) 0%, rgba(246,222,176,0) 40%, rgba(246,222,176,0.55) 47.5%, #fbeccb 50%, rgba(246,222,176,0.2) 52%, rgba(246,222,176,0) 55%, rgba(246,222,176,0) 100%) 100% 0 / 300% 100% no-repeat,
    linear-gradient(90deg, rgba(201,160,106,0) 0%, rgba(214,172,114,0.85) 14%, rgba(214,172,114,0.85) 86%, rgba(201,160,106,0) 100%) 0 0 / 100% 100% no-repeat;
  box-shadow: 0 0 5px 0 rgba(201,160,106,0.2);
  opacity: 0;
  -webkit-mask-image: linear-gradient(90deg, transparent calc(50% - var(--spread) - 7%), #000 calc(50% - var(--spread)), #000 calc(50% + var(--spread)), transparent calc(50% + var(--spread) + 7%));
  mask-image: linear-gradient(90deg, transparent calc(50% - var(--spread) - 7%), #000 calc(50% - var(--spread)), #000 calc(50% + var(--spread)), transparent calc(50% + var(--spread) + 7%));
}
.contact-frame.line-in::before { opacity: 1; --spread: 54%; animation: endLineSpread 3s cubic-bezier(.45,.05,.3,1) both, endLineComet 3.8s linear 3.2s infinite; }
@media (prefers-reduced-motion: reduce) { .contact-frame::before { opacity: 1; animation: none !important; -webkit-mask-image: none; mask-image: none; } }
@media (max-width: 767px) { .contact-frame::before { bottom: 0; } }

/* bold key phrase in every team-bio paragraph */
.bio-card p strong.bio-b { color: #fff; font-weight: 700; }