/* High-impact service detail pages */
.service-spotlight-page .page-header,
.service-spotlight-page .services-details,
.service-spotlight-page .slider-text-one { display: none; }

.service-spotlight {
    --ss-ink: #07182f;
    --ss-deep: #031028;
    --ss-accent: #20c9ff;
    --ss-accent-rgb: 32, 201, 255;
    --ss-soft: #eff9ff;
    color: var(--ss-ink);
    overflow: hidden;
    background: #fff;
}
.service-spotlight--software { --ss-ink: #12203c; --ss-deep: #07112c; --ss-accent: #3bd8ff; --ss-accent-rgb: 59, 216, 255; --ss-soft: #eff7ff; }
.service-spotlight--mobile { --ss-ink: #291b48; --ss-deep: #190c38; --ss-accent: #f76be9; --ss-accent-rgb: 247, 107, 233; --ss-soft: #fbf3ff; }
.service-spotlight--consulting { --ss-ink: #102548; --ss-deep: #041633; --ss-accent: #36d0ff; --ss-accent-rgb: 54, 208, 255; --ss-soft: #eff8ff; }
.service-spotlight--design { --ss-ink: #3c2d20; --ss-deep: #342117; --ss-accent: #ff9d49; --ss-accent-rgb: 255, 157, 73; --ss-soft: #fff7ed; }
.service-spotlight--qa { --ss-ink: #11283b; --ss-deep: #061b2d; --ss-accent: #48dc82; --ss-accent-rgb: 72, 220, 130; --ss-soft: #effbf4; }
.service-spotlight--marketing { --ss-ink: #35203c; --ss-deep: #230e35; --ss-accent: #ff6b77; --ss-accent-rgb: 255, 107, 119; --ss-soft: #fff4f3; }
.service-spotlight *, .service-spotlight *::before, .service-spotlight *::after { box-sizing: border-box; }
.service-spotlight .container { position: relative; z-index: 1; }

.ss-hero { position: relative; min-height: 745px; display: flex; align-items: center; isolation: isolate; color: #fff; background: var(--ss-deep) center center / cover no-repeat; }
.service-spotlight--web .ss-hero { background-image: url('../images/service-spotlight/web-hero.webp'); }
.service-spotlight--software .ss-hero { background-image: url('../images/service-spotlight/software-hero.webp'); }
.service-spotlight--mobile .ss-hero { background-image: url('../images/service-spotlight/mobile-hero.webp'); }
.service-spotlight--consulting .ss-hero { background-image: url('../images/service-spotlight/consulting-hero.webp'); }
.service-spotlight--design .ss-hero { background-image: url('../images/service-spotlight/design-hero.webp'); }
.service-spotlight--qa .ss-hero { background-image: url('../images/service-spotlight/qa-hero.webp'); }
.service-spotlight--marketing .ss-hero { background-image: url('../images/service-spotlight/marketing-hero.webp'); }
.ss-hero::before { position: absolute; inset: 0; z-index: -1; content: ''; background: linear-gradient(90deg, rgba(2, 12, 31, .98) 0%, rgba(2, 12, 31, .92) 34%, rgba(2, 12, 31, .59) 55%, rgba(2, 12, 31, .08) 100%); }
.service-spotlight--mobile .ss-hero::before { background: linear-gradient(90deg, rgba(24, 7, 48, .98) 0%, rgba(24, 7, 48, .91) 34%, rgba(24, 7, 48, .58) 55%, rgba(24, 7, 48, .1) 100%); }
.service-spotlight--design .ss-hero::before { background: linear-gradient(90deg, rgba(44, 25, 15, .98) 0%, rgba(44, 25, 15, .9) 35%, rgba(44, 25, 15, .55) 57%, rgba(44, 25, 15, .1) 100%); }
.service-spotlight--marketing .ss-hero::before { background: linear-gradient(90deg, rgba(31, 8, 38, .98) 0%, rgba(31, 8, 38, .9) 35%, rgba(31, 8, 38, .5) 58%, rgba(31, 8, 38, .08) 100%); }
.ss-hero::after { position: absolute; inset: 0; z-index: -1; content: ''; opacity: .18; background-image: radial-gradient(rgba(var(--ss-accent-rgb), .85) 1px, transparent 1px); background-size: 25px 25px; mask-image: linear-gradient(90deg, #000, transparent 62%); }
.ss-hero__content { max-width: 720px; padding: 128px 0 105px; }
.ss-hero { min-height: 600px; }
.ss-hero__content { padding: 104px 0 82px; }
/* Keep service banners focused on the service and its essential message. */
.ss-hero .ss-eyebrow,
.ss-hero .ss-actions,
.ss-hero .ss-signal-row { display: none; }
.ss-eyebrow, .ss-label { display: inline-block; color: var(--ss-accent); font-size: 12px; font-weight: 800; letter-spacing: 1.65px; line-height: 1.3; text-transform: uppercase; }
.ss-eyebrow { margin: 0 0 21px; padding: 8px 14px; border: 1px solid rgba(var(--ss-accent-rgb), .58); border-radius: 99px; background: rgba(var(--ss-accent-rgb), .1); }
.ss-hero h1 { max-width: 650px; margin: 0; color: #fff; font-family: var(--thm-font-2, 'Prompt', sans-serif); font-size: clamp(40px, 4.4vw, 64px); font-weight: 600; letter-spacing: -1.4px; line-height: 1.1; }
.ss-hero h1 span { color: var(--ss-accent); }
.ss-hero__lead { max-width: 620px; margin: 28px 0 34px; color: rgba(255,255,255,.84); font-size: 18px; line-height: 1.75; }
.ss-actions { display: flex; flex-wrap: wrap; gap: 13px; }
.ss-button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 13px 23px; border: 1px solid var(--ss-accent); border-radius: 4px; background: var(--ss-accent); color: #07142a; font-size: 13px; font-weight: 800; line-height: 1; text-decoration: none; transition: .25s ease; }
.ss-button:hover { border-color: #fff; background: #fff; color: var(--ss-ink); }
.ss-button--ghost { border-color: rgba(255,255,255,.35); background: rgba(255,255,255,.06); color: #fff; }
.ss-button--ghost:hover { border-color: var(--ss-accent); background: rgba(var(--ss-accent-rgb), .16); color: #fff; }
.ss-signal-row { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 57px; border: 1px solid rgba(155, 223, 255, .25); border-radius: 7px; background: rgba(2, 17, 39, .58); backdrop-filter: blur(8px); }
.ss-signal-row div { padding: 17px 19px; border-right: 1px solid rgba(155, 223, 255, .2); }
.ss-signal-row div:last-child { border-right: 0; }
.ss-signal-row b { display: block; color: var(--ss-accent); font-size: 13px; font-weight: 800; }
.ss-signal-row span { display: block; margin-top: 5px; color: rgba(255,255,255,.7); font-size: 12px; line-height: 1.4; }

.ss-intro { padding: 120px 0 112px; background: #fff; }
.ss-intro__grid { display: grid; grid-template-columns: minmax(0, .95fr) minmax(390px, 1.05fr); align-items: center; gap: 82px; }
.ss-intro h2, .ss-heading h2, .ss-showcase h2, .ss-cta h2 { margin: 14px 0 0; color: var(--ss-ink); font-family: var(--thm-font-2, 'Prompt', sans-serif); font-size: clamp(34px, 3.45vw, 51px); font-weight: 700; letter-spacing: -1.25px; line-height: 1.12; }
.ss-intro p { margin: 22px 0 0; color: #5e6b7e; font-size: 17px; line-height: 1.8; }
.ss-checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px 20px; margin: 32px 0 0; padding: 0; list-style: none; }
.ss-checks li { position: relative; padding-left: 27px; color: #293a53; font-size: 14px; font-weight: 700; line-height: 1.45; }
.ss-checks li::before { position: absolute; top: 1px; left: 0; display: grid; width: 18px; height: 18px; border-radius: 50%; place-items: center; content: '✓'; background: var(--ss-accent); color: #06152e; font-size: 11px; font-weight: 900; }
.ss-image-frame { position: relative; padding: 11px; border-radius: 10px; background: linear-gradient(135deg, var(--ss-accent), var(--ss-deep)); box-shadow: 0 30px 65px rgba(9, 38, 77, .18); }
.ss-image-frame::after { position: absolute; right: -28px; bottom: -28px; z-index: -1; width: 185px; height: 185px; border-radius: 50%; content: ''; background: rgba(var(--ss-accent-rgb), .12); }
.ss-image-frame img, .ss-showcase__image img { display: block; width: 100%; }
.ss-image-frame img { border-radius: 5px; }
.ss-image-note { position: absolute; right: -24px; bottom: 30px; max-width: 220px; padding: 15px 17px; border-left: 4px solid var(--ss-accent); border-radius: 4px; background: var(--ss-deep); box-shadow: 0 15px 35px rgba(1, 15, 36, .29); color: #fff; }
.ss-image-note b { display: block; color: var(--ss-accent); font-size: 13px; font-weight: 800; }
.ss-image-note span { display: block; margin-top: 5px; color: rgba(255,255,255,.72); font-size: 12px; line-height: 1.5; }

.ss-capabilities { position: relative; padding: 110px 0 119px; background: var(--ss-soft); }
.ss-capabilities::before { position: absolute; inset: 0; opacity: .34; content: ''; background-image: radial-gradient(rgba(var(--ss-accent-rgb), .35) 1px, transparent 1px); background-size: 26px 26px; }
.ss-heading { position: relative; max-width: 735px; margin: 0 auto 53px; text-align: center; }
.ss-heading p { margin: 17px 0 0; color: #637086; font-size: 17px; line-height: 1.7; }
.ss-card-grid { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.ss-card-grid article { min-height: 244px; padding: 31px 28px; border: 1px solid rgba(var(--ss-accent-rgb), .23); border-radius: 9px; background: rgba(255,255,255,.93); box-shadow: 0 15px 32px rgba(20, 55, 99, .06); transition: transform .25s ease, box-shadow .25s ease; }
.ss-card-grid article:hover { transform: translateY(-7px); box-shadow: 0 23px 38px rgba(20, 55, 99, .14); }
.ss-card-grid i { display: grid; width: 53px; height: 53px; margin-bottom: 23px; border-radius: 8px; place-items: center; background: linear-gradient(135deg, var(--ss-deep), var(--ss-accent)); color: #fff; font-size: 20px; }
.ss-card-grid h3 { margin: 0 0 10px; color: var(--ss-ink); font-family: var(--thm-font-2, 'Prompt', sans-serif); font-size: 20px; font-weight: 700; }
.ss-card-grid p { margin: 0; color: #667388; font-size: 14px; line-height: 1.7; }

.ss-showcase { padding: 120px 0; background: #fff; }
.ss-showcase__grid { display: grid; grid-template-columns: minmax(390px, 1.04fr) minmax(0, .96fr); align-items: center; gap: 83px; }
.ss-showcase__image { position: relative; overflow: hidden; border-radius: 10px; box-shadow: 0 30px 60px rgba(10, 37, 75, .2); }
.ss-showcase__image::after { position: absolute; inset: 0; content: ''; pointer-events: none; background: linear-gradient(135deg, rgba(var(--ss-accent-rgb), .19), transparent 45%); }
.ss-showcase__copy p { margin: 21px 0 0; color: #5f6d81; font-size: 17px; line-height: 1.8; }
.ss-steps { display: grid; gap: 14px; margin-top: 31px; }
.ss-steps div { display: flex; align-items: center; gap: 15px; padding: 13px 0; border-bottom: 1px solid #e4ebf1; }
.ss-steps b { display: grid; flex: 0 0 43px; width: 43px; height: 43px; border-radius: 50%; place-items: center; background: rgba(var(--ss-accent-rgb), .14); color: var(--ss-deep); font-size: 12px; font-weight: 900; }
.ss-steps span { color: #263a53; font-size: 15px; font-weight: 700; }

.ss-cta { position: relative; padding: 108px 0; overflow: hidden; background: linear-gradient(130deg, var(--ss-deep), #071f46 58%, #073a71); color: #fff; text-align: center; }
.service-spotlight--mobile .ss-cta { background: linear-gradient(130deg, #1b0c3f, #43136d 56%, #962d9d); }
.service-spotlight--design .ss-cta { background: linear-gradient(130deg, #392112, #74401d 56%, #bf6d22); }
.service-spotlight--qa .ss-cta { background: linear-gradient(130deg, #061e31, #064c47 56%, #138348); }
.service-spotlight--marketing .ss-cta { background: linear-gradient(130deg, #270d38, #6c184f 56%, #cf4155); }
.ss-cta::before, .ss-cta::after { position: absolute; border: 1px solid rgba(var(--ss-accent-rgb), .29); border-radius: 50%; content: ''; }
.ss-cta::before { top: -270px; left: -130px; width: 520px; height: 520px; }
.ss-cta::after { right: -160px; bottom: -315px; width: 620px; height: 620px; }
.ss-cta h2 { max-width: 800px; margin-right: auto; margin-left: auto; color: #fff; }
.ss-cta p { max-width: 640px; margin: 19px auto 31px; color: rgba(255,255,255,.77); font-size: 17px; line-height: 1.7; }

/* QA and marketing have their own high-impact service moments. */
.ss-assurance { position: relative; padding: 118px 0; overflow: hidden; background: #061b2d; color: #fff; }
.ss-assurance::before { position: absolute; inset: 0; opacity: .3; content: ''; background-image: radial-gradient(rgba(72, 220, 130, .72) 1px, transparent 1px); background-size: 24px 24px; }
.ss-assurance__inner { position: relative; display: grid; grid-template-columns: minmax(0, .85fr) minmax(450px, 1.15fr); align-items: center; gap: 70px; }
.ss-assurance h2, .ss-marketing-loop h2 { margin: 14px 0 0; color: #fff; font-family: var(--thm-font-2, 'Prompt', sans-serif); font-size: clamp(34px, 3.5vw, 50px); font-weight: 700; letter-spacing: -1.1px; line-height: 1.13; }
.ss-assurance__gates { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.ss-assurance__gates span { position: relative; display: grid; min-height: 145px; place-items: center; border: 1px solid rgba(83, 233, 145, .38); border-radius: 8px; background: rgba(8, 58, 64, .58); color: rgba(255,255,255,.82); font-size: 13px; font-weight: 700; text-align: center; }
.ss-assurance__gates b { display: block; margin-bottom: 10px; color: #52df87; font-size: 29px; font-weight: 800; }
.ss-marketing-loop { position: relative; padding: 114px 0; overflow: hidden; color: #fff; text-align: center; background: linear-gradient(135deg, #2a0e3a, #641841 53%, #a7324a); }
.ss-marketing-loop::before { position: absolute; top: -260px; left: 50%; width: 640px; height: 640px; border: 1px solid rgba(255, 199, 92, .32); border-radius: 50%; content: ''; transform: translateX(-50%); }
.ss-marketing-loop__inner { position: relative; max-width: 900px; margin: 0 auto; }
.ss-marketing-loop p { max-width: 620px; margin: 19px auto 32px; color: rgba(255,255,255,.78); font-size: 17px; line-height: 1.75; }
.ss-marketing-loop__inner > div { display: flex; justify-content: center; gap: 14px; }
.ss-marketing-loop b { display: grid; width: 130px; height: 130px; border: 1px solid rgba(255, 215, 107, .55); border-radius: 50%; place-items: center; background: rgba(45, 9, 47, .36); color: #ffd96f; font-size: 27px; font-weight: 800; line-height: 1; box-shadow: 0 0 25px rgba(255, 112, 101, .16); }
.ss-marketing-loop small { display: block; margin-top: 8px; color: #fff; font-size: 10px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; }

/* Scroll choreography: attached by service-spotlight.js */
.ss-reveal { opacity: 0; transform: translate3d(0, 34px, 0); transition: opacity .72s ease, transform .72s cubic-bezier(.2, .65, .3, 1); transition-delay: var(--ss-reveal-delay, 0ms); will-change: opacity, transform; }
.ss-reveal--left { transform: translate3d(-42px, 0, 0); }
.ss-reveal--right { transform: translate3d(42px, 0, 0); }
.ss-reveal.is-visible { opacity: 1; transform: translate3d(0, 0, 0); }

@media (prefers-reduced-motion: reduce) {
    .ss-reveal, .ss-reveal--left, .ss-reveal--right { opacity: 1; transform: none; transition: none; }
}

@media (max-width: 991px) {
    .ss-intro__grid, .ss-showcase__grid { grid-template-columns: 1fr; gap: 55px; }
    .ss-intro__grid > div:first-child { max-width: 720px; }
    .ss-image-frame, .ss-showcase__image { max-width: 720px; }
    .ss-card-grid { grid-template-columns: repeat(2, 1fr); }
    .ss-assurance__inner { grid-template-columns: 1fr; gap: 45px; }
}
@media (max-width: 767px) {
    .ss-hero { min-height: auto; background-position: 59% center; }
    .ss-hero::before { background: linear-gradient(90deg, rgba(2, 12, 31, .97), rgba(2, 12, 31, .72)); }
    .service-spotlight--mobile .ss-hero::before { background: linear-gradient(90deg, rgba(24, 7, 48, .97), rgba(24, 7, 48, .7)); }
    .service-spotlight--design .ss-hero::before { background: linear-gradient(90deg, rgba(44, 25, 15, .97), rgba(44, 25, 15, .7)); }
    .service-spotlight--marketing .ss-hero::before { background: linear-gradient(90deg, rgba(31, 8, 38, .97), rgba(31, 8, 38, .7)); }
    .ss-hero__content { padding: 88px 0 64px; }
    .ss-hero h1 { font-size: 36px; font-weight: 600; letter-spacing: -1px; }
    .ss-hero__lead { font-size: 16px; }
    .ss-signal-row { grid-template-columns: 1fr; margin-top: 42px; }
    .ss-signal-row div { border-right: 0; border-bottom: 1px solid rgba(155, 223, 255, .2); }
    .ss-signal-row div:last-child { border-bottom: 0; }
    .ss-intro, .ss-capabilities, .ss-showcase { padding: 76px 0; }
    .ss-intro__grid, .ss-showcase__grid { gap: 42px; }
    .ss-checks, .ss-card-grid { grid-template-columns: 1fr; }
    .ss-card-grid article { min-height: 0; }
    .ss-image-note { right: 12px; bottom: 12px; }
    .ss-cta { padding: 78px 0; }
    .ss-assurance, .ss-marketing-loop { padding: 76px 0; }
    .ss-assurance__gates { grid-template-columns: repeat(2, 1fr); }
    .ss-assurance__gates span { min-height: 112px; }
    .ss-marketing-loop__inner > div { flex-wrap: wrap; }
    .ss-marketing-loop b { width: 108px; height: 108px; font-size: 23px; }
}