/* "Seek. Scale. Launch Confidently" map background (js/cta-map.js). Full-screen scene, map fades in once tiles are ready. */
.cta{--ctav:rgba(14,20,20,.6);--cmy:clamp(48px,8vh,88px);--cmx:clamp(14px,6vw,96px);min-height:max(84vh,640px);display:grid;place-items:center;padding:calc(var(--cmy) + 56px) 24px;z-index:1}  /* z-index: sits above the fixed city canvas and its markers */
:root[data-theme="light"] .cta{--ctav:rgba(243,240,232,.68)}
:root[data-theme="orange"] .cta{--ctav:rgba(255,225,205,.62)}
.cta>.ctain{position:relative;z-index:2}
.cta>.ctain h2{text-shadow:0 2px 36px var(--ctav),0 0 2px var(--ctav)}
/* smaller map: a framed window inside the section instead of full bleed */
.cta>.ctamap{position:absolute;inset:var(--cmy) var(--cmx);max-width:1180px;margin-inline:auto;z-index:0;overflow:hidden;border-radius:22px;border:1px solid var(--line);
  box-shadow:0 34px 90px -34px rgba(0,0,0,.65);pointer-events:none;opacity:0;transition:opacity 1.6s ease}
.cta>.ctamap.on{opacity:1}
.ctamap-in{position:absolute;inset:0}
.ctamap-in.maplibregl-map{position:absolute}   /* MapLibre's own CSS sets position:relative, which collapsed the map to 0 height */
.ctamap-in canvas{outline:0}
.ctamap-vig{position:absolute;inset:0;background:radial-gradient(ellipse 52% 42% at 50% 50%,var(--ctav),transparent 72%)}
.cta.hasmap{background:transparent}

.cta>.ctaui{position:absolute;inset:var(--cmy) var(--cmx);max-width:1180px;margin-inline:auto;z-index:3;pointer-events:none;font-family:var(--mono)}
.cm-hud{position:absolute;top:20px;left:22px;display:flex;flex-direction:column;gap:4px;font-size:10px;letter-spacing:.08em;color:var(--ink);opacity:0;transition:opacity 1.2s ease .6s;text-shadow:0 0 12px var(--ctav)}
.cm-hud b{color:var(--or);font-weight:600}
.cta.hasmap .cm-hud{opacity:.85}
.cm-ex{position:absolute;left:50%;bottom:20px;transform:translate(-50%,14px);display:flex;flex-wrap:wrap;justify-content:center;gap:6px;max-width:min(860px,calc(100% - 48px));opacity:0;transition:opacity .9s ease,transform .9s cubic-bezier(.2,.8,.2,1)}
.ctaui.ex .cm-ex{opacity:1;transform:translate(-50%,0)}
.cm-ex button{pointer-events:none;font:600 10px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink);padding:9px 12px;cursor:pointer;
  background:var(--bg);background:color-mix(in srgb,var(--bg) 72%,transparent);border:1px solid var(--line);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:.25s}
.ctaui.ex .cm-ex button{pointer-events:auto}
.cm-ex button:hover{border-color:var(--or);color:var(--or)}
.cm-ex button.on{background:var(--or);border-color:var(--or);color:#111}
.cm-cr{position:absolute;right:9px;bottom:7px;pointer-events:auto;padding:3px 6px;border-radius:3px;font:500 8px/1 var(--mono);letter-spacing:.03em;white-space:nowrap;color:var(--ink);opacity:.78;
  background:var(--bg);background:color-mix(in srgb,var(--bg) 70%,transparent);transition:opacity .2s}
.cm-cr:hover{opacity:1;color:var(--or)}
.cm-cr{transform:scale(.25);transform-origin:100% 100%}   /* credit shown 4x smaller */
@media(max-width:700px){.cm-hud{top:14px;left:14px}.cm-ex{bottom:30px}}
@media(prefers-reduced-motion:reduce){.cta>.ctamap,.cm-hud,.cm-ex{transition:none}}

/* label that follows the tower on the map */
.cm-pin{pointer-events:none;opacity:0;padding:4px 8px;font:600 10px/1.2 var(--mono);letter-spacing:.08em;color:var(--ink);white-space:nowrap;
  background:var(--bg);background:color-mix(in srgb,var(--bg) 80%,transparent);border-left:2px solid var(--or)}