/* Service bodies only. The approved global header and footer keep their own rules. */
.service-detail{--detail-space:clamp(36px,4.4vw,64px);background:var(--eco-paper)}
.service-detail main{overflow:clip}
.detail-hero{position:relative;isolation:isolate;overflow:hidden;background:radial-gradient(ellipse at 82% 52%,#dce5ffb3,transparent 62%),var(--eco-paper)}
.detail-hero-grid{display:grid;gap:24px;padding-block:32px 24px}
.detail-copy{position:relative;z-index:1;min-width:0}
.detail-breadcrumb ol{display:flex;flex-wrap:wrap;gap:7px;align-items:center;list-style:none;padding:0;margin:0;color:#5a6a8b;font-size:10px;line-height:1.5;font-weight:550;letter-spacing:.07em;text-transform:uppercase}
.detail-breadcrumb li+li::before{content:"›";margin-right:7px;color:#8194b7}
.detail-breadcrumb a:hover{color:var(--eco-blue)}
.detail-breadcrumb li:first-child a::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--eco-blue);margin-right:8px;vertical-align:middle}
.service-detail .detail-title{font-family:var(--eco-sans);font-size:clamp(39px,9.7vw,66px);font-weight:550;line-height:.98;letter-spacing:-.05em;margin-top:24px;hyphens:auto}
.service-detail .detail-title>span,.service-detail .detail-title>em{display:block;white-space:normal}
.service-detail .detail-title>em{font-family:var(--eco-serif);font-size:1.09em;font-weight:400;line-height:.96;letter-spacing:-.035em;margin:0;color:var(--eco-blue)}
.detail-lead{max-width:550px;font-size:16px;line-height:1.5;letter-spacing:-.015em;color:var(--eco-muted);margin-top:22px;text-wrap:pretty}
.detail-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.service-detail .detail-actions .eco-button{min-height:48px;padding:12px 16px;font-size:12px;gap:12px;border-color:#080e26}
.service-detail .detail-actions .hero-cta-secondary{color:#080e26;background:transparent}
.service-detail .detail-actions .hero-cta-primary:is(:hover,:active){color:#080e26;background:transparent;box-shadow:none}
.service-detail .detail-actions .hero-cta-secondary:is(:hover,:active){color:#fff;background:#080e26}
.detail-visual{position:relative;isolation:isolate;min-width:0;width:100%;max-width:460px;aspect-ratio:3/2;margin-inline:auto}
.detail-visual::before{content:"";position:absolute;inset:0 -8%;z-index:-1;background:radial-gradient(ellipse at 58% 68%,#7496ff38,transparent 65%)}
.detail-visual img{display:block;width:100%;height:100%;object-fit:contain}
.detail-section{padding-block:var(--detail-space)}
.detail-eyebrow{font-size:11px;line-height:1.4;letter-spacing:.11em;font-weight:600;text-transform:uppercase;color:var(--eco-blue)}
.detail-heading{font-family:var(--eco-serif);font-size:clamp(32px,5vw,49px);font-weight:400;line-height:1.02;letter-spacing:-.03em;margin-top:14px;text-wrap:pretty}
/* Font identity follows the approved desktop design at every width. */
.service-detail .detail-intro .detail-heading{font-family:var(--eco-sans);font-style:normal;font-weight:550;line-height:1.08}
.service-detail .detail-process .detail-heading{font-family:var(--eco-sans);font-style:normal;font-weight:600}
.service-detail :is(.detail-scope,.detail-faq) .detail-heading{font-family:var(--eco-serif);font-style:italic;font-weight:400}
@media(max-width:1119.98px){
  .service-detail :is(.detail-heading,.detail-final h2){overflow-wrap:anywhere}
  .service-detail :is(.detail-intro-grid,.detail-process-heading)>*{min-width:0}
}
.detail-intro-grid{display:grid;gap:24px}
.detail-prose{font-size:16px;line-height:1.65;letter-spacing:-.015em;color:var(--eco-muted);text-wrap:pretty}
.detail-scope{padding-top:12px}
.detail-scope-heading{display:grid;gap:24px;margin-bottom:28px}
.detail-scope-heading>p{color:var(--eco-muted);font-size:16px;line-height:1.6}
@media(max-width:1119.98px){.service-detail--web .detail-scope .detail-heading{font-size:clamp(28px,3.3vw,44px);letter-spacing:-.04em}}
.detail-card-grid{--bs-gutter-x:20px;--bs-gutter-y:20px}
.detail-card{height:100%;padding:24px;border:1px solid #dce5ff;border-radius:12px;background:linear-gradient(130deg,#fff,#fafcff);box-shadow:0 5px 18px #1e4ca908}
.detail-card-icon{display:grid;place-items:center;width:46px;height:46px;border-radius:13px;background:linear-gradient(135deg,#ebf2ff,#dce6ff);color:var(--eco-blue);font-size:29px;margin-bottom:16px}
.detail-card h3{font-family:var(--eco-sans);font-size:20px;line-height:1.2;letter-spacing:-.035em;font-weight:600}
.detail-card p{font-size:15px;line-height:1.5;letter-spacing:-.015em;color:var(--eco-muted);margin-top:10px}
.detail-wide{width:calc(100% - 32px);max-width:calc(1038 * var(--u));margin-inline:auto}
.detail-process{position:relative;isolation:isolate;overflow:hidden;border-radius:15px;background:radial-gradient(ellipse at 70% 100%,#12264588,transparent 75%),#091322;color:#fff}
.detail-process-inner{padding:32px 24px}
.detail-process-heading{display:grid;gap:22px}
.detail-process .detail-eyebrow{color:#55a5ff}
.detail-process-heading>p{font-size:15px;line-height:1.55;color:#c6cfe0;max-width:440px}
.detail-steps{display:grid;gap:28px;list-style:none;padding:0;margin-top:32px}
.detail-step{position:relative;display:grid;grid-template-columns:42px minmax(0,1fr);gap:8px 16px;align-content:start;min-width:0}
.detail-step-number{grid-row:1/3;position:relative;z-index:1;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;color:#06152f;background:linear-gradient(120deg,#44a9ff,#2860ff);font-size:13px;font-weight:650}
.detail-step:not(:last-child)::before{content:"";position:absolute;left:20px;top:42px;bottom:-28px;width:1px;background:#3d79d78c}
.detail-step h3{font-size:17px;line-height:1.3;letter-spacing:-.02em;font-weight:550}
.detail-step p{grid-column:2;font-size:14px;line-height:1.5;color:#bbc7dd}
.detail-step-arrow{display:none}
.detail-faq-grid{display:grid;gap:28px}
.detail-faq .detail-heading em{font-style:italic;color:var(--eco-blue)}
.detail-faq-list{min-width:0}
.detail-faq details{border-bottom:1px solid #d6dfef}
.detail-faq summary{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;list-style:none;padding:17px 0;font-size:15px;line-height:1.45;letter-spacing:-.015em;cursor:pointer}
.detail-faq summary::-webkit-details-marker{display:none}
.detail-faq summary .ph{flex-shrink:0;font-size:17px;color:#344d7a;margin-top:3px}
.detail-faq details[open] summary{color:var(--eco-blue)}
.detail-faq details[open] summary .ph{transform:rotate(90deg)}
.detail-faq details>p{font-size:15px;line-height:1.65;color:var(--eco-muted);padding:0 28px 20px 0;max-width:65ch}
.detail-final{position:relative;isolation:isolate;overflow:hidden;background:linear-gradient(90deg,#06102b66,#06102b3d),#06102b url('../images/services/service-cta-wave.svg') right center/cover no-repeat;color:#fff;border-radius:10px;margin:0 16px 32px}
.detail-final-inner{display:grid;gap:26px;padding-block:32px}
.detail-final .detail-eyebrow{color:#b5d7ff}
.detail-final h2{font-family:var(--eco-sans);font-size:clamp(30px,4.3vw,52px);font-style:normal;font-weight:600;line-height:1.03;letter-spacing:-.025em;margin-top:14px}
.detail-final p:not(.detail-eyebrow){font-size:15px;line-height:1.5;color:#dce5fb;margin-top:14px;max-width:58ch}
.service-detail .detail-final-button{justify-self:start;min-height:48px;padding:14px 24px;background:#fff;color:var(--eco-ink);border-color:#fff;font-size:14px;gap:22px}
.service-detail .detail-final-button:hover{background:#e8efff;border-color:#cad8ff;box-shadow:0 4px 20px #5d81ff40}
.service-detail .detail-final-button:focus-visible{outline:3px solid #fff;outline-offset:5px;box-shadow:0 0 0 3px #080d21}
/* Preserve the approved smaller-screen scale; desktop uses the shared system. */
@media(max-width:1119.98px){
  .service-detail--brand .detail-title>em{font-size:.98em}
  .service-detail--brand{--detail-space:clamp(32px,3vw,44px)}
}
.service-detail--brand .detail-scope-heading{align-items:center}
.service-detail--brand .detail-process::after{content:"";position:absolute;right:-12%;bottom:-30%;width:46%;height:130%;border-radius:50%;border-left:1px solid #377dff80;background:linear-gradient(130deg,transparent 45%,#2257f230,#5124d84a);transform:rotate(24deg);z-index:-1}
.service-detail--brand .detail-final{margin-inline:0;margin-bottom:0;border-radius:0}
@media(max-width:359.98px){.detail-actions .eco-button{width:100%}.service-detail .detail-title{font-size:36px}.detail-breadcrumb ol{font-size:9px}.detail-final h2 br{display:none}}
.service-detail--web .detail-final-inner>div{min-width:0}
@media(max-width:767.98px){.service-detail--web .detail-final-inner{grid-template-columns:minmax(0,1fr)}}
@media(min-width:768px){
  .detail-hero-grid{padding-block:44px 36px}
  .detail-visual{max-width:560px}
  .detail-intro-grid{grid-template-columns:1fr 1fr;gap:40px}
  .detail-card{min-height:240px;padding:28px}
  .detail-faq-grid{grid-template-columns:1fr 1.15fr;gap:40px}
  .detail-process-inner{padding:42px 36px}
  .detail-steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}
  .detail-step{display:block}
  .detail-step-number{margin-bottom:16px}
  .detail-step h3{font-size:18px}
  .detail-step p{margin-top:10px}
  .detail-step:not(:last-child)::before{display:none}
  .detail-final-inner{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:30px;padding-block:44px}
  .service-detail .detail-final-button{justify-self:end}
}
@media(min-width:992px){
  .detail-hero-grid{grid-template-columns:minmax(min-content,48%) minmax(0,1fr);align-items:center;gap:0;min-height:calc(590 * var(--u));padding-block:calc(52 * var(--u))}
  .service-detail .detail-title{font-size:clamp(52px,5.55vw,80px);margin-top:30px}
  .detail-breadcrumb ol{font-size:11px}
  .detail-lead{font-size:clamp(17px,1.35vw,19px);line-height:1.5;max-width:550px;margin-top:26px}
  .detail-actions{margin-top:32px;gap:16px}
  .service-detail .detail-actions .eco-button{min-height:48px;padding:13px 22px;font-size:14px;gap:18px}
  .detail-visual{width:118%;max-width:none;aspect-ratio:1.22;margin-left:-5%;margin-right:-13%}
  .detail-visual img{object-fit:contain}
  .detail-intro-grid{gap:52px;align-items:start}
  .detail-prose{font-size:clamp(17px,1.32vw,19px);line-height:1.6}
  .detail-heading{font-size:clamp(42px,4.05vw,58px)}
  .detail-intro-grid>.detail-prose{padding-top:24px}
  .detail-scope-heading{margin-bottom:32px}
  .detail-card{min-height:270px}
  .detail-card-icon{width:56px;height:56px;font-size:34px;margin-bottom:18px}
  .detail-card h3{font-size:clamp(22px,1.8vw,26px)}
  .detail-card p{font-size:clamp(16px,1.39vw,20px);line-height:1.45}
  .detail-process-inner{padding:clamp(36px,4.5vw,62px)}
  .detail-process-heading{grid-template-columns:1.3fr 1fr;gap:64px;align-items:center}
  .detail-process-heading>p{font-size:17px;justify-self:end}
  .detail-steps{grid-template-columns:repeat(4,minmax(0,1fr));gap:32px;margin-top:46px}
  .detail-step-number{width:54px;height:54px;margin-bottom:18px}
  .detail-step:not(:last-child)::before{display:block;left:54px;right:-16px;top:27px;bottom:auto;width:auto;height:1px;background:#417ed0}
  .detail-step-arrow{display:block;position:absolute;right:-18px;top:20px;font-size:14px;color:#4793ff}
  .detail-step h3{font-size:clamp(18px,1.6vw,23px);line-height:1.25}
  .detail-step p{font-size:clamp(16px,1.32vw,19px);line-height:1.45;margin-top:10px}
  .detail-faq-grid{grid-template-columns:.9fr 1.1fr;gap:72px}
  .detail-faq summary{font-size:19px;padding-block:18px}
  .detail-faq details>p{font-size:16px}
  .detail-final{margin:0 20px 40px}
  .detail-final-inner{padding-block:40px;min-height:240px}
  .detail-final p:not(.detail-eyebrow){font-size:17px}
  .service-detail .detail-final-button{font-size:16px;min-height:54px;padding:16px 30px}
  .service-detail--brand .detail-scope-heading{grid-template-columns:1.1fr 1fr;gap:50px}
}
/* Retain tablet geometry below the shared 1120px desktop breakpoint. */
@media(min-width:992px) and (max-width:1119.98px){
  .service-detail--brand .detail-hero-grid{min-height:calc(440 * var(--u));padding-block:40px}
  .service-detail--brand .detail-title{font-size:clamp(52px,4.8vw,72px)}
  .service-detail--brand .detail-visual{width:137%;margin-left:-12%;margin-right:-25%;aspect-ratio:1.85}
  .service-detail--brand .detail-intro-grid{grid-template-columns:1fr 1fr;gap:30px}
  .service-detail--brand .detail-intro-grid>.detail-prose{font-size:15px;padding:24px 0 0 28px;border-left:1px solid #dce6fa}
  .service-detail--brand .detail-intro-grid .detail-heading{font-size:44px}
  .service-detail--brand .detail-heading{font-size:44px}
  .service-detail--brand .detail-card{min-height:200px;padding:22px}
  .service-detail--brand .detail-card-icon{width:42px;height:42px;margin-bottom:12px}
  .service-detail--brand .detail-card h3{font-size:20px}
  .service-detail--brand .detail-card p{font-size:15px;margin-top:8px}
  .service-detail--brand .detail-process-inner{padding:40px}
  .service-detail--brand .detail-steps{margin-top:32px}
  .service-detail--brand .detail-faq{padding-block:32px}
  .service-detail--brand .detail-faq summary{min-height:44px;padding-block:10px;font-size:16px}
}
@media(min-width:992px) and (max-width:1119.98px){
  .detail-card-grid>.col-lg-4{width:50%}
  .detail-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .detail-step:not(:last-child)::before,.detail-step-arrow{display:none}
}

/* V5.6.2: shared desktop service system, based on the approved Web pilot. */
@media(min-width:1120px){
  .service-detail .detail-hero-grid{min-height:0;padding-block:32px 24px}
  .service-detail .detail-heading{font-size:46px}
  .service-detail :is(.detail-scope,.detail-faq) .detail-heading{font-size:46px}
  .service-detail .detail-scope .detail-heading{letter-spacing:-.04em}
  .service-detail .detail-intro{padding-block:40px 48px}
  .service-detail .detail-prose{font-size:17px;line-height:1.6}
  .service-detail .detail-scope{padding-block:12px 44px}
  .service-detail .detail-scope-heading{margin-bottom:24px}
  .service-detail .detail-card{min-height:210px;padding:22px}
  .service-detail .detail-card-icon{width:max(44px,1.5em);height:max(44px,1.5em);font-size:28px;margin-bottom:12px}
  .service-detail .detail-card h3{font-size:22px}
  .service-detail .detail-card p{font-size:16px;line-height:1.5}
  .service-detail .detail-process-inner{padding:40px}
  .service-detail .detail-process-heading{gap:48px}
  .service-detail .detail-process-heading>p{font-size:16px}
  .service-detail .detail-steps{gap:24px;margin-top:32px}
  .service-detail .detail-step-number{width:48px;height:48px;margin-bottom:14px}
  .service-detail .detail-step:not(:last-child)::before{left:48px;right:-12px;top:24px}
  .service-detail .detail-step-arrow{right:-14px;top:17px}
  .service-detail .detail-step h3{font-size:20px}
  .service-detail .detail-step p{font-size:16px;line-height:1.5;margin-top:8px}
  .service-detail .detail-faq{padding-block:44px}
  .service-detail .detail-faq summary{font-size:18px}
  .service-detail .detail-faq details>p{font-size:16px}
  .service-detail .detail-final{margin:0;border-radius:0}
  .service-detail .detail-final h2{font-size:52px}
  .service-detail .detail-final-inner>div{min-width:0}
  /* V5.6.13: keep the action to the right, using 3/4 of the free space as its gap. */
  .service-detail .detail-final-inner{grid-template-columns:minmax(0,max-content) minmax(30px,3fr) auto minmax(0,1fr);column-gap:0}
  .service-detail .detail-final-button{grid-column:3}
  .service-detail main .eco-button{min-width:0;max-width:100%;white-space:normal}
  /* V5.6.12: clear the uppercase italic ascenders on these two desktop titles. */
  .service-detail--social .detail-title>em{margin-top:22px}
  .service-detail--software .detail-title>em{margin-top:8px}
}

/* Let enlarged mobile text wrap instead of widening clipped service content. */
@media(max-width:767.98px){
  .service-detail:not(.service-detail--web) .detail-title{overflow-wrap:anywhere}
  .service-detail:not(.service-detail--web) .detail-final-inner{grid-template-columns:minmax(0,1fr)}
  .service-detail:not(.service-detail--web) .detail-final-inner>div{min-width:0}
  .service-detail:not(.service-detail--web) main .eco-button{min-width:0;max-width:100%;white-space:normal}
  .service-detail:not(.service-detail--web) main .eco-button>.ph{flex-shrink:0}
  .service-detail--seo :is(.detail-intro-grid,.detail-process-heading){grid-template-columns:minmax(0,1fr)}
  .service-detail--seo :is(.detail-intro .detail-heading,.detail-process .detail-heading,.detail-final h2){overflow-wrap:anywhere}
  .service-detail--server .detail-step h3{overflow-wrap:anywhere}
}

/* V5.6.14: separate only the title runs with measured optical crowding. */
.service-detail--web .detail-title>em{margin-top:.08em}
.service-detail--social .detail-title{line-height:1.08}
@media(max-width:1119.98px){
  .service-detail--social .detail-title>em{margin-top:.2em;line-height:1.04}
  .service-detail--software .detail-title>em,.service-detail--brand .detail-title>em{margin-top:.16em}
}
@media(max-width:767.98px){
  .service-detail--web .detail-title>em{overflow-wrap:anywhere}
  .service-detail--seo .detail-title{line-height:1.08}
}
@media(max-width:359.98px){
  .service-detail--social .detail-title{line-height:1.14}
}