/* ==========================================================================
   SERVICE DETAIL PAGES (shared by the 5 service pages). Loaded wherever the
   page contains 'service-hero' (atimi_page_has_section).
   Source: Services/Mobile_app_development.html, values from a computed-style
   render at 1920/1470/1280/1024/980/900/820/760/390.
   HERO: full-bleed image, .hero-shade gradients (::before), blurred blue
   radial glow bottom-right (::after), H1 only. No entrance animation (the
   design's v6 block disables it on #hero-title).
   Deviation: the design's <=820 rule (min(100% - 28px, 680px), centred) is a
   homepage leak that puts the H1 at 70/41/14px while the intro below sits at
   48/24px. The shell follows the site frame instead.
   ========================================================================== */

.service-hero{position:relative;display:flex!important;flex-direction:row!important;align-items:flex-end!important;width:100%!important;max-width:none!important;min-height:650px;padding:0!important;margin:0!important;gap:0!important;overflow:hidden;background:#02090f;isolation:isolate}

/* Media */
.service-hero>.service-hero-media{position:absolute!important;inset:0!important;z-index:0;display:block!important;width:100%!important;max-width:none!important;height:100%!important;padding:0!important;margin:0!important;overflow:hidden}
.service-hero .service-hero-image,.service-hero .service-hero-image .elementor-widget-container{position:absolute!important;inset:0;width:100%!important;height:100%!important;margin:0!important;padding:0!important}
.service-hero .service-hero-image img{display:block;width:100%!important;height:100%!important;max-width:none!important;object-fit:cover;object-position:50% 50%}

/* Shade (design .hero-shade): left read mask over a top/bottom vignette */
.service-hero::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(2,9,15,.94) 0%,rgba(2,9,15,.82) 30%,rgba(2,9,15,.48) 52%,rgba(2,9,15,.10) 78%,rgba(2,9,15,.08) 100%),linear-gradient(180deg,rgba(2,9,15,.36),rgba(2,9,15,0) 40%,rgba(2,9,15,.68))}

/* Glow (design .hero::after) */
.service-hero::after{content:"";position:absolute;right:-9%;bottom:-40%;z-index:2;width:68%;height:70%;pointer-events:none;background:radial-gradient(rgba(50,192,233,.16),rgba(50,192,233,0) 66%);filter:blur(18px)}

