/* selr-services-hub.css — the /services hub page (hand-built, 2026-08-24).
 *
 * Every value here comes from the measured design language of the live site
 * (skill selr-design-language, tokens.css): warm canvas #F7F5EF, ink #242424 /
 * #616161, one accent #6736E2, radii 20/30/40, Manrope Variable display driven
 * to wght 585, negative tracking everywhere, no drop shadows anywhere.
 * Scoped under .svc- so nothing leaks into the captured Framer pages.
 */

:root {
  --svc-canvas: #F7F5EF;
  --svc-surface: #FFFFFA;
  --svc-surface-2: #FCFCFA;
  --svc-dark: #242424;
  --svc-ink: #242424;
  --svc-muted: #616161;
  --svc-invert: #FFFFFA;
  --svc-on-purple: #EEE8FF;
  --svc-purple: #6736E2;
  --svc-purple-press: #5024C0;
  --svc-glass: rgba(255, 255, 255, 0.35);
  --svc-glass-hair: rgba(227, 227, 227, 0.45);
  --svc-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --svc-ease-sym: cubic-bezier(0.44, 0, 0.56, 1);
  --svc-ease-over: cubic-bezier(0.22, 1, 0.36, 1);
}

html { scroll-behavior: smooth; overflow-x: clip; }

body.svc-body {
  margin: 0;
  /* page-level clip container, like the real site's Main (overflow: clip):
     contains the footer circle at scale 10 on both axes without touching
     viewport scrolling (html's overflow-x: clip stops propagation) */
  overflow: clip;
  background: var(--svc-canvas);
  color: var(--svc-ink);
  font-family: 'Manrope', 'Manrope Placeholder', sans-serif;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: -0.03em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.svc-body * { box-sizing: border-box; }
.svc-body img { max-width: 100%; }
.svc-body p { margin: 0; }
.svc-body h1, .svc-body h2, .svc-body h3 {
  margin: 0;
  font-family: 'Manrope Variable', 'Manrope', sans-serif;
  font-variation-settings: 'wght' 585;
  font-weight: 400;
}

.svc-dim { color: var(--svc-muted); }

/* ---------- layout shells ---------- */
.svc-shell { max-width: 1600px; margin: 0 auto; padding: 0 60px; }
.svc-section { padding-top: 120px; }

/* ============================================================
   NAV — static replica of the site shell.
   Pill: white, radius 30, 60 high, 30px in from the edges.
   Dark CTA + avatar sit OUTSIDE the pill, avatar overlapping.
   The hover pill is mounted by the shared selr-nav.js.
   ============================================================ */
.svc-nav {
  position: absolute;
  top: 30px;
  left: 30px;
  right: 30px;
  z-index: 20;
  display: flex;
  justify-content: space-between;
  align-items: center;
  pointer-events: none;
}
.svc-nav > * { pointer-events: auto; }

.svc-pill {
  display: flex;
  align-items: center;
  background: #FFFFFF;
  border-radius: 30px;
  height: 60px;
  padding: 0 12px 0 25px;
}
.svc-logo { display: flex; align-items: center; margin-right: 37px; }
.svc-logo img { width: 88px; height: auto; display: block; }

.svc-nav .framer-s8enno { display: flex; align-items: center; }
.svc-nav [data-framer-name^="Nav Item"] { width: 108px; }
.svc-nav [data-framer-name^="Nav Item"] a {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 37px;
  border-radius: 30px;
  text-decoration: none;
}
.svc-nav .framer-text {
  font-family: 'Manrope', sans-serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--svc-ink);
  transition: color .3s var(--svc-ease-sym);
}

/* fallback hover colour below 1200px, where selr-nav.js does not mount a pill */
@media (max-width: 1199px) {
  .svc-nav [data-framer-name^="Nav Item"] a:hover .framer-text { color: var(--svc-purple); }
}

.svc-nav-right { display: flex; align-items: center; }
.svc-nav-cta {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--svc-dark);
  color: var(--svc-invert);
  border-radius: 40px;
  height: 60px;
  padding: 0 62px 0 25px;
  margin-right: -52px;
  text-decoration: none;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.03em;
  transition: background-color .3s var(--svc-ease);
}
.svc-nav-cta .svc-dot { background: var(--svc-purple); }
.svc-nav-cta:hover { background: var(--svc-purple); }
.svc-nav-cta:hover .svc-dot { background: var(--svc-invert); }
.svc-nav-avatar {
  width: 60px; height: 60px;
  border-radius: 100%;
  display: block;
  position: relative;
  z-index: 1;
}

/* the 10px dot the site's buttons carry, inverting on hover */
.svc-dot {
  width: 10px; height: 10px;
  border-radius: 100%;
  flex: none;
  display: inline-block;
  transition: background-color .3s var(--svc-ease-sym);
}

/* --- phone / tablet nav --- */
.svc-burger {
  display: none;
  background: none;
  border: 0;
  padding: 10px;
  margin-left: auto;
  cursor: pointer;
}
.svc-burger span {
  display: block;
  width: 22px; height: 2px;
  background: var(--svc-ink);
  margin: 5px 0;
  transition: transform .4s var(--svc-ease-over), opacity .2s var(--svc-ease);
}
.svc-menu-open .svc-burger span:first-child { transform: translateY(3.5px) rotate(45deg); }
.svc-menu-open .svc-burger span:last-child { transform: translateY(-3.5px) rotate(-45deg); }

