/* Webdesign Microsite 10
 * Scoped changes: client-facing opening cleanup; LIGHT × LENS title sweep;
 * soft yellow Together field with individual, stationary focus/hover responses.
 * Existing fonts, assets, service list wording, care logic and export JS stay intact.
 */

/* A useful in-page title link. The two strokes remain absent at rest.
 * A dark Light label stays legible on paper; yellow belongs beneath the word.
 * The larger section never flashes or inverts while the visitor is reading. */
#together #together-title .role-title-link {
  display: inline-block;
  color: var(--ink);
  font: inherit;
  letter-spacing: inherit;
  text-decoration: none;
  background: transparent;
  border: 0;
  padding: 0 0 .13em;
  max-width: 100%;
}
#together #together-title .role-title-link:focus-visible {
  outline: 2px solid var(--anna-teal);
  outline-offset: 7px;
}
#together #together-title .role-title-word {
  position: relative;
  display: inline-block;
  color: var(--ink);
  transition: color 220ms ease;
}
#together #together-title .role-title-times { color: var(--ink); }
#together #together-title .role-title-word::after {
  content: "";
  position: absolute;
  left: .02em;
  right: .01em;
  bottom: -.12em;
  height: .065em;
  min-height: 3px;
  background: var(--lj-yellow-2);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 320ms cubic-bezier(.22,.61,.36,1);
  pointer-events: none;
}
#together #together-title .title-lens::after {
  background: var(--anna-teal);
}
#together #together-title .role-title-link:focus-visible .role-title-word::after {
  transform: scaleX(1);
}
#together #together-title .role-title-link:focus-visible .title-lens {
  color: var(--anna-teal);
}
@media (hover: hover) {
  #together #together-title .role-title-link:hover .role-title-word::after { transform: scaleX(1); }
  #together #together-title .role-title-link:hover .title-lens { color: var(--anna-teal); }
}
#light-lens-roles { scroll-margin-top: 28px; }

/* Together is part of the page, not another filled card. */
#together .together-strip {
  position: relative;
  isolation: isolate;
  background: transparent;
  border: 0;
  overflow: visible;
  align-items: start;
  transition: none;
}
#together .together-strip::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: radial-gradient(ellipse at 43% 52%,
    rgba(255,238,0,.38) 0%, rgba(255,238,0,.17) 43%,
    rgba(255,238,0,.035) 65%, transparent 82%);
  opacity: .78;
  filter: blur(12px);
  transition: opacity 240ms ease;
  pointer-events: none;
}
#together .together-strip:focus-within::before { opacity: 1; }
@media (hover: hover) {
  #together .together-strip:hover::before { opacity: 1; }
}
/* Explicitly remove the old yellow dot, heading highlight stripe and middots. */
#together .together-strip h3::before,
#together .together-strip h3::after,
#together .together-strip li::before,
#together .together-strip li::after {
  content: none !important;
  display: none !important;
}
#together .together-strip h3 { color: var(--ink); }
#together .together-strip ul {
  flex: 1 1 600px;
  gap: 8px 27px;
  list-style: none;
}
#together .together-strip li {
  position: relative;
  display: flex;
  align-items: center;
  width: fit-content;
  min-height: 44px;
  padding: 2px 0;
  border: 0;
  color: var(--ink);
  text-decoration: none;
  cursor: default;
}
#together .together-strip li > span {
  position: relative;
  isolation: isolate;
  display: inline-block;
}
#together .together-strip li > span::before {
  content: "";
  position: absolute;
  inset: -.24em -.4em;
  z-index: -1;
  background: radial-gradient(ellipse, rgba(255,238,0,.92), rgba(255,238,0,.42) 49%, transparent 78%);
  filter: blur(5px);
  opacity: 0;
  transition: opacity 220ms ease;
  pointer-events: none;
}
#together .together-strip li:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 5px;
}
#together .together-strip li:focus-visible > span::before { opacity: 1; }
@media (hover: hover) {
  #together .together-strip li:hover > span::before { opacity: 1; }
}
/* The shared hover also acknowledges the two leads, as in the existing 07 pass. */
#together:has(.together-strip:focus-within) .light-panel h3 { color: var(--lj-yellow-2); }
#together:has(.together-strip:focus-within) .lens-panel h3 { color: var(--anna-teal); }

@media (max-width: 850px) {
  #together .together-strip ul { flex: 0 1 auto; gap: 6px; }
  #together .together-strip::before {
    background: radial-gradient(ellipse at 39% 48%, rgba(255,238,0,.34), rgba(255,238,0,.14) 42%, transparent 78%);
  }
}
/* No unrequested underline is returned to Light/Lens service rows. */
#together .role-panel li { text-decoration: none !important; }

body[data-motion="off"] #together .role-title-word,
body[data-motion="off"] #together .role-title-word::after,
body[data-motion="off"] #together .together-strip::before,
body[data-motion="off"] #together .together-strip li > span::before { transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  #together .role-title-word,
  #together .role-title-word::after,
  #together .together-strip::before,
  #together .together-strip li > span::before { transition: none !important; }
}
@media (forced-colors: active) {
  #together #together-title .role-title-link { color: LinkText; }
  #together #together-title .role-title-word,
  #together #together-title .role-title-times { color: LinkText !important; }
  #together #together-title .role-title-word::after { background: LinkText; }
  #together .together-strip::before,
  #together .together-strip li > span::before { display: none; }
  #together .together-strip li { color: CanvasText; }
  #together .together-strip li:focus-visible,
  #together #together-title .role-title-link:focus-visible { outline-color: Highlight; }
}
@media print {
  #together .role-title-word::after,
  #together .together-strip::before,
  #together .together-strip li > span::before { display: none !important; }
  #together #together-title .role-title-link,
  #together #together-title .role-title-word { color: #000 !important; text-decoration: none !important; }
  #together .together-strip li { min-height: 0; }
}