/*
 * Single Service page styles (single-service.php).
 * Base extracted from the service design system, prefix normalised to .svc-.
 * Enqueued only on is_singular('service').
 */
/* ============================================================
   Service Area SEO — premium build (brand #ff7a45 / black / white / cream)
   ============================================================ */
.svc,
.svc h1,
.svc h2,
.svc h3,
.svc h4,
.svc h5,
.svc p,
.svc span,
.svc a,
.svc div,
.svc li,
.svc label {
   font-family: "Poppins", sans-serif
}

.svc {
   --o: #ff7a45;
   --o2: #ff9e6b;
   --od: #e5622f;
   --ink: #141414;
   --cream: #FFF4EF;
   --dark: #0e0f12;
   --dark2: #17181d;
   position: relative;
   z-index: 2
}

#mainfooter {
   position: relative;
   z-index: 1
}

.svc * {
   box-sizing: border-box
}

#mainheader {
   min-height: 0 !important;
   padding: 0 !important
}

.svc .container {
   max-width: 1180px;
   width: 100%;
   margin-left: auto;
   margin-right: auto;
   padding-left: 20px;
   padding-right: 20px
}

.svc .cmn_padd {
   padding: 88px 20px
}

/* buttons */
.svc-btn {
   display: inline-flex;
   align-items: center;
   gap: 9px;
   background: var(--o);
   color: #fff;
   font-weight: 600;
   font-size: 15px;
   padding: 15px 25px;
   border-radius: 10px;
   text-decoration: none;
   transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
   border: 2px solid var(--o);
   box-shadow: 0 10px 26px rgba(255, 122, 69, .28)
}

.svc-btn:hover {
   background: var(--od);
   border-color: var(--od);
   color: #fff;
   transform: translateY(-3px);
   box-shadow: 0 16px 34px rgba(255, 122, 69, .4)
}

.svc-btn.out {
   background: transparent;
   color: var(--o);
   box-shadow: none
}

.svc-btn.out:hover {
   background: var(--o);
   color: #fff
}

.svc-btn svg {
   width: 17px;
   height: 17px
}

.svc-btns {
   display: flex;
   flex-wrap: wrap;
   gap: 15px;
   margin-top: 32px
}

/* reveal */
.svc .reveal {
   opacity: 0;
   transform: translateY(28px);
   transition: opacity .7s cubic-bezier(.16, 1, .3, 1), transform .7s cubic-bezier(.16, 1, .3, 1);
   transition-delay: var(--d, 0s)
}

.svc .reveal.in {
   opacity: 1;
   transform: none
}

@media(prefers-reduced-motion:reduce) {
   .svc .reveal {
      opacity: 1 !important;
      transform: none !important;
      transition: none !important
   }

   .svc [class*="svc-float"],
   .svc .pulse {
      animation: none !important
   }
}

/* headings */
.svc-head {
   text-align: center;
   max-width: 820px;
   margin: 0 auto
}

.svc-eyebrow {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   font-size: 12px;
   font-weight: 700;
   letter-spacing: 1.6px;
   text-transform: uppercase;
   color: var(--o);
   background: #fff4ef;
   border: 1px solid #ffd8c6;
   padding: 7px 15px;
   border-radius: 30px;
   margin-bottom: 18px
}

.svc-eyebrow svg {
   width: 14px;
   height: 14px;
   stroke: var(--o)
}

.svc-eyebrow.on-dark {
   background: rgba(255, 122, 69, .12);
   border-color: rgba(255, 122, 69, .35)
}

.svc-head h2 {
   font-size: 40px;
   line-height: 1.14;
   font-weight: 700;
   color: var(--ink);
   margin: 0
}

.svc-head h2 span {
   color: var(--o)
}