.svc-mobile-menu {
  display: none;
  position: absolute;
  top: 70px;
  left: 0;
  right: 0;
  background: #FFFFFF;
  border-radius: 0 0 30px 30px;
  padding: 10px 20px 20px;
  flex-direction: column;
}
.svc-mobile-menu a {
  display: block;
  padding: 12px 5px;
  text-decoration: none;
  color: var(--svc-ink);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.03em;
}
.svc-mobile-menu a:active { color: var(--svc-purple); }

@media (max-width: 1199px) {
  .svc-nav { top: 20px; left: 20px; right: 20px; }
  .svc-nav .framer-s8enno { display: none; }
  .svc-pill { flex: 1; margin-right: 10px; position: relative; border-radius: 30px; }
  .svc-burger { display: block; }
  .svc-menu-open .svc-pill { border-radius: 30px 30px 0 0; }
  .svc-menu-open .svc-mobile-menu { display: flex; }
  .svc-nav-cta { padding: 0 20px; margin-right: 0; gap: 8px; }
  .svc-nav-cta .svc-dot { display: none; }
  .svc-nav-avatar { display: none; }
  .svc-mobile-menu { top: 60px; }
  .svc-pill, .svc-nav-cta { height: 60px; }
}

/* ============================================================
   HERO
   ============================================================ */
.svc-hero { padding-top: 170px; max-width: 1280px; margin: 0 auto; }
.svc-eyebrow {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 14px;
  border-radius: 30px;
  background: var(--svc-dark);
  color: var(--svc-invert);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.025em;
}
.svc-hero-title {
  font-size: 120px;
  line-height: 1;
  letter-spacing: -0.04em;
  font-variation-settings: 'wght' 500;
  margin-top: 30px;
}
.svc-hero-lead {
  max-width: 720px;
  margin-top: 30px;
  font-size: 25px;
  line-height: 1.3;
  letter-spacing: -0.03em;
  font-family: 'Manrope Variable', 'Manrope', sans-serif;
  font-variation-settings: 'wght' 585;
  color: var(--svc-ink);
}
.svc-hero-lead .svc-dim2 { color: var(--svc-muted); }

/* ============================================================
   JOURNEY — the homepage Services cards, duplicated. Every value
   below was measured off the live homepage section (2026-08-25):
   canvas wrapper radius 40 pad 10 · two 565px panels gap 10 ·
   white text panel + photo panel radius 30 · purple name pill,
   13px/600 white · 30px/39 wght585 headline · canvas chips radius
   15, 13px/600 · full-width purple CTA h56 radius 40 · glass
   testimonial 35% white + blur 10, radius 20, pad 20. Cards pin
   at top 20 and ride over each other exactly like the homepage.
   Page-specific additions: the journey chip, the accordion.
   ============================================================ */
.svc-section#journey { padding-top: 80px; }

.svc-jsteps { display: flex; flex-direction: column; gap: 30px; max-width: 1160px; margin: 0 auto; }

.svc-jcard {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  background: var(--svc-canvas);
  border-radius: 40px;
  padding: 10px;
}
@media (min-width: 1200px) {
  /* equal heights, or the stack never covers cleanly: a shorter card pinning
     over a taller one leaves beheaded strips of the cards beneath */
  .svc-jcard { position: sticky; top: 20px; height: 770px; }
  .svc-jleft, .svc-jmedia { min-height: 0; height: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .svc-jcard { position: static !important; }
}

/* left: the white text panel with the full-width CTA at its foot */
.svc-jleft {
  display: flex;
  flex-direction: column;
  background: var(--svc-surface);
  border-radius: 30px;
  overflow: hidden;
  min-height: 517px;
}
.svc-jtop { flex: 1; padding: 40px 50px 30px; display: flex; flex-direction: column; align-items: flex-start; }

.svc-jhead { display: flex; align-items: center; gap: 10px; width: 100%; }
.svc-jmark {
  display: inline-flex;
  align-items: center;
  height: 29px;
  padding: 0 13px;
  border-radius: 30px;
  background: var(--svc-dark);
  color: var(--svc-invert);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.025em;
  white-space: nowrap;
}
.svc-jpill {
  display: inline-flex;
  align-items: center;
  height: 29px;
  padding: 0 13px;
  border-radius: 30px;
  background: var(--svc-purple);
  color: #FFFFFF;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.025em;
  white-space: nowrap;
}
.svc-jcount {
  margin-left: auto;
  font-family: 'Manrope Variable', 'Manrope', sans-serif;
  font-variation-settings: 'wght' 585;
  font-size: 25px;
  letter-spacing: -0.04em;
  color: var(--svc-muted);
}

.svc-jleft h3 {
  margin-top: 30px;
  font-size: 30px;
  line-height: 1.3;
  letter-spacing: -0.04em;
  max-width: 450px;
}
.svc-jbody {
  margin-top: 15px;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: -0.03em;
  color: var(--svc-muted);
  max-width: 460px;
}

.svc-joffer { margin-top: auto; padding-top: 30px; width: 100%; }
.svc-joffer-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--svc-ink);
  margin-bottom: 10px;
}
.svc-jchips { display: flex; flex-wrap: wrap; gap: 8px; }
.svc-jchips span {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 15px;
  background: var(--svc-canvas);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--svc-ink);
  white-space: nowrap;
}

