.signage-page { --sp-navy:#03243b; --sp-orange:#c65e37; --sp-muted:#5c6b75; --sp-line:#dce3e8; }
.sp-intro > .wrap { padding-bottom:0; border:0; }
.sp-secondary { display:block; margin-top:22px; font-size:1rem; line-height:1.75; color:var(--sp-muted); }
.sp-chapters { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px; margin-top:42px; border-bottom:1px solid var(--sp-line); }
.sp-chapters a { display:flex; align-items:center; gap:15px; padding:21px 0; font-size:1rem; font-weight:600; border-bottom:3px solid transparent; transition:border-color .25s; }
.sp-chapters a span { color:var(--sp-orange); font-size:.875rem; font-weight:700; }
.sp-chapters a:hover { border-color:var(--sp-orange); }
.sp-block { padding:65px 0 72px; scroll-margin-top:110px; }
.sp-heading { display:grid; grid-template-columns:1.15fr 1fr; align-items:end; gap:clamp(35px,6vw,90px); margin-bottom:33px; }
.sp-heading h2 { font-size:clamp(2.8rem,4vw,4.55rem); line-height:1.08; margin:0; color:var(--sp-navy); }
.sp-heading > p { margin:0; max-width:485px; justify-self:end; font-size:1.0625rem; line-height:1.75; color:var(--sp-muted); }
.sp-map-grid { display:grid; grid-template-columns:1.85fr 1fr; gap:38px; align-items:start; }
.sp-map { margin:0; overflow:hidden; background:#f4f7f9; border:1px solid var(--sp-line); border-radius:5px; }
.sp-plan-svg { display:block; width:100%; height:auto; }
.sp-floor { fill:#f0f4f6; }
.sp-wall { fill:none; stroke:#80919e; stroke-width:7; }
.sp-equipment { fill:#d4dee4; stroke:#a7b7c2; stroke-width:2; }
.sp-plan-labels text { fill:#5c6b75; font-size:20px; font-family:Manrope,Arial,sans-serif; letter-spacing:1px; }
.sp-zone { transition:opacity .35s; }
.sp-zone[role=button] { cursor:pointer; outline:none; }
.sp-zone-hit { stroke:transparent; stroke-width:52; fill:transparent; pointer-events:all; }
.sp-zone-hit:is(rect) { stroke-width:0; }
.sp-route-fill { stroke:none; fill:#f3c96818; }
path.sp-route-fill { fill:none; stroke:#e1b15725; stroke-width:44; }
.sp-line { fill:none; stroke:#d5a335; stroke-width:5; stroke-linejoin:round; }
.sp-symbol { fill:none; stroke:#8c9ca7; stroke-width:7; stroke-linecap:square; stroke-linejoin:miter; }
.sp-cross-bars { fill:none; stroke:#8c9ca7; stroke-width:9; }
.sp-zone-label circle { fill:#fff; stroke:#c65e37; stroke-width:2; }
.sp-zone-label text { fill:#9d4524; font-size:21px; font-weight:700; font-family:Manrope,Arial,sans-serif; }
.sp-zone.is-selected .sp-line,.sp-zone:focus-visible .sp-line { stroke:#c65e37; stroke-width:7; }
.sp-zone.is-selected .sp-route-fill { fill:#c65e371c; }
.sp-zone.is-selected path.sp-route-fill { fill:none; stroke:#c65e3730; }
.sp-zone.is-selected .sp-zone-label circle { fill:#c65e37; }
.sp-zone.is-selected .sp-zone-label text { fill:#fff; }
.sp-map:not([data-selected=todos]) .sp-zone:not(.is-selected) { opacity:.25; }
.sp-map figcaption { display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 20px; padding:16px 20px; border-top:1px solid var(--sp-line); color:#5c6b75; font-size:.875rem; line-height:1.6; background:#fff; }
.sp-zone-controls { display:grid; gap:9px; }
.sp-zone-controls button { min-height:49px; display:flex; align-items:center; gap:12px; padding:11px 17px; border:1px solid var(--sp-line); background:#fff; border-radius:4px; color:var(--sp-navy); font-size:.9375rem; font-weight:600; text-align:left; transition:background .25s,border-color .25s; }
.sp-zone-controls button span { display:grid; place-items:center; width:29px; height:29px; font-size:.875rem; border-radius:50%; color:var(--sp-orange); border:1px solid #c65e3740; flex:none; }
.sp-zone-controls button[aria-pressed=true] { background:#fbf2ec; border-color:#c65e3780; }
.sp-zone-controls button[aria-pressed=true] span { background:#c65e37; color:#fff; border-color:#c65e37; }
.sp-zone-controls button:hover { border-color:#c65e37; }
.sp-map-detail { margin-top:24px; border-top:1px solid var(--sp-line); padding-top:20px; }
.sp-map-detail h3 { font-size:1.25rem; line-height:1.45; margin:0 0 12px; }
.sp-map-detail p { color:var(--sp-muted); font-size:1rem; line-height:1.75; margin:0; }
.sp-comparison-block { background:#f4f6f8; }
.sp-comparison .px-compare-image { object-position:center; }
.sp-comparison figcaption { flex-wrap:wrap; }
.sp-process { background:var(--sp-navy); color:#fff; }
.sp-process .sp-heading h2 { color:#fff; }
.sp-process .sp-heading p,.sp-process .px-kicker { color:#bfced7; }
.sp-process-track { display:grid; grid-template-columns:1fr 1fr; align-items:start; gap:70px; margin-top:44px; }
.sp-process-plan { position:sticky; top:116px; margin:0; padding:22px; background:#12364a; border:1px solid #ffffff25; border-radius:5px; z-index:2; }
.sp-process-caption { display:grid; gap:8px; font-size:.875rem; color:#b7c9d6; }
.sp-process-caption strong { color:#fff; font-size:1rem; font-weight:600; }
.sp-process-plan .sp-floor { fill:#173e52; }
.sp-process-plan .sp-wall { stroke:#658393; }
.sp-process-plan .sp-equipment { fill:#35596c; stroke:#658393; }
.sp-process-plan .sp-plan-labels text { fill:#b8cdd9; }
.sp-process-plan .sp-route-fill { opacity:0; }
.sp-process-plan .sp-zone-label { display:none; }
.sp-process-plan .sp-line { stroke:#f4b765; stroke-dasharray:1000; stroke-dashoffset:1000; transition:stroke-dashoffset .75s ease; }
.sp-process-plan .sp-symbol,.sp-process-plan .sp-cross-bars { opacity:0; stroke:#dbe5eb; transition:opacity .4s; }
.sp-process-plan[data-stage="0"] .sp-line { stroke:#809dad; stroke-dasharray:10 8; stroke-dashoffset:0; opacity:.65; }
.sp-process-plan[data-stage="1"] .sp-line { stroke:#a2b6c3; stroke-dasharray:10 8; stroke-dashoffset:0; }
.sp-process-plan[data-stage="1"] .sp-route-fill { opacity:1; }
.sp-process-plan[data-stage="2"] .sp-line { stroke-dashoffset:500; }
.sp-process-plan[data-stage="2"] .sp-symbol,.sp-process-plan[data-stage="2"] .sp-cross-bars { opacity:.35; }
.sp-process-plan[data-stage="3"] .sp-line { stroke-dashoffset:0; }
.sp-process-plan[data-stage="3"] .sp-symbol,.sp-process-plan[data-stage="3"] .sp-cross-bars { opacity:1; }
.sp-process-key { display:flex; flex-wrap:wrap; gap:15px 24px; font-size:.875rem; line-height:1.6; color:#c0d1dd; padding-top:14px; border-top:1px solid #ffffff20; }
.sp-process-key span { display:flex; align-items:center; gap:8px; }
.sp-process-key span:before { content:''; width:20px; border-top:3px dashed #a2b6c3; }
.sp-process-key .sp-applied-key:before { border-top-style:solid; border-color:#f4b765; }
.sp-process-controls { display:flex; gap:11px; margin-top:18px; }
.sp-process-controls button { width:44px; height:44px; display:grid; place-items:center; border:1px solid #ffffff50; border-radius:50%; background:transparent; color:#d4e0e7; font-size:.9375rem; font-weight:700; }
.sp-process-controls button[aria-pressed=true] { background:#c65e37; border-color:#c65e37; color:#fff; }
.sp-steps { display:grid; gap:16px; }
.sp-step { min-height:195px; padding:25px 28px; border:1px solid #ffffff22; border-left:3px solid #ffffff22; border-radius:4px; color:#c2d0d9; transition:background .3s,border-color .3s; }
.sp-step-title { display:flex; align-items:center; gap:15px; margin-bottom:15px; }
.sp-step-title span { display:grid; place-items:center; flex:none; width:36px; height:36px; border:1px solid #ffffff50; border-radius:50%; font-size:.9375rem; font-weight:700; }
.sp-step h3 { color:#e0e8ed; font-size:1.125rem; font-weight:600; margin:0; line-height:1.5; }
.sp-step p { font-size:1rem; line-height:1.75; margin:0; }
.sp-step.is-active { background:#ffffff0d; border-color:#d98157; color:#e1eaf0; }
.sp-step.is-active h3 { color:#fff; }
.sp-step.is-active .sp-step-title span { color:#fff; background:#d36c3e; border-color:#d36c3e; box-shadow:0 0 0 4px #d36c3e15; }
.sp-process-note { margin:30px 0 0 auto; max-width:590px; color:#b4c6d3; font-size:.9375rem; line-height:1.7; }
.sp-finish-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:25px; }
.sp-finish-grid figure { margin:0; }
.sp-finish-grid img { width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:4px; }
.sp-finish-grid figcaption { font-size:1rem; font-weight:600; margin-top:17px; }
.sp-quote { padding:65px 0; border-top:1px solid var(--sp-line); }
.sp-quote-grid { display:grid; grid-template-columns:1fr auto; align-items:center; gap:50px; }
.sp-quote h2 { margin:0 0 17px; font-size:clamp(2.6rem,4vw,4.2rem); }
.sp-quote p { color:var(--sp-muted); font-size:1.0625rem; line-height:1.75; max-width:650px; margin:0; }
.sp-quote .button { min-width:220px; }
.signage-page :is(.sp-zone-controls button,.sp-process-controls button,.sp-chapters a):focus-visible { outline:3px solid #e4895c; outline-offset:4px; }
@media(max-width:1000px) { .sp-map-grid { grid-template-columns:1.4fr 1fr; gap:25px; }.sp-process-track { gap:35px; }.sp-process-plan { padding:18px; } }
@media(max-width:780px) {
 .sp-secondary { margin-top:15px; }
 .sp-chapters { grid-template-columns:1fr; gap:0; margin-top:29px; }
 .sp-chapters a { padding:14px 0; border-top:1px solid var(--sp-line); }
 .sp-block { padding:47px 0 52px; scroll-margin-top:90px; }
 .sp-heading { grid-template-columns:1fr; gap:24px; }
 .sp-heading h2 { font-size:clamp(2.65rem,8.7vw,3.7rem); }
 .sp-heading > p { justify-self:start; font-size:1rem; }
 .sp-map-grid { grid-template-columns:1fr; gap:24px; }
 .sp-map figcaption { padding:14px 16px; }
 .sp-zone-controls { grid-template-columns:1fr 1fr; gap:9px; }
 .sp-zone-controls button { font-size:.875rem; padding:11px; gap:8px; line-height:1.45; min-height:57px; }
 .sp-zone-controls button span { width:25px; height:25px; font-size:.8125rem; }
 .sp-map-detail { margin-top:20px; }
 .sp-plan-labels text { font-size:42px; }
 .sp-zone-label circle { r:37px; }
 .sp-zone-label text { font-size:42px; }
 .sp-comparison .px-compare-stage { aspect-ratio:4/3; }
 .sp-comparison figcaption > span:last-child { display:block; }
 .sp-process-track { display:block; margin-top:30px; }
 .sp-process-plan { top:75px; padding:16px; margin-bottom:24px; box-shadow:0 12px 30px #03243b30; }
 .sp-process-caption { font-size:.875rem; gap:5px; }
 .sp-process-plan .sp-plan-labels { display:none; }
 .sp-process-plan .sp-plan-svg { max-height:160px; }
 .sp-process-key { font-size:.875rem; gap:10px 15px; padding-top:12px; }
 .sp-process-controls { margin-top:14px; }
 .sp-step { min-height:215px; padding:23px 20px; }
 .sp-step-title { gap:12px; }
 .sp-step h3 { font-size:1.0625rem; }
 .sp-finish-grid { grid-template-columns:1fr; gap:29px; }
 .sp-quote { padding:49px 0; }
 .sp-quote-grid { grid-template-columns:1fr; gap:25px; }
 .sp-quote h2 { font-size:3rem; }
 .sp-quote .button { width:100%; }
}
@media(prefers-reduced-motion:reduce) { .signage-page *, .signage-page *::before,.signage-page *::after { transition:none!important; animation:none!important; scroll-behavior:auto!important; } }