/* "What I do" services section — tokens from site-chrome/site.css.
   Prefixed with #top #main so Enfold's and enfold.css's element rules don't reach in. */
#top #main .rit-svc, .rit-svc { background: var(--rit-bg); font-family: var(--rit-font); color: var(--rit-text); }
#top #main .rit-svc *, .rit-svc * { box-sizing: border-box; }
#top #main .rit-svc__inner { max-width: var(--rit-max); margin: 0 auto; padding: var(--rit-12) var(--rit-3); display: flex; flex-direction: column; gap: var(--rit-6); }

#top #main .rit-svc__head { max-width: 680px; margin: 0 auto; text-align: center; display: flex; flex-direction: column; gap: var(--rit-2); }
#top #main .rit-svc__eyebrow { font: 600 13px/16px var(--rit-font) !important; letter-spacing: .08em !important; text-transform: uppercase; color: var(--rit-accent) !important; margin: 0 !important; }
#top #main .rit-svc__title { font: var(--rit-section) !important; font-size: 40px !important; line-height: 48px !important; letter-spacing: -.02em !important; margin: 0 !important; color: var(--rit-text) !important; }
#top #main .rit-svc__lead { font: 400 18px/28px var(--rit-font) !important; color: var(--rit-muted) !important; margin: 0 !important; }

#top #main .rit-svc__main { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--rit-3); }
#top #main .rit-svc__card {
  position: relative; background: var(--rit-surface); border: 1px solid var(--rit-border); border-radius: var(--rit-radius);
  padding: var(--rit-4); display: flex; flex-direction: column; gap: var(--rit-2); box-shadow: var(--rit-shadow);
  transition: transform var(--rit-ease), box-shadow var(--rit-ease);
}
#top #main .rit-svc__card:hover { transform: scale(1.01); box-shadow: var(--rit-shadow-hover); }
#top #main .rit-svc__num { position: absolute; top: var(--rit-3); right: var(--rit-4); font: 600 48px/56px var(--rit-font); letter-spacing: -.02em; color: var(--rit-text); opacity: .06; }
#top #main .rit-svc__icon { width: 48px; height: 48px; border-radius: var(--rit-radius); background: var(--rit-accent-soft); color: var(--rit-accent); display: flex; align-items: center; justify-content: center; margin-bottom: var(--rit-1); }
#top #main .rit-svc__icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
#top #main .rit-svc__name { font: var(--rit-subhead) !important; letter-spacing: -.01em !important; color: var(--rit-text) !important; margin: 0 !important; text-transform: none !important; }
#top #main .rit-svc__text { font: 400 16px/24px var(--rit-font) !important; color: var(--rit-muted) !important; margin: 0 !important; flex: 1; }
#top #main .rit-svc__tags { list-style: none !important; margin: 0 !important; padding: 0 !important; display: flex; flex-wrap: wrap; gap: var(--rit-1); }
#top #main .rit-svc__tags li { margin: 0 !important; padding: 4px 12px !important; background: var(--rit-bg) !important; border: 1px solid var(--rit-border); border-radius: 999px; font: 400 13px/20px var(--rit-font) !important; color: var(--rit-text) !important; list-style: none !important; }
#top #main a.rit-svc__link { display: inline-flex; align-items: center; gap: var(--rit-1); min-height: var(--rit-target); margin-top: var(--rit-1); font: 600 15px/20px var(--rit-font) !important; color: var(--rit-accent) !important; text-decoration: none !important; align-self: flex-start; }
#top #main a.rit-svc__link span { transition: transform var(--rit-ease); }
#top #main a.rit-svc__link:hover { color: var(--rit-accent-hover) !important; }
#top #main a.rit-svc__link:hover span { transform: translateX(4px); }

#top #main .rit-svc__more { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--rit-2); }
#top #main a.rit-svc__row {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--rit-2); min-height: 96px;
  background: var(--rit-surface); border: 1px solid var(--rit-border); border-radius: var(--rit-radius); padding: var(--rit-3);
  text-decoration: none !important; color: var(--rit-text) !important;
  transition: transform var(--rit-ease), border-color var(--rit-ease), box-shadow var(--rit-ease);
}
#top #main a.rit-svc__row:hover { transform: scale(1.01); border-color: rgba(59,106,138,.35); box-shadow: var(--rit-shadow); }
#top #main a.rit-svc__row b { display: block; font: 600 16px/24px var(--rit-font); color: var(--rit-text); margin-bottom: 4px; }
#top #main a.rit-svc__row > span > span { display: block; font: 400 14px/20px var(--rit-font); color: var(--rit-muted); }
#top #main .rit-svc__arrow { color: var(--rit-accent); font: 600 18px/24px var(--rit-font); flex: none; transition: transform var(--rit-ease); }
#top #main a.rit-svc__row:hover .rit-svc__arrow { transform: translateX(4px); }
#top #main .rit-svc a:focus-visible { outline: 2px solid var(--rit-accent); outline-offset: 2px; }