.svc-head .uline {
   width: 118px;
   height: 5px;
   border-radius: 4px;
   background: linear-gradient(90deg, var(--o), #ffc3a3);
   margin: 18px auto 0
}

.svc-head p {
   font-size: 16px;
   line-height: 1.75;
   color: #5c5c5c;
   max-width: 720px;
   margin: 22px auto 0
}

.svc-head.left {
   text-align: left;
   margin: 0
}

.svc-head.left .uline {
   margin: 18px 0 0
}

/* icon chip */
.svc-ic {
   width: 58px;
   height: 58px;
   border-radius: 15px;
   background: linear-gradient(135deg, #fff2ea, #ffe0d1);
   border: 1px solid #ffe0d1;
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--o);
   margin: 0 0 18px;
   box-shadow: 0 8px 20px rgba(255, 122, 69, .16)
}

.svc-ic svg {
   width: 28px;
   height: 28px;
   stroke: var(--o)
}

/* =====================================================================
   HERO (dark, two column)
   ===================================================================== */
.svc-hero {
   position: relative;
   overflow: hidden;
   background: var(--dark);
   padding: 160px 20px 106px
}

.svc-hero:before {
   content: "";
   position: absolute;
   top: -160px;
   right: -120px;
   width: 640px;
   height: 640px;
   background: radial-gradient(circle, rgba(255, 122, 69, .27), transparent 62%);
   pointer-events: none
}

.svc-hero:after {
   content: "";
   position: absolute;
   inset: 0;
   background-image: linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
   background-size: 46px 46px;
   mask-image: radial-gradient(circle at 30% 40%, #000, transparent 78%);
   -webkit-mask-image: radial-gradient(circle at 30% 40%, #000, transparent 78%);
   pointer-events: none
}

.svc-hero .container {
   position: relative;
   z-index: 2;
   display: grid;
   grid-template-columns: 1.02fr .98fr;
   gap: 54px;
   align-items: center
}

.svc-heleft {
   max-width: 600px
}

.svc-hero-eyebrow {
   display: inline-flex;
   align-items: center;
   gap: 9px;
   font-size: 12px;
   font-weight: 700;
   letter-spacing: 1.6px;
   text-transform: uppercase;
   color: var(--o2);
   background: rgba(255, 122, 69, .1);
   border: 1px solid rgba(255, 122, 69, .32);
   padding: 8px 16px;
   border-radius: 30px;
   margin-bottom: 22px
}

.svc-hero-eyebrow svg {
   width: 15px;
   height: 15px;
   stroke: var(--o2)
}

.svc-h1 {
   font-size: 54px;
   line-height: 1.07;
   font-weight: 800;
   color: #fff;
   margin: 0 0 20px;
   letter-spacing: -.5px
}

.svc-h1 span {
   color: var(--o)
}

.svc-sub {
   font-size: 18.5px;
   line-height: 1.7;
   color: #b9bcc6;
   max-width: 540px;
   margin: 0
}

.svc-trust {
   display: flex;
   flex-wrap: wrap;
   gap: 10px 22px;
   margin-top: 32px
}

.svc-trust .t {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   font-size: 13.5px;
   font-weight: 500;
   color: #cfd2db
}

.svc-trust .t svg {
   width: 16px;
   height: 16px;
   stroke: var(--o);
   flex: 0 0 auto
}

.svc-hero .anim {
   opacity: 0;
   transform: translateY(26px);
   animation: svcUp .8s cubic-bezier(.16, 1, .3, 1) forwards
}

.svc-hero .anim.d1 {
   animation-delay: .06s
}

.svc-hero .anim.d2 {
   animation-delay: .16s
}

.svc-hero .anim.d3 {
   animation-delay: .26s
}

.svc-hero .anim.d4 {
   animation-delay: .36s
}

.svc-hero .anim.d5 {
   animation-delay: .46s
}

@keyframes svcUp {
   to {
      opacity: 1;
      transform: none
   }
}

@media(prefers-reduced-motion:reduce) {
   .svc-hero .anim {
      opacity: 1;
      transform: none;
      animation: none
   }
}

.svc-float {
   animation: svcFloaty 6s ease-in-out infinite
}

@keyframes svcFloaty {

   0%,
   100% {
      transform: translateY(0)
   }

   50% {
      transform: translateY(-12px)
   }
}

/* map visual */
.svc-heright {
   position: relative
}

.svc-mapcard {
   position: relative;
   background: #fff;
   border-radius: 20px;
   padding: 16px;
   box-shadow: 0 40px 80px rgba(0, 0, 0, .5);
   max-width: 440px;
   margin-left: auto
}

.svc-map {
   position: relative;
   height: 360px;
   border-radius: 14px;
   overflow: hidden;
   background: linear-gradient(135deg, #fff6f1, #ffe9df);
   border: 1px solid #ffe0d1
}

.svc-map .grid {
   position: absolute;
   inset: 0;
   background-image: linear-gradient(rgba(255, 122, 69, .12) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 122, 69, .12) 1px, transparent 1px);
   background-size: 38px 38px
}

.svc-map .road {
   position: absolute;
   background: rgba(255, 122, 69, .18)
}

.svc-map .r1 {
   top: 34%;
   left: 0;
   right: 0;
   height: 6px
}

.svc-map .r2 {
   top: 0;
   bottom: 0;
   left: 56%;
   width: 6px
}

.svc-map .r3 {
   top: 0;
   bottom: 0;
   left: 24%;
   width: 4px;
   background: rgba(255, 122, 69, .12)
}

.svc-map .cov {
   position: absolute;
   top: 50%;
   left: 50%;
   width: 250px;
   height: 250px;
   transform: translate(-50%, -50%);
   border: 2px dashed rgba(255, 122, 69, .5);
   border-radius: 50%;
   background: rgba(255, 122, 69, .06)
}

.svc-pin {
   position: absolute;
   transform: translate(-50%, -100%);
   text-align: center
}

.svc-pin svg {
   width: 26px;
   height: 26px;
   filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .25))
}

.svc-pin.small svg {
   width: 20px;
   height: 20px
}

.svc-pin .lbl {
   display: block;
   font-size: 10px;
   font-weight: 700;
   color: #111;
   background: #fff;
   border: 1px solid #ffe0d1;
   border-radius: 20px;
   padding: 2px 8px;
   margin-top: -2px;
   white-space: nowrap;
   box-shadow: 0 3px 8px rgba(0, 0, 0, .08)
}

.svc-pin.center {
   z-index: 3
}

.svc-pin.center .lbl {
   background: var(--o);
   color: #fff;
   border-color: var(--o)
}

.svc-pin .pulse {
   position: absolute;
   top: 2px;
   left: 50%;
   width: 30px;
   height: 30px;
   transform: translate(-50%, -50%);
   border-radius: 50%;
   background: rgba(255, 122, 69, .4);
   animation: svcPulse 2.4s ease-out infinite
}

@keyframes svcPulse {
   0% {
      transform: translate(-50%, -50%) scale(.5);
      opacity: .7
   }

   100% {
      transform: translate(-50%, -50%) scale(2.6);
      opacity: 0
   }
}

.svc-mapcard .cap {
   display: flex;
   align-items: center;
   gap: 8px;
   padding: 14px 8px 6px;
   font-size: 12.5px;
   font-weight: 600;
   color: #555
}

.svc-mapcard .cap svg {
   width: 15px;
   height: 15px;
   stroke: var(--o)
}

.svc-mapcard .cap b {
   color: var(--o);
   font-weight: 700
}

/* =====================================================================
   THE PROBLEM (white, 2-col + gap panel)
   ===================================================================== */
.svc-split {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 58px;
   align-items: center
}

.svc-split .lead {
   font-size: 17px;
   line-height: 1.8;
   color: #565656;
   margin: 24px 0 0
}

.svc-note {
   display: inline-flex;
   align-items: center;
   gap: 9px;
   margin-top: 24px;
   font-size: 14px;
   font-weight: 600;
   color: #333;
   background: #fff4ef;
   border: 1px solid #ffd8c6;
   border-radius: 30px;
   padding: 10px 18px
}

.svc-note svg {
   width: 16px;
   height: 16px;
   stroke: var(--o)
}

.svc-gap {
   background: #fff;
   border: 1px solid #f0e5de;
   border-radius: 20px;
   padding: 22px 24px;
   box-shadow: 0 24px 56px rgba(0, 0, 0, .09)
}

.svc-gap .gh {
   font-size: 11px;
   font-weight: 700;
   letter-spacing: .7px;
   text-transform: uppercase;
   color: #9a9a9a;
   margin: 0 0 14px
}

.svc-gap .row {
   display: flex;
   align-items: center;
   gap: 12px;
   padding: 11px 0;
   border-bottom: 1px solid #f4efec;
   font-size: 14px
}

.svc-gap .row:last-child {
   border-bottom: 0
}

.svc-gap .row .town {
   font-weight: 600;
   color: #333;
   flex: 1
}

.svc-gap .row .st {
   font-size: 11.5px;
   font-weight: 700;
   display: inline-flex;
   align-items: center;
   gap: 5px;
   padding: 3px 10px;
   border-radius: 20px;
   white-space: nowrap
}

.svc-gap .row .st svg {
   width: 12px;
   height: 12px
}

.svc-gap .row.win .st {
   color: #1a7f37;
   background: #e9f6ee
}

.svc-gap .row.win .town:before {
   content: "";
   display: inline-block;
   width: 8px;
   height: 8px;
   border-radius: 50%;
   background: var(--o);
   margin-right: 9px;
   vertical-align: middle
}

.svc-gap .row.lose {
   color: #9a9a9a
}

.svc-gap .row.lose .town {
   color: #9a9a9a;
   font-weight: 500
}

.svc-gap .row.lose .town:before {
   content: "";
   display: inline-block;
   width: 8px;
   height: 8px;
   border-radius: 50%;
   background: #d3ccc6;
   margin-right: 9px;
   vertical-align: middle
}

.svc-gap .row.lose .st {
   color: #b06a5a;
   background: #f7ece9
}

.svc-gap .row.lose .st .cmp {
   color: #b0a79f;
   font-weight: 500;
   font-style: italic
}

/* =====================================================================
   WHAT WE DO (cream, 4 cards)
   ===================================================================== */
.svc-do {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 22px;
   margin-top: 52px
}

.svc-do .it {
   background: #fff;
   border: 1px solid #f2ece7;
   border-radius: 18px;
   padding: 30px 26px;
   box-shadow: 0 10px 30px rgba(0, 0, 0, .06);
   transition: transform .32s cubic-bezier(.16, 1, .3, 1), box-shadow .32s ease, border-color .32s ease
}

.svc-do .it:hover {
   transform: translateY(-10px);
   box-shadow: 0 26px 52px rgba(255, 122, 69, .16);
   border-color: #ffd8c6
}

.svc-do .it h4 {
   font-size: 17px;
   font-weight: 600;
   color: #111;
   margin: 0 0 9px
}

.svc-do .it p {
   font-size: 14px;
   line-height: 1.7;
   color: #666;
   margin: 0
}

/* =====================================================================
   WHAT YOU GET (dark; checklist + coverage dashboard)
   ===================================================================== */
.svc-get {
   background: var(--dark);
   position: relative;
   overflow: hidden
}

.svc-get:before {
   content: "";
   position: absolute;
   bottom: -160px;
   left: -120px;
   width: 560px;
   height: 560px;
   background: radial-gradient(circle, rgba(255, 122, 69, .16), transparent 62%);
   pointer-events: none
}

.svc-get .container {
   position: relative;
   z-index: 2
}

.svc-get .svc-head h2 {
   color: #fff
}

.svc-get .svc-head p {
   color: #b9bcc6
}

.svc-getwrap {
   display: grid;
   grid-template-columns: 1fr 1.05fr;
   gap: 56px;
   align-items: center;
   margin-top: 8px
}

.svc-checklist {
   list-style: none;
   padding: 0;
   margin: 26px 0 0
}

.svc-checklist li {
   position: relative;
   padding: 0 0 18px 44px;
   color: #e7e8ee;
   font-size: 16px;
   line-height: 1.55;
   font-weight: 500
}

.svc-checklist li:last-child {
   padding-bottom: 0
}

.svc-checklist li:before {
   content: "";
   position: absolute;
   left: 0;
   top: -1px;
   width: 28px;
   height: 28px;
   border-radius: 9px;
   background: linear-gradient(135deg, var(--o), #ff9e6b);
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
   background-repeat: no-repeat;
   background-position: center;
   background-size: 15px
}

.svc-dash {
   background: #fff;
   border-radius: 20px;
   box-shadow: 0 34px 70px rgba(0, 0, 0, .42);
   border: 1px solid #f0e5de;
   overflow: hidden
}

.svc-dash .dh {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 18px 22px;
   border-bottom: 1px solid #f0eae6
}

.svc-dash .dh b {
   font-size: 14.5px;
   font-weight: 700;
   color: #111
}

.svc-dash .dh .pct {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   font-size: 12px;
   font-weight: 800;
   color: var(--o);
   background: #fff0e8;
   border: 1px solid #ffd8c6;
   padding: 4px 11px;
   border-radius: 20px
}

.svc-dash .towns {
   padding: 8px 22px 6px
}

.svc-dash .t {
   display: flex;
   align-items: center;
   gap: 10px;
   padding: 11px 0;
   border-bottom: 1px solid #f4efec
}

.svc-dash .t:last-child {
   border-bottom: 0
}

.svc-dash .t .nm {
   flex: 1;
   font-size: 13.5px;
   font-weight: 600;
   color: #222;
   display: flex;
   align-items: center;
   gap: 9px
}

.svc-dash .t .nm .dot {
   width: 8px;
   height: 8px;
   border-radius: 50%;
   background: var(--o)
}

.svc-dash .t .tag {
   font-size: 10.5px;
   font-weight: 700;
   color: var(--od);
   background: #fff0e8;
   border: 1px solid #ffd8c6;
   border-radius: 20px;
   padding: 3px 9px;
   display: inline-flex;
   align-items: center;
   gap: 4px
}

.svc-dash .t .tag svg {
   width: 11px;
   height: 11px;
   stroke: var(--o)
}

.svc-dash .foot {
   background: #fff8f4;
   border-top: 1px solid #ffe6d8;
   padding: 14px 22px;
   font-size: 12.5px;
   font-weight: 600;
   color: var(--od);
   display: flex;
   align-items: center;
   gap: 8px
}

.svc-dash .foot svg {
   width: 15px;
   height: 15px;
   stroke: var(--o);
   flex: 0 0 auto
}

/* WHO IT'S FOR tags */
.svc-lead {
   font-size: 16px;
   line-height: 1.75;
   color: #5c5c5c;
   max-width: 780px;
   margin: 22px auto 0;
   text-align: center
}

.svc-tags {
   display: flex;
   flex-wrap: wrap;
   gap: 14px;
   justify-content: center;
   margin-top: 44px
}

.svc-tags .tg {
   background: #fff;
   border: 1px solid #efe1d9;
   border-radius: 40px;
   padding: 13px 22px;
   font-size: 14px;
   font-weight: 600;
   color: #222;
   box-shadow: 0 6px 18px rgba(0, 0, 0, .05);
   transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, color .25s ease
}

.svc-tags .tg:hover {
   border-color: var(--o);
   color: var(--o);
   transform: translateY(-4px);
   box-shadow: 0 12px 26px rgba(255, 122, 69, .2)
}

/* ===== Reused: Why Digital Rafter + Pricing (dwp) ===== */
.dwp,
.dwp h2,
.dwp h3,
.dwp h4,
.dwp p,
.dwp span,
.dwp a,
.dwp li,
.dwp div {
   font-family: "Poppins", sans-serif
}

.dwp .cmn_padd {
   padding: 88px 20px
}

.dwp .container {
   max-width: 1180px;
   width: 100%;
   margin-left: auto;
   margin-right: auto;
   padding-left: 20px;
   padding-right: 20px
}

.dwp-why {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   grid-auto-rows: 1fr;
   gap: 24px;
   max-width: 1160px;
   margin: 52px auto 0
}

.dwp-why .it {
   background: #fff;
   border: 1px solid #f2ece7;
   border-radius: 18px;
   padding: 32px 26px;
   box-shadow: 0 10px 30px rgba(0, 0, 0, .06);
   transition: transform .32s cubic-bezier(.16, 1, .3, 1), box-shadow .32s ease, border-color .32s ease
}

.dwp-why .it:hover {
   transform: translateY(-10px);
   box-shadow: 0 26px 52px rgba(255, 122, 69, .16);
   border-color: #ffd8c6
}

.dwp-why .it h4 {
   font-size: 17px;
   font-weight: 600;
   color: #111;
   margin: 0 0 8px
}

.dwp-why .it p {
   font-size: 14px;
   line-height: 1.7;
   color: #666;
   margin: 0
}

.dwp-ic {
   width: 58px;
   height: 58px;
   border-radius: 15px;
   background: linear-gradient(135deg, #fff2ea, #ffe0d1);
   border: 1px solid #ffe0d1;
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--o);
   margin: 0 0 18px;
   box-shadow: 0 8px 20px rgba(255, 122, 69, .16)
}

.dwp-ic svg {
   width: 28px;
   height: 28px;
   stroke: var(--o)
}

.dwp-price {
   display: flex;
   flex-wrap: wrap;
   gap: 26px;
   justify-content: center;
   align-items: stretch;
   margin-top: 54px
}

.dwp-tier {
   flex: 1 1 300px;
   max-width: 350px;
   background: #fff;
   border: 1px solid #efe1d9;
   border-radius: 20px;
   padding: 38px 32px;
   display: flex;
   flex-direction: column;
   box-shadow: 0 12px 34px rgba(0, 0, 0, .06);
   transition: transform .32s cubic-bezier(.16, 1, .3, 1), box-shadow .32s ease
}

.dwp-tier:hover {
   transform: translateY(-8px);
   box-shadow: 0 28px 56px rgba(255, 122, 69, .16)
}

.dwp-tier.pop {
   border: 2px solid var(--o);
   transform: scale(1.045);
   position: relative;
   box-shadow: 0 26px 56px rgba(255, 122, 69, .26);
   background: linear-gradient(180deg, #fffaf7, #fff)
}

.dwp-tier.pop:hover {
   transform: scale(1.045) translateY(-8px)
}

.dwp-badge {
   position: absolute;
   top: -15px;
   left: 50%;
   transform: translateX(-50%);
   background: var(--o);
   color: #fff;
   font-size: 12px;
   font-weight: 700;
   padding: 7px 18px;
   border-radius: 20px;
   letter-spacing: .5px;
   white-space: nowrap;
   box-shadow: 0 10px 22px rgba(255, 122, 69, .4)
}

.dwp-tier h3 {
   font-size: 20px;
   font-weight: 700;
   color: #111;
   margin: 0 0 8px
}

.dwp-amt {
   font-size: 40px;
   font-weight: 800;
   color: #111;
   line-height: 1;
   margin: 0
}

.dwp-amt span {
   font-size: 15px;
   font-weight: 500;
   color: #888
}

.dwp-tier .desc {
   font-size: 14px;
   color: #666;
   line-height: 1.6;
   margin: 12px 0 22px
}

.dwp-feats {
   list-style: none;
   padding: 0;
   margin: 0 0 28px
}

.dwp-feats li {
   position: relative;
   padding: 0 0 13px 28px;
   font-size: 14px;
   color: #444;
   line-height: 1.5
}

.dwp-feats li:before {
   content: "";
   position: absolute;
   left: 0;
   top: 2px;
   width: 18px;
   height: 18px;
   border-radius: 50%;
   background: #fff0e8;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff7a45' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
   background-repeat: no-repeat;
   background-position: center;
   background-size: 12px
}

.dwp-btn {
   display: block;
   text-align: center;
   background: var(--o);
   color: #fff;
   font-weight: 600;
   font-size: 15px;
   padding: 15px;
   border-radius: 10px;
   text-decoration: none;
   margin-top: auto;
   border: 2px solid var(--o);
   transition: transform .25s ease, box-shadow .25s ease, background .25s ease
}

.dwp-btn:hover {
   background: var(--od);
   border-color: var(--od);
   color: #fff;
   transform: translateY(-3px);
   box-shadow: 0 14px 30px rgba(255, 122, 69, .36)
}

.dwp-tier:not(.pop) .dwp-btn {
   background: #fff;
   color: var(--o)
}

.dwp-tier:not(.pop) .dwp-btn:hover {
   background: var(--o);
   color: #fff
}

.dwp-sub {
   text-align: center;
   color: #9a8f8a;
   font-size: 13px;
   margin: 14px auto 0;
   font-style: italic
}

.dwp-fine {
   text-align: center;
   color: #777;
   font-size: 14px;
   margin: 44px auto 0
}

/* =====================================================================
   CLOSING CTA (dark)
   ===================================================================== */
.svc-close {
   background: var(--dark);
   position: relative;
   overflow: hidden;
   padding: 78px 20px
}

.svc-close:before {
   content: "";
   position: absolute;
   top: -140px;
   left: 50%;
   transform: translateX(-50%);
   width: 640px;
   height: 420px;
   background: radial-gradient(circle, rgba(255, 122, 69, .24), transparent 62%);
   pointer-events: none
}

.svc-close .container {
   position: relative;
   z-index: 2;
   text-align: center
}

.svc-close h2 {
   color: #fff;
   font-size: 38px;
   font-weight: 700;
   margin: 0 auto 14px;
   letter-spacing: -.4px
}

.svc-close h2 span {
   color: var(--o)
}

.svc-close p {
   color: #b9bcc6;
   font-size: 16.5px;
   line-height: 1.7;
   max-width: 560px;
   margin: 0 auto
}

.svc-close .svc-btns {
   justify-content: center
}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */

@media(max-width:1200px) {
   .svc-btn {
      padding: 15px;
   }
}


@media(max-width:992px) {
   .svc-hero {
      padding: 140px 18px 76px
   }

   .svc-hero .container {
      grid-template-columns: 1fr;
      gap: 48px
   }

   .svc-h1 {
      font-size: 42px
   }

   .svc-mapcard {
      margin: 0 auto
   }

   .svc-split,
   .svc-getwrap {
      grid-template-columns: 1fr;
      gap: 42px
   }

   .svc-head.left {
      text-align: center;
      margin: 0 auto
   }

   .svc-head.left .uline {
      margin: 18px auto 0
   }

   .svc-do {
      grid-template-columns: repeat(2, 1fr)
   }

   .svc-get .svc-head {
      text-align: center;
      margin: 0 auto
   }

   .svc-get .svc-head .uline {
      margin: 18px auto 0
   }

   .dwp-why {
      grid-template-columns: repeat(2, 1fr)
   }
}

@media(max-width:600px) {
   .svc-h1 {
      font-size: 34px
   }

   .svc-head h2,
   .svc-close h2 {
      font-size: 28px
   }

   .svc-do,
   .dwp-why {
      grid-template-columns: 1fr
   }

   .svc-btns {
      flex-direction: column
   }

   .svc-btn {
      justify-content: center
   }
}

/* ===== footer polish (shared across new templates) ===== */
ul.social_list li a i {
   display: none !important
}

ul.social_list li a svg {
   width: 18px;
   height: 18px;
   display: block
}

.backto_top::after {
   content: none !important
}

.backto_top {
   display: flex !important;
   align-items: center;
   justify-content: center
}

.backto_top svg {
   width: 20px;
   height: 20px;
   display: block
}

footer#mainfooter .footertop>.container {
   max-width: 1180px !important;
   width: 100% !important;
   margin-left: auto !important;
   margin-right: auto !important
}

footer#mainfooter .footertop>.container>.row {
   display: flex !important;
   flex-wrap: wrap;
   margin-right: -15px;
   margin-left: -15px
}

footer#mainfooter .footertop .row>[class*="col-md"] {
   padding-right: 15px;
   padding-left: 15px
}

