/* Service page extras — shared chrome lock + medium polish */

/*
 * Side gutters — single source in home.css (:root --pad / --maxw).
 * Do not override --pad or --maxw here; keep every page on the same shell.
 */
.page-service,
body.page-web-dev{
  --max:var(--maxw);
  --max-w:var(--maxw);
  --pad-x:var(--pad);
}

.page-service .hero {
  padding-top: calc(72px + 48px);
  padding-bottom: clamp(64px, 8vw, 110px);
  margin-top: 0 !important;
  position: relative;
  min-height: min(720px, 92vh) !important;
  display: flex !important;
  align-items: center !important;
}
.page-service .hero > .wrap,
.page-service .hero > .hero-in {
  width: 100%;
}
/* Full-bleed hero media under transparent nav — keep BEHIND copy */
.page-service .hero .hero-visual,
.page-service .hero .hero-bg,
.page-service .wp-hero .wp-hero-visual,
body.page-web-dev .hero .hero-media{
  top:0 !important;
  margin-top:0 !important;
  inset-block-start:0 !important;
}
.page-service .hero .hero-visual,
.page-service .hero .hero-bg{
  position:absolute;
  inset:0;
  z-index:0;
}
.page-service .hero .hero-veil{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
}
.page-service .hero > .wrap,
.page-service .hero > .hero-in,
.page-service .hero > .container,
.page-service .hero .hero-inner,
.page-service .hero .hero-copy,
.page-service .wp-hero > .wrap,
.page-service .wp-hero .wp-hero-copy,
body.page-web-dev .hero > .hero-in,
body.page-web-dev .hero > .wrap{
  position:relative;
  z-index:2;
}
/* All standalone themes: same hero sizing as SEO service pages */
.page-service .cms-page .hero,
.page-service .shop-page .hero,
.page-service .saas-page .hero,
.page-service .mo-page .hero,
.page-service .b2b-page .hero,
.page-service .ecom-page .hero,
.page-service .wpseo-page .hero,
.page-service .rd-page .hero,
.page-service .ac-page .hero,
.page-service .hc-page .hero,
.page-service .gp-page .hero,
.page-service .rest-page .hero,
.page-service .re-page .hero,
.page-service .elec-page .hero,
.page-service .saas-dev-page .hero{
  padding-top:calc(72px + 48px);
  padding-bottom:clamp(64px,8vw,110px);
  min-height:min(720px,92vh);
  display:flex;
  align-items:center;
}
@media (max-width:900px){
  .page-service .cms-page .hero,
  .page-service .shop-page .hero,
  .page-service .saas-page .hero,
  .page-service .mo-page .hero,
  .page-service .b2b-page .hero,
  .page-service .ecom-page .hero,
  .page-service .wpseo-page .hero,
  .page-service .rd-page .hero,
  .page-service .ac-page .hero{
    padding-top:calc(56px + 8px);
    padding-bottom:24px;
  }
  .cms-page .hero-copy{padding-top:0}
  .shop-page .hero-inner{padding-top:0}
  .saas-page .hero-copy{padding-top:0}
  .mo-page .hero-inner{padding-top:0}
  .b2b-page .hero-copy{padding-top:0}
  .ecom-page .hero-copy{padding-top:0}
  .wpseo-page .hero-inner{padding-top:0}
}
@media (max-width:680px){
  .page-service .cms-page .hero,
  .page-service .shop-page .hero,
  .page-service .saas-page .hero,
  .page-service .mo-page .hero,
  .page-service .rd-page .hero,
  .page-service .ac-page .hero{
    padding-top:calc(56px + 6px);
    padding-bottom:20px;
  }
}
body.page-web-dev .hero {
  padding-top: 0;
}

/* Same shell as homepage: logo (nav-in) + content (.wrap) share one edge */
.page-service .wrap,
.page-service .nav-in,
.page-service .hero-in,
.page-service .container,
body.page-web-dev .wrap,
body.page-web-dev .nav-in,
body.page-web-dev .hero-in,
body.page-web-dev .container{
  width:100%;
  max-width:var(--maxw) !important;
  margin-left:auto;
  margin-right:auto;
  padding-left:var(--pad) !important;
  padding-right:var(--pad) !important;
  box-sizing:border-box;
}

/*
 * Shared site navbar — same metrics as homepage.
 * Transparent at top; white only when .stuck (on scroll).
 */
.page-service header.nav,
body.page-web-dev header.nav{
  position:fixed !important;
  inset:0 0 auto 0 !important;
  z-index:60 !important;
  background:transparent !important;
  background-color:transparent !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  border:0 !important;
  border-bottom:0 !important;
  box-shadow:none !important;
}
.page-service header.nav.stuck,
body.page-web-dev header.nav.stuck{
  background:rgba(255,255,255,.94) !important;
  background-color:rgba(255,255,255,.94) !important;
  backdrop-filter:saturate(180%) blur(14px) !important;
  -webkit-backdrop-filter:saturate(180%) blur(14px) !important;
  border-bottom:1px solid var(--line) !important;
  box-shadow:none !important;
}
.page-service .nav-in,
body.page-web-dev .nav-in{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:28px !important;
  height:72px !important;
  max-width:var(--maxw) !important;
  margin-left:auto !important;
  margin-right:auto !important;
  padding-left:var(--pad) !important;
  padding-right:var(--pad) !important;
  box-sizing:border-box !important;
}
.page-service .nav .brand,
body.page-web-dev .nav .brand{
  display:flex !important;
  align-items:center !important;
  gap:0 !important;
  font-family:"Poppins",sans-serif !important;
  font-weight:700 !important;
  font-size:1.16rem !important;
  color:#fff !important;
  letter-spacing:-.02em !important;
  margin:0 !important;
  line-height:0 !important;
}
.page-service header.nav.stuck .brand,
body.page-web-dev header.nav.stuck .brand{
  color:var(--graphite) !important;
}
.page-service .nav .brand-logo,
body.page-web-dev .nav .brand-logo{
  display:block !important;
  height:36px !important;
  width:auto !important;
  max-width:min(156px,42vw) !important;
  object-fit:contain !important;
  transition:filter .25s ease;
}
.page-service header.nav:not(.stuck) .brand-logo,
body.page-web-dev header.nav:not(.stuck) .brand-logo{
  filter:brightness(0) invert(1);
}
.page-service header.nav.stuck .brand-logo,
body.page-web-dev header.nav.stuck .brand-logo{
  filter:none;
}
.page-service .nav .brand-mark,
body.page-web-dev .nav .brand-mark{
  width:32px !important;
  height:32px !important;
  border-radius:9px !important;
  background:var(--signal) !important;
  flex:none !important;
}
.page-service .nav-links,
body.page-web-dev .nav-links{
  display:flex !important;
  align-items:center !important;
  gap:38px !important;
  margin-left:auto !important;
  margin-right:0 !important;
  font-size:.98rem !important;
  font-weight:600 !important;
  letter-spacing:-.01em !important;
  list-style:none !important;
  padding:0 !important;
  position:static !important;
  background:transparent !important;
  box-shadow:none !important;
  flex-direction:row !important;
  max-height:none !important;
  overflow:visible !important;
  border:0 !important;
  width:auto !important;
}
/* Top-level links only — never paint mega panel white-on-white */
.page-service .nav-links > a,
body.page-web-dev .nav-links > a{
  color:rgba(255,255,255,.82) !important;
  font-weight:600 !important;
  font-size:.98rem !important;
  padding:0 !important;
  width:auto !important;
}
.page-service header.nav.stuck .nav-links > a,
body.page-web-dev header.nav.stuck .nav-links > a{
  color:var(--slate) !important;
}
.page-service .nav-links > a:hover,
body.page-web-dev .nav-links > a:hover{
  color:var(--signal) !important;
}
.page-service header.nav.stuck .nav-links > a:hover,
body.page-web-dev header.nav.stuck .nav-links > a:hover{
  color:var(--graphite) !important;
}
.page-service .nav .nav-mega-trigger,
body.page-web-dev .nav .nav-mega-trigger{
  color:rgba(255,255,255,.82) !important;
  font-size:.98rem !important;
  font-weight:600 !important;
  gap:6px !important;
  padding:0 !important;
  width:auto !important;
  background:none !important;
  border:0 !important;
  display:inline-flex !important;
  align-items:center !important;
  cursor:pointer !important;
  font-family:inherit !important;
}
.page-service header.nav.stuck .nav-mega-trigger,
body.page-web-dev header.nav.stuck .nav-mega-trigger{
  color:var(--slate) !important;
}
.page-service .nav .nav-mega-trigger:hover,
.page-service .nav .has-mega:hover .nav-mega-trigger,
body.page-web-dev .nav .nav-mega-trigger:hover,
body.page-web-dev .nav .has-mega:hover .nav-mega-trigger{
  color:var(--signal) !important;
}
.page-service header.nav.stuck .nav-mega-trigger:hover,
.page-service header.nav.stuck .has-mega:hover .nav-mega-trigger,
body.page-web-dev header.nav.stuck .nav-mega-trigger:hover,
body.page-web-dev header.nav.stuck .has-mega:hover .nav-mega-trigger{
  color:var(--graphite) !important;
}

/* Mega dropdown — match homepage (readable on white panel) */
.page-service .nav .has-mega,
body.page-web-dev .nav .has-mega{
  position:static !important;
}
.page-service header.nav,
body.page-web-dev header.nav{
  z-index:100 !important;
}
@media (min-width:901px){
.page-service .nav .mega,
body.page-web-dev .nav .mega{
  position:absolute !important;
  left:0 !important;
  right:0 !important;
  top:100% !important;
  z-index:120 !important;
  background:#fff !important;
  border-top:1px solid var(--line) !important;
  box-shadow:0 30px 60px -24px rgba(13,32,41,.28) !important;
  opacity:0;
  visibility:hidden;
  transform:none;
  transition:opacity .18s ease,visibility .18s;
  color:var(--graphite) !important;
  /* Do NOT use pointer-events:none — it lets events fall through to the
     page under the panel and kills .has-mega:hover (dropdown closes). */
  pointer-events:auto;
}
.page-service .nav .mega::before,
body.page-web-dev .nav .mega::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:-18px;
  height:18px;
}
.page-service .nav .has-mega:hover .mega,
.page-service .nav .mega:hover,
.page-service .nav .mega.open,
body.page-web-dev .nav .has-mega:hover .mega,
body.page-web-dev .nav .mega:hover,
body.page-web-dev .nav .mega.open{
  opacity:1 !important;
  visibility:visible !important;
}
.page-service .nav .mega-in,
body.page-web-dev .nav .mega-in{
  display:grid !important;
  grid-template-columns:1.1fr 1fr 1fr !important;
  gap:clamp(28px,4vw,60px) !important;
  max-width:var(--maxw) !important;
  width:100% !important;
  margin:0 auto !important;
  padding:clamp(28px,3vw,44px) var(--pad) !important;
  box-sizing:border-box !important;
  background:transparent !important;
}
}

.page-service .nav .mega-intro h4,
body.page-web-dev .nav .mega-intro h4{
  font-size:1.3rem !important;
  color:var(--graphite) !important;
  margin:12px 0 10px !important;
}
.page-service .nav .mega-intro p,
body.page-web-dev .nav .mega-intro p{
  font-size:.92rem !important;
  color:var(--slate) !important;
  line-height:1.55 !important;
  max-width:32ch !important;
}
.page-service .nav .mega-cta,
body.page-web-dev .nav .mega-cta{
  display:inline-flex !important;
  align-items:center !important;
  gap:8px !important;
  margin-top:18px !important;
  font-weight:600 !important;
  font-size:.85rem !important;
  color:var(--signal) !important;
  padding:0 !important;
  width:auto !important;
}
.page-service .nav .mega-cta:hover,
body.page-web-dev .nav .mega-cta:hover{
  color:var(--signal-deep) !important;
}
.page-service .nav .mega-foot,
body.page-web-dev .nav .mega-foot{
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 var(--pad) clamp(22px,2.5vw,32px);
  display:flex;
  justify-content:flex-end;
}
.page-service .nav .mega-all-btn,
body.page-web-dev .nav .mega-all-btn{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  background:var(--signal) !important;
  color:var(--signal-ink) !important;
  font-weight:600 !important;
  font-size:.9rem !important;
  padding:12px 22px !important;
  border-radius:999px !important;
  width:auto !important;
}
.page-service .nav .mega-all-btn:hover,
body.page-web-dev .nav .mega-all-btn:hover{
  background:var(--signal-deep) !important;
  color:#fff !important;
}
.page-service .nav .mega-col .mega-head,
body.page-web-dev .nav .mega-col .mega-head{
  display:block !important;
  font-family:"Poppins",sans-serif !important;
  font-weight:700 !important;
  font-size:1.02rem !important;
  color:var(--graphite) !important;
  padding:0 0 14px !important;
  margin:0 0 12px !important;
  border-bottom:1px solid var(--line) !important;
  width:auto !important;
}
.page-service .nav .mega-col .mega-head:hover,
body.page-web-dev .nav .mega-col .mega-head:hover{
  color:var(--signal-deep) !important;
}
.page-service .nav .mega-col ul,
body.page-web-dev .nav .mega-col ul{
  list-style:none !important;
  margin:0 !important;
  padding:0 !important;
}
.page-service .nav .mega-col li a,
body.page-web-dev .nav .mega-col li a{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  padding:9px 0 !important;
  font-size:.94rem !important;
  font-weight:500 !important;
  color:var(--slate) !important;
  width:auto !important;
}
.page-service .nav .mega-col li a:hover,
body.page-web-dev .nav .mega-col li a:hover{
  color:var(--signal-deep) !important;
  padding-left:4px !important;
}
.page-service .nav-cta,
body.page-web-dev .nav-cta{
  display:flex !important;
  gap:10px !important;
  margin-left:38px !important;
  align-items:center !important;
}
.page-service .nav .nav-burger span,
body.page-web-dev .nav .nav-burger span{
  background:#fff !important;
}
.page-service header.nav.stuck .nav-burger span,
body.page-web-dev header.nav.stuck .nav-burger span{
  background:var(--graphite) !important;
}

/* Mobile: match homepage breakpoint (900px) + .is-open panel from home-extra */
@media (max-width:900px){
  .page-service .nav-in,
  body.page-web-dev .nav-in{
    position:relative !important;
    gap:8px !important;
    height:56px !important;
  }
  .page-service .nav-links,
  body.page-web-dev .nav-links{
    display:none !important;
    position:absolute !important;
    top:56px !important;
    left:0 !important;
    right:0 !important;
    flex-direction:column !important;
    align-items:stretch !important;
    gap:0 !important;
    margin-left:0 !important;
    background:#fff !important;
    padding:8px 16px 16px !important;
    border-bottom:1px solid var(--line) !important;
    z-index:80 !important;
    box-shadow:var(--shadow-md) !important;
    max-height:calc(100dvh - 56px) !important;
    overflow-y:auto !important;
    width:100% !important;
    text-align:left !important;
  }
  .page-service .nav-links.is-open,
  body.page-web-dev .nav-links.is-open{
    display:flex !important;
  }
  .page-service .nav-burger,
  body.page-web-dev .nav-burger{
    display:block !important;
    margin-left:4px !important;
    order:10 !important;
  }
  .page-service .nav-cta,
  body.page-web-dev .nav-cta{
    display:flex !important;
    margin-left:auto !important;
    margin-right:0 !important;
  }
  .page-service .nav .nav-links > a,
  .page-service .nav .nav-links .nav-mega-trigger,
  body.page-web-dev .nav .nav-links > a,
  body.page-web-dev .nav .nav-links .nav-mega-trigger{
    color:var(--graphite)!important;
    padding:12px 4px !important;
    width:100% !important;
    text-align:left !important;
    border-bottom:1px solid var(--line) !important;
    font-size:.95rem !important;
  }

  /* Mobile mega accordion — undo desktop absolute panel */
  .page-service .nav .mega,
  body.page-web-dev .nav .mega{
    position:static !important;
    left:auto !important;
    right:auto !important;
    top:auto !important;
    box-shadow:none !important;
    border-top:0 !important;
    opacity:1 !important;
    visibility:visible !important;
    transform:none !important;
    display:none !important;
    background:transparent !important;
    pointer-events:auto !important;
    height:auto !important;
    max-height:none !important;
    overflow:visible !important;
  }
  .page-service .nav .mega::before,
  body.page-web-dev .nav .mega::before{
    display:none !important;
  }
  .page-service .nav .mega.open,
  .page-service .nav .has-mega.is-open .mega,
  body.page-web-dev .nav .mega.open,
  body.page-web-dev .nav .has-mega.is-open .mega{
    display:block !important;
    opacity:1 !important;
    visibility:visible !important;
  }
  .page-service .nav .has-mega.is-open .nav-caret,
  body.page-web-dev .nav .has-mega.is-open .nav-caret{
    transform:rotate(180deg);
  }
  .page-service .nav .nav-item.has-mega,
  body.page-web-dev .nav .nav-item.has-mega{
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    width:100% !important;
  }
  .page-service .nav .nav-mega-trigger,
  body.page-web-dev .nav .nav-mega-trigger{
    pointer-events:auto !important;
    cursor:pointer !important;
    -webkit-tap-highlight-color:rgba(244,122,31,.15);
  }
  .page-service .nav .mega-in,
  body.page-web-dev .nav .mega-in{
    display:flex !important;
    flex-direction:column !important;
    grid-template-columns:none !important;
    gap:18px !important;
    padding:8px 0 4px !important;
    width:100% !important;
  }
  .page-service .nav .mega-col,
  body.page-web-dev .nav .mega-col{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    float:none !important;
  }
  .page-service .nav .mega-intro,
  body.page-web-dev .nav .mega-intro{
    display:none !important;
  }
  .page-service .nav .mega-foot,
  body.page-web-dev .nav .mega-foot{
    justify-content:stretch;
    padding:12px 0 8px;
  }
  .page-service .nav .mega-all-btn,
  body.page-web-dev .nav .mega-all-btn{
    width:100% !important;
  }
  .page-service .nav .mega-col .mega-head,
  body.page-web-dev .nav .mega-col .mega-head{
    border-bottom:0 !important;
    padding-bottom:8px !important;
    margin-bottom:4px !important;
  }
  .page-service .nav .mega-col li a,
  body.page-web-dev .nav .mega-col li a{
    color:var(--slate) !important;
  }
}

/* One FAQ plus only (theme toggle), hide home.css ::after */
.page-service .faq summary::after,
.page-service .faq-item summary::after{
  display:none !important;
  content:none !important;
  width:0 !important;
  height:0 !important;
  background:none !important;
}

.page-service .eyebrow::before{
  content:none !important;
  display:none !important;
}

.page-service #faq .faq-head,
.page-service #faq .section-head,
.page-service #faq .section-head.faq-head,
.page-service #faq .head-block,
.page-service #faq .shead.center,
.theme-html-root #faq .section-head,
.theme-html-root #faq .head-block,
.aeo-theme-page #faq .section-head{
  margin-left:auto;
  margin-right:auto;
  text-align:center;
  max-width:820px;
}
.page-service #faq .faq,
.page-service #faq .faq-list,
.theme-html-root #faq .faq,
.aeo-theme-page #faq .faq{
  margin-left:auto;
  margin-right:auto;
  max-width:820px;
  width:100%;
  box-sizing:border-box;
}

/* Medium service layouts */
@media (max-width:1100px){
  .page-service .hero-visual{margin-top:0}
  .page-service .service-grid,
  .page-service .problem-grid,
  .page-service .industry-grid,
  .page-service .why-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  .page-service .contact-grid{
    grid-template-columns:minmax(0,1fr)!important;
    gap:28px;
  }
}

@media (max-width:900px) {
  .page-service .hero {
    padding-top: calc(56px + 12px);
  }
  body.page-web-dev .hero {
    padding-top: 0;
  }
  .page-service .hero-grid{
    padding:12px 0 28px !important;
    gap:18px;
  }
  .page-service .hero h1{
    font-size:clamp(1.7rem,6.2vw,2.35rem) !important;
    line-height:1.1 !important;
    letter-spacing:-.03em !important;
  }
  .page-service .hero .lede{
    margin-bottom:14px !important;
    font-size:.95rem !important;
  }
  .page-service .hero-cta{
    margin-bottom:18px !important;
    gap:10px;
  }
  .page-service .hero-badges{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px 14px;
    padding-top:14px !important;
  }
  .page-service .section-head{
    margin-bottom:clamp(20px,4vw,32px);
  }
  .page-service .form-row{
    grid-template-columns:minmax(0,1fr)!important;
  }
  .page-service .nav-in .brand,
  body.page-web-dev .nav-in .brand{
    min-width:0 !important;
    flex:1 1 auto !important;
  }
  .page-service .brand-logo,
  body.page-web-dev .brand-logo{
    max-width:min(148px,38vw) !important;
    height:34px !important;
  }
  .page-service .nav-cta,
  .page-service .nav-burger,
  body.page-web-dev .nav-cta,
  body.page-web-dev .nav-burger{
    flex-shrink:0 !important;
  }
  .page-service .nav-quote,
  body.page-web-dev .nav-quote{
    padding:10px 14px !important;
    font-size:.82rem !important;
    white-space:nowrap;
  }
}