/* Shell: site frame (header 7.3), content vertically centred like the design */
.service-hero>.service-hero-shell{position:relative;z-index:3;display:block!important;width:min(1280px,calc(100% - 160px))!important;max-width:none!important;margin:auto!important;padding:184px 0 92px!important}
.service-hero .service-hero-title{margin:0!important}
.service-hero .service-hero-title .elementor-heading-title{max-width:12ch;margin:0;color:#fff;font-family:var(--font-heading,Poppins),Poppins,sans-serif;font-size:80px;font-weight:500;line-height:1.06;letter-spacing:-.015em;text-align:left;text-wrap:balance}

@media (max-width:1439px){.service-hero>.service-hero-shell{width:min(1280px,calc(100% - 96px))!important}}
@media (max-width:980px){
  .service-hero>.service-hero-shell{padding-top:180px!important}
  .service-hero .service-hero-title .elementor-heading-title{font-size:64px}
}
@media (max-width:820px){.service-hero>.service-hero-shell{padding-top:104px!important}}
@media (max-width:760px){
  .service-hero{min-height:680px}
  .service-hero .service-hero-image img{object-position:68% 50%}
  .service-hero::before{background:linear-gradient(180deg,rgba(2,9,15,.52),rgba(2,9,15,.08) 31%,rgba(2,9,15,.78) 78%,#02090f),linear-gradient(90deg,rgba(2,9,15,.34),rgba(2,9,15,0) 72%)}
  .service-hero>.service-hero-shell{width:calc(100% - 48px)!important;padding:104px 0 66px!important}
  .service-hero .service-hero-title .elementor-heading-title{font-size:48px}
}
/* ==========================================================================
   SHARED: section tones (design data-section-tone, final v9 block).
   Radial colour pool top-left (-left) or top-right (-right) on #030A11.
   ========================================================================== */
.service-tone{position:relative;overflow:hidden;border-top:1px solid rgba(255,255,255,.06);background-color:#030a11}
.service-tone--blue-left{--accent:#32c0e9;background:radial-gradient(104% 132% at 8% -20%,rgba(0,131,193,.46) 0%,rgba(0,131,193,.20) 30%,rgba(0,131,193,.055) 55%,rgba(3,10,17,0) 76%),#030a11!important}
.service-tone--blue-right{--accent:#32c0e9;background:radial-gradient(104% 132% at 92% -20%,rgba(0,131,193,.46) 0%,rgba(0,131,193,.20) 30%,rgba(0,131,193,.055) 55%,rgba(3,10,17,0) 76%),#030a11!important}
.service-tone--green-left{--accent:#0bd3c5;background:radial-gradient(104% 132% at 8% -20%,rgba(11,211,197,.32) 0%,rgba(11,211,197,.15) 30%,rgba(11,211,197,.045) 55%,rgba(3,10,17,0) 76%),#030a11!important}
.service-tone--green-right{--accent:#0bd3c5;background:radial-gradient(104% 132% at 92% -20%,rgba(11,211,197,.32) 0%,rgba(11,211,197,.15) 30%,rgba(11,211,197,.045) 55%,rgba(3,10,17,0) 76%),#030a11!important}
.service-tone--purple-left{--accent:#976ab8;background:radial-gradient(104% 132% at 8% -20%,rgba(151,106,184,.40) 0%,rgba(151,106,184,.17) 30%,rgba(151,106,184,.05) 55%,rgba(3,10,17,0) 76%),#030a11!important}
.service-tone--purple-right{--accent:#976ab8;background:radial-gradient(104% 132% at 92% -20%,rgba(151,106,184,.40) 0%,rgba(151,106,184,.17) 30%,rgba(151,106,184,.05) 55%,rgba(3,10,17,0) 76%),#030a11!important}
@media (max-width:700px){
  .service-tone[class*="-left"]{background-position:14% -12%!important}
  .service-tone[class*="-right"]{background-position:86% -12%!important}
}

/* SHARED: section frame (same rail as the header), type, reveal states */
.service-shell{position:relative;z-index:1;width:min(1280px,calc(100% - 160px))!important;max-width:none!important;margin:0 auto!important;padding:0!important}
@media (max-width:1439px){.service-shell{width:min(1280px,calc(100% - 96px))!important}}
@media (max-width:760px){.service-shell{width:calc(100% - 48px)!important}}
.service-h2 .elementor-heading-title{margin:0;color:#fff;font-family:var(--font-heading,Poppins),Poppins,sans-serif;font-size:50px;font-weight:500;line-height:1.12;letter-spacing:-.015em}
@media (max-width:1024px){.service-h2 .elementor-heading-title{font-size:42px}}
@media (max-width:700px){.service-h2 .elementor-heading-title{font-size:34px}}
.service-body,.service-body p{color:#fff;font-family:Inter,sans-serif;font-size:18px;font-weight:400;line-height:1.6}
.service-body p{margin:0 0 24px}
.service-body p:last-child{margin-bottom:0}
@media (max-width:760px){.service-body,.service-body p{font-size:17px}}

/* Reveal (design [data-reveal] + .heading-word). Hidden states only arm once the script has run. */
html.svc-reveal-ready .service-reveal{opacity:0;transform:translate3d(0,20px,0);transition:opacity .58s cubic-bezier(.22,1,.36,1),transform .58s cubic-bezier(.22,1,.36,1)}
html.svc-reveal-ready .service-reveal.is-visible{opacity:1;transform:none}
.svc-words{overflow:hidden;display:inline-flex;flex-wrap:wrap;column-gap:.26em}
.svc-word{display:inline-block;transform:translate3d(0,112%,0);opacity:.01;transition:transform .78s cubic-bezier(.22,1,.36,1),opacity .78s cubic-bezier(.22,1,.36,1);transition-delay:calc(var(--word) * 55ms)}
.svc-words.is-visible .svc-word{transform:none;opacity:1}
@media (prefers-reduced-motion:reduce){html.svc-reveal-ready .service-reveal,.svc-word{opacity:1!important;transform:none!important;transition:none!important}}

/* ==========================================================================
   INTRO (design section.intro, tone blue-left)
   ========================================================================== */
.service-intro{display:block!important;width:100%!important;max-width:none!important;margin:0!important;padding:120px 0!important}
.service-intro::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 13% 80%,rgba(0,131,193,.12),rgba(0,131,193,0) 28%),radial-gradient(circle at 90% 18%,rgba(11,211,197,.07),rgba(11,211,197,0) 26%)}
.service-intro-grid{display:grid!important;grid-template-columns:500px minmax(0,700px);gap:80px!important;align-items:start}
.service-intro-grid>.e-con{width:auto!important;max-width:none!important;min-width:0;padding:0!important;margin:0!important}
.service-intro-side{position:relative;display:block!important}
.service-intro-side::before{content:"";position:absolute;top:-24px;left:0;width:72px;max-width:100%;height:2px;border-radius:999px;background:var(--accent,#32c0e9)}
.service-intro-copy{display:block!important}
.service-intro-copy p{max-width:700px}
@media (max-width:980px){
  .service-intro{padding:96px 0!important}
  .service-intro-grid{grid-template-columns:minmax(0,1fr);gap:28px!important}
}
@media (max-width:760px){.service-intro{padding:72px 0!important}}
@media (max-width:700px){.service-intro-side::before{top:-20px}}
/* Editor safety net: reveal states never hide content in the Elementor editor. */
.elementor-editor-active .service-reveal,.elementor-element-edit-mode.service-reveal,.elementor-editor-active .svc-word{opacity:1!important;transform:none!important;transition:none!important}

/* ==========================================================================
   SHARED: standard content section (design .section + .section-grid).
   Heading column 500px + copy up to 700px, gap 80. One column at <=980.
   Used by most middle sections. Tone comes from a service-tone--* class.
   ========================================================================== */
.service-section{display:block!important;width:100%!important;max-width:none!important;margin:0!important;padding:120px 0!important}
.service-split{display:grid!important;grid-template-columns:500px minmax(0,700px);gap:80px!important;align-items:start}
.service-split>.e-con{width:auto!important;max-width:none!important;min-width:0;padding:0!important;margin:0!important}
.service-split-side{position:relative;display:block!important}
.service-split-side::before{content:"";position:absolute;top:-24px;left:0;width:72px;max-width:100%;height:2px;border-radius:999px;background:var(--accent,#32c0e9)}
.service-split-copy{display:block!important}
.service-split-copy p{max-width:700px}
@media (max-width:980px){
  .service-section{padding:96px 0!important}
  .service-split{grid-template-columns:minmax(0,1fr);gap:28px!important}
  .service-split-copy{max-width:700px!important}
}
@media (max-width:760px){.service-section{padding:72px 0!important}}
@media (max-width:700px){.service-split-side::before{top:-20px}}
/* Elementor gives every .e-con a 0.3s background transition; tone sections have no hover state, so the glow should not slide when crossing 700px. */
.service-tone{transition:none!important}

/* ==========================================================================
   SHARED: ruled list (design .ruled-list / .ruled-item + .section-context).
   Built as a Text Editor widget: optional lead-in <p>, then a <ul>.
   Dot is absolutely positioned so inline formatting inside an item cannot
   break the layout. Design geometry: 24px dot column + 16px gap = 40px.
   Note: the design hardcodes a blue halo (rgba(50,192,233,.1)) on every dot,
   including purple sections. Kept as designed.
   ========================================================================== */
.service-ruled p{margin:0 0 24px!important}
.service-ruled ul:not(.elementor-editor-element-settings){list-style:none!important;margin:0!important;padding:0!important}
.service-ruled ul:not(.elementor-editor-element-settings) li{position:relative;margin:0!important;padding:18px 0 18px 40px!important;border-bottom:1px solid rgba(255,255,255,.13);color:#fff;font-family:Inter,sans-serif;font-size:18px;font-weight:500;line-height:1.6;list-style:none!important}
.service-ruled ul:not(.elementor-editor-element-settings) li::before{content:"";position:absolute;left:0;top:50%;width:10px;height:10px;margin-top:-5px;border-radius:50%;background:var(--accent,#32c0e9);box-shadow:0 0 0 5px rgba(50,192,233,.1)}
.service-ruled ul:not(.elementor-editor-element-settings) li::marker{content:none}
@media (max-width:760px){.service-ruled ul:not(.elementor-editor-element-settings) li{font-size:17px}}

/* Editor overlay toolbar is also a ul inside the widget: every list rule excludes .elementor-editor-element-settings. */
/* Staggered list items (design .stagger-list: 15px, .5s, 70ms per item) */
html.svc-reveal-ready .service-stagger ul:not(.elementor-editor-element-settings) li{opacity:0;transform:translate3d(0,15px,0);transition:opacity .5s cubic-bezier(.22,1,.36,1),transform .5s cubic-bezier(.22,1,.36,1);transition-delay:calc(var(--stagger-index,0) * 70ms)}
html.svc-reveal-ready .service-stagger.is-visible ul:not(.elementor-editor-element-settings) li{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){html.svc-reveal-ready .service-stagger ul:not(.elementor-editor-element-settings) li{opacity:1!important;transform:none!important;transition:none!important}}
.elementor-editor-active .service-stagger ul:not(.elementor-editor-element-settings) li{opacity:1!important;transform:none!important;transition:none!important}
/* ==========================================================================
   SHARED: inline links in service copy (design .inline-link). Applies to any
   link typed in a Text Editor, so the style survives editing. font:inherit
   beats the kit's `.elementor-kit-9 a {font-size:18px;font-weight:500}`.
   ========================================================================== */
.service-body a{font:inherit!important;color:#fff!important;text-decoration:none!important;background:linear-gradient(#32c0e9,#32c0e9) left bottom/100% 1px no-repeat;transition:color .25s,background-size .3s}
.service-body a:hover,.service-body a:focus-visible{color:#32c0e9!important;background-size:0 1px}

/* ==========================================================================
   SHARED: approach list (design .approach-list / .approach-item, final v3).
   Each item = article container > Heading h3 + Text Editor.
   Desktop: 220px label | 28px gap | copy, with a 2px accent bar 15px left of
   the copy. <=760 (design) and when the list is under 560px wide (deviation:
   the design leaves a 100px text column at 1024): stacked, 16px gaps, 1px
   accent line between label and copy.
   ========================================================================== */
.service-approach-list{display:grid!important;gap:14px!important;margin-top:24px!important;container-type:inline-size}
.service-approach-item{display:grid!important;grid-template-columns:220px minmax(0,1fr);gap:28px!important;padding:25px 0!important;border-bottom:1px solid rgba(255,255,255,.13);width:auto!important;max-width:none!important}
.service-approach-item:first-of-type{border-top:1px solid rgba(255,255,255,.13)}
.service-approach-item>.elementor-element{width:auto!important;max-width:none!important;min-width:0;margin:0!important}
.service-approach-item .service-h3 .elementor-heading-title{margin:0;color:#fff;font-family:var(--font-heading,Poppins),Poppins,sans-serif;font-size:25px;font-weight:500;line-height:1.28;letter-spacing:-.015em}
.service-approach-copy{position:relative}
.service-approach-copy p{margin:0!important}
.service-approach-copy::before{content:"";position:absolute;top:0;bottom:0;left:-15px;width:2px;border-radius:999px;background:var(--accent,#32c0e9)}
@container (max-width:559px){
  .service-approach-item{grid-template-columns:minmax(0,1fr);gap:16px!important}
  .service-approach-copy{padding-top:17px}
  .service-approach-copy::before{top:0;bottom:auto;left:0;width:100%;height:1px;border-radius:0}
}
@media (max-width:760px){
  .service-approach-item{grid-template-columns:minmax(0,1fr);gap:16px!important}
  .service-approach-copy{padding-top:17px}
  .service-approach-copy::before{top:0;bottom:auto;left:0;width:100%;height:1px;border-radius:0}
  .service-approach-item .service-h3 .elementor-heading-title{font-size:21px}
}

/* Stagger for non-list items (design .reveal-list: 70ms per item) */
html.svc-reveal-ready .service-stagger .service-stagger-item{opacity:0;transform:translate3d(0,15px,0);transition:opacity .5s cubic-bezier(.22,1,.36,1),transform .5s cubic-bezier(.22,1,.36,1);transition-delay:calc(var(--stagger-index,0) * 70ms)}
html.svc-reveal-ready .service-stagger.is-visible .service-stagger-item{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){html.svc-reveal-ready .service-stagger .service-stagger-item{opacity:1!important;transform:none!important;transition:none!important}}
.elementor-editor-active .service-stagger-item,.elementor-element-edit-mode.service-stagger-item{opacity:1!important;transform:none!important;transition:none!important}
/* Design render: '#main .section-copy p' gives each approach paragraph 24px bottom margin, so items carry 24px extra below the copy. Matched on the widget so the accent bar still spans the text only. :first-of-type because the editor inserts an overlay div as the container's first child. */
.service-approach-item>.service-approach-copy{margin-bottom:24px!important}

/* SHARED: plain bullets in copy (design .section-copy ul/li). 18px at every width, as designed. */
.service-bullets ul:not(.elementor-editor-element-settings){list-style:none!important;margin:0 0 24px!important;padding:0!important}
.service-bullets ul:not(.elementor-editor-element-settings):last-child{margin-bottom:0!important}
.service-bullets ul:not(.elementor-editor-element-settings) li{position:relative;margin:0!important;padding:0 0 18px 26px!important;color:#fff;font-size:18px!important;line-height:1.6;list-style:none!important}
.service-bullets ul:not(.elementor-editor-element-settings) li::before{content:"";position:absolute;left:0;top:.63em;width:10px;height:10px;border-radius:50%;background:var(--accent,#32c0e9);box-shadow:0 0 0 5px rgba(50,192,233,.11)}

/* SHARED: ruled list in two columns (design .columns-list). One column <=760, and when the widget is under 560px wide (deviation: design gives 153px columns at 1024). */
.service-ruled--columns{container-type:inline-size}
.service-ruled--columns ul:not(.elementor-editor-element-settings){display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:48px;row-gap:0}
.service-ruled--columns ul:not(.elementor-editor-element-settings) li{min-height:68px}
@media (max-width:980px){.service-ruled--columns ul:not(.elementor-editor-element-settings){column-gap:30px}}
@container (max-width:559px){.service-ruled--columns ul:not(.elementor-editor-element-settings){grid-template-columns:minmax(0,1fr)}}
@media (max-width:760px){.service-ruled--columns ul:not(.elementor-editor-element-settings){grid-template-columns:minmax(0,1fr)}}

/* SHARED: outcome list (design .outcome-list): 13px gap, 11px purple dot with 6px purple halo, 18px at every width. */
.service-outcomes ul:not(.elementor-editor-element-settings){display:grid!important;gap:13px;list-style:none!important;margin:0!important;padding:0!important}
.service-outcomes ul:not(.elementor-editor-element-settings) li{position:relative;margin:0!important;padding:0 0 18px 28px!important;color:#fff;font-size:18px!important;line-height:1.6;list-style:none!important}
.service-outcomes ul:not(.elementor-editor-element-settings) li::before{content:"";position:absolute;left:0;top:.67em;width:11px;height:11px;border-radius:50%;background:#976ab8;box-shadow:0 0 0 6px rgba(151,106,184,.12)}

/* CTA band (design .confidence, final v17/v18) */
.service-confidence{position:relative;isolation:isolate;overflow:hidden;display:block!important;width:100%!important;max-width:none!important;margin:0!important;padding:160px 0!important;background:#030a11!important;border-top:1px solid rgba(255,255,255,.06);text-align:center;transition:none!important}
.service-confidence>.service-confidence-media{position:absolute!important;inset:0!important;z-index:0;width:100%!important;max-width:none!important;height:100%!important;padding:0!important;margin:0!important}
.service-confidence .service-confidence-image,.service-confidence .service-confidence-image .elementor-widget-container{position:absolute!important;inset:0;width:100%!important;height:100%!important;margin:0!important}
.service-confidence .service-confidence-image img{width:100%!important;height:100%!important;max-width:none!important;object-fit:cover;object-position:50% 50%;opacity:.74;filter:saturate(.92) contrast(.96)}
.service-confidence::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(3,10,17,.42),rgba(3,10,17,.28) 48%,rgba(3,10,17,.55))}
.service-confidence>.service-shell{z-index:2;max-width:760px!important;display:block!important}
.service-confidence .service-h2 .elementor-heading-title{text-align:center;margin-bottom:32px}
.service-confidence .service-body p{max-width:700px;margin-left:auto!important;margin-right:auto!important;margin-bottom:24px!important;text-align:left}
.service-confidence .service-body p:last-child{margin-bottom:0!important}
.service-cta-button{margin-top:24px!important}
.service-cta-button .elementor-button{display:flex!important;align-items:center;justify-content:center;width:fit-content;min-height:52px;margin:0 auto;padding:14px 24px!important;border:0!important;border-radius:999px!important;background:linear-gradient(110deg,#006da6 0%,#007fa0 42%,#00819a 70%,#73518e 100%)!important;box-shadow:0 14px 34px rgba(0,131,193,.25);color:#fff!important;font-family:Inter,sans-serif!important;font-size:18px!important;font-weight:500!important;line-height:1.6!important;text-decoration:none!important;transition:background .62s,box-shadow .3s}
.service-cta-button .elementor-button:hover,.service-cta-button .elementor-button:focus-visible{background:linear-gradient(110deg,#73518e 0%,#00819a 30%,#007fa0 58%,#006da6 100%)!important;box-shadow:0 17px 38px rgba(0,131,193,.34)}
.service-cta-button .elementor-button-text::after{content:"\2192";display:inline-block;margin-left:14px;transition:transform .28s}
.service-cta-button .elementor-button:hover .elementor-button-text::after,.service-cta-button .elementor-button:focus-visible .elementor-button-text::after{transform:translateX(4px)}
@media (max-width:760px){.service-confidence{padding:112px 0!important}.service-cta-button .elementor-button{font-size:17px!important}}
@media (max-width:700px){.service-confidence .service-h2 .elementor-heading-title{margin-bottom:24px}}
/* ==========================================================================
   FAQ (design .faq). Built on Elementor's nested Accordion: questions are the
   widget's item titles, answers are Text Editors inside each item.
   Elementor's own icons are hidden; the design's 25px circle is drawn on
   summary::after (horizontal bar) + summary::before (vertical bar, rotates
   90deg when open, which turns plus into minus exactly like the design).
   ========================================================================== */
.service-faq{display:block!important;width:100%!important;max-width:none!important;margin:0!important;padding:120px 0!important}
.service-faq>.service-shell{display:block!important}
.service-faq-title{margin-bottom:56px!important}
.service-faq-title .elementor-heading-title{white-space:nowrap}
.service-faq-accordion .e-n-accordion{display:block!important;border-top:1px solid rgba(255,255,255,.13)}
.service-faq-accordion .e-n-accordion-item{margin:0!important;border:0!important;border-bottom:1px solid rgba(255,255,255,.13)!important;background:none!important}
.service-faq-accordion .e-n-accordion-item-title{position:relative;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:28px!important;margin:0!important;padding:24px 0!important;border:0!important;border-radius:0!important;background:transparent!important;color:#fff!important;cursor:pointer;list-style:none}
.service-faq-accordion .e-n-accordion-item-title::-webkit-details-marker{display:none}
.service-faq-accordion .e-n-accordion-item-title-header,.service-faq-accordion .e-n-accordion-item-title-text{flex:1 1 auto;min-width:0;margin:0!important;color:#fff!important;font-family:Inter,sans-serif!important;font-size:18px!important;font-weight:600!important;line-height:1.6!important;letter-spacing:0!important;text-align:left}
.service-faq-accordion .e-n-accordion-item-title-icon{display:none!important}
.service-faq-accordion .e-n-accordion-item-title::after{content:"";flex:0 0 25px;width:25px;height:25px;box-sizing:border-box;border:1px solid rgba(226,244,252,.42);border-radius:50%;background:linear-gradient(#976ab8,#976ab8) center/9px 1px no-repeat;transition:background-color .25s,border-color .25s}
.service-faq-accordion .e-n-accordion-item-title::before{content:"";position:absolute;right:12px;top:50%;width:1px;height:9px;margin-top:-4.5px;background:#976ab8;transition:transform .25s}
.service-faq-accordion .e-n-accordion-item[open]>.e-n-accordion-item-title::after{border-color:#976ab8;background-color:rgba(151,106,184,.14)}
.service-faq-accordion .e-n-accordion-item[open]>.e-n-accordion-item-title::before{transform:rotate(90deg)}
.service-faq-accordion .e-n-accordion-item>.e-con{display:block!important;max-width:700px!important;margin:0!important;padding:0!important;border:0!important;background:none!important}
.service-faq-answer p{margin:0 0 24px!important;padding-right:52px;color:#aecbde!important;font-size:18px;line-height:1.6}
@media (max-width:980px){.service-faq{padding:96px 0!important}}
@media (max-width:760px){
  .service-faq{padding:72px 0!important}
  .service-faq-title{margin-bottom:36px!important}
  .service-faq-accordion .e-n-accordion-item-title{padding:20px 0!important}
  .service-faq-answer p{padding-right:0;font-size:17px}
}
@media (max-width:700px){
  .service-faq-title .elementor-heading-title{white-space:normal}
  .service-faq-accordion .e-n-accordion-item-title-header,.service-faq-accordion .e-n-accordion-item-title-text{font-size:17px!important}
}
@media (prefers-reduced-motion:reduce){.service-faq-accordion .e-n-accordion-item-title::before,.service-faq-accordion .e-n-accordion-item-title::after{transition:none}}
/* Testimonials: saved template 899 via a Template widget (same CPT-driven carousel as Home). Wrapper adds nothing visual. */
.service-testimonials-wrap{display:block!important;width:100%!important;max-width:none!important;padding:0!important;margin:0!important}
.service-testimonials-wrap>.elementor-widget-template{width:100%!important;max-width:none!important}

/* ==========================================================================
   DESIGN REVISION 2 (Web_app_development.html blocks service-v3-bullet-colors
   + service-v4-layout-and-tone-fixes). Add `service-rev2` to a page's section
   containers when its design file carries those blocks.
   - Bullet and outcome dots take the section accent with a white 5px halo.
   - H2s get .08em bottom padding (design: h2[data-heading-reveal]).
   Ruled-list dots are unchanged by the revision (accent + blue halo).
   ========================================================================== */
.service-rev2 .service-bullets ul:not(.elementor-editor-element-settings) li::before,.service-rev2 .service-outcomes ul:not(.elementor-editor-element-settings) li::before{background:var(--accent,#32c0e9)!important;box-shadow:0 0 0 5px rgba(255,255,255,.1)!important}
.service-rev2 .service-h2 .elementor-heading-title{padding-bottom:.08em}

/* Ruled list followed by a closing paragraph (Web "What we do"): 24px above, none below. */
.service-ruled ul:not(.elementor-editor-element-settings) + p{margin-top:24px!important}
.service-ruled p:last-child{margin-bottom:0!important}
/* Descender fix (Ron, 2026-09-26: 'g' clipped in 'Build on a stronger foundation'). The word-reveal wrapper's overflow:hidden cut descenders at line-height 1.12. Same fix as the design's service-v4 block (heading-words overflow visible), applied on every service page, Mobile included. Words start at opacity .01, so nothing shows outside the line while they slide in. */
.svc-words{overflow:visible!important}

/* Outcome list followed by a closing paragraph (Data & intelligence): design ul margin-bottom 24px. */
.service-outcomes ul:not(.elementor-editor-element-settings) + p{margin-top:24px!important}

/* Approach list followed by a closing paragraph widget (AI integration): design .approach-list + p margin-top 24px. */
.service-approach-list + .elementor-element{margin-top:24px!important}