/*
 * UI/UX polish layer
 * Keeps the existing Wuslogic visual identity while improving hierarchy,
 * readability, interaction feedback, and responsive behavior.
 */
html { scroll-padding-top: 6.5rem; }
body {
  color: var(--c-text);
  font-family: var(--font-sans);
  line-height: 1.7;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
p { max-width: 68ch; }

.skip-link {
  position: fixed;
  z-index: var(--z-accessibility);
  top: .75rem;
  left: .75rem;
  padding: .75rem 1rem;
  border-radius: .65rem;
  background: var(--c-primary-dark);
  color: #fff;
  font-weight: 700;
  transform: translateY(-160%);
  transition: transform var(--duration-ui) var(--ease-ui);
}
.skip-link:focus { color: #fff; transform: translateY(0); }

.site-header {
  border-bottom-color: rgba(191, 201, 226, .72);
  background: rgba(255, 255, 255, .88);
  box-shadow: 0 .5rem 1.75rem rgba(31, 50, 104, .07);
}
.site-nav { max-width: var(--container-nav); margin-inline: auto; }
.brand { display: inline-flex; align-items: center; min-height: 3rem; }
.nav-link {
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: .055em;
}
.nav-link::before {
  position: absolute;
  right: 0;
  bottom: -.45rem;
  left: 0;
  height: .125rem;
  border-radius: var(--radius-pill);
  background: var(--c-primary);
  content: "";
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--duration-ui) var(--ease-ui);
}
.nav-link:hover::before,
.nav-link:focus-visible::before { transform: scaleX(1); }
.nav-link.active::before { display: none; }

.btn-soft,
.btn-main,
.btn-line,
.section-head-inline a,
.treat-body span {
  min-height: 3rem;
  padding-inline: 1.65rem;
  font-family: var(--font-sans);
  font-weight: 700;
  letter-spacing: .055em;
  box-shadow: 0 .65rem 1.4rem rgba(65, 86, 157, .2);
  transition: color var(--duration-ui) var(--ease-ui),
    background-color var(--duration-ui) var(--ease-ui),
    border-color var(--duration-ui) var(--ease-ui),
    box-shadow var(--duration-ui) var(--ease-ui),
    transform var(--duration-ui) var(--ease-ui);
}
.btn-soft:hover,
.btn-main:hover,
.btn-line:hover,
.section-head-inline a:hover {
  box-shadow: 0 .9rem 1.8rem rgba(65, 86, 157, .26);
  transform: translateY(-.125rem);
}
.btn-soft:active,
.btn-main:active,
.btn-line:active,
.section-head-inline a:active {
  box-shadow: 0 .35rem .8rem rgba(65, 86, 157, .18);
  transform: translateY(0);
}

button:disabled,
input:disabled,
select:disabled,
textarea:disabled,
[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: .52;
  pointer-events: none;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: .1875rem solid var(--c-focus);
  outline-offset: .25rem;
}

.section-pad { padding-block: var(--section-space); }
.section-title,
.section-head-inline { margin-bottom: clamp(2rem, 4vw, 3rem); }
.section-title h2,
.section-head-inline h2,
.service-detail h2,
.contact-box h2 {
  margin-bottom: .75rem;
  letter-spacing: .06em;
  line-height: 1.3;
}
.section-title p {
  max-width: 42rem;
  margin-inline: auto;
  color: var(--c-muted);
  font-size: 1.0625rem;
  line-height: 1.8;
}
.eyebrow {
  font-family: var(--font-sans);
  font-weight: 700;
  letter-spacing: .18em;
}

.contact-box,
.consult-form,
.calendar-card,
.social-panel,
.treat-card,
.service-detail article,
.faq-item {
  border-color: rgba(205, 214, 235, .9);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
}
.treat-card {
  transition: border-color var(--duration-ui) var(--ease-ui),
    box-shadow var(--duration-ui) var(--ease-ui),
    transform var(--duration-ui) var(--ease-ui);
}
.treat-card:hover {
  border-color: #bac7e5;
  box-shadow: var(--shadow-sm);
  transform: translateY(-.3rem);
}
.treat-card a { height: 100%; }
.treat-card img {
  transition: transform .45s var(--ease-ui);
}
.treat-card:hover img { transform: scale(1.025); }
.treat-body { padding: 1.75rem; }
.treat-body h3,
.social-panel h3 {
  letter-spacing: .04em;
  line-height: 1.45;
}
.treat-body p,
.service-detail p {
  color: var(--c-muted);
  line-height: 1.8;
}
.page-hero {
  padding-block: clamp(5rem, 9vw, 8rem) clamp(3rem, 6vw, 5.5rem);
}
.page-hero p { margin-inline: auto; }
body:not(.page-index):not(.page-about) .page-hero,
.page-news .news-detail-hero {
  background: #E3E2F3;
}
.env-arrow,
.nav-toggle,
.nav-submenu-toggle,
.go-top,
.contact-dock a,
.contact-dock button {
  min-width: 2.75rem;
  min-height: 2.75rem;
}
.consult-form input,
.consult-form select,
.consult-form textarea {
  min-height: 3rem;
  border-radius: .75rem;
  background: #fff;
}
.footer-map-strip > * { min-width: 0; }

@media (max-width: 62rem) {
  .site-nav { padding-inline: 1.25rem; }
}
@media (max-width: 48rem) {
  html { scroll-padding-top: 5.5rem; }
  .nav-link { font-size: 1rem; letter-spacing: .035em; }
  .nav-link::before { display: none; }
  .main-nav .navbar-nav { padding: .75rem 1rem 1.25rem; }
  .section-pad { padding-block: 4rem; }
  .section-head-inline { align-items: flex-start; flex-direction: column; }
  .section-title p { font-size: 1rem; }
  .treat-body { padding: 1.5rem; }
  .footer-contact-title h2 {
    font-size: clamp(2.25rem, 11vw, 3.25rem);
    letter-spacing: .1em;
  }
}
@media (max-width: 36rem) {
  .contact-box,
  .consult-form { border-radius: var(--radius-sm); }
}
@media (prefers-reduced-motion: reduce) {
  .nav-link::before,
  .treat-card img { transition: none; }
  .treat-card:hover,
  .btn-soft:hover,
  .btn-main:hover,
  .btn-line:hover,
  .section-head-inline a:hover { transform: none; }
}