:root { --accent:#483b8a; --light:#eeebfa; }
body { background:#f3efe6; color:#211d29; }
header { border-bottom:1px solid #c1baa9; }
header .brand { text-transform:uppercase; font-style:italic; letter-spacing:-1.6px; }
header nav a:last-child { border-color:#958c80; }
.moto-cover { margin:14px 22px 0; background:#29233d; color:#fff7e6; display:grid; grid-template-columns:.9fr 1.1fr; align-items:center; overflow:hidden; position:relative; isolation:isolate; }
.moto-cover::before { content:''; position:absolute; z-index:-1; inset:0; background:linear-gradient(118deg,transparent 42%,#51496c 42% 44%,transparent 44% 46%,#463d5e 46% 56%,transparent 56%); }
.moto-story { padding:clamp(28px,4vw,62px); }
.moto-label { text-transform:uppercase; letter-spacing:.15em; color:#e7bf7d; font-size:.75rem; font-weight:750; margin:0 0 15px; }
.moto-cover h1,.moto-bench h2 { font-family:'Arial Narrow',Impact,system-ui,sans-serif; }
.moto-cover h1 { color:#fff7e6; font-style:italic; font-weight:900; text-transform:uppercase; font-size:clamp(3.7rem,6.65vw,7.1rem); line-height:.9; letter-spacing:-.075em; margin:0 0 22px; }
body[data-site=clicmotoservices] .moto-cover h1 em { color:#ffc776; font:inherit; display:inline; }
.moto-story>p:not(.moto-label) { max-width:34ch; color:#eee6f4; font-weight:500; font-size:clamp(.97rem,1.2vw,1.13rem); margin:0 0 22px; }
.moto-jumps { display:flex; flex-wrap:wrap; align-items:center; gap:16px; }
.moto-jumps a { min-height:44px; display:inline-flex; align-items:center; gap:12px; font-size:.85rem; font-weight:750; color:#fff7e6; }
.moto-jumps a:first-child { padding:10px 16px; color:#261f30; background:#ffc776; text-decoration:none; border-radius:3px; }
.moto-art { position:relative; width:100%; min-height:240px; display:grid; place-items:center; isolation:isolate; }
.moto-art::before { content:''; z-index:-1; position:absolute; width:75%; aspect-ratio:1.2; border-radius:50%; background:radial-gradient(ellipse at center,#e8d899 1%,#d1bc87 28%,#c7aff3 47%,transparent 48%); transform:rotate(-12deg); }
.moto-art svg { width:min(94%,530px); display:block; --accent:#bb9263; }
.moto-bench { margin:0 22px; display:grid; grid-template-columns:1.07fr .93fr; border:1px solid #c8c1b3; border-top:0; }
.moto-search,.moto-log { min-width:0; padding:clamp(18px,2.4vw,36px); background:#fffaf1; }
.moto-log { background:#e6e0ed; border-left:1px solid #c9bfce; }
.moto-bench h2,.compact-services h2 { text-transform:uppercase; font-size:clamp(1.25rem,2vw,2rem); line-height:1.1; font-style:italic; font-weight:850; letter-spacing:-.04em; }
.moto-bench h2 { margin:0 0 16px; }
.moto-log p { font-size:.88rem; line-height:1.48; color:#50465a; }
.moto-bench .finder { background:transparent; border:0; padding:0; }
.moto-bench .finder-fields { display:flex; flex-wrap:wrap; }
.moto-bench .finder .button { margin:0; width:auto; border-radius:3px; }
.moto-log label,.moto-search .finder label { font-size:.79rem; color:#3e3547; font-weight:700; }
.moto-pair { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.moto-pair input,.moto-bench .finder input { margin-top:4px; background:#fffdf8; border:1px solid #9a8ea4; border-radius:3px; min-height:45px; }
.moto-pair input { width:100%; font-size:1rem; padding:9px 11px; }
.moto-log button { min-height:44px; background:#342a49; color:#fffaec; border:0; padding:10px 17px; font-weight:700; font-size:.85rem; margin-top:12px; border-radius:3px; }
#moto-gap-result:not(:empty) { margin:15px 0 0; padding-left:13px; border-left:3px solid #63527c; font-weight:650; }
#moto-gap-result:empty { margin:0; }
body[data-site=clicmotoservices] .moto-bench .city-examples>span,body[data-site=clicmotoservices] .moto-bench .finder-status { color:#50465a; }
.service-card,.professional-card,.prepare-drawer,.official-resources { border-radius:4px; }
@media(max-width:740px) {
  .moto-cover,.moto-bench { margin-left:10px; margin-right:10px; }
  .moto-cover { grid-template-columns:1fr; }
  .moto-story { position:relative; z-index:1; padding:26px 20px 0; }
  .moto-cover h1 { font-size:clamp(3.75rem,15.5vw,6rem); }
  .moto-art { min-height:0; max-height:165px; margin:0 0 6px; display:flex; justify-content:flex-end; overflow:hidden; }
  .moto-art::before { right:3%; width:64%; }
  .moto-art svg { width:min(71%,290px); max-height:180px; }
  .moto-bench { grid-template-columns:1fr; }
  .moto-log { border-left:0; border-top:1px solid #c9bfce; }
  .moto-bench .finder .button { flex:1 1 auto; }
}
@media(max-width:390px) { .moto-pair { grid-template-columns:1fr; }.moto-art { max-height:125px; } }

.moto-date { display:grid; gap:4px; margin-top:12px; max-width:19rem; }
.moto-date input { min-width:0; width:100%; min-height:45px; padding:8px 10px; border:1px solid #9a8ea4; border-radius:3px; color:#312938; background:#fffdf8; font:inherit; font-size:1rem; }
.moto-log input:focus-visible,.moto-log button:focus-visible { outline:3px solid #66508a; outline-offset:2px; }
.moto-log input[aria-invalid="true"] { border-color:#8d3737; }
#moto-gap-result:not(:empty) { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,140px),1fr)); gap:1px; padding:12px; border:1px solid #a895b1; background:#f7f1fa; color:#3d3049; }
#moto-gap-result>div { display:grid; gap:4px; padding:3px 7px; min-width:0; align-content:start; }
#moto-gap-result span { font:700 .68rem/1.4 ui-monospace,monospace; text-transform:uppercase; letter-spacing:.08em; }
#moto-gap-result strong { font:800 clamp(1.38rem,2.1vw,2rem)/1.15 system-ui,sans-serif; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
#moto-gap-result small { font-weight:500; font-size:.79rem; }