/* the accordion — the site's device: grid-rows 0fr -> 1fr, plus -> cross */
.svc-jacc { width: 100%; margin-top: 20px; border-top: 1px solid rgba(36, 36, 36, 0.1); }
.svc-jacc-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 15px 0;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: 'Manrope', sans-serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--svc-ink);
  text-align: left;
}
.svc-jacc-ico {
  position: relative;
  width: 25px;
  height: 25px;
  border-radius: 100%;
  background: var(--svc-canvas);
  flex: 0 0 auto;
  transition: transform .45s var(--svc-ease-over);
}
.svc-jacc-ico::before, .svc-jacc-ico::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background: var(--svc-ink);
  transform: translate(-50%, -50%);
}
.svc-jacc-ico::before { width: 11px; height: 2px; }
.svc-jacc-ico::after { width: 2px; height: 11px; }
.svc-jacc.is-open .svc-jacc-ico { transform: rotate(180deg); }
.svc-jacc.is-open .svc-jacc-ico::after { opacity: 0; }
.svc-jacc-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .45s var(--svc-ease-over);
}
.svc-jacc.is-open .svc-jacc-panel { grid-template-rows: 1fr; }
.svc-jacc-inner {
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.svc-jacc-inner > .svc-jcol { padding-bottom: 20px; }
.svc-jcol-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--svc-muted);
  margin-bottom: 10px;
}
.svc-jlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.svc-jlist li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.4;
  color: var(--svc-ink);
}
.svc-jlist li::before {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  border-radius: 100%;
  transform: translateY(2px);
  background-position: center;
  background-repeat: no-repeat;
  content: "";
}
.svc-jlist.is-for li::before {
  background-color: #4C9A64;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.4 2.4 4.6-4.8' fill='none' stroke='%23FFFFFA' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: 11px;
}
.svc-jlist.is-not li { color: var(--svc-muted); }
.svc-jlist.is-not li::before {
  background-color: #C25D5D;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3.5 3.5l5 5M8.5 3.5l-5 5' fill='none' stroke='%23FFFFFA' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  background-size: 10px;
}

/* the full-width CTA bar closing the left panel */
.svc-jcta {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  margin: 0 10px 10px;
  border-radius: 40px;
  background: var(--svc-purple);
  color: var(--svc-invert);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.03em;
  text-decoration: none;
  transition: background-color .3s var(--svc-ease);
}
.svc-jcta:hover { background: var(--svc-purple-press); }
.svc-jcta--dark { background: var(--svc-dark); }
.svc-jcta--dark:hover { background: var(--svc-purple); }