footer#mainfooter .footertop .col-md-4 {
   flex: 0 0 33.3333% !important;
   max-width: 33.3333% !important
}

footer#mainfooter .footertop .col-md-5 {
   flex: 0 0 41.6667% !important;
   max-width: 41.6667% !important
}

footer#mainfooter .footertop .col-md-3 {
   flex: 0 0 25% !important;
   max-width: 25% !important
}

footer#mainfooter .footertop .col-md-6 {
   flex: 0 0 50% !important;
   max-width: 50% !important
}

@media(max-width:768px) {
   footer#mainfooter .footertop [class*="col-md"] {
      flex: 0 0 100% !important;
      max-width: 100% !important
   }
}

/* =====================================================================
   Hero visual variants (selectable via ACF: map | stack | stat | image | none)
   .svc-map (map) already defined above. These sit inside .svc-heright.
   ===================================================================== */
.svc-visual {
   background: #fff;
   border-radius: 20px;
   padding: 22px;
   box-shadow: 0 30px 70px rgba(0, 0, 0, .14);
   max-width: 440px;
   margin-left: auto
}

/* review / trust stack */
.svc-stack .prof {
   display: flex;
   align-items: center;
   gap: 13px;
   padding-bottom: 15px;
   border-bottom: 1px solid #f0eae6
}

