/* Shared details for the two approved parking-service mockups. */
.service-page .pt-hero h1 { font-size:clamp(36px,3.6vw,52px); line-height:1.02; }
.service-page .pt-hero p { font-size:16px; max-width:500px; margin-bottom:16px; }
.service-page .pt-hero-content { padding-block:28px 20px; }
.service-page .pt-promises { gap:22px; }
.service-page .pt-promises>span { font-size:11px; }
.service-page .pt-promises .icon { background:white; color:#71318a; border-radius:50%; padding:6px; width:36px; height:36px; }
.service-page h2 { font-size:25px; }
.service-page h3 { font-size:15px; }
.sp-content { background:linear-gradient(#fcfaff,#fff 30%,#faf8ff); padding-top:15px; }
.sp-section { padding-block:18px; }
.sp-panel { background:white; border:1px solid #f1ebfa; border-radius:12px; box-shadow:0 4px 20px #60258c08; padding:18px; }
.sp-intro { display:grid; grid-template-columns:1.1fr 1fr; align-items:center; gap:28px; margin-bottom:16px; }
.service-ride .sp-intro { grid-template-columns:1fr 1.8fr; padding-block:10px; }
.sp-intro-photo,.sp-guide img { width:100%; display:block; border-radius:6px; }
.sp-guide { border:0; padding:0; border-radius:6px; background:#f6f0fc; cursor:pointer; }
.sp-guide:hover { filter:brightness(1.04); }
.sp-intro-steps { display:grid; grid-template-columns:repeat(4,1fr); gap:15px; margin-top:18px; }
.sp-intro-steps>div { text-align:center; font-size:13px; color:#5c527b; line-height:1.3; }
.sp-intro-steps .icon { display:block; width:31px; height:31px; color:#71318a; margin:0 auto 8px; }
.service-ride .sp-intro-steps { grid-template-columns:repeat(3,1fr); }
.service-ride .sp-intro-steps>div { display:flex; align-items:center; gap:10px; text-align:left; font-weight:600; color:#25133c; }
.service-ride .sp-intro-steps .icon { flex-shrink:0; background:#f4eefb; border-radius:50%; padding:9px; width:48px; height:48px; margin:0; }
.sp-tint { background:#f7f4fc; padding-block:18px; }
.sp-benefit-split { display:grid; grid-template-columns:1.2fr 1fr; gap:20px; }
.sp-benefits { display:grid; grid-template-columns:repeat(4,1fr); }
.sp-benefits article { text-align:center; padding:13px 10px; border:1px solid #efe8f8; }
.sp-benefits .icon { width:32px; height:32px; color:#71318a; margin-bottom:8px; }
.service-meet .sp-benefits h3 { font-size:13px; font-weight:400; color:#5f527a; line-height:1.3; letter-spacing:0; }
.service-ride .sp-benefits { grid-template-columns:repeat(6,1fr); gap:8px; }
.service-ride .sp-benefits article { border-radius:10px; background:white; padding:15px 12px; }
.service-ride .sp-benefits h3 { min-height:38px; margin-bottom:7px; line-height:1.25; }
.service-ride .sp-benefits p { font-size:13px; margin:0; }
.sp-why-meet { position:relative; isolation:isolate; overflow:hidden; background:#fff8e4; padding:20px; border-radius:10px; }
.sp-why-meet:before { content:""; position:absolute; inset:0; z-index:-1; background-image:linear-gradient(90deg,#fff8e4 25%,#fff8e400 85%),var(--traveller-image); background-size:100%,auto 100%; background-position:right; background-repeat:no-repeat; }
.sp-why-meet h2 { font-size:23px; }
.sp-why-meet .pt-checks { max-width:78%; margin:16px 0 0; font-size:13px; }
.sp-why-meet .pt-checks li:before { background:#ffca2d; color:#3c2053; }
.sp-steps article { position:relative; height:100%; }
.sp-steps img { width:100%; aspect-ratio:2.1; object-fit:cover; border-radius:5px; margin-bottom:9px; }
.sp-steps h3 { margin-bottom:7px; }
.sp-steps p { margin:0; }
.sp-number { display:grid; place-items:center; width:36px; height:36px; border-radius:50%; background:linear-gradient(120deg,#71318a,#961bc9); color:white; border:3px solid white; font-weight:700; font-size:20px; }
.service-meet .sp-steps article { padding:8px 18px 15px; background:white; border-radius:10px; }
.service-meet .sp-number { position:absolute; left:0; top:-9px; }
.service-meet .sp-steps { margin-top:22px; }
.service-ride .sp-steps h3 { min-height:38px; padding:8px 0 0 45px; }
.service-ride .sp-number { position:absolute; top:0; left:0; }
.sp-reasons { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.sp-reasons article { display:flex; gap:14px; background:white; border-radius:8px; padding:15px; }
.sp-reasons .icon { width:35px; height:35px; color:#71318a; }
.sp-reasons h3 { margin-bottom:5px; }
.sp-reasons p { font-size:13px; margin:0; }
.sp-reasons article:first-child .icon,.service-ride .sp-benefits article:first-child .icon { color:#ffbb00; }
.sp-compare { margin-block:12px; }
.sp-compare .pt-table { font-size:13px; }
.sp-compare .pt-table th,.sp-compare .pt-table td { padding:7px 10px; }
.sp-positive { color:#51ad37; }
.sp-audience-section { margin-block:16px; }
.sp-audience-split { display:grid; grid-template-columns:2.1fr 1fr; gap:14px; }
.sp-audiences { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:10px; }
.sp-audiences article { border:1px solid #ede6f6; border-radius:7px; overflow:hidden; background:white; }
.sp-audiences img { display:block; width:100%; aspect-ratio:2.3; object-fit:cover; }
.service-meet .sp-audiences img { aspect-ratio:1.8; }
.sp-audiences article>div { display:flex; padding:10px; gap:10px; }
.sp-audiences .icon { color:#71318a; width:25px; height:25px; }
.sp-audiences h3 { font-size:13px; margin-bottom:4px; }
.sp-audiences p { font-size:12px; margin:0; }
.sp-features ul { padding:0; margin:8px 0 0; list-style:none; }
.sp-features li { border:1px solid #eee7f8; border-radius:8px; padding:6px 12px; font-size:13px; display:flex; align-items:center; gap:15px; color:#5b4d78; }
.sp-features .icon { color:#71318a; }
.sp-meet-compare { padding-top:0; }
.sp-meet-compare article { border-radius:7px; overflow:hidden; background:white; border:1px solid #f2edf8; height:100%; }
.sp-meet-compare h3 { text-align:center; color:#71318a; padding:10px; }
.sp-meet-compare h3 .icon { margin-right:10px; }
.sp-meet-compare .is-highlighted { border-color:#71318a; }
.sp-meet-compare .is-highlighted h3 { background:#71318a; color:white; }
.sp-meet-compare .pt-checks { padding:10px 25px; margin:0; }
.sp-meet-compare article:not(.is-highlighted) .pt-checks li:before { content:"×"; background:#9892b1; }
.sp-faq-section { padding-bottom:16px; }
.sp-faq-heading { display:flex; justify-content:space-between; gap:15px; align-items:center; }
.sp-outline { border:1px solid #71318a; border-radius:5px; padding:9px 16px; color:#71318a; font-size:12px; white-space:nowrap; }
.sp-faq-grid { display:grid; grid-template-columns:1fr 1fr; gap:4px 15px; align-items:start; }
.sp-faq-grid .accordion-item { border:1px solid #eee5f7; border-radius:8px; overflow:hidden; }
.sp-faq-grid .accordion-button { font-size:12px; padding:8px 15px; color:#4d376a; box-shadow:none; }
.sp-faq-grid .accordion-button:not(.collapsed) { background:#f4edfb; }
.sp-faq-grid .accordion-button:after { content:"+"; background:none; width:auto; height:auto; font-size:19px; line-height:1; color:#71318a; }
.sp-faq-grid .accordion-button:not(.collapsed):after { content:"−"; transform:none; }
.sp-faq-grid .accordion-body { font-size:13px; line-height:1.5; }
.sp-cta { width:97%; margin:0 auto 3px; }
.sp-cta h2 { font-size:23px; }
@media(max-width:1100px) {
    .service-page h2 { font-size:22px; }
    .service-page p { font-size:13px; }
    .service-page .pt-hero p { font-size:15px; }
    .sp-intro-steps>div,.sp-why-meet .pt-checks { font-size:12px; }
    .sp-audiences article>div { padding:8px; gap:7px; }
    .service-meet .sp-audiences h3 { font-size:11px; }
    .service-meet .sp-audiences p { font-size:10px; }
    .sp-reasons { gap:8px; }
    .sp-reasons article { padding:12px; gap:10px; }
    .sp-reasons p { font-size:12px; }
}
@media(max-width:899px) {
    .sp-benefit-split,.sp-audience-split { grid-template-columns:1fr; }
    .service-ride .sp-benefits { grid-template-columns:repeat(3,1fr); }
    .sp-reasons { grid-template-columns:repeat(2,1fr); }
    .sp-why-meet { min-height:260px; }
    .sp-intro,.service-ride .sp-intro { grid-template-columns:1fr 1fr; gap:20px; }
    .sp-intro-steps,.service-ride .sp-intro-steps { grid-template-columns:repeat(2,1fr); }
    .service-meet .sp-audiences h3 { font-size:13px; }
    .service-meet .sp-audiences p { font-size:12px; }
}
@media(max-width:575px) {
    .sp-intro,.service-ride .sp-intro { grid-template-columns:1fr; }
    .service-page .pt-hero p { width:100%; }
    .service-page .pt-promises { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
    .service-page .pt-hero>img { opacity:.45; }
    .sp-benefits,.service-ride .sp-benefits { grid-template-columns:repeat(2,1fr); }
    .sp-audiences,.sp-reasons { grid-template-columns:repeat(2,1fr); }
    .sp-reasons article { flex-direction:column; }
    .sp-faq-grid { grid-template-columns:1fr; }
    .sp-faq-heading { align-items:flex-start; flex-direction:column; margin-bottom:10px; }
    .sp-intro-steps { grid-template-columns:repeat(4,1fr); gap:8px; }
    .sp-intro-steps>div { font-size:11px; }
    .sp-panel { padding:14px; }
    .sp-why-meet .pt-checks { max-width:85%; }
    .sp-audiences article>div { flex-direction:column; }
    .sp-cta .offers-button { white-space:normal; }
}
.sp-content { position:relative; isolation:isolate; }
.sp-content:before { content:""; position:absolute; inset:0; z-index:-1; opacity:.055; pointer-events:none; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='948' height='440' viewBox='0 0 948 440'%3E%3Cg fill='%2371318a'%3E%3Cpath d='M15 180V61L5 40h45L40 61v119zM0 32h55v8H0zm13-14h29v14H13zm13-18h3v18h-3zM902 410V291l-10-21h45l-10 21v119zm-15-148h55v8h-55zm13-14h29v14h-29zm13-18h3v18h-3z'/%3E%3Cpath d='m810 60 42 9 17-12 5 4-12 12 27 7-3 4-29-4-18 13-4-3 13-13-39-11z'/%3E%3C/g%3E%3C/svg%3E") center top/100% auto repeat-y; }
.sp-guide { position:relative; }
.sp-guide-label { position:absolute; left:35%; top:68%; width:30%; min-height:19%; background:#7825ab; color:white; display:flex; justify-content:center; align-items:center; flex-direction:column; border-radius:5px; font-size:clamp(9px,1vw,13px); font-weight:700; }
.sp-guide-label small { font-size:.8em; font-weight:400; }
.sp-why-art { position:absolute; right:0; top:0; height:100%; width:auto; z-index:-2; mask-image:linear-gradient(90deg,transparent,#000 40%); }
.sp-why-meet:before { background:linear-gradient(90deg,#fff8e4 10%,#fff8e4c0 40%,transparent 85%); }
.service-meet .sp-steps { margin-top:0; }
@media(min-width:900px) and (max-width:1100px) {
    .sp-features li { font-size:11px; padding:5px 8px; gap:10px; }
    .sp-features .icon { width:17px; height:17px; }
    .sp-benefits article { padding:10px 8px; }
    .service-meet .sp-benefits h3 { font-size:12px; }
}