/* right: the photo panel with the glass testimonial */
.svc-jmedia {
  position: relative;
  border-radius: 30px;
  overflow: hidden;
  min-height: 517px;
}
.svc-jmedia > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.svc-jtesti {
  position: absolute;
  right: 20px;
  bottom: 20px;
  width: 300px;
  margin: 0;
  padding: 20px;
  border-radius: 20px;
  background: var(--svc-glass);
  border: 1px solid var(--svc-glass-hair);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--svc-invert);
}
.svc-jstars { display: block; font-size: 12px; letter-spacing: 2px; color: #FFFFFA; }
.svc-jtesti blockquote {
  margin: 10px 0 0;
  font-size: 15px;
  line-height: 1.4;
  letter-spacing: -0.03em;
  font-weight: 600;
  color: #FFFFFA;
}
.svc-jtesti figcaption { display: flex; align-items: center; gap: 10px; margin-top: 15px; }
.svc-jtesti figcaption img { width: 29px; height: 29px; border-radius: 100%; object-fit: cover; }
.svc-jtesti figcaption span { display: flex; flex-direction: column; font-size: 13px; line-height: 1.35; letter-spacing: -0.025em; color: rgba(255, 255, 255, 0.8); }
.svc-jtesti figcaption strong { font-weight: 600; color: #FFFFFA; }

/* ---------- journey motion ----------
 * The roll-up: each card enters on the body tier (40px rise + fade,
 * .55s overshoot) when it crosses the viewport. Inside, the small
 * chrome (pills, chips) rises 10px with the site's 50ms sibling
 * stagger. The accordion opens ITSELF as the card arrives: rows rise
 * in sequence, the check discs pop on the overshoot curve. All of it
 * flat under reduced motion. */
.svc-jcard {
  opacity: 0.001;
  transform: translateY(40px);
  transition: opacity .55s var(--svc-ease), transform .55s var(--svc-ease-over);
}
.svc-jcard.is-in { opacity: 1; transform: none; }

.svc-jcard .svc-jmark,
.svc-jcard .svc-jpill,
.svc-jcard .svc-jcount,
.svc-jcard .svc-jchips span {
  opacity: 0.001;
  transform: translateY(10px) scale(0.9);
  transition: opacity .4s var(--svc-ease), transform .4s var(--svc-ease-over);
}
.svc-jcard.is-in .svc-jmark { transition-delay: 100ms; }
.svc-jcard.is-in .svc-jpill { transition-delay: 150ms; }
.svc-jcard.is-in .svc-jcount { transition-delay: 200ms; }
.svc-jcard.is-in .svc-jchips span:nth-child(1) { transition-delay: 200ms; }
.svc-jcard.is-in .svc-jchips span:nth-child(2) { transition-delay: 250ms; }
.svc-jcard.is-in .svc-jchips span:nth-child(3) { transition-delay: 300ms; }
.svc-jcard.is-in .svc-jchips span:nth-child(4) { transition-delay: 350ms; }
.svc-jcard.is-in .svc-jmark,
.svc-jcard.is-in .svc-jpill,
.svc-jcard.is-in .svc-jcount,
.svc-jcard.is-in .svc-jchips span { opacity: 1; transform: none; }

/* accordion rows animate as the panel opens */
.svc-jacc .svc-jcol-label,
.svc-jacc .svc-jlist li {
  opacity: 0.001;
  transform: translateY(10px);
  transition: opacity .4s var(--svc-ease), transform .4s var(--svc-ease-over);
}
.svc-jacc .svc-jlist li::before {
  transform: translateY(2px) scale(0.4);
  transition: transform .45s var(--svc-ease-over);
}
.svc-jacc.is-open .svc-jcol-label,
.svc-jacc.is-open .svc-jlist li { opacity: 1; transform: none; }
.svc-jacc.is-open .svc-jlist li::before { transform: translateY(2px) scale(1); }
.svc-jacc.is-open .svc-jcol-label { transition-delay: 120ms; }
.svc-jacc.is-open .svc-jlist li:nth-child(1) { transition-delay: 170ms; }
.svc-jacc.is-open .svc-jlist li:nth-child(2) { transition-delay: 220ms; }
.svc-jacc.is-open .svc-jlist li:nth-child(3) { transition-delay: 270ms; }
.svc-jacc.is-open .svc-jlist li:nth-child(4) { transition-delay: 320ms; }
.svc-jacc.is-open .svc-jlist li:nth-child(1)::before { transition-delay: 170ms; }
.svc-jacc.is-open .svc-jlist li:nth-child(2)::before { transition-delay: 220ms; }
.svc-jacc.is-open .svc-jlist li:nth-child(3)::before { transition-delay: 270ms; }
.svc-jacc.is-open .svc-jlist li:nth-child(4)::before { transition-delay: 320ms; }

@media (prefers-reduced-motion: reduce) {
  .svc-jcard, .svc-jcard .svc-jmark, .svc-jcard .svc-jpill, .svc-jcard .svc-jcount,
  .svc-jcard .svc-jchips span, .svc-jacc .svc-jcol-label, .svc-jacc .svc-jlist li {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
  .svc-jacc .svc-jlist li::before { transform: translateY(2px) !important; transition: none !important; }
  .svc-jacc-panel { transition: none !important; }
}

/* the Coming soon card — same anatomy, wearing a sticker. No accordion,
   so the fixed card height would leave a void: centre the content. */
.svc-jcard--soon .svc-jtop { justify-content: center; gap: 25px; }
.svc-jcard--soon .svc-jtop h3 { margin-top: 0; }
.svc-jcard--soon .svc-jbody { margin-top: 0; }
.svc-jcard--soon .svc-joffer { margin-top: 0; padding-top: 0; }
.svc-jcard--soon .svc-jtop, .svc-jcard--soon .svc-jmedia { opacity: 0.55; }
.svc-jcard--soon .svc-jmedia > img { filter: saturate(0.4); }
.svc-jcta--soon { background: rgba(36, 36, 36, 0.35); cursor: default; }
.svc-jcta--soon:hover { background: rgba(36, 36, 36, 0.35); }
.svc-jsticker {
  position: absolute;
  top: 34px;
  right: -14px;
  z-index: 2;
  transform: rotate(6deg);
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 22px;
  border-radius: 40px;
  background: var(--svc-purple);
  color: #FFFFFA;
  font-family: 'Manrope Variable', 'Manrope', sans-serif;
  font-variation-settings: 'wght' 585;
  font-size: 15px;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

/* ---------- buttons ---------- */
.svc-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 25px;
  border-radius: 40px;
  border: 0;
  text-decoration: none;
  font-family: 'Manrope', sans-serif;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.5;
  cursor: pointer;
  align-self: flex-start;
  transition: background-color .3s var(--svc-ease), color .3s var(--svc-ease);
}
.svc-btn:active { transform: scale(0.98); }

.svc-btn--purple { background: var(--svc-purple); color: var(--svc-invert); }
.svc-btn--purple .svc-dot { background: var(--svc-invert); }
.svc-btn--purple:hover { background: var(--svc-purple-press); }

.svc-btn--dark { background: var(--svc-dark); color: var(--svc-invert); }
.svc-btn--dark .svc-dot { background: var(--svc-purple); }
.svc-btn--dark:hover { background: var(--svc-purple); }
.svc-btn--dark:hover .svc-dot { background: var(--svc-invert); }

.svc-btn--light { background: var(--svc-canvas); color: var(--svc-ink); }
.svc-btn--light .svc-dot { background: var(--svc-purple); }
.svc-btn--light:hover { background: var(--svc-surface); }

/* ============================================================
   CLOSING — the purple sandwich
   ============================================================ */
.svc-close-band {
  background: var(--svc-purple);
  margin-top: 120px;
  padding: 120px 20px 20px;
}
.svc-close-inner {
  max-width: 1600px;
  margin: 0 auto 100px;
  padding: 0 40px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
}
.svc-close-inner h2 {
  font-size: 80px;
  line-height: 1.05;
  letter-spacing: -0.04em;
  color: var(--svc-surface-2);
}
.svc-close-inner p {
  font-size: 20px;
  line-height: 1.35;
  color: var(--svc-on-purple);
  max-width: 520px;
}
.svc-close-inner .svc-btn { align-self: center; }

/* ============================================================
   FOOTER — static replica of the site footer:
   canvas card at radius 40 inside the purple band.
   ============================================================ */
.svc-footer {
  background: var(--svc-canvas);
  border-radius: 40px;
  max-width: 1400px;
  margin: 0 auto;
  padding: 120px 40px 0;
}
.svc-footer-top {
  /* real Top row: two 635px columns, 50px gap (same rhythm as Middle) */
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  padding-bottom: 80px;
}
.svc-footer-logo img { width: 101px; height: 21px; }
.svc-footer-addr {
  /* real: 13px/19.5, 20px under the logo */
  margin-top: 20px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--svc-muted);
  letter-spacing: -0.025em;
  max-width: 240px;
}
.svc-footer-quote {
  /* real: 30px/39px, static Manrope 600, -0.04em, 600px wide, 10px down */
  margin-top: 10px;
  font-size: 30px;
  line-height: 1.3;
  letter-spacing: -0.04em;
  font-family: 'Manrope', 'Manrope Placeholder', sans-serif;
  font-weight: 600;
  max-width: 600px;
}
.svc-footer-contact {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 30px;
  margin-top: 30px;
  font-size: 15px;
}
.svc-footer-contact a {
  color: var(--svc-ink);
  text-decoration: underline;
  text-decoration-color: var(--svc-purple);
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
}
.svc-footer-mid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  padding-bottom: 80px;
}
.svc-footer-col h4 {
  margin: 0 0 19px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--svc-muted);
  text-transform: none;
}
.svc-footer-col { font-size: 15px; }
.svc-footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.svc-footer-col a { color: var(--svc-ink); text-decoration: none; transition: color .3s var(--svc-ease-sym); }
.svc-footer-col a:hover { color: var(--svc-purple); }
/* real Middle: Socials stacked over Legal (50px gap) in col 1, Navigation col 2 */
.svc-footer-cols2 { display: flex; flex-direction: column; gap: 50px; align-items: flex-start; }
.svc-footer-social { display: flex; gap: 10px; }
.svc-footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 37px; height: 37px;
  border-radius: 100%;
  background: var(--svc-surface);
  color: var(--svc-ink);
  transition: background-color .3s var(--svc-ease), color .3s var(--svc-ease);
}
.svc-footer-social a:hover { background: var(--svc-purple); color: var(--svc-invert); }
.svc-footer-social svg { width: 18px; height: 18px; }
/* real Legal links sit in a row, 20px apart */
.svc-footer-col ul.svc-legal-row { flex-direction: row; gap: 20px; }
/* real Navigation links: 30px/39px, 7px dot, purple pill + white roll on hover */
.svc-footer-navcol ul { gap: 15px; }
.svc-footer-navcol ul a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 30px;
  line-height: 39px;
  letter-spacing: -0.04em;
  font-weight: 600;
  color: var(--svc-ink);
}
.svc-footer-navcol ul a::before {
  /* the dot bullet (real: 7px, #242424) */
  content: "";
  width: 7px; height: 7px;
  border-radius: 100%;
  background: var(--svc-ink);
  flex: 0 0 auto;
  position: relative;
  z-index: 2;
  transition: background-color .3s var(--svc-ease-sym);
}
.svc-footer-navcol ul a::after {
  /* the hover pill (real: item box +19px left / +11px right, radius 30) */
  content: "";
  position: absolute;
  inset: -1px -11px -1px -19px;
  border-radius: 30px;
  background: var(--svc-purple);
  opacity: 0;
  z-index: 0;
  transition: opacity .3s var(--svc-ease-sym);
}
.svc-footer-navcol ul a:hover::after, .svc-footer-navcol ul a:focus-visible::after { opacity: 1; }
.svc-footer-navcol ul a:hover::before, .svc-footer-navcol ul a:focus-visible::before { background: var(--svc-invert); }
.svc-footer-navcol .svc-froll { z-index: 1; }
.svc-footer-navcol .svc-froll::after { color: var(--svc-invert); }
/* the roll triggers from the whole link, incoming copy is white on the pill */
.svc-footer-navcol ul a:hover .svc-froll span, .svc-footer-navcol ul a:focus-visible .svc-froll span { transform: translateY(-110%) rotate(13deg); opacity: 0; }
.svc-footer-navcol ul a:hover .svc-froll::after, .svc-footer-navcol ul a:focus-visible .svc-froll::after { transform: translateY(0) rotate(0deg); opacity: 1; }
.svc-footer-bottom { padding: 0; }
.svc-footer-wordmark {
  /* the real footer's giant purple text wordmark. Measured off the live Framer
     footer 2026-08-24: "selr" at 406.99px (card 1400), line-height 0.7em,
     letter-spacing -0.04em, wght 585, box hugging the text (977.5px wide) and
     left-aligned 40px in from the card edge, bottom flush with the card edge. */
  width: fit-content;
  margin: 0;
  font-family: 'Manrope Variable', 'Manrope', sans-serif;
  font-variation-settings: 'wght' 585;
  font-size: min(491.06px, calc((100vw - 40px) * 0.35076));
  line-height: 0.7;
  letter-spacing: -0.04em;
  color: #6736E2;
  user-select: none;
  pointer-events: none;
  transform-origin: 50% 50%;
  will-change: transform;
}
.svc-footer-legalrow {
  display: flex;
  justify-content: center;
  padding: 20px 0 30px;
  font-size: 13px;
  color: var(--svc-muted);
  letter-spacing: -0.025em;
}

