/**
 * Monthly SEO Services page-only extras.
 * Loaded only via seo.extra_css from MonthlySeoThemeHtmlSeeder.
 * Scoped to body.page-monthly / .monthly-theme-page — does not affect other pages.
 */
body.page-monthly .monthly-theme-page.theme-html-root {
  /* namespace hook */
}

body.page-monthly .monthly-theme-page .sec-paper,
body.page-monthly .monthly-theme-page .sec-mist,
body.page-monthly .monthly-theme-page .sec-ink {
  position: relative;
}

/* Keep shared KodRank hero; no theme "Monthly SEO Services" eyebrow */
body.page-monthly .hero-eyebrow {
  display: none !important;
}

/* Contact points: black checkmarks (not orange) */
html body.page-monthly.page-service #contact .contact-side .compare-list .mark.v {
  color: var(--graphite, #0d2029) !important;
}

/* Match on-page: breadcrumb→H1 gap + space under trust badges */
html body.page-monthly.page-service .hero {
  min-height: 0 !important;
  padding-top: calc(84px + 24px) !important;
  padding-bottom: clamp(64px, 8.5vh, 112px) !important;
  align-items: flex-start !important;
}
html body.page-monthly.page-service .hero .breadcrumb,
html body.page-monthly.page-service .hero .crumbs,
html body.page-monthly.page-theme-html .hero .breadcrumb {
  margin: 0 0 clamp(36px, 4vw, 52px) !important;
  padding-bottom: 0 !important;
}
html body.page-monthly.page-service .hero h1,
html body.page-monthly.page-theme-html .hero h1 {
  margin: 0 0 18px !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
}
html body.page-monthly.page-service .hero .lede,
html body.page-monthly.page-service .hero p.sub,
html body.page-monthly.page-service .hero .hero-sub {
  margin: 0 0 28px !important;
}
html body.page-monthly.page-service .hero .hero-actions,
html body.page-monthly.page-service .hero .hero-cta {
  margin: 0 0 clamp(28px, 3.5vw, 44px) !important;
}
html body.page-monthly.page-service .hero .hero-badges,
html body.page-monthly.page-service .hero .hero-trust,
html body.page-monthly.page-service .hero .hero-badges.hero-trust {
  margin-top: clamp(40px, 4.5vw, 64px) !important;
  margin-bottom: clamp(36px, 5vw, 64px) !important;
  padding-top: clamp(26px, 3vw, 36px) !important;
}
@media (max-width: 900px) {
  html body.page-monthly.page-service .hero {
    padding-top: calc(64px + 16px) !important;
    padding-bottom: clamp(52px, 7.5vh, 80px) !important;
  }
  html body.page-monthly.page-service .hero .lede,
  html body.page-monthly.page-service .hero p.sub {
    margin: 0 0 24px !important;
  }
}
@media (max-width: 680px) {
  html body.page-monthly.page-service .hero {
    padding-bottom: clamp(48px, 7vh, 68px) !important;
  }
}

/* Desktop: hero fills the viewport; background follows the section */
@media (min-width: 981px) {
  html body.page-monthly.page-service .hero {
    box-sizing: border-box !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
  }
  html body.page-monthly.page-service .hero .hero-bg,
  html body.page-monthly.page-service .hero .hero-veil {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
  }
}

/* Dark intro card: heading stays white on ink */
html body.page-monthly.page-service .monthly-theme-page #services .intro-aside h4,
html body.page-monthly.page-service .monthly-theme-page .intro-aside h4 {
  color: #fff !important;
}

