/* WebByMateen V8.78
   Shared premium UX system for inner service pages only.
   Global locked layout/components remain untouched.
*/

.service-detail-page{
  --service-ink:#111319;
  --service-muted:#71757d;
  --service-line:#ded6ca;
  --service-cream:#f5f0e8;
}

/* Make light-section headings reliably readable. */
.service-detail-page .inner-service-process .section-title,
.service-detail-page .inner-service-related .section-title,
.service-detail-page .services-faq .section-title,
.service-detail-page .phase3-first .section-title{
  color:var(--service-ink)!important;
}
.service-detail-page .inner-service-process .my-process-head>p,
.service-detail-page .inner-service-related .lead,
.service-detail-page .services-faq .lead,
.service-detail-page .phase3-first .lead{
  color:#70747c!important;
}

/* Reviews live inside a dark premium shell even when the outer section is light. */
.service-detail-page .inner-service-reviews .section-title{
  color:#fff!important;
}
.service-detail-page .inner-service-reviews .reviews-head p{
  color:#a9adb6!important;
}

/* Shared My Process, same visual language across every service. */
.service-detail-page .inner-service-process{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 9% 3%,rgba(255,138,0,.06),transparent 24%),
    radial-gradient(circle at 93% 15%,rgba(242,72,21,.045),transparent 30%),
    #f5f0e8;
}
.service-detail-page .inner-service-process:before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(17,19,25,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(17,19,25,.025) 1px,transparent 1px);
  background-size:48px 48px;
  opacity:.28;
  mask-image:linear-gradient(180deg,#000,transparent 88%);
}
.service-detail-page .inner-service-process .container{position:relative;z-index:1}
.service-detail-page .inner-service-process .my-process-shell{
  border:1px solid #ddd5c9;
  box-shadow:0 28px 72px rgba(56,43,29,.075);
  background:rgba(255,253,249,.94);
}
.service-detail-page .inner-service-process .my-process-head{
  align-items:end;
}
.service-detail-page .inner-service-process .my-process-head .eyebrow{
  color:#f24815!important;
}
.service-detail-page .inner-service-process .my-process-card{
  position:relative;
  overflow:hidden;
  background:#fffdfa;
  border-color:#dfd7cc;
  box-shadow:0 12px 34px rgba(57,44,30,.045);
  transition:transform .28s ease,border-color .28s ease,box-shadow .28s ease;
}
.service-detail-page .inner-service-process .my-process-card:hover,
.service-detail-page .inner-service-process .my-process-card.is-active{
  transform:translateY(-5px);
  border-color:rgba(242,72,21,.35);
  box-shadow:0 24px 52px rgba(57,44,30,.09);
}
.service-detail-page .inner-service-process .my-process-card.is-active:after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:3px;
  background:linear-gradient(90deg,#ff8a00,#f24815);
}
.service-detail-page .inner-service-process .my-process-card h3{
  color:#15171c!important;
}
.service-detail-page .inner-service-process .my-process-card p{
  color:#777b82!important;
}
.service-detail-page .inner-service-process .my-process-card-top b{
  color:#f24815!important;
}
.service-detail-page .inner-service-process .my-process-icon{
  background:#fff1ec;
  color:#f24815;
  border:1px solid rgba(242,72,21,.16);
}
.service-detail-page .inner-service-process .my-process-final{
  background:
    radial-gradient(circle at 88% 10%,rgba(255,255,255,.14),transparent 30%),
    linear-gradient(145deg,#ff6d00,#f24815 62%,#ff4631);
  border-color:transparent;
}
.service-detail-page .inner-service-process .my-process-final h3,
.service-detail-page .inner-service-process .my-process-final p,
.service-detail-page .inner-service-process .my-process-final .my-process-card-top b{
  color:#fff!important;
}
.service-detail-page .inner-service-process .my-process-final .my-process-icon{
  color:#fff;
  background:rgba(255,255,255,.12);
  border-color:rgba(255,255,255,.24);
}
.service-detail-page .inner-service-process .process-ui{
  margin-top:auto;
}
.service-detail-page .inner-service-process .my-process-status a{
  color:#f24815!important;
  font-weight:900;
}
.service-detail-page .inner-service-process .my-process-progress span{
  background:linear-gradient(90deg,#ff8a00,#f24815)!important;
}

/* Large conversion section: use the approved Services-page project-fit pattern. */
.service-detail-page .inner-service-fit{
  padding-top:clamp(44px,6vw,82px);
  padding-bottom:clamp(44px,6vw,82px);
  background:#f5f0e8;
}
.service-detail-page .inner-service-fit .service-conversion-shell{
  box-shadow:0 30px 82px rgba(28,20,16,.2);
}
.service-detail-page .inner-service-fit .service-conversion-copy h2{
  max-width:780px;
}
.service-detail-page .inner-service-fit .service-book-call{
  position:relative;
  animation:innerServiceCallWobble 5.2s ease-in-out infinite;
  transform-origin:center;
  border-color:rgba(242,72,21,.4)!important;
}
.service-detail-page .inner-service-fit .service-book-call:before{
  content:"";
  position:absolute;
  inset:-5px;
  border:1px solid rgba(242,72,21,.24);
  border-radius:inherit;
  opacity:0;
  animation:innerServiceCallRing 5.2s ease-in-out infinite;
  pointer-events:none;
}
@keyframes innerServiceCallWobble{
  0%,68%,100%{transform:translateY(0) rotate(0deg) scale(1)}
  74%{transform:translateY(-2px) rotate(-.5deg) scale(1.012)}
  80%{transform:translateY(0) rotate(.5deg) scale(1.012)}
  86%{transform:translateY(-1px) rotate(-.24deg) scale(1.006)}
  92%{transform:translateY(0) rotate(0deg) scale(1)}
}
@keyframes innerServiceCallRing{
  0%,66%,100%{opacity:0;transform:scale(.985)}
  75%{opacity:.58;transform:scale(1.014)}
  91%{opacity:0;transform:scale(1.045)}
}

/* Reviews use the approved homepage/testimonials UI, with service-specific copy. */
.service-detail-page .inner-service-reviews{
  padding-top:clamp(50px,7vw,92px);
  padding-bottom:clamp(50px,7vw,92px);
}
.service-detail-page .inner-service-reviews .reviews-shell{
  box-shadow:0 32px 86px rgba(24,17,14,.18);
}
.service-detail-page .inner-service-reviews .reviews-head p{
  max-width:860px;
}

/* Connected services now look like the actual Services-page cards. */
.service-detail-page .inner-service-related{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 92% 4%,rgba(242,72,21,.05),transparent 28%),
    #f5f0e8;
}
.service-detail-page .inner-service-related .inner-service-related-grid{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:16px!important;
  margin-top:26px;
}
.service-detail-page .inner-service-related .service{
  min-height:330px;
  box-shadow:0 18px 44px rgba(57,44,30,.055);
}
.service-detail-page .inner-service-related .service:hover{
  transform:translateY(-5px);
  box-shadow:0 28px 62px rgba(57,44,30,.1);
}
.service-detail-page .inner-service-related .service-icon{
  box-shadow:0 12px 30px rgba(242,72,21,.11);
}
.service-detail-page .inner-service-related .service.has-card-link{
  cursor:pointer;
}
.service-detail-page .inner-service-related .service.has-card-link>.service-card-hit{
  position:absolute;
  inset:0;
  z-index:5;
  border-radius:inherit;
}
.service-detail-page .inner-service-related .service.has-card-link>.service-arrow{
  z-index:6;
  pointer-events:none;
}
.service-detail-page .inner-service-related .service-card-hit:focus-visible{
  outline:3px solid rgba(242,72,21,.45);
  outline-offset:4px;
  border-radius:inherit;
}

/* FAQ stays clean. The final conversion point is now the full project form below it. */
.service-detail-page .services-faq{
  background:#fbf8f3;
}

/* First custom sections from V8.77: increase legibility without changing their structure. */
.service-detail-page.phase3-service .p3-card h3{
  font-size:clamp(22px,2.15vw,31px);
}
.service-detail-page.phase3-service .p3-card p{
  font-size:12px;
  line-height:1.78;
}
.service-detail-page.phase3-service .p3-kicker{
  font-size:8.5px;
}
.service-detail-page.phase3-service .p3-card{
  box-shadow:0 20px 50px rgba(57,44,30,.065);
}
.service-detail-page.phase3-service .p3-card:hover{
  transform:translateY(-5px);
  box-shadow:0 28px 66px rgba(57,44,30,.105);
}

/* Website + CRM unique sections get a little more depth without redesigning locked content. */
.service-detail-page .web-growth-panel,
.service-detail-page .crm-module,
.service-detail-page .service-value-card{
  transition:transform .24s ease,box-shadow .24s ease,border-color .24s ease;
}
.service-detail-page .web-growth-panel:hover,
.service-detail-page .crm-module:hover,
.service-detail-page .service-value-card:hover{
  transform:translateY(-3px);
}


/* Final service enquiry form, using the existing Get a Quote form and CRM flow. */
.service-detail-page .inner-service-quote{
  position:relative;
  overflow:hidden;
  padding-top:clamp(46px,6vw,82px);
  padding-bottom:clamp(56px,7vw,94px);
  background:
    radial-gradient(circle at 10% 12%,rgba(255,138,0,.07),transparent 25%),
    radial-gradient(circle at 88% 18%,rgba(242,72,21,.08),transparent 28%),
    #f5f0e8;
}
.service-detail-page .inner-service-quote-shell{
  display:grid;
  grid-template-columns:minmax(260px,.37fr) minmax(0,.63fr);
  gap:34px;
  align-items:start;
  padding:38px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:30px;
  background:
    radial-gradient(circle at 92% 8%,rgba(242,72,21,.2),transparent 29%),
    linear-gradient(145deg,#151619,#0c0d10 70%,#1b100e);
  box-shadow:0 34px 90px rgba(27,20,16,.18);
}
.service-detail-page .inner-service-quote-copy{
  position:sticky;
  top:112px;
  min-width:0;
}
.service-detail-page .inner-service-quote-copy .eyebrow{
  color:#ff7655!important;
}
.service-detail-page .inner-service-quote-copy h2{
  margin:14px 0 14px;
  color:#fff;
  font-size:clamp(32px,3.2vw,50px);
  line-height:1.04;
  letter-spacing:-.045em;
}
.service-detail-page .inner-service-quote-copy>p{
  margin:0;
  color:#a9adb6;
  font-size:13px;
  line-height:1.72;
}
.service-detail-page .inner-service-quote-points{
  display:grid;
  gap:9px;
  margin-top:24px;
}
.service-detail-page .inner-service-quote-point{
  display:grid;
  grid-template-columns:38px 1fr;
  gap:11px;
  align-items:center;
  padding:11px 12px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  background:rgba(255,255,255,.035);
}
.service-detail-page .inner-service-quote-point span{
  width:38px;
  height:38px;
  border-radius:12px;
  display:grid;
  place-items:center;
  color:#ff7958;
  background:rgba(242,72,21,.1);
}
.service-detail-page .inner-service-quote-point svg{
  width:18px;
  height:18px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
}
.service-detail-page .inner-service-quote-point b{
  display:block;
  color:#fff;
  font-size:10px;
}
.service-detail-page .inner-service-quote-point small{
  display:block;
  margin-top:2px;
  color:#858a94;
  font-size:7.5px;
  line-height:1.45;
}
.service-detail-page .inner-service-quote-form{
  min-width:0;
  padding:24px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:22px;
  background:rgba(255,255,255,.035);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
}
.service-detail-page .inner-service-quote-form-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:14px;
  margin-bottom:18px;
  padding-bottom:16px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.service-detail-page .inner-service-quote-form-head div>small{
  display:block;
  color:#ff7554;
  font-size:7px;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.service-detail-page .inner-service-quote-form-head strong{
  display:block;
  margin-top:6px;
  color:#fff;
  font-size:18px;
  line-height:1.25;
}
.service-detail-page .inner-service-quote-form-head>span{
  flex:0 0 auto;
  padding:7px 9px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:999px;
  color:#9da1aa;
  background:rgba(255,255,255,.03);
  font-size:7px;
  font-weight:800;
}
.service-detail-page .inner-service-quote .quote-form input,
.service-detail-page .inner-service-quote .quote-form textarea,
.service-detail-page .inner-service-quote .custom-select-toggle{
  background:#181a1e;
  border-color:rgba(255,255,255,.1);
}
.service-detail-page .inner-service-quote .form-bottom{
  align-items:stretch;
}
.service-detail-page .inner-service-quote .security{
  height:100%;
}

/* Responsive behavior. */
@media(max-width:980px){
  .service-detail-page .inner-service-related .inner-service-related-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  .service-detail-page .inner-service-quote-shell{
    grid-template-columns:1fr;
  }
  .service-detail-page .inner-service-quote-copy{
    position:relative;
    top:auto;
  }
}
@media(max-width:760px){
  .service-detail-page .inner-service-process .my-process-shell{
    padding-left:16px;
    padding-right:16px;
  }
  .service-detail-page .inner-service-process .my-process-grid{
    scroll-snap-type:x mandatory;
    overscroll-behavior-inline:contain;
  }
  .service-detail-page .inner-service-process .my-process-card{
    scroll-snap-align:start;
  }
  .service-detail-page .inner-service-fit{
    padding-top:34px;
    padding-bottom:34px;
  }
  .service-detail-page .inner-service-fit .service-conversion-actions{
    display:grid;
    grid-template-columns:1fr;
  }
  .service-detail-page .inner-service-fit .service-conversion-actions .btn{
    width:100%;
    justify-content:center;
  }
  .service-detail-page .inner-service-related .inner-service-related-grid{
    grid-template-columns:1fr!important;
  }
  .service-detail-page .inner-service-quote-shell{
    padding:22px 17px;
    border-radius:23px;
  }
  .service-detail-page .inner-service-quote-form{
    padding:18px 14px;
    border-radius:18px;
  }
  .service-detail-page .inner-service-quote-form-head{
    align-items:flex-start;
    flex-direction:column;
  }
  .service-detail-page .inner-service-related .service{
    min-height:0;
  }
  .service-detail-page .reviews-head-actions{
    align-items:stretch;
  }
}
@media(prefers-reduced-motion:reduce){
  .service-detail-page .inner-service-fit .service-book-call,
  .service-detail-page .inner-service-fit .service-book-call:before{
    animation:none!important;
  }
}


/* ================================================================
   V8.80: inner service visual system
   ================================================================ */

.service-detail-page{
  --inner-section-space:clamp(64px,6.4vw,92px);
}

/* Equal vertical rhythm on all inner-service sections. */
.service-detail-page main>section:not(.inner-hero){
  padding-top:var(--inner-section-space)!important;
  padding-bottom:var(--inner-section-space)!important;
  margin-top:0!important;
  margin-bottom:0!important;
}
.service-detail-page main>section.inner-hero{
  padding-bottom:clamp(58px,6vw,86px)!important;
}
.service-detail-page main>section+section{
  margin-top:0!important;
}

/* Article-inspired hero card on the right side. */
.service-detail-page .inner-hero-grid{
  align-items:center;
}
.service-detail-page .service-hero-visual{
  min-width:0;
  min-height:520px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  overflow:hidden;
  position:relative;
  padding:34px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:30px;
  background:
    radial-gradient(circle at 82% 16%,rgba(242,72,21,.18),transparent 30%),
    linear-gradient(145deg,#18131a,#0d0e11 72%,#151012);
  box-shadow:0 30px 80px rgba(0,0,0,.22);
}
.service-detail-page .service-hero-visual:after{
  content:"";
  position:absolute;
  inset:auto -70px -100px auto;
  width:260px;
  height:260px;
  border-radius:50%;
  border:1px solid rgba(242,72,21,.13);
  box-shadow:0 0 0 34px rgba(242,72,21,.025),0 0 0 68px rgba(242,72,21,.018);
  pointer-events:none;
}
.service-detail-page .service-hero-orbit{
  width:min(270px,72%);
  aspect-ratio:1;
  margin:0 auto 26px;
  position:relative;
  display:grid;
  place-items:center;
}
.service-detail-page .service-hero-orbit>i{
  position:absolute;
  border-radius:50%;
  border:1px solid rgba(242,72,21,.36);
}
.service-detail-page .service-hero-orbit>i:nth-child(1){inset:0}
.service-detail-page .service-hero-orbit>i:nth-child(2){inset:18%}
.service-detail-page .service-hero-orbit>i:nth-child(3){inset:34%}
.service-detail-page .service-hero-icon{
  position:relative;
  z-index:2;
  width:94px;
  height:94px;
  border-radius:26px;
  display:grid;
  place-items:center;
  color:#fff;
  background:linear-gradient(145deg,#ff7b00,#f24815 58%,#ff4933);
  box-shadow:0 18px 44px rgba(242,72,21,.28);
}
.service-detail-page .service-hero-icon svg{
  width:42px;
  height:42px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
}
.service-detail-page .service-hero-visual-copy{
  position:relative;
  z-index:2;
}
.service-detail-page .service-hero-visual-copy>small{
  display:block;
  color:#ff7958;
  font-size:9px;
  font-weight:900;
  letter-spacing:.14em;
}
.service-detail-page .service-hero-visual-copy h2{
  margin:12px 0 12px;
  max-width:480px;
  color:#fff!important;
  font-size:clamp(29px,2.6vw,42px);
  line-height:1.08;
  letter-spacing:-.04em;
}
.service-detail-page .service-hero-visual-copy p{
  margin:0;
  max-width:500px;
  color:#aeb2bb;
  font-size:13px;
  line-height:1.7;
}
.service-detail-page .service-hero-tags{
  display:flex;
  gap:7px;
  flex-wrap:wrap;
  margin-top:18px;
}
.service-detail-page .service-hero-tags span{
  padding:7px 10px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:999px;
  background:rgba(255,255,255,.035);
  color:#c2c5cc;
  font-size:7px;
  font-weight:800;
}

/* Make second-section cards educational, not only decorative. */
.service-detail-page .service-explain-widget{
  margin-top:auto;
  padding-top:18px;
}
.service-detail-page .service-explain-widget>small{
  display:block;
  margin-bottom:9px;
  color:#f24815;
  font-size:6.5px;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.service-detail-page .service-explain-flow{
  display:grid;
  grid-template-columns:1fr auto 1fr auto 1fr;
  gap:6px;
  align-items:center;
}
.service-detail-page .service-explain-flow>span{
  min-width:0;
  min-height:58px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:8px 9px;
  border:1px solid #e2d9cd;
  border-radius:12px;
  background:#fff;
}
.service-detail-page .service-explain-flow>span i{
  color:#f24815;
  font-size:6px;
  font-style:normal;
  font-weight:900;
}
.service-detail-page .service-explain-flow>span b{
  overflow:hidden;
  margin-top:3px;
  color:#1a1c21;
  font-size:7px;
  line-height:1.25;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.service-detail-page .service-explain-flow>em{
  color:#f24815;
  font-size:10px;
  font-style:normal;
  font-weight:900;
}
.service-detail-page .p3-card.dark .service-explain-flow>span,
.service-detail-page .web-build-card.dark .service-explain-flow>span,
.service-detail-page .service.featured .service-explain-flow>span{
  border-color:rgba(255,255,255,.12);
  background:rgba(255,255,255,.07);
}
.service-detail-page .p3-card.dark .service-explain-flow>span b,
.service-detail-page .web-build-card.dark .service-explain-flow>span b,
.service-detail-page .service.featured .service-explain-flow>span b{
  color:#fff;
}
.service-detail-page .p3-card.orange .service-explain-widget>small,
.service-detail-page .p3-card.orange .service-explain-flow>span i,
.service-detail-page .p3-card.orange .service-explain-flow>em{
  color:#fff;
}
.service-detail-page .p3-card.orange .service-explain-flow>span{
  border-color:rgba(255,255,255,.22);
  background:rgba(255,255,255,.12);
}
.service-detail-page .p3-card.orange .service-explain-flow>span b{
  color:#fff;
}

/* Cards stretch naturally so the visual explainer stays aligned at the bottom. */
.service-detail-page .phase3-first .p3-card,
.service-detail-page #website-scope .web-build-card,
.service-detail-page #crm-capabilities .service{
  display:flex;
  flex-direction:column;
}
.service-detail-page .phase3-first .p3-card>.p3-tags,
.service-detail-page #website-scope .web-build-card>.web-build-tags,
.service-detail-page #crm-capabilities .service>.tags{
  margin-bottom:0;
}

/* Circular interactive CTA visual. */
.service-detail-page .inner-service-fit{
  background:
    radial-gradient(circle at 86% 18%,rgba(242,72,21,.055),transparent 28%),
    #f5f0e8;
}
.service-detail-page .service-orbit-shell{
  grid-template-columns:minmax(0,.94fr) minmax(430px,1.06fr)!important;
  align-items:center;
  gap:clamp(28px,4vw,62px)!important;
  min-height:650px;
}
.service-detail-page .service-orbit-shell .service-conversion-copy{
  align-self:center;
}
.service-detail-page .service-orbit-shell .service-conversion-copy h2{
  max-width:760px;
  font-size:clamp(36px,3.55vw,61px)!important;
  line-height:1.03!important;
  letter-spacing:-.045em!important;
}
.service-detail-page .service-orbit-shell .service-conversion-copy p{
  max-width:690px;
}
.service-detail-page .service-orbit-shell .service-conversion-actions{
  justify-content:flex-start!important;
  margin-top:24px;
}
.service-detail-page .service-orbit{
  width:min(560px,100%);
  aspect-ratio:1;
  position:relative;
  margin-inline:auto;
  display:grid;
  place-items:center;
}
.service-detail-page .service-orbit-rings{
  position:absolute;
  inset:7%;
  border:1px solid rgba(242,72,21,.11);
  border-radius:50%;
  background:radial-gradient(circle,rgba(242,72,21,.07),rgba(255,255,255,.015) 44%,transparent 70%);
}
.service-detail-page .service-orbit-rings:before,
.service-detail-page .service-orbit-rings:after,
.service-detail-page .service-orbit-rings i{
  content:"";
  position:absolute;
  border-radius:50%;
  border:1px solid rgba(242,72,21,.13);
}
.service-detail-page .service-orbit-rings:before{inset:12%}
.service-detail-page .service-orbit-rings:after{inset:25%}
.service-detail-page .service-orbit-rings i:nth-child(1){inset:37%;border-color:rgba(242,72,21,.2)}
.service-detail-page .service-orbit-rings i:nth-child(2){inset:5%;border-style:dashed;border-color:rgba(242,72,21,.23)}
.service-detail-page .service-orbit-rings i:nth-child(3){inset:-5%;border-color:rgba(20,21,25,.12)}
.service-detail-page .service-orbit-center{
  position:relative;
  z-index:3;
  width:48%;
  min-height:210px;
  padding:28px 25px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  text-align:center;
  border:1px solid rgba(255,255,255,.09);
  border-radius:38px;
  background:linear-gradient(145deg,#17181b,#090a0d);
  box-shadow:0 26px 65px rgba(0,0,0,.22);
}
.service-detail-page .service-orbit-center small{
  color:#ff7352;
  font-size:7px;
  font-weight:900;
  letter-spacing:.12em;
}
.service-detail-page .service-orbit-center strong{
  display:block;
  margin-top:9px;
  color:#fff;
  font-size:clamp(22px,2vw,32px);
  line-height:1.08;
}
.service-detail-page .service-orbit-center p{
  margin:9px auto 0;
  max-width:260px;
  color:#979ba4;
  font-size:9px;
  line-height:1.55;
}
.service-detail-page .service-orbit-node{
  position:absolute;
  z-index:4;
  width:132px;
  min-height:126px;
  padding:14px 12px;
  border:1px solid #ded5c8;
  border-radius:28px;
  background:rgba(255,253,249,.96);
  box-shadow:0 18px 42px rgba(59,45,31,.08);
  cursor:pointer;
  transition:transform .24s ease,border-color .24s ease,background .24s ease,box-shadow .24s ease;
}
.service-detail-page .service-orbit-node:nth-of-type(1){left:3%;top:9%}
.service-detail-page .service-orbit-node:nth-of-type(2){right:2%;top:11%}
.service-detail-page .service-orbit-node:nth-of-type(3){left:4%;bottom:8%}
.service-detail-page .service-orbit-node:nth-of-type(4){right:3%;bottom:7%}
.service-detail-page .service-orbit-node span{
  display:block;
  color:#f24815;
  font-size:8px;
  font-weight:900;
}
.service-detail-page .service-orbit-node b{
  display:block;
  margin-top:7px;
  color:#17191d;
  font-size:14px;
  line-height:1.12;
}
.service-detail-page .service-orbit-node small{
  display:block;
  margin-top:4px;
  color:#92969d;
  font-size:7px;
}
.service-detail-page .service-orbit-node:hover,
.service-detail-page .service-orbit-node.is-active{
  transform:translateY(-4px) scale(1.025);
  border-color:#f24815;
  background:linear-gradient(145deg,#ff6b00,#f24815 68%,#ff4934);
  box-shadow:0 20px 48px rgba(242,72,21,.2);
}
.service-detail-page .service-orbit-node.is-active span,
.service-detail-page .service-orbit-node.is-active b,
.service-detail-page .service-orbit-node.is-active small,
.service-detail-page .service-orbit-node:hover span,
.service-detail-page .service-orbit-node:hover b,
.service-detail-page .service-orbit-node:hover small{
  color:#fff;
}

/* Keep Connected Services exactly 3 in a row on desktop. */
.service-detail-page .inner-service-related .inner-service-related-grid{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:18px!important;
}
.service-detail-page .inner-service-related .service{
  min-height:350px;
}

/* Mobile */
@media(max-width:1100px){
  .service-detail-page .service-orbit-shell{
    grid-template-columns:1fr!important;
    min-height:0;
  }
  .service-detail-page .service-orbit{
    margin-top:8px;
  }
}
@media(max-width:760px){
  .service-detail-page{--inner-section-space:48px}
  .service-detail-page main>section.inner-hero{
    padding-bottom:46px!important;
  }
  .service-detail-page .service-hero-visual{
    min-height:0;
    padding:24px 20px;
    border-radius:23px;
  }
  .service-detail-page .service-hero-orbit{
    width:210px;
    margin-bottom:19px;
  }
  .service-detail-page .service-hero-icon{
    width:72px;
    height:72px;
    border-radius:21px;
  }
  .service-detail-page .service-hero-icon svg{width:32px;height:32px}
  .service-detail-page .service-hero-visual-copy h2{
    font-size:29px;
  }
  .service-detail-page .service-hero-visual-copy p{
    font-size:11px;
  }
  .service-detail-page .service-explain-flow{
    display:flex;
    overflow-x:auto;
    gap:7px;
    scrollbar-width:none;
    padding-bottom:2px;
  }
  .service-detail-page .service-explain-flow::-webkit-scrollbar{display:none}
  .service-detail-page .service-explain-flow>span{
    flex:0 0 112px;
  }
  .service-detail-page .service-explain-flow>em{
    flex:0 0 auto;
    align-self:center;
  }
  .service-detail-page .service-orbit-shell{
    padding:24px 17px!important;
    border-radius:24px!important;
  }
  .service-detail-page .service-orbit-shell .service-conversion-copy h2{
    font-size:clamp(32px,10vw,44px)!important;
  }
  .service-detail-page .service-orbit{
    width:min(380px,100%);
    min-height:430px;
    aspect-ratio:auto;
  }
  .service-detail-page .service-orbit-rings{
    width:330px;
    height:330px;
    inset:50% auto auto 50%;
    transform:translate(-50%,-50%);
  }
  .service-detail-page .service-orbit-center{
    width:56%;
    min-height:160px;
    padding:20px 16px;
    border-radius:28px;
  }
  .service-detail-page .service-orbit-center strong{
    font-size:22px;
  }
  .service-detail-page .service-orbit-node{
    width:96px;
    min-height:92px;
    padding:10px 8px;
    border-radius:22px;
  }
  .service-detail-page .service-orbit-node b{font-size:11px}
  .service-detail-page .service-orbit-node:nth-of-type(1){left:0;top:4%}
  .service-detail-page .service-orbit-node:nth-of-type(2){right:0;top:6%}
  .service-detail-page .service-orbit-node:nth-of-type(3){left:1%;bottom:4%}
  .service-detail-page .service-orbit-node:nth-of-type(4){right:0;bottom:3%}
  .service-detail-page .inner-service-related .inner-service-related-grid{
    grid-template-columns:1fr!important;
  }
  .service-detail-page .inner-service-related .service{
    min-height:0;
  }
}
@media(prefers-reduced-motion:reduce){
  .service-detail-page .service-orbit-node{
    transition:none!important;
  }
}

/* V8.81 — service-specific storytelling and compact inner-page rhythm */
.service-detail-page .service-value-story{background:#f6f1e9;padding-block:clamp(48px,5.5vw,80px)}
.service-detail-page .svs-layout{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:clamp(24px,4vw,64px);align-items:center}
.service-detail-page .svs-layout>*{min-width:0}
.service-detail-page .svs-intro h2{font-size:clamp(27px,3vw,43px);line-height:1.13;letter-spacing:-.04em;max-width:570px;margin:12px 0 16px;color:#15171b}
.service-detail-page .svs-intro>p{font-size:clamp(13px,1vw,16px);line-height:1.75;color:#646872;max-width:540px}
.service-detail-page .svs-benefits{list-style:none;padding:0;margin:24px 0;display:grid;gap:12px}
.service-detail-page .svs-benefits li{display:flex;align-items:center;gap:11px;color:#22242a;font-size:13px;font-weight:650}
.service-detail-page .svs-benefits li span{display:grid;place-items:center;flex:0 0 23px;width:23px;height:23px;border-radius:50%;color:#f24815;background:#fbe6dc;font-weight:900}
.service-detail-page .svs-link{color:#f24815;text-decoration:none;font-weight:800;font-size:13px}
.service-detail-page .svs-link:hover{text-decoration:underline}
.service-detail-page .svs-comparison{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:stretch}
.service-detail-page .svs-example{min-width:0;border-radius:24px;padding:clamp(16px,2vw,25px);background:#fff;border:1px solid #e5ddd2;overflow:hidden}
.service-detail-page .svs-after{background:linear-gradient(145deg,#19191e,#0d0e11);border-color:#323137;color:#fff}
.service-detail-page .svs-window{display:flex;gap:5px;margin-bottom:15px}.service-detail-page .svs-window i{display:block;height:6px;width:6px;border-radius:50%;background:#b9b4b0}
.service-detail-page .svs-mock{min-height:160px;border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:12px;background:#f2f0ee;border:1px solid #e3dfdb}
.service-detail-page .svs-mock-before{opacity:.86}.service-detail-page .svs-mock-after{background:#232329;border-color:#414047}
.service-detail-page .svs-line{display:block;height:11px;width:100%;border-radius:6px;background:#c5c2c0}.service-detail-page .svs-line.short{width:48%}.service-detail-page .svs-line.medium{width:74%}
.service-detail-page .svs-mock-after .svs-line{background:#66656b}.service-detail-page .svs-mock-after .svs-line.medium{height:15px;background:#f6f3ef}
.service-detail-page .svs-blockrow{display:flex;gap:6px}.service-detail-page .svs-blockrow span{flex:1;height:23px;background:#d2ceca;border-radius:4px}
.service-detail-page .svs-tinyboxes{display:flex;gap:5px}.service-detail-page .svs-tinyboxes i{flex:1;height:29px;background:#d2ceca;border-radius:5px}
.service-detail-page .svs-bar{display:flex;justify-content:space-between}.service-detail-page .svs-bar i:first-child{width:45px;height:8px;border-radius:5px;background:#ff7048}.service-detail-page .svs-bar i:last-child{width:20px;height:8px;border-radius:5px;background:#77767b}
.service-detail-page .svs-action{display:block;width:60%;height:25px;background:linear-gradient(90deg,#ff8a00,#f24815);border-radius:7px}
.service-detail-page .svs-progress{display:flex;gap:5px;margin-top:auto}.service-detail-page .svs-progress i{flex:1;height:5px;border-radius:5px;background:#5c5756}.service-detail-page .svs-progress i:first-child{background:#ff7048}
.service-detail-page .svs-state{display:inline-block;margin-top:17px;font-size:10px;letter-spacing:.09em;text-transform:uppercase;font-weight:900;color:#898b90}.service-detail-page .svs-after .svs-state{color:#ff7952}
.service-detail-page .svs-example h3{font-size:clamp(15px,1.35vw,19px);margin:7px 0 8px;line-height:1.3}.service-detail-page .svs-example p{font-size:12px;line-height:1.65;color:#74777d;margin:0}.service-detail-page .svs-after p{color:#aaaab0}
@media(min-width:761px){
.service-detail-page .inner-service-fit{padding-block:48px!important}
.service-detail-page .service-orbit-shell{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)!important;min-height:0!important;gap:20px!important;padding:clamp(28px,3vw,44px)!important}
.service-detail-page .service-orbit-shell .service-conversion-copy h2{font-size:clamp(27px,2.7vw,42px)!important;line-height:1.13!important}
.service-detail-page .service-orbit{width:min(310px,100%)!important;aspect-ratio:1!important}
.service-detail-page .service-orbit-center{min-height:125px!important;padding:14px!important;border-radius:24px!important;width:55%!important}
.service-detail-page .service-orbit-center strong{font-size:18px!important}
.service-detail-page .service-orbit-center p{font-size:8px!important}
.service-detail-page .service-orbit-node{width:86px!important;min-height:76px!important;padding:8px!important;border-radius:17px!important}
.service-detail-page .service-orbit-node b{font-size:10px!important;margin-top:3px!important}
.service-detail-page .service-orbit-node small{font-size:6px!important}
.service-detail-page .phase3-first .p3-card{min-height:0!important;padding:clamp(18px,2vw,28px)!important}
.service-detail-page .phase3-first .p3-card-top{margin-bottom:15px!important}
}
@media(max-width:1000px){.service-detail-page .svs-layout{grid-template-columns:1fr;gap:26px}.service-detail-page .svs-intro h2{max-width:750px}}
@media(max-width:760px){
.service-detail-page .svs-comparison{gap:9px}.service-detail-page .svs-example{padding:13px;border-radius:16px}.service-detail-page .svs-mock{padding:9px;min-height:125px;gap:8px}.service-detail-page .svs-example p{font-size:11px}
.service-detail-page .inner-service-fit{padding-block:38px!important}.service-detail-page .service-orbit-shell{padding:24px 18px!important;gap:18px!important}.service-detail-page .service-orbit{width:min(290px,100%)!important}.service-detail-page .service-orbit-shell .service-conversion-copy h2{font-size:clamp(26px,7vw,36px)!important}
}
@media(max-width:380px){.service-detail-page .svs-comparison{grid-template-columns:1fr}.service-detail-page .svs-mock{min-height:115px}}
@media(prefers-reduced-motion:reduce){.service-detail-page .svs-example *{transition:none!important}}

/* V8.82 — purposeful service editorials replacing repetitive four-card intros */
.service-detail-page .service-explain-section{padding-block:clamp(48px,5.2vw,78px);background:#f7f3ee;scroll-margin-top:100px}
.service-detail-page .svx-layout{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);align-items:center;gap:clamp(30px,4.1vw,65px)}
.service-detail-page .svx-layout>*{min-width:0}
.service-detail-page .svx-copy h2{font-size:clamp(28px,3vw,43px);line-height:1.14;letter-spacing:-.045em;color:#17181c;margin:10px 0 15px}
.service-detail-page .svx-lead{font-size:clamp(13px,1vw,15.5px);line-height:1.75;color:#666a73;max-width:590px;margin:0 0 27px}
.service-detail-page .svx-steps{list-style:none;margin:0;padding:0;border-top:1px solid #ddd7d0}
.service-detail-page .svx-steps li{display:grid;grid-template-columns:36px minmax(0,1fr);gap:14px;align-items:start;padding:16px 0;border-bottom:1px solid #ddd7d0}
.service-detail-page .svx-num{font-weight:800;color:#f24815;font-size:12px;padding-top:3px;font-variant-numeric:tabular-nums}
.service-detail-page .svx-steps h3{font-size:clamp(14px,1.1vw,16px);font-weight:800;margin:0 0 5px;color:#17181c;line-height:1.4}
.service-detail-page .svx-steps p{font-size:12px;line-height:1.65;color:#72757e;margin:0;max-width:510px}
.service-detail-page .svx-takeaway{display:flex;gap:10px;align-items:flex-start;margin:23px 0 0;font-weight:650;font-size:12px;line-height:1.65;color:#3a3c41}
.service-detail-page .svx-takeaway span{color:#f24815;font-size:19px;line-height:1}
.service-detail-page .svx-art{min-width:0;position:relative;isolation:isolate;background:linear-gradient(145deg,#17171b,#0b0c10);border-radius:28px;min-height:390px;padding:clamp(18px,2.3vw,29px);color:#fdfaf5;overflow:hidden;border:1px solid rgba(255,255,255,.1);box-shadow:0 24px 55px rgba(28,20,18,.17);display:flex;flex-direction:column;justify-content:center;gap:18px}
.service-detail-page .svx-art:before{content:"";position:absolute;width:250px;height:250px;right:-110px;top:-130px;border:1px solid rgba(255,100,60,.27);border-radius:50%;box-shadow:0 0 0 38px rgba(242,72,21,.04),0 0 0 76px rgba(242,72,21,.02);z-index:-1;pointer-events:none}
.service-detail-page .svx-art-head{display:flex;align-items:center;gap:9px;font-size:9px;letter-spacing:.16em;color:#a6a4aa}
.service-detail-page .svx-art-head b{font-weight:800;flex:1;min-width:0}
.service-detail-page .svx-art-light{width:8px;height:8px;border-radius:50%;background:#f24815;flex:none}
.service-detail-page .svx-art-spark{font-size:20px;line-height:1;color:#ff8a00}
.service-detail-page .svx-art *{box-sizing:border-box;min-width:0}
.service-detail-page .svx-app-shell{display:grid;grid-template-columns:minmax(0,1fr) 145px;grid-template-rows:auto 1fr;gap:12px;background:#f7f7f6;color:#1c1c20;border-radius:17px;border:4px solid #38383d;padding:13px;min-height:255px}
.service-detail-page .svx-app-nav{grid-column:1/-1;display:flex;gap:16px;border-bottom:1px solid #e3e0df;padding:3px 3px 11px;font-size:10px;font-weight:700;color:#828087}
.service-detail-page .svx-app-nav span:first-child{color:#f24815}
.service-detail-page .svx-app-content{display:flex;flex-direction:column;justify-content:center;gap:11px;padding:8px}
.service-detail-page .svx-app-content small,.service-detail-page .svx-web-hero small{color:#f24815;font-size:9px;font-weight:900;letter-spacing:.08em}
.service-detail-page .svx-app-content strong{font-size:clamp(16px,1.8vw,25px);letter-spacing:-.04em;line-height:1.15}
.service-detail-page .svx-app-content>span:not(.svx-app-button){font-size:10px;color:#77767d}
.service-detail-page .svx-app-button,.service-detail-page .svx-content-button{align-self:flex-start;padding:10px 12px;border-radius:8px;background:#f24815;color:#fff;font-size:10px;font-weight:800}
.service-detail-page .svx-app-aside{background:#fff;border:1px solid #e5e4e2;border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:8px}
.service-detail-page .svx-app-aside b{font-size:11px;margin-bottom:6px}
.service-detail-page .svx-app-aside i{border-radius:5px;border:1px solid #e6e2df;padding:7px;font-size:9px;color:#89858a;font-style:normal}
.service-detail-page .svx-app-aside em{padding:8px;background:#222226;color:#fff;border-radius:5px;font-size:9px;font-style:normal;text-align:center}
.service-detail-page .svx-note{display:flex;flex-wrap:wrap;gap:8px}.service-detail-page .svx-note span{border:1px solid #3d393b;padding:7px 10px;border-radius:100px;color:#e9dfd9;font-size:9px;font-weight:650}
.service-detail-page .svx-art--brand{background:linear-gradient(150deg,#202024,#0c0c0e)}
.service-detail-page .svx-brand-main{border:1px solid #484149;background:#f6f2eb;color:#121216;border-radius:18px;padding:22px;display:grid;gap:15px}
.service-detail-page .svx-brand-main>small{letter-spacing:.14em;font-size:9px;font-weight:800;color:#8f7a72}
.service-detail-page .svx-brand-main>strong{font-size:clamp(33px,4vw,60px);line-height:.95;letter-spacing:-.075em}
.service-detail-page .svx-brand-swatches{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.service-detail-page .svx-brand-swatches i{height:44px;border-radius:10px}.service-detail-page .svx-brand-swatches i:nth-child(1){background:#17171b}.service-detail-page .svx-brand-swatches i:nth-child(2){background:#f24815}.service-detail-page .svx-brand-swatches i:nth-child(3){background:#ff8a00}.service-detail-page .svx-brand-swatches i:nth-child(4){background:#dfcebc}
.service-detail-page .svx-brand-spec{display:flex;align-items:center;gap:17px;border-top:1px solid #d8ccc3;padding-top:13px}.service-detail-page .svx-brand-spec>span{font-size:30px;font-weight:800;letter-spacing:-.08em}.service-detail-page .svx-brand-spec p{font-size:11px;color:#55545a;line-height:1.5;margin:0}.service-detail-page .svx-brand-spec b{font-size:9px;font-weight:600;color:#807981}
.service-detail-page .svx-brand-apps{display:flex;gap:8px;flex-wrap:wrap}.service-detail-page .svx-brand-apps span{flex:1;text-align:center;white-space:nowrap;border:1px solid #535053;border-radius:10px;padding:10px;font-size:10px;color:#e7e2dc}
.service-detail-page .svx-search-bar{display:flex;align-items:center;gap:12px;padding:14px 17px;border:1px solid #5b4a47;background:#262327;border-radius:100px;font-size:12px}.service-detail-page .svx-search-bar span:first-child{font-size:25px;color:#ff8a00;line-height:0}.service-detail-page .svx-search-bar span:last-child{margin-left:auto;color:#ff8a00}
.service-detail-page .svx-serp{background:#fcfaf6;border-radius:18px;padding:clamp(18px,2vw,27px);color:#1b1b20;min-height:170px;display:flex;flex-direction:column;gap:12px}.service-detail-page .svx-serp small{color:#60646c;font-size:10px}.service-detail-page .svx-serp strong{font-size:clamp(17px,1.8vw,23px);letter-spacing:-.04em;color:#174992}.service-detail-page .svx-serp p{margin:0;line-height:1.6;color:#585e66;font-size:11px;max-width:370px}
.service-detail-page .svx-search-flow,.service-detail-page .svx-crm-footer,.service-detail-page .svx-content-flow{display:flex;align-items:center;gap:9px;justify-content:center;flex-wrap:wrap}.service-detail-page .svx-search-flow span,.service-detail-page .svx-crm-footer span{border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:8px 12px;color:#e8e2dd;font-size:10px}.service-detail-page .svx-search-flow b,.service-detail-page .svx-crm-footer b,.service-detail-page .svx-content-flow b{font-size:14px;color:#fa6c43}
.service-detail-page .svx-art--content{background:linear-gradient(145deg,#30241f,#0e0d0d)}
.service-detail-page .svx-content-page{padding:clamp(20px,3vw,33px);background:#fdfaf6;color:#16171a;border-radius:19px;display:flex;flex-direction:column;gap:12px;max-width:420px;width:100%;margin:auto}
.service-detail-page .svx-content-page small{font-size:10px;font-weight:800;color:#f24815;letter-spacing:.1em}.service-detail-page .svx-content-page h3{font-size:clamp(24px,3vw,38px);letter-spacing:-.06em;margin:0}.service-detail-page .svx-content-page p{color:#68666a;font-size:12px;line-height:1.5;margin:0}.service-detail-page .svx-content-bars{display:flex;gap:7px}.service-detail-page .svx-content-bars i{height:6px;flex:1;background:#dbd5cd;border-radius:6px}.service-detail-page .svx-content-bars i:first-child{background:#f24815}
.service-detail-page .svx-content-proof{border-left:3px solid #f24815;padding:12px;background:#f1ece5;color:#5b5552;font-size:11px}.service-detail-page .svx-content-flow{font-size:10px;color:#f3e5df}
.service-detail-page .svx-web-desktop{width:89%;min-width:0;margin:0 auto 0 0;padding:13px;background:#f8f6f3;border:4px solid #494247;border-radius:16px;color:#1b1c1d;min-height:240px;display:flex;flex-direction:column;gap:13px}
.service-detail-page .svx-web-nav{display:flex;justify-content:space-between;gap:15px;font-size:10px;border-bottom:1px solid #e2ded7;padding-bottom:9px}.service-detail-page .svx-web-nav span:first-child{color:#ef4922;font-weight:900}.service-detail-page .svx-web-nav span:last-child{color:#777;white-space:nowrap}
.service-detail-page .svx-web-hero{display:flex;flex-direction:column;gap:10px}.service-detail-page .svx-web-hero strong{font-size:clamp(15px,2vw,26px);letter-spacing:-.04em}.service-detail-page .svx-web-hero>span{font-size:10px;color:#6b696e}.service-detail-page .svx-web-hero em{align-self:flex-start;font-size:10px;background:#f24815;color:#fff;border-radius:7px;padding:9px 12px;font-weight:800;font-style:normal}.service-detail-page .svx-web-panels{display:flex;gap:6px;margin-top:auto}.service-detail-page .svx-web-panels i{height:26px;flex:1;border-radius:6px;background:#e7dfd6}
.service-detail-page .svx-web-phone{position:absolute;right:18px;bottom:33px;width:110px;border:5px solid #474145;border-radius:19px;background:#fdfbf6;color:#19191b;padding:14px 9px;min-height:175px;display:flex;flex-direction:column;gap:8px;box-shadow:0 11px 29px rgba(0,0,0,.34)}.service-detail-page .svx-web-phone span{font-size:8px;color:#f24815;font-weight:850}.service-detail-page .svx-web-phone b{font-size:12px;letter-spacing:-.03em}.service-detail-page .svx-web-phone i{height:9px;border-radius:3px;background:#e4ddd4}.service-detail-page .svx-web-phone i:nth-last-of-type(1){width:72%}.service-detail-page .svx-web-phone em{padding:6px;color:#fff;background:#f24815;border-radius:4px;font-size:8px;font-weight:800;font-style:normal;margin-top:auto;text-align:center}
.service-detail-page .svx-crm-bar{display:flex;gap:18px;padding:12px 14px;background:#242428;border:1px solid #454044;border-radius:11px;flex-wrap:wrap}.service-detail-page .svx-crm-bar span{font-size:10px;color:#c7c2c5}.service-detail-page .svx-crm-bar span:first-child{color:#ff875b;font-weight:800}
.service-detail-page .svx-crm-kanban{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}.service-detail-page .svx-crm-kanban>div{border:1px solid #48434a;border-radius:12px;padding:13px;background:#242329;display:flex;flex-direction:column;gap:13px;min-height:155px}.service-detail-page .svx-crm-kanban small{font-size:8px;color:#ff875b;font-weight:900;letter-spacing:.09em}.service-detail-page .svx-crm-kanban strong{font-size:clamp(10px,1.1vw,14px);line-height:1.35}.service-detail-page .svx-crm-kanban p{margin:auto 0 0;font-size:10px;color:#9d969b;line-height:1.4}
/* Better visual rhythm: editorial, comparison/proof, lightweight process, compact CTA. */
.service-detail-page .inner-service-process .my-process-card{background:transparent!important;box-shadow:none!important;border-radius:0!important;border:0!important;border-left:1px solid #ddd4c7!important;padding:12px 15px!important;min-width:0!important;min-height:0!important}
.service-detail-page .inner-service-process .my-process-card .process-ui{display:none!important}
.service-detail-page .inner-service-process .my-process-card h3{font-size:clamp(13px,1.15vw,17px)!important}
.service-detail-page .inner-service-process .my-process-card p{font-size:11px!important;line-height:1.65!important}
.service-detail-page .inner-service-process .my-process-grid{gap:8px!important}
.service-detail-page .inner-service-fit{padding-block:34px!important}
.service-detail-page .service-orbit-shell{min-height:0!important;padding:clamp(24px,2.6vw,37px)!important;gap:12px!important;grid-template-columns:minmax(0,1.15fr) minmax(0,.5fr)!important;align-items:center!important}
.service-detail-page .service-orbit-shell .service-conversion-copy h2{font-size:clamp(23px,2.6vw,35px)!important;line-height:1.17!important;max-width:710px!important}
.service-detail-page .service-orbit-shell .service-conversion-copy p{font-size:clamp(12px,1vw,14px)!important;line-height:1.6!important;max-width:710px!important}
.service-detail-page .service-orbit-shell .service-orbit{width:min(230px,100%)!important;aspect-ratio:1!important;margin-inline:auto!important;min-height:0!important}
.service-detail-page .service-orbit-shell .service-orbit-node{width:70px!important;min-height:62px!important;padding:5px!important;border-radius:13px!important}
.service-detail-page .service-orbit-shell .service-orbit-node b{font-size:9px!important}.service-detail-page .service-orbit-shell .service-orbit-node small{font-size:6px!important}
.service-detail-page .service-orbit-shell .service-orbit-center{width:55%!important;min-height:95px!important;padding:10px!important;border-radius:15px!important}.service-detail-page .service-orbit-shell .service-orbit-center strong{font-size:14px!important}
.service-detail-page .service-orbit-shell .service-conversion-actions .btn{min-height:42px!important;font-size:12px!important}
/* Vary visual treatment of storytelling mockups by service */
.service-detail-page .service-value-story--branding .svs-mock-after{background:linear-gradient(145deg,#f24815 0 25%,#ff8a00 25% 50%,#17171b 50% 75%,#f2eee8 75% 100%)}
.service-detail-page .service-value-story--branding .svs-mock-after>*{opacity:.15}
.service-detail-page .service-value-story--crm .svs-mock-after .svs-progress i{background:#ff7048}
@media(max-width:1080px){.service-detail-page .svx-layout{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:27px}.service-detail-page .svx-art{min-height:340px;padding:20px}.service-detail-page .svx-app-shell{grid-template-columns:minmax(0,1fr) 105px}.service-detail-page .svx-app-aside{padding:8px}.service-detail-page .svx-steps li{padding:12px 0}.service-detail-page .svx-lead{margin-bottom:17px}}
@media(max-width:860px){.service-detail-page .svx-layout{grid-template-columns:1fr;gap:22px}.service-detail-page .svx-art{min-height:300px;max-width:700px;width:100%;margin-inline:auto}.service-detail-page .service-orbit-shell{grid-template-columns:1fr!important}.service-detail-page .service-orbit-shell .service-orbit{display:none!important}.service-detail-page .svx-copy h2{max-width:720px}.service-detail-page .svx-lead{max-width:730px}}
@media(max-width:600px){.service-detail-page .service-explain-section{padding-block:42px;scroll-margin-top:82px}.service-detail-page .svx-layout{gap:18px}.service-detail-page .svx-copy h2{font-size:clamp(26px,7vw,33px)}.service-detail-page .svx-steps li{grid-template-columns:26px minmax(0,1fr);gap:9px;padding:12px 0}.service-detail-page .svx-steps p{font-size:11px}.service-detail-page .svx-art{padding:15px;border-radius:20px;min-height:270px}.service-detail-page .svx-app-shell{grid-template-columns:1fr;min-height:0}.service-detail-page .svx-app-aside{display:none}.service-detail-page .svx-art-head{font-size:8px}.service-detail-page .svx-brand-main{padding:18px}.service-detail-page .svx-brand-swatches i{height:35px}.service-detail-page .svx-web-phone{right:12px;bottom:19px;width:87px;min-height:133px;padding:9px 7px}.service-detail-page .svx-web-desktop{min-height:220px}.service-detail-page .svx-crm-kanban{grid-template-columns:1fr}.service-detail-page .svx-crm-kanban>div{min-height:0;gap:6px}.service-detail-page .svx-crm-kanban p{margin:0}.service-detail-page .svx-search-flow span,.service-detail-page .svx-crm-footer span{padding:6px 8px;font-size:9px}.service-detail-page .inner-service-process .my-process-grid{grid-template-columns:1fr!important}.service-detail-page .inner-service-process .my-process-card{padding:10px 14px!important}.service-detail-page .inner-service-fit{padding-block:29px!important}.service-detail-page .service-orbit-shell{padding:22px 17px!important}.service-detail-page .service-orbit-shell .service-conversion-copy h2{font-size:clamp(22px,6.8vw,30px)!important}}
@media(max-width:375px){.service-detail-page .svx-brand-apps span{font-size:9px;padding:8px 4px}.service-detail-page .svx-web-nav span:last-child{font-size:8px}.service-detail-page .svx-web-phone{width:80px}.service-detail-page .svx-web-desktop{width:94%}}
@media(prefers-reduced-motion:reduce){.service-detail-page .svx-art *{animation:none!important;transition:none!important}}

/* Specificity safeguard: override legacy high-padding CTA and section variants. */
body.service-detail-page section.service-conversion-cta.inner-service-fit{padding:25px 0!important;margin:0!important}
body.service-detail-page section.service-explain-section{padding:clamp(40px,4vw,56px) 0!important}
@media(max-width:600px){body.service-detail-page section.service-conversion-cta.inner-service-fit{padding:22px 0!important}body.service-detail-page section.service-explain-section{padding:40px 0!important}}

/* Specificity safeguard: override legacy high-padding CTA and section variants. */
body.service-detail-page section.service-conversion-cta.inner-service-fit{padding:25px 0!important;margin:0!important}
body.service-detail-page section.service-explain-section{padding:clamp(40px,4vw,56px) 0!important}
@media(max-width:600px){body.service-detail-page section.service-conversion-cta.inner-service-fit{padding:22px 0!important}body.service-detail-page section.service-explain-section{padding:40px 0!important}}

/* V8.83: Make all four process stages legible, especially the final stage. */
body.service-detail-page .inner-service-process .my-process-grid{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:clamp(10px,1.4vw,20px)!important;overflow:visible!important}
body.service-detail-page .inner-service-process .my-process-card{box-sizing:border-box!important;min-width:0!important;width:auto!important;flex:none!important;opacity:1!important;transform:none!important;overflow:visible!important;padding:clamp(15px,1.7vw,22px)!important;border:1px solid #e1d8cc!important;border-radius:18px!important;background:#fffefa!important;box-shadow:0 10px 28px rgba(20,18,15,.045)!important;color:#16181c!important}
body.service-detail-page .inner-service-process .my-process-card.my-process-final{background:#fff3eb!important;border-color:#ffb69c!important}
body.service-detail-page .inner-service-process .my-process-card h3{color:#1b1b20!important;font-size:clamp(15px,1.28vw,18px)!important;line-height:1.35!important;overflow-wrap:anywhere}
body.service-detail-page .inner-service-process .my-process-card>p{color:#62636b!important;font-size:clamp(11px,.88vw,13px)!important;line-height:1.65!important}
body.service-detail-page .inner-service-process .my-process-card .my-process-card-top b{color:#d7411d!important;font-size:10px!important;line-height:1.5!important;overflow-wrap:anywhere}
body.service-detail-page .inner-service-process .my-process-card .my-process-icon{color:#f24815!important;background:#ffebe2!important;width:42px!important;height:42px!important;flex:none}
body.service-detail-page .inner-service-process .my-process-card .my-process-icon svg{width:21px!important;height:21px!important;fill:none!important;stroke:currentColor!important}
body.service-detail-page .inner-service-process .my-process-card:before{display:none!important}

/* Replaces overlapping orbital placement with a premium readable route panel. */
body.service-detail-page .inner-service-fit .service-orbit{width:100%!important;max-width:none!important;height:auto!important;min-height:0!important;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:11px!important;align-content:center!important;overflow:visible!important;position:relative!important;transform:none!important;padding:4px!important}
body.service-detail-page .inner-service-fit .service-orbit-rings{display:none!important}
body.service-detail-page .inner-service-fit .service-orbit-center{position:relative!important;inset:auto!important;left:auto!important;top:auto!important;transform:none!important;grid-column:1/-1!important;order:0!important;width:auto!important;min-height:155px!important;height:auto!important;max-width:none!important;border-radius:20px!important;padding:22px!important;display:flex!important;flex-direction:column!important;align-items:flex-start!important;justify-content:center!important;text-align:left!important;overflow:visible!important;z-index:1!important}
body.service-detail-page .inner-service-fit .service-orbit-center strong{font-size:clamp(22px,2.3vw,30px)!important;line-height:1.2!important;max-width:100%!important;overflow-wrap:anywhere!important}
body.service-detail-page .inner-service-fit .service-orbit-center p{font-size:clamp(12px,1vw,14px)!important;line-height:1.6!important;max-width:100%!important;overflow-wrap:anywhere!important}
body.service-detail-page .inner-service-fit .service-orbit-node{position:relative!important;inset:auto!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;transform:none!important;width:100%!important;min-width:0!important;min-height:94px!important;height:auto!important;max-width:none!important;order:1!important;display:flex!important;flex-direction:column!important;justify-content:center!important;align-items:flex-start!important;gap:3px!important;padding:15px!important;text-align:left!important;border-radius:16px!important;overflow:visible!important;box-sizing:border-box!important}
body.service-detail-page .inner-service-fit .service-orbit-node:hover{transform:none!important}
body.service-detail-page .inner-service-fit .service-orbit-node b{font-size:clamp(13px,1.1vw,16px)!important;line-height:1.25!important;max-width:100%!important;overflow-wrap:anywhere!important}
body.service-detail-page .inner-service-fit .service-orbit-node small{font-size:10px!important;line-height:1.45!important;color:inherit!important;opacity:.75!important}
body.service-detail-page .inner-service-fit .service-orbit-node span{font-size:10px!important}
body.service-detail-page .inner-service-fit .service-orbit-shell{align-items:center!important;overflow:hidden!important}

/* Use the Get a Quote page form's original component, not a second visual design. */
body.service-detail-page .inner-service-quote--shared{background:#f7f3ee!important;padding:clamp(38px,4vw,62px) 0!important}
body.service-detail-page .inner-service-quote--shared .quote-shell{background:linear-gradient(140deg,#151617 0%,#111214 65%,#25130f 100%)!important;color:#fff!important;border:0!important;box-shadow:0 28px 80px rgba(55,40,25,.18)!important;border-radius:30px!important;grid-template-columns:.36fr .64fr!important;gap:34px!important;padding:34px!important;max-width:1200px!important;display:grid!important;align-items:start!important}
body.service-detail-page .inner-service-quote--shared .quote-shell>*{min-width:0!important}
body.service-detail-page .inner-service-quote--shared .quote-intro h2{font-size:clamp(32px,3.1vw,44px)!important;line-height:1.08!important;letter-spacing:-.045em!important;color:#fff!important;margin:14px 0!important}
body.service-detail-page .inner-service-quote--shared .quote-intro p{font-size:13.5px!important;line-height:1.72!important;color:#a8aab2!important}
body.service-detail-page .inner-service-quote--shared .quote-form{min-width:0!important;width:100%!important}
@media(max-width:1100px){body.service-detail-page .inner-service-process .my-process-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}body.service-detail-page .inner-service-quote--shared .quote-shell{grid-template-columns:1fr!important}}
@media(max-width:700px){body.service-detail-page .inner-service-process .my-process-grid{grid-template-columns:1fr!important}body.service-detail-page .inner-service-fit .service-orbit{grid-template-columns:repeat(2,minmax(0,1fr))!important}body.service-detail-page .inner-service-fit .service-orbit-node{min-height:84px!important;padding:12px!important}body.service-detail-page .inner-service-fit .service-orbit-center{min-height:135px!important;padding:17px!important}body.service-detail-page .inner-service-quote--shared .quote-shell{padding:24px 18px!important;border-radius:23px!important;gap:25px!important}}
@media(max-width:360px){body.service-detail-page .inner-service-fit .service-orbit{grid-template-columns:1fr!important}}

/* V8.87 — restore the circular CTA route on inner service pages,
   using the same balanced orbit language as the About page. */
body.service-detail-page .inner-service-fit{
  background:
    radial-gradient(circle at 86% 16%,rgba(242,72,21,.08),transparent 24%),
    radial-gradient(circle at 90% 84%,rgba(242,72,21,.05),transparent 18%),
    #f5f0e8!important;
}
body.service-detail-page .inner-service-fit .service-orbit-shell{
  grid-template-columns:minmax(0,1.04fr) minmax(300px,.78fr)!important;
  align-items:center!important;
  gap:clamp(16px,2.2vw,32px)!important;
  min-height:0!important;
  overflow:visible!important;
  padding:clamp(24px,2.4vw,34px)!important;
}
body.service-detail-page .inner-service-fit .service-orbit{
  position:relative!important;
  width:min(355px,100%)!important;
  aspect-ratio:1!important;
  height:auto!important;
  min-height:0!important;
  display:grid!important;
  place-items:center!important;
  margin-inline:auto!important;
  padding:0!important;
  overflow:visible!important;
  border-radius:50%!important;
  background:
    radial-gradient(circle at center,rgba(242,72,21,.08),transparent 36%),
    linear-gradient(145deg,#fff,#f6f1e8)!important;
  border:1px solid #ded6ca!important;
  box-shadow:0 24px 70px rgba(44,34,22,.09)!important;
  isolation:isolate!important;
}
body.service-detail-page .inner-service-fit .service-orbit::before{
  content:"";
  position:absolute;
  inset:22px;
  border-radius:50%;
  border:1px dashed rgba(242,72,21,.28);
  z-index:0;
}
body.service-detail-page .inner-service-fit .service-orbit::after{
  content:"";
  position:absolute;
  inset:70px;
  border-radius:50%;
  border:1px solid rgba(18,18,20,.07);
  z-index:0;
}
body.service-detail-page .inner-service-fit .service-orbit-rings{
  display:block!important;
  position:absolute!important;
  inset:0!important;
  width:auto!important;
  height:auto!important;
  border:0!important;
  background:none!important;
  z-index:0!important;
}
body.service-detail-page .inner-service-fit .service-orbit-rings::before,
body.service-detail-page .inner-service-fit .service-orbit-rings::after{
  display:none!important;
  content:none!important;
}
body.service-detail-page .inner-service-fit .service-orbit-rings i{
  position:absolute!important;
  border-radius:50%!important;
  border:1px solid rgba(242,72,21,.08)!important;
  animation:none!important;
}
body.service-detail-page .inner-service-fit .service-orbit-rings i:nth-child(1){inset:44px!important}
body.service-detail-page .inner-service-fit .service-orbit-rings i:nth-child(2){inset:92px!important}
body.service-detail-page .inner-service-fit .service-orbit-rings i:nth-child(3){inset:124px!important}
body.service-detail-page .inner-service-fit .service-orbit-center{
  position:absolute!important;
  z-index:3!important;
  inset:104px 66px!important;
  width:auto!important;
  min-height:0!important;
  height:auto!important;
  border-radius:30px!important;
  padding:16px 15px!important;
  display:grid!important;
  place-items:center!important;
  align-content:center!important;
  text-align:center!important;
  background:#0b0c0f!important;
  color:#fff!important;
  border:1px solid rgba(255,255,255,.09)!important;
  box-shadow:0 18px 45px rgba(0,0,0,.16)!important;
}
body.service-detail-page .inner-service-fit .service-orbit-center small{
  font-size:8px!important;
  font-weight:800!important;
  letter-spacing:.12em!important;
  text-transform:uppercase!important;
  color:#ff7650!important;
  margin-bottom:6px!important;
}
body.service-detail-page .inner-service-fit .service-orbit-center strong{
  font-size:clamp(16px,1.6vw,21px)!important;
  line-height:1.14!important;
  margin:0!important;
  max-width:100%!important;
}
body.service-detail-page .inner-service-fit .service-orbit-center p{
  margin:8px 0 0!important;
  font-size:10px!important;
  line-height:1.55!important;
  color:#a7aab2!important;
  max-width:100%!important;
}
body.service-detail-page .inner-service-fit .service-orbit-node{
  position:absolute!important;
  z-index:5!important;
  width:88px!important;
  min-width:88px!important;
  min-height:88px!important;
  height:88px!important;
  padding:10px 8px!important;
  border-radius:22px!important;
  border:1px solid #ded6ca!important;
  background:rgba(255,255,255,.94)!important;
  color:#16171a!important;
  display:grid!important;
  place-items:center!important;
  align-content:center!important;
  gap:2px!important;
  text-align:center!important;
  box-shadow:0 12px 30px rgba(35,28,20,.08)!important;
  cursor:pointer!important;
  transition:transform .28s ease,border-color .28s ease,background .28s ease,color .28s ease,box-shadow .28s ease!important;
}
body.service-detail-page .inner-service-fit .service-orbit-node:nth-of-type(1){left:8px!important;top:38px!important}
body.service-detail-page .inner-service-fit .service-orbit-node:nth-of-type(2){right:8px!important;top:38px!important}
body.service-detail-page .inner-service-fit .service-orbit-node:nth-of-type(3){left:8px!important;bottom:38px!important}
body.service-detail-page .inner-service-fit .service-orbit-node:nth-of-type(4){right:8px!important;bottom:38px!important}
body.service-detail-page .inner-service-fit .service-orbit-node span{
  font-size:8px!important;
  font-weight:900!important;
  color:#f24815!important;
}
body.service-detail-page .inner-service-fit .service-orbit-node b{
  font-size:11px!important;
  line-height:1.1!important;
  margin:1px 0 0!important;
  color:#16171a!important;
}
body.service-detail-page .inner-service-fit .service-orbit-node small{
  font-size:8px!important;
  line-height:1.3!important;
  color:#8e9199!important;
  margin:0!important;
  opacity:1!important;
}
body.service-detail-page .inner-service-fit .service-orbit-node:hover,
body.service-detail-page .inner-service-fit .service-orbit-node.is-active{
  transform:translateY(-4px) scale(1.035)!important;
  background:linear-gradient(145deg,#ff6b24,#f24815)!important;
  color:#fff!important;
  border-color:transparent!important;
  box-shadow:0 18px 38px rgba(242,72,21,.22)!important;
}
body.service-detail-page .inner-service-fit .service-orbit-node:hover span,
body.service-detail-page .inner-service-fit .service-orbit-node:hover b,
body.service-detail-page .inner-service-fit .service-orbit-node:hover small,
body.service-detail-page .inner-service-fit .service-orbit-node.is-active span,
body.service-detail-page .inner-service-fit .service-orbit-node.is-active b,
body.service-detail-page .inner-service-fit .service-orbit-node.is-active small{
  color:#fff!important;
}
@media (max-width:1100px){
  body.service-detail-page .inner-service-fit .service-orbit-shell{
    grid-template-columns:minmax(0,1fr) minmax(270px,.7fr)!important;
  }
  body.service-detail-page .inner-service-fit .service-orbit{
    width:min(320px,100%)!important;
  }
  body.service-detail-page .inner-service-fit .service-orbit-center{
    inset:92px 58px!important;
  }
  body.service-detail-page .inner-service-fit .service-orbit-node{
    width:78px!important;
    min-width:78px!important;
    min-height:78px!important;
    height:78px!important;
    border-radius:20px!important;
  }
  body.service-detail-page .inner-service-fit .service-orbit-node:nth-of-type(1),
  body.service-detail-page .inner-service-fit .service-orbit-node:nth-of-type(2){top:34px!important}
  body.service-detail-page .inner-service-fit .service-orbit-node:nth-of-type(3),
  body.service-detail-page .inner-service-fit .service-orbit-node:nth-of-type(4){bottom:34px!important}
}
@media (max-width:860px){
  body.service-detail-page .inner-service-fit .service-orbit-shell{
    grid-template-columns:1fr!important;
  }
  body.service-detail-page .inner-service-fit .service-orbit{
    width:min(340px,100%)!important;
    order:2!important;
    margin-top:8px!important;
  }
}
@media (max-width:560px){
  body.service-detail-page .inner-service-fit .service-orbit{
    width:min(290px,100%)!important;
  }
  body.service-detail-page .inner-service-fit .service-orbit::before{inset:18px!important}
  body.service-detail-page .inner-service-fit .service-orbit::after{inset:58px!important}
  body.service-detail-page .inner-service-fit .service-orbit-rings i:nth-child(1){inset:36px!important}
  body.service-detail-page .inner-service-fit .service-orbit-rings i:nth-child(2){inset:72px!important}
  body.service-detail-page .inner-service-fit .service-orbit-rings i:nth-child(3){inset:98px!important}
  body.service-detail-page .inner-service-fit .service-orbit-center{
    inset:82px 52px!important;
    border-radius:24px!important;
    padding:14px!important;
  }
  body.service-detail-page .inner-service-fit .service-orbit-center strong{font-size:15px!important}
  body.service-detail-page .inner-service-fit .service-orbit-center p{font-size:9px!important}
  body.service-detail-page .inner-service-fit .service-orbit-node{
    width:70px!important;
    min-width:70px!important;
    min-height:70px!important;
    height:70px!important;
    border-radius:18px!important;
    padding:8px 6px!important;
  }
  body.service-detail-page .inner-service-fit .service-orbit-node:nth-of-type(1),
  body.service-detail-page .inner-service-fit .service-orbit-node:nth-of-type(2){top:30px!important}
  body.service-detail-page .inner-service-fit .service-orbit-node:nth-of-type(3),
  body.service-detail-page .inner-service-fit .service-orbit-node:nth-of-type(4){bottom:30px!important}
  body.service-detail-page .inner-service-fit .service-orbit-node b{font-size:10px!important}
  body.service-detail-page .inner-service-fit .service-orbit-node small{font-size:7px!important}
}
@media (max-width:390px){
  body.service-detail-page .inner-service-fit .service-orbit{
    width:min(255px,100%)!important;
  }
  body.service-detail-page .inner-service-fit .service-orbit::before{inset:14px!important}
  body.service-detail-page .inner-service-fit .service-orbit::after{inset:48px!important}
  body.service-detail-page .inner-service-fit .service-orbit-rings i:nth-child(1){inset:28px!important}
  body.service-detail-page .inner-service-fit .service-orbit-rings i:nth-child(2){inset:58px!important}
  body.service-detail-page .inner-service-fit .service-orbit-rings i:nth-child(3){inset:80px!important}
  body.service-detail-page .inner-service-fit .service-orbit-center{
    inset:72px 44px!important;
  }
  body.service-detail-page .inner-service-fit .service-orbit-node{
    width:62px!important;
    min-width:62px!important;
    min-height:62px!important;
    height:62px!important;
    border-radius:16px!important;
  }
  body.service-detail-page .inner-service-fit .service-orbit-node:nth-of-type(1),
  body.service-detail-page .inner-service-fit .service-orbit-node:nth-of-type(2){top:24px!important}
  body.service-detail-page .inner-service-fit .service-orbit-node:nth-of-type(3),
  body.service-detail-page .inner-service-fit .service-orbit-node:nth-of-type(4){bottom:24px!important}
  body.service-detail-page .inner-service-fit .service-orbit-node span{font-size:7px!important}
  body.service-detail-page .inner-service-fit .service-orbit-node b{font-size:9px!important}
  body.service-detail-page .inner-service-fit .service-orbit-node small{display:none!important}
}

/* V8.88 — keep CTA orbit/decorations contained inside the dark CTA shell. */
body.service-detail-page .inner-service-fit{
  overflow:hidden!important;
}
body.service-detail-page .inner-service-fit .service-orbit-shell{
  overflow:hidden!important;
}


/* ================================================================
   V9.01 — compact inner-service hero visual
   Match the tighter article-side card scale without changing content.
   ================================================================ */
@media (min-width:901px){
  .service-detail-page .inner-hero-grid{
    grid-template-columns:minmax(0,1fr) 340px!important;
    gap:54px!important;
  }
  .service-detail-page .service-hero-visual{
    width:100%!important;
    max-width:340px!important;
    min-height:420px!important;
    justify-self:end!important;
    padding:27px!important;
    border-radius:25px!important;
  }
  .service-detail-page .service-hero-orbit{
    width:190px!important;
    margin:0 auto 20px!important;
  }
  .service-detail-page .service-hero-icon{
    width:76px!important;
    height:76px!important;
    border-radius:22px!important;
  }
  .service-detail-page .service-hero-icon svg{
    width:34px!important;
    height:34px!important;
  }
  .service-detail-page .service-hero-visual-copy>small{
    font-size:8px!important;
  }
  .service-detail-page .service-hero-visual-copy h2{
    margin:9px 0 10px!important;
    font-size:clamp(25px,2vw,32px)!important;
    line-height:1.08!important;
  }
  .service-detail-page .service-hero-visual-copy p{
    font-size:11px!important;
    line-height:1.65!important;
  }
  .service-detail-page .service-hero-tags{
    margin-top:14px!important;
    gap:6px!important;
  }
  .service-detail-page .service-hero-tags span{
    padding:6px 8px!important;
    font-size:6.5px!important;
  }
}
@media (min-width:901px) and (max-width:1100px){
  .service-detail-page .inner-hero-grid{
    grid-template-columns:minmax(0,1fr) 315px!important;
    gap:34px!important;
  }
  .service-detail-page .service-hero-visual{
    max-width:315px!important;
    min-height:395px!important;
    padding:24px!important;
  }
  .service-detail-page .service-hero-orbit{
    width:170px!important;
    margin-bottom:17px!important;
  }
}
@media (max-width:900px){
  .service-detail-page .service-hero-visual{
    width:100%!important;
    max-width:420px!important;
    margin-inline:auto!important;
  }
}

/* V9.08 Mobile foundation | Page-gutter + type consistency */
@media (max-width:767px){
  html{-webkit-text-size-adjust:100%;text-size-adjust:100%;}
  body{font-family:Montserrat,Arial,sans-serif!important;}
  body h1,body h2,body h3,body h4,body h5,body h6,
  body p,body li,body blockquote,body label,body button,
  body input,body select,body textarea,body .btn,body .lead,
  body .kicker,body .section-title{font-family:Montserrat,Arial,sans-serif!important;}
  /* Exactly 15px minimum side gutters, without shifting full-width backgrounds. */
  body .container{width:calc(100% - 30px)!important;max-width:1200px;margin-left:auto!important;margin-right:auto!important;}
  body .container .container{width:100%!important;}
  main,header,footer,section,article{min-width:0;}
  main img,main video,main iframe{max-width:100%;height:auto;}
  .service-detail-page .inner-hero-grid > *,
  .service-detail-page .service-hero-visual,
  .service-detail-page .service-detail-copy,
  .service-detail-page .service-explain-section .container > *{min-width:0;}
}
@media(max-width:360px){
  body .container{width:calc(100% - 30px)!important;}
}

/* V9.09 MOBILE RESPONSIVE + TESTIMONIAL NAV | additive and rollback-safe */
@media (max-width:900px){
  body .article-hero-grid,body .article-layout,body .blog-card-grid,body .related-post-grid{
    display:grid;grid-template-columns:minmax(0,1fr)!important;max-width:100%;min-width:0;
  }
  body .article-hero-grid > *,body .article-layout > *,body .blog-card-grid > *,
  body .related-post-grid > *,body .article-content,body .article-offer-card,
  body .article-sticky,body .blog-card,body .article-feature-grid > *{
    min-width:0!important;max-width:100%;
  }
  body .article-hero-grid,body .article-layout{column-gap:24px!important}
  body .article-feature-grid,body .article-visual-stack{
    grid-template-columns:minmax(0,1fr)!important;
  }
  body .article-inline-cta{grid-template-columns:minmax(0,1fr)!important;min-width:0}
  body .article-inline-cta > *{min-width:0;max-width:100%}
  body .article-inline-cta .btn{grid-column:1!important;max-width:100%;white-space:normal!important}
  body .article-sticky{position:static!important}
  body .article-hero .article-deal-badges{flex-wrap:wrap!important;min-width:0;max-width:100%}
  body .article-hero .article-deal-badges span{max-width:100%;white-space:normal;overflow-wrap:anywhere}
  body .service-detail-page .inner-hero-grid,
  body.service-detail-page .inner-hero-grid{grid-template-columns:minmax(0,1fr)!important;min-width:0!important}
}
@media (max-width:767px){
  /* Continue V9.08 minimum 15px gutters; no body padding or boxed backgrounds. */
  html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
  body .container{width:calc(100% - 30px)!important;max-width:1200px;margin-inline:auto!important}
  body .container .container{width:100%!important}
  body .article-hero,body .article-body-section,body .related-posts-section,
  body .blog-hero,body .blog-page-body main,body .article-page-body main{max-width:100%;min-width:0}
  body .article-hero-grid,body .article-layout{width:100%!important;min-width:0!important;max-width:100%!important}
  body .article-hero-grid{gap:22px!important;padding-top:26px!important}
  body .article-layout{gap:28px!important}
  body .article-hero h1{font-size:clamp(31px,8.2vw,42px)!important;line-height:1.10!important;overflow-wrap:anywhere;hyphens:auto}
  body .article-hero p,body .article-content,body .article-content p,
  body .article-content h2,body .article-content h3{min-width:0;max-width:100%;overflow-wrap:break-word}
  body .article-content a:not(.btn){overflow-wrap:anywhere}
  body .article-content img,body .article-content video,body .article-content iframe,
  body .article-content figure{max-width:100%!important;height:auto}
  body .article-content pre,body .article-content table{display:block;max-width:100%;overflow-x:auto}
  body .article-content .article-feature-grid,body .article-content .ai-checklist{min-width:0;max-width:100%}
  body .article-offer-card{width:100%!important;max-width:440px!important;min-width:0!important;margin-inline:auto!important;padding:23px!important}
  body .article-visual-stack > *,body .article-inline-cta > *,
  body .article-content .article-feature-grid > *{min-width:0;max-width:100%}
  body .related-post-grid{gap:13px!important}
  body .related-post-card{min-width:0;max-width:100%}
  body .blog-card-grid > *,body .blog-card{min-width:0;max-width:100%}
  body .service-detail-page .inner-hero-grid > *,body.service-detail-page .inner-hero-grid > *,
  body.service-detail-page .svx-layout > *,body.service-detail-page .svs-layout > *{min-width:0!important;max-width:100%}
  /* Shared testimonial slider (homepage and every inner services page): arrows below cards. */
  body .reviews-section .reviews-shell{position:relative!important;padding-bottom:88px!important}
  body .reviews-section .reviews-head,body .reviews-section .reviews-stage,
  body .reviews-section .reviews-window{min-width:0!important;max-width:100%!important}
  body .reviews-section .reviews-head-actions{min-width:0!important;max-width:100%!important}
  body .reviews-section .review-controls{
    position:absolute!important;right:20px!important;bottom:19px!important;z-index:3!important;
    margin:0!important;width:auto!important;display:flex!important;gap:10px!important;
    transform:none!important;align-items:center!important;
  }
  body .reviews-section .review-controls button{
    flex:0 0 44px!important;width:44px!important;height:44px!important;min-height:44px!important;
    display:inline-grid!important;place-items:center!important;margin:0!important;
  }
  body .reviews-section .review-meta{max-width:100%!important;min-width:0!important}
}
@media (max-width:360px){
  body .article-hero h1{font-size:30px!important}
  body .reviews-section .review-controls{right:16px!important}
  body .reviews-section .reviews-shell{padding-bottom:84px!important}
}

/* V9.10 MOBILE GUTTERS + SHARED REVIEWS CTA ORDER | CSS-only, additive */
@media (max-width:767px){
  /* V9.09 used width:100% on the article grids, overriding the 15px page gutters. */
  body .container,
  body main .container.article-layout,
  body main .container.article-hero-grid,
  body main .container.related-post-grid,
  body main .container.blog-card-grid{
    box-sizing:border-box!important;
    width:calc(100% - 30px)!important;
    max-width:min(1200px,calc(100% - 30px))!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }
  /* Nested containers already inherit a parent's 15px safe area. */
  body .container .container{
    width:100%!important;
    max-width:100%!important;
  }
  body .article-hero-grid>*,body .article-layout>*,
  body .article-content,body .article-sticky,body .article-offer-card{
    min-width:0!important;
    max-width:100%!important;
  }
  /* Reviews: keep the title at the top, slider next, CTA under cards, arrows at bottom. */
  body .reviews-section .reviews-shell{
    display:flex!important;
    flex-direction:column!important;
    position:relative!important;
    padding-bottom:87px!important;
  }
  body .reviews-section .reviews-head,
  body .reviews-section .reviews-head-actions{
    display:contents!important;
  }
  body .reviews-section .reviews-head>div:first-child{
    order:0;
    min-width:0;
    margin-bottom:20px;
  }
  body .reviews-section .reviews-count{display:none!important}
  body .reviews-section .reviews-stage{
    order:1;
    min-width:0!important;
    width:100%!important;
    max-width:100%!important;
  }
  body .reviews-section .reviews-all-btn{
    order:2!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:100%!important;
    margin:20px 0 0!important;
    min-height:46px;
    flex:none!important;
  }
  body .reviews-section .review-controls{
    position:absolute!important;
    right:18px!important;
    bottom:19px!important;
    display:flex!important;
    gap:10px!important;
    width:auto!important;
    margin:0!important;
    transform:none!important;
    z-index:3;
  }
}
@media (max-width:360px){
  body .reviews-section .reviews-shell{padding-bottom:85px!important}
  body .reviews-section .review-controls{right:15px!important}
}
@media(max-width:360px){
  /* Keep logo + quick-contact + menu inside the 15px mobile container. */
  body .site-header .brand img{width:128px!important;max-width:100%!important;height:auto!important}
  body .site-header .navrow{grid-template-columns:minmax(0,1fr) auto!important;gap:8px!important}
  body .site-header .nav-actions{min-width:0!important}
}

/* V9.11 MOBILE TESTIMONIAL CONTROLS ORDER | post-V9.10 minimal fix */
@media (max-width:767px){
  /* Current V9.10 uses a flex shell; place navigation after progress and before CTA. */
  body .reviews-section .reviews-shell{
    display:flex!important;
    flex-direction:column!important;
    padding-bottom:18px!important;
  }
  body .reviews-section .reviews-head,
  body .reviews-section .reviews-head-actions{
    display:contents!important;
  }
  body .reviews-section .reviews-head>div:first-child{order:0!important;}
  body .reviews-section .reviews-stage{
    order:1!important;
    min-width:0!important;
    width:100%!important;
  }
  body .reviews-section .reviews-count{display:none!important;}
  body .reviews-section .review-controls{
    position:static!important;
    order:2!important;
    align-self:flex-end!important;
    display:flex!important;
    gap:10px!important;
    width:auto!important;
    margin:17px 0 0!important;
    right:auto!important;
    bottom:auto!important;
    top:auto!important;
    left:auto!important;
    transform:none!important;
    z-index:auto!important;
    padding:0!important;
  }
  body .reviews-section .review-controls button{
    width:44px!important;
    height:44px!important;
    min-height:44px!important;
    min-width:44px!important;
  }
  body .reviews-section .reviews-all-btn{
    order:3!important;
    align-self:stretch!important;
    display:flex!important;
    width:100%!important;
    min-height:48px!important;
    margin:16px 0 0!important;
    justify-content:center!important;
  }
}

/* V9.12 MOBILE REVIEWS CTA + ARROWS SINGLE ROW | post-V9.11 */
@media (max-width:767px){
  /* Keep intro first and testimonial cards with progress immediately below. */
  body .reviews-section .reviews-shell{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    grid-template-rows:auto auto auto!important;
    column-gap:10px!important;
    row-gap:0!important;
    align-items:stretch!important;
    padding-bottom:20px!important;
    min-width:0!important;
  }
  body .reviews-section .reviews-head,
  body .reviews-section .reviews-head-actions{display:contents!important}
  body .reviews-section .reviews-head>div:first-child{
    grid-column:1 / -1!important;
    grid-row:1!important;
    order:0!important;
    min-width:0!important;
  }
  body .reviews-section .reviews-stage{
    grid-column:1 / -1!important;
    grid-row:2!important;
    order:1!important;
    min-width:0!important;
    width:100%!important;
    max-width:100%!important;
  }
  body .reviews-section .reviews-count{display:none!important}
  body .reviews-section .reviews-all-btn{
    grid-column:1!important;
    grid-row:3!important;
    order:2!important;
    align-self:center!important;
    justify-self:stretch!important;
    display:flex!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    min-height:44px!important;
    margin:16px 0 0!important;
    padding:0 10px!important;
    justify-content:center!important;
    text-align:center!important;
    font-size:10px!important;
    white-space:nowrap!important;
  }
  body .reviews-section .review-controls{
    grid-column:2!important;
    grid-row:3!important;
    order:3!important;
    position:static!important;
    align-self:center!important;
    justify-self:end!important;
    display:flex!important;
    flex-wrap:nowrap!important;
    gap:8px!important;
    width:auto!important;
    margin:16px 0 0!important;
    padding:0!important;
    inset:auto!important;
    transform:none!important;
    z-index:2!important;
  }
  body .reviews-section .review-controls button{
    flex:0 0 42px!important;
    width:42px!important;
    min-width:42px!important;
    height:44px!important;
    min-height:44px!important;
    margin:0!important;
  }
}
@media (max-width:360px){
  body .reviews-section .reviews-shell{column-gap:8px!important}
  body .reviews-section .reviews-all-btn{font-size:9px!important;padding:0 7px!important}
  body .reviews-section .review-controls{gap:6px!important}
  body .reviews-section .review-controls button{
    flex-basis:38px!important;
    width:38px!important;
    min-width:38px!important;
    height:44px!important;
  }
}
/* V9.12 MOBILE REVIEW SLIDE CENTERING: one complete review per frame. */
@media (max-width:767px){
  body .reviews-section .reviews-window{
    padding:0!important;
    overflow:hidden!important;
    width:100%!important;
    max-width:100%!important;
  }
  body .reviews-section .reviews-window::before,
  body .reviews-section .reviews-window::after{
    display:none!important;
  }
  body .reviews-section .reviews-track{
    display:flex!important;
    width:100%!important;
    gap:12px!important;
  }
  body .reviews-section .reviews-track .review-card{
    flex:0 0 100%!important;
    min-width:0!important;
    max-width:100%!important;
    margin:0!important;
    box-sizing:border-box!important;
    transform:none!important;
  }
  body .reviews-section .reviews-track .review-card:hover{
    transform:none!important;
  }
}