/* ============================================================
   MOTION — the site's entrance system, gated on reduced motion
   ============================================================ */
@keyframes svc-word-in {
  from { opacity: 0.001; filter: blur(5px); transform: translateY(2px) scale(0.9); }
  to   { opacity: 1; filter: blur(0); transform: none; }
}
.svc-reveal > span { display: inline-block; animation: svc-word-in 660ms var(--svc-ease-over) both; }
.svc-reveal > span:nth-child(1) { animation-delay: 0ms; }
.svc-reveal > span:nth-child(2) { animation-delay: 20ms; }
.svc-reveal > span:nth-child(3) { animation-delay: 40ms; }
.svc-reveal > span:nth-child(4) { animation-delay: 60ms; }
.svc-reveal > span:nth-child(5) { animation-delay: 80ms; }
.svc-reveal > span:nth-child(6) { animation-delay: 100ms; }
.svc-reveal > span:nth-child(7) { animation-delay: 120ms; }
.svc-reveal > span:nth-child(8) { animation-delay: 140ms; }
.svc-reveal > span:nth-child(9) { animation-delay: 160ms; }
.svc-reveal > span:nth-child(10) { animation-delay: 180ms; }
.svc-reveal > span:nth-child(n+11) { animation-delay: 200ms; }
.svc-reveal-block { animation: svc-word-in 860ms var(--svc-ease-over) both; animation-delay: 200ms; }

