/* Motion complements interaction; all content is visible without JavaScript. */
.header {
  transition:
    box-shadow 250ms,
    background 250ms;
}
.header.is-scrolled {
  background: #fffffff5;
  box-shadow: 0 8px 35px #10283b12;
}
.reading-progress {
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 2px;
  transform: scaleX(0);
  transform-origin: left;
  background: var(--gold);
  pointer-events: none;
}
.main-nav a {
  position: relative;
}
.main-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -7px;
  width: 100%;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 250ms;
}
.main-nav a:hover::after,
.main-nav a.is-active::after {
  transform: scaleX(1);
}
.main-nav a.is-active {
  color: #8d6a36;
}
.button .icon,
.text-link .icon,
.card-link .icon,
.service-bottom button .icon,
.community-links button > .icon:last-child {
  transition: transform 250ms cubic-bezier(0.2, 0.65, 0.3, 1);
}
.button:active {
  transform: translateY(0) scale(0.98);
}
.community-image img {
  transform: scale(1.08);
}
.journey > div > span {
  transition:
    background 300ms,
    border-color 300ms,
    transform 300ms;
}
input,
select,
textarea {
  transition:
    border-color 200ms,
    box-shadow 200ms;
}
input:focus,
select:focus,
textarea:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px #b48b4e12;
}
dialog[open] {
  animation: dialog-enter 260ms cubic-bezier(0.2, 0.65, 0.3, 1);
}
dialog[open]::backdrop {
  animation: backdrop-enter 220ms ease-out;
}
.chat-panel:not([hidden]) {
  animation: dialog-enter 250ms ease-out;
  transform-origin: bottom right;
}
.price-result strong {
  font-variant-numeric: tabular-nums;
}
.price-result.is-updating strong {
  animation: price-update 300ms ease-out;
}
@keyframes dialog-enter {
  from {
    opacity: 0;
    translate: 0 16px;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}
@keyframes backdrop-enter {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes price-update {
  from {
    opacity: 0.45;
    translate: 0 5px;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}
@media (hover: hover) and (pointer: fine) {
  .button:hover .icon,
  .text-link:hover .icon,
  .need-card:hover .card-link .icon,
  .post-card:hover .card-link .icon,
  .service-bottom button:hover .icon,
  .community-links button:hover > .icon:last-child {
    transform: translate(3px, -2px);
  }
  .need-card:hover .need-photo img {
    transform: scale(1.07);
  }
  .service-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 45px #10283b14;
  }
  .service-card:hover img,
  .post-card:hover img {
    transform: scale(1.06);
  }
  .journey > div:hover > span {
    transform: translateY(-4px);
    background: #f0e8d9;
    border-color: var(--gold);
  }
}
@media (max-width: 1180px) {
  .main-nav a::after {
    bottom: 6px;
  }
  .main-nav.open {
    animation: dialog-enter 220ms ease-out;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
  .community-image img {
    transform: none;
  }
}