@media (max-width:680px){
  .page-service,
  body.page-seo-service,
  body.page-about,
  body.page-web-dev{
    overflow-x:hidden;
  }
  .page-service .wrap,
  .page-service .nav-in,
  body.page-web-dev .wrap,
  body.page-web-dev .nav-in{
    min-width:0;
  }
  .page-service .hero {
    padding-top: calc(56px + 10px);
  }
  body.page-web-dev .hero {
    padding-top: 0;
  }
  .page-service .hero-grid{
    padding:10px 0 24px !important;
  }
  .page-service .problem-grid,
  .page-service .service-grid,
  .page-service .industry-grid,
  .page-service .why-grid,
  .page-service .stats,
  .page-service .compare-wrap{
    grid-template-columns:minmax(0,1fr)!important;
  }
  /* Digital marketing + on-page: keep Numbers row as 2-up on phones */
  body.page-dm .dm-theme-page .stats,
  body.page-dm .stats,
  body.page-onpage .onpage-theme-page .stats,
  body.page-onpage .stats,
  body.page-offpage .offpage-theme-page .rowstat,
  body.page-offpage .rowstat,
  body.page-dm-motion .theme-html-root .stats,
  body.page-dm-motion .theme-html-root .rowstat,
  body.page-dm-motion .theme-html-root .stats-row,
  body.page-dm-motion .theme-html-root .stats-grid,
  body.page-dm-motion .theme-html-root .stat-row,
  body.page-dm-motion .stats,
  body.page-dm-motion .rowstat,
  body.page-dm-motion .stats-row,
  body.page-dm-motion .stats-grid,
  body.page-dm-motion .stat-row{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:22px 16px!important;
  }
  .page-service .stat{
    border-left:none !important;
    padding-left:0 !important;
  }
  .page-service .hero-badges{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .page-service .hero-badge .lbl{
    line-height:1.35;
    overflow-wrap:anywhere;
  }
  .page-service .hero-cta{
    width:100%;
    flex-direction:column;
    align-items:stretch;
  }
  .page-service .hero-cta .btn{
    width:100%;
    justify-content:center;
  }
  .page-service .testi-track{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
  .page-service .contact-card,
  .page-service .contact-side{min-width:0}
  .page-service .contact-card .btn,
  .page-service .form-submit,
  .page-service .cta-buttons .btn{
    width:100%;
    justify-content:center;
    white-space:normal;
    text-align:center;
  }
  .page-service .compare-wrap{
    margin-top:48px;
  }
  .page-service .page-svc-carousel,
  body.page-web-dev .page-svc-carousel{
    padding-inline:0 !important;
    min-width:0;
    max-width:100%;
  }
  body.page-seo-service .seo-close{
    padding:22px 18px;
    border-radius:14px;
  }
  body.page-seo-service .seo-close h3{ font-size:1.15rem; }
  body.page-seo-service .seo-close li{ font-size:.9rem; }
}

@media (max-width:420px){
  .page-service .nav-quote,
  body.page-web-dev .nav-quote{
    padding:8px 10px !important;
    font-size:.72rem !important;
  }
  .page-service .brand-logo,
  body.page-web-dev .brand-logo{
    max-width:min(120px,34vw) !important;
    height:30px !important;
  }
  .page-service .hero-badges{
    grid-template-columns:minmax(0,1fr);
  }
  .page-service .page-svc-carousel,
  body.page-web-dev .page-svc-carousel{
    padding-inline:0 !important;
  }
}

/* Sub-services card carousel (DM + Web Design pages) */
.page-service .page-svc-carousel,
body.page-web-dev .page-svc-carousel{
  margin-top:8px;
  padding-inline:0;
}
.page-service .page-svc-carousel .svc-nav,
body.page-web-dev .page-svc-carousel .svc-nav,
.page-service .svc-nav,
body.page-web-dev .svc-nav{
  display:none !important;
}
.page-service .page-svc-carousel .svc-slide,
body.page-web-dev .page-svc-carousel .svc-slide{
  height:auto;
  min-height:0;
  box-sizing:border-box;
  flex-shrink:0 !important;
  /* width/flex-basis set by JS — never force 100% here */
}
.page-service .page-svc-carousel .svc-card,
body.page-web-dev .page-svc-carousel .service-card{
  height:auto;
  margin:0;
  float:none;
}
body.page-web-dev .page-svc-carousel .svc-card-lg{
  grid-column:auto !important;
  background:var(--ink) !important;
  color:#fff !important;
  --kr-dark:#fff;
  --kr-muted:#B7CBD2;
  border:1px solid var(--line-dark);
}
body.page-web-dev .page-svc-carousel .svc-card-lg h3,
body.page-web-dev .sec-paper .svc-card-lg h3,
body.page-web-dev .service-card.svc-card-lg h3{
  color:#fff !important;
}
body.page-web-dev .page-svc-carousel .svc-card-lg p,
body.page-web-dev .sec-paper .svc-card-lg p,
body.page-web-dev .service-card.svc-card-lg p{
  color:#B7CBD2 !important;
}
body.page-web-dev .page-svc-carousel .svc-card-lg .tag,
body.page-web-dev .service-card.svc-card-lg .tag{
  color:#B7CBD2 !important;
  background:rgba(255,255,255,.06) !important;
  border-color:rgba(255,255,255,.12) !important;
}
body.page-web-dev .page-svc-carousel .services-grid{display:contents}
@media (max-width:900px){
  .page-service .page-svc-carousel,
  body.page-web-dev .page-svc-carousel{
    padding-inline:0;
    min-width:0;
    max-width:100%;
  }
}
@media (max-width:680px){
  .page-service .page-svc-carousel,
  body.page-web-dev .page-svc-carousel{
    padding-inline:0 !important;
  }
}

/* Process / pain / problem / why slides inside carousel */
.page-service .page-svc-carousel .proc,
.page-service .page-svc-carousel .problem-card,
.page-service .page-svc-carousel .pain-card,
.page-service .page-svc-carousel .svc-card,
.page-service .page-svc-carousel .feat-card,
.page-service .page-svc-carousel .why-card,
.page-service .page-svc-carousel .compare-card,
.page-service .page-svc-carousel .why,
.page-service .page-svc-carousel .pstep,
.page-service .page-svc-carousel .svc,
.page-service .page-svc-stack .proc,
.page-service .page-svc-stack .pstep,
.page-service .page-svc-stack .svc,
.page-service .page-svc-stack .why,
.page-service .page-svc-stack .why-card,
body.page-web-dev .page-svc-carousel .process-step,
body.page-web-dev .page-svc-carousel .pain-card,
body.page-web-dev .page-svc-carousel .service-card,
body.page-web-dev .page-svc-carousel .why-card{
  display:flex !important;
  flex-direction:column;
  margin:0 !important;
  float:none !important;
  box-sizing:border-box;
  min-height:0;
  height:auto;
  /* Do not set width:!important — same node is .svc-slide sized by JS */
}
body.page-web-dev .page-svc-carousel .process-wrap,
body.page-web-dev .page-svc-carousel .process-line,
body.page-web-dev .page-svc-carousel .process-grid,
body.page-web-dev .page-svc-carousel .pain-grid,
body.page-web-dev .page-svc-carousel .why-grid,
.page-service .page-svc-carousel .process-list,
.page-service .page-svc-carousel .problem-grid,
.page-service .page-svc-carousel .service-grid,
.page-service .page-svc-carousel .feature-grid,
.page-service .page-svc-carousel .why-grid,
.page-service .page-svc-carousel .compare-wrap{
  display:contents;
}
.page-service .page-svc-carousel--ink .svc-dot{
  background:rgba(255,255,255,.28);
}
.page-service .page-svc-carousel--ink .svc-dot.is-active{
  background:var(--signal);
}
.page-service .page-svc-carousel .svc-viewport,
body.page-web-dev .page-svc-carousel .svc-viewport{
  overflow:hidden !important;
  width:100% !important;
}
@media (max-width:900px){
  .page-service [data-sp-mobile-scroll] .svc-viewport,
  .page-service [data-sp-mobile-scroll].is-mobile-scroll .svc-viewport{
    overflow-x:auto !important;
    overflow-y:hidden !important;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
  }
  .page-service [data-sp-mobile-scroll] .svc-track,
  .page-service [data-sp-mobile-scroll].is-mobile-scroll .svc-track{
    display:flex !important;
    flex-wrap:nowrap !important;
    width:max-content !important;
    transform:none !important;
    grid-template-columns:none !important;
    transition:none !important;
  }
  .page-service [data-sp-mobile-scroll] .svc-slide,
  .page-service [data-sp-mobile-scroll].is-mobile-scroll .svc-slide{
    flex:0 0 min(88vw,340px) !important;
    width:min(88vw,340px) !important;
    min-width:min(88vw,340px) !important;
    max-width:min(88vw,340px) !important;
    scroll-snap-align:start;
  }
}
.page-service .page-svc-carousel .svc-track,
body.page-web-dev .page-svc-carousel .svc-track{
  display:flex !important;
  flex-wrap:nowrap !important;
  align-items:stretch !important;
  gap:var(--svc-gap,20px) !important;
  transition:transform .4s cubic-bezier(.22,.61,.36,1) !important;
  will-change:transform;
  touch-action:pan-x;
  cursor:grab;
  transform:translate3d(0,0,0);
}
.page-service .page-svc-carousel .svc-slide,
body.page-web-dev .page-svc-carousel .svc-slide{
  flex-shrink:0 !important;
  align-self:stretch;
}
body.page-web-dev .page-svc-carousel .svc-slide.reveal{
  opacity:1 !important;
}
.page-service .page-svc-carousel .svc-nav,
body.page-web-dev .page-svc-carousel .svc-nav{
  z-index:8;
  pointer-events:auto;
  cursor:pointer;
}

/* SEO service pages — theme polish (reuses DM system) */
body.page-seo-service .compare-sub{
  color:#9FB6BE;
  font-size:.9rem;
  margin:-8px 0 18px;
  line-height:1.5;
}
body.page-seo-service .hero-badge--text .lbl{
  margin-top:0;
  text-transform:none;
  letter-spacing:.02em;
  font-size:.85rem;
  color:#B7CBD2;
}
body.page-seo-service .hero-sub{
  margin:0 0 10px;
  font-size:1.05rem;
  color:#9FB6BE;
}

/* Paper service cards on LIGHT sections only */
.page-service .sec-mist .svc-card h3,
.page-service .sec-paper .svc-card h3,
body.page-seo-service .sec-mist .svc-card h3,
body.page-seo-service .sec-paper .svc-card h3{
  color:var(--graphite) !important;
}
.page-service .sec-mist .svc-card p,
.page-service .sec-paper .svc-card p,
body.page-seo-service .sec-mist .svc-card p,
body.page-seo-service .sec-paper .svc-card p{
  color:var(--slate) !important;
}

/*
 * SEO / About pages: white shell between sections, but ink under the first
 * viewport so a transparent nav never reveals paper/white at the top edge.
 */
html:has(body.page-seo-service),
html:has(body.page-service),
html:has(body.page-web-dev){
  background:var(--ink);
}
body.page-seo-service{
  background:#fff;
  background-image:linear-gradient(var(--ink), var(--ink));
  background-size:100% min(100vh, 920px);
  background-repeat:no-repeat;
  background-position:top center;
}
body.page-seo-service .hero{
  background:var(--ink) !important;
  margin-top:0 !important;
  position:relative;
  overflow:hidden;
  isolation:isolate;
  min-height:min(720px,92vh) !important;
  display:flex !important;
  align-items:center !important;
  padding-top:calc(72px + 48px) !important;
  padding-bottom:clamp(64px,8vw,110px) !important;
}
body.page-seo-service .hero > .wrap{
  width:100%;
}
body.page-seo-service .hero .hero-bg{
  position:absolute;
  inset:0;
  z-index:0;
  background-size:cover;
  background-position:right center;
  opacity:.42;
  margin:0 !important;
}
body.page-seo-service .hero .hero-veil{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    radial-gradient(120% 90% at 82% 45%, rgba(244,122,31,.08), transparent 55%),
    linear-gradient(90deg, rgba(10,26,34,.96) 0%, rgba(10,26,34,.92) 28%, rgba(10,26,34,.78) 52%, rgba(10,26,34,.55) 78%, rgba(10,26,34,.42) 100%);
}
body.page-seo-service .hero > .wrap,
body.page-seo-service .hero .hero-copy{
  position:relative;
  z-index:2;
}
body.page-seo-service .hero .hero-copy{
  max-width:760px;
  padding:0 !important;
}
body.page-seo-service .hero .hero-grid{display:contents}
body.page-seo-service .hero .hero-visual{display:none !important}
body.page-seo-service .hero h1{
  font-size:clamp(2.6rem,5.2vw,3.75rem) !important;
  font-weight:800;
  color:#fff;
  letter-spacing:-.02em;
  line-height:1.08 !important;
  margin:0 0 22px !important;
  max-width:22ch;
}
body.page-seo-service .hero h1 .hl,
body.page-seo-service .hero h1 .accent{
  color:var(--signal) !important;
  font-weight:800;
}
body.page-seo-service .hero .sub,
body.page-seo-service .hero .lede,
body.page-seo-service .hero-sub{
  font-size:clamp(1.02rem,1.5vw,1.24rem) !important;
  color:#C6D8DE !important;
  max-width:56ch;
  margin:0 0 34px !important;
  font-weight:400;
  line-height:1.55;
}
body.page-seo-service .hero .hero-actions,
body.page-seo-service .hero .hero-cta{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  align-items:center;
  margin:0 0 0 !important;
}
body.page-seo-service .hero .hero-trust{
  margin-top:46px;
  display:flex;
  flex-wrap:wrap;
  gap:34px;
  align-items:flex-start;
  padding-top:28px;
  border-top:1px solid rgba(244,122,31,.16);
}
body.page-seo-service .hero .hero-trust .ht{
  display:flex;
  flex-direction:column;
  gap:2px;
}
body.page-seo-service .hero .hero-trust .ht b{
  font-size:1.5rem;
  font-weight:800;
  color:var(--signal);
  letter-spacing:-.02em;
  line-height:1;
}
body.page-seo-service .hero .hero-trust .ht span{
  font-size:.72rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:#8FA6AE;
  font-weight:500;
}
body.page-seo-service .hero .hero-badges{display:flex !important}
@media (max-width:900px){
  body.page-seo-service .hero{
    min-height:min(560px,88vh) !important;
    padding-top:calc(56px + 24px) !important;
    padding-bottom:40px !important;
  }
  body.page-seo-service .hero .hero-bg{opacity:.32}
  body.page-seo-service .hero .hero-veil{
    background:linear-gradient(180deg,rgba(10,26,34,.94) 8%,rgba(10,26,34,.88) 55%,rgba(10,26,34,.92) 100%);
  }
  body.page-seo-service .hero h1{
    font-size:clamp(1.9rem,8.4vw,2.7rem) !important;
    max-width:none;
  }
  body.page-seo-service .hero .hero-trust{
    margin-top:30px;
    padding-top:22px;
    gap:22px 28px;
  }
}
/* Fully clear transparent nav — no white haze / border at rest */
body.page-seo-service header.nav:not(.stuck),
.page-service header.nav:not(.stuck),
body.page-web-dev header.nav:not(.stuck),
body.page-blog header.nav:not(.stuck){
  background:transparent !important;
  background-color:transparent !important;
  background-image:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  border:0 !important;
  border-bottom-width:0 !important;
  border-bottom-color:transparent !important;
  box-shadow:none !important;
  outline:0 !important;
}
body.page-seo-service header.nav:not(.stuck) .nav-in,
.page-service header.nav:not(.stuck) .nav-in,
body.page-web-dev header.nav:not(.stuck) .nav-in,
body.page-blog header.nav:not(.stuck) .nav-in{
  background:transparent !important;
  background-color:transparent !important;
  box-shadow:none !important;
  border:0 !important;
}
body.page-seo-service header.nav:not(.stuck)::before,
body.page-seo-service header.nav:not(.stuck)::after,
.page-service header.nav:not(.stuck)::before,
.page-service header.nav:not(.stuck)::after,
body.page-web-dev header.nav:not(.stuck)::before,
body.page-web-dev header.nav:not(.stuck)::after,
body.page-blog header.nav:not(.stuck)::before,
body.page-blog header.nav:not(.stuck)::after{
  content:none !important;
  display:none !important;
}
body.page-seo-service header.nav{
  z-index:200 !important;
}
body.page-seo-service header.nav .mega{
  z-index:210 !important;
}

/* Problem — white */
body.page-seo-service .seo-problem{
  background:#fff !important;
}
body.page-seo-service .seo-problem .section-head h2{ color:var(--graphite); }
body.page-seo-service .seo-problem .lede{ color:var(--slate); }
body.page-seo-service .seo-problem .problem-card{
  background:#fff;
  border:1px solid var(--line);
  box-shadow:var(--shadow-sm);
}
body.page-seo-service .seo-problem .problem-card:hover{
  border-color:rgba(244,122,31,.35);
  box-shadow:var(--shadow-md);
}
body.page-seo-service .seo-problem .problem-card h4{ color:var(--graphite) !important; }

/* "Here's how we close it" — beside problem cards (off-page) */
body.page-seo-service .seo-problem-layout--with-close{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,.95fr);
  gap:clamp(28px,4vw,56px);
  align-items:center;
}
body.page-seo-service .seo-problem-layout--with-close > *{
  min-width:0;
  max-width:100%;
}
body.page-seo-service .seo-close{
  background:var(--ink);
  color:#B7CBD2;
  border-radius:18px;
  padding:clamp(28px,3.5vw,42px);
  position:relative;
  overflow:hidden;
}
body.page-seo-service .seo-close::before{
  content:"";
  position:absolute;top:0;left:0;right:0;height:3px;
  background:var(--signal);
}
body.page-seo-service .seo-close h3{
  color:#fff;
  font-size:clamp(1.25rem,2vw,1.5rem);
  font-weight:700;
  margin:0 0 14px;
}
body.page-seo-service .seo-close > p{
  color:#9FB6BE;
  margin:0 0 20px;
  font-size:1rem;
  line-height:1.6;
}
body.page-seo-service .seo-close ul{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:13px;
}
body.page-seo-service .seo-close li{
  display:flex;
  gap:12px;
  align-items:flex-start;
  font-size:.96rem;
  color:#C6D7DD;
  line-height:1.45;
}
body.page-seo-service .seo-close li svg{
  width:20px;height:20px;
  color:var(--signal);
  flex:0 0 auto;
  margin-top:1px;
}
body.page-seo-service .seo-close li span{
  min-width:0;
  overflow-wrap:anywhere;
}
@media (max-width:980px){
  body.page-seo-service .seo-problem-layout--with-close{
    grid-template-columns:minmax(0,1fr);
    gap:24px;
    align-items:stretch;
  }
}
body.page-seo-service .seo-problem .problem-card p{ color:var(--slate) !important; }
body.page-seo-service .seo-problem .problem-card .icon{ background:rgba(244,122,31,.1); }

/* What's Included — dark */
body.page-seo-service .seo-included .svc-card{
  background:var(--ink-2) !important;
  border:1px solid var(--line-dark) !important;
  box-shadow:none !important;
}
body.page-seo-service .seo-included .svc-card h3{ color:#fff !important; }
body.page-seo-service .seo-included .svc-card p{ color:#9FB6BE !important; }
body.page-seo-service .seo-included .svc-card .tile{ background:rgba(244,122,31,.12); }
body.page-seo-service .seo-included .svc-card .tile svg{ stroke:var(--signal); }
body.page-seo-service .seo-included .svc-card:hover .tile{ background:var(--signal); }
body.page-seo-service .seo-included .svc-card:hover .tile svg{ stroke:var(--signal-ink); }

/* Why KodRank — dark only on ink / why-bg */
body.page-seo-service .seo-why.sec-ink .why-card,
body.page-seo-service .seo-why.why-bg .why-card{
  background:var(--ink-2);
  border:1px solid rgba(255,255,255,.06);
}
body.page-seo-service .seo-why.sec-ink .section-head h2,
body.page-seo-service .seo-why.why-bg .section-head h2,
body.page-seo-service .seo-why.sec-ink .why-card h3,
body.page-seo-service .seo-why.why-bg .why-card h3{ color:#fff; }
body.page-seo-service .seo-why.sec-ink .lede,
body.page-seo-service .seo-why.why-bg .lede,
body.page-seo-service .seo-why.sec-ink .why-card p,
body.page-seo-service .seo-why.sec-ink .why-card li,
body.page-seo-service .seo-why.why-bg .why-card p,
body.page-seo-service .seo-why.why-bg .why-card li{ color:#B7CBD2; }

/* On-page "explained" definition split */
body.page-seo-service .seo-explain-split{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(28px,4vw,64px);
  align-items:center;
}
body.page-seo-service .seo-explain-copy h2{
  margin:14px 0 16px;
  color:var(--graphite);
}
body.page-seo-service .seo-explain-copy .lede{
  color:var(--slate);
  max-width:none;
}
body.page-seo-service .seo-explain-p{
  color:var(--slate);
  margin-top:16px;
  font-size:1.02rem;
  line-height:1.65;
}
body.page-seo-service .seo-explain-p .hl{ color:var(--signal-deep); font-weight:650; }
body.page-seo-service .seo-def-card{
  background:var(--ink);
  color:#fff !important;
  border-radius:18px;
  padding:clamp(26px,3vw,40px);
  box-shadow:var(--shadow-md);
  --kr-dark:#fff;
  --kr-muted:#fff;
  --kr-muted-2:#E8F0F3;
}
body.page-seo-service .seo-def-card h3,
body.page-seo-service .sec-mist .seo-def-card h3,
.page-service .seo-def-card h3{
  color:#fff !important;
  margin:0 0 10px;
  font-size:1.25rem;
}
body.page-seo-service .seo-def-card > p,
body.page-seo-service .sec-mist .seo-def-card > p,
body.page-seo-service .sec-mist .seo-def-card p,
.page-service .seo-def-card > p,
.page-service .seo-def-card p{
  color:#fff !important;
  margin:0;
  font-size:.98rem;
  line-height:1.55;
}
body.page-seo-service .seo-def-list{
  list-style:none;
  margin:18px 0 0;
  padding:0;
  display:grid;
  gap:12px;
}
body.page-seo-service .seo-def-list li,
body.page-seo-service .sec-mist .seo-def-list li,
.page-service .seo-def-list li,
.page-service .seo-def-card li,
.page-service .seo-def-card span{
  color:#fff !important;
}
body.page-seo-service .seo-def-list li{
  display:flex;
  gap:12px;
  align-items:flex-start;
  font-size:.95rem;
  line-height:1.45;
}
body.page-seo-service .seo-def-check{
  flex:0 0 22px;
  width:22px;
  height:22px;
  border-radius:50%;
  background:var(--signal);
  display:grid;
  place-items:center;
  margin-top:1px;
}
body.page-seo-service .seo-def-check svg{ width:12px; height:12px; display:block; }
@media (max-width:900px){
  body.page-seo-service .seo-explain-split{
    grid-template-columns:minmax(0,1fr);
    gap:28px;
  }
}
@media (max-width:680px){
  body.page-seo-service .seo-def-card{ padding:22px 18px; }
}

/* AEO compare badge + compact stats */
body.page-seo-service .compare-card.pro{ position:relative; }
body.page-seo-service .compare-pro-badge{
  position:absolute; top:-14px; left:26px; background:var(--signal); color:#0A1A22;
  padding:5px 14px; border-radius:999px; font-size:.7rem; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase;
}
body.page-seo-service .compare-card.pro::before{ content:none !important; }
body.page-seo-service .seo-stats-compact{ padding-top:clamp(28px,4vw,48px); }
body.page-seo-service .seo-stats-compact .section-head{ display:none; }
body.page-seo-service .svc-card > .num{
  font-size:.78rem; font-weight:700; color:var(--signal-deep); letter-spacing:.04em; margin-bottom:12px; display:block;
}

/* ---------- Site-wide gutters + tighter service vertical rhythm ---------- */
:root{
  --pad:clamp(18px,3.2vw,40px);
}
@media (max-width:1200px){
  :root{ --pad:clamp(20px,3.6vw,36px); }
}
@media (max-width:900px){
  :root{ --pad:clamp(16px,4vw,28px); }
}
@media (max-width:480px){
  :root{ --pad:16px; }
}

/* Side gutters stay visible on small/medium desktop */
.page-service .wrap,
body.page-web-dev .wrap,
.page-service .nav-in,
body.page-web-dev .nav-in,
.page-services-index .wrap,
.page-services-index .nav-in{
  padding-left:var(--pad) !important;
  padding-right:var(--pad) !important;
  box-sizing:border-box;
  width:100%;
  max-width:var(--maxw);
}

/* Trim excess section whitespace on service themes (not heroes — nav clearance stays) */
.page-service section:not(.hero),
body.page-web-dev section:not(.hero),
.page-service .cms-page .section:not(.hero),
.page-service .shop-page .section:not(.hero){
  padding-top:clamp(44px,5.5vw,80px) !important;
  padding-bottom:clamp(44px,5.5vw,80px) !important;
}
.page-service .hero,
body.page-web-dev .hero,
.page-service .cms-page .hero,
.page-service .shop-page .hero,
.page-service .saas-page .hero,
.page-service .mo-page .hero,
.page-service .b2b-page .hero,
.page-service .ecom-page .hero,
.page-service .wpseo-page .hero,
.page-service .rd-page .hero,
.page-service .ac-page .hero,
body.page-seo-service .hero,
.page-wordpress .wp-hero{
  padding-bottom:clamp(20px,2.5vw,32px) !important;
}
.page-service .shead,
.page-service .sec-head,
.page-service .section-head,
body.page-web-dev .section-head{
  margin-bottom:clamp(24px,3.5vw,40px) !important;
}
@media (max-width:900px){
  .page-service section:not(.hero),
  body.page-web-dev section:not(.hero),
  .page-service .cms-page .section:not(.hero),
  .page-service .shop-page .section:not(.hero){
    padding-top:clamp(36px,7vw,56px) !important;
    padding-bottom:clamp(36px,7vw,56px) !important;
  }
}
@media (max-width:680px){
  .page-service section:not(.hero),
  body.page-web-dev section:not(.hero),
  .page-service .cms-page .section:not(.hero),
  .page-service .shop-page .section:not(.hero){
    padding-top:clamp(32px,8vw,48px) !important;
    padding-bottom:clamp(32px,8vw,48px) !important;
  }
}

/* Hero breadcrumbs — visible + readable on every service theme */
.page-service .hero .breadcrumb,
.page-service .hero .crumbs,
.page-service .wp-hero .breadcrumb,
.page-service .wp-hero .wp-breadcrumb,
.page-service .cms-page .hero .breadcrumb,
.page-service .shop-page .hero .breadcrumb,
.page-service .rd-page .hero .breadcrumb,
.page-service .ac-page .hero .breadcrumb,
body.page-web-dev .hero .breadcrumb,
body.page-wordpress .wp-hero .breadcrumb,
body.page-wordpress .wp-hero .wp-breadcrumb{
  position:relative;
  z-index:4;
  display:block !important;
  margin:0 0 16px !important;
  visibility:visible !important;
  opacity:1 !important;
  color:#B7CBD2;
}
.page-service .hero .breadcrumb ol,
.page-service .hero .crumbs ol,
.page-service .wp-hero .breadcrumb ol,
.page-service .wp-hero .wp-breadcrumb ol,
.page-service .cms-page .hero .breadcrumb ol,
.page-service .shop-page .hero .breadcrumb ol,
.page-service .rd-page .hero .breadcrumb ol,
.page-service .ac-page .hero .breadcrumb ol,
body.page-web-dev .hero .breadcrumb ol,
body.page-wordpress .wp-hero .breadcrumb ol,
body.page-wordpress .wp-hero .wp-breadcrumb ol{
  display:flex !important;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  list-style:none;
  margin:0;
  padding:0;
  font-size:.8rem;
  font-weight:500;
  letter-spacing:.04em;
}
.page-service .hero .breadcrumb li,
.page-service .hero .crumbs li,
.page-service .wp-hero .breadcrumb li,
.page-service .wp-hero .wp-breadcrumb li,
body.page-web-dev .hero .breadcrumb li,
body.page-wordpress .wp-hero .breadcrumb li,
body.page-wordpress .wp-hero .wp-breadcrumb li{
  display:flex;
  align-items:center;
  gap:10px;
  color:#B7CBD2 !important;
}
.page-service .hero .breadcrumb li:not(:last-child)::after,
.page-service .hero .crumbs li:not(:last-child)::after,
.page-service .wp-hero .breadcrumb li:not(:last-child)::after,
.page-service .wp-hero .wp-breadcrumb li:not(:last-child)::after,
body.page-web-dev .hero .breadcrumb li:not(:last-child)::after,
body.page-wordpress .wp-hero .breadcrumb li:not(:last-child)::after,
body.page-wordpress .wp-hero .wp-breadcrumb li:not(:last-child)::after{
  content:"\203A";
  color:#7A929A;
  font-size:1rem;
  font-weight:400;
  line-height:1;
}
.page-service .hero .breadcrumb a,
.page-service .hero .crumbs a,
.page-service .wp-hero .breadcrumb a,
.page-service .wp-hero .wp-breadcrumb a,
body.page-web-dev .hero .breadcrumb a,
body.page-wordpress .wp-hero .breadcrumb a,
body.page-wordpress .wp-hero .wp-breadcrumb a{
  color:#B7CBD2 !important;
  text-decoration:none;
  transition:color .2s ease;
}
.page-service .hero .breadcrumb a:hover,
.page-service .hero .crumbs a:hover,
.page-service .wp-hero .breadcrumb a:hover,
.page-service .wp-hero .wp-breadcrumb a:hover,
body.page-web-dev .hero .breadcrumb a:hover,
body.page-wordpress .wp-hero .breadcrumb a:hover,
body.page-wordpress .wp-hero .wp-breadcrumb a:hover{
  color:var(--signal) !important;
}
.page-service .hero .breadcrumb [aria-current="page"],
.page-service .hero .breadcrumb li:last-child,
.page-service .hero .breadcrumb li:last-child span,
.page-service .hero .crumbs [aria-current="page"],
.page-service .hero .crumbs li:last-child,
.page-service .wp-hero .breadcrumb [aria-current="page"],
.page-service .wp-hero .breadcrumb li:last-child,
.page-service .wp-hero .wp-breadcrumb [aria-current="page"],
.page-service .wp-hero .wp-breadcrumb li:last-child,
body.page-web-dev .hero .breadcrumb [aria-current="page"],
body.page-web-dev .hero .breadcrumb li:last-child,
body.page-wordpress .wp-hero .breadcrumb [aria-current="page"],
body.page-wordpress .wp-hero .breadcrumb li:last-child,
body.page-wordpress .wp-hero .wp-breadcrumb [aria-current="page"],
body.page-wordpress .wp-hero .wp-breadcrumb li:last-child{
  color:var(--signal) !important;
  font-weight:600;
}
/* Hero service-label eyebrows stay off; section eyebrows elsewhere stay */
.page-service .hero > .eyebrow,
.page-service .hero .hero-copy > .eyebrow,
.page-service .hero .hero-inner > .eyebrow,
body.page-web-dev .hero .eyebrow.hero-eyebrow{
  display:none !important;
}

/* ---------- Hero + nav: tighter rhythm + mid-desktop headline fit ---------- */
.page-service .hero .eyebrow,
.page-service .hero .hero-eyebrow,
body.page-web-dev .hero .eyebrow{
  margin-bottom:8px !important;
}
.page-service .hero h1,
body.page-web-dev .hero h1,
.page-service .cms-page .hero h1,
.page-service .shop-page .hero h1,
.page-service .saas-page .hero h1,
.page-service .mo-page .hero h1,
.page-service .b2b-page .hero h1,
.page-service .ecom-page .hero h1,
.page-service .wpseo-page .hero h1,
.page-service .rd-page .hero h1,
.page-service .ac-page .hero h1,
.page-wordpress .wp-hero h1{
  margin-top:0 !important;
  margin-bottom:14px !important;
  line-height:1.06 !important;
  letter-spacing:-.03em !important;
}
.page-service .hero .lede,
.page-service .hero p.lede,
.page-service .hero p.sub,
.page-service .hero .hero-sub,
.page-service .hero .hero-lede,
body.page-web-dev .hero .lede,
.page-wordpress .wp-hero .lede{
  margin-top:0 !important;
  margin-bottom:20px !important;
  font-size:clamp(.98rem,1.2vw,1.12rem) !important;
  line-height:1.5 !important;
}
.page-service .hero-actions,
.page-service .hero-cta,
.page-service .hero .hero-actions,
body.page-web-dev .hero-ctas,
body.page-web-dev .hero-actions{
  margin-top:0 !important;
  margin-bottom:20px !important;
  gap:12px !important;
}
.page-service .hero-note,
.page-service .hero .hero-note{
  margin-top:0 !important;
}
.page-service .cms-page .hero-copy,
.page-service .shop-page .hero-inner,
.page-service .saas-page .hero-copy,
.page-service .mo-page .hero-inner,
.page-service .b2b-page .hero-copy,
.page-service .ecom-page .hero-copy,
.page-service .wpseo-page .hero-inner,
.page-service .rd-page .hero-copy,
.page-service .ac-page .hero-copy{
  padding-top:0 !important;
}
.page-service .hero .hero-visual,
.page-service .hero .hero-bg,
.page-service .hero .hero-bg img,
.page-service .wp-hero .wp-hero-visual,
.page-service .wp-hero .wp-hero-img,
body.page-web-dev .hero .hero-bg,
body.page-web-dev .hero .hero-media{
  margin-top:0 !important;
  top:0 !important;
}
@media (max-width:900px){
  .page-service .cms-page .hero-copy,
  .page-service .shop-page .hero-inner,
  .page-service .saas-page .hero-copy,
  .page-service .mo-page .hero-inner,
  .page-service .b2b-page .hero-copy,
  .page-service .ecom-page .hero-copy,
  .page-service .wpseo-page .hero-inner,
  .page-service .rd-page .hero-copy,
  .page-service .ac-page .hero-copy{
    padding-top:0 !important;
  }
}
.page-service .hero-grid{
  padding-top:clamp(8px,1.2vw,16px) !important;
  padding-bottom:clamp(16px,2vw,28px) !important;
}

/* Small / mid desktop: keep headlines closer to 2 lines */
@media (max-width:1280px) and (min-width:901px){
  .page-service .hero h1,
  body.page-web-dev .hero h1,
  .page-service .cms-page .hero h1,
  .page-service .shop-page .hero h1,
  .page-service .saas-page .hero h1,
  .page-service .mo-page .hero h1,
  .page-service .b2b-page .hero h1,
  .page-service .ecom-page .hero h1,
  .page-service .wpseo-page .hero h1,
  .page-service .rd-page .hero h1,
  .page-service .ac-page .hero h1,
  .page-wordpress .wp-hero h1{
    font-size:clamp(1.9rem,2.85vw,2.75rem) !important;
    line-height:1.08 !important;
  }
  .page-service .nav-in,
  body.page-web-dev .nav-in{
    gap:20px !important;
  }
  .page-service .hero,
  .page-service .cms-page .hero,
  .page-service .shop-page .hero,
  .page-service .saas-page .hero,
  .page-service .mo-page .hero,
  .page-service .b2b-page .hero,
  .page-service .ecom-page .hero,
  .page-service .wpseo-page .hero{
    padding-top:calc(72px + 4px) !important;
  }
  .page-service .cms-page .hero-copy,
  .page-service .shop-page .hero-inner,
  .page-service .saas-page .hero-copy,
  .page-service .mo-page .hero-inner,
  .page-service .b2b-page .hero-copy,
  .page-service .ecom-page .hero-copy,
  .page-service .wpseo-page .hero-inner{
    padding-top:0 !important;
  }
}

@media (max-width:900px){
  .page-service .hero h1,
  body.page-web-dev .hero h1,
  .page-service .cms-page .hero h1,
  .page-service .shop-page .hero h1,
  .page-service .saas-page .hero h1,
  .page-service .mo-page .hero h1,
  .page-service .b2b-page .hero h1,
  .page-service .ecom-page .hero h1,
  .page-service .wpseo-page .hero h1,
  .page-wordpress .wp-hero h1{
    font-size:clamp(1.65rem,6vw,2.2rem) !important;
    max-width:none !important;
    margin-bottom:10px !important;
  }
  .page-service .hero .lede,
  .page-service .hero p.lede,
  .page-service .hero p.sub,
  .page-service .hero .hero-sub,
  .page-wordpress .wp-hero .lede{
    margin-bottom:16px !important;
    font-size:.94rem !important;
  }
  .page-service .brand-logo,
  body.page-web-dev .brand-logo{
    height:30px !important;
    max-width:min(132px,36vw) !important;
  }
}

/* Stacking-card layout lives in css/service-stack.css (loaded last). */

/* ---------- Professional polish (no layout redesign) ---------- */
.page-service,
body.page-web-dev,
.page-services-index{
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
.page-service .lede,
.page-service .shead .lede,
.page-service .section-head .lede,
.page-service .sec-head .lede,
body.page-web-dev .lede,
.page-services-index .lede{
  color:var(--slate, #4B5B62);
  line-height:1.65;
}
.page-service .sec-ink .lede,
.page-service .sec-ink .shead .lede{
  color:#9FB6BE;
}
.page-service .shead p,
.page-service .section-head p:not(.lede),
.page-service .sec-head p:not(.lede){
  color:var(--slate, #4B5B62);
  line-height:1.65;
  max-width:62ch;
}
.page-service .sec-ink .shead p,
.page-service .sec-ink .section-head p{
  color:#9FB6BE;
}
.page-service .eyebrow,
.page-service .shead .eyebrow,
.page-service .section-head .eyebrow{
  letter-spacing:.1em;
  margin-bottom:12px;
}
.page-service h2,
.page-service .shead h2,
.page-service .section-head h2{
  letter-spacing:-.02em;
  line-height:1.15;
}
.page-service .btn,
body.page-web-dev .btn,
.page-services-index .svc-index-btn{
  letter-spacing:.01em;
}
.page-service .btn:focus-visible,
body.page-web-dev .btn:focus-visible,
.page-service .nav-quote:focus-visible,
.page-service a:focus-visible{
  outline:2px solid var(--signal);
  outline-offset:3px;
}
.page-service .fld input,
.page-service .fld textarea,
.page-service .fld select,
.page-service input[type="text"],
.page-service input[type="email"],
.page-service textarea{
  transition:border-color .2s ease, box-shadow .2s ease;
}
.page-service .fld input:focus,
.page-service .fld textarea:focus,
.page-service .fld select:focus{
  border-color:var(--signal) !important;
  outline:none;
}
.page-service .faq-item,
.page-service .faq details{
  border-color:var(--line, #E1E9E5);
}
.page-service .faq-item summary,
.page-service .faq details summary{
  line-height:1.45;
}
.page-service footer.foot,
.page-service .foot,
body.page-web-dev footer.foot{
  border-top:1px solid rgba(255,255,255,.08);
}
.page-service .svc-dots,
.page-service .page-svc-carousel .svc-dots{
  margin-top:22px;
  gap:9px;
}
.page-service .svc-dot{
  background:#D5E0DA;
}
.page-service .svc-dot.is-active{
  background:var(--signal);
}
@media (min-width:901px){
  .page-service section:not(.hero),
  body.page-web-dev section:not(.hero){
    padding-top:clamp(52px,6vw,88px) !important;
    padding-bottom:clamp(52px,6vw,88px) !important;
  }
  .page-service .shead,
  .page-service .section-head,
  .page-service .sec-head{
    margin-bottom:clamp(28px,3.8vw,44px) !important;
  }
}

/* ============================================================
   COMPACT HERO LOCK — same short height + soft image on ALL
   service pages (overrides theme sheets that still differ)
   ============================================================ */
.page-service .hero,
body.page-web-dev .hero,
body.page-seo-service .hero,
.page-service .cms-page .hero,
.page-service .shop-page .hero,
.page-service .saas-page .hero,
.page-service .mo-page .hero,
.page-service .b2b-page .hero,
.page-service .ecom-page .hero,
.page-service .wpseo-page .hero,
.page-service .rd-page .hero,
.page-service .ac-page .hero,
.page-wordpress .wp-hero{
  min-height:auto !important;
  height:auto !important;
  align-items:flex-start !important;
  padding-top:calc(72px + 4px) !important;
  padding-bottom:clamp(20px,2.5vw,32px) !important;
}
body.page-web-dev .hero{
  /* web-dev theme zeros section pad; keep nav clearance here */
  padding-top:calc(72px + 4px) !important;
  display:block !important;
}
.page-wordpress .wp-hero{
  padding-top:calc(72px + 4px) !important;
}

/* Hero photos — cover, right-anchored; opacity left to theme sheets (~0.85–0.92) */
.page-service .hero,
body.page-web-dev .hero,
body.page-seo-service .hero,
.page-wordpress .wp-hero{
  overflow:hidden !important;
}
.page-service .hero .hero-bg,
.page-service .saas-page .hero-bg,
.page-service .b2b-page .hero-bg,
.page-service .ecom-page .hero-bg,
.page-service .mo-page .hero-bg,
.page-service .wpseo-page .hero-bg,
.page-service .rd-page .hero-bg,
.page-service .cms-page .hero::before,
.page-service .shop-page .hero-bg,
body.page-seo-service .hero .hero-bg,
body.page-web-dev .hero .hero-bg,
body.page-web-dev .hero .hero-media,
.page-service .hero .hero-visual,
.page-wordpress .wp-hero-visual{
  background-size:cover !important;
  background-position:right center !important;
  transform:none;
}
.page-service .hero .hero-bg img,
.page-service .shop-page .hero-bg img,
.page-service .hero .hero-visual .hero-img,
.page-wordpress .wp-hero-img,
body.page-web-dev .hero .hero-media img{
  object-fit:cover !important;
  object-position:right center !important;
  width:100%;
  height:100%;
}

/* Tighter trust / badge rows under CTAs */
.page-service .hero .hero-trust,
.page-service .hero .hero-badges,
.page-service .hero .hero-stats,
.page-service .hero .hero-strip,
.page-service .b2b-page .hero-trust,
.page-service .ecom-page .hero-trust,
.page-service .saas-page .hero-trust,
.page-service .shop-page .hero-stats,
.page-service .cms-page .hero-strip,
body.page-seo-service .hero .hero-trust{
  margin-top:22px !important;
  padding-top:18px !important;
  gap:22px 28px !important;
}
.page-service .hero-actions,
.page-service .hero-cta,
.page-service .hero .hero-actions,
body.page-web-dev .hero-actions,
body.page-web-dev .hero-ctas{
  margin-bottom:0 !important;
}

@media (max-width:900px){
  .page-service .hero,
  body.page-web-dev .hero,
  body.page-seo-service .hero,
  .page-service .cms-page .hero,
  .page-service .shop-page .hero,
  .page-service .saas-page .hero,
  .page-service .mo-page .hero,
  .page-service .b2b-page .hero,
  .page-service .ecom-page .hero,
  .page-service .wpseo-page .hero,
  .page-service .rd-page .hero,
  .page-service .ac-page .hero,
  .page-wordpress .wp-hero{
    padding-top:calc(56px + 8px) !important;
    padding-bottom:24px !important;
  }
  .page-service .hero .hero-bg,
  .page-service .hero .hero-visual,
  .page-service .cms-page .hero::before,
  .page-service .shop-page .hero-bg,
  .page-service .saas-page .hero-bg,
  .page-service .mo-page .hero-bg,
  .page-service .b2b-page .hero-bg,
  .page-service .ecom-page .hero-bg,
  .page-service .wpseo-page .hero-bg,
  .page-service .rd-page .hero-bg,
  body.page-seo-service .hero .hero-bg,
  body.page-web-dev .hero .hero-bg,
  body.page-web-dev .hero .hero-media,
  .page-wordpress .wp-hero-visual{
    transform:none;
  }
  .page-service .ac-page .hero{
    padding:calc(56px + 8px) 0 24px !important;
  }
}

/* ============================================================
   Light-section readability after dark/light layout alignment
   ============================================================ */
.page-service .sec-paper .problem-card,
.page-wordpress .sec-paper .problem-card{
  background:#fff !important;
  border:1px solid var(--line,#E1E9E5) !important;
  box-shadow:0 1px 2px rgba(13,32,41,.05),0 6px 18px -8px rgba(13,32,41,.10);
}
.page-service .sec-paper .problem-card h4,
.page-wordpress .sec-paper .problem-card h4{
  color:var(--graphite,#0D2029) !important;
}
.page-service .sec-paper .problem-card p,
.page-wordpress .sec-paper .problem-card p{
  color:var(--slate,#4B5B62) !important;
}

/* CMS why — was ink-only typography */
.cms-page .sec-paper .feat h3{color:var(--graphite) !important}
.cms-page .sec-paper .feat p{color:var(--slate) !important}
.cms-page .sec-paper .why-copy .check{color:var(--slate) !important}
.cms-page .sec-paper .feat{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r-card,18px);
  padding:20px 18px;
}

/* Shopify why — drop ink photo band; clean light section */
.shop-page .sec-paper .why-bg{display:none !important}
.shop-page .sec-paper .feat{
  background:#fff !important;
  border:1px solid var(--line) !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
.shop-page .sec-paper .feat h3{color:var(--graphite) !important}
.shop-page .sec-paper .feat p{color:var(--slate) !important}

/* Monthly process cards on light */
.mo-page .sec-paper .loop-card{
  background:#fff !important;
  border:1px solid var(--line) !important;
}
.mo-page .sec-paper .loop-card h4{color:var(--graphite) !important}
.mo-page .sec-paper .loop-card p{color:var(--slate) !important}

/* AI compare on light — keep cards readable with dark ink cards is fine;
   ensure section headings stay dark-on-mist (default) */

/* Services cards that stayed dark-tile on light sections are intentional contrast */

/* Shopify why compare boxes on light */
.shop-page .sec-paper .cmp.typ,
.shop-page .sec-paper .cmp.win{
  background:#fff !important;
  border:1px solid var(--line) !important;
}
.shop-page .sec-paper .cmp.win{border-color:var(--signal) !important}
.shop-page .sec-paper .cmp li{color:var(--slate) !important}
.shop-page .sec-paper .cmp.typ .ct{color:var(--slate-2,#6B7A80) !important}

.cms-page .sec-ink .plat-note{color:#9FB6BE !important}
.cms-page .sec-ink .ptile{color:var(--graphite)}

/* Shared DM intro (B2B/SaaS/ecom) — matches on-page chrome */
body.page-seo-service .dm-intro-grid{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:clamp(28px,4vw,56px);
  align-items:start;
}
body.page-seo-service .dm-intro-title{
  font-size:clamp(1.55rem,2.8vw,2.2rem);
  font-weight:800;
  color:var(--graphite);
  margin:0 0 18px;
  letter-spacing:-.02em;
  line-height:1.15;
}
body.page-seo-service .dm-intro-card{
  background:var(--ink);
  color:#B7CBD2;
  border-radius:18px;
  padding:clamp(24px,3vw,34px);
  border:1px solid rgba(244,122,31,.16);
}
body.page-seo-service .dm-intro-big{
  font-size:clamp(1.4rem,2.2vw,1.85rem);
  font-weight:800;
  color:#fff;
  letter-spacing:-.02em;
}
body.page-seo-service .dm-intro-lbl{
  margin-top:6px;
  color:var(--signal);
  font-size:.9rem;
  font-weight:600;
}
body.page-seo-service .dm-intro-card hr{
  border:0;
  border-top:1px solid rgba(255,255,255,.12);
  margin:18px 0;
}
body.page-seo-service .dm-intro-card .compare-list li{color:#C6D8DE}
body.page-seo-service .dm-intro-card .compare-list .mark.v{color:var(--signal)}
@media (max-width:900px){
  body.page-seo-service .dm-intro-grid{grid-template-columns:1fr}
}

/* Light problem cards on all unified pages */
body.page-seo-service .sec-paper .problem-card,
body.page-seo-service .sec-mist .problem-card{
  background:#fff !important;
  border:1px solid var(--line,#E1E9E5) !important;
  box-shadow:0 1px 2px rgba(13,32,41,.05),0 6px 18px -8px rgba(13,32,41,.10);
}
body.page-seo-service .sec-paper .problem-card h4,
body.page-seo-service .sec-mist .problem-card h4{color:var(--graphite,#0D2029) !important}
body.page-seo-service .sec-paper .problem-card p,
body.page-seo-service .sec-mist .problem-card p{color:var(--slate,#4B5B62) !important}

/* Mist services cards stay white (on-page style) */
body.page-seo-service .sec-mist .svc-card{
  background:#fff;
  border:1px solid var(--line,#E1E9E5);
}

/* ============================================================
   Match on-page typography on remaining standalone themes
   ============================================================ */
.page-service .shop-page,
.page-service .cms-page,
.page-service .rd-page,
.page-service .ac-page,
body.page-wordpress,
body.page-web-dev{
  font-family:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--graphite,#0D2029);
}
.page-service .shop-page h2,
.page-service .cms-page h2,
.page-service .rd-page h2,
.page-service .ac-page h2,
body.page-wordpress h2,
body.page-web-dev h2,
.page-service .shop-page .sec-head h2,
.page-service .cms-page .sec-head h2,
.page-service .rd-page .sec-head h2{
  font-size:clamp(1.75rem,3.6vw,2.75rem) !important;
  font-weight:700 !important;
  letter-spacing:-.02em !important;
  line-height:1.15 !important;
  color:var(--graphite,#0D2029) !important;
}
.page-service .shop-page .sec-ink h2,
.page-service .cms-page .sec-ink h2,
.page-service .rd-page .sec-ink h2,
.page-service .ac-page .sec-ink h2,
body.page-wordpress .sec-ink h2,
body.page-web-dev .sec-ink h2{
  color:#fff !important;
}
.page-service .shop-page .lede,
.page-service .cms-page .lede,
.page-service .rd-page .lede,
.page-service .ac-page .lede,
body.page-wordpress .lede,
body.page-web-dev .lede,
.page-service .shop-page .sec-head p,
.page-service .cms-page .sec-head p,
.page-service .rd-page .sec-head p,
.page-service .section-head p{
  font-size:clamp(1.02rem,1.35vw,1.15rem) !important;
  color:var(--slate,#4B5B62) !important;
  line-height:1.65 !important;
  font-weight:400 !important;
}
.page-service .shop-page .sec-ink .lede,
.page-service .cms-page .sec-ink .lede,
.page-service .rd-page .sec-ink .lede,
body.page-wordpress .sec-ink .lede,
body.page-web-dev .sec-ink .lede{
  color:#9FB6BE !important;
}
.page-service .shop-page p,
.page-service .cms-page p,
.page-service .rd-page p,
.page-service .ac-page p,
body.page-wordpress p,
body.page-web-dev p{
  color:var(--slate,#4B5B62);
  font-size:1rem;
  line-height:1.7;
}
.page-service .shop-page .sec-ink p,
.page-service .cms-page .sec-ink p,
.page-service .rd-page .sec-ink p,
body.page-wordpress .sec-ink p,
body.page-web-dev .sec-ink p{
  color:#B7CBD2;
}
.page-service .shop-page h4,
.page-service .cms-page h4,
.page-service .rd-page h4,
body.page-wordpress h4,
body.page-web-dev h4{
  font-size:1.05rem !important;
  font-weight:600 !important;
}

/* ============================================================
   GLOBAL CONTRAST LOCK � all service pages
   Light bg ? dark text + orange accents
   Dark bg  ? light text + orange accents
   ============================================================ */
.page-service,
body.page-web-dev,
body.page-wordpress{
  --kr-dark:var(--graphite,#0D2029);
  --kr-muted:var(--slate,#4B5B62);
  --kr-muted-2:var(--slate-2,#6B7A80);
  --kr-light:#fff;
  --kr-light-muted:#B7CBD2;
  --kr-light-soft:#9FB6BE;
  --kr-orange:var(--signal,#F47A1F);
  --kr-orange-deep:var(--signal-deep,#CD661A);
}

/* --- LIGHT sections (paper / mist / default) --- */
.page-service .sec-paper,
.page-service .sec-mist,
.page-service .sec-pain,
.page-service .sec-compare,
.page-service .sec-testi,
.page-service .dm-intro,
body.page-web-dev .sec-paper,
body.page-web-dev .sec-mist,
body.page-wordpress .sec-paper,
body.page-wordpress .sec-mist{
  color:var(--kr-dark);
}
.page-service .sec-paper h1,
.page-service .sec-paper h2,
.page-service .sec-paper h3,
.page-service .sec-paper h4,
.page-service .sec-mist h1,
.page-service .sec-mist h2,
.page-service .sec-mist h3,
.page-service .sec-mist h4,
.page-service .sec-paper .section-head h2,
.page-service .sec-mist .section-head h2,
.page-service .sec-paper .sec-head h2,
.page-service .sec-mist .sec-head h2,
.page-service .sec-paper .shead h2,
.page-service .sec-mist .shead h2,
body.page-web-dev .sec-paper h2,
body.page-web-dev .sec-mist h2,
body.page-wordpress .sec-paper h2,
body.page-wordpress .sec-mist h2{
  color:var(--kr-dark) !important;
}
/* Dark compare tiles override the light-section h3 lock */
.page-service .compare-card h3,
.page-service .sec-paper .compare-card h3,
.page-service .sec-mist .compare-card h3{
  color:#fff !important;
}
.page-service .compare-card.muted h3{
  color:#9FB6BE !important;
}
.page-service .compare-card p,
.page-service .compare-card .compare-sub,
.page-service .compare-card .compare-list,
.page-service .compare-card .compare-list li,
.page-service .sec-paper .compare-card p,
.page-service .sec-mist .compare-card p,
.page-service .sec-paper .compare-card .compare-list li,
.page-service .sec-mist .compare-card .compare-list li{
  color:#B7CBD2 !important;
}
.page-service .sec-paper p,
.page-service .sec-mist p,
.page-service .sec-paper .lede,
.page-service .sec-mist .lede,
.page-service .sec-paper .section-head p,
.page-service .sec-mist .section-head p,
.page-service .sec-paper .sec-head p,
.page-service .sec-mist .sec-head p,
body.page-web-dev .sec-paper p,
body.page-web-dev .sec-mist p,
body.page-wordpress .sec-paper p,
body.page-wordpress .sec-mist p{
  color:var(--kr-muted) !important;
}
.page-service .sec-paper .eyebrow,
.page-service .sec-mist .eyebrow,
.page-service .sec-paper .eyebrow::before,
.page-service .sec-mist .eyebrow::before,
body.page-web-dev .sec-paper .eyebrow,
body.page-web-dev .sec-mist .eyebrow,
body.page-wordpress .sec-paper .eyebrow,
body.page-wordpress .sec-mist .eyebrow{
  color:var(--kr-orange-deep) !important;
}
.page-service .sec-paper .hl,
.page-service .sec-mist .hl,
.page-service .sec-paper .emph,
.page-service .sec-mist .emph,
.page-service .sec-paper .accent,
.page-service .sec-mist .accent,
.page-service .sec-paper .mark,
.page-service .sec-mist .mark,
body.page-web-dev .sec-paper .hl,
body.page-web-dev .sec-mist .hl,
body.page-wordpress .sec-paper .hl,
body.page-wordpress .sec-mist .hl{
  color:var(--kr-orange-deep) !important;
}

/* Cards sitting on light sections */
.page-service .sec-paper .problem-card,
.page-service .sec-mist .problem-card,
.page-service .sec-paper .pain-card,
.page-service .sec-mist .pain-card,
.page-service .sec-paper .pain,
.page-service .sec-mist .pain,
.page-service .sec-paper .proc,
.page-service .sec-mist .proc,
.page-service .sec-paper .svc-card,
.page-service .sec-mist .svc-card,
.page-service .sec-paper .loop-card,
.page-service .sec-mist .loop-card{
  color:var(--kr-dark);
}
.page-service .sec-paper .problem-card h3,
.page-service .sec-paper .problem-card h4,
.page-service .sec-mist .problem-card h3,
.page-service .sec-mist .problem-card h4,
.page-service .sec-paper .pain-card h4,
.page-service .sec-mist .pain-card h4,
.page-service .sec-paper .pain h4,
.page-service .sec-mist .pain h4,
.page-service .sec-paper .proc h4,
.page-service .sec-mist .proc h4,
.page-service .sec-paper .svc-card h3,
.page-service .sec-mist .svc-card h3,
.page-service .sec-paper .svc-card h4,
.page-service .sec-mist .svc-card h4,
.page-service .sec-paper .loop-card h4,
.page-service .sec-mist .loop-card h4{
  color:var(--kr-dark) !important;
}
.page-service .sec-paper .problem-card p,
.page-service .sec-mist .problem-card p,
.page-service .sec-paper .pain-card p,
.page-service .sec-mist .pain-card p,
.page-service .sec-paper .pain p,
.page-service .sec-mist .pain p,
.page-service .sec-paper .proc p,
.page-service .sec-mist .proc p,
.page-service .sec-paper .svc-card p,
.page-service .sec-mist .svc-card p,
.page-service .sec-paper .loop-card p,
.page-service .sec-mist .loop-card p{
  color:var(--kr-muted) !important;
}
.page-service .sec-paper .proc .num,
.page-service .sec-mist .proc .num,
.page-service .sec-paper .pain-num,
.page-service .sec-mist .pain-num,
.page-service .sec-paper .loop-num,
.page-service .sec-mist .loop-num,
.page-service .sec-paper .compare-list .mark.v,
.page-service .sec-mist .compare-list .mark.v{
  color:var(--kr-orange) !important;
}

/* Compare tiles are dark — light copy (do NOT force dark text) */
.page-service .compare-card .mark.v{
  color:var(--kr-orange) !important;
}

/* FAQ on light */
.page-service .sec-paper .faq-item summary,
.page-service .sec-mist .faq-item summary,
.page-service .sec-paper .faq-body,
.page-service .sec-mist .faq-body,
.page-service .sec-paper .faq-q,
.page-service .sec-mist .faq-q{
  color:var(--kr-dark) !important;
}
.page-service .sec-paper .faq-body,
.page-service .sec-mist .faq-body,
.page-service .sec-paper .faq-a,
.page-service .sec-mist .faq-a,
.page-service .sec-paper .faq-a p,
.page-service .sec-mist .faq-a p{
  color:var(--kr-muted) !important;
}

/* Contact on light */
.page-service .sec-mist .contact-side h2,
.page-service .sec-mist .contact-side p,
.page-service .sec-paper .contact-side h2{
  color:var(--kr-dark) !important;
}
.page-service .sec-mist .contact-side p,
.page-service .sec-mist .contact-side .lede{
  color:var(--kr-muted) !important;
}
.page-service .sec-mist .contact-side .eyebrow{
  color:var(--kr-orange-deep) !important;
}

/* --- DARK sections (ink / hero / stats) --- */
.page-service .sec-ink,
.page-service .hero,
.page-service .stats-bg,
.page-service .stats-sec,
body.page-web-dev .sec-ink,
body.page-web-dev .hero,
body.page-wordpress .sec-ink,
body.page-wordpress .hero{
  color:var(--kr-light-muted);
}
.page-service .sec-ink h1,
.page-service .sec-ink h2,
.page-service .sec-ink h3,
.page-service .sec-ink h4,
.page-service .hero h1,
.page-service .hero h2,
.page-service .stats-bg h2,
.page-service .stats-sec h2,
.page-service .sec-ink .section-head h2,
.page-service .sec-ink .sec-head h2,
.page-service .sec-ink .shead h2,
body.page-web-dev .sec-ink h2,
body.page-wordpress .sec-ink h2{
  color:var(--kr-light) !important;
}
.page-service .sec-ink p,
.page-service .sec-ink .lede,
.page-service .sec-ink .section-head p,
.page-service .sec-ink .sec-head p,
.page-service .hero .sub,
.page-service .hero .lede,
.page-service .hero-sub,
.page-service .stats-bg .lede,
.page-service .stats-sec .lede,
body.page-web-dev .sec-ink p,
body.page-wordpress .sec-ink p{
  color:var(--kr-light-soft) !important;
}
.page-service .sec-ink .eyebrow,
.page-service .hero .eyebrow,
.page-service .stats-bg .eyebrow,
.page-service .stats-sec .eyebrow,
.page-service .sec-ink .eyebrow::before,
body.page-web-dev .sec-ink .eyebrow,
body.page-wordpress .sec-ink .eyebrow{
  color:var(--kr-orange) !important;
}
.page-service .sec-ink .hl,
.page-service .sec-ink .emph,
.page-service .sec-ink .accent,
.page-service .hero h1 .hl,
.page-service .hero h1 .accent,
.page-service .stats-bg .hl,
body.page-web-dev .sec-ink .hl,
body.page-wordpress .sec-ink .hl{
  color:var(--kr-orange) !important;
}

/* Dark-section cards (true dark tiles — not paper svc-cards) */
.page-service .sec-ink .problem-card,
.page-service .sec-ink .loop-card,
.page-service .sec-ink .pain,
.page-service .sec-ink .proc,
.page-service .page-svc-stack--ink .problem-card{
  color:var(--kr-light-muted);
}
.page-service .sec-ink .problem-card h3,
.page-service .sec-ink .problem-card h4,
.page-service .sec-ink .loop-card h4,
.page-service .sec-ink .pain h4,
.page-service .sec-ink .proc h4,
.page-service .page-svc-stack--ink h3,
.page-service .page-svc-stack--ink h4{
  color:var(--kr-light) !important;
}
.page-service .sec-ink .problem-card p,
.page-service .sec-ink .loop-card p,
.page-service .sec-ink .pain p,
.page-service .sec-ink .proc p,
.page-service .page-svc-stack--ink p{
  color:var(--kr-light-soft) !important;
}
.monthly-theme-page #process .loop-card,
.monthly-theme-page.webdev-ref #process .loop-card,
.page-service .monthly-theme-page .sec-ink .loop-card{
  background:#fff !important;
  border:1px solid var(--line,#E1E9E5) !important;
  color:#111 !important;
}
.monthly-theme-page #process .loop-card h4,
.monthly-theme-page.webdev-ref #process .loop-card h4,
.page-service .monthly-theme-page .sec-ink .loop-card h4,
.monthly-theme-page #process .loop-card p,
.monthly-theme-page.webdev-ref #process .loop-card p,
.page-service .monthly-theme-page .sec-ink .loop-card p{
  color:#111 !important;
}

/* Light paper svc-cards read dark; ink / why tiles stay white (see rules below) */
.page-service .svc-card,
.page-service .services-bg .svc-card{
  color:var(--kr-dark);
  background:var(--paper,#fff);
}
.page-service .svc-card h3,
.page-service .svc-card h4,
.page-service .services-bg .svc-card h3,
.page-service .services-bg .svc-card h4{
  color:var(--kr-dark) !important;
}
.page-service .svc-card p,
.page-service .services-bg .svc-card p,
.page-service .svc-card .compare-list li,
.page-service .services-bg .svc-card .compare-list li{
  color:var(--kr-muted) !important;
}
.page-service .svc-card .compare-list .mark.v,
.page-service .sec-ink .svc-card .compare-list .mark.v,
.page-service .services-bg .svc-card .compare-list .mark.v{
  color:var(--kr-orange) !important;
}

/* Dark tile exception (on-page included) */
body.page-seo-service .seo-included .svc-card{
  color:var(--kr-light-muted);
  background:rgba(255,255,255,.04);
}
body.page-seo-service .seo-included .svc-card h3,
body.page-seo-service .seo-included .svc-card h4{
  color:var(--kr-light) !important;
}
body.page-seo-service .seo-included .svc-card p{
  color:var(--kr-light-soft) !important;
}

.page-service .sec-ink .proc .num,
.page-service .sec-ink .loop-num,
.page-service .sec-ink .stat .num,
.page-service .stats-bg .stat .num,
.page-service .hero-trust .ht b{
  color:var(--kr-orange) !important;
}

/* Light Outcomes / stats row */
.page-service .stats-light .stat{
  border-left-color:rgba(13,32,41,.12);
}
.page-service .stats-light .stat .num,
.page-service .sec-paper .stats .num,
.page-service .sec-mist .stats .num{
  color:var(--kr-orange) !important;
}
.page-service .stats-light .stat .lbl,
.page-service .sec-paper .stats .lbl,
.page-service .sec-mist .stats .lbl{
  color:var(--kr-muted-2) !important;
}

/* What you get — image background (moved from Outcomes) */
.page-service .sec-ink.services-bg{
  position:relative;
  isolation:isolate;
  overflow:hidden;
}
.page-service .sec-ink.services-bg::before{
  content:"";
  position:absolute;inset:0;z-index:-2;
  background:var(--services-bg-image) center right/cover no-repeat;
  opacity:.55;
}
.page-service .sec-ink.services-bg::after{
  content:"";
  position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(90deg,rgba(10,26,34,.94) 0%,rgba(10,26,34,.72) 40%,rgba(10,26,34,.5) 100%),
    linear-gradient(180deg,rgba(10,26,34,.25) 0%,rgba(10,26,34,.15) 50%,rgba(10,26,34,.6) 100%);
}

/* Intro card (dark tile on light intro) */
.page-service .dm-intro-card{
  color:var(--kr-light-muted) !important;
}
.page-service .dm-intro-card .dm-intro-big,
.page-service .dm-intro-card h3,
.page-service .dm-intro-card h4{
  color:var(--kr-light) !important;
}
.page-service .dm-intro-card .dm-intro-lbl,
.page-service .dm-intro-card .mark.v{
  color:var(--kr-orange) !important;
}
.page-service .dm-intro-card p,
.page-service .dm-intro-card li,
.page-service .dm-intro-card .compare-list li{
  color:var(--kr-light-muted) !important;
}

/* Scoped wrappers (shop/cms/rd/ac) � same rules */
.page-service .shop-page .sec-paper,
.page-service .shop-page .sec-mist,
.page-service .cms-page .sec-paper,
.page-service .cms-page .sec-mist,
.page-service .rd-page .sec-paper,
.page-service .rd-page .sec-mist,
.page-service .ac-page .sec-paper,
.page-service .ac-page .sec-mist{
  color:var(--kr-dark);
}
.page-service .shop-page .sec-ink,
.page-service .cms-page .sec-ink,
.page-service .rd-page .sec-ink,
.page-service .ac-page .sec-ink,
.page-service .shop-page .hero,
.page-service .cms-page .hero,
.page-service .rd-page .hero,
.page-service .ac-page .hero{
  color:var(--kr-light-muted);
}

/* Breadcrumb separator — ASCII-safe escape (never mojibake) */
.page-service .breadcrumb li:not(:last-child)::after,
.page-service .crumbs li:not(:last-child)::after,
.page-service .wp-breadcrumb li:not(:last-child)::after,
body.page-web-dev .breadcrumb li:not(:last-child)::after,
body.page-wordpress .wp-breadcrumb li:not(:last-child)::after,
body.page-seo-service .breadcrumb li:not(:last-child)::after,
.page-services-index .breadcrumb li:not(:last-child)::after{
  content:"\203A" !important;
}

/* Why-cards: dark tiles only on ink / intentional dark why sections */
.page-service .seo-why.sec-ink .why-card,
.page-service .why-bg .why-card,
.page-service .sec-ink .why-card,
body.page-seo-service .seo-why.sec-ink .why-card{
  background:var(--ink,#0A1A22) !important;
  border:1px solid rgba(255,255,255,.06) !important;
  color:#B7CBD2 !important;
}
.page-service .seo-why.sec-ink .why-card h3,
.page-service .why-bg .why-card h3,
.page-service .sec-ink .why-card h3,
body.page-seo-service .seo-why.sec-ink .why-card h3{
  color:#fff !important;
}
.page-service .seo-why.sec-ink .why-card p,
.page-service .seo-why.sec-ink .why-card li,
.page-service .why-bg .why-card p,
.page-service .sec-ink .why-card p,
.page-service .sec-ink .why-card li,
body.page-seo-service .seo-why.sec-ink .why-card p,
body.page-seo-service .seo-why.sec-ink .why-card li{
  color:#B7CBD2 !important;
}
/* Section head on light why stays dark */
body.page-seo-service .sec-paper.seo-why .section-head h2{
  color:var(--graphite,#0D2029) !important;
}
body.page-seo-service .sec-paper.seo-why .section-head .lede{
  color:var(--slate,#4B5B62) !important;
}
body.page-seo-service .sec-paper.seo-why .section-head .hl{
  color:var(--signal,#F47A1F) !important;
}


/* COMPARE-LIGHT-TEXT — all service pages: dark tiles, light copy */
.page-service #compare .compare-card,
.page-service .compare-wrap .compare-card,
.page-service .sec-mist .compare-card,
.page-service .sec-paper .compare-card,
.page-service .shop-page .compare-card,
.page-service .cms-page .compare-card,
.page-service .rd-page .compare-card,
.page-service .ac-page .compare-card,
body.page-seo-service #compare .compare-card,
body.page-web-dev #compare .compare-card,
body.page-wordpress #compare .compare-card{
  background:var(--ink-2,#122832) !important;
  border:1px solid rgba(255,255,255,.08) !important;
  color:#B7CBD2 !important;
}
.page-service #compare .compare-card.pro,
.page-service .compare-wrap .compare-card.pro,
.page-service .sec-mist .compare-card.pro,
.page-service .sec-paper .compare-card.pro,
body.page-seo-service #compare .compare-card.pro{
  background:var(--ink,#0A1A22) !important;
  border:2px solid var(--signal,#F47A1F) !important;
}
.page-service #compare .compare-card h3,
.page-service .compare-wrap .compare-card h3,
.page-service .sec-mist .compare-card h3,
.page-service .sec-paper .compare-card h3,
.page-service .sec-mist .compare-card.pro h3,
.page-service .sec-paper .compare-card.pro h3,
body.page-seo-service #compare .compare-card h3,
body.page-seo-service #compare .compare-card.pro h3{
  color:#fff !important;
}
.page-service #compare .compare-card.muted h3,
.page-service .compare-wrap .compare-card.muted h3{
  color:#9FB6BE !important;
}
.page-service #compare .compare-sub,
.page-service .compare-wrap .compare-sub,
.page-service #compare .compare-list,
.page-service #compare .compare-list li,
.page-service .compare-wrap .compare-list,
.page-service .compare-wrap .compare-list li,
.page-service .sec-mist .compare-card .compare-list,
.page-service .sec-mist .compare-card .compare-list li,
.page-service .sec-paper .compare-card .compare-list,
.page-service .sec-paper .compare-card .compare-list li,
.page-service .sec-mist .compare-card p,
.page-service .sec-paper .compare-card p,
body.page-seo-service #compare .compare-list li,
body.page-seo-service #compare .compare-sub{
  color:#B7CBD2 !important;
}
.page-service #compare .compare-card.muted .compare-list li,
.page-service .compare-wrap .compare-card.muted .compare-list li{
  color:#9FB6BE !important;
}
.page-service #compare .mark.v,
.page-service .compare-wrap .mark.v{
  color:var(--signal,#F47A1F) !important;
}

/* OFFPAGE-LIGHT-FIX — close panel light copy */
body.page-seo-service .seo-close h3{ color:#fff !important; }
body.page-seo-service .seo-close > p,
body.page-seo-service .seo-close li,
body.page-seo-service .seo-close li span{ color:#C6D7DD !important; }
body.page-seo-service .seo-close li svg{ color:var(--signal) !important; }
/* Off-page Why KodRank — image bg moved from stats */
.page-service .sec-ink.why-bg,
body.page-seo-service .seo-why.why-bg{
  position:relative;
  isolation:isolate;
  overflow:hidden;
}
.page-service .sec-ink.why-bg::before,
body.page-seo-service .seo-why.why-bg::before{
  content:"";
  position:absolute;inset:0;z-index:-2;
  background:var(--why-bg-image, url('../media/services/digital-marketing/bg-3.webp')) center right/cover no-repeat;
  opacity:.5;
}
.page-service .sec-ink.why-bg::after,
body.page-seo-service .seo-why.why-bg::after{
  content:"";
  position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(90deg,rgba(10,26,34,.94) 0%,rgba(10,26,34,.78) 45%,rgba(10,26,34,.55) 100%),
    linear-gradient(180deg,rgba(10,26,34,.2) 0%,rgba(10,26,34,.55) 100%);
}
body.page-seo-service .seo-why.why-bg .section-head h2,
body.page-seo-service .seo-why.why-bg .why-card h3{
  color:#fff !important;
}
body.page-seo-service .seo-why.why-bg .lede,
body.page-seo-service .seo-why.why-bg .why-card p{
  color:#B7CBD2 !important;
}
body.page-seo-service .seo-why.why-bg .eyebrow{
  color:var(--signal) !important;
}
body.page-seo-service .seo-why.why-bg .hl{
  color:var(--signal) !important;
}

/* ============================================================
   KR-VAR-REMAP-DARK — on dark surfaces, --kr-dark / --kr-muted
   resolve to LIGHT so leftover contrast locks stay readable
   ============================================================ */
.page-service .sec-ink,
.page-service .hero,
.page-service .stats-bg,
.page-service .stats-sec,
.page-service .services-bg,
.page-service .why-bg,
.page-service .cta-bg,
.page-service .problem-bg,
.page-service .playbook-bg,
.page-service .seo-close,
.page-service .compare-card,
.page-service .seo-why.sec-ink .why-card,
.page-service .seo-why.why-bg .why-card,
.page-service .sec-ink .why-card,
.page-service .dm-intro-card,
.page-service .seo-included .svc-card,
body.page-web-dev .sec-ink,
body.page-web-dev .hero,
body.page-wordpress .sec-ink,
body.page-wordpress .hero,
body.page-wordpress .wp-hero,
.page-service .shop-page .sec-ink,
.page-service .cms-page .sec-ink,
.page-service .rd-page .sec-ink,
.page-service .ac-page .sec-ink,
.page-service .shop-page .hero,
.page-service .cms-page .hero,
.page-service .rd-page .hero,
.page-service .ac-page .hero{
  --kr-dark:#fff;
  --kr-muted:#B7CBD2;
  --kr-muted-2:#9FB6BE;
}

/* Digital marketing Problem is a light (white) band — keep real dark tokens */
body.page-dm .dm-theme-page .problem-bg,
body.page-dm .sec-ink.problem-bg{
  --kr-dark:#0A1A22;
  --kr-muted:#3A4A50;
  --kr-muted-2:#4B5B62;
}

/* Paper / light tiles inside dark sections keep REAL dark text */
.page-service .sec-ink .svc-card,
.page-service .services-bg .svc-card,
.page-service .sec-ink .problem-card,
.page-service .sec-paper .svc-card,
.page-service .sec-mist .svc-card,
.page-service .sec-paper .problem-card,
.page-service .sec-mist .problem-card,
.page-service .sec-paper .proc,
.page-service .sec-mist .proc,
.page-service .sec-paper .pain,
.page-service .sec-mist .pain,
.page-service .sec-paper .pain-card,
.page-service .sec-mist .pain-card,
.page-service .sec-paper .loop-card,
.page-service .sec-mist .loop-card{
  --kr-dark:var(--graphite,#0D2029);
  --kr-muted:var(--slate,#4B5B62);
  --kr-muted-2:var(--slate-2,#6B7A80);
}

/* Explicit light copy on dark tiles (beats any leftover lock) */
.page-service .sec-ink h1,
.page-service .sec-ink h2,
.page-service .sec-ink h3,
.page-service .sec-ink h4,
.page-service .hero h1,
.page-service .hero h2,
.page-service .compare-card h3,
.page-service .seo-why.sec-ink .why-card h3,
.page-service .seo-why.why-bg .why-card h3,
.page-service .sec-ink .why-card h3,
.page-service .seo-close h3,
.page-service .dm-intro-card h3,
.page-service .dm-intro-card .dm-intro-big,
body.page-web-dev .sec-ink h2,
body.page-wordpress .sec-ink h2,
body.page-wordpress .wp-hero h1{
  color:var(--kr-dark,#fff) !important;
}
.page-service .sec-ink p,
.page-service .sec-ink .lede,
.page-service .sec-ink li,
.page-service .hero .sub,
.page-service .hero .lede,
.page-service .compare-card p,
.page-service .compare-card .compare-sub,
.page-service .compare-card .compare-list,
.page-service .compare-card .compare-list li,
.page-service .seo-why.sec-ink .why-card p,
.page-service .seo-why.sec-ink .why-card li,
.page-service .seo-why.why-bg .why-card p,
.page-service .seo-why.why-bg .why-card li,
.page-service .sec-ink .why-card p,
.page-service .sec-ink .why-card li,
.page-service .seo-close p,
.page-service .seo-close li,
.page-service .seo-close li span,
.page-service .dm-intro-card p,
.page-service .dm-intro-card li,
body.page-web-dev .sec-ink p,
body.page-wordpress .sec-ink p{
  color:var(--kr-muted,#B7CBD2) !important;
}
.page-service .compare-card.muted h3{
  color:var(--kr-muted-2,#9FB6BE) !important;
}
.page-service .compare-card.muted .compare-list li{
  color:var(--kr-muted-2,#9FB6BE) !important;
}

/* Orange accents stay orange on dark */
.page-service .sec-ink .hl,
.page-service .sec-ink .emph,
.page-service .sec-ink .eyebrow,
.page-service .hero .hl,
.page-service .compare-card .mark.v,
.page-service .why-card .hl,
.page-service .seo-close .hl{
  color:var(--kr-orange,var(--signal,#F47A1F)) !important;
}

/* ============================================================
   CONTRAST-VERIFY-ALL — never dark-on-dark / light-on-light
   ============================================================ */

/* --- Dark panels nested in light sections --- */
.page-service .prob-panel,
.page-service .ac-page .prob-panel,
.page-service .seo-close,
.page-service .compare-card,
.page-service .seo-why.sec-ink .why-card,
.page-service .seo-why.why-bg .why-card,
.page-service .sec-ink .why-card,
.page-service .dm-intro-card,
.page-service .cmp-card,
.page-service .ac-page .cmp-card{
  --kr-dark:#fff;
  --kr-muted:#B7CBD2;
  --kr-muted-2:#9FB6BE;
  color:#B7CBD2 !important;
}
.page-service .prob-panel h3,
.page-service .prob-panel .flip,
.page-service .ac-page .prob-panel h3,
.page-service .ac-page .prob-panel .flip,
.page-service .cmp-card h3,
.page-service .ac-page .cmp-card h3{
  color:#fff !important;
}
.page-service .prob-panel p,
.page-service .prob-panel .flip,
.page-service .ac-page .prob-panel p,
.page-service .seo-close p,
.page-service .seo-close li,
.page-service .seo-close li span,
.page-service .cmp-card li,
.page-service .ac-page .cmp-card li{
  color:#B7CBD2 !important;
}
.page-service .prob-panel .big,
.page-service .ac-page .prob-panel .big,
.page-service .prob-panel .o,
.page-service .ac-page .prob-panel .o,
.page-service .ac-page .prob-panel .flip .o{
  color:var(--signal,#F47A1F) !important;
}

/* --- Light / white cards nested in dark sections (AC / CMS / redesign) --- */
.page-service .ac-page .sec-ink .svc,
.page-service .rd-page .sec-ink .svc,
.page-service .cms-page .sec-ink .svc,
.page-service .ac-page .sec-ink .why,
.page-service .sec-ink .svc-card,
.page-service .services-bg .svc-card{
  --kr-dark:var(--graphite,#0D2029);
  --kr-muted:var(--slate,#4B5B62);
  --kr-muted-2:var(--slate-2,#6B7A80);
  color:var(--graphite,#0D2029) !important;
  background:#fff !important;
}
.page-service .ac-page .sec-ink .svc h3,
.page-service .rd-page .sec-ink .svc h3,
.page-service .cms-page .sec-ink .svc h3,
.page-service .ac-page .sec-ink .why h3,
.page-service .sec-ink .svc-card h3,
.page-service .sec-ink .svc-card h4,
.page-service .services-bg .svc-card h3{
  color:var(--graphite,#0D2029) !important;
}
.page-service .ac-page .sec-ink .svc p,
.page-service .rd-page .sec-ink .svc p,
.page-service .cms-page .sec-ink .svc p,
.page-service .ac-page .sec-ink .why p,
.page-service .sec-ink .svc-card p,
.page-service .services-bg .svc-card p,
.page-service .ac-page .chip{
  color:var(--slate,#4B5B62) !important;
}
.page-service .ac-page .sec-ink .svc .tlink,
.page-service .ac-page .sec-ink .svc .o,
.page-service .cms-page .sec-ink .svc .tlink,
.page-service .rd-page .sec-ink .svc .tlink{
  color:var(--signal-deep,#CD661A) !important;
}

/* Dark section headings/body (not light cards) */
.page-service .ac-page .sec-ink > .wrap > .sec-head h2,
.page-service .ac-page .sec-ink .sec-head h2,
.page-service .shop-page .sec-ink .sec-head h2,
.page-service .cms-page .sec-ink .sec-head h2,
.page-service .rd-page .sec-ink .sec-head h2{
  color:#fff !important;
}
.page-service .ac-page .sec-ink > .wrap > .sec-head p,
.page-service .ac-page .sec-ink .sec-head p,
.page-service .ac-page .sec-ink .lede{
  color:#9FB6BE !important;
}

/* Fix blanket ac-page p = slate leaking into ink/dark panels */
.page-service .ac-page .sec-ink .sec-head p,
.page-service .ac-page .prob-panel p,
.page-service .ac-page .cmp-card p,
.page-service .ac-page .cmp-card li{
  color:#B7CBD2 !important;
}
.page-service .ac-page .sec-ink .svc p,
.page-service .ac-page .sec-ink .why p{
  color:var(--slate,#4B5B62) !important;
}
.page-service .ac-page .sec-ink .svc h3,
.page-service .ac-page .sec-ink .why h3{
  color:var(--graphite,#0D2029) !important;
}
.page-service .ac-page .prob-panel h3,
.page-service .ac-page .prob-panel .flip{
  color:#fff !important;
}

/* Dark feat / shop tiles keep light copy */
.page-service .shop-page .feat,
.page-service .cms-page .feat{
  color:#B7CBD2 !important;
}
.page-service .shop-page .feat h3,
.page-service .shop-page .feat h4,
.page-service .cms-page .feat h3,
.page-service .cms-page .feat h4{
  color:#fff !important;
}
.page-service .shop-page .feat p,
.page-service .cms-page .feat p{
  color:#B7CBD2 !important;
}

/* ============================================================
   COMPARE-EQUAL-HEIGHT — equal cards + visible KodRank badge
   ============================================================ */
.page-service .compare-wrap,
body.page-wordpress .compare-wrap,
body.page-web-dev .compare-wrap,
body.page-seo-service .compare-wrap{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(16px,2.5vw,22px);
  align-items:stretch !important;
  margin-top:clamp(36px,5vw,56px);
  padding-top:18px; /* room for floating badge */
  overflow:visible !important;
}
.page-service .compare-card,
.page-service #compare .compare-card,
body.page-wordpress .compare-card,
body.page-web-dev .compare-card,
body.page-seo-service .compare-card{
  height:100% !important;
  min-height:100%;
  display:flex !important;
  flex-direction:column;
  box-sizing:border-box;
  overflow:visible !important;
  position:relative;
}
.page-service .compare-card .compare-list,
body.page-wordpress .compare-card .compare-list{
  flex:1 1 auto;
  margin:0;
}
.page-service .compare-card.pro::before,
body.page-wordpress .compare-card.pro::before{
  content:attr(data-badge);
  position:absolute;
  top:-14px;
  left:28px;
  z-index:3;
  background:var(--signal,#F47A1F);
  color:#0A1A22;
  padding:5px 14px;
  border-radius:999px;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  white-space:nowrap;
  pointer-events:none;
}
.page-service .compare-card.pro:not([data-badge])::before,
.page-service .compare-card.pro[data-badge=""]::before{
  content:"KodRank";
}
.page-service .compare-pro-badge,
body.page-seo-service .compare-pro-badge,
.page-service #compare .compare-pro-badge,
.page-service .compare-wrap .compare-pro-badge,
body.page-wordpress .compare-pro-badge{
  position:absolute !important;
  top:-14px !important;
  left:28px !important;
  z-index:3 !important;
  display:inline-flex !important;
  align-items:center;
  background:var(--signal,#F47A1F) !important;
  color:#0A1A22 !important;
  padding:5px 14px !important;
  border-radius:999px !important;
  font-size:.72rem !important;
  font-weight:700 !important;
  letter-spacing:.06em !important;
  text-transform:uppercase !important;
  white-space:nowrap;
  line-height:1.2;
  visibility:visible !important;
  opacity:1 !important;
}
/* Prefer HTML badge; hide duplicate ::before when badge span exists */
.page-service .compare-card.pro:has(.compare-pro-badge)::before,
body.page-wordpress .compare-card.pro:has(.compare-pro-badge)::before,
body.page-seo-service .compare-card.pro::before{
  content:none !important;
  display:none !important;
}
@media (max-width:820px){
  .page-service .compare-wrap,
  body.page-wordpress .compare-wrap,
  body.page-web-dev .compare-wrap,
  body.page-seo-service .compare-wrap{
    grid-template-columns:1fr;
  }
}

/* DARK-CARD-WHITE-TEXT — ink definition / intro cards always white copy */
.page-service .seo-def-card,
.page-service .seo-def-card *,
.page-service .dm-intro-card,
.page-service .intro-aside,
.page-service .mo-page .intro-aside,
.page-service .prob-panel,
.page-service .ac-page .prob-panel{
  color:#fff !important;
}
.page-service .seo-def-card h3,
.page-service .seo-def-card p,
.page-service .seo-def-card li,
.page-service .seo-def-card span:not(.seo-def-check),
.page-service .dm-intro-card h3,
.page-service .dm-intro-card p,
.page-service .dm-intro-card li,
.page-service .intro-aside h3,
.page-service .intro-aside p,
.page-service .intro-aside li,
.page-service .prob-panel h3,
.page-service .prob-panel p,
.page-service .prob-panel .flip,
.page-service .ac-page .prob-panel h3,
.page-service .ac-page .prob-panel p,
.page-service .ac-page .prob-panel .flip,
body.page-onpage .onpage-theme-page .def-card h3,
body.page-onpage .onpage-theme-page .def-card p,
body.page-onpage .onpage-theme-page .def-card li,
body.page-onpage.page-service .sec-mist .def-card h3,
body.page-onpage.page-service .sec-mist .def-card p{
  color:#fff !important;
}
.page-service .seo-def-card .hl,
.page-service .seo-def-card .o,
.page-service .prob-panel .o,
.page-service .ac-page .prob-panel .o,
.page-service .dm-intro-card .mark.v{
  color:var(--signal,#F47A1F) !important;
}

/* WEBDEV-SVC-CARD-LG — dark featured cards keep light copy */
body.page-web-dev .svc-card-lg,
body.page-web-dev .service-card.svc-card-lg,
.page-service .svc-card-lg{
  background:var(--ink,#0A1A22) !important;
  color:#fff !important;
  --kr-dark:#fff;
  --kr-muted:#B7CBD2;
}
body.page-web-dev .svc-card-lg h3,
body.page-web-dev .service-card.svc-card-lg h3,
body.page-web-dev .sec-paper .svc-card-lg h3,
.page-service .svc-card-lg h3{
  color:#fff !important;
}
body.page-web-dev .svc-card-lg p,
body.page-web-dev .service-card.svc-card-lg p,
body.page-web-dev .sec-paper .svc-card-lg p,
body.page-web-dev .svc-card-lg .tag,
.page-service .svc-card-lg p,
.page-service .svc-card-lg .tag{
  color:#B7CBD2 !important;
}

/* SHOPIFY-PAIN-LINE — dark ink footer band keeps light copy */
.page-service .shop-page .pain-line,
.shop-page .pain-line,
.page-service .sec-paper .pain-line{
  background:var(--ink,#0A1A22) !important;
  color:#fff !important;
  --kr-dark:#fff;
  --kr-muted:#B7CBD2;
}
.page-service .shop-page .pain-line p,
.page-service .sec-paper .pain-line p,
.shop-page .pain-line p,
.page-service .shop-page .pain-line b,
.page-service .sec-paper .pain-line b,
.shop-page .pain-line b{
  color:#B7CBD2 !important;
}
.page-service .shop-page .pain-line b,
.page-service .sec-paper .pain-line b,
.shop-page .pain-line b{
  color:#fff !important;
}
.page-service .shop-page .pain-line .mark,
.page-service .sec-paper .pain-line .mark,
.shop-page .pain-line .mark{
  color:var(--signal,#F47A1F) !important;
}
.page-service .shop-page .pain-line .tlink,
.page-service .sec-paper .pain-line .tlink,
.shop-page .pain-line .tlink{
  color:var(--signal,#F47A1F) !important;
}

/* AC-CAROUSEL-SLIDES — why / process / services use shared carousel + stack */
.page-service .ac-page .page-svc-carousel .why,
.page-service .ac-page .page-svc-carousel .why-card,
.page-service .ac-page .page-svc-stack .pstep,
.page-service .ac-page .page-svc-stack .proc,
.page-service .ac-page .page-svc-stack .svc,
.page-service .ac-page .page-svc-carousel .svc{
  display:flex !important;
  flex-direction:column;
  margin:0 !important;
  float:none !important;
  box-sizing:border-box;
  min-height:0;
  height:auto;
  max-width:none;
}
.page-service .ac-page .page-svc-carousel .why-grid,
.page-service .ac-page .page-svc-stack .svc-grid,
.page-service .ac-page .page-svc-stack .proc{
  display:contents;
}
.page-service .ac-page .page-svc-carousel .why,
.page-service .ac-page .page-svc-carousel .why-card{
  background:#fff !important;
  border:1px solid var(--line,#E4EBEE);
  border-top:3px solid var(--signal,#F47A1F);
  color:var(--graphite,#0D2029) !important;
  --kr-dark:var(--graphite,#0D2029);
  --kr-muted:var(--slate,#4B5B62);
}
.page-service .ac-page .page-svc-carousel .why h3,
.page-service .ac-page .page-svc-carousel .why-card h3{
  color:var(--graphite,#0D2029) !important;
}
.page-service .ac-page .page-svc-carousel .why p,
.page-service .ac-page .page-svc-carousel .why-card p{
  color:var(--slate,#4B5B62) !important;
}
.page-service .ac-page .page-svc-carousel .why .num,
.page-service .ac-page .page-svc-carousel .why-card .num{
  color:var(--signal,#F47A1F) !important;
}
.page-service .ac-page .page-svc-stack .pstep,
.page-service .ac-page .page-svc-stack .proc{
  background:#fff !important;
  border:1px solid var(--line,#E4EBEE);
  color:var(--graphite,#0D2029) !important;
  --kr-dark:var(--graphite,#0D2029);
  --kr-muted:var(--slate,#4B5B62);
}
.page-service .ac-page .page-svc-stack .pstep h4,
.page-service .ac-page .page-svc-stack .proc h4{
  color:var(--graphite,#0D2029) !important;
}
.page-service .ac-page .page-svc-stack .pstep p,
.page-service .ac-page .page-svc-stack .proc p{
  color:var(--slate,#4B5B62) !important;
}
.page-service .ac-page .page-svc-stack .pstep .pn,
.page-service .ac-page .page-svc-stack .proc .num,
.page-service .ac-page .page-svc-stack .pstep .num{
  color:var(--signal,#F47A1F) !important;
}
.page-service .ac-page .page-svc-stack .svc{
  height:100%;
}
.page-service .ac-page .page-svc-stack .svc .tlink{
  margin-top:auto;
}

/* GUEST-WHY-FEAT — vetting cards match theme feat tiles (4-up dark) */
.page-service .why-grid--4{
  grid-template-columns:repeat(4,minmax(0,1fr));
}
@media (max-width:1080px){
  .page-service .why-grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  .page-service .why-grid--4{grid-template-columns:1fr}
}
.page-service .seo-why .why-card .why-num,
.page-service .why-card .why-num{
  font-size:1.35rem;
  font-weight:800;
  color:var(--signal,#F47A1F);
  letter-spacing:-.02em;
  line-height:1;
  margin:0 0 10px;
}
.page-service .seo-why .why-card .tile{
  width:44px;height:44px;border-radius:11px;
  background:rgba(244,122,31,.14);
  display:grid;place-items:center;margin-bottom:16px;
  color:var(--signal,#F47A1F);
}
.page-service .seo-why .why-card .tile svg{
  width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2;
}

/* Global section spacing / responsive rhythm */
@media (max-width: 860px) {
  .page-service section.sec,
  .page-service section.sec-mist,
  .page-service section.sec-ink,
  .page-service section.paper,
  .page-service .elec-page section,
  .page-service .saas-dev-page section {
    padding-block: clamp(40px, 8vw, 72px);
  }
}
@media (max-width: 560px) {
  .page-service section.sec,
  .page-service section.sec-mist,
  .page-service section.sec-ink,
  .page-service section.paper,
  .page-service .elec-page section,
  .page-service .saas-dev-page section {
    padding-block: clamp(36px, 9vw, 56px);
  }
  .page-service .wrap { padding-left: 18px; padding-right: 18px; }
}
/* ========== Electrician + SaaS: hero fix, light SEO, carousels ========== */
body.page-seo-service.page-saas-dev .hero,
body.page-seo-service.page-electrician .hero{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  min-height:0 !important;
  height:auto !important;
  padding-top:calc(84px + 16px) !important;
  padding-bottom:clamp(44px,6vw,80px) !important;
  display:block !important;
}
body.page-seo-service.page-saas-dev .hero .hero-bg,
body.page-seo-service.page-electrician .hero .hero-bg,
body.page-seo-service.page-saas-dev .hero .hero-veil,
body.page-seo-service.page-electrician .hero .hero-veil{
  position:absolute !important;
  inset:0 !important;
  z-index:0 !important;
  pointer-events:none;
  margin:0 !important;
}
body.page-seo-service.page-saas-dev .hero .hero-bg,
body.page-seo-service.page-electrician .hero .hero-bg{
  z-index:0 !important;
  background-size:cover !important;
  background-position:center right !important;
  background-repeat:no-repeat !important;
  opacity:.42 !important;
}
body.page-seo-service.page-saas-dev .hero .hero-veil,
body.page-seo-service.page-electrician .hero .hero-veil{
  z-index:1 !important;
  background:
    radial-gradient(120% 90% at 82% 45%, rgba(244,122,31,.08), transparent 55%),
    linear-gradient(100deg, rgba(10,26,34,.96) 0%, rgba(10,26,34,.9) 40%, rgba(10,26,34,.7) 68%, rgba(10,26,34,.45) 100%) !important;
}
body.page-seo-service.page-saas-dev .hero > .wrap,
body.page-seo-service.page-electrician .hero > .wrap{
  position:relative;
  z-index:2;
}
body.page-seo-service.page-saas-dev .hero .hero-copy,
body.page-seo-service.page-electrician .hero .hero-copy{
  position:relative;
  z-index:2;
  max-width:min(720px,100%);
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:0;
  padding:0 !important;
}
body.page-seo-service.page-saas-dev .hero .breadcrumb,
body.page-seo-service.page-electrician .hero .breadcrumb{
  margin:0 0 18px !important;
  max-width:100%;
}
body.page-seo-service.page-saas-dev .hero .breadcrumb ol,
body.page-seo-service.page-electrician .hero .breadcrumb ol{
  flex-wrap:wrap;
  row-gap:6px;
}
body.page-seo-service.page-saas-dev .hero h1,
body.page-seo-service.page-electrician .hero h1{
  max-width:min(16ch,100%) !important;
  width:100%;
  font-size:clamp(2rem,4.2vw,3.35rem) !important;
  line-height:1.12 !important;
  letter-spacing:-.02em !important;
  color:#fff !important;
  margin:0 0 18px !important;
  position:relative;
  z-index:2;
}
body.page-seo-service.page-saas-dev .hero h1 .hl,
body.page-seo-service.page-saas-dev .hero h1 .accent,
body.page-seo-service.page-electrician .hero h1 .hl,
body.page-seo-service.page-electrician .hero h1 .accent{
  color:var(--signal,#F47A1F) !important;
  display:inline !important;
}
body.page-seo-service.page-saas-dev .hero .sub,
body.page-seo-service.page-electrician .hero .sub,
body.page-seo-service.page-saas-dev .hero .lede,
body.page-seo-service.page-electrician .hero .lede{
  color:#C6D8DE !important;
  max-width:52ch;
  margin:0 0 26px !important;
  line-height:1.55;
  font-size:clamp(1rem,1.4vw,1.18rem) !important;
  position:relative;
  z-index:2;
}
body.page-seo-service.page-saas-dev .hero .hero-actions,
body.page-seo-service.page-electrician .hero .hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin:0 !important;
  position:relative;
  z-index:2;
}
body.page-seo-service.page-saas-dev .hero .hero-actions .arw,
body.page-seo-service.page-electrician .hero .hero-actions .arw{
  display:none;
}
body.page-seo-service.page-saas-dev .hero .hero-trust,
body.page-seo-service.page-electrician .hero .hero-trust{
  display:flex;
  flex-wrap:wrap;
  gap:28px 36px;
  margin-top:36px !important;
  padding-top:24px;
  border-top:1px solid rgba(244,122,31,.18);
  width:100%;
  position:relative;
  z-index:2;
}
body.page-seo-service.page-saas-dev .hero .hero-trust .ht,
body.page-seo-service.page-electrician .hero .hero-trust .ht{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:0;
}
body.page-seo-service.page-saas-dev .hero .hero-trust .ht b,
body.page-seo-service.page-electrician .hero .hero-trust .ht b{
  color:var(--signal,#F47A1F);
  font-size:clamp(1.35rem,2.2vw,1.75rem);
  font-weight:800;
  line-height:1;
}
body.page-seo-service.page-saas-dev .hero .hero-trust .ht span,
body.page-seo-service.page-electrician .hero .hero-trust .ht span{
  color:#9FB6BE;
  font-size:.72rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  line-height:1.35;
  max-width:none;
  white-space:nowrap;
}
body.page-seo-service.page-saas-dev .hero .breadcrumb,
body.page-seo-service.page-electrician .hero .breadcrumb,
body.page-seo-service.page-saas-dev .hero .breadcrumb a,
body.page-seo-service.page-electrician .hero .breadcrumb a,
body.page-seo-service.page-saas-dev .hero .breadcrumb span,
body.page-seo-service.page-electrician .hero .breadcrumb span{
  color:rgba(255,255,255,.72) !important;
}
@media(max-width:720px){
  body.page-seo-service.page-saas-dev .hero h1,
  body.page-seo-service.page-electrician .hero h1{
    max-width:100% !important;
    font-size:clamp(1.7rem,7.5vw,2.3rem) !important;
  }
  body.page-seo-service.page-saas-dev .hero .hero-trust,
  body.page-seo-service.page-electrician .hero .hero-trust{
    gap:18px 22px;
    margin-top:28px !important;
  }
}

/* Carousel cards inside elec / saas theme wrappers */
.elec-page .page-svc-carousel .svc,
.elec-page .page-svc-stack .proc,
.saas-dev-page .page-svc-carousel .svc,
.saas-dev-page .page-svc-stack .step,
.saas-dev-page .page-svc-stack .pain{
  height:100%;
  box-sizing:border-box;
}
.elec-page .page-svc-carousel,
.saas-dev-page .page-svc-carousel{
  margin-top:8px;
}
.elec-page .page-svc-carousel .svc-slide,
.saas-dev-page .page-svc-carousel .svc-slide,
.elec-page .page-svc-stack .svc-slide,
.saas-dev-page .page-svc-stack .svc-slide{
  height:auto;
  min-height:100%;
  box-sizing:border-box;
}
.saas-dev-page .page-svc-carousel--ink .pain,
.saas-dev-page .page-svc-stack.page-svc-carousel--ink .pain{
  background:var(--ink-2,rgba(15,42,51,.9));
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;
  padding:26px 24px;
  color:#B7CBD2;
}
.saas-dev-page .page-svc-carousel--ink .pain h4,
.saas-dev-page .page-svc-stack.page-svc-carousel--ink .pain h4{color:#fff}
.saas-dev-page .page-svc-carousel--ink .svc-nav,
.saas-dev-page .page-svc-stack.page-svc-carousel--ink .svc-nav{
  color:#fff;
  border-color:rgba(255,255,255,.28);
}
.saas-dev-page .page-svc-carousel--ink .svc-dot,
.saas-dev-page .page-svc-stack.page-svc-carousel--ink .svc-dot{background:rgba(255,255,255,.22)}
.saas-dev-page .page-svc-carousel--ink .svc-dot.is-active,
.saas-dev-page .page-svc-stack.page-svc-carousel--ink .svc-dot.is-active{background:var(--signal,#F47A1F)}
/* LIGHT WHY CARDS — beat leftover dark contrast locks */
.page-service .rest-why .why,
.page-service .re-why .why-card,
.page-service .hc-page .why-card,
.page-service .gp-page .why-card,
.page-service .sec-mist .re-why .why-card,
.page-service .sec-mist .rest-why .why{
  background:#fff !important;
  border:1px solid var(--line,#E1E9E5) !important;
  color:var(--slate,#4B5B62) !important;
  --kr-dark:var(--graphite,#0D2029);
  --kr-muted:var(--slate,#4B5B62);
}
.page-service .rest-why .why h4,
.page-service .re-why .why-card h3,
.page-service .hc-page .why-card h3,
.page-service .gp-page .why-card h3{
  color:var(--graphite,#0D2029) !important;
}
.page-service .rest-why .why p,
.page-service .re-why .why-card p,
.page-service .hc-page .why-card p,
.page-service .gp-page .why-card p{
  color:var(--slate,#4B5B62) !important;
}

/* ========== Mobile/tablet: force real carousel (1–2 cards), never squashed grid ========== */
@media (max-width: 900px) {
  .page-service [data-sp-carousel],
  .page-service .page-svc-carousel,
  .page-service [data-sp-carousel].is-desktop-grid,
  .page-service .page-svc-carousel.is-desktop-grid,
  body.page-web-dev [data-sp-carousel],
  body.page-web-dev .page-svc-carousel,
  body.page-web-dev [data-sp-carousel].is-desktop-grid,
  body.page-web-dev .page-svc-carousel.is-desktop-grid {
    --svc-per: 2;
  }
  .page-service [data-sp-carousel] .svc-viewport,
  .page-service .page-svc-carousel .svc-viewport,
  .page-service [data-sp-carousel].is-desktop-grid .svc-viewport,
  .page-service .page-svc-carousel.is-desktop-grid .svc-viewport,
  body.page-web-dev [data-sp-carousel] .svc-viewport,
  body.page-web-dev .page-svc-carousel .svc-viewport {
    overflow: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  .page-service [data-sp-carousel] .svc-track,
  .page-service .page-svc-carousel .svc-track,
  .page-service [data-sp-carousel].is-desktop-grid .svc-track,
  .page-service .page-svc-carousel.is-desktop-grid .svc-track,
  body.page-web-dev [data-sp-carousel] .svc-track,
  body.page-web-dev .page-svc-carousel .svc-track {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: var(--svc-gap, 16px) !important;
    width: max-content !important;
    max-width: none !important;
    grid-template-columns: none !important;
    transform: translate3d(0, 0, 0);
  }
  .page-service [data-sp-carousel] .svc-slide,
  .page-service .page-svc-carousel .svc-slide,
  .page-service [data-sp-carousel].is-desktop-grid .svc-slide,
  .page-service .page-svc-carousel.is-desktop-grid .svc-slide,
  body.page-web-dev [data-sp-carousel] .svc-slide,
  body.page-web-dev .page-svc-carousel .svc-slide {
    flex: 0 0 min(82vw, 320px) !important;
    width: min(82vw, 320px) !important;
    min-width: min(82vw, 320px) !important;
    max-width: min(82vw, 320px) !important;
    box-sizing: border-box !important;
  }
  .page-service [data-sp-carousel] .svc-dots:not([hidden]),
  .page-service .page-svc-carousel .svc-dots:not([hidden]),
  body.page-web-dev [data-sp-carousel] .svc-dots:not([hidden]),
  body.page-web-dev .page-svc-carousel .svc-dots:not([hidden]) {
    display: flex !important;
    justify-content: center;
    gap: 9px;
    margin-top: 20px;
  }
}
@media (max-width: 680px) {
  .page-service [data-sp-carousel],
  .page-service .page-svc-carousel,
  .page-service [data-sp-carousel].is-desktop-grid,
  .page-service .page-svc-carousel.is-desktop-grid,
  body.page-web-dev [data-sp-carousel],
  body.page-web-dev .page-svc-carousel {
    --svc-per: 1;
  }
  .page-service [data-sp-carousel] .svc-slide,
  .page-service .page-svc-carousel .svc-slide,
  .page-service [data-sp-carousel].is-desktop-grid .svc-slide,
  .page-service .page-svc-carousel.is-desktop-grid .svc-slide,
  body.page-web-dev [data-sp-carousel] .svc-slide,
  body.page-web-dev .page-svc-carousel .svc-slide {
    flex: 0 0 min(88vw, 340px) !important;
    width: min(88vw, 340px) !important;
    min-width: min(88vw, 340px) !important;
    max-width: min(88vw, 340px) !important;
  }
}

/* ========== Desktop: no carousel — static card grid (mobile keeps carousel) ========== */
@media (min-width: 901px) {
  .page-service [data-sp-carousel],
  .page-service .page-svc-carousel,
  body.page-web-dev [data-sp-carousel],
  body.page-web-dev .page-svc-carousel {
    --svc-per: 3;
  }
  .page-service [data-sp-carousel][data-per-desktop="2"],
  .page-service .page-svc-carousel[data-per-desktop="2"],
  body.page-web-dev [data-sp-carousel][data-per-desktop="2"] {
    --svc-per: 2;
  }
  .page-service [data-sp-carousel][data-per-desktop="4"],
  .page-service .page-svc-carousel[data-per-desktop="4"],
  body.page-web-dev [data-sp-carousel][data-per-desktop="4"] {
    --svc-per: 4;
  }

  .page-service [data-sp-carousel] .svc-nav,
  .page-service .page-svc-carousel .svc-nav,
  .page-service [data-sp-carousel] .svc-dots,
  .page-service .page-svc-carousel .svc-dots,
  body.page-web-dev [data-sp-carousel] .svc-nav,
  body.page-web-dev .page-svc-carousel .svc-nav,
  body.page-web-dev [data-sp-carousel] .svc-dots,
  body.page-web-dev .page-svc-carousel .svc-dots {
    display: none !important;
  }

  .page-service [data-sp-carousel] .svc-viewport,
  .page-service .page-svc-carousel .svc-viewport,
  body.page-web-dev [data-sp-carousel] .svc-viewport,
  body.page-web-dev .page-svc-carousel .svc-viewport {
    overflow: visible !important;
  }

  .page-service [data-sp-carousel] .svc-track,
  .page-service .page-svc-carousel .svc-track,
  body.page-web-dev [data-sp-carousel] .svc-track,
  body.page-web-dev .page-svc-carousel .svc-track {
    display: grid !important;
    grid-template-columns: repeat(var(--svc-per, 3), minmax(0, 1fr));
    gap: 18px !important;
    width: 100% !important;
    max-width: 100% !important;
    transform: none !important;
    flex-wrap: unset !important;
  }

  .page-service [data-sp-carousel] .svc-slide,
  .page-service .page-svc-carousel .svc-slide,
  body.page-web-dev [data-sp-carousel] .svc-slide,
  body.page-web-dev .page-svc-carousel .svc-slide {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    flex: none !important;
    height: auto !important;
  }

  /* Keep card faces equal height in the grid row.
     Exclude absolute badges (.svc-check / .check) — height:100% stretches them into tall ovals. */
  .page-service [data-sp-carousel] .svc-slide > *:not(.svc-check):not(.check),
  .page-service .page-svc-carousel .svc-slide > *:not(.svc-check):not(.check),
  body.page-web-dev [data-sp-carousel] .svc-slide > *:not(.svc-check):not(.check) {
    height: 100%;
    box-sizing: border-box;
  }
}

/* Absolute corner check badges — never stretch with flex/equal-height rules */
body.page-web-dev .service-card .svc-check,
body.page-web-dev .svc-slide > .svc-check,
.page-service .svc-card .check,
.page-service .svc-card .svc-badge,
.page-service .svc-slide > .svc-check,
.page-service .svc-slide > .check,
.theme-html-root .svc-card .svc-badge,
.theme-html-root .svc-card .check{
  position:absolute !important;
  top:22px !important;
  right:22px !important;
  width:26px !important;
  height:26px !important;
  min-width:26px !important;
  min-height:26px !important;
  max-width:26px !important;
  max-height:26px !important;
  border-radius:50% !important;
  flex:none !important;
  align-self:auto !important;
  display:grid !important;
  place-items:center !important;
  overflow:hidden;
  z-index:2;
}

/* ========== Hero: left-align + same edge as nav logo ========== */
.page-service .hero,
.page-service .wp-hero,
body.page-web-dev .hero,
body.page-seo-service .hero,
body.page-wordpress .wp-hero{
  text-align:left !important;
}
.page-service .hero > .wrap,
.page-service .hero > .hero-in,
.page-service .wp-hero > .wrap,
body.page-web-dev .hero > .wrap,
body.page-web-dev .hero > .hero-in,
body.page-seo-service .hero > .wrap{
  max-width:var(--maxw) !important;
  margin-left:auto !important;
  margin-right:auto !important;
  padding-left:var(--pad) !important;
  padding-right:var(--pad) !important;
  box-sizing:border-box;
  text-align:left !important;
}
.page-service .hero .hero-copy,
.page-service .hero .hero-inner,
.page-service .wp-hero .wp-hero-copy,
.page-service .wp-hero .hero-copy,
body.page-web-dev .hero-copy,
body.page-web-dev .hero-inner,
body.page-seo-service .hero .hero-copy{
  text-align:left !important;
  align-items:flex-start !important;
  justify-content:flex-start !important;
  margin-left:0 !important;
  margin-right:auto !important;
  max-width:min(760px,100%);
}
.page-service .hero h1,
.page-service .hero .sub,
.page-service .hero .lede,
.page-service .hero .hero-sub,
.page-service .hero .hero-actions,
.page-service .hero .hero-trust,
.page-service .hero .breadcrumb,
.page-service .wp-hero h1,
.page-service .wp-hero .lede,
body.page-web-dev .hero h1,
body.page-seo-service .hero h1{
  text-align:left !important;
}

/* ========== Dark why / ink cards: keep ALL text white ========== */
/* WordPress (+ any #why-us) dark tiles */
.page-wordpress .why-card,
.page-wordpress .why-card h2,
.page-wordpress .why-card h3,
.page-wordpress .why-card h4,
.page-wordpress .why-card p,
.page-wordpress .why-card li,
body.page-wordpress .why-card,
body.page-wordpress .why-card h3,
body.page-wordpress .why-card p,
.page-service #why-us .why-card,
.page-service #why-us .why-card h3,
.page-service #why-us .why-card p,
.page-service #why-us .why-card li,
.wpdev-theme-page .why-card,
.wpdev-theme-page .why-card h3,
.wpdev-theme-page .why-card p,
/* Ink carousel / stack cards on every service page */
.page-service .page-svc-carousel--ink .svc-card,
.page-service .page-svc-carousel--ink .svc-card h3,
.page-service .page-svc-carousel--ink .svc-card h4,
.page-service .page-svc-carousel--ink .svc-card p,
.page-service .page-svc-carousel--ink .why-card,
.page-service .page-svc-carousel--ink .why-card h3,
.page-service .page-svc-carousel--ink .why-card p,
.page-service .sec-ink .why-card,
.page-service .sec-ink .why-card h3,
.page-service .sec-ink .why-card p,
.page-service .page-svc-stack--ink .svc-card,
.page-service .page-svc-stack--ink .svc-card h3,
.page-service .page-svc-stack--ink .svc-card p,
.page-service .page-svc-stack--ink .why-card,
.page-service .page-svc-stack--ink .why-card h3,
.page-service .page-svc-stack--ink .why-card p{
  color:#fff !important;
}
.page-wordpress .why-card,
body.page-wordpress .why-card,
.page-service #why-us .why-card,
.page-service .page-svc-carousel--ink .why-card,
.page-service .page-svc-carousel--ink .svc-card:not(.svc-card-paper){
  background:var(--ink,#0A1A22);
}
.page-wordpress .why-card p,
body.page-wordpress .why-card p,
.page-service #why-us .why-card p{
  color:#fff !important;
  opacity:1;
}

/* Desktop: no carousel motion / no sticky-stack scale — static grid only */
@media (min-width: 901px) {
  .page-service .page-svc-carousel.is-desktop-grid .svc-track,
  .page-service [data-sp-carousel].is-desktop-grid .svc-track,
  body.page-web-dev .page-svc-carousel.is-desktop-grid .svc-track{
    transform:none !important;
    transition:none !important;
  }
  .page-service .page-svc-stack .svc-stack-item,
  .page-service [data-sp-stack] .svc-stack-item,
  body.page-web-dev .page-svc-stack .svc-stack-item{
    position:relative !important;
    top:auto !important;
    transform:none !important;
  }
  .page-service .page-svc-stack .svc-stack-item > *,
  .page-service [data-sp-stack] .svc-stack-item > *,
  body.page-web-dev .page-svc-stack .svc-stack-item > *{
    transform:none !important;
    opacity:1 !important;
  }
  .page-service .page-svc-stack .svc-track,
  .page-service [data-sp-stack] .svc-track{
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:18px !important;
    height:auto !important;
  }
  .page-service .page-svc-stack[data-per-desktop="2"] .svc-track,
  .page-service [data-sp-stack][data-per-desktop="2"] .svc-track{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

body.page-theme-html .hero,
body.page-theme-html .hero .hero-copy,
body.page-theme-html .hero h1,
body.page-theme-html .hero .sub,
body.page-theme-html .hero .lede{
  text-align:left !important;
}
body.page-theme-html .hero > .wrap{
  max-width:var(--maxw) !important;
  margin-left:auto !important;
  margin-right:auto !important;
  padding-left:var(--pad) !important;
  padding-right:var(--pad) !important;
}

/* ========== Hero trust/badges: one row on desktop ========== */
.page-service .hero .hero-badges,
.page-service .hero .hero-trust,
body.page-theme-html .hero .hero-badges,
body.page-theme-html .hero .hero-trust,
body.page-seo-service .hero .hero-badges,
body.page-seo-service .hero .hero-trust{
  display:flex !important;
  flex-direction:row !important;
  flex-wrap:nowrap !important;
  align-items:flex-start !important;
  gap:28px 48px !important;
  width:100% !important;
  max-width:100% !important;
  margin-top:36px !important;
  padding-top:28px !important;
  border-top:1px solid rgba(255,255,255,.12);
  box-sizing:border-box;
}
.page-service .hero .hero-badge,
.page-service .hero .hero-trust .ht,
body.page-theme-html .hero .hero-badge,
body.page-theme-html .hero .ht{
  display:flex !important;
  flex-direction:column !important;
  flex:0 0 auto !important;
  width:auto !important;
  max-width:none !important;
  min-width:0 !important;
}
.page-service .hero .hero-badge .num,
.page-service .hero .hero-badge .num b,
.page-service .hero .hero-badge b,
.page-service .hero .ht b,
body.page-theme-html .hero .hero-badge .num,
body.page-theme-html .hero .ht b{
  color:var(--signal,#F47A1F) !important;
  font-size:clamp(1.45rem,2.2vw,2rem) !important;
  font-weight:800 !important;
  line-height:1 !important;
  white-space:nowrap !important;
}
.page-service .hero .hero-badge .lbl,
.page-service .hero .ht span,
.page-service .hero .ht .lbl,
body.page-theme-html .hero .hero-badge .lbl,
body.page-theme-html .hero .ht span{
  color:#8FA5AD !important;
  font-size:.72rem !important;
  letter-spacing:.06em !important;
  text-transform:uppercase !important;
  margin-top:8px !important;
  max-width:none !important;
  white-space:nowrap !important;
  line-height:1.35 !important;
}
@media (max-width:900px){
  .page-service .hero .hero-badges,
  .page-service .hero .hero-trust,
  body.page-theme-html .hero .hero-badges,
  body.page-theme-html .hero .hero-trust{
    flex-wrap:wrap !important;
    gap:18px 28px !important;
  }
  .page-service .hero .hero-badge .lbl,
  .page-service .hero .ht span,
  body.page-theme-html .hero .hero-badge .lbl,
  body.page-theme-html .hero .ht span{
    white-space:normal !important;
  }
}

/* ========== White / paper cards → dark text (all service pages) ========== */
/* Note: .feat-card excluded — WordPress/ink feat tiles are dark and need light text */
.page-service .svc-card,
.page-service .problem-card,
.page-service .pain-card,
.page-service .pain,
.page-service .proc,
.page-service .pillar,
.page-service .loop-card,
.page-service .tst-card,
.page-service .testi,
.page-service .faq-item,
.page-service .form-card,
.page-service .contact-card,
.page-service .ct-card,
.page-service .svc,
.page-service .why,
.page-service .step-card,
.page-service .process-card,
.theme-html-root .svc-card,
.theme-html-root .problem-card,
.theme-html-root .pain-card,
.theme-html-root .pain,
.theme-html-root .proc,
.theme-html-root .pillar,
.theme-html-root .loop-card,
.theme-html-root .tst-card,
.theme-html-root .testi,
.theme-html-root .faq-item,
.theme-html-root .form-card,
.theme-html-root .contact-card,
.theme-html-root .ct-card,
.theme-html-root .svc,
.theme-html-root .why,
.theme-html-root .step-card,
.theme-html-root .process-card{
  color:var(--graphite,#0D2029);
}
.page-service .svc-card h2,
.page-service .svc-card h3,
.page-service .svc-card h4,
.page-service .problem-card h3,
.page-service .problem-card h4,
.page-service .pain-card h3,
.page-service .pain-card h4,
.page-service .pain h3,
.page-service .pain h4,
.page-service .proc h3,
.page-service .proc h4,
.page-service .pillar h3,
.page-service .pillar h4,
.page-service .loop-card h3,
.page-service .loop-card h4,
.page-service .tst-card h3,
.page-service .tst-card h4,
.page-service .testi h3,
.page-service .testi h4,
.page-service .faq-item summary,
.page-service .faq-item .faq-q,
.page-service .form-card h2,
.page-service .form-card h3,
.page-service .contact-card h2,
.page-service .contact-card h3,
.page-service .ct-card h2,
.page-service .ct-card h3,
.page-service .svc h3,
.page-service .svc h4,
.page-service .why h3,
.page-service .why h4,
.page-service .step-card h3,
.page-service .step-card h4,
.page-service .process-card h3,
.page-service .process-card h4,
.theme-html-root .svc-card h2,
.theme-html-root .svc-card h3,
.theme-html-root .svc-card h4,
.theme-html-root .problem-card h3,
.theme-html-root .problem-card h4,
.theme-html-root .pain-card h3,
.theme-html-root .pain-card h4,
.theme-html-root .pain h3,
.theme-html-root .pain h4,
.theme-html-root .proc h3,
.theme-html-root .proc h4,
.theme-html-root .pillar h3,
.theme-html-root .pillar h4,
.theme-html-root .loop-card h3,
.theme-html-root .loop-card h4,
.theme-html-root .tst-card h3,
.theme-html-root .tst-card h4,
.theme-html-root .testi h3,
.theme-html-root .testi h4,
.theme-html-root .faq-item summary,
.theme-html-root .faq-item .faq-q,
.theme-html-root .form-card h2,
.theme-html-root .form-card h3,
.theme-html-root .contact-card h2,
.theme-html-root .contact-card h3,
.theme-html-root .ct-card h2,
.theme-html-root .ct-card h3,
.theme-html-root .svc h3,
.theme-html-root .svc h4,
.theme-html-root .why h3,
.theme-html-root .why h4,
.theme-html-root .step-card h3,
.theme-html-root .step-card h4,
.theme-html-root .process-card h3,
.theme-html-root .process-card h4{
  color:var(--graphite,#0D2029) !important;
}
.page-service .svc-card p,
.page-service .svc-card li,
.page-service .problem-card p,
.page-service .pain-card p,
.page-service .pain p,
.page-service .proc p,
.page-service .pillar p,
.page-service .loop-card p,
.page-service .tst-card p,
.page-service .testi p,
.page-service .faq-item .faq-body,
.page-service .faq-item .faq-a,
.page-service .faq-item .faq-a p,
.page-service .form-card p,
.page-service .contact-card p,
.page-service .ct-card p,
.page-service .svc p,
.page-service .why p,
.page-service .step-card p,
.page-service .process-card p,
.theme-html-root .svc-card p,
.theme-html-root .svc-card li,
.theme-html-root .problem-card p,
.theme-html-root .pain-card p,
.theme-html-root .pain p,
.theme-html-root .proc p,
.theme-html-root .pillar p,
.theme-html-root .loop-card p,
.theme-html-root .tst-card p,
.theme-html-root .testi p,
.theme-html-root .faq-item .faq-body,
.theme-html-root .faq-item .faq-a,
.theme-html-root .faq-item .faq-a p,
.theme-html-root .form-card p,
.theme-html-root .contact-card p,
.theme-html-root .ct-card p,
.theme-html-root .svc p,
.theme-html-root .why p,
.theme-html-root .step-card p,
.theme-html-root .process-card p{
  color:var(--slate,#4B5B62) !important;
}

/* Dark / ink tiles keep white text (must win over paper-card rules above) */
.page-wordpress .why-card,
.page-wordpress .why-card h2,
.page-wordpress .why-card h3,
.page-wordpress .why-card h4,
.page-wordpress .why-card p,
.page-wordpress .why-card li,
body.page-wordpress .why-card,
body.page-wordpress .why-card h3,
body.page-wordpress .why-card p,
.page-service #why-us .why-card,
.page-service #why-us .why-card h2,
.page-service #why-us .why-card h3,
.page-service #why-us .why-card h4,
.page-service #why-us .why-card p,
.page-service #why-us .why-card li,
.page-service .sec-ink .why-card,
.page-service .sec-ink .why-card h2,
.page-service .sec-ink .why-card h3,
.page-service .sec-ink .why-card h4,
.page-service .sec-ink .why-card p,
.page-service .sec-ink .why-card li,
.page-service .page-svc-carousel--ink .svc-card,
.page-service .page-svc-carousel--ink .svc-card h3,
.page-service .page-svc-carousel--ink .svc-card h4,
.page-service .page-svc-carousel--ink .svc-card p,
.page-service .page-svc-carousel--ink .why-card,
.page-service .page-svc-carousel--ink .why-card h3,
.page-service .page-svc-carousel--ink .why-card p,
.page-service .page-svc-carousel--ink .pain,
.page-service .page-svc-carousel--ink .pain h4,
.page-service .page-svc-carousel--ink .pain p,
.page-service .page-svc-stack--ink .svc-card,
.page-service .page-svc-stack--ink .svc-card h3,
.page-service .page-svc-stack--ink .svc-card p,
.page-service .page-svc-stack--ink .why-card,
.page-service .page-svc-stack--ink .why-card h3,
.page-service .page-svc-stack--ink .why-card p,
.page-service .page-svc-stack.page-svc-carousel--ink .pain,
.page-service .page-svc-stack.page-svc-carousel--ink .pain h4,
.page-service .seo-included .svc-card,
.page-service .seo-included .svc-card h3,
.page-service .seo-included .svc-card p,
.page-service .compare-card,
.page-service .compare-card h3,
.page-service .compare-card h4,
.page-service .compare-card p,
.page-service .compare-card li,
.saas-dev-page .page-svc-carousel--ink .pain,
.saas-dev-page .page-svc-carousel--ink .pain h4,
.saas-dev-page .page-svc-stack.page-svc-carousel--ink .pain,
.saas-dev-page .page-svc-stack.page-svc-carousel--ink .pain h4,
.onpage-theme-page .sec-ink .svc,
.onpage-theme-page .sec-ink .svc h3,
.onpage-theme-page .sec-ink .svc h4,
.onpage-theme-page .sec-ink .svc p,
.onpage-theme-page .comp-card,
.onpage-theme-page .comp-card h3,
.onpage-theme-page .comp-card h4,
.onpage-theme-page .comp-card p,
.onpage-theme-page .comp-card li,
.saasseo-theme-page .svc,
.saasseo-theme-page .svc h3,
.saasseo-theme-page .svc h4,
.saasseo-theme-page .svc p,
.saasseo-theme-page #services .svc,
.saasseo-theme-page #services .svc h3,
.saasseo-theme-page #services .svc h4,
.saasseo-theme-page #services .svc p,
.wpseo-theme-page .svc,
.wpseo-theme-page .svc h3,
.wpseo-theme-page .svc h4,
.wpseo-theme-page .svc p,
.wpseo-theme-page .svc li,
.wpseo-theme-page #services .svc,
.wpseo-theme-page #services .svc h3,
.wpseo-theme-page #services .svc h4,
.wpseo-theme-page #services .svc p,
.wpseo-theme-page #services .svc li,
.wpseo-theme-page .wp-card,
.wpseo-theme-page .wp-card h3,
.wpseo-theme-page .wp-card h4,
.wpseo-theme-page .wp-card p,
.theme-html-root .sec-ink .svc,
.theme-html-root .sec-ink .svc h3,
.theme-html-root .sec-ink .svc h4,
.theme-html-root .sec-ink .svc p,
.theme-html-root .comp-card,
.theme-html-root .comp-card h3,
.theme-html-root .comp-card h4,
.theme-html-root .comp-card p,
.theme-html-root .comp-card li{
  color:#fff !important;
}
.page-service .seo-included .svc-card p,
.page-service .page-svc-carousel--ink .svc-card p,
.page-service .page-svc-carousel--ink .pain p,
.saas-dev-page .page-svc-carousel--ink .pain,
.onpage-theme-page .sec-ink .svc p,
.onpage-theme-page .comp-card p,
.onpage-theme-page .comp-card li,
.saasseo-theme-page .svc p,
.saasseo-theme-page #services .svc p,
.wpseo-theme-page .svc p,
.wpseo-theme-page .svc li,
.wpseo-theme-page #services .svc p,
.wpseo-theme-page #services .svc li,
.wpseo-theme-page .wp-card p,
.wpseo-theme-page .wp-card .row span,
.theme-html-root .sec-ink .svc p,
.theme-html-root .comp-card p,
.theme-html-root .comp-card li{
  color:#C5D5DB !important;
}
.geo-theme-page .cmp-row,
.theme-html-root .geo-theme-page .cmp-row{
  color:#C5D5DB !important;
}
.geo-theme-page .sec-ink .cmp-head h3{
  color:#fff !important;
}
.theme-html-root .geo-theme-page .pain-card,
.theme-html-root .geo-theme-page #problem .pain-card,
.geo-theme-page .pain-card,
.geo-theme-page #problem .pain-card{
  background:#fff !important;
  border:1px solid #E1E9E5 !important;
  color:#111 !important;
}
.theme-html-root .geo-theme-page .pain-card h3,
.theme-html-root .geo-theme-page .pain-card h4,
.theme-html-root .geo-theme-page .pain-card p,
.geo-theme-page .pain-card h3,
.geo-theme-page .pain-card h4,
.geo-theme-page .pain-card p,
.geo-theme-page #problem .pain-card h3,
.geo-theme-page #problem .pain-card p{
  color:#111 !important;
}

/* sec-ink pain-card tiles (healthcare + niche pages) — light text on dark cards */
.theme-html-root .sec-ink .pain-card,
.theme-html-root #pain.sec-ink .pain-card,
.hc-theme-page .sec-ink .pain-card,
.hc-theme-page #pain .pain-card,
.rest-theme-page .sec-ink .pain-card,
.re-theme-page .sec-ink .pain-card,
.gp-theme-page .sec-ink .pain-card,
.page-service .sec-ink .pain-card,
.page-service #pain .pain-card{
  background:var(--ink-2,#0F2A33) !important;
  border:1px solid rgba(244,122,31,.16) !important;
  color:#B7CBD2 !important;
  box-shadow:none !important;
}
.theme-html-root .sec-ink .pain-card h4,
.theme-html-root #pain.sec-ink .pain-card h4,
.hc-theme-page .sec-ink .pain-card h4,
.hc-theme-page #pain .pain-card h4,
.rest-theme-page .sec-ink .pain-card h4,
.re-theme-page .sec-ink .pain-card h4,
.gp-theme-page .sec-ink .pain-card h4,
.page-service .sec-ink .pain-card h4,
.page-service #pain .pain-card h4{
  color:#fff !important;
}
.theme-html-root .sec-ink .pain-card p,
.theme-html-root #pain.sec-ink .pain-card p,
.hc-theme-page .sec-ink .pain-card p,
.hc-theme-page #pain .pain-card p,
.rest-theme-page .sec-ink .pain-card p,
.re-theme-page .sec-ink .pain-card p,
.gp-theme-page .sec-ink .pain-card p,
.page-service .sec-ink .pain-card p,
.page-service #pain .pain-card p{
  color:#B7CBD2 !important;
}
.theme-html-root #pain.sec-ink h2,
.theme-html-root #pain.sec-ink .head h2,
.theme-html-root .sec-ink#pain h2,
.hc-theme-page #pain h2,
.hc-theme-page #pain .head h2,
.hc-theme-page .sec-ink#pain h2,
.page-service #pain.sec-ink h2,
.page-service .sec-ink#pain .head h2{
  color:#fff !important;
}
.theme-html-root #pain.sec-ink .lede,
.theme-html-root #pain.sec-ink .head p,
.theme-html-root .sec-ink#pain .lede,
.hc-theme-page #pain .lede,
.hc-theme-page #pain .head p,
.page-service #pain.sec-ink .lede,
.page-service .sec-ink#pain .head p{
  color:#9FB6BE !important;
}
.theme-html-root #pain.sec-ink .eyebrow,
.hc-theme-page #pain .eyebrow,
.page-service #pain.sec-ink .eyebrow{
  color:var(--signal,#F47A1F) !important;
}
.hc-theme-page .pain-grid,
.theme-html-root .sec-ink .pain-grid,
.page-service .sec-ink .pain-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:22px;
}
@media (max-width:1024px){
  .hc-theme-page .pain-grid,
  .theme-html-root .sec-ink .pain-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
@media (max-width:680px){
  .hc-theme-page .pain-grid,
  .theme-html-root .sec-ink .pain-grid{
    grid-template-columns:minmax(0,1fr);
  }
}

/* White cards nested on dark sections stay dark text.
   Only pages that use light .svc tiles inside .sec-ink (AC / redesign / CMS).
   Theme-html on-page SEO keeps dark .svc / .comp-card tiles — do not force graphite. */
.page-service .sec-ink .svc-card,
.page-service .sec-ink .why:not(.why-card),
.page-service .services-bg .svc-card,
.page-service .ac-page .sec-ink .svc,
.page-service .ac-page .sec-ink .why,
.page-service .rd-page .sec-ink .svc,
.page-service .cms-page .sec-ink .svc{
  color:var(--graphite,#0D2029) !important;
}
.page-service .sec-ink .svc-card h3,
.page-service .sec-ink .svc-card h4,
.page-service .ac-page .sec-ink .svc h3,
.page-service .ac-page .sec-ink .why h3,
.page-service .rd-page .sec-ink .svc h3,
.page-service .cms-page .sec-ink .svc h3,
.page-service .services-bg .svc-card h3{
  color:var(--graphite,#0D2029) !important;
}
.page-service .sec-ink .svc-card p,
.page-service .ac-page .sec-ink .svc p,
.page-service .ac-page .sec-ink .why p,
.page-service .rd-page .sec-ink .svc p,
.page-service .cms-page .sec-ink .svc p,
.page-service .services-bg .svc-card p{
  color:var(--slate,#4B5B62) !important;
}

/* WordPress dark feat / problem / why cards — white text (beats paper-card lock) */
body.page-wordpress .feat-card,
body.page-wordpress .feat-card h2,
body.page-wordpress .feat-card h3,
body.page-wordpress .feat-card h4,
body.page-wordpress .feat-card p,
body.page-wordpress .feat-card li,
body.page-wordpress .problem-card,
body.page-wordpress .problem-card h3,
body.page-wordpress .problem-card h4,
body.page-wordpress .problem-card p,
body.page-wordpress .why-card,
body.page-wordpress .why-card h2,
body.page-wordpress .why-card h3,
body.page-wordpress .why-card h4,
body.page-wordpress .why-card p,
body.page-wordpress .why-card li,
body.page-wordpress .compare-card,
body.page-wordpress .compare-card h3,
body.page-wordpress .compare-card p,
body.page-wordpress .compare-card li,
body.page-wordpress .sec-ink .feat-card,
body.page-wordpress .why-bg .feat-card,
body.page-wordpress #why-us .why-card,
.page-service.page-wordpress .feat-card,
.page-service.page-wordpress .feat-card h3,
.page-service.page-wordpress .feat-card p,
.page-service.page-wordpress .problem-card,
.page-service.page-wordpress .problem-card h4,
.page-service.page-wordpress .problem-card p,
.page-service.page-wordpress .why-card,
.page-service.page-wordpress .why-card h3,
.page-service.page-wordpress .why-card p{
  color:#fff !important;
}
body.page-wordpress .feat-card p,
body.page-wordpress .problem-card p,
body.page-wordpress .compare-card li,
body.page-wordpress .compare-list li,
.page-service.page-wordpress .feat-card p,
.page-service.page-wordpress .problem-card p{
  color:#B7CBD2 !important;
}

/* WP dark tiles — light text (final, highest priority) */
.page-service .sec-ink .feat-card,
.page-service .sec-ink .feat-card h3,
.page-service .sec-ink .feat-card h4,
.page-service .why-bg .feat-card,
.page-service .why-bg .feat-card h3,
.page-service .why-bg .feat-card h4,
.page-service #why-us .why-card,
.page-service #why-us .why-card h3,
.page-service #why-us .why-card h4,
.page-service .page-svc-carousel--ink .feat-card,
.page-service .page-svc-carousel--ink .feat-card h3,
body.page-wordpress .feat-card,
body.page-wordpress .feat-card h3,
body.page-wordpress .feat-card h4,
body.page-wordpress .why-card,
body.page-wordpress .why-card h3,
body.page-wordpress .why-card h4{
  color:#fff !important;
}
.page-service .sec-ink .feat-card p,
.page-service .why-bg .feat-card p,
.page-service #why-us .why-card p,
.page-service .page-svc-carousel--ink .feat-card p,
body.page-wordpress .feat-card p,
body.page-wordpress .why-card p{
  color:#D5E4E8 !important;
}

/* Theme-html bodies strip theme JS — keep reveal nodes visible */
.theme-html-root .rv,
.theme-html-root .rev,
.theme-html-root .reveal,
.theme-html-root .fade-up{
  opacity:1 !important;
  transform:none !important;
}

/* SaaS theme-html — FAQ centered, dark cards readable, why bg without huge base64 */
.saas-theme-page #faq .head-block{
  text-align:center !important;
  max-width:820px;
  margin-left:auto !important;
  margin-right:auto !important;
}
.saas-theme-page #faq .faq-wrap{
  max-width:820px !important;
  width:100% !important;
  margin-left:auto !important;
  margin-right:auto !important;
}
.saas-theme-page #faq .faq{
  width:100% !important;
  box-sizing:border-box !important;
}
.saas-theme-page #why{
  background:
    linear-gradient(100deg,var(--ink,#0A1A22) 0%,rgba(10,26,34,.95) 33%,rgba(10,26,34,.74) 60%,rgba(10,26,34,.52) 100%),
    url("/media/services/saas-development/saas-software-development-section-background.webp") center right / cover no-repeat !important;
}
.saas-theme-page .sec-ink .pain h4,
.saas-theme-page .sec-ink .why-list b,
.saas-theme-page .cmp .cmp-h b,
.saas-theme-page .cmp.win .cmp-h b{
  color:#fff !important;
}
.saas-theme-page .sec-ink .pain p,
.saas-theme-page .sec-ink .why-list span,
.saas-theme-page .cmp li{
  color:#B7CBD2 !important;
}
.saas-theme-page .pain-grid,
.saas-theme-page .svc-grid,
.saas-theme-page .stack-groups,
.saas-theme-page .proc-grid,
.saas-theme-page .stats{
  display:grid;
}

/* ========== All service heroes: responsive H1 + breadcrumbs ========== */
.page-service .hero h1,
.page-service .hero .hero-copy h1,
.page-service .wp-hero h1,
.page-service .wp-hero .wp-hero-copy h1,
body.page-wordpress .wp-hero h1,
body.page-web-dev .hero h1,
.page-service .rd-page .hero h1,
.page-service .cms-page .hero h1,
.page-service .shop-page .hero h1,
.page-service .ac-page .hero h1,
body.page-theme-html .hero h1{
  font-size:clamp(2.6rem,5.2vw,3.75rem) !important;
  line-height:1.08 !important;
  letter-spacing:-.02em !important;
  font-weight:800 !important;
}

.page-service .hero .breadcrumb,
.page-service .hero .crumbs,
.page-service .wp-hero .breadcrumb,
.page-service .wp-hero .wp-breadcrumb,
body.page-wordpress .wp-hero .breadcrumb,
body.page-wordpress .wp-hero .wp-breadcrumb,
body.page-web-dev .hero .breadcrumb,
body.page-theme-html .hero .breadcrumb,
.page-service .rd-page .hero .breadcrumb,
.page-service .cms-page .hero .breadcrumb,
.page-service .shop-page .hero .breadcrumb,
.page-service .ac-page .hero .breadcrumb{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  margin:0 0 18px !important;
  position:relative;
  z-index:5;
}
.page-service .hero .breadcrumb ol,
.page-service .hero .crumbs ol,
.page-service .wp-hero .breadcrumb ol,
.page-service .wp-hero .wp-breadcrumb ol,
body.page-wordpress .wp-hero .breadcrumb ol,
body.page-wordpress .wp-hero .wp-breadcrumb ol,
body.page-web-dev .hero .breadcrumb ol,
body.page-theme-html .hero .breadcrumb ol{
  display:flex !important;
  flex-wrap:wrap;
  align-items:center;
  gap:8px 10px;
  list-style:none !important;
  margin:0 !important;
  padding:0 !important;
  font-size:.8rem;
  font-weight:500;
  letter-spacing:.04em;
}
.page-service .hero .breadcrumb li,
.page-service .hero .crumbs li,
.page-service .wp-hero .breadcrumb li,
.page-service .wp-hero .wp-breadcrumb li,
body.page-wordpress .wp-hero .breadcrumb li,
body.page-web-dev .hero .breadcrumb li,
body.page-theme-html .hero .breadcrumb li{
  display:inline-flex !important;
  align-items:center;
  gap:8px 10px;
  color:#B7CBD2 !important;
}
.page-service .hero .breadcrumb li:not(:last-child)::after,
.page-service .hero .crumbs li:not(:last-child)::after,
.page-service .wp-hero .breadcrumb li:not(:last-child)::after,
.page-service .wp-hero .wp-breadcrumb li:not(:last-child)::after,
body.page-wordpress .wp-hero .breadcrumb li:not(:last-child)::after,
body.page-wordpress .wp-hero .wp-breadcrumb li:not(:last-child)::after,
body.page-web-dev .hero .breadcrumb li:not(:last-child)::after,
body.page-theme-html .hero .breadcrumb li:not(:last-child)::after{
  content:"\203A" !important;
  color:#7A929A !important;
  font-size:1rem;
  font-weight:400;
  line-height:1;
  margin-left:2px;
}
.page-service .hero .breadcrumb a,
.page-service .hero .crumbs a,
.page-service .wp-hero .breadcrumb a,
.page-service .wp-hero .wp-breadcrumb a,
body.page-wordpress .wp-hero .breadcrumb a,
body.page-web-dev .hero .breadcrumb a,
body.page-theme-html .hero .breadcrumb a{
  color:#B7CBD2 !important;
  text-decoration:none !important;
}
.page-service .hero .breadcrumb a:hover,
.page-service .hero .crumbs a:hover,
.page-service .wp-hero .breadcrumb a:hover,
body.page-wordpress .wp-hero .breadcrumb a:hover,
body.page-web-dev .hero .breadcrumb a:hover,
body.page-theme-html .hero .breadcrumb a:hover{
  color:var(--signal,#F47A1F) !important;
}
.page-service .hero .breadcrumb li[aria-current="page"],
.page-service .hero .breadcrumb li[aria-current="page"] span,
.page-service .hero .breadcrumb li:last-child,
.page-service .hero .breadcrumb li:last-child span,
.page-service .wp-hero .breadcrumb li[aria-current="page"],
.page-service .wp-hero .breadcrumb li:last-child,
.page-service .wp-hero .wp-breadcrumb li[aria-current="page"],
.page-service .wp-hero .wp-breadcrumb li:last-child,
body.page-wordpress .wp-hero .breadcrumb li:last-child,
body.page-web-dev .hero .breadcrumb li:last-child,
body.page-theme-html .hero .breadcrumb li:last-child,
body.page-theme-html .hero .breadcrumb li:last-child span{
  color:var(--signal,#F47A1F) !important;
  font-weight:600 !important;
}

@media (max-width:900px){
  .page-service .hero h1,
  .page-service .hero .hero-copy h1,
  .page-service .wp-hero h1,
  body.page-wordpress .wp-hero h1,
  body.page-web-dev .hero h1,
  body.page-theme-html .hero h1,
  .page-service .rd-page .hero h1,
  .page-service .cms-page .hero h1,
  .page-service .shop-page .hero h1,
  .page-service .ac-page .hero h1{
    font-size:clamp(28px,7vw,40px) !important;
  }
  .page-service .hero .breadcrumb ol,
  .page-service .wp-hero .breadcrumb ol,
  body.page-theme-html .hero .breadcrumb ol{
    font-size:.72rem;
    gap:6px 8px;
  }
}

/* Electrician: dark SEO pillars / edge cards → light text */
.elec-theme-page .pillar,
.elec-theme-page .pillar h4,
.elec-theme-page .edge,
.elec-theme-page .edge h4,
.theme-html-root .sec-ink .pillar,
.theme-html-root .sec-ink .pillar h4,
.theme-html-root .edge,
.theme-html-root .edge h4,
.page-service .elec-page .sec-ink .pillar,
.page-service .elec-page .sec-ink .pillar h4,
.page-service .elec-page .edge,
.page-service .elec-page .edge h4{
  color:#fff !important;
}
.elec-theme-page .pillar p,
.elec-theme-page .edge p,
.theme-html-root .sec-ink .pillar p,
.theme-html-root .edge p,
.page-service .elec-page .sec-ink .pillar p,
.page-service .elec-page .edge p{
  color:#B7CBD2 !important;
}

/* Electrician FAQ — centered, equal width */
.elec-theme-page #faq .head-block,
.elec-theme-page #faq .section-head,
.page-service .elec-page #faq .head-block,
.theme-html-root #faq .head-block{
  text-align:center !important;
  max-width:820px;
  margin-left:auto !important;
  margin-right:auto !important;
}
.elec-theme-page #faq .faq-wrap,
.page-service .elec-page #faq .faq-wrap,
.theme-html-root #faq .faq-wrap,
.elec-page .faq-wrap{
  max-width:820px !important;
  width:100% !important;
  margin-left:auto !important;
  margin-right:auto !important;
  display:grid !important;
  gap:14px !important;
}
.elec-theme-page #faq .faq,
.theme-html-root #faq .faq,
.elec-page #faq .faq,
.elec-page .faq{
  width:100% !important;
  box-sizing:border-box !important;
}

/* ========== Digital Marketing: compact hero under fixed nav ========== */
body.page-dm.page-service .hero{
  min-height:0 !important;
  padding-top:calc(84px + 18px) !important;
  padding-bottom:clamp(36px,4.5vw,64px) !important;
  display:flex !important;
  align-items:flex-start !important;
  justify-content:flex-start !important;
}
body.page-dm.page-service .hero > .wrap{
  width:100%;
  padding-top:0 !important;
  padding-bottom:0 !important;
}
body.page-dm.page-service .hero .hero-copy{
  padding:0 !important;
  max-width:760px;
}
body.page-dm.page-service .hero .breadcrumb{
  margin:0 0 12px !important;
}
body.page-dm.page-service .hero h1,
body.page-dm.page-theme-html .hero h1{
  font-size:clamp(2.35rem,4.6vw,3.4rem) !important;
  line-height:1.08 !important;
  margin:0 0 14px !important;
}
body.page-dm.page-service .hero .lede,
body.page-dm.page-service .hero p.sub,
body.page-dm.page-service .hero .hero-sub{
  font-size:clamp(1.02rem,1.35vw,1.16rem) !important;
  max-width:38rem;
  margin:0 0 20px !important;
}
body.page-dm.page-service .hero .hero-actions,
body.page-dm.page-service .hero .hero-cta{
  margin:0 !important;
  gap:12px;
}
body.page-dm.page-service .hero .hero-badges,
body.page-dm.page-service .hero .hero-trust{
  margin-top:28px !important;
  padding-top:22px !important;
}
@media (max-width:900px){
  body.page-dm.page-service .hero{
    padding-top:calc(64px + 14px) !important;
    padding-bottom:28px !important;
  }
  body.page-dm.page-service .hero .breadcrumb{
    margin:0 0 10px !important;
  }
  body.page-dm.page-service .hero h1,
  body.page-dm.page-theme-html .hero h1{
    font-size:clamp(1.85rem,6.4vw,2.45rem) !important;
    margin:0 0 10px !important;
  }
  body.page-dm.page-service .hero .lede,
  body.page-dm.page-service .hero p.sub,
  body.page-dm.page-service .hero .hero-sub{
    margin:0 0 16px !important;
    font-size:1rem !important;
  }
  body.page-dm.page-service .hero .hero-badges,
  body.page-dm.page-service .hero .hero-trust{
    margin-top:22px !important;
    padding-top:16px !important;
  }
}
@media (max-width:680px){
  body.page-dm.page-service .hero{
    padding-top:calc(64px + 8px) !important;
    padding-bottom:22px !important;
  }
  body.page-dm.page-service .hero .breadcrumb{
    margin:0 0 8px !important;
  }
  body.page-dm.page-service .hero h1,
  body.page-dm.page-theme-html .hero h1{
    margin:0 0 8px !important;
  }
  body.page-dm.page-service .hero .lede,
  body.page-dm.page-service .hero p.sub,
  body.page-dm.page-service .hero .hero-sub{
    margin:0 0 14px !important;
  }
}

/* Problem section: white bg, dark card copy */
body.page-dm .dm-theme-page .sec-ink.problem-bg,
.dm-theme-page .sec-ink.problem-bg{
  background:#fff !important;
  background-image:none !important;
  color:#0D2029 !important;
  --kr-dark:#0D2029;
  --kr-muted:#3A4A50;
  --kr-muted-2:#4B5B62;
  --kr-light:#0D2029;
  --kr-light-muted:#3A4A50;
  --kr-light-soft:#4B5B62;
}
.dm-theme-page .sec-ink.problem-bg::before,
.dm-theme-page .sec-ink.problem-bg::after{
  display:none !important;
  content:none !important;
  background:none !important;
  opacity:0 !important;
}
.dm-theme-page .sec-ink.problem-bg .section-head h2,
.dm-theme-page .sec-ink.problem-bg h2,
.dm-theme-page .sec-ink.problem-bg h3,
.dm-theme-page .sec-ink.problem-bg h4,
.dm-theme-page .sec-ink.problem-bg strong,
.dm-theme-page .sec-ink.problem-bg .problem-card,
.dm-theme-page .sec-ink.problem-bg .problem-card h3,
.dm-theme-page .sec-ink.problem-bg .problem-card h4{
  color:#111 !important;
}
.dm-theme-page .sec-ink.problem-bg .section-head p,
.dm-theme-page .sec-ink.problem-bg .lede,
.dm-theme-page .sec-ink.problem-bg p,
.dm-theme-page .sec-ink.problem-bg .body-2,
.dm-theme-page .sec-ink.problem-bg .problem-card p{
  color:#111 !important;
}
.dm-theme-page .sec-ink.problem-bg .eyebrow,
.dm-theme-page .sec-ink.problem-bg .hl,
.dm-theme-page .sec-ink.problem-bg .accent{
  color:#E86A12 !important;
}
.dm-theme-page .sec-ink.problem-bg .problem-card,
.dm-theme-page .problem-card{
  background:#fff !important;
  color:#0A1A22 !important;
  border:1px solid #E1E9E5 !important;
  box-shadow:0 8px 24px rgba(13,32,41,.06) !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
.dm-theme-page .sec-ink.problem-bg .problem-card h4,
.dm-theme-page .problem-card h4{
  color:#111 !important;
}
.dm-theme-page .sec-ink.problem-bg .problem-card p,
.dm-theme-page .problem-card p{
  color:#111 !important;
}
.dm-theme-page .sec-ink.problem-bg .problem-card .icon{
  background:rgba(232,106,18,.1) !important;
}

/* Hide mid-page FINAL CTA bands on all theme-html service pages */
.theme-html-root section.sec-ink.cta-bg,
.theme-html-root section.sec-ink.cta-band,
.theme-html-root section.sec-ink.cta-sec,
.theme-html-root section.sec-ink.sec-cta-bg,
.theme-html-root section.sec-ink.sec-cta,
.theme-html-root section.sec-ink.ctaband,
.theme-html-root section.ctaband,
.theme-html-root section[class*="cta-sec"],
.dm-theme-page .sec-ink.cta-bg,
.dm-theme-page section.cta-bg,
.onpage-theme-page .cta-band,
.onpage-theme-page .cta-sec,
.onpage-theme-page section.cta-band,
.onpage-theme-page section.cta-sec,
.aeo-theme-page section.cta-bg{
  display:none !important;
}

/* ========== On-Page + Off-Page SEO: compact hero ========== */
body.page-onpage.page-service .hero,
body.page-offpage.page-service .hero{
  min-height:0 !important;
  padding-top:calc(84px + 18px) !important;
  padding-bottom:clamp(36px,4.5vw,64px) !important;
  display:flex !important;
  align-items:flex-start !important;
  justify-content:flex-start !important;
}
body.page-onpage.page-service .hero > .wrap,
body.page-offpage.page-service .hero > .wrap{
  width:100%;
  padding-top:0 !important;
  padding-bottom:0 !important;
}
body.page-onpage.page-service .hero .hero-copy,
body.page-onpage.page-service .hero .hero-inner,
body.page-offpage.page-service .hero .hero-copy,
body.page-offpage.page-service .hero .hero-inner{
  padding:0 !important;
  max-width:760px;
}
body.page-onpage.page-service .hero .breadcrumb,
body.page-onpage.page-service .hero .crumbs,
body.page-offpage.page-service .hero .breadcrumb,
body.page-offpage.page-service .hero .crumbs{
  margin:0 0 12px !important;
}
body.page-onpage.page-service .hero h1,
body.page-onpage.page-theme-html .hero h1,
body.page-offpage.page-service .hero h1,
body.page-offpage.page-theme-html .hero h1{
  font-size:clamp(2.35rem,4.6vw,3.4rem) !important;
  line-height:1.08 !important;
  margin:0 0 14px !important;
}
body.page-onpage.page-service .hero .lede,
body.page-onpage.page-service .hero p.sub,
body.page-onpage.page-service .hero .hero-sub,
body.page-offpage.page-service .hero .lede,
body.page-offpage.page-service .hero p.sub,
body.page-offpage.page-service .hero .hero-sub{
  font-size:clamp(1.02rem,1.35vw,1.16rem) !important;
  max-width:38rem;
  margin:0 0 20px !important;
}
body.page-onpage.page-service .hero .hero-actions,
body.page-onpage.page-service .hero .hero-cta,
body.page-offpage.page-service .hero .hero-actions,
body.page-offpage.page-service .hero .hero-cta{
  margin:0 !important;
  gap:12px;
}
body.page-onpage.page-service .hero .hero-badges,
body.page-onpage.page-service .hero .hero-trust,
body.page-offpage.page-service .hero .hero-badges,
body.page-offpage.page-service .hero .hero-trust{
  margin-top:28px !important;
  padding-top:22px !important;
}
@media (max-width:900px){
  body.page-onpage.page-service .hero,
  body.page-offpage.page-service .hero{
    padding-top:calc(64px + 14px) !important;
    padding-bottom:28px !important;
  }
  body.page-onpage.page-service .hero h1,
  body.page-onpage.page-theme-html .hero h1,
  body.page-offpage.page-service .hero h1,
  body.page-offpage.page-theme-html .hero h1{
    font-size:clamp(1.85rem,6.4vw,2.45rem) !important;
    margin:0 0 10px !important;
  }
  body.page-onpage.page-service .hero .lede,
  body.page-onpage.page-service .hero p.sub,
  body.page-offpage.page-service .hero .lede,
  body.page-offpage.page-service .hero p.sub{
    margin:0 0 16px !important;
    font-size:1rem !important;
  }
}
@media (max-width:680px){
  body.page-onpage.page-service .hero,
  body.page-offpage.page-service .hero{
    padding-top:calc(64px + 8px) !important;
    padding-bottom:22px !important;
  }
}

/* Compact KodRank hero for all Digital-Marketing-motion SEO pages */
body.page-dm-motion.page-service .hero{
  min-height:0 !important;
  padding-top:calc(84px + 18px) !important;
  padding-bottom:clamp(36px,4.5vw,64px) !important;
  display:flex !important;
  align-items:flex-start !important;
  justify-content:flex-start !important;
}
body.page-dm-motion.page-service .hero > .wrap{
  width:100%;
  padding-top:0 !important;
  padding-bottom:0 !important;
}
body.page-dm-motion.page-service .hero .hero-copy,
body.page-dm-motion.page-service .hero .hero-inner{
  padding:0 !important;
  max-width:760px;
}
body.page-dm-motion.page-service .hero .breadcrumb,
body.page-dm-motion.page-service .hero .crumbs{
  margin:0 0 12px !important;
}
body.page-dm-motion.page-service .hero h1,
body.page-dm-motion.page-theme-html .hero h1{
  font-size:clamp(2.35rem,4.6vw,3.4rem) !important;
  line-height:1.08 !important;
  margin:0 0 14px !important;
}
body.page-dm-motion.page-service .hero .lede,
body.page-dm-motion.page-service .hero p.sub,
body.page-dm-motion.page-service .hero .hero-sub{
  font-size:clamp(1.02rem,1.35vw,1.16rem) !important;
  max-width:38rem;
  margin:0 0 20px !important;
}
body.page-dm-motion.page-service .hero .hero-actions,
body.page-dm-motion.page-service .hero .hero-cta{
  margin:0 !important;
  gap:12px;
}
body.page-dm-motion.page-service .hero .hero-badges,
body.page-dm-motion.page-service .hero .hero-trust{
  margin-top:28px !important;
  padding-top:22px !important;
}
@media (max-width:900px){
  body.page-dm-motion.page-service .hero{
    padding-top:calc(64px + 14px) !important;
    padding-bottom:28px !important;
  }
  body.page-dm-motion.page-service .hero h1,
  body.page-dm-motion.page-theme-html .hero h1{
    font-size:clamp(1.85rem,6.4vw,2.45rem) !important;
    margin:0 0 10px !important;
  }
  body.page-dm-motion.page-service .hero .lede,
  body.page-dm-motion.page-service .hero p.sub{
    margin:0 0 16px !important;
    font-size:1rem !important;
  }
}
@media (max-width:680px){
  body.page-dm-motion.page-service .hero{
    padding-top:calc(64px + 8px) !important;
    padding-bottom:22px !important;
  }
}

/* Dark included / compare tiles: keep light text (beats paper-card lock) */
.onpage-theme-page .sec-ink .svc,
.onpage-theme-page #included .svc,
.onpage-theme-page .comp-card{
  color:#B7CBD2 !important;
  background:var(--ink-2,#12303A) !important;
}
.onpage-theme-page .sec-ink .svc h3,
.onpage-theme-page #included .svc h3,
.onpage-theme-page .comp-card h3,
.onpage-theme-page .comp-card h4{
  color:#fff !important;
}
.onpage-theme-page .sec-ink .svc p,
.onpage-theme-page #included .svc p,
.onpage-theme-page .comp-card p,
.onpage-theme-page .comp-card li{
  color:#B7CBD2 !important;
}
.onpage-theme-page .comp-card .tag,
.onpage-theme-page .comp-card.win .tag{
  color:var(--signal,#F47A1F) !important;
}
.onpage-theme-page .comp-card.lose .tag{
  color:#9FB6BE !important;
}

/* Hide mid-page FINAL CTA bands */
.onpage-theme-page .cta-band,
.onpage-theme-page .cta-sec,
.onpage-theme-page section.cta-band,
.onpage-theme-page section.cta-sec,
.aeo-theme-page section.sec-ink.cta-bg,
.aeo-theme-page section.cta-bg{
  display:none !important;
}

/* ========== Unified contact form (all service pages) ========== */
.page-service #contact.sec-mist{
  background:var(--mist,#F1F5F3)!important;
  padding:clamp(64px,8vw,110px) 0!important;
}
.page-service #contact .contact-grid{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(0,1.15fr)!important;
  gap:clamp(32px,5vw,72px)!important;
  align-items:start!important;
}
.page-service #contact .contact-side{padding-top:12px;min-width:0}
.page-service #contact .contact-side h2{
  margin:0 0 14px!important;
  color:var(--graphite,#0D2029)!important;
  font-size:clamp(1.75rem,3.2vw,2.5rem)!important;
}
.page-service #contact .contact-side p,
.page-service #contact .contact-side .lede{
  color:var(--slate,#4B5B62)!important;
  font-size:1.02rem!important;
  line-height:1.65!important;
  margin-bottom:0!important;
}
.page-service #contact .contact-side .eyebrow{
  color:var(--signal-deep,#CD661A)!important;
  display:inline-block!important;
  margin-bottom:14px!important;
}
.page-service #contact .contact-side .compare-list{
  list-style:none!important;
  margin:22px 0 0!important;
  padding:0!important;
  display:grid!important;
  gap:12px!important;
}
.page-service #contact .contact-side .compare-list li{
  display:flex!important;
  gap:10px!important;
  align-items:flex-start!important;
  color:var(--slate,#4B5B62)!important;
  font-size:.95rem!important;
  line-height:1.5!important;
}
.page-service #contact .contact-side .compare-list .mark.v{
  color:var(--signal-deep,#CD661A)!important;
  font-weight:700!important;
  flex:none!important;
}
.page-service #contact .contact-meta{
  display:flex!important;
  flex-direction:column!important;
  gap:20px!important;
  margin-top:28px!important;
}
.page-service #contact .cm-item{
  display:flex!important;
  align-items:flex-start!important;
  gap:14px!important;
}
.page-service #contact .cm-icon{
  width:40px!important;
  height:40px!important;
  border-radius:10px!important;
  background:var(--mist-2,#E8EFEB)!important;
  display:grid!important;
  place-items:center!important;
  flex-shrink:0!important;
}
.page-service #contact .cm-icon svg{
  width:20px!important;
  height:20px!important;
  stroke:var(--signal-deep,#CD661A)!important;
  fill:none!important;
}
.page-service #contact .cm-item .label{
  font-size:.72rem!important;
  font-weight:500!important;
  letter-spacing:.08em!important;
  text-transform:uppercase!important;
  color:var(--slate-2,#6B7A80)!important;
  margin-bottom:4px!important;
}
.page-service #contact .cm-item .value{
  font-weight:600!important;
  color:var(--graphite,#0D2029)!important;
  font-size:.98rem!important;
}
.page-service #contact .contact-card{
  background:#fff!important;
  border:1px solid var(--line,#E1E9E5)!important;
  border-radius:18px!important;
  padding:clamp(26px,3vw,40px)!important;
  box-shadow:0 12px 36px rgba(13,32,41,.08)!important;
  min-width:0!important;
}
.page-service #contact .form-row{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:22px 24px!important;
  margin-bottom:8px!important;
}
.page-service #contact .form-field{
  position:relative!important;
  min-width:0!important;
}
.page-service #contact .form-field.full{
  grid-column:1/-1!important;
}
.page-service #contact .form-field label{
  display:block!important;
  font-size:.72rem!important;
  font-weight:500!important;
  letter-spacing:.08em!important;
  text-transform:uppercase!important;
  color:var(--slate-2,#6B7A80)!important;
  margin-bottom:10px!important;
}
.page-service #contact .form-field input,
.page-service #contact .form-field select,
.page-service #contact .form-field textarea{
  width:100%!important;
  box-sizing:border-box!important;
  border:none!important;
  border-bottom:1.5px solid var(--line,#E1E9E5)!important;
  border-radius:0!important;
  padding:8px 0 12px!important;
  font-family:inherit!important;
  font-size:1rem!important;
  color:var(--graphite,#0D2029)!important;
  background:transparent!important;
  outline:none!important;
  transition:border-color .25s ease!important;
}
.page-service #contact .form-field input::placeholder,
.page-service #contact .form-field textarea::placeholder{
  color:var(--slate-2,#6B7A80)!important;
}
.page-service #contact .form-field input:focus,
.page-service #contact .form-field select:focus,
.page-service #contact .form-field textarea:focus{
  border-bottom-color:var(--signal,#F47A1F)!important;
}
.page-service #contact .form-field textarea{
  resize:vertical!important;
  min-height:96px!important;
  padding-top:8px!important;
}
.page-service #contact .form-field select{
  appearance:none!important;
  -webkit-appearance:none!important;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1.5L6 6.5L11 1.5' stroke='%234B5B62' stroke-width='1.5'/></svg>")!important;
  background-repeat:no-repeat!important;
  background-position:right 4px center!important;
}
.page-service #contact .form-submit,
.page-service #contact .contact-card .btn-primary{
  width:100%!important;
  justify-content:center!important;
  margin-top:14px!important;
}
.page-service #contact .field-err{
  display:block!important;
  margin-top:6px!important;
  font-size:.82rem!important;
  color:#c0392b!important;
}
@media (max-width:900px){
  .page-service #contact .contact-grid{
    grid-template-columns:minmax(0,1fr)!important;
    gap:32px!important;
  }
  .page-service #contact .form-row{
    grid-template-columns:minmax(0,1fr)!important;
    gap:20px!important;
  }
}

/* ========== Hero image darker — text always readable ========== */
.page-service .hero .hero-bg,
.page-service .hero .hero-visual,
.page-service .wp-hero .wp-hero-visual,
body.page-web-dev .hero .hero-media,
body.page-seo-service .hero .hero-bg,
body.page-theme-html .hero .hero-bg{
  opacity:.42 !important;
}
.page-service .hero .hero-veil,
.page-service .wp-hero .wp-hero-veil,
body.page-web-dev .hero .hero-veil,
body.page-seo-service .hero .hero-veil,
body.page-theme-html .hero .hero-veil{
  background:
    radial-gradient(120% 90% at 82% 45%, rgba(244,122,31,.08), transparent 55%),
    linear-gradient(90deg, rgba(10,26,34,.96) 0%, rgba(10,26,34,.92) 28%, rgba(10,26,34,.78) 52%, rgba(10,26,34,.55) 78%, rgba(10,26,34,.42) 100%) !important;
}
.page-service .hero h1,
.page-service .hero .sub,
.page-service .hero .lede,
.page-service .hero .hero-sub,
body.page-theme-html .hero h1,
body.page-seo-service .hero h1{
  text-shadow:0 2px 18px rgba(10,26,34,.45);
}
@media (max-width:900px){
  .page-service .hero .hero-bg,
  .page-service .hero .hero-visual,
  body.page-seo-service .hero .hero-bg,
  body.page-theme-html .hero .hero-bg,
  body.page-web-dev .hero .hero-media{
    opacity:.28 !important;
  }
  .page-service .hero .hero-veil,
  body.page-seo-service .hero .hero-veil,
  body.page-theme-html .hero .hero-veil{
    background:linear-gradient(180deg,rgba(10,26,34,.95) 0%,rgba(10,26,34,.9) 50%,rgba(10,26,34,.94) 100%) !important;
  }
}

/* Theme HTML hero titles use <span class="line"> as line breaks.
   Shared KodRank hero sits outside .*-theme-page, so theme CSS never applied. */
.page-service .hero h1 .line{
  display:block;
}
@media (max-width:767px){
  .page-service .hero h1 .line{
    white-space:normal;
  }
}

/* ========== Digital marketing: stats 2-up + testi carousel (mobile) ========== */
@media (max-width:680px){
  html body.page-dm.page-service .dm-theme-page .stats,
  html body.page-dm .dm-theme-page .stats,
  html body.page-dm .stats,
  html body.page-onpage.page-service .onpage-theme-page .stats,
  html body.page-onpage .onpage-theme-page .stats,
  html body.page-onpage .stats{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:22px 16px !important;
    margin-top:28px !important;
  }
  html body.page-dm .dm-theme-page .stat,
  html body.page-dm .stat{
    min-width:0 !important;
    padding:8px 0 8px 14px !important;
    border-left:1px solid rgba(255,255,255,.16) !important;
  }
  html body.page-dm .dm-theme-page .stat:nth-child(odd),
  html body.page-dm .stat:nth-child(odd){
    border-left:none !important;
    padding-left:0 !important;
  }
  html body.page-dm .dm-theme-page .stat .num,
  html body.page-onpage .onpage-theme-page .stat .n{
    font-size:clamp(1.55rem,6.5vw,2rem) !important;
    line-height:1.05 !important;
    word-break:break-word;
  }
  html body.page-dm .dm-theme-page .stat .lbl,
  html body.page-onpage .onpage-theme-page .stat .l{
    font-size:.62rem !important;
    letter-spacing:.06em !important;
    line-height:1.35 !important;
    white-space:normal !important;
  }
}

@media (max-width:767px){
  html body.page-dm .dm-theme-page .testi-slider,
  html body.page-onpage .onpage-theme-page .testi-slider{
    position:relative;
  }
  html body.page-dm .dm-theme-page .testi-track,
  html body.page-onpage .onpage-theme-page .testi-track{
    display:flex !important;
    flex-wrap:nowrap !important;
    gap:14px !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    scroll-snap-type:x mandatory !important;
    scroll-padding-inline:0;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    padding-bottom:4px !important;
  }
  html body.page-dm .dm-theme-page .testi-track::-webkit-scrollbar,
  html body.page-onpage .onpage-theme-page .testi-track::-webkit-scrollbar{display:none}
  html body.page-dm .dm-theme-page .testi-track .testi,
  html body.page-dm .dm-theme-page .testi,
  html body.page-onpage .onpage-theme-page .testi-track .testi,
  html body.page-onpage .onpage-theme-page .testi{
    flex:0 0 86% !important;
    width:86% !important;
    max-width:86% !important;
    min-width:86% !important;
    scroll-snap-align:start !important;
    box-sizing:border-box;
    background:#fff !important;
    border:1px solid #E1E9E5 !important;
    border-radius:18px !important;
    padding:22px 18px 20px !important;
    box-shadow:0 10px 28px -16px rgba(13,32,41,.18) !important;
    min-height:280px;
    height:auto !important;
    display:flex !important;
    flex-direction:column !important;
    gap:14px !important;
  }
  html body.page-dm .dm-theme-page .testi .quote,
  html body.page-onpage .onpage-theme-page .testi .quote{
    font-size:.92rem !important;
    line-height:1.65 !important;
    color:#0D2029 !important;
    flex:1 1 auto;
  }
  html body.page-dm .dm-theme-page .testi-person,
  html body.page-onpage .onpage-theme-page .testi-person{
    margin-top:auto;
    padding-top:14px !important;
  }
  html body.page-dm .dm-theme-page .testi-nav-wrap,
  html body.page-onpage .onpage-theme-page .testi-nav-wrap{
    display:flex !important;
    justify-content:center !important;
    gap:12px !important;
    margin-top:22px !important;
  }
  html body.page-dm .dm-theme-page .testi-nav,
  html body.page-onpage .onpage-theme-page .testi-nav{
    width:44px !important;
    height:44px !important;
    border:1px solid #E1E9E5 !important;
    background:#fff !important;
    color:#0D2029 !important;
    box-shadow:0 4px 14px rgba(13,32,41,.08) !important;
  }
}