.svc-rise {
  opacity: 0.001;
  transform: translateY(40px);
  transition: opacity .55s var(--svc-ease), transform .55s var(--svc-ease-over);
}
.svc-rise.is-in { opacity: 1; transform: none; }
.svc-stagger > .svc-rise:nth-child(2) { transition-delay: 50ms; }
.svc-stagger > .svc-rise:nth-child(3) { transition-delay: 100ms; }
.svc-stagger > .svc-rise:nth-child(4) { transition-delay: 150ms; }

@media (prefers-reduced-motion: reduce) {
  .svc-reveal > span, .svc-reveal-block { animation: none; }
  .svc-rise { opacity: 1; transform: none; transition: none; }
}

/* ============================================================
   RESPONSIVE — Framer's own breakpoints, 810 and 1200
   ============================================================ */
@media (max-width: 1199px) {
  .svc-shell { padding: 0 40px; }
  .svc-hero { padding-top: 150px; }
  .svc-hero-title { font-size: 80px; }
  .svc-hero-lead { font-size: 20px; }
  .svc-jcard { grid-template-columns: 1fr; }
  .svc-jmedia { min-height: 380px; }
  .svc-jleft { min-height: 0; }
  .svc-jtop { padding: 30px; }
  .svc-close-inner h2 { font-size: 60px; }
}

@media (max-width: 809px) {
  .svc-shell { padding: 0 20px; }
  .svc-section { padding-top: 60px; }
  .svc-hero { padding-top: 130px; }
  .svc-hero-title { font-size: 50px; }
  .svc-hero-lead { font-size: 17px; }
  .svc-section#journey { padding-top: 40px; }
  .svc-jsteps { gap: 20px; }
  .svc-jleft h3 { font-size: 25px; }
  .svc-jtop { padding: 20px; }
  .svc-jhead { flex-wrap: wrap; }
  .svc-jcount { display: none; }
  .svc-jmedia { min-height: 320px; }
  .svc-jtesti { left: 10px; right: 10px; bottom: 10px; width: auto; }
  .svc-jacc-inner { grid-template-columns: 1fr; gap: 0; }
  .svc-jsticker { top: 20px; right: 6px; height: 34px; font-size: 13px; padding: 0 16px; }
  .svc-close-band { margin-top: 60px; padding-top: 60px; }
  .svc-close-inner { margin-bottom: 50px; padding: 0 20px; }
  .svc-close-inner h2 { font-size: 35px; }
  .svc-close-inner p { font-size: 17px; }
  .svc-footer { padding: 60px 20px 0; }
  .svc-footer-top, .svc-footer-mid { grid-template-columns: 1fr; gap: 40px; padding-bottom: 50px; }
  .svc-footer-cols2 { grid-template-columns: 1fr; }
  .svc-footer-quote { font-size: 20px; }
}

