/* =============================================================
   Service page modernization — shared CSS
   =============================================================
   Drop-in styles for the immersive + lead-capturing service
   page treatment: sticky CTA bar, inline Calendly booking
   section, scroll-triggered fade-up reveals, compact footer
   cross-link row.

   Loaded from MindtradesPage.astro layout's <head>; activates
   automatically on any page that adds .svc-* markup. Inert on
   pages without the markup (no orphan rules fire).

   Tokens piggyback on the design tokens from MindtradesPage
   layout (--mt-ink, --mt-font-mono, --mt-ease, etc.).
   ============================================================= */

/* =============================================================
   SCROLL-TRIGGERED FADE-UP (.svc-reveal)
   =============================================================
   Add `.svc-reveal` to any block you want to fade up as it
   enters the viewport. JS adds `.is-visible` via
   IntersectionObserver.
   ============================================================= */
.svc-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.svc-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* =============================================================
   STICKY BOTTOM CTA BAR (.svc-sticky-cta)
   =============================================================
   Persistent "ready to scope?" bar that slides in from below
   after the user scrolls past the hero. Dismissible (session).
   ============================================================= */
.svc-sticky-cta {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 40;
  background: #ffffff;
  border-top: 1px solid #161616;
  box-shadow: 0 -8px 24px rgba(22, 22, 22, 0.08);
  transform: translateY(110%);
  transition: transform 0.32s cubic-bezier(0.2, 0.8, 0.2, 1);
  pointer-events: none;
}
.svc-sticky-cta.is-visible {
  transform: translateY(0);
  pointer-events: auto;
}
.svc-sticky-inner {
  display: flex; align-items: center; gap: 18px;
  max-width: 1240px; margin: 0 auto;
  padding: 12px clamp(20px, 4vw, 32px);
}
.svc-sticky-text {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 2px;
}
.svc-sticky-eyebrow {
  font-family: var(--mt-font-mono, ui-monospace, Menlo, monospace);
  font-size: 10px; font-weight: 700; letter-spacing: 0.2em;
  color: #6b6b6b; text-transform: uppercase;
}
.svc-sticky-h {
  font-size: 15px; font-weight: 700; letter-spacing: -0.015em;
  color: #161616; line-height: 1.25;
}
.svc-sticky-h-sub { font-weight: 500; color: #6b6b6b; }
.svc-sticky-actions {
  display: flex; gap: 10px; align-items: center;
  flex-shrink: 0;
}
.svc-sticky-cta .global-button {
  padding: 10px 18px !important;
  font-size: 13.5px !important;
}
.svc-sticky-dismiss {
  background: transparent; border: 0;
  padding: 8px 10px; cursor: pointer;
  font-family: var(--mt-font-mono, ui-monospace, Menlo, monospace);
  font-size: 14px; color: #6b6b6b;
  transition: color 0.15s ease;
}
.svc-sticky-dismiss:hover { color: #161616; }
@media (max-width: 640px) {
  .svc-sticky-inner { gap: 12px; padding: 10px 16px; }
  .svc-sticky-h { font-size: 13px; }
  .svc-sticky-h-sub { display: none; }
  .svc-sticky-cta .global-button { padding: 9px 14px !important; font-size: 12.5px !important; }
}

/* =============================================================
   INLINE CALENDLY · BOOK A SCOPING CALL (.svc-book)
   =============================================================
   Mid-page lead-capture section. Two-column: left = trust
   promises, right = embedded Calendly widget.
   ============================================================= */
.svc-book {
  background: #fff;
  padding-top: clamp(48px, 5vw, 72px);
  padding-bottom: clamp(48px, 5vw, 72px);
}
.svc-book-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
}
@media (max-width: 991px) {
  .svc-book-grid { grid-template-columns: 1fr; }
}
.svc-book-h { margin: 8px 0 16px; }
.svc-book-sub { margin: 0 0 32px; max-width: 44ch; }

.svc-book-promises {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 0;
  border-top: 1px solid #e4ebf3;
}
.svc-book-promises li {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 4px 16px;
  padding: 18px 0;
  border-bottom: 1px solid #e4ebf3;
}
.svc-book-num {
  font-family: var(--mt-font-mono, ui-monospace, Menlo, monospace);
  font-size: 11px; font-weight: 700; letter-spacing: 0.14em;
  color: #6b6b6b; grid-row: 1 / span 2;
  padding-top: 3px;
}
.svc-book-promise-h {
  font-size: 15px; font-weight: 700; color: #161616;
  letter-spacing: -0.01em;
}
.svc-book-promise-d {
  font-size: 13.5px; line-height: 1.55; color: #43464d;
}
.svc-book-promise-d a { color: #161616; }

.svc-book-cal {
  border: 1px solid #161616;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 12px 32px rgba(22, 22, 22, 0.06);
}
.svc-book-cal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 18px;
  border-bottom: 1px solid #e4ebf3;
  font-family: var(--mt-font-mono, ui-monospace, Menlo, monospace);
  background: #fafafa;
}
.svc-book-cal-id, .svc-book-cal-id-r {
  font-size: 11px; font-weight: 700; letter-spacing: 0.18em;
  color: #161616; text-transform: uppercase;
}
.svc-book-cal-id-r { color: #6b6b6b; }
.svc-book .calendly-inline-widget { background: #fff; }

/* =============================================================
   COMPACT "ALSO EXPLORE" FOOTER ROW (.svc-also)
   =============================================================
   Replaces the loose Webflow-style Final CTA section. One line
   of mono cross-links between hairlines.
   ============================================================= */
.svc-also {
  padding: 22px 0;
  border-top: 1px solid #e4ebf3;
  border-bottom: 1px solid #e4ebf3;
  background: #fff;
}
.svc-also-row {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 24px;
  font-family: var(--mt-font-mono, ui-monospace, Menlo, monospace);
  font-size: 12.5px;
}
.svc-also-eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: 0.2em;
  color: #6b6b6b; text-transform: uppercase;
}
.svc-also-link {
  color: #161616; font-weight: 600; letter-spacing: 0.02em;
  text-decoration: none;
  transition: opacity 0.15s ease;
}
.svc-also-link:hover { opacity: 0.6; }

/* =============================================================
   REDUCED MOTION
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  .svc-reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .svc-sticky-cta { transition: none !important; }
}