/* Testimonial initials — circular ink badge, not role-text styles */
html body.page-monthly.page-service .monthly-theme-page #work .tst-who .avatar,
html body.page-monthly.page-service .monthly-theme-page .tst-who .avatar {
  width: 46px !important;
  height: 46px !important;
  min-width: 46px !important;
  min-height: 46px !important;
  border-radius: 50% !important;
  background: var(--ink, #0a1a22) !important;
  color: var(--signal, #f47a1f) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 700 !important;
  font-size: 0.92rem !important;
  line-height: 1 !important;
  letter-spacing: 0.02em !important;
  flex: none !important;
  text-align: center !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Shared hero accent word from theme title_html */
html body.page-monthly.page-service .hero h1 .pop,
html body.page-monthly.page-service .hero h1 span.pop {
  color: var(--signal, #f47a1f) !important;
  font-weight: 800 !important;
}

body.page-monthly .hero-badges.hero-trust,
body.page-monthly .hero-trust.hero-badges {
  margin-top: clamp(40px, 4.5vw, 64px);
  margin-bottom: clamp(36px, 5vw, 64px);
}

/* Included services: 3 cards per row on desktop */
@media (min-width: 981px) {
  html body.page-monthly.page-service .monthly-theme-page #included .why-mobile-carousel:has(> .svc-grid) {
    display: contents !important;
  }
  html body.page-monthly.page-service .monthly-theme-page #included .svc-grid,
  html body.page-monthly.page-service .monthly-theme-page #included .svc-grid[data-thm-carousel],
  html body.page-monthly.page-service .monthly-theme-page .why-mobile-carousel > .svc-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-auto-flow: row !important;
    gap: 22px !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
    flex-wrap: unset !important;
    scroll-snap-type: none !important;
    transform: none !important;
  }
  html body.page-monthly.page-service .monthly-theme-page #included .svc-grid > .svc-card,
  html body.page-monthly.page-service .monthly-theme-page #included .svc-grid > .svc,
  html body.page-monthly.page-service .monthly-theme-page .why-mobile-carousel > .svc-grid > * {
    flex: none !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    scroll-snap-align: unset !important;
    margin: 0 !important;
  }
}

/* Monthly loop: page photo behind the ink section (cards stay opaque) */
html body.page-monthly.page-service .monthly-theme-page #process.sec-ink,
html body.page-monthly.page-service .monthly-theme-page section#process {
  color: #b7cbd2 !important;
  background-color: var(--ink, #0a1a22) !important;
  background-image:
    linear-gradient(90deg, rgba(10, 26, 34, 0.94) 0%, rgba(10, 26, 34, 0.78) 38%, rgba(10, 26, 34, 0.42) 100%),
    linear-gradient(180deg, rgba(10, 26, 34, 0.35) 0%, rgba(10, 26, 34, 0.12) 46%, rgba(10, 26, 34, 0.5) 100%),
    url('../media/services/monthly-seo/monthly-seo-hero.jpg') !important;
  background-size: cover, cover, cover !important;
  background-position: center, center, right center !important;
  background-repeat: no-repeat !important;
}

/* Process loop cards: dark tiles, orange numbers, white copy */
html body.page-monthly.page-service .monthly-theme-page #process .loop-card,
html body.page-monthly.page-service .monthly-theme-page .loop-grid .loop-card,
html body.page-monthly.page-service .monthly-theme-page #process .svc-stack-item > .loop-card {
  background: var(--ink-2, #0f2a33) !important;
  background-color: var(--ink-2, #0f2a33) !important;
  border: 1px solid rgba(244, 122, 31, 0.28) !important;
  color: #fff !important;
}
html body.page-monthly.page-service .monthly-theme-page #process .loop-card h4,
html body.page-monthly.page-service .monthly-theme-page .loop-grid .loop-card h4,
html body.page-monthly.page-service .monthly-theme-page #process .loop-card p,
html body.page-monthly.page-service .monthly-theme-page .loop-grid .loop-card p {
  color: #fff !important;
}
html body.page-monthly.page-service .monthly-theme-page #process .loop-num,
html body.page-monthly.page-service .monthly-theme-page .loop-grid .loop-num,
html body.page-monthly.page-service .monthly-theme-page #process .loop-ico,
html body.page-monthly.page-service .monthly-theme-page #process .loop-ico svg {
  color: var(--signal, #f47a1f) !important;
}

/* ── Carousel dots (pain / included / process / testimonials) ── */
body.page-monthly .monthly-theme-page .testi-dots.thm-carousel-dots,
body.page-monthly .testi-dots.thm-carousel-dots {
  display: none;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  width: 100%;
  margin-top: 18px;
  padding: 4px 0;
  min-height: 18px;
}

body.page-monthly .monthly-theme-page .thm-carousel-dots .testi-dot,
body.page-monthly .thm-carousel-dots .testi-dot {
  width: 10px;
  height: 10px;
  min-width: 10px;
  min-height: 10px;
  border-radius: 50%;
  padding: 0;
  margin: 0;
  border: 2px solid transparent;
  background: #c5d4ce;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
  box-shadow: 0 0 0 8px transparent;
}

body.page-monthly .monthly-theme-page .thm-carousel-dots .testi-dot.is-active,
body.page-monthly .thm-carousel-dots .testi-dot.is-active {
  background: var(--signal, #f47a1f);
  border-color: rgba(244, 122, 31, 0.25);
  transform: scale(1.2);
  box-shadow: 0 0 0 6px rgba(244, 122, 31, 0.12);
}

body.page-monthly .thm-carousel-nav-wrap,
body.page-monthly .monthly-theme-page .thm-carousel-nav-wrap {
  display: none !important;
}

/* Sticky stack needs clip (not hidden) — overflow-x:hidden creates a scrollport and kills sticky */
html body.page-monthly.page-service .monthly-theme-page {
  overflow-x: clip;
}

/* Pain cards: desktop grid; mobile sticky stack (same as on-page #included .svc) */
@media (min-width: 901px) {
  html body.page-monthly.page-service .monthly-theme-page #services .pain-grid,
  html body.page-monthly.page-service .monthly-theme-page .pain-grid,
  html body.page-monthly.page-service .monthly-theme-page #process .loop-grid,
  html body.page-monthly.page-service .monthly-theme-page .loop-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 20px !important;
    overflow: visible !important;
    flex-direction: unset !important;
    flex-wrap: unset !important;
    width: 100% !important;
    max-width: 100% !important;
    scroll-snap-type: none !important;
    touch-action: auto !important;
  }
  html body.page-monthly.page-service .monthly-theme-page .pain-grid > .pain-card,
  html body.page-monthly.page-service .monthly-theme-page #process .loop-grid > .loop-card,
  html body.page-monthly.page-service .monthly-theme-page #process .loop-grid > .svc-stack-item {
    flex: unset !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    scroll-snap-align: unset !important;
  }
  html body.page-monthly.page-service .monthly-theme-page #process .loop-grid.page-svc-stack > .svc-stack-item,
  html body.page-monthly.page-service .monthly-theme-page #process .loop-grid[data-thm-stack] > .svc-stack-item {
    position: relative !important;
    top: auto !important;
    margin: 0 !important;
    transform: none !important;
    height: 100% !important;
  }
}
@media (min-width: 901px) and (max-width: 1080px) {
  html body.page-monthly.page-service .monthly-theme-page #process .loop-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 900px) {
  html body.page-monthly.page-service .monthly-theme-page section#services,
  html body.page-monthly.page-service .monthly-theme-page section#services.has-page-svc-stack {
    overflow-x: clip !important;
    overflow-y: visible !important;
  }

  /* Beat .page-service #services > .wrap { overflow:hidden } so sticky swipe-up works */
  html body.page-monthly.page-service .monthly-theme-page #services .wrap,
  html body.page-monthly.page-service .monthly-theme-page section#services.has-page-svc-stack > .wrap {
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
  }

  html body.page-monthly.page-service .monthly-theme-page #services .pain-grid[data-thm-stack],
  html body.page-monthly.page-service .monthly-theme-page #services .pain-grid.page-svc-stack,
  html body.page-monthly.page-service .monthly-theme-page .pain-grid[data-thm-stack],
  html body.page-monthly.page-service .monthly-theme-page .pain-grid.page-svc-stack {
    display: block !important;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
    gap: 0 !important;
    overflow: visible !important;
    transform: none !important;
    filter: none !important;
    contain: none !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex-direction: unset !important;
    flex-wrap: unset !important;
    align-items: stretch !important;
    scroll-snap-type: none !important;
    touch-action: auto !important;
    height: auto !important;
  }

  html body.page-monthly.page-service .monthly-theme-page #services .pain-grid .svc-stack-item,
  html body.page-monthly.page-service .monthly-theme-page .pain-grid .svc-stack-item,
  html body.page-monthly.page-service .monthly-theme-page #services .pain-grid[data-thm-stack] > *,
  html body.page-monthly.page-service .monthly-theme-page .pain-grid.page-svc-stack > * {
    position: sticky !important;
    top: calc(var(--svc-stack-nav, 68px) + (var(--index0, 0) * var(--svc-stack-peek, 14px))) !important;
    z-index: calc(1 + var(--index0, 0)) !important;
    display: block !important;
    flex: none !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    margin: 0 0 var(--svc-stack-gap, 20px) !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    transform: none !important;
    scroll-snap-align: unset !important;
    box-sizing: border-box !important;
  }

  html body.page-monthly.page-service .monthly-theme-page #services .pain-grid .svc-stack-item:last-child,
  html body.page-monthly.page-service .monthly-theme-page .pain-grid .svc-stack-item:last-child {
    margin-bottom: 0 !important;
  }

  html body.page-monthly.page-service .monthly-theme-page #services .pain-grid .svc-stack-item > .pain-card,
  html body.page-monthly.page-service .monthly-theme-page .pain-grid .svc-stack-item > .pain-card {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 160px !important;
    margin: 0 !important;
    flex: none !important;
    opacity: 1 !important;
    transform: none !important;
    background: #fff !important;
    box-sizing: border-box !important;
  }

  html body.page-monthly.page-service .monthly-theme-page #services .pain-grid .svc-stack-item > *:hover,
  html body.page-monthly.page-service .monthly-theme-page .pain-grid .svc-stack-item > *:hover {
    transform: none !important;
  }

  /* #process loop cards — swipe-up sticky stack */
  html body.page-monthly.page-service .monthly-theme-page section#process,
  html body.page-monthly.page-service .monthly-theme-page section#process.has-page-svc-stack {
    overflow-x: clip !important;
    overflow-y: visible !important;
  }
  html body.page-monthly.page-service .monthly-theme-page #process .wrap,
  html body.page-monthly.page-service .monthly-theme-page section#process.has-page-svc-stack > .wrap {
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
  }
  html body.page-monthly.page-service .monthly-theme-page #process .why-mobile-carousel:has(> .loop-grid) {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
    touch-action: auto !important;
    scroll-snap-type: none !important;
  }
  html body.page-monthly.page-service .monthly-theme-page #process .loop-grid[data-thm-stack],
  html body.page-monthly.page-service .monthly-theme-page #process .loop-grid.page-svc-stack {
    display: block !important;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
    gap: 0 !important;
    overflow: visible !important;
    transform: none !important;
    filter: none !important;
    contain: none !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex-direction: unset !important;
    flex-wrap: unset !important;
    scroll-snap-type: none !important;
    touch-action: auto !important;
    height: auto !important;
  }
  html body.page-monthly.page-service .monthly-theme-page #process .loop-grid .svc-stack-item,
  html body.page-monthly.page-service .monthly-theme-page #process .loop-grid[data-thm-stack] > *,
  html body.page-monthly.page-service .monthly-theme-page #process .loop-grid.page-svc-stack > * {
    position: sticky !important;
    top: calc(var(--svc-stack-nav, 68px) + (var(--index0, 0) * var(--svc-stack-peek, 14px))) !important;
    z-index: calc(1 + var(--index0, 0)) !important;
    display: block !important;
    flex: none !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    margin: 0 0 var(--svc-stack-gap, 20px) !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    transform: none !important;
    scroll-snap-align: unset !important;
    box-sizing: border-box !important;
  }
  html body.page-monthly.page-service .monthly-theme-page #process .loop-grid .svc-stack-item:last-child {
    margin-bottom: 0 !important;
  }
  html body.page-monthly.page-service .monthly-theme-page #process .loop-grid .svc-stack-item > .loop-card,
  html body.page-monthly.page-service .monthly-theme-page #process .loop-grid[data-thm-stack] .loop-card {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 160px !important;
    margin: 0 !important;
    flex: none !important;
    opacity: 1 !important;
    transform: none !important;
    background: var(--ink-2, #0f2a33) !important;
    background-color: var(--ink-2, #0f2a33) !important;
    border: 1px solid rgba(244, 122, 31, 0.28) !important;
    color: #fff !important;
    box-sizing: border-box !important;
  }
  html body.page-monthly.page-service .monthly-theme-page #process .loop-grid .svc-stack-item > *:hover {
    transform: none !important;
  }
  html body.page-monthly.page-service .monthly-theme-page #process .thm-carousel-dots,
  html body.page-monthly.page-service .monthly-theme-page #process .thm-carousel-nav-wrap,
  html body.page-monthly.page-service .monthly-theme-page #process .wrap > .testi-dots.thm-carousel-dots {
    display: none !important;
  }
}

