/* The Google Maps ranking page. Every class is prefixed mp-; shared type and sections come from p.css. */

/* ───────── hero: the camera comes down over the city, and the business's streets light up ───────── */
.mp-hero{position:relative;overflow:hidden;min-height:max(760px,calc(100vh - 64px));display:flex;flex-direction:column;justify-content:center;background:#E9E8E1;perspective:1400px}
.mp-plane{position:absolute;left:-12%;right:-22%;top:-18%;bottom:-38%;transform-style:preserve-3d;transform-origin:50% 40%;transform:rotateX(46deg)}
.mp-map{position:absolute;inset:0;width:100%;height:100%}
.mp-fade{position:absolute;inset:0;pointer-events:none;z-index:1;
  background:linear-gradient(90deg,var(--ws-paper) 22%,rgba(244,243,238,.86) 38%,rgba(244,243,238,0) 58%),
  linear-gradient(180deg,var(--ws-paper) 0%,rgba(244,243,238,0) 26%),
  linear-gradient(0deg,rgba(244,243,238,.9),rgba(244,243,238,0) 18%)}
.mp-hw{position:relative;z-index:2;width:100%}
.mp-ht .ws-crumb{margin-bottom:26px}
.mp-h1{margin:0;text-align:left;font-size:72px;max-width:600px}
.mp-h1 em{font-style:normal;color:#E39B12}
.mp-l{margin:24px 0 0;text-align:left;max-width:480px}
.mp-ht .ws-ctas{margin-top:32px}
/* the business, standing up off the tilted map */
.mp-pin{position:absolute;width:0;height:0;transform-style:preserve-3d;opacity:0;transition:opacity .5s}
.mp-pin.on{opacity:1}
.mp-pin::before{content:"";position:absolute;left:-15px;top:-15px;width:30px;height:30px;border-radius:50%;background:var(--ws-navy);box-shadow:0 0 0 5px #fff,0 0 0 16px rgba(255,173,31,.32)}
.mp-pin::after{content:"";position:absolute;left:-60px;top:-60px;width:120px;height:120px;border-radius:50%;border:2px solid rgba(242,165,18,.7);animation:mp-ripple 2.4s ease-out infinite}
@keyframes mp-ripple{0%{transform:scale(.2);opacity:1}100%{transform:scale(2.6);opacity:0}}
.mp-pin .beam,.mp-pin .lb{position:absolute;transform-origin:50% 100%;transform:rotateX(-46deg)}
.mp-pin .beam{left:-2px;bottom:0;width:4px;height:230px;border-radius:4px;background:linear-gradient(0deg,rgba(255,173,31,.95),rgba(255,173,31,0))}
.mp-pin .lb{left:-110px;bottom:230px;width:220px;display:flex;flex-direction:column;align-items:center;padding:12px 16px;border-radius:16px;background:#fff;box-shadow:0 0 0 1px rgba(7,26,79,.06),0 24px 40px -20px rgba(7,26,79,.55)}
.mp-pin .lb b{font-size:17px;color:var(--ws-navy)}
.mp-pin .lb small{margin-top:2px;font-size:13px;color:var(--ws-mute)}
/* the week, large, bottom right */
.mp-wk{position:absolute;z-index:2;right:max(48px,calc((100vw - 1240px) / 2 + 48px));bottom:48px;display:flex;flex-direction:column;align-items:flex-end;text-align:right;opacity:0;transition:opacity .6s}
.mp-wk.on{opacity:1}
.mp-wk .k{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ws-ink2)}
.mp-wk b{margin-top:6px;font-size:84px;font-weight:600;letter-spacing:-.055em;line-height:.9;color:var(--ws-navy);font-variant-numeric:tabular-nums}
.mp-wk .r{margin-top:6px;font-size:20px;font-weight:600;color:#C7840B}

@media (max-width:900px){
  .mp-hero{min-height:0;justify-content:flex-start;padding:30px 0 620px}
  .mp-plane{left:-60%;right:-60%;top:30%;bottom:-40%}
  .mp-fade{background:linear-gradient(180deg,var(--ws-paper) 44%,rgba(244,243,238,.5) 56%,rgba(244,243,238,0) 66%)}
  .mp-h1{font-size:44px}
  .mp-pin .beam{height:110px}.mp-pin .lb{bottom:110px;left:-100px;width:200px;padding:10px 12px}
  .mp-wk{left:20px;right:20px;bottom:24px;align-items:center;text-align:center}.mp-wk b{font-size:56px}.mp-wk .r{font-size:16px}
}

/* ───────── street by street: one search from three places ───────── */
.mp-sps{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;max-width:1160px;margin:76px auto 0}
.mp-sp{padding:22px;border-radius:26px;background:#fff;box-shadow:0 0 0 1px rgba(7,26,79,.06),0 50px 90px -56px rgba(7,26,79,.55)}
.mp-sp .wh{display:flex;align-items:center;gap:12px}
.mp-sp .dot{width:16px;height:16px;border-radius:50%;background:#1A73E8;box-shadow:0 0 0 5px rgba(26,115,232,.18),0 0 0 2px #fff inset}
.mp-sp .wh b{display:block;font-size:18px;font-weight:600;letter-spacing:-.01em}
.mp-sp .wh small{display:block;font-size:13.5px;color:var(--ws-mute)}
.mp-q{margin-top:18px;padding:11px 16px;border-radius:999px;background:var(--ws-paper);font-size:15px;color:#202124}
.mp-top{margin-top:12px;display:flex;flex-direction:column;gap:6px}
.mp-top .r{display:flex;align-items:center;gap:12px;padding:12px;border-radius:14px;font-family:Roboto,"Instrument Sans",system-ui,sans-serif}
.mp-top .n{display:grid;place-items:center;width:26px;height:26px;flex:none;border-radius:50%;background:#EEF0F4;font-size:13px;font-weight:700;color:var(--ws-ink2)}
.mp-top b{display:block;font-size:15.5px;font-weight:500;color:#202124}
.mp-top small{display:block;font-size:12.5px;color:#70757A}
.mp-top .r.me{background:#FFF6E3;box-shadow:inset 0 0 0 1.5px var(--ws-amber)}
.mp-top .r.me .n{background:var(--ws-amber);color:#3B2600}
.mp-in,.mp-out{margin-top:14px;font-size:14.5px;color:var(--ws-ink2)}
.mp-in b{color:#C7840B}.mp-out b{color:#C5221F}
.mp-sp.miss .mp-top{opacity:.75}

/* ───────── what moves you up: three rings widening the area ───────── */
.mp-mvw{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:60px;max-width:1120px;margin:70px auto 0}
.mp-rings{display:block;width:100%;max-width:520px;margin:0 auto;overflow:visible}
.mp-rings .rg{fill:rgba(255,173,31,.1);stroke:#F2A512;stroke-width:2;transform-box:fill-box;transform-origin:center;transform:scale(.2);opacity:0;transition:transform 1.1s cubic-bezier(.22,1,.36,1) var(--d),opacity .6s var(--d)}
.mp-rings .rg.r0{fill:rgba(255,173,31,.08);stroke-dasharray:3 6}
.mp-rings .rg.r2{fill:rgba(255,173,31,.24)}
.mp-mvw.in .rg{transform:none;opacity:1}
.mp-mvs{display:flex;flex-direction:column}
.mp-mv{display:flex;gap:24px;align-items:flex-start;padding:24px 0;border-top:1px solid var(--ws-line);opacity:0;transform:translateY(10px);transition:opacity .6s var(--d),transform .7s var(--d)}
.mp-mv:first-child{border-top:0}
.mp-mvw.in .mp-mv{opacity:1;transform:none}
.mp-mv .km{flex:none;width:120px;white-space:nowrap;font-size:34px;font-weight:600;letter-spacing:-.04em;color:#C7840B}
.mp-mv b{display:block;font-size:22px;font-weight:600;letter-spacing:-.02em;color:var(--ws-navy)}
.mp-mv p{margin:6px 0 0;font-size:16px;line-height:1.5;color:var(--ws-ink2)}

/* ───────── close: the first three, with you on top ───────── */
.mp-close{position:relative;overflow:hidden;padding:130px 0 120px}
.mp-pod{display:flex;justify-content:center;align-items:flex-end;gap:26px;height:300px;margin-bottom:56px}
.mp-pod .p{position:relative;display:flex;flex-direction:column;align-items:center;width:150px}
.mp-pod .pi svg{display:block;width:56px;height:auto;filter:drop-shadow(0 14px 18px rgba(0,0,0,.4))}
.mp-pod .st{display:grid;place-items:center;width:100%;margin-top:14px;border-radius:16px 16px 0 0;background:rgba(160,185,255,.1);box-shadow:inset 0 0 0 1px rgba(160,185,255,.16)}
.mp-pod .st b{font-size:40px;font-weight:600;letter-spacing:-.04em;color:#8E9BC6}
.mp-pod .p2 .st{height:110px}.mp-pod .p3 .st{height:76px}
.mp-pod .p1 .st{height:40px;transition:height 1.6s cubic-bezier(.22,1,.36,1) .3s}
.mp-pod.in .p1 .st{height:160px}
.mp-pod .me .st{background:linear-gradient(180deg,rgba(255,173,31,.3),rgba(255,173,31,.08));box-shadow:inset 0 0 0 1.5px rgba(255,173,31,.75),0 0 60px rgba(255,173,31,.35)}
.mp-pod .me .st b{color:var(--ws-amber)}
.mp-pod .me .pi svg{width:70px;filter:drop-shadow(0 0 22px rgba(255,176,32,.7))}
.mp-pod .nm{position:absolute;top:-40px;white-space:nowrap;padding:6px 12px;border-radius:999px;background:var(--ws-amber);color:#3B2600;font-size:13px;font-weight:700}
.mp-clt{position:relative;z-index:1;text-align:center}
.mp-close .pp-h2 em{color:var(--ws-amber)}
.mp-close .pp-line{color:#B4BFE0}.mp-close .ws-kick{color:#8E9BC6}
.mp-close .ws-arrow{color:#fff;border-color:rgba(255,255,255,.35)}

@media (max-width:900px){
  .mp-sps{grid-template-columns:1fr;gap:20px;margin-top:44px}
  .mp-mvw{grid-template-columns:1fr;gap:20px;margin-top:40px}.mp-rings{max-width:300px}
  .mp-mv{gap:16px;padding:18px 0}.mp-mv .km{width:70px;font-size:26px}.mp-mv b{font-size:19px}.mp-mv p{font-size:15px}
  .mp-close{padding:90px 0}.mp-pod{gap:12px;height:250px;margin-bottom:40px}.mp-pod .p{width:96px}.mp-pod .pi svg{width:42px}.mp-pod .me .pi svg{width:52px}
}

/* ───────── weekly rank check: the grid over the streets ───────── */
.mp-gridw{max-width:1100px;margin:70px auto 0}
.mp-gmap{display:block;width:100%;height:560px;border-radius:28px;background:#ECEBE4;box-shadow:0 0 0 1px rgba(7,26,79,.06),0 50px 100px -60px rgba(7,26,79,.5)}
.mp-gridw figcaption,.mp-rk{display:flex;align-items:center;gap:26px;margin-top:20px;font-size:14.5px;color:var(--ws-ink2)}
.mp-gridw figcaption span,.mp-rk span{display:inline-flex;align-items:center;gap:8px}
.mp-gridw figcaption i{width:14px;height:14px;border-radius:50%}
.mp-gridw .a{background:#F2A512}.mp-gridw .b{background:var(--ws-navy)}.mp-gridw .c{background:#B3B9C8}
.mp-gridw .ws-ex{margin-left:auto}

/* ───────── who is ahead of you: you move past them ───────── */
.mp-rv{max-width:1060px;margin:70px auto 0}
.mp-rr{display:grid;grid-template-columns:300px 1fr;align-items:center;gap:40px;padding:24px 0;border-top:1px solid var(--ws-line)}
.mp-rr:first-child{border-top:0}
.mp-rr .lb b{display:block;font-size:21px;font-weight:600;letter-spacing:-.02em;color:var(--ws-navy)}
.mp-rr .lb small{display:block;margin-top:4px;font-size:14.5px;line-height:1.4;color:var(--ws-ink2)}
.mp-rr .tr{position:relative;height:12px;border-radius:999px;background:linear-gradient(90deg,#E8E6DE,#E8E6DE)}
.mp-rr .tr::before{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--a);border-radius:999px;background:linear-gradient(90deg,rgba(255,173,31,.15),rgba(255,173,31,.55));transition:width 1.6s cubic-bezier(.22,1,.36,1) var(--t)}
.mp-rr .was{position:absolute;top:50%;left:var(--a);width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;background:#F6D9A0;box-shadow:0 0 0 3px #F4F3EE}
.mp-rr .ra{position:absolute;top:50%;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;background:#8A90A3;box-shadow:0 0 0 3px #F4F3EE}
.mp-rr .you{position:absolute;top:50%;left:var(--a);width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;background:var(--ws-amber);box-shadow:0 0 0 4px #fff,0 8px 20px -6px rgba(183,121,12,.8);transition:left 1.6s cubic-bezier(.22,1,.36,1) var(--t)}
.mp-rr .you span{position:absolute;left:50%;bottom:30px;transform:translateX(-50%);padding:3px 9px;border-radius:999px;background:var(--ws-navy);color:#fff;font-size:12px;font-weight:700;font-style:normal;white-space:nowrap}
.mp-rv.in .mp-rr .you{left:var(--d)}
.mp-rv.in .mp-rr .tr::before{width:var(--d)}
.mp-rk{justify-content:center;margin-top:30px}
.mp-rk i{width:14px;height:14px;border-radius:50%}
.mp-rk .ra{background:#8A90A3}.mp-rk .you0{background:#F6D9A0}.mp-rk .you{background:var(--ws-amber)}

/* ───────── the outcome: from the map to the door ───────── */
.mp-door{position:relative;max-width:1120px;margin:70px auto 0}
.mp-road{display:block;width:100%;height:120px;overflow:visible}
.mp-road .bg{fill:none;stroke:#E8E6DE;stroke-width:16;stroke-linecap:round}
.mp-road .fg{fill:none;stroke:var(--ws-amber);stroke-width:6;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 2.6s cubic-bezier(.65,0,.35,1)}
.mp-door.in .mp-road .fg{stroke-dashoffset:0}
.mp-dss{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.mp-dss::before,.mp-dss::after{content:"";position:absolute;left:20px;right:calc(25% - 4px);top:19px;height:3px;border-radius:3px;background:#E8E6DE}
.mp-dss::after{background:var(--ws-amber);transform-origin:left;transform:scaleX(0);transition:transform 2.4s cubic-bezier(.65,0,.35,1) .3s}
.mp-door.in .mp-dss::after{transform:none}
.mp-ds .n{position:relative;z-index:1}
.mp-ds{display:flex;flex-direction:column;align-items:flex-start;opacity:.25;transition:opacity .6s calc(var(--i) * .6s + .3s)}
.mp-door.in .mp-ds{opacity:1}
.mp-ds .n{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--ws-navy);color:#fff;font-weight:700}
.mp-ds:last-child .n{background:var(--ws-amber);color:#3B2600}
.mp-ds b{margin-top:16px;font-size:22px;font-weight:600;letter-spacing:-.02em;line-height:1.2;color:var(--ws-navy)}
.mp-ds small{margin-top:6px;font-size:15px;color:var(--ws-ink2)}

/* ───────── every branch ───────── */
.mp-brs{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;max-width:1160px;margin:70px auto 0}
.mp-br{margin:0}
.mp-br canvas{display:block;width:100%;aspect-ratio:1;border-radius:24px;background:#ECEBE4;box-shadow:0 0 0 1px rgba(7,26,79,.06),0 40px 80px -50px rgba(7,26,79,.5)}
.mp-br figcaption{margin-top:16px;text-align:center}
.mp-br figcaption b{display:block;font-size:19px;font-weight:600;color:var(--ws-navy)}
.mp-br figcaption span{display:block;margin-top:2px;font-size:14px;color:var(--ws-mute)}

@media (max-width:900px){
  .mp-gmap{height:380px}.mp-gridw figcaption,.mp-rk{flex-wrap:wrap;gap:8px 16px;font-size:13px}.mp-gridw .ws-ex{margin-left:0}
  .mp-rr{grid-template-columns:1fr;gap:26px}.mp-rr .lb b{font-size:18px}
  /* phone QA, 11 Nov 2026: stacked, the "You" label (30px above the track) sat on the line of text above it */
  .mp-rr{gap:44px}
  .mp-dss{grid-template-columns:1fr;gap:22px}.mp-dss::before,.mp-dss::after{left:19px;right:auto;top:20px;bottom:30px;width:3px;height:auto}.mp-dss::after{transform-origin:top;transform:scaleY(0)}.mp-ds{padding-left:56px;margin-top:-40px}.mp-ds:first-child{margin-top:0}.mp-ds .n{position:relative;left:-56px;top:40px}.mp-ds b{margin-top:0}.mp-ds b{font-size:18px}
  .mp-brs{grid-template-columns:1fr;gap:28px;max-width:340px}
}

/* #528 compare cards, same as seo.css */
.se-cmp{display:grid;grid-template-columns:1fr 1fr;gap:32px;max-width:960px;margin:70px auto 0}
.se-cmc{padding:26px 30px 10px;border-radius:28px;background:#fff;box-shadow:0 0 0 1px rgba(7,26,79,.08),0 60px 110px -60px rgba(7,26,79,.45)}
.se-cmc.w{box-shadow:0 0 0 2px #071A4F,0 60px 110px -50px rgba(7,26,79,.55)}
.se-cmc .hd{display:flex;align-items:center;height:34px;margin-bottom:6px}
.se-cmc .hd b{font-size:22px;font-weight:600;letter-spacing:-.03em;color:#4A5370}
.se-cmc .lg{display:flex;align-items:flex-start}.se-cmc .lg img{height:26px;width:auto}.se-cmc .lg sup{font-size:9px;color:#071A4F;margin-left:2px}
.se-cmc ul{margin:0;padding:0;list-style:none}
.se-cmc li{display:flex;flex-direction:column;gap:4px;padding:18px 0;border-top:1px solid var(--ws-line2)}
.se-cmc .k{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#8A90A3}
.se-cmc li b{font-size:21px;font-weight:600;letter-spacing:-.02em;color:#4A5370}
.se-cmc.w li b{color:var(--ws-navy)}
.se-cmc.w .k{color:#B7790C}
@media (max-width:900px){
  .se-cmp{grid-template-columns:1fr;gap:20px;margin-top:44px}
  .se-cmc{padding:22px 22px 6px}.se-cmc li b{font-size:18px}
}