@media (max-width: 960px) {
  #top #main .rit-svc__main { grid-template-columns: 1fr; }
  #top #main .rit-svc__more { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 767px) {
  #top #main .rit-svc__inner { padding: var(--rit-8) var(--rit-2); gap: var(--rit-4); }
  #top #main .rit-svc__title { font-size: 32px !important; line-height: 40px !important; }
  #top #main .rit-svc__lead { font-size: 16px !important; line-height: 24px !important; }
  #top #main .rit-svc__card { padding: var(--rit-3); }
  #top #main .rit-svc__more { grid-template-columns: 1fr; }
  #top #main a.rit-svc__row { min-height: 0; }
}

/* Network & Security Checkup offer */
#top #main .rit-svc__offer { display: grid; grid-template-columns: 1.6fr 1fr; gap: var(--rit-5); align-items: center;
  background: var(--rit-surface); border: 1px solid rgba(59,106,138,.28); border-radius: var(--rit-radius);
  padding: var(--rit-5); box-shadow: var(--rit-shadow); position: relative; overflow: hidden; }
#top #main .rit-svc__offer::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--rit-accent); }
#top #main .rit-svc__offer-body { display: flex; flex-direction: column; gap: var(--rit-2); }
#top #main .rit-svc__offer-title { font: var(--rit-section) !important; font-size: 28px !important; line-height: 36px !important; letter-spacing: -.015em !important; margin: 0 !important; color: var(--rit-text) !important; text-transform: none !important; }
#top #main .rit-svc__checks { list-style: none !important; margin: 0 !important; padding: 0 !important; display: grid; grid-template-columns: 1fr 1fr; gap: var(--rit-1) var(--rit-3); }
#top #main .rit-svc__checks li { position: relative; margin: 0 !important; padding: 0 0 0 28px !important; font: 400 15px/24px var(--rit-font) !important; color: var(--rit-text) !important; list-style: none !important; background: none !important; }
#top #main .rit-svc__checks li::before { content: ''; position: absolute; left: 2px; top: 6px; width: 12px; height: 7px; border: solid var(--rit-accent); border-width: 0 0 2px 2px; transform: rotate(-45deg); }
#top #main .rit-svc__offer-cta { background: var(--rit-bg); border-radius: var(--rit-radius); padding: var(--rit-4); display: flex; flex-direction: column; gap: var(--rit-2); align-items: flex-start; }
#top #main .rit-svc__price { font: 600 24px/32px var(--rit-font) !important; color: var(--rit-text) !important; margin: 0 !important; }
#top #main .rit-svc__price span { display: block; font: 400 15px/20px var(--rit-font); color: var(--rit-muted); }
#top #main .rit-svc__fine { font: 400 14px/20px var(--rit-font) !important; color: var(--rit-muted) !important; margin: 0 !important; }
#top #main .rit-svc__offer-cta .rit-btn { width: 100%; }
@media (max-width: 960px) {
  #top #main .rit-svc__offer { grid-template-columns: 1fr; gap: var(--rit-3); padding: var(--rit-4); }
}
@media (max-width: 767px) {
  #top #main .rit-svc__offer { padding: var(--rit-3); }
  #top #main .rit-svc__offer-title { font-size: 24px !important; line-height: 32px !important; }
  #top #main .rit-svc__checks { grid-template-columns: 1fr; }
  #top #main .rit-svc__offer-cta { padding: var(--rit-3); }
}
@media (prefers-reduced-motion: reduce) {
  #top #main .rit-svc__card, #top #main a.rit-svc__row, #top #main .rit-svc__arrow, #top #main a.rit-svc__link span { transition: none; }
  #top #main .rit-svc__card:hover, #top #main a.rit-svc__row:hover { transform: none; }
}