@media (max-width: 980px) {
  body.page-monthly .monthly-theme-page .testi-dots.thm-carousel-dots,
  body.page-monthly .testi-dots.thm-carousel-dots {
    display: flex !important;
  }

  body.page-monthly .monthly-theme-page section#included,
  body.page-monthly .monthly-theme-page section#process,
  body.page-monthly .monthly-theme-page section#work,
  body.page-monthly .monthly-theme-page section:has(.svc-grid),
  body.page-monthly .monthly-theme-page section:has(.loop-grid),
  body.page-monthly .monthly-theme-page section:has(.tst-grid),
  body.page-monthly .monthly-theme-page section:has([data-thm-carousel]),
  body.page-monthly .monthly-theme-page section:has(.why-mobile-carousel) {
    overflow-x: clip !important;
    overflow-y: visible !important;
  }

  body.page-monthly .monthly-theme-page .why-mobile-carousel:has(> .svc-grid),
  body.page-monthly .monthly-theme-page .why-mobile-carousel:has(> .tst-grid) {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
    touch-action: auto !important;
    scroll-snap-type: none !important;
  }

  /* Beat webdev-ref sticky-stack — 1 card per swipe (not pain-grid / process stack) */
  html body.page-monthly.page-service .monthly-theme-page #included .svc-grid[data-thm-carousel],
  html body.page-monthly.page-service .monthly-theme-page #included .svc-grid.thm-mobile-carousel,
  html body.page-monthly.page-service .monthly-theme-page #included .svc-grid,
  html body.page-monthly.page-service .monthly-theme-page #work .tst-grid[data-thm-carousel],
  html body.page-monthly.page-service .monthly-theme-page #work .tst-grid.thm-mobile-carousel,
  html body.page-monthly.page-service .monthly-theme-page #work .tst-grid,
  html body.page-monthly.page-service .monthly-theme-page .why-mobile-carousel > .svc-grid,
  html body.page-monthly.page-service .monthly-theme-page .why-mobile-carousel > .tst-grid {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 14px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    width: 100% !important;
    max-width: 100% !important;
    padding-bottom: 4px !important;
    touch-action: pan-x !important;
  }

  html body.page-monthly.page-service .monthly-theme-page .svc-grid::-webkit-scrollbar,
  html body.page-monthly.page-service .monthly-theme-page .tst-grid::-webkit-scrollbar {
    display: none !important;
  }

  html body.page-monthly.page-service .monthly-theme-page .svc-grid > .svc-card,
  html body.page-monthly.page-service .monthly-theme-page .tst-grid > .tst-card,
  html body.page-monthly.page-service .monthly-theme-page .why-mobile-carousel > .svc-grid > *,
  html body.page-monthly.page-service .monthly-theme-page .why-mobile-carousel > .tst-grid > * {
    flex: 0 0 min(86vw, 320px) !important;
    width: min(86vw, 320px) !important;
    max-width: min(86vw, 320px) !important;
    min-width: min(86vw, 320px) !important;
    scroll-snap-align: start !important;
  }

  body.page-monthly .monthly-theme-page #included .wrap > .testi-dots.thm-carousel-dots,
  body.page-monthly .monthly-theme-page #work .wrap > .testi-dots.thm-carousel-dots,
  body.page-monthly .monthly-theme-page .why-mobile-carousel + .testi-dots.thm-carousel-dots {
    display: flex !important;
  }

  body.page-monthly .monthly-theme-page .testi-dots.thm-carousel-dots {
    justify-content: center;
  }
}