/* Footer parity with the Framer pages: newsletter + founder card (2026-08-24) */
.svc-footer-sub { margin-top: 28px; max-width: 320px; }
.svc-footer-sub h4 { font: 500 15px/1.4 "Manrope", "Manrope Placeholder", sans-serif; color: #242424; margin: 0 0 12px; }
.svc-sub-form { display: flex; gap: 8px; align-items: center; }
.svc-sub-form input { flex: 1; min-width: 0; padding: 11px 16px; border: 1px solid rgba(36,36,36,.15); border-radius: 999px; background: #FFFFFA; font: 500 13px/1.2 "Manrope", "Manrope Placeholder", sans-serif; color: #242424; }
.svc-sub-form input::placeholder { color: #616161; }
.svc-sub-form button { display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; border: 0; border-radius: 999px; background: #242424; color: #FFFFFA; font: 600 13px/1.2 "Manrope", "Manrope Placeholder", sans-serif; cursor: pointer; white-space: nowrap; }
.svc-sub-form button .svc-dot { width: 10px; height: 10px; border-radius: 999px; background: #FFFFFA; transition: background .2s; }
.svc-sub-form button:hover .svc-dot { background: #6736E2; }
.svc-sub-form button[disabled] { opacity: .7; cursor: default; }
.svc-sub-note { margin: 10px 0 0; font: 500 12px/1.5 "Manrope", "Manrope Placeholder", sans-serif; color: #616161; }
.svc-sub-note a { color: inherit; text-decoration: underline; }
.svc-footer-founder { display: flex; align-items: center; gap: 12px; margin: 22px 0 18px; }
.svc-footer-founder img { width: 56px; height: 56px; border-radius: 999px; object-fit: cover; }
.svc-founder-name { display: block; font: 600 15px/1.3 "Manrope", "Manrope Placeholder", sans-serif; color: #242424; }
.svc-founder-role { display: block; font: 500 13px/1.4 "Manrope", "Manrope Placeholder", sans-serif; color: #616161; }
.svc-footer-cols2 .selr-fpartner { width: 100%; margin-top: 0; }
.svc-footer-cols2 .selr-fpartner-badge { width: 126px; height: auto; }
@media (max-width: 809px) { .svc-footer-sub { max-width: 100%; } }


/* Footer motion parity with the Framer pages (measured 2026-08-24) */
.svc-footer { transform-origin: 50% 50%; will-change: transform; }
.svc-froll { position: relative; display: inline-block; overflow: hidden; }
.svc-froll span { display: inline-block; transition: transform .45s cubic-bezier(0.22, 1, 0.36, 1), opacity .45s cubic-bezier(0.22, 1, 0.36, 1); }
.svc-froll::after { content: attr(data-text); position: absolute; left: 0; top: 0; opacity: 0; transform: translateY(110%) rotate(-13deg); transform-origin: 0 100%; transition: transform .45s cubic-bezier(0.22, 1, 0.36, 1), opacity .45s cubic-bezier(0.22, 1, 0.36, 1); }
.svc-froll:hover span, .svc-froll:focus-visible span { transform: translateY(-110%) rotate(13deg); opacity: 0; }
.svc-froll:hover::after, .svc-froll:focus-visible::after { transform: translateY(0) rotate(0deg); opacity: 1; }
.svc-footer-contact a[href^="tel"] { opacity: .7; }
.svc-copy-email { position: relative; }
.svc-copy-email .svc-copied-bubble { position: absolute; left: 50%; top: -34px; transform: translateX(-50%) rotate(-13deg) scale(.87); opacity: 0; background: #242424; color: #FFFFFA; font: 600 12px/1 "Manrope", "Manrope Placeholder", sans-serif; padding: 7px 12px; border-radius: 999px; pointer-events: none; white-space: nowrap; transition: transform .35s cubic-bezier(0.22, 1, 0.36, 1), opacity .35s cubic-bezier(0.22, 1, 0.36, 1); }
.svc-copy-email.is-copied .svc-copied-bubble { opacity: 1; transform: translateX(-50%) rotate(0deg) scale(1); }
@media (prefers-reduced-motion: reduce) {
  .svc-footer { transform: none !important; }
  .svc-froll span, .svc-froll::after, .svc-copy-email .svc-copied-bubble { transition: none; }
}


/* Wordmark crops at the card bottom edge, copyright bottom-right (real footer) */
.svc-footer { position: relative; overflow: hidden; }
.svc-footer-legalrow { position: absolute; right: 40px; bottom: 20px; padding: 0; text-align: right; z-index: 2; }
@media (max-width: 809px) { .svc-footer-legalrow { right: 24px; bottom: 20px; } }

/* Footer parity round 3 — re-measured off the live Framer footer (2026-08-24):
   heading 45px/1.1 wght585 -0.04em, 48px under the address, form 30px under it */
.svc-footer-sub { margin-top: 50px; max-width: 400px; }
.svc-footer-sub h4 { font-family: 'Manrope Variable', 'Manrope', sans-serif; font-variation-settings: 'wght' 585; font-size: 45px; line-height: 1.1; letter-spacing: -0.04em; color: #242424; margin: 0 0 30px; font-weight: normal; }
.svc-sub-form { position: relative; display: block; }
.svc-sub-form input { width: 100%; padding: 17px 128px 17px 22px; border: 0; border-radius: 999px; background: #FFFFFA; font: 500 14px/1.2 "Manrope", "Manrope Placeholder", sans-serif; color: #242424; }
.svc-sub-form button { position: absolute; right: 5px; top: 5px; bottom: 5px; padding: 0 20px; background: #6736E2; color: #FFFFFA; }
.svc-sub-form button:hover .svc-dot { background: #242424; }
.svc-sub-note { display: flex; align-items: center; gap: 8px; margin-top: 20px; font-size: 13px; }
.svc-sub-check { width: 14px; height: 14px; border-radius: 999px; background: #FFFFFA; border: 1px solid rgba(36,36,36,.12); flex: 0 0 auto; }
/* real: 49px founder row 30px under the quote, contact block at y337 */
.svc-footer-founder { margin: 30px 0 0; }
.svc-footer-founder img { width: 49px; height: 49px; }
.svc-footer-contact { margin-top: 50px; }
.svc-founder-ava { position: relative; display: inline-block; line-height: 0; }
.svc-founder-badge { position: absolute; right: -2px; bottom: -2px; width: 18px; height: 18px; line-height: 0; }
.svc-founder-badge svg { width: 100%; height: 100%; }
.svc-footer-contact { display: block; }
.svc-contact-phone { display: block; font: 500 15px/1.5 "Manrope", "Manrope Placeholder", sans-serif; color: #242424; opacity: .7; margin-bottom: 10px; }
.svc-copy-email { display: inline-flex; align-items: center; gap: 12px; text-decoration: none !important; font-family: 'Manrope Variable', 'Manrope', sans-serif; font-variation-settings: 'wght' 585; font-size: 23px; letter-spacing: -0.02em; color: #242424; }
.svc-copy-ico { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 9px; background: #6736E2; flex: 0 0 auto; }
.svc-copy-ico svg { width: 15px; height: 15px; }
@media (max-width: 809px) { .svc-footer-sub h4 { font-size: 28px; } .svc-copy-email { font-size: 19px; } }
/* real form row: 44px tall, 16px/500 input text */
.svc-sub-form input { height: 44px; padding: 12px 130px 12px 15px; font-size: 16px; font-weight: 500; letter-spacing: -0.03em; }
.svc-sub-form button { right: 4px; top: 4px; bottom: 4px; }
.svc-sub-form button { padding: 0 24px; font-size: 14px; }


/* ============================================================
   FOOTER MOTION — measured off the live Framer footer, 2026-08-24.
   Source of truth: site/docs/footer-motion-measured.md.
   Three scroll-scrubbed movers, shared progress
   p = (viewportBottom - wrapTop) / wrapHeight, clamped 0..1:
     card      scale .85 -> 1   (desktop/tablet only, no smoothing)
     wordmark  scale .1  -> 1   (all breakpoints, no smoothing)
     circle    scale 1   -> 10  (desktop/tablet only, measured spring
                                 stiffness 503 / damping 80 / mass .1)
   The wrapper itself NEVER transforms — it is the progress source.
   ============================================================ */
.svc-footerwrap {
  /* the real footer wrapper: static, 20px gutter, Main's warm white behind
     the card until the purple circle floods it */
  position: relative;
  padding: 20px;
  background: var(--svc-surface-2);
}
.svc-footer-bgcircle {
  /* real: 600x600 circle, #6736E2, absolutely centered in the wrapper,
     painted behind the card and over everything before it in the page */
  position: absolute;
  left: 50%;
  top: 50%;
  width: 600px;
  height: 600px;
  margin: -300px 0 0 -300px;
  border-radius: 100%;
  background: var(--svc-purple);
  will-change: transform;
  transform-origin: 50% 50%;
}
.svc-footerwrap .svc-footer { max-width: 1400px; margin: 0 auto; }
@media (max-width: 809px) {
  /* real Phone variant: no circle, card never scales, 10px gutter,
     wordmark fitted to the narrower card (measured 185.7px at 430) */
  .svc-footerwrap { padding: 10px; }
  .svc-footer-bgcircle { display: none; }
  .svc-footer-wordmark { font-size: calc((100vw - 20px) * 0.45293); }
}
@media (prefers-reduced-motion: reduce) {
  .svc-footer-wordmark, .svc-footer-bgcircle { transform: none !important; }
}


/* Desktop rhythm pinned to the real card (2026-08-24): Top content 342.5 + 80,
   Middle content 279 + 80, so the wordmark row lands at y=902 and the card
   closes at 1244.8 like the real one. border-box, so padding included. */
@media (min-width: 810px) {
  .svc-footer-top { min-height: 422.5px; }
  .svc-footer-mid { min-height: 359px; }
}

/* fine alignment to the real card: nav list starts at y582 */
.svc-footer-navcol h4 { margin-bottom: 19px; }

/* .svc-body p { margin: 0 } outranks single-class margins — restate the
   measured p-margins at higher specificity (real: addr 20 under the logo,
   quote 10 down, note 20 under the form row) */
.svc-body p.svc-footer-addr { margin: 20px 0 0; }
.svc-body p.svc-footer-quote { margin: 10px 0 0; }
.svc-body p.svc-sub-note { margin: 20px 0 0; }
.svc-body p.svc-footer-wordmark { margin: 0; }
.svc-footer-logo { display: block; line-height: 0; }
/* the roll span's inline-block baseline padded the legal row to 29px; real is 23 */
.svc-legal-row li { line-height: 23px; }
.svc-legal-row a.svc-froll { display: block; }

/* the real footer text blocks use Chrome's balanced wrapping */
.svc-footer-addr, .svc-footer-quote, .svc-footer-sub h4 { text-wrap: balance; }