/* =============================================================
   QMerse — p-implementation.css (Implementation help only; loads after site.css)
   The words beside the real canvas; two routes as ruled columns that meet at one destination;
   the three Zapwiser services on the rail.
   ============================================================= */

/* ---- Hero: words on the left, the canvas on the right ---- */
.im-hero .page-hero-grid { grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); align-items: center; }
.im-hero h1 { font-size: clamp(40px, 4.6vw, 66px); }
.im-hero .lede { margin-top: 26px; max-width: 30em; }
.im-shot { margin: 0; border: 1px solid var(--line-2); border-radius: var(--radius-lg); overflow: hidden; background: var(--surface); box-shadow: 0 40px 90px -50px var(--shadow); }
.im-shot img { width: 100%; height: auto; }
.im-shot .on-dark { display: none; }
html[data-theme="dark"] .im-shot .on-dark { display: block; }
html[data-theme="dark"] .im-shot .on-light { display: none; }
.im-hero::before { -webkit-mask-image: radial-gradient(55% 85% at 78% 50%, #000 25%, transparent 75%); mask-image: radial-gradient(55% 85% at 78% 50%, #000 25%, transparent 75%); }
@media (max-width: 880px) {
  .im-hero .page-hero-grid { grid-template-columns: minmax(0, 1fr); }
  .im-shot img { aspect-ratio: 4 / 3; object-fit: cover; object-position: 70% 50%; }
}
@media (max-width: 480px) { .im-hero .hero-ctas { flex-direction: column; align-items: stretch; } .im-hero .hero-ctas .btn { justify-content: center; } }

/* ---- Two routes: ruled columns, the brand name first ---- */
.im-routes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(32px, 5vw, 72px); }
.im-route { display: flex; flex-direction: column; gap: 12px; padding-top: 28px; border-top: 1px solid var(--line-2); color: var(--text); transition: border-color 0.3s, opacity 1s var(--ease-out), transform 1.1s var(--ease-out); }
.im-route:hover, .im-route:focus-within { border-top-color: var(--acc); }
.im-route h3 { font-family: var(--font-serif); font-weight: 400; font-size: clamp(32px, 3.2vw, 44px); letter-spacing: -0.02em; line-height: 1.05; }
.im-k { font-size: 15px; line-height: 1.4; color: var(--text-mute); }
.im-route p { font-size: 16px; line-height: 1.65; color: var(--text-mute); }
.im-go { margin-top: auto; padding-top: 6px; }
/* the two lanes meet at one destination; they move only while a route is pointed at */
.merge { height: 72px; margin-top: 28px; }
.mg-wires.v { display: block; width: 100%; height: 100%; overflow: visible; }
.mg-w { fill: none; stroke: var(--acc); stroke-width: 1.5; stroke-dasharray: 5 5; opacity: 0.7; vector-effect: non-scaling-stroke; transition: opacity 0.4s; }
.merge[data-on] .mg-w { opacity: 1; animation: mgFlow 1.6s linear infinite; }
.merge[data-on="self"] .mg-w.built, .merge[data-on="built"] .mg-w.self { opacity: 0.25; }
@keyframes mgFlow { to { stroke-dashoffset: -20; } }
.im-dest { margin: 10px auto 0; max-width: 26em; text-align: center; font: 400 clamp(22px, 2.1vw, 30px)/1.25 var(--font-serif); letter-spacing: -0.015em; color: var(--text); text-wrap: balance; }
.im-dest::before { content: ''; display: block; width: 9px; height: 9px; margin: 0 auto 18px; border-radius: 50%; background: var(--acc); }
@media (max-width: 880px) {
  .im-routes { grid-template-columns: minmax(0, 1fr); }
  .merge { display: none; }
  .im-dest { text-align: start; margin: 40px 0 0; padding-top: 24px; border-top: 1px solid var(--line-2); max-width: none; }
  .im-dest::before { display: none; }
}

/* ---- Services on the rail: column heads, a paragraph and a link to Zapwiser ---- */
.im-svc .gw-card, .im-svc .gw-stage.is-lit .gw-card { background: none; border: 0; box-shadow: none; padding: 0; color: var(--tp-ink); }
.im-svc .gw-card h3 { font: 400 clamp(24px, 2vw, 28px)/1.2 var(--font-serif); letter-spacing: -0.015em; color: var(--tp-ink); margin-bottom: 10px; }
.im-svc .gw-card p { font-size: 16px; line-height: 1.6; color: var(--tp-mute); }
.im-svc .gw-card .gw-link { align-self: flex-start; margin-top: auto; color: var(--tp-ink); border-color: var(--tp-line); }
.im-svc .gw-card .gw-link:hover { color: var(--tp-acc); border-color: var(--tp-acc); }
@media (max-width: 1080px) { .im-svc .gw-card { padding-top: 12px; } }
.im-partner { margin-top: clamp(40px, 5vw, 56px); max-width: 46em; font-size: 16px; line-height: 1.6; color: var(--tp-mute); }
.im-partner a { color: var(--tp-acc); border-bottom: 1px solid currentColor; }

@media (prefers-reduced-motion: reduce) { .merge[data-on] .mg-w { animation: none; } }