/* The base page remains readable without this optional motion layer. */
.consulting .consult-topic summary {
  position: relative;
  transition: background .22s ease;
}
.consulting .consult-topic summary::before {
  content: '';
  position: absolute;
  inset: 18px auto 18px 0;
  width: 2px;
  background: var(--purple-dark);
  transform: scaleY(0);
  transform-origin: center;
  transition: transform .24s var(--ease);
}
.consulting .consult-topic[data-consult-disclosure='true'] summary::before,
.consulting .consult-topic summary:focus-visible::before { transform: scaleY(1); }
.consulting .consult-topic[data-consult-disclosure='false'] .topic-symbol { transform: rotate(0deg); }
.consulting .consulting-discover i { transition: transform .25s var(--ease); }
.consulting :is(.button-fill, .text-action):focus-visible i,
.contact-balanced .button-fill:focus-visible i { transform: translate(2px, -2px); }
.consulting .consulting-discover:focus-visible i { transform: translateY(3px); }

.contact-balanced .contact-options > article {
  position: relative;
  transition: background-color .3s ease;
}
.contact-balanced .contact-options > article::before {
  content: '';
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 2px;
  background: var(--purple-dark);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s var(--ease);
}
.contact-balanced .contact-options > article:focus-within { background-color: #a89fe014; }
.contact-balanced .contact-options > article:focus-within::before { transform: scaleX(1); }

@media (hover: hover) and (pointer: fine) {
  .consulting .consult-topic summary:hover::before { transform: scaleY(1); }
  .consulting .consulting-discover:hover i { transform: translateY(3px); }
  .contact-balanced .contact-options > article:hover { background-color: #a89fe014; }
  .contact-balanced .contact-options > article:hover::before { transform: scaleX(1); }
}

@media (max-width: 759px) {
  .contact-balanced .contact-options > article::before { left: 24px; right: 24px; }
}

/* User and OS preference branches also stop inherited button/icon transitions. */
.motion-reduced :is(.consulting, .contact-balanced) *,
.motion-reduced :is(.consulting, .contact-balanced) *::before,
.motion-reduced :is(.consulting, .contact-balanced) *::after { transition: none !important; animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  :is(.consulting, .contact-balanced) *,
  :is(.consulting, .contact-balanced) *::before,
  :is(.consulting, .contact-balanced) *::after { transition: none !important; animation: none !important; }
}

/* The consultation table should feel responsive, even after its entrance ends. */
.consulting-art .consult-plan-hover,.consulting-art .consult-notes-hover{transform-box:fill-box;transform-origin:center;transition:transform .65s var(--ease),filter .65s var(--ease)}
.consulting-art .consulting-drawing{transition:transform .75s var(--ease)}
.consulting-art:before{transition:border-color .4s ease}
.consulting .consult-topic summary h3{transition:transform .3s var(--ease),color .3s ease}
.consulting .consult-topic .topic-symbol{width:30px;height:30px;display:grid;place-items:center;border-radius:50%;transition:transform .3s var(--ease),background-color .3s ease,color .3s ease}
.consulting .consult-topic summary:focus-visible{background:#d4d0f4}
.consulting .consult-topic summary:focus-visible h3{transform:translateX(6px);color:var(--purple-dark)}
.consulting .consult-topic summary:focus-visible .topic-symbol{background:var(--purple-dark);color:var(--paper)}
@media(hover:hover) and (pointer:fine){
 .consulting-art:hover .consult-plan-hover{transform:translate(-12px,-16px) rotate(-2deg);filter:drop-shadow(5px 10px 4px #292b2730)}
 .consulting-art:hover .consult-notes-hover{transform:translate(16px,-20px) rotate(3deg);filter:drop-shadow(4px 10px 4px #292b2730)}
 .consulting-art:hover .consulting-drawing{transform:scale(1.025)}
 .consulting-art:hover:before{border-color:var(--purple)}
 .consulting .consult-topic summary:hover{background:#d4d0f4}
 .consulting .consult-topic summary:hover h3{transform:translateX(6px);color:var(--purple-dark)}
 .consulting .consult-topic summary:hover .topic-symbol{background:var(--purple-dark);color:var(--paper)}
}
.motion-reduced .consulting-art :is(.consult-plan-hover,.consult-notes-hover,.consulting-drawing),
.motion-reduced .consulting .consult-topic summary h3{transform:none!important;filter:none!important}
@media(prefers-reduced-motion:reduce){
 .consulting-art :is(.consult-plan-hover,.consult-notes-hover,.consulting-drawing),.consulting .consult-topic summary h3{transform:none!important;filter:none!important}
}
@media(max-width:1050px){.consulting .consult-topic summary{grid-template-columns:24px 1fr 30px}}
@media(max-width:759px){.consulting .consult-topic summary{grid-template-columns:22px 1fr 30px}}
@media(max-width:1050px){.consulting .consult-topic .topic-symbol{width:24px;height:24px;font-size:20px}}