/* UX-01. Shared service template. */
.joule-service-ux { color:#29313a; line-height:1.7; }
.joule-service-ux .joule-ux-hero { background:#f2f5f8; border:1px solid #dce3eb; border-top:4px solid #c91d18; border-radius:12px; padding:30px 26px; margin:12px 0 24px; }
.joule-service-ux .joule-ux-eyebrow { color:#535e6a; font-size:13px; margin:0 0 14px; text-align:center; }
.joule-service-ux .joule-ux-hero h1 { font-size:clamp(23px,2.4vw,32px); line-height:1.3; margin:0 0 20px; text-align:center; color:#202a35; }
.joule-service-ux .joule-ux-lead { margin:0 0 22px; text-align:justify; }
.joule-service-ux .joule-ux-actions { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:12px; }
.joule-service-ux a.joule-ux-button { display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:11px 18px; border:2px solid #bd201b; border-radius:7px; background:#bd201b; color:#fff; font-size:16px; font-weight:bold; line-height:1.4; text-align:center; text-decoration:none; }
.joule-service-ux a.joule-ux-button:hover { background:#991914; border-color:#991914; }
.joule-service-ux a.joule-ux-button-secondary { background:#fff; color:#333; border-color:#bdc7d1; }
.joule-service-ux a.joule-ux-button-secondary:hover { background:#e9eef3; }
.joule-service-ux a:focus-visible { outline:3px solid #155e9f; outline-offset:4px; }
.joule-service-ux .joule-ux-hint { margin:16px 0 0; font-size:13px; color:#535e6a; text-align:justify; }
.joule-service-ux .joule-ux-nav { padding:20px; border:1px solid #dce3eb; border-radius:10px; margin-bottom:30px; }
.joule-service-ux .joule-ux-nav-title { display:block; font-weight:bold; margin-bottom:12px; }
.joule-service-ux .joule-ux-nav ul { display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0; list-style:none; }
.joule-service-ux .joule-ux-nav li { margin:0; padding:0; }
.joule-service-ux .joule-ux-nav a { display:block; padding:8px 12px; background:#f2f5f8; border-radius:5px; color:#234f76; text-decoration:underline; line-height:1.5; }
.joule-service-ux .joule-ux-copy h2 { margin:34px 0 18px; font-size:23px; line-height:1.4; scroll-margin-top:20px; text-align:center; }
.joule-service-ux .joule-ux-copy p, .joule-service-ux .joule-ux-copy li { text-align:justify; }
.joule-service-ux .joule-ux-copy p { margin-bottom:18px; }
.joule-service-ux .joule-ux-copy li { margin-bottom:12px; padding-left:5px; }
.joule-service-ux .joule-ux-copy ol { padding-left:28px; }
.joule-service-ux .joule-ux-copy .wp-caption { max-width:100%; margin:24px auto; float:none; }
.joule-service-ux .joule-ux-copy img { margin-left:0; border-radius:6px; }
.joule-service-ux .joule-ux-copy .wp-caption-text { text-align:center; color:#59636e; font-size:13px; }
.joule-service-ux .joule-ux-copy table { width:100%; height:auto; margin:20px 0; }
.joule-service-ux .joule-ux-copy th { background:#edf2f6; }
.joule-service-ux .joule-ux-request { background:#f2f5f8; border:1px solid #dce3eb; border-radius:12px; padding:26px; margin:32px 0; }
.joule-service-ux .joule-ux-request h2 { margin:0 0 16px; line-height:1.4; text-align:center; }
.joule-service-ux .joule-ux-request p { text-align:justify; }
.joule-service-ux .joule-ux-email { color:#234f76; overflow-wrap:anywhere; }
@media(max-width:767px) {
 .joule-service-ux .joule-ux-hero,.joule-service-ux .joule-ux-request { padding:22px 16px; }
 .joule-service-ux .joule-ux-nav { padding:16px; }
 .joule-service-ux .joule-ux-actions { flex-direction:column; align-items:stretch; }
 .joule-service-ux a.joule-ux-button { width:100%; }
 .joule-service-ux .joule-ux-email { text-align:center; }
 .joule-service-ux .joule-ux-copy h2 { font-size:21px; }
 .joule-service-ux .joule-ux-copy td,.joule-service-ux .joule-ux-copy th { padding:8px !important; }
}

.joule-service-ux .joule-cost { clear:both; margin:28px 0; padding:24px; background:#f5f7f9; border-left:4px solid #bd201b; border-radius:6px; }
.joule-service-ux .joule-cost h2 { margin-top:0; }
.joule-service-ux .joule-cost h3 { text-align:center; }
.joule-service-ux .joule-ux-copy img { max-width:100%; height:auto; }
@media(max-width:767px) { .joule-service-ux .joule-cost { padding:18px 14px; } }
/* FAQ: existing questions remain readable when JavaScript is unavailable. */
.joule-service-ux .joule-faq-item { margin:12px 0; border:1px solid #dce3eb; border-radius:8px; background:#fff; overflow:hidden; }
.joule-service-ux .joule-faq-item > summary { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 20px; cursor:pointer; list-style:none; background:#f5f7f9; }
.joule-service-ux .joule-faq-item > summary::-webkit-details-marker { display:none; }
.joule-service-ux .joule-faq-item > summary::after { content:'+'; flex:none; color:#bd201b; font-size:26px; line-height:1; }
.joule-service-ux .joule-faq-item[open] > summary::after { content:'−'; }
.joule-service-ux .joule-faq-item > summary h3,.joule-service-ux .joule-faq-item > summary h4 { margin:0; font-size:18px; line-height:1.5; text-align:left !important; }
.joule-service-ux .joule-faq-item > summary:hover { background:#edf2f6; }
.joule-service-ux .joule-faq-item > summary:focus-visible { outline:3px solid #155e9f; outline-offset:-3px; }
.joule-service-ux .joule-faq-answer { padding:18px 20px; }
.joule-service-ux .joule-faq-answer > :last-child { margin-bottom:0; }
@media(max-width:767px) { .joule-service-ux .joule-faq-item > summary,.joule-service-ux .joule-faq-answer { padding:16px 14px; } }