.svc-stack .prof .lg {
   width: 46px;
   height: 46px;
   border-radius: 12px;
   background: linear-gradient(135deg, #ff9e6b, #ff7a45);
   color: #fff;
   font-weight: 800;
   font-size: 20px;
   display: flex;
   align-items: center;
   justify-content: center;
   flex: 0 0 46px
}

.svc-stack .prof h5 {
   margin: 0;
   font-size: 16px;
   font-weight: 700;
   color: #141414
}

.svc-stack .prof .stars {
   color: #ff7a45;
   font-size: 14px;
   letter-spacing: 1px
}

.svc-stack .prof .stars small {
   color: #8a8a8a;
   margin-left: 6px;
   letter-spacing: 0
}

.svc-stack .lab {
   margin: 15px 0 10px;
   font-size: 11px;
   font-weight: 700;
   letter-spacing: 1.4px;
   text-transform: uppercase;
   color: #9a9a9a
}

.svc-stack .ment {
   display: flex;
   align-items: flex-start;
   gap: 10px;
   font-size: 14px;
   line-height: 1.5;
   color: #4a4a4a;
   margin: 0 0 11px
}

.svc-stack .ment svg {
   width: 18px;
   height: 18px;
   stroke: #1a7f37;
   flex: 0 0 18px;
   margin-top: 1px
}

/* stat card */
.svc-stat {
   text-align: center
}

.svc-stat .n {
   font-size: 64px;
   line-height: 1;
   font-weight: 800;
   letter-spacing: -2px;
   background: linear-gradient(135deg, #ff9e6b, #ff7a45);
   -webkit-background-clip: text;
   background-clip: text;
   -webkit-text-fill-color: transparent
}

.svc-stat .l {
   margin-top: 10px;
   font-size: 13px;
   font-weight: 700;
   letter-spacing: 1.2px;
   text-transform: uppercase;
   color: #6a6a6a
}

.svc-stat .row {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 18px;
   margin-top: 20px;
   padding-top: 20px;
   border-top: 1px solid #f0eae6;
   text-align: left
}

.svc-stat .row .n {
   font-size: 30px
}

.svc-stat .row .l {
   margin-top: 4px
}

/* custom image */
.svc-heimg {
   max-width: 520px;
   margin-left: auto
}

.svc-heimg img {
   width: 100%;
   height: auto;
   border-radius: 20px;
   box-shadow: 0 30px 70px rgba(0, 0, 0, .22);
   display: block
}

/* =====================================================================
   FAQ (accordion)
   ===================================================================== */
.svc-faq {
   max-width: 820px;
   margin: 44px auto 0;
   display: flex;
   flex-direction: column;
   gap: 14px
}

.svc-faq details {
   background: #fff;
   border: 1px solid #f0e6df;
   border-radius: 14px;
   padding: 0 22px;
   box-shadow: 0 8px 24px rgba(0, 0, 0, .04)
}

.svc-faq details[open] {
   border-color: #ffd8c6
}

.svc-faq summary {
   list-style: none;
   cursor: pointer;
   padding: 20px 0;
   font-size: 17px;
   font-weight: 600;
   color: #141414;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 16px
}

.svc-faq summary::-webkit-details-marker {
   display: none
}

.svc-faq summary .chev {
   flex: 0 0 20px;
   width: 20px;
   height: 20px;
   transition: transform .3s ease;
   color: #ff7a45
}

.svc-faq details[open] summary .chev {
   transform: rotate(180deg)
}

.svc-faq .fa {
   overflow: hidden;
   font-size: 15px;
   line-height: 1.75;
   color: #5c5c5c;
   padding: 0 0 22px
}

.svc-faq .fa a {
   color: #ff7a45;
   font-weight: 600
}

/* =====================================================================
   Testimonials
   ===================================================================== */
.svc-tst {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 24px;
   margin-top: 48px
}

.svc-tst .tc {
   background: #fff;
   border: 1px solid #f2ece7;
   border-radius: 18px;
   padding: 28px;
   box-shadow: 0 10px 30px rgba(0, 0, 0, .06)
}

.svc-tst .stars {
   color: #ff7a45;
   letter-spacing: 2px;
   font-size: 16px
}

.svc-tst .q {
   margin: 14px 0 18px;
   font-size: 15px;
   line-height: 1.7;
   color: #3a3a3a
}

.svc-tst .who {
   display: flex;
   align-items: center;
   gap: 12px
}

.svc-tst .av {
   width: 42px;
   height: 42px;
   border-radius: 50%;
   background: linear-gradient(135deg, #ff9e6b, #ff7a45);
   color: #fff;
   font-weight: 800;
   display: flex;
   align-items: center;
   justify-content: center;
   flex: 0 0 42px
}

.svc-tst .nm {
   font-weight: 700;
   color: #141414;
   font-size: 15px;
   display: flex;
   flex-direction: column
}

.svc-tst .nm small {
   font-weight: 500;
   color: #9a9a9a;
   font-size: 12px
}

/* =====================================================================
   Featured projects
   ===================================================================== */
.svc-proj {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 24px;
   margin-top: 48px
}

.svc-proj .p {
   background: #fff;
   border: 1px solid #f2ece7;
   border-radius: 18px;
   overflow: hidden;
   box-shadow: 0 10px 30px rgba(0, 0, 0, .06)
}

.svc-proj .p .im {
   aspect-ratio: 16/10;
   background: #f4ece7;
   overflow: hidden
}

.svc-proj .p .im img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block
}

.svc-proj .p .bd {
   padding: 20px 22px
}

.svc-proj .p h4 {
   margin: 0 0 6px;
   font-size: 17px;
   font-weight: 700;
   color: #141414
}

.svc-proj .p .st {
   font-size: 14px;
   color: #ff7a45;
   font-weight: 700
}

@media(max-width:900px) {

   .svc-tst,
   .svc-proj {
      grid-template-columns: 1fr
   }

   .svc-visual,
   .svc-heimg {
      margin: 0 auto
   }
}

/* Centred hero when no side visual is selected */
.svc-hero.is-center .container {
   grid-template-columns: 1fr
}

.svc-hero.is-center .svc-heleft {
   max-width: 760px;
   margin: 0 auto;
   text-align: center
}

.svc-hero.is-center .svc-btns,
.svc-hero.is-center .svc-trust {
   justify-content: center
}

@media (max-width: 991px) {
   .svc-hero {
      padding-top: 140px
   }
}