/* ==========================================================================
   AI and Data pages -- shared redesign (assets/css/ai-pages.css)
   Moved out of ai-development-company.php on 2026-10-14 so every page in the
   "AI and Data" menu can use the same design. A page opts in with
       $page_class = "ai-dev-page ...";
       $page_css   = array('ai-pages.css');
   before including common/head.php, which then loads this file after the
   site stylesheets. Every rule is scoped to .ai-dev-page, so no other page
   is affected.
   ========================================================================== */
/* Shared on the AI and Data pages (2026-10-14): the Benefits section is matched as
   .why-coding-sprint.padd-60 (on every one of these pages that class pair is only ever
   that section; on AI Development it also carries .bgilight-grey), and intro lines as
   p:is(.width-83, .width-83W) because the other pages use the W variant; the hero as
   :is(.banner-sec.ai-banner, .banner-secW.software-bannerW, .banner-sec.custom-software-banner, .banner-sec.web-development-banner, .banner-sec.software-banner, .banner-sec.sds-hero, .banner-sec.erp-banner, .banner-sec.mvp-banner, .banner-sec.devops-banner, .banner-sec.developer-banner, .banner-sec.openai-banner) with its text box
   :is(.banner-content, .banner-contentW), the two hero builds these pages use. */

/* =====================================================================
   AI Development Company -- page redesign ("fresh look"), from 13-10-2026.
   One section at a time, each approved before the next. Everything here
   is scoped to body.ai-dev-page, so no other page is affected, and no
   wording, image or icon is changed.
   Left exactly as they are, at the client's request: header, hero,
   case studies, testimonials, FAQ and footer.
   This block sits ahead of the sections it styles so they never paint
   in their old form first.
   ===================================================================== */
.ai-dev-page {
    --ai-ink: #14081C;                      /* headings */
    --ai-body: #4E4858;                     /* body copy */
    --ai-violet: #5B0375;                   /* Primary/Voilet */
    --ai-deep: #2C023A;                     /* Primary/Deep Voilet */
    --ai-lime: #C2C904;                     /* Primary/Lime Zest */
    --ai-tint: #F7F5FA;                     /* light band, a tint of the brand violet */
    --ai-line: rgba(44, 2, 58, .10);
    --ai-radius: 16px;
    --ai-shadow: 0 1px 2px rgba(20, 8, 28, .04), 0 12px 32px rgba(44, 2, 58, .07);
    --ai-shadow-hover: 0 2px 4px rgba(20, 8, 28, .05), 0 24px 48px rgba(44, 2, 58, .14);
}

/* ---- 1. SERVICES: "Drive innovation with our AI development services" ----
   Was three centred text columns split by hairlines, each with a lime pill.
   Now three equal cards on a soft tinted band, left aligned, with a quieter
   outlined "Read More" that fills when the card is hovered.                 */
.ai-dev-page .expert-coders-sec {
    position: relative;
    padding: 96px 0;
    background: var(--ai-tint);
    overflow: hidden;
}
/* The soft colour wash that sat in two corners of this band was removed (13-10-2026):
   it was centred on the band's edges, so it stopped in a hard line where the band ends. */
.ai-dev-page .expert-coders-sec .container { position: relative; }
.ai-dev-page .expert-coders-sec .mini-container { max-width: none; }
/* In the markup the card row sits inside .heading2, so the gap between the
   intro and the cards is set on the row, not as a margin under the heading. */
.ai-dev-page .expert-coders-sec .heading2 { margin-bottom: 0; }
.ai-dev-page .expert-coders-sec .heading2:before {  /* short lime mark above the heading (decorative) */
    content: "";
    display: block;
    width: 44px;
    height: 4px;
    margin: 0 auto 22px;
    border-radius: 2px;
    background: var(--ai-lime);
}
.ai-dev-page .expert-coders-sec .heading2 h2 {
    max-width: 820px;
    margin: 0 auto 18px;
    font-size: 42px;
    line-height: 1.14;
    font-weight: 500;
    letter-spacing: -.8px;
    color: var(--ai-ink);
}
.ai-dev-page .expert-coders-sec .heading2 > p:is(.width-83, .width-83W, :not([class])) {
    width: 100%;
    max-width: 780px;
    margin: 0 auto;
    font-size: 18px;
    line-height: 1.65;
    color: var(--ai-body);
}
.ai-dev-page .expert-coders-sec .row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    margin: 52px 0 0;
}
.ai-dev-page .expert-coders-sec .row > [class*="col-"] {
    display: flex;
    width: auto;
    max-width: none;
    padding: 0;
    border: 0;
}
.ai-dev-page .expert-coders-sec .full-content-column {
    position: relative;
    align-items: flex-start;
    width: 100%;
    height: auto;
    padding: 40px 36px 40px;
    text-align: left;
    background: #FFFFFF;
    border: 1px solid var(--ai-line);
    border-radius: var(--ai-radius);
    box-shadow: var(--ai-shadow);
    overflow: hidden;
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.ai-dev-page .expert-coders-sec .full-content-column:before {   /* violet-to-lime rule that draws in on hover */
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, var(--ai-violet), var(--ai-lime));
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .4s ease;
}
.ai-dev-page .expert-coders-sec .full-content-column h3 {
    margin: 0 0 14px;
    font-size: 24px;
    line-height: 1.22;
    font-weight: 500;
    letter-spacing: -.2px;
    color: var(--ai-ink);
}
.ai-dev-page .expert-coders-sec .full-content-column p {
    margin: 0 0 30px;
    font-size: 16.5px;
    line-height: 1.7;
    color: var(--ai-body);
}
.ai-dev-page .expert-coders-sec .full-content-column .banner_btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 11px 22px;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.2;
    color: var(--ai-deep);
    background: transparent;
    border: 1.5px solid rgba(44, 2, 58, .28);
    border-radius: 999px;
    transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
.ai-dev-page .expert-coders-sec .full-content-column .banner_btn:after {   /* arrow drawn with borders (decorative) */
    content: "";
    width: 7px;
    height: 7px;
    border-top: 1.5px solid currentColor;
    border-right: 1.5px solid currentColor;
    transform: rotate(45deg);
    transition: transform .25s ease;
}
.ai-dev-page .expert-coders-sec .full-content-column:hover {
    transform: translateY(-6px);
    border-color: rgba(91, 3, 117, .22);
    box-shadow: var(--ai-shadow-hover);
}
.ai-dev-page .expert-coders-sec .full-content-column:hover:before { transform: scaleX(1); }
.ai-dev-page .expert-coders-sec .full-content-column:hover .banner_btn,
.ai-dev-page .expert-coders-sec .full-content-column .banner_btn:hover {
    background: var(--ai-deep);
    border-color: var(--ai-deep);
    color: #FFFFFF !important;          /* the shared hover rule sets these two with !important */
    font-weight: 500 !important;
}
.ai-dev-page .expert-coders-sec .full-content-column:hover .banner_btn:after { transform: translateX(3px) rotate(45deg); }

@media (max-width: 1370px) {
    .ai-dev-page .expert-coders-sec .heading2 h2 { font-size: 38px; }
    .ai-dev-page .expert-coders-sec .heading2 > p:is(.width-83, .width-83W, :not([class])) { font-size: 17px; }
    .ai-dev-page .expert-coders-sec .row { gap: 22px; }
    .ai-dev-page .expert-coders-sec .full-content-column { padding: 34px 28px 34px; }
    .ai-dev-page .expert-coders-sec .full-content-column h3 { font-size: 22px; }
    .ai-dev-page .expert-coders-sec .full-content-column p { font-size: 16px; }
}
@media (max-width: 991px) {
    .ai-dev-page .expert-coders-sec { padding: 64px 0; }
    .ai-dev-page .expert-coders-sec .heading2 h2 { font-size: 32px; letter-spacing: -.5px; }
    .ai-dev-page .expert-coders-sec .row { grid-template-columns: 1fr; gap: 18px; margin-top: 36px; }
}
@media (max-width: 575px) {
    .ai-dev-page .expert-coders-sec { padding: 48px 0; }
    .ai-dev-page .expert-coders-sec .heading2 h2 { font-size: 27px; line-height: 1.2; }
    .ai-dev-page .expert-coders-sec .heading2 > p:is(.width-83, .width-83W, :not([class])) { font-size: 16px; }
    .ai-dev-page .expert-coders-sec .full-content-column { padding: 28px 22px 28px; }
    .ai-dev-page .expert-coders-sec .full-content-column h3 { font-size: 21px; }
    .ai-dev-page .expert-coders-sec .full-content-column p { margin-bottom: 24px; }
}
@media (prefers-reduced-motion: reduce) {
    .ai-dev-page .expert-coders-sec .full-content-column,
    .ai-dev-page .expert-coders-sec .full-content-column:before,
    .ai-dev-page .expert-coders-sec .full-content-column .banner_btn,
    .ai-dev-page .expert-coders-sec .full-content-column .banner_btn:after { transition: none; }
    .ai-dev-page .expert-coders-sec .full-content-column:hover { transform: none; }
}

/* ---- 2. BANNER: "Achieve greater success with AI software development services" ----
   Was a full-width dark strip. Now a rounded panel inside the page width that
   sits across the join between the tinted band above and the white section
   below. Same picture, wording and link; the button takes the brand lime.     */
.ai-dev-page .cta-inner:is(.cta-ai, :where(.hire-dev-page .cta-inner)) {
    padding: 0;
    background: linear-gradient(180deg, var(--cta2-top, var(--ai-tint)) 0, var(--cta2-top, var(--ai-tint)) 50%, var(--cta2-bottom, #FFFFFF) 50%, var(--cta2-bottom, #FFFFFF) 100%);
}
/* The strip behind the panel takes the colours of the sections round it (default: tint above,
   white below, as on AI Development). On the Software pages the panel follows the second, white
   services block and comes before the tinted Benefits band. */
.ai-dev-page .expert-coders-sec + .expert-coders-sec + .cta-inner:is(.cta-ai, :where(.hire-dev-page .cta-inner)) { --cta2-top: #FFFFFF; }
.ai-dev-page .cta-inner:is(.cta-ai, :where(.hire-dev-page .cta-inner)):has(+ .why-coding-sprint.padd-60) { --cta2-bottom: var(--ai-tint); }
.ai-dev-page :is(.cta-ai, :where(.hire-dev-page .cta-inner)) .cta-row {
    position: relative;
    margin: 0;
    padding: 72px 64px 76px;
    border-radius: 24px;
    overflow: hidden;
    text-align: left;
    justify-content: flex-start;
    background:
        linear-gradient(100deg, #17031F 0%, rgba(34, 3, 46, .94) 36%, rgba(44, 2, 58, .58) 60%, rgba(44, 2, 58, .08) 100%),
        url('/assets/images/ai-development/ai-cta-bg.webp') center / cover no-repeat #17031F;
    box-shadow: 0 30px 60px rgba(44, 2, 58, .28);
}
.ai-dev-page :is(.cta-ai, :where(.hire-dev-page .cta-inner)) .cta-row:before {            /* soft lime glow in the lower left corner (decorative) */
    content: "";
    position: absolute;
    left: -90px;
    bottom: -150px;
    width: 440px;
    height: 330px;
    background: radial-gradient(closest-side, rgba(194, 201, 4, .20), rgba(194, 201, 4, 0));
    pointer-events: none;
}
.ai-dev-page :is(.cta-ai, :where(.hire-dev-page .cta-inner)) :is(.heading-cta, :where(.hire-dev-page .cta-row > .heading2)) {
    position: relative;
    flex: 0 1 auto;
    width: 100%;               /* not Bootstrap's col-lg-8 (two thirds): the cap below sets the measure */
    max-width: 840px;          /* room for a long title in two lines (Pen Testing: "Title should be two line") */
    padding: 0;
}
.ai-dev-page :is(.cta-ai, :where(.hire-dev-page .cta-inner)) :is(.heading-cta, :where(.hire-dev-page .cta-row > .heading2)):before {        /* the same short lime mark the section headings carry */
    content: "";
    display: block;
    width: 44px;
    height: 4px;
    margin-bottom: 24px;
    border-radius: 2px;
    background: var(--ai-lime);
}
.ai-dev-page :is(.cta-ai, :where(.hire-dev-page .cta-inner)) :is(.heading-cta, :where(.hire-dev-page .cta-row > .heading2)) h2 {
    margin: 0;
    font-size: 40px;
    line-height: 1.16;
    font-weight: 500;
    letter-spacing: -.6px;
    color: #FFFFFF;
    text-wrap: balance;        /* two even lines, not a long one and a stray word */
}
.ai-dev-page :is(.cta-ai, :where(.hire-dev-page .cta-inner)) :is(.heading-cta, :where(.hire-dev-page .cta-row > .heading2)) p:is(.width-83, .width-83W) {
    display: block;
    width: auto;
    max-width: 720px;          /* a longer intro in two lines (Hire Developer: "para text should be two line"); the one-line intros are unchanged */
    margin: 16px 0 0;
    font-size: 18px;
    line-height: 1.6;
    color: rgba(255, 255, 255, .82);
    text-wrap: balance;
}
.ai-dev-page :is(.cta-ai, :where(.hire-dev-page .cta-inner)) a.button.main-btn.btn.bg-white.tblack {
    margin-top: 34px;
    padding: 15px 32px;
    font-size: 17px;
    font-weight: 500;
    line-height: 1.2;
    color: #1B0A22;
    background: var(--ai-lime);
    border-color: var(--ai-lime);
    border-radius: 999px;
    box-shadow: 0 10px 28px rgba(194, 201, 4, .26);
    transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease, color .25s ease, border-color .25s ease;
}
.ai-dev-page :is(.cta-ai, :where(.hire-dev-page .cta-inner)) a.button.main-btn.btn.bg-white.tblack:hover {
    color: var(--ai-deep);
    background: #FFFFFF;
    border-color: #FFFFFF;
    box-shadow: 0 14px 34px rgba(11, 6, 18, .40);
    transform: translateY(-2px);
}
@media (max-width: 1370px) {
    .ai-dev-page :is(.cta-ai, :where(.hire-dev-page .cta-inner)) .cta-row { padding: 60px 52px 64px; }
    .ai-dev-page :is(.cta-ai, :where(.hire-dev-page .cta-inner)) :is(.heading-cta, :where(.hire-dev-page .cta-row > .heading2)) h2 { font-size: 36px; }
    .ai-dev-page :is(.cta-ai, :where(.hire-dev-page .cta-inner)) :is(.heading-cta, :where(.hire-dev-page .cta-row > .heading2)) p:is(.width-83, .width-83W) { font-size: 17px; }
}
@media (max-width: 991px) {
    /* the copy now runs over the artwork, so the veil is even rather than directional */
    .ai-dev-page :is(.cta-ai, :where(.hire-dev-page .cta-inner)) .cta-row {
        padding: 48px 36px 52px;
        border-radius: 20px;
        background:
            linear-gradient(180deg, rgba(23, 3, 31, .93), rgba(44, 2, 58, .84)),
            url('/assets/images/ai-development/ai-cta-bg.webp') center / cover no-repeat #17031F;
    }
    .ai-dev-page :is(.cta-ai, :where(.hire-dev-page .cta-inner)) :is(.heading-cta, :where(.hire-dev-page .cta-row > .heading2)) h2 { font-size: 30px; line-height: 1.2; }
}
@media (max-width: 575px) {
    .ai-dev-page :is(.cta-ai, :where(.hire-dev-page .cta-inner)) .cta-row { padding: 38px 24px 42px; border-radius: 16px; }
    .ai-dev-page :is(.cta-ai, :where(.hire-dev-page .cta-inner)) :is(.heading-cta, :where(.hire-dev-page .cta-row > .heading2)):before { margin-bottom: 18px; }
    .ai-dev-page :is(.cta-ai, :where(.hire-dev-page .cta-inner)) :is(.heading-cta, :where(.hire-dev-page .cta-row > .heading2)) h2 { font-size: 25px; letter-spacing: -.3px; }
    .ai-dev-page :is(.cta-ai, :where(.hire-dev-page .cta-inner)) :is(.heading-cta, :where(.hire-dev-page .cta-row > .heading2)) p:is(.width-83, .width-83W) { font-size: 16px; }
    .ai-dev-page :is(.cta-ai, :where(.hire-dev-page .cta-inner)) a.button.main-btn.btn.bg-white.tblack { margin-top: 26px; padding: 14px 26px; font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
    .ai-dev-page :is(.cta-ai, :where(.hire-dev-page .cta-inner)) a.button.main-btn.btn.bg-white.tblack { transition: none; }
    .ai-dev-page :is(.cta-ai, :where(.hire-dev-page .cta-inner)) a.button.main-btn.btn.bg-white.tblack:hover { transform: none; }
}

/* ---- 3. "AI Models We Work With" ----------------------------------------
   Was four bare logos; each one's description only appeared on hover, in a
   bordered box that replaced the logo. Now four cards in the same family as
   the services cards above, two by two: logo on a tinted panel, name and
   description beside it and always readable (so phones and tablets see them
   too). The model name is in the markup twice, once for each old state; it
   is shown once.                                                           */
.ai-dev-page .responsive-design {
    padding: 100px 0;
    background: #FFFFFF;
}
.ai-dev-page .responsive-design .mini-container-wrapper { max-width: none; }
.ai-dev-page .responsive-design .heading2:before {   /* short lime mark above the heading (decorative) */
    content: "";
    display: block;
    width: 44px;
    height: 4px;
    margin: 0 auto 22px;
    border-radius: 2px;
    background: var(--ai-lime);
}
.ai-dev-page .responsive-design .heading2 h2 {
    max-width: 820px;
    margin: 0 auto 18px;
    font-size: 42px;
    line-height: 1.14;
    font-weight: 500;
    letter-spacing: -.8px;
    color: var(--ai-ink);
}
.ai-dev-page .responsive-design .heading2 p {
    max-width: 780px;
    margin: 0 auto;
    font-size: 18px;
    line-height: 1.65;
    color: var(--ai-body);
}
.ai-dev-page .responsive-design .row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 1fr;
    gap: 28px;
    margin: 52px 0 0;
}
.ai-dev-page .responsive-design .row > [class*="col-"] {
    display: flex;
    width: auto;
    max-width: none;
    padding: 0;
}
.ai-dev-page .responsive-design .ai-modelbox {
    position: relative;
    display: grid;
    grid-template-columns: 220px 1fr;
    width: 100%;
    height: auto;
    background: #FFFFFF;
    border: 1px solid var(--ai-line);
    border-radius: var(--ai-radius);
    box-shadow: var(--ai-shadow);
    overflow: hidden;
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.ai-dev-page .responsive-design .ai-modelbox:before {   /* violet-to-lime rule that draws in on hover */
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, var(--ai-violet), var(--ai-lime));
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .4s ease;
}
.ai-dev-page .responsive-design .modelbox-logo-box,
.ai-dev-page .responsive-design .ai-modelbox:hover .modelbox-logo-box {   /* second selector cancels the old hide-on-hover */
    position: static;
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    padding: 30px 28px;
    background: var(--ai-tint);
    border-right: 1px solid var(--ai-line);
    transform: none;
}
.ai-dev-page .responsive-design .modelbox-logo-box .model_name { display: none; }   /* shown once, beside the logo */
.ai-dev-page .responsive-design .logo-icon {
    width: auto;
    max-width: 100%;
    min-width: 1px;                  /* never a 0x0 box: a lazy image with no area may not start loading */
    height: auto;
    max-height: 70px;
    min-height: 1px;
    object-fit: contain;
}
.ai-dev-page .responsive-design .modelbox-content {
    visibility: visible;
    align-items: flex-start;
    justify-content: center;
    padding: 32px 34px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    text-align: left;
}
.ai-dev-page .responsive-design .modelbox-content .model_name {
    display: block;
    margin: 0 0 10px;
    font-family: "Rubik", sans-serif;
    font-size: 22px;
    line-height: 1.25;
    font-weight: 500;
    letter-spacing: -.2px;
    color: var(--ai-ink);
}
.ai-dev-page .responsive-design .modelbox-content p {
    margin: 0;
    font-size: 16px;
    line-height: 1.7;
    color: var(--ai-body);
    text-align: left;
}
.ai-dev-page .responsive-design .ai-modelbox:hover {
    transform: translateY(-6px);
    border-color: rgba(91, 3, 117, .22);
    box-shadow: var(--ai-shadow-hover);
}
.ai-dev-page .responsive-design .ai-modelbox:hover:before { transform: scaleX(1); }

@media (max-width: 1370px) {
    .ai-dev-page .responsive-design .heading2 h2 { font-size: 38px; }
    .ai-dev-page .responsive-design .heading2 p { font-size: 17px; }
    .ai-dev-page .responsive-design .row { gap: 22px; }
    .ai-dev-page .responsive-design .ai-modelbox { grid-template-columns: 180px 1fr; }
    .ai-dev-page .responsive-design .modelbox-logo-box,
    .ai-dev-page .responsive-design .ai-modelbox:hover .modelbox-logo-box { padding: 26px 22px; }
    .ai-dev-page .responsive-design .modelbox-content { padding: 28px 28px; }
    .ai-dev-page .responsive-design .modelbox-content .model_name { font-size: 21px; }
}
@media (max-width: 1199px) {
    /* two across leaves the text column too narrow here: one card per row */
    .ai-dev-page .responsive-design .row { grid-template-columns: 1fr; grid-auto-rows: auto; gap: 18px; }
}
@media (max-width: 991px) {
    .ai-dev-page .responsive-design { padding: 64px 0; }
    .ai-dev-page .responsive-design .heading2 h2 { font-size: 32px; letter-spacing: -.5px; }
    .ai-dev-page .responsive-design .row { margin-top: 36px; }
}
@media (max-width: 575px) {
    .ai-dev-page .responsive-design { padding: 48px 0; }
    .ai-dev-page .responsive-design .heading2 h2 { font-size: 27px; line-height: 1.2; }
    .ai-dev-page .responsive-design .heading2 p { font-size: 16px; }
    /* logo above the text on phones */
    .ai-dev-page .responsive-design .ai-modelbox { grid-template-columns: 1fr; }
    .ai-dev-page .responsive-design .modelbox-logo-box,
    .ai-dev-page .responsive-design .ai-modelbox:hover .modelbox-logo-box { padding: 26px 24px; border-right: 0; border-bottom: 1px solid var(--ai-line); }
    .ai-dev-page .responsive-design .logo-icon { max-height: 54px; }
    .ai-dev-page .responsive-design .modelbox-content { padding: 24px 22px 26px; }
}
@media (prefers-reduced-motion: reduce) {
    .ai-dev-page .responsive-design .ai-modelbox,
    .ai-dev-page .responsive-design .ai-modelbox:before { transition: none; }
    .ai-dev-page .responsive-design .ai-modelbox:hover { transform: none; }
}

/* ---- 4. BENEFITS: "How AI development services benefit your business?" ----
   Was a centred heading over two columns of bullet items on a flat grey band.
   Now an editorial split: heading and intro on the left (they stay in view
   while the list scrolls past), the six benefits on the right as a ruled
   list. The brand chevron that marked each item is kept, set on a small
   white tile. No overflow rule on this section: it would stop the left
   column from sticking.                                                    */
.ai-dev-page .why-coding-sprint.padd-60 {
    padding: 100px 0;
    background: var(--ai-tint);
}
.ai-dev-page .why-coding-sprint.padd-60 .container {
    display: grid;
    grid-template-columns: 400px minmax(0, 1fr);
    column-gap: 72px;
    align-items: start;
}
.ai-dev-page .why-coding-sprint.padd-60 .heading2 {
    position: sticky;
    top: 156px;                       /* clears the fixed header */
    text-align: left;
}
.ai-dev-page .why-coding-sprint.padd-60 .heading2:before {   /* short lime mark (decorative) */
    content: "";
    display: block;
    width: 44px;
    height: 4px;
    margin: 0 0 22px;
    border-radius: 2px;
    background: var(--ai-lime);
}
.ai-dev-page .why-coding-sprint.padd-60 .heading2 h2 {
    margin: 0 0 18px;
    font-size: 42px;
    line-height: 1.14;
    font-weight: 500;
    letter-spacing: -.8px;
    color: var(--ai-ink);
    text-align: left;
}
.ai-dev-page .why-coding-sprint.padd-60 .heading2 > p:is(.width-83, .width-83W, :not([class])) {
    display: block;
    width: auto;
    max-width: none;
    margin: 0;
    font-size: 18px;
    line-height: 1.65;
    color: var(--ai-body);
}
/* The six items live in two separate column wrappers. Those wrappers are
   flattened (display: contents) so all six sit in one grid, filled a column
   at a time: the rows then share a height and the rules line up across both
   columns. Reading order is unchanged. */
.ai-dev-page .why-coding-sprint.padd-60 .row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(3, auto);
    grid-auto-flow: column;
    column-gap: 48px;
    margin: 0;
}
.ai-dev-page .why-coding-sprint.padd-60 .row > [class*="col-"],
.ai-dev-page .why-coding-sprint.padd-60 .margin-left-sec { display: contents; }
.ai-dev-page .why-coding-sprint.padd-60 .list-itme {
    position: relative;
    margin: 0;
    padding: 30px 0 30px 70px;
}
.ai-dev-page .why-coding-sprint.padd-60 .list-itme + .list-itme { border-top: 1px solid var(--ai-line); }
.ai-dev-page .why-coding-sprint.padd-60 .list-itme:first-child { padding-top: 4px; }
.ai-dev-page .why-coding-sprint.padd-60 .list-itme:last-child { padding-bottom: 0; }
/* The chevron is the existing marker image, untouched; only its box changes
   into a white tile with the mark centred in it. */
.ai-dev-page .why-coding-sprint.padd-60 .list-itme:before {
    left: 0;
    top: 30px;
    width: 48px;
    height: 48px;
    border: 1px solid var(--ai-line);
    border-radius: 14px;
    background-color: #FFFFFF;
    background-size: 26px auto;
    background-position: center;
    box-shadow: 0 6px 16px rgba(44, 2, 58, .08);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.ai-dev-page .why-coding-sprint.padd-60 .list-itme:first-child:before { top: 4px; }
.ai-dev-page .why-coding-sprint.padd-60 .list-itme:hover:before {
    border-color: rgba(91, 3, 117, .32);
    box-shadow: 0 10px 22px rgba(91, 3, 117, .16);
    transform: translateY(-2px);
}
.ai-dev-page .why-coding-sprint.padd-60 .list-itme h3 {
    margin: 0 0 10px;
    font-size: 22px;
    line-height: 1.25;
    font-weight: 500;
    letter-spacing: -.2px;
    color: var(--ai-ink);
}
.ai-dev-page .why-coding-sprint.padd-60 .list-itme p {
    max-width: none;
    margin: 0;
    font-size: 16.5px;
    line-height: 1.7;
    color: var(--ai-body);
}

@media (max-width: 1549px) {
    /* the page is narrower here: one ruled column beside the heading */
    .ai-dev-page .why-coding-sprint.padd-60 .container { grid-template-columns: minmax(300px, 36%) minmax(0, 1fr); column-gap: 56px; }
    .ai-dev-page .why-coding-sprint.padd-60 .row { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-flow: row; }
    .ai-dev-page .why-coding-sprint.padd-60 .row > [class*="col-"] + [class*="col-"] .list-itme:first-child { padding-top: 30px; border-top: 1px solid var(--ai-line); }
    .ai-dev-page .why-coding-sprint.padd-60 .row > [class*="col-"] + [class*="col-"] .list-itme:first-child:before { top: 30px; }
    .ai-dev-page .why-coding-sprint.padd-60 .row > [class*="col-"]:first-child .list-itme:last-child { padding-bottom: 30px; }
    .ai-dev-page .why-coding-sprint.padd-60 .list-itme p { max-width: 640px; }
}
@media (max-width: 1370px) {
    .ai-dev-page .why-coding-sprint.padd-60 .heading2 h2 { font-size: 38px; }
    .ai-dev-page .why-coding-sprint.padd-60 .heading2 > p:is(.width-83, .width-83W, :not([class])) { font-size: 17px; }
    .ai-dev-page .why-coding-sprint.padd-60 .list-itme p { font-size: 16px; }
}
@media (max-width: 991px) {
    /* stacked: heading on top, no longer sticky */
    .ai-dev-page .why-coding-sprint.padd-60 { padding: 64px 0; }
    .ai-dev-page .why-coding-sprint.padd-60 .container { display: block; }
    .ai-dev-page .why-coding-sprint.padd-60 .heading2 { position: static; margin-bottom: 36px; }
    .ai-dev-page .why-coding-sprint.padd-60 .heading2 h2 { font-size: 32px; letter-spacing: -.5px; }
    .ai-dev-page .why-coding-sprint.padd-60 .list-itme p { max-width: none; }
}
@media (max-width: 575px) {
    .ai-dev-page .why-coding-sprint.padd-60 { padding: 48px 0; }
    .ai-dev-page .why-coding-sprint.padd-60 .heading2 h2 { font-size: 27px; line-height: 1.2; }
    .ai-dev-page .why-coding-sprint.padd-60 .heading2 > p:is(.width-83, .width-83W, :not([class])) { font-size: 16px; }
    .ai-dev-page .why-coding-sprint.padd-60 .list-itme { padding-left: 60px; }
    .ai-dev-page .why-coding-sprint.padd-60 .list-itme:before { width: 42px; height: 42px; border-radius: 12px; background-size: 22px auto; }
    .ai-dev-page .why-coding-sprint.padd-60 .list-itme h3 { font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) {
    .ai-dev-page .why-coding-sprint.padd-60 .list-itme:before { transition: none; }
    .ai-dev-page .why-coding-sprint.padd-60 .list-itme:hover:before { transform: none; }
}

/* ---- 5. "Build your vision with bespoke AI software solutions" -------------
   Was a full-width black band. Now a rounded panel inside the page width, a
   companion to the purple banner higher up, sitting across the join between
   the tinted band above and the white section below. Same picture and
   wording. The picture still shows in greyscale and turns to colour on
   hover, as it did before; that is why it is a layer of its own, with the
   violet veil as a second layer over it.
   The panel is drawn inset by the container's 12px gutter so its edges land
   on the same content edge as everything else.                              */
.ai-dev-page .ai-vision {
    padding: 0;
    color: #FFFFFF;
    background: linear-gradient(180deg, var(--ai-tint) 0, var(--ai-tint) 50%, #FFFFFF 50%, #FFFFFF 100%);
}
.ai-dev-page .ai-vision:before,
.ai-dev-page .ai-vision:after { content: none; }            /* the old full-width picture and black layers */
.ai-dev-page .ai-vision .container:before {                 /* picture layer */
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 12px;
    right: 12px;
    border-radius: 24px;
    background: #0C0C14 url('/assets/images/ai-development/a-vision-image-bg.png') right top / cover no-repeat;
    filter: grayscale(1);
    transition: filter .45s ease;
}
.ai-dev-page .ai-vision .container:hover:before { filter: none; }
.ai-dev-page .ai-vision .container:after {                  /* violet veil over it, and the panel's shadow */
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 12px;
    right: 12px;
    border-radius: 24px;
    background: linear-gradient(100deg, #160321 0%, rgba(30, 3, 42, .95) 38%, rgba(44, 2, 58, .56) 60%, rgba(20, 6, 30, .10) 100%);
    box-shadow: 0 30px 60px rgba(44, 2, 58, .28);
    pointer-events: none;
}
.ai-dev-page .ai-vision .heading2 {
    position: relative;
    z-index: 1;
    width: auto;
    max-width: 780px;
    padding: 78px 0 78px 64px;
    text-align: left;
}
.ai-dev-page .ai-vision .heading2:before {                  /* the short lime mark the other headings carry */
    content: "";
    display: block;
    width: 44px;
    height: 4px;
    margin-bottom: 24px;
    border-radius: 2px;
    background: var(--ai-lime);
}
.ai-dev-page .ai-vision .heading2 h2 {
    margin: 0 0 20px;
    font-size: 40px;
    line-height: 1.16;
    font-weight: 500;
    letter-spacing: -.6px;
    color: #FFFFFF;
}
.ai-dev-page .ai-vision .heading2 p {
    max-width: none;
    margin: 0 0 16px;
    font-size: 17px;
    line-height: 1.75;
    color: rgba(255, 255, 255, .84);
}
.ai-dev-page .ai-vision .heading2 p:last-child { margin-bottom: 0; }

@media (max-width: 1370px) {
    .ai-dev-page .ai-vision .heading2 { max-width: 660px; padding: 66px 0 66px 52px; }
    .ai-dev-page .ai-vision .heading2 h2 { font-size: 36px; }
    .ai-dev-page .ai-vision .heading2 p { font-size: 16px; }
}
@media (max-width: 991px) {
    /* the copy now runs over the picture, so the veil is even rather than directional */
    .ai-dev-page .ai-vision .container:before,
    .ai-dev-page .ai-vision .container:after { left: 10px; right: 10px; border-radius: 20px; }
    .ai-dev-page .ai-vision .container:after { background: linear-gradient(180deg, rgba(22, 3, 33, .94), rgba(44, 2, 58, .86)); }
    .ai-dev-page .ai-vision .heading2 { max-width: none; padding: 50px 36px 54px; }
    .ai-dev-page .ai-vision .heading2 h2 { font-size: 30px; line-height: 1.2; }
}
@media (max-width: 575px) {
    .ai-dev-page .ai-vision .container:before,
    .ai-dev-page .ai-vision .container:after { border-radius: 16px; }
    .ai-dev-page .ai-vision .heading2 { padding: 38px 24px 42px; }
    .ai-dev-page .ai-vision .heading2:before { margin-bottom: 18px; }
    .ai-dev-page .ai-vision .heading2 h2 { font-size: 25px; letter-spacing: -.3px; }
}
@media (prefers-reduced-motion: reduce) {
    .ai-dev-page .ai-vision .container:before { transition: none; }
}

/* ---- 5b. BUILD YOUR VISION GRAPHIC: an AR display over the picture ----
   Thin rings, a ring of ticks and two lime arcs, like the display a headset
   shows, over the picture side of the panel. Drawn as an extra layer on the
   panel's violet veil, so it needs no markup. Its size and place step down
   with the panel so it always stays clear of the text; below 992px the text
   runs over the picture, so it is left out.                                 */
@media (min-width: 1550px) {
    .ai-dev-page .ai-vision .container:after {
        background:
            url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 360 360'><circle cx='180' cy='180' r='168' fill='none' stroke='rgba(255,255,255,.28)' stroke-width='5' stroke-dasharray='1 7'/><circle cx='180' cy='180' r='146' fill='none' stroke='rgba(255,255,255,.16)' stroke-width='1.2'/><circle cx='180' cy='180' r='96' fill='none' stroke='rgba(255,255,255,.12)' stroke-width='1.2' stroke-dasharray='4 6'/><path d='M229.9 42.8A146 146 0 0 1 323.8 154.6' fill='none' stroke='%23C2C904' stroke-width='3' stroke-linecap='round'/><path d='M107.0 306.4A146 146 0 0 1 53.6 253.0' fill='none' stroke='%23C2C904' stroke-width='3' stroke-linecap='round'/><circle cx='229.9' cy='42.8' r='3.5' fill='%23C2C904'/><circle cx='53.6' cy='253.0' r='3.5' fill='%23C2C904'/><circle cx='325.5' cy='264.0' r='3.5' fill='%23C2C904'/><circle cx='96.9' cy='132.0' r='3.5' fill='%23C2C904'/><g stroke='rgba(255,255,255,.4)' stroke-width='1.2' stroke-linecap='round'><path d='M180 4v22M180 334v22M4 180h22M334 180h22'/></g></svg>") right calc(19% - 68px) center / 360px 360px no-repeat,
            linear-gradient(100deg, #160321 0%, rgba(30, 3, 42, .95) 38%, rgba(44, 2, 58, .56) 60%, rgba(20, 6, 30, .10) 100%);
    }
}
@media (min-width: 1200px) and (max-width: 1549px) {
    .ai-dev-page .ai-vision .container:after {
        background:
            url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 360 360'><circle cx='180' cy='180' r='168' fill='none' stroke='rgba(255,255,255,.28)' stroke-width='5' stroke-dasharray='1 7'/><circle cx='180' cy='180' r='146' fill='none' stroke='rgba(255,255,255,.16)' stroke-width='1.2'/><circle cx='180' cy='180' r='96' fill='none' stroke='rgba(255,255,255,.12)' stroke-width='1.2' stroke-dasharray='4 6'/><path d='M229.9 42.8A146 146 0 0 1 323.8 154.6' fill='none' stroke='%23C2C904' stroke-width='3' stroke-linecap='round'/><path d='M107.0 306.4A146 146 0 0 1 53.6 253.0' fill='none' stroke='%23C2C904' stroke-width='3' stroke-linecap='round'/><circle cx='229.9' cy='42.8' r='3.5' fill='%23C2C904'/><circle cx='53.6' cy='253.0' r='3.5' fill='%23C2C904'/><circle cx='325.5' cy='264.0' r='3.5' fill='%23C2C904'/><circle cx='96.9' cy='132.0' r='3.5' fill='%23C2C904'/><g stroke='rgba(255,255,255,.4)' stroke-width='1.2' stroke-linecap='round'><path d='M180 4v22M180 334v22M4 180h22M334 180h22'/></g></svg>") right 40px center / 300px 300px no-repeat,
            linear-gradient(100deg, #160321 0%, rgba(30, 3, 42, .95) 38%, rgba(44, 2, 58, .56) 60%, rgba(20, 6, 30, .10) 100%);
    }
}
@media (min-width: 992px) and (max-width: 1199px) {
    .ai-dev-page .ai-vision .container:after {
        background:
            url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 360 360'><circle cx='180' cy='180' r='168' fill='none' stroke='rgba(255,255,255,.28)' stroke-width='5' stroke-dasharray='1 7'/><circle cx='180' cy='180' r='146' fill='none' stroke='rgba(255,255,255,.16)' stroke-width='1.2'/><circle cx='180' cy='180' r='96' fill='none' stroke='rgba(255,255,255,.12)' stroke-width='1.2' stroke-dasharray='4 6'/><path d='M229.9 42.8A146 146 0 0 1 323.8 154.6' fill='none' stroke='%23C2C904' stroke-width='3' stroke-linecap='round'/><path d='M107.0 306.4A146 146 0 0 1 53.6 253.0' fill='none' stroke='%23C2C904' stroke-width='3' stroke-linecap='round'/><circle cx='229.9' cy='42.8' r='3.5' fill='%23C2C904'/><circle cx='53.6' cy='253.0' r='3.5' fill='%23C2C904'/><circle cx='325.5' cy='264.0' r='3.5' fill='%23C2C904'/><circle cx='96.9' cy='132.0' r='3.5' fill='%23C2C904'/><g stroke='rgba(255,255,255,.4)' stroke-width='1.2' stroke-linecap='round'><path d='M180 4v22M180 334v22M4 180h22M334 180h22'/></g></svg>") right 24px center / 210px 210px no-repeat,
            linear-gradient(100deg, #160321 0%, rgba(30, 3, 42, .95) 38%, rgba(44, 2, 58, .56) 60%, rgba(20, 6, 30, .10) 100%);
    }
}
/* ---- 6. PROCESS: "Comprehensive process for successful AI implementation" ----
   Second take: the client asked for the full container width and a more
   professional design. The row was a 1000px strip of small circles on a
   dashed line. It now runs edge to edge of the container as five equal
   cards in the same family as the services cards: icon tile at the top,
   label beneath, and a small arrow marker between one card and the next.
   Same icons and labels. The carousel that takes over on small screens is
   the existing one; only its items are restyled.                           */
.ai-dev-page .team-model-sec { padding: 100px 0; }
.ai-dev-page .team-model-sec .heading2 { margin-bottom: 52px; }
.ai-dev-page .team-model-sec .heading2:before {   /* short lime mark above the heading (decorative) */
    content: "";
    display: block;
    width: 44px;
    height: 4px;
    margin: 0 auto 22px;
    border-radius: 2px;
    background: var(--ai-lime);
}
.ai-dev-page .team-model-sec .heading2 h2 {
    max-width: 820px;
    margin: 0 auto 18px;
    font-size: 42px;
    line-height: 1.14;
    font-weight: 500;
    letter-spacing: -.8px;
    color: var(--ai-ink);
}
.ai-dev-page .team-model-sec .heading2 p {
    max-width: 820px;
    margin: 0 auto;
    font-size: 18px;
    line-height: 1.65;
    color: var(--ai-body);
}
.ai-dev-page .team-model-sec .team-model-ai { max-width: none; }          /* was held to 1000px */
.ai-dev-page .team-model-sec .team-model:before { display: none; }        /* the old dashed connecting line */
/* Room round the row for the cards' shadows and hover lift; the carousel clips
   at this box. The negative margins give the space back, so nothing moves. */
.ai-dev-page .team-model-sec .owl-stage-outer {
    margin: -12px -10px -44px;
    padding: 12px 10px 44px;
}
/* equal-height cards */
.ai-dev-page .team-model-sec .owl-stage { display: flex; }
/* the carousel's float clearfix would count as a sixth flex item and steal a gap's width */
.ai-dev-page .team-model-sec .owl-stage:after { display: none; }
.ai-dev-page .team-model-sec .owl-item { display: flex; float: none; }
.ai-dev-page .team-model-sec .team-item {
    position: relative;
    width: 100%;
    gap: 22px;
    padding: 36px 20px 32px;
    background: #FFFFFF;
    border: 1px solid var(--ai-line);
    border-radius: var(--ai-radius);
    box-shadow: var(--ai-shadow);
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.ai-dev-page .team-model-sec .team-item:hover {
    transform: translateY(-6px);
    border-color: rgba(91, 3, 117, .22);
    box-shadow: var(--ai-shadow-hover);
}
/* Third take on the icon (13-10-2026): the ring round a second ring round a
   disc made a small icon look smaller. It is now one plain rounded tile with
   the same icon shown larger and in the brand violet. The icons themselves
   are untouched; only their size and colour are set here. */
.ai-dev-page .team-model-sec .item-icon {
    width: 84px;
    height: 84px;
    padding: 0;
    border: 0;
    border-radius: 22px;
    background: var(--ai-tint);
    box-shadow: inset 0 0 0 1px var(--ai-line);
}
/* No animation on the tiles: the looping step highlight was removed on request
   (13-10-2026). The icons are still. */
.ai-dev-page .team-model-sec .item-icon-inner {
    padding: 0;
    background: none;
}
.ai-dev-page .team-model-sec .inner-bg { padding: 0; background: none; }
.ai-dev-page .team-model-sec .inner-bg svg {
    width: 44px;
    height: 44px;
    fill: var(--ai-violet);
}
.ai-dev-page .team-model-sec .item-title {
    font-size: 16px;
    line-height: 1.45;
    color: var(--ai-body);
}
.ai-dev-page .team-model-sec .item-title span {
    margin-top: 3px;
    font-size: 19px;
    line-height: 1.3;
    font-weight: 500;
    color: var(--ai-ink);
}

/* Arrow marker between one card and the next (decorative): a small white disc
   on the gap, with a chevron drawn from two borders. Only from 1200px up,
   where all five cards are on screen; below that the row slides and a marker
   would be cut off at the edge. */
@media (min-width: 1200px) {
    /* Nothing slides at this width, so the carousel's clipping is not needed: without it
       the cards' shadows are no longer cut off at the left and right. */
    .ai-dev-page .team-model-sec .owl-stage-outer { margin: 0; padding: 0; overflow: visible; }
    /* All five cards are on screen from here up and nothing slides, so the row is laid
       out by CSS rather than by the widths the carousel script writes in: five equal
       columns with a 20px gap, flush with the content edge on both sides. */
    .ai-dev-page .team-model-sec .owl-stage { width: 100% !important; gap: 20px; transform: none !important; }
    .ai-dev-page .team-model-sec .owl-item { flex: 1 1 0; width: auto !important; min-width: 0; margin-right: 0 !important; }
    .ai-dev-page .team-model-sec .owl-item:not(:last-child) .team-item:after {
        content: "";
        position: absolute;
        top: 50%;
        right: -26px;                 /* centred on the 20px gap */
        z-index: 2;
        width: 32px;
        height: 32px;
        margin-top: -16px;
        border: 1px solid var(--ai-line);
        border-radius: 50%;
        background: #FFFFFF;
        box-shadow: 0 4px 12px rgba(44, 2, 58, .10);
    }
    .ai-dev-page .team-model-sec .owl-item:not(:last-child) .team-item:before {
        content: "";
        position: absolute;
        top: 50%;
        right: -12px;
        z-index: 3;
        width: 7px;
        height: 7px;
        margin-top: -4px;
        border-top: 2px solid var(--ai-violet);
        border-right: 2px solid var(--ai-violet);
        transform: rotate(45deg);
    }
}

@media (max-width: 1199px) {
    /* Here the row slides and has to stay clipped, so the cards take a tighter shadow
       that sits under the card and does not reach the clipped sides. */
    .ai-dev-page .team-model-sec .team-item { box-shadow: 0 12px 20px -14px rgba(44, 2, 58, .28); }
    .ai-dev-page .team-model-sec .team-item:hover { box-shadow: 0 18px 26px -16px rgba(44, 2, 58, .36); }
}
@media (max-width: 1370px) {
    .ai-dev-page .team-model-sec .heading2 h2 { font-size: 38px; }
    .ai-dev-page .team-model-sec .heading2 p { font-size: 17px; }
    .ai-dev-page .team-model-sec .team-item { padding: 30px 16px 28px; }
    .ai-dev-page .team-model-sec .item-title span { font-size: 18px; }
}
@media (max-width: 991px) {
    .ai-dev-page .team-model-sec { padding: 64px 0; }
    .ai-dev-page .team-model-sec .heading2 { margin-bottom: 36px; }
    .ai-dev-page .team-model-sec .heading2 h2 { font-size: 32px; letter-spacing: -.5px; }
}
@media (max-width: 575px) {
    .ai-dev-page .team-model-sec { padding: 48px 0; }
    .ai-dev-page .team-model-sec .heading2 h2 { font-size: 27px; line-height: 1.2; }
    .ai-dev-page .team-model-sec .heading2 p { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
    .ai-dev-page .team-model-sec .team-item { transition: none; }
    .ai-dev-page .team-model-sec .team-item:hover { transform: none; }
}

/* ---- 7. BANNER: "We build successful AI software for endless capabilities" ----
   Second take (the client asked for something more professional than the
   centred, glowing band). A restrained call-to-action bar: deep violet, no
   glows, heading and line on the left, button on the right. The bright
   magenta wash is gone; the band's picture is still there, under a dark
   violet veil. Same wording and link.
   The 50px gap the shared rule puts above the band is dropped here, because
   the section before it already ends with its own spacing.                  */
.ai-dev-page .flexible-sec .row.cta-between {
    margin-top: 0;
    padding: 60px 64px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 24px;
    overflow: hidden;
    background:
        linear-gradient(120deg, rgba(23, 3, 31, .96) 0%, rgba(44, 2, 58, .94) 55%, rgba(62, 5, 84, .92) 100%),
        url(/assets/images/gradient@2x.webp) center / cover no-repeat #2C023A;   /* same picture as the shared rule, in its lighter .webp form */
    box-shadow: 0 24px 48px rgba(44, 2, 58, .22);
}
.ai-dev-page .flexible-sec .cta-between:before { display: none; }      /* the magenta multiply wash */
.ai-dev-page .flexible-sec .cta-between .heading2 {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "mark  btn"
        "title btn"
        "text  btn";
    column-gap: 56px;
    align-items: center;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    text-align: left;
}
.ai-dev-page .flexible-sec .cta-between .heading2:before {   /* the short lime mark the other headings carry */
    content: "";
    grid-area: mark;
    width: 44px;
    height: 4px;
    margin-bottom: 20px;
    border-radius: 2px;
    background: var(--ai-lime);
}
.ai-dev-page .flexible-sec .cta-between .heading2 h2 {
    grid-area: title;
    max-width: 760px;
    margin: 0 0 12px;
    font-size: 36px;
    line-height: 1.2;
    font-weight: 500;
    letter-spacing: -.5px;
    color: #FFFFFF;
}
.ai-dev-page .flexible-sec .cta-between .heading2 p {
    grid-area: text;
    max-width: 760px;
    margin: 0;
    font-size: 18px;
    line-height: 1.6;
    color: rgba(255, 255, 255, .80);
}
.ai-dev-page .flexible-sec .cta-between .heading2 p .text-next-line { display: inline; }   /* one flowing line; the wording is untouched */
.ai-dev-page .flexible-sec .cta-between .cta-btn-inner {
    grid-area: btn;
    margin: 0;
}
.ai-dev-page .flexible-sec .cta-between a.button.main-btn.btn.bg-white.tblack {
    margin-top: 0;
    padding: 17px 36px;
    font-size: 17px;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
    color: #1B0A22;
    background: var(--ai-lime);
    border-color: var(--ai-lime);
    border-radius: 999px;
    box-shadow: none;
    transition: transform .25s ease, background-color .25s ease, color .25s ease, border-color .25s ease;
}
.ai-dev-page .flexible-sec .cta-between a.button.main-btn.btn.bg-white.tblack:hover {
    color: var(--ai-deep);
    background: #FFFFFF;
    border-color: #FFFFFF;
    transform: translateY(-2px);
}
@media (max-width: 1370px) {
    .ai-dev-page .flexible-sec .row.cta-between { padding: 52px 48px; }
    .ai-dev-page .flexible-sec .cta-between .heading2 { column-gap: 40px; }
    .ai-dev-page .flexible-sec .cta-between .heading2 h2 { font-size: 32px; }
    .ai-dev-page .flexible-sec .cta-between .heading2 p { font-size: 17px; }
}
@media (max-width: 991px) {
    /* stacked: button under the text */
    .ai-dev-page .flexible-sec .row.cta-between { padding: 44px 36px 48px; border-radius: 20px; }
    .ai-dev-page .flexible-sec .cta-between .heading2 {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "mark" "title" "text" "btn";
    }
    .ai-dev-page .flexible-sec .cta-between .heading2 h2 { font-size: 28px; }
    .ai-dev-page .flexible-sec .cta-between .cta-btn-inner { margin-top: 28px; justify-self: start; }
}
@media (max-width: 575px) {
    .ai-dev-page .flexible-sec .row.cta-between { padding: 36px 24px 40px; border-radius: 16px; }
    .ai-dev-page .flexible-sec .cta-between .heading2:before { margin-bottom: 16px; }
    .ai-dev-page .flexible-sec .cta-between .heading2 h2 { font-size: 24px; letter-spacing: -.3px; }
    .ai-dev-page .flexible-sec .cta-between .heading2 p { font-size: 16px; }
    .ai-dev-page .flexible-sec .cta-between .cta-btn-inner { margin-top: 24px; }
    .ai-dev-page .flexible-sec .cta-between a.button.main-btn.btn.bg-white.tblack { padding: 15px 28px; font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
    .ai-dev-page .flexible-sec .cta-between a.button.main-btn.btn.bg-white.tblack { transition: none; }
    .ai-dev-page .flexible-sec .cta-between a.button.main-btn.btn.bg-white.tblack:hover { transform: none; }
}

/* ---- 7b. BANNER GRAPHIC: the button drawn as a chip ----
   A decorative line drawing round the button: an outline hugging it like a
   chip package, pins fanning out above and below to small pads (the middle
   ones lime) and two traces running from its right side to the panel edge.
   It hangs off the button's own wrapper, so it fits whatever the button
   says (Book Consultation, Get in Touch...). Below 992px the button moves
   under the text, so the drawing is not shown.
   The strip behind the panel takes its colours from the sections around it
   (top half = the section above, bottom half = the one below), so the
   panel never sits in a white strip between two tinted bands.               */
.ai-dev-page .flexible-sec {
    background: linear-gradient(180deg, var(--cta-top, #FFFFFF) 0, var(--cta-top, #FFFFFF) 50%, var(--cta-bottom, #FFFFFF) 50%, var(--cta-bottom, #FFFFFF) 100%);
}
.ai-dev-page :is(.expert-coders-sec, .why-coding-sprint.padd-60, .industry-sec, .cs-sec, .news-sec) + .flexible-sec { --cta-top: var(--ai-tint); }
.ai-dev-page .flexible-sec:has(+ :is(.expert-coders-sec, .why-coding-sprint.padd-60, .industry-sec, .cs-sec, .news-sec), + style + :is(.cs-sec, .news-sec)) { --cta-bottom: var(--ai-tint); }   /* the case-study include prints a <style> before its section */
/* Industries has a 60px top margin in style.css, which left a white gap under the strip */
.ai-dev-page .flexible-sec + :is(.expert-coders-sec, .why-coding-sprint.padd-60, .industry-sec, .cs-sec, .news-sec) { margin-top: 0; }

.ai-dev-page .flexible-sec .cta-between .cta-btn-inner {
    position: relative;
    isolation: isolate;
    display: flex;
}
.ai-dev-page .flexible-sec .cta-between .cta-btn-inner:before {    /* pins and traces (decorative) */
    content: "";
    position: absolute;
    z-index: -1;
    top: 50%;
    right: -200px;
    left: -200px;
    height: 360px;
    transform: translateY(-50%);
    background:
        url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 560 360'><g fill='none' stroke='rgba(255,255,255,.2)' stroke-width='1.4' stroke-linejoin='round'><path d='M216 144 V128 L176 88 V82'/><path d='M216 216 V232 L176 272 V278'/><path d='M248 144 V128 L230 110 V96'/><path d='M248 216 V232 L230 250 V264'/><path d='M280 144 V86'/><path d='M280 216 V274'/><path d='M312 144 V128 L330 110 V96'/><path d='M312 216 V232 L330 250 V264'/><path d='M344 144 V128 L384 88 V82'/><path d='M344 216 V232 L384 272 V278'/></g><circle cx='176' cy='82' r='4.5' fill='%232C023A' stroke='rgba(255,255,255,.55)' stroke-width='1.5'/><circle cx='176' cy='278' r='4.5' fill='%232C023A' stroke='rgba(255,255,255,.55)' stroke-width='1.5'/><circle cx='230' cy='96' r='4.5' fill='%232C023A' stroke='rgba(255,255,255,.55)' stroke-width='1.5'/><circle cx='230' cy='264' r='4.5' fill='%232C023A' stroke='rgba(255,255,255,.55)' stroke-width='1.5'/><circle cx='280' cy='86' r='5.5' fill='%23C2C904'/><circle cx='280' cy='274' r='5.5' fill='%23C2C904'/><circle cx='330' cy='96' r='4.5' fill='%232C023A' stroke='rgba(255,255,255,.55)' stroke-width='1.5'/><circle cx='330' cy='264' r='4.5' fill='%232C023A' stroke='rgba(255,255,255,.55)' stroke-width='1.5'/><circle cx='384' cy='82' r='4.5' fill='%232C023A' stroke='rgba(255,255,255,.55)' stroke-width='1.5'/><circle cx='384' cy='278' r='4.5' fill='%232C023A' stroke='rgba(255,255,255,.55)' stroke-width='1.5'/></svg>") center / 560px 360px no-repeat,
        url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 360'><g fill='none' stroke='rgba(255,255,255,.2)' stroke-width='1.4' stroke-linejoin='round'><path d='M10 170 H38 L54 154 H200'/><path d='M10 190 H38 L54 206 H200'/></g></svg>") right center / 200px 360px no-repeat;
    pointer-events: none;
}
.ai-dev-page .flexible-sec .cta-between .cta-btn-inner:after {     /* the outline hugging the button (decorative) */
    content: "";
    position: absolute;
    z-index: -1;
    inset: -10px;
    border: 1.2px solid rgba(255, 255, 255, .18);
    border-radius: 999px;
    pointer-events: none;
}
@media (max-width: 991px) {
    .ai-dev-page .flexible-sec .cta-between .cta-btn-inner:before,
    .ai-dev-page .flexible-sec .cta-between .cta-btn-inner:after { display: none; }
}

/* ---- 8. "Business Industries" ----------------------------------------------
   The shared picture-and-text block, restyled for this page only. The picture
   ran to the edge of the window on a flat grey band; here it sits inside the
   page width in a rounded frame, on the light tinted band, with the text
   beside it. The eight industries were a tall single column of chevron
   lines; they are now two columns of small white tiles, each keeping its
   chevron. Same picture, heading, paragraphs and industry names.           */
.ai-dev-page .industry-sec.sam-why-panel {
    padding: 100px 0;
    background: var(--ai-tint);
}
.ai-dev-page .industry-sec .home_n_heading {
    margin: 0 0 18px;
    font-size: 42px;
    line-height: 1.14;
    font-weight: 500;
    letter-spacing: -.8px;
    color: var(--ai-ink);
}
.ai-dev-page .industry-sec .home_n_heading:before {   /* short lime mark above the heading (decorative) */
    content: "";
    display: block;
    width: 44px;
    height: 4px;
    margin: 0 0 22px;
    border-radius: 2px;
    background: var(--ai-lime);
}
.ai-dev-page .industry-sec .home_n_text {
    margin: 0;
    font-size: 18px;
    line-height: 1.65;
    color: var(--ai-body);
}
.ai-dev-page .industry-sec ul.industry-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 30px 0;
}
.ai-dev-page .industry-sec ul.industry-list li {
    display: flex;                    /* text centred in the tile when a row-mate wraps to two lines */
    align-items: center;
    margin: 0;
    padding: 14px 16px 14px 56px;
    background: #FFFFFF;
    border: 1px solid var(--ai-line);
    border-radius: 12px;
    font-family: "Inter", sans-serif;
    font-size: 16.5px;
    line-height: 1.4;
    font-weight: 500;
    color: var(--ai-ink);
    transition: border-color .25s ease, box-shadow .25s ease;
}
.ai-dev-page .industry-sec ul.industry-list li:before {   /* the existing chevron, centred on the tile's height */
    left: 16px;
    top: 50%;
    width: 26px;
    height: 24px;
    margin-top: -12px;
}
.ai-dev-page .industry-sec ul.industry-list li:hover {
    border-color: rgba(91, 3, 117, .28);
    box-shadow: 0 8px 20px rgba(44, 2, 58, .08);
}
.ai-dev-page .industry-sec .sam-why-img img {
    border-radius: 20px;
    box-shadow: 0 24px 48px rgba(44, 2, 58, .16);
}
@media (min-width: 992px) {
    /* picture back inside the page width: a normal column, as tall as the text beside it */
    .ai-dev-page .industry-sec.sam-why-panel > .container > .row { min-height: 0; align-items: stretch; }
    .ai-dev-page .industry-sec.sam-why-panel.sam-why-reverse .col-lg-6:first-child {
        padding: 0 12px 0 72px;
        align-self: center;
    }
    .ai-dev-page .industry-sec.sam-why-panel.sam-why-reverse .col-lg-6:last-child { padding: 0 0 0 12px; }
    .ai-dev-page .industry-sec.sam-why-panel.sam-why-reverse .sam-why-img {
        position: relative;
        top: auto;
        bottom: auto;
        left: auto;
        right: auto;
        width: auto;
        height: 100%;
        min-height: 460px;
    }
    .ai-dev-page .industry-sec .sam-why-img img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 20px;
    }
}
@media (max-width: 1370px) {
    .ai-dev-page .industry-sec .home_n_heading { font-size: 38px; }
    .ai-dev-page .industry-sec .home_n_text { font-size: 17px; }
}
@media (min-width: 992px) and (max-width: 1199px) {
    .ai-dev-page .industry-sec.sam-why-panel.sam-why-reverse .col-lg-6:first-child { padding-left: 44px; }
}
@media (max-width: 991px) {
    .ai-dev-page .industry-sec.sam-why-panel { padding: 64px 0; }
    .ai-dev-page .industry-sec.sam-why-panel .col-lg-6:first-child { padding-top: 0; padding-bottom: 0; }
    .ai-dev-page .industry-sec .home_n_heading { font-size: 32px; letter-spacing: -.5px; }
    .ai-dev-page .industry-sec .sam-why-img { margin-top: 36px; }
}
@media (max-width: 575px) {
    .ai-dev-page .industry-sec.sam-why-panel { padding: 48px 0; }
    .ai-dev-page .industry-sec .home_n_heading { font-size: 27px; line-height: 1.2; }
    .ai-dev-page .industry-sec .home_n_text { font-size: 16px; }
    .ai-dev-page .industry-sec ul.industry-list { gap: 10px; margin: 24px 0; }
    .ai-dev-page .industry-sec ul.industry-list li { padding: 12px 12px 12px 46px; font-size: 15.5px; }
    .ai-dev-page .industry-sec ul.industry-list li:before { left: 12px; width: 22px; height: 20px; margin-top: -10px; }
    .ai-dev-page .industry-sec .sam-why-img img { border-radius: 16px; }
}
@media (max-width: 399px) {
    .ai-dev-page .industry-sec ul.industry-list { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
    .ai-dev-page .industry-sec ul.industry-list li { transition: none; }
}

/* ---- 9. "Why Coding Sprint?" ------------------------------------------------
   Was a full-width black band with the picture bleeding in from the left and
   the text over the dark half. Now a light two-column block that mirrors the
   Industries section above it: text on the left, the same picture on the
   right in a rounded frame. The six reasons become a ruled list, each with
   its chevron mark on a small violet tile. Same picture, wording and marks.
   The picture is a CSS background (there is no <img> in the markup), so the
   frame is drawn by a pseudo-element on the row.                            */
.ai-dev-page .why-ai-coding-sprint {
    padding: 100px 0;
    color: var(--ai-body);
    background: #FFFFFF none;
}
.ai-dev-page .why-ai-coding-sprint .row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 72px;
    align-items: stretch;
    margin: 0;
}
.ai-dev-page .why-ai-coding-sprint .row > [class*="col-"] {
    width: auto;
    max-width: none;
    padding: 0;
    align-self: center;
}
.ai-dev-page .why-ai-coding-sprint .row:after {            /* the picture, framed */
    content: "";
    min-height: 520px;
    border-radius: 20px;
    background: #0B0612 url('/assets/images/ai-development/why-bg-ai.webp') 14% center / cover no-repeat;
    box-shadow: 0 24px 48px rgba(44, 2, 58, .18);
}
.ai-dev-page .why-ai-coding-sprint .heading2:before {      /* short lime mark above the heading (decorative) */
    content: "";
    display: block;
    width: 44px;
    height: 4px;
    margin: 0 0 22px;
    border-radius: 2px;
    background: var(--ai-lime);
}
.ai-dev-page .why-ai-coding-sprint .heading2 h2 {
    margin: 0 0 18px;
    font-size: 42px;
    line-height: 1.14;
    font-weight: 500;
    letter-spacing: -.8px;
    color: var(--ai-ink);
}
.ai-dev-page .why-ai-coding-sprint .heading2 > p:is(.width-83, .width-83W, :not([class])) {
    display: block;
    width: auto;
    max-width: 600px;
    margin: 0;
    font-size: 18px;
    line-height: 1.65;
    color: var(--ai-body);
}
.ai-dev-page .why-ai-coding-sprint .list-itme {
    position: relative;
    margin: 0;
    padding: 18px 0 18px 60px;
    border-top: 1px solid var(--ai-line);
}
.ai-dev-page .why-ai-coding-sprint .heading2 + .list-itme { margin-top: 30px; }
.ai-dev-page .why-ai-coding-sprint .list-itme:last-child { border-bottom: 1px solid var(--ai-line); }
/* The mark is the existing image, untouched; only its box becomes a violet tile. */
.ai-dev-page .why-ai-coding-sprint .list-itme:before {
    left: 0;
    top: 50%;
    width: 40px;
    height: 40px;
    margin-top: -20px;
    border-radius: 10px;
    background-color: var(--ai-deep);
    background-size: 22px auto;
    background-position: center;
}
.ai-dev-page .why-ai-coding-sprint .list-itme h3 {
    margin: 0;
    font-size: 19px;
    line-height: 1.35;
    font-weight: 500;
    letter-spacing: -.1px;
    color: var(--ai-ink);
}

@media (max-width: 1370px) {
    .ai-dev-page .why-ai-coding-sprint .row { column-gap: 56px; }
    .ai-dev-page .why-ai-coding-sprint .heading2 h2 { font-size: 38px; }
    .ai-dev-page .why-ai-coding-sprint .heading2 > p:is(.width-83, .width-83W, :not([class])) { font-size: 17px; }
    .ai-dev-page .why-ai-coding-sprint .list-itme h3 { font-size: 18px; }
}
@media (max-width: 991px) {
    /* stacked: text first, picture under it */
    .ai-dev-page .why-ai-coding-sprint { padding: 64px 0; }
    .ai-dev-page .why-ai-coding-sprint .row { grid-template-columns: minmax(0, 1fr); row-gap: 36px; }
    .ai-dev-page .why-ai-coding-sprint .row:after { min-height: 320px; }
    .ai-dev-page .why-ai-coding-sprint .heading2 h2 { font-size: 32px; letter-spacing: -.5px; }
    .ai-dev-page .why-ai-coding-sprint .heading2 > p:is(.width-83, .width-83W, :not([class])) { max-width: none; }
}
@media (max-width: 575px) {
    .ai-dev-page .why-ai-coding-sprint { padding: 48px 0; }
    .ai-dev-page .why-ai-coding-sprint .row:after { min-height: 240px; border-radius: 16px; }
    .ai-dev-page .why-ai-coding-sprint .heading2 h2 { font-size: 27px; line-height: 1.2; }
    .ai-dev-page .why-ai-coding-sprint .heading2 > p:is(.width-83, .width-83W, :not([class])) { font-size: 16px; }
    .ai-dev-page .why-ai-coding-sprint .list-itme { padding: 16px 0 16px 52px; }
    .ai-dev-page .why-ai-coding-sprint .list-itme:before { width: 36px; height: 36px; margin-top: -18px; background-size: 20px auto; }
    .ai-dev-page .why-ai-coding-sprint .list-itme h3 { font-size: 17px; }
}

/* ---- 9b. "Why Coding Sprint?" list: open checklist ----
   (the ruled list above was the first version; this replaces its look)
   The six reasons on the white section, no panel behind them: the mark on a
   small deep violet disc (its chevrons are light, so they need the dark
   ground), the reason in ink, and a faint line between rows that starts where
   the text starts. The text turns violet on hover.                          */
.ai-dev-page .why-ai-coding-sprint .list-itme,
.ai-dev-page .why-ai-coding-sprint .list-itme:last-child {
    padding: 17px 0 17px 56px;
    border: 0;
    background: none;
}
.ai-dev-page .why-ai-coding-sprint .heading2 + .list-itme { margin-top: 26px; }
.ai-dev-page .why-ai-coding-sprint .list-itme + .list-itme:after {   /* faint line between rows (decorative) */
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 56px;
    border-top: 1px solid var(--ai-line);
}
.ai-dev-page .why-ai-coding-sprint .list-itme:before {
    left: 0;
    top: 50%;
    width: 36px;
    height: 36px;
    margin-top: -18px;
    border-radius: 50%;
    background-color: var(--ai-deep);
    background-size: 20px auto;
    background-position: center;
}
.ai-dev-page .why-ai-coding-sprint .list-itme h3 { color: var(--ai-ink); transition: color .2s ease; }
.ai-dev-page .why-ai-coding-sprint .list-itme:hover h3 { color: var(--ai-violet); }
@media (max-width: 575px) {
    .ai-dev-page .why-ai-coding-sprint .list-itme,
    .ai-dev-page .why-ai-coding-sprint .list-itme:last-child { padding: 15px 0 15px 50px; }
    .ai-dev-page .why-ai-coding-sprint .list-itme:before { width: 32px; height: 32px; margin-top: -16px; background-size: 18px auto; }
    .ai-dev-page .why-ai-coding-sprint .list-itme + .list-itme:after { left: 50px; }
}

/* ---- 10. BREADCRUMB: the "Home > AI Development Company" line under the banner ----
   Fifth take. The lime chip round the current page read as a button, so the
   page you are on is now plain bold text and nothing else. The accent moved to
   "Home", which is the link: a small lime tile with a house mark. White bar
   closed by a hairline, chevron between the steps, no violet. The line itself
   is the shared one every inner page prints; only its look on this page is set
   here. Same links and wording.                                              */
.ai-dev-page .breadcrumb {
    padding: 0;
    margin-bottom: 0;
    background: #FFFFFF;
    border-bottom: 1px solid var(--ai-line);
}
.ai-dev-page .breadcrumb ul {
    flex-wrap: wrap;
    align-items: center;
    row-gap: 6px;
    min-height: 62px;
    margin: 0;
    padding: 12px 0;
}
.ai-dev-page .breadcrumb ul li { align-items: center; }
.ai-dev-page .breadcrumb ul li,
.ai-dev-page .breadcrumb ul li a {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    line-height: 21px;
    letter-spacing: 0;
    color: var(--ai-ink);
}
.ai-dev-page .breadcrumb ul li a {
    display: inline-flex;
    align-items: center;
    font-weight: 500;
    transition: color .2s ease, background-color .2s ease;
}
.ai-dev-page .breadcrumb ul li:first-child a:before {  /* tile with a house mark before "Home" (decorative) */
    content: "";
    flex: none;
    width: 32px;
    height: 32px;
    margin-right: 10px;
    border: 1px solid var(--ai-lime);
    border-radius: 9px;
    background: var(--ai-lime) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 10.5 12 3l9 7.5V20a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1z' fill='none' stroke='%2314081C' stroke-width='1.8' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
    transition: background-color .2s ease, border-color .2s ease;
}
.ai-dev-page .breadcrumb ul li:first-child a:hover { color: var(--ai-ink); }
.ai-dev-page .breadcrumb ul li:first-child a:hover:before {
    border-color: #B1B803;
    background-color: #B1B803;
}
.ai-dev-page .breadcrumb ul li + li {
    margin-left: 12px;
    padding-left: 26px;
}
.ai-dev-page .breadcrumb ul li + li:before {           /* chevron between the steps (decorative) */
    top: 50%;
    left: 6px;
    width: 6px;
    height: 6px;
    border-right: 1.5px solid rgba(20, 8, 28, .45);
    border-bottom: 1.5px solid rgba(20, 8, 28, .45);
}
.ai-dev-page .breadcrumb ul li:first-child a { color: var(--ai-body); }
.ai-dev-page .breadcrumb ul li:last-child a {          /* the page you are on: plain bold text, no box */
    font-weight: 600;
    color: var(--ai-ink);
}
.ai-dev-page .breadcrumb ul li:last-child a:hover { color: var(--ai-ink); }
@media (max-width: 374px) {
    .ai-dev-page .breadcrumb ul { min-height: 58px; }
    .ai-dev-page .breadcrumb ul li,
    .ai-dev-page .breadcrumb ul li a { font-size: 13px; }
    .ai-dev-page .breadcrumb ul li:first-child a:before { width: 26px; height: 26px; margin-right: 6px; background-size: 14px 14px; }
    .ai-dev-page .breadcrumb ul li + li { margin-left: 4px; padding-left: 18px; }
    .ai-dev-page .breadcrumb ul li + li:before { left: 5px; }
}

/* The hero's text box is height:100% plus a 40px top margin (shared rule), so it
   runs 40px past the banner; with the hero lifted (z-index 1, chunk 17) that
   invisible strip sat over this bar and took the clicks on Home. The bar is
   lifted one step higher so its links can be clicked again. */
.ai-dev-page .breadcrumb { position: relative; z-index: 2; }

/* ---- 11. TESTIMONIALS: "What Our Customers Say" ----
   The section is the shared one every page prints (common/testimonial.php);
   only its look on this page is set here, the other pages keep the dark band.
   It was a full-width deep violet band with loose white text. On this page it
   is now light, in the same family as the other sections: heading and intro
   on the left under the quote mark, and each review in a white card on the
   right with a lime mark above its title, the star rating at the top right,
   the client's name under a hairline and the two arrows in the card's corner.
   Same reviews, wording, stars, "[+]" expander and carousel; nothing in the
   markup or the script is touched.                                          */
.ai-dev-page .testimonials {
    padding: 100px 0;
    background: #FFFFFF;
    color: var(--ai-ink);
}
/* The quote mark was pinned to the section's corner. The same mark now sits in
   the heading column, so it always lines up with the heading. The art is drawn
   white at 20% strength for a dark ground, so its shape is used as a mask and
   filled with the brand lime at full strength (the same lime as the short
   marks above the other headings). */
.ai-dev-page .testimonials:before { display: none; }
.ai-dev-page .testimonials .heading2:before {
    content: "";
    display: block;
    width: 64px;
    height: 50px;
    margin-bottom: 26px;
    background: var(--ai-lime);
    -webkit-mask: url('data:image/svg+xml,<svg width="88" height="69" viewBox="0 0 88 69" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M21.6016 68.7562C17.5622 68.7562 14.2254 67.9659 11.5911 66.3853C8.95674 64.8047 6.76146 62.6972 5.00524 60.0629C3.24901 57.2529 1.93185 54.0917 1.05373 50.5793C0.351245 47.0668 0 43.9056 0 41.0956C0 32.4901 2.19528 24.5871 6.58584 17.3866C11.152 10.1861 18.0891 4.39055 27.3971 0L29.768 4.74181C24.4993 7.0249 19.9331 10.5373 16.0694 15.2792C12.2058 20.0209 10.0983 24.8506 9.74704 29.768C9.3958 32.4023 9.57142 34.861 10.2739 37.1441C13.4351 34.1586 17.2988 32.6658 21.865 32.6658C26.958 32.6658 31.2608 34.3342 34.7732 37.671C38.2857 40.8322 40.0419 45.2228 40.0419 50.8427C40.0419 56.1113 38.1979 60.4141 34.5098 63.7509C30.9974 67.0878 26.6946 68.7562 21.6016 68.7562ZM69.5465 68.7562C65.5071 68.7562 62.1703 67.9659 59.536 66.3853C56.9017 64.8047 54.7064 62.6972 52.9501 60.0629C51.1939 57.2529 49.8768 54.0917 48.9986 50.5793C48.2962 47.0668 47.9449 43.9056 47.9449 41.0956C47.9449 32.4901 50.1402 24.5871 54.5307 17.3866C59.0969 10.1861 66.034 4.39055 75.342 0L77.7129 4.74181C72.4442 7.0249 67.8781 10.5373 64.0144 15.2792C60.1507 20.0209 58.0432 24.8506 57.6919 29.768C57.3407 32.4023 57.5163 34.861 58.2188 37.1441C61.38 34.1586 65.2437 32.6658 69.8099 32.6658C74.9029 32.6658 79.2057 34.3342 82.7181 37.671C86.2306 40.8322 87.9868 45.2228 87.9868 50.8427C87.9868 56.1113 86.1428 60.4141 82.4547 63.7509C78.9423 67.0878 74.6395 68.7562 69.5465 68.7562Z" fill="white"/></svg>') left top / contain no-repeat;
    mask: url('data:image/svg+xml,<svg width="88" height="69" viewBox="0 0 88 69" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M21.6016 68.7562C17.5622 68.7562 14.2254 67.9659 11.5911 66.3853C8.95674 64.8047 6.76146 62.6972 5.00524 60.0629C3.24901 57.2529 1.93185 54.0917 1.05373 50.5793C0.351245 47.0668 0 43.9056 0 41.0956C0 32.4901 2.19528 24.5871 6.58584 17.3866C11.152 10.1861 18.0891 4.39055 27.3971 0L29.768 4.74181C24.4993 7.0249 19.9331 10.5373 16.0694 15.2792C12.2058 20.0209 10.0983 24.8506 9.74704 29.768C9.3958 32.4023 9.57142 34.861 10.2739 37.1441C13.4351 34.1586 17.2988 32.6658 21.865 32.6658C26.958 32.6658 31.2608 34.3342 34.7732 37.671C38.2857 40.8322 40.0419 45.2228 40.0419 50.8427C40.0419 56.1113 38.1979 60.4141 34.5098 63.7509C30.9974 67.0878 26.6946 68.7562 21.6016 68.7562ZM69.5465 68.7562C65.5071 68.7562 62.1703 67.9659 59.536 66.3853C56.9017 64.8047 54.7064 62.6972 52.9501 60.0629C51.1939 57.2529 49.8768 54.0917 48.9986 50.5793C48.2962 47.0668 47.9449 43.9056 47.9449 41.0956C47.9449 32.4901 50.1402 24.5871 54.5307 17.3866C59.0969 10.1861 66.034 4.39055 75.342 0L77.7129 4.74181C72.4442 7.0249 67.8781 10.5373 64.0144 15.2792C60.1507 20.0209 58.0432 24.8506 57.6919 29.768C57.3407 32.4023 57.5163 34.861 58.2188 37.1441C61.38 34.1586 65.2437 32.6658 69.8099 32.6658C74.9029 32.6658 79.2057 34.3342 82.7181 37.671C86.2306 40.8322 87.9868 45.2228 87.9868 50.8427C87.9868 56.1113 86.1428 60.4141 82.4547 63.7509C78.9423 67.0878 74.6395 68.7562 69.5465 68.7562Z" fill="white"/></svg>') left top / contain no-repeat;
}
.ai-dev-page .testimonials .testicols {
    gap: 72px;
    align-items: center;
    max-width: none;                               /* full container width, on the same edges as case studies and blog */
}
.ai-dev-page .testimonials .test_col1 {
    flex: 0 0 380px;
    max-width: 380px;
    padding: 0;
}
.ai-dev-page .testimonials .test_col2 {
    flex: 1 1 0;
    min-width: 0;
    max-width: none;
    padding: 0;
}
.ai-dev-page .testimonials .heading2 { margin: 0; text-align: left; }
.ai-dev-page .testimonials h2 {
    margin: 0 0 18px;
    font-size: 42px;
    line-height: 1.14;
    font-weight: 500;
    letter-spacing: -.8px;
    color: var(--ai-ink);
}
.ai-dev-page .testimonials .heading2 p {
    display: block;
    max-width: none;
    margin: 0;
    font-size: 18px;
    line-height: 1.65;
    letter-spacing: 0;
    color: var(--ai-body);
}

/* Room round the card for its shadow; the carousel clips at this box. The
   negative margins give the space back, so nothing moves. The sides stop 2px short
   of the 10px the carousel leaves between slides, so the next slide never shows,
   not even where the layout lands on a half pixel. */
.ai-dev-page .testimonials .owl-stage-outer {
    margin: -8px -8px -36px;
    padding: 8px 8px 36px;
}
/* Keeps those negative margins inside the carousel box, so the box ends where the
   card ends and the arrows can be placed from the card's corner. */
.ai-dev-page .testimonials .testimonials-carousel.owl-loaded { display: flow-root; }
/* equal-height cards */
.ai-dev-page .testimonials .owl-stage { display: flex; }
.ai-dev-page .testimonials .owl-stage:after { display: none; }
.ai-dev-page .testimonials .owl-item { display: flex; float: none; }
.ai-dev-page .testimonials .testiomonial-content {
    display: flex;
    width: 100%;
    margin: 0;
    padding: 0;
}
.ai-dev-page .testimonials .testiomonial-inner {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
    padding: 44px 48px 40px;
    background: #FFFFFF;
    border: 1px solid var(--ai-line);
    border-radius: 20px;
    box-shadow: 0 1px 2px rgba(20, 8, 28, .04), 0 18px 30px -22px rgba(44, 2, 58, .20);
    transition: box-shadow .3s ease;
}
/* Only the review on show carries the shadow: the next one waits just outside the
   clipped box, and its shadow would otherwise show as a faint line at the edge. */
.ai-dev-page .testimonials .owl-item:not(.active) .testiomonial-inner { box-shadow: none; }
.ai-dev-page .testimonials .testimonials-box .testimonial-head {
    margin: 0 0 2px;
    padding-right: 170px;                          /* room for the stars beside the title */
}
.ai-dev-page .testimonials .testimonial-head:before {  /* short lime mark above the review's title (decorative) */
    content: "";
    display: block;
    width: 44px;
    height: 4px;
    margin-bottom: 22px;
    border-radius: 2px;
    background: var(--ai-lime);
}
.ai-dev-page .testimonials .testimonial-tagline {
    font-size: 26px;
    line-height: 1.25;
    letter-spacing: -.4px;
    color: var(--ai-ink);
}
.ai-dev-page .testimonials p.client-view {
    margin: 0;
    font-size: 18px !important;
    line-height: 1.65 !important;
    letter-spacing: 0;
    color: var(--ai-body);
}
.ai-dev-page .testimonials .more-content { display: flex; flex-direction: column; gap: 14px; }
.ai-dev-page .testimonials .read-toggle { color: var(--ai-violet); }   /* the lime "[+]" is unreadable on white */
/* The hidden rest of a long review is a zero-height item in the card's column
   until "[+]" is pressed (the script then writes a max-height on it). Pull it up
   by one gap while it is closed, so closed and open cards space the same. */
.ai-dev-page .testimonials .more-content { transition: max-height .5s ease, opacity .4s ease, margin-top .3s ease; }
.ai-dev-page .testimonials .more-content:not([style*="max-height"]) { margin-top: -14px; }
.ai-dev-page .testimonials .client-detail {
    position: relative;
    margin-top: auto;                              /* keeps the name at the foot of every card */
    padding: 36px 120px 0 0;                       /* right: room for the two arrows */
}
.ai-dev-page .testimonials .client-detail:before { /* hairline above the client's name (decorative) */
    content: "";
    position: absolute;
    top: 12px;
    right: 0;
    left: 0;
    border-top: 1px solid var(--ai-line);
}
.ai-dev-page .testimonials .client-detail h4 {
    font-size: 20px;
    line-height: 1.3;
    font-weight: 500;
    color: var(--ai-ink);
}
.ai-dev-page .testimonials .client-designation {
    margin-top: 2px;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    line-height: 1.5;
    color: var(--ai-body);
}
.ai-dev-page .testimonials .rating {               /* the stars, level with the review's title */
    position: absolute;
    top: 77px;
    right: 48px;
    margin: 0;
    line-height: 0;
}
.ai-dev-page .testimonials .rating svg text {      /* the "5.0" is white in the file, and its font is not loaded */
    fill: var(--ai-ink);
    font-family: 'Inter', sans-serif;
}

/* The two arrows: same buttons, in the card's lower right corner. */
.ai-dev-page .testimonials .testimonials-box .owl-theme .owl-nav {
    right: 48px;
    bottom: 40px;
    gap: 8px;
    margin: 0;
    transform: none;
}
.ai-dev-page .testimonials .testimonials-box .owl-nav button.owl-prev,
.ai-dev-page .testimonials .testimonials-box .owl-nav button.owl-next {
    right: auto;
    left: auto;
    margin: 0;
    background: #FFFFFF !important;
    border: 1px solid rgba(44, 2, 58, .18) !important;
    transition: background-color .2s ease, border-color .2s ease;
}
.ai-dev-page .testimonials .testimonials-box .owl-nav button.owl-prev:not(.disabled):hover,
.ai-dev-page .testimonials .testimonials-box .owl-nav button.owl-next:not(.disabled):hover {
    background: var(--ai-lime) !important;
    border-color: var(--ai-lime) !important;
}

@media (max-width: 1440px) {
    .ai-dev-page .testimonials { padding: 88px 0; }
    .ai-dev-page .testimonials .testicols { gap: 56px; }
    .ai-dev-page .testimonials .test_col1 { flex-basis: 340px; max-width: 340px; }
    .ai-dev-page .testimonials h2 { font-size: 38px; }
    .ai-dev-page .testimonials .heading2 p { font-size: 17px; }
    .ai-dev-page .testimonials .testiomonial-inner { padding: 40px 40px 36px; }
    .ai-dev-page .testimonials .testimonial-tagline { font-size: 24px; }
    .ai-dev-page .testimonials p.client-view { font-size: 17px !important; }
    .ai-dev-page .testimonials .rating { top: 73px; right: 40px; }
    .ai-dev-page .testimonials .testimonials-box .owl-theme .owl-nav { right: 40px; bottom: 36px; }
}
@media (max-width: 1200px) {
    .ai-dev-page .testimonials .testicols { gap: 44px; }
    .ai-dev-page .testimonials .test_col1 { flex-basis: 300px; max-width: 300px; }
}
@media (max-width: 992px) {
    .ai-dev-page .testimonials { padding: 64px 0; }
    .ai-dev-page .testimonials .testicols { align-items: stretch; gap: 36px; }
    .ai-dev-page .testimonials .test_col1,
    .ai-dev-page .testimonials .test_col2 { flex: none; width: 100%; max-width: none; }
    .ai-dev-page .testimonials .heading2:before { width: 52px; height: 41px; margin-bottom: 20px; }
    .ai-dev-page .testimonials h2 { font-size: 32px; letter-spacing: -.5px; }
}
@media (max-width: 687px) {
    /* the arrows are not shown from here down, so the name can use the full width */
    .ai-dev-page .testimonials .client-detail { padding-right: 0; }
    /* ...and with no arrows to anchor, each card can be as tall as its own review
       instead of the longest one, so a short review is not a half-empty card */
    .ai-dev-page .testimonials .owl-stage { align-items: flex-start; }
}
@media (max-width: 575px) {
    .ai-dev-page .testimonials { padding: 48px 0; }
    .ai-dev-page .testimonials h2 { font-size: 27px; line-height: 1.2; }
    .ai-dev-page .testimonials .heading2 p { font-size: 16px; }
    .ai-dev-page .testimonials .testiomonial-inner { padding: 28px 22px 26px; border-radius: 16px; }
    .ai-dev-page .testimonials .testimonials-box .testimonial-head { padding-right: 0; }
    .ai-dev-page .testimonials .testimonial-head:before { margin-bottom: 18px; }
    .ai-dev-page .testimonials .testimonial-tagline { font-size: 21px; }
    .ai-dev-page .testimonials p.client-view { font-size: 16px !important; }
    .ai-dev-page .testimonials .rating {           /* too narrow for stars beside the title: under the name */
        position: static;
        margin-top: -2px;
    }
}

/* ---- 11b. TESTIMONIALS GRAPHIC: a stack of cards, a quote watermark ----
   Two cards sit behind the review, each a little narrower and lower, so the
   review reads as the top of a stack: there are more to see. Same white,
   hairline and corners as the card; the back one in the page's tint.
   Shown where the card has a fixed height (688px and up). Inside the card,
   the site's quote mark sits large and very faint (violet 6%) at the right,
   behind the review text and clear of the name line.                        */
.ai-dev-page .testimonials .test_col2 { position: relative; isolation: isolate; }
.ai-dev-page .testimonials .test_col2:before,
.ai-dev-page .testimonials .test_col2:after {
    content: "";
    position: absolute;
    width: auto;
    height: auto;
    border-radius: 20px;
    pointer-events: none;
}
.ai-dev-page .testimonials .test_col2:before {     /* the card just behind */
    z-index: -1;
    top: 16px;
    right: 22px;
    bottom: -18px;
    left: 22px;
    background: #FFFFFF;
    border: 1px solid var(--ai-line);
    box-shadow: 0 14px 24px -20px rgba(44, 2, 58, .30);
}
.ai-dev-page .testimonials .test_col2:after {      /* the one behind that */
    z-index: -2;
    top: 32px;
    right: 46px;
    bottom: -34px;
    left: 46px;
    background: var(--ai-tint);
    border: 1px solid var(--ai-line);
}
@media (max-width: 687px) {
    .ai-dev-page .testimonials .test_col2:before,
    .ai-dev-page .testimonials .test_col2:after { display: none; }
}
.ai-dev-page .testimonials .testiomonial-inner { isolation: isolate; }
.ai-dev-page .testimonials .testiomonial-inner:after {
    content: "";
    position: absolute;
    z-index: -1;
    right: 44px;
    bottom: 120px;
    width: 150px;
    height: 118px;
    background: rgba(91, 3, 117, .06);
    -webkit-mask: url('data:image/svg+xml,<svg width="88" height="69" viewBox="0 0 88 69" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M21.6016 68.7562C17.5622 68.7562 14.2254 67.9659 11.5911 66.3853C8.95674 64.8047 6.76146 62.6972 5.00524 60.0629C3.24901 57.2529 1.93185 54.0917 1.05373 50.5793C0.351245 47.0668 0 43.9056 0 41.0956C0 32.4901 2.19528 24.5871 6.58584 17.3866C11.152 10.1861 18.0891 4.39055 27.3971 0L29.768 4.74181C24.4993 7.0249 19.9331 10.5373 16.0694 15.2792C12.2058 20.0209 10.0983 24.8506 9.74704 29.768C9.3958 32.4023 9.57142 34.861 10.2739 37.1441C13.4351 34.1586 17.2988 32.6658 21.865 32.6658C26.958 32.6658 31.2608 34.3342 34.7732 37.671C38.2857 40.8322 40.0419 45.2228 40.0419 50.8427C40.0419 56.1113 38.1979 60.4141 34.5098 63.7509C30.9974 67.0878 26.6946 68.7562 21.6016 68.7562ZM69.5465 68.7562C65.5071 68.7562 62.1703 67.9659 59.536 66.3853C56.9017 64.8047 54.7064 62.6972 52.9501 60.0629C51.1939 57.2529 49.8768 54.0917 48.9986 50.5793C48.2962 47.0668 47.9449 43.9056 47.9449 41.0956C47.9449 32.4901 50.1402 24.5871 54.5307 17.3866C59.0969 10.1861 66.034 4.39055 75.342 0L77.7129 4.74181C72.4442 7.0249 67.8781 10.5373 64.0144 15.2792C60.1507 20.0209 58.0432 24.8506 57.6919 29.768C57.3407 32.4023 57.5163 34.861 58.2188 37.1441C61.38 34.1586 65.2437 32.6658 69.8099 32.6658C74.9029 32.6658 79.2057 34.3342 82.7181 37.671C86.2306 40.8322 87.9868 45.2228 87.9868 50.8427C87.9868 56.1113 86.1428 60.4141 82.4547 63.7509C78.9423 67.0878 74.6395 68.7562 69.5465 68.7562Z" fill="white"/></svg>') center / contain no-repeat;
    mask: url('data:image/svg+xml,<svg width="88" height="69" viewBox="0 0 88 69" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M21.6016 68.7562C17.5622 68.7562 14.2254 67.9659 11.5911 66.3853C8.95674 64.8047 6.76146 62.6972 5.00524 60.0629C3.24901 57.2529 1.93185 54.0917 1.05373 50.5793C0.351245 47.0668 0 43.9056 0 41.0956C0 32.4901 2.19528 24.5871 6.58584 17.3866C11.152 10.1861 18.0891 4.39055 27.3971 0L29.768 4.74181C24.4993 7.0249 19.9331 10.5373 16.0694 15.2792C12.2058 20.0209 10.0983 24.8506 9.74704 29.768C9.3958 32.4023 9.57142 34.861 10.2739 37.1441C13.4351 34.1586 17.2988 32.6658 21.865 32.6658C26.958 32.6658 31.2608 34.3342 34.7732 37.671C38.2857 40.8322 40.0419 45.2228 40.0419 50.8427C40.0419 56.1113 38.1979 60.4141 34.5098 63.7509C30.9974 67.0878 26.6946 68.7562 21.6016 68.7562ZM69.5465 68.7562C65.5071 68.7562 62.1703 67.9659 59.536 66.3853C56.9017 64.8047 54.7064 62.6972 52.9501 60.0629C51.1939 57.2529 49.8768 54.0917 48.9986 50.5793C48.2962 47.0668 47.9449 43.9056 47.9449 41.0956C47.9449 32.4901 50.1402 24.5871 54.5307 17.3866C59.0969 10.1861 66.034 4.39055 75.342 0L77.7129 4.74181C72.4442 7.0249 67.8781 10.5373 64.0144 15.2792C60.1507 20.0209 58.0432 24.8506 57.6919 29.768C57.3407 32.4023 57.5163 34.861 58.2188 37.1441C61.38 34.1586 65.2437 32.6658 69.8099 32.6658C74.9029 32.6658 79.2057 34.3342 82.7181 37.671C86.2306 40.8322 87.9868 45.2228 87.9868 50.8427C87.9868 56.1113 86.1428 60.4141 82.4547 63.7509C78.9423 67.0878 74.6395 68.7562 69.5465 68.7562Z" fill="white"/></svg>') center / contain no-repeat;
    pointer-events: none;
}
@media (max-width: 575px) {
    .ai-dev-page .testimonials .testiomonial-inner:after { right: 18px; bottom: 104px; width: 96px; height: 75px; }
}
/* ---- 11c. TESTIMONIALS MOTION: the next review rises from below ----
   Instead of sliding in from the side, the review that leaves fades and lifts
   a little, and the next one rises in from below. It uses the carousel's own
   animate option, switched on for this page by the short script after the
   testimonials include; these are the two movements it plays.             */
@keyframes ai-testi-in {
    from { opacity: 0; transform: translate3d(0, 36px, 0); }
    to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes ai-testi-out {
    from { opacity: 1; transform: translate3d(0, 0, 0); }
    to   { opacity: 0; transform: translate3d(0, -10px, 0); }
}
.ai-dev-page .testimonials .owl-item.ai-testi-in {
    animation: ai-testi-in .6s cubic-bezier(.2, .7, .2, 1) .12s both;
}
.ai-dev-page .testimonials .owl-item.ai-testi-out {
    animation: ai-testi-out .35s ease both;
}
@media (prefers-reduced-motion: reduce) {
    /* near-instant, but still a real animation, so the carousel hears it end */
    .ai-dev-page .testimonials .owl-item.ai-testi-in,
    .ai-dev-page .testimonials .owl-item.ai-testi-out { animation-duration: .01ms; animation-delay: 0s; }
}
/* ---- 12. BLOG: "Latest Technology Insights" ----
   The section is the shared one every page prints (common/blog.php); only its
   look on this page is set here, the other pages keep theirs. It was a grey
   band with a centred heading and a strip of side-by-side cards running off
   both edges of the screen. On this page it now sits on the page's tint like
   the other bands: heading on the left under the lime mark, and from 1200px up
   the posts as a row of cards inside the page width, picture on top, title,
   excerpt and "Read More" under a hairline. Below 1200px the same cards stay
   in the existing carousel. Same posts, titles, excerpts, pictures and links;
   nothing in the markup or the script is touched.                            */
.ai-dev-page .news-sec {
    padding: 100px 0;
    background: var(--ai-tint);
}
.ai-dev-page .news-sec .sec-headingW {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    text-align: left;
}
.ai-dev-page .news-sec .sec-headingW:before {     /* short lime mark above the heading (decorative) */
    content: "";
    display: block;
    width: 44px;
    height: 4px;
    margin-bottom: 22px;
    border-radius: 2px;
    background: var(--ai-lime);
}
.ai-dev-page .news-sec h2 {
    margin: 0 0 44px;
    font-size: 42px;
    line-height: 1.14;
    font-weight: 500;
    letter-spacing: -.8px;
    text-align: left;
    color: var(--ai-ink);
}

/* The card */
.ai-dev-page .news-sec .blog-card {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
    height: auto;
    min-height: 0;
    padding: 0;
    overflow: hidden;
    background: #FFFFFF;
    border: 1px solid var(--ai-line);
    border-radius: var(--ai-radius);
    box-shadow: var(--ai-shadow);
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.ai-dev-page .news-sec .blog-card:hover {
    transform: translateY(-6px);
    border-color: rgba(91, 3, 117, .22);
    box-shadow: var(--ai-shadow-hover);
}
.ai-dev-page .news-sec .blog-img {
    flex: none;
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--ai-tint);
}
.ai-dev-page .news-sec .blog-img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
    transition: transform .5s ease;
}
.ai-dev-page .news-sec .blog-card:hover .blog-img img { transform: scale(1.04); }
.ai-dev-page .news-sec .blog-content {
    flex: 1 1 auto;
    gap: 0;
    padding: 24px 26px 24px;
    justify-content: flex-start;
}
/* the date line stays hidden while the feed sends no date */
.ai-dev-page .news-sec .blog_tag:not(:has(span)) { display: none; }
.ai-dev-page .news-sec .blog_tag {
    margin-bottom: 10px;
    font-size: 13px;
    line-height: 1.4;
    font-weight: 500;
    color: var(--ai-body);
}
.ai-dev-page .news-sec .blog_desc { margin-bottom: 22px; }
.ai-dev-page .news-sec .blog_desc h3 {
    margin: 0 0 10px;
    font-size: 20px;
    line-height: 1.35;
    font-weight: 500;
    letter-spacing: -.2px;
}
.ai-dev-page .news-sec .blog_desc h3 a {
    color: var(--ai-ink);
    transition: color .2s ease;
}
.ai-dev-page .news-sec .blog-card:hover .blog_desc h3 a { color: var(--ai-violet); }
.ai-dev-page .news-sec .blog_desc p {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
    color: var(--ai-body);
}
.ai-dev-page .news-sec .blog_more_btn {
    margin-top: auto;                              /* keeps "Read More" at the foot of every card */
    padding-top: 18px;
    border-top: 1px solid var(--ai-line);
}
.ai-dev-page .news-sec .read-more {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    line-height: 1.4;
    font-weight: 600;
    color: var(--ai-violet);
    text-decoration: none;
}
.ai-dev-page .news-sec .read-more:after {          /* small arrow after "Read More" (decorative) */
    content: "";
    width: 7px;
    height: 7px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform .25s ease;
}
.ai-dev-page .news-sec .read-more:hover { color: var(--ai-deep); text-decoration: none; }
.ai-dev-page .news-sec .read-more:hover:after { transform: translateX(3px) rotate(45deg); }

/* Equal-height cards wherever the carousel lays them out side by side. */
.ai-dev-page .news-sec .blog-carousel.owl-loaded { display: flow-root; }
.ai-dev-page .news-sec .blog-carousel .owl-stage { display: flex; align-items: stretch; }
.ai-dev-page .news-sec .blog-carousel .owl-stage:after { display: none; }
.ai-dev-page .news-sec .blog-carousel .owl-item { display: flex; float: none; height: auto; }
.ai-dev-page .news-sec .blog-carousel .item { display: flex; width: 100%; }

/* From 1200px up: no sliding. The three posts sit in a row inside the same width
   as the heading (the section's container rules repeated for the carousel, which
   sits outside the container), and the carousel's copies used for looping are
   not shown. Nothing moves, so the carousel's clipping is switched off too and
   the cards' shadows are not cut. */
@media (min-width: 1200px) {
    .ai-dev-page .news-sec .blog-carousel {
        width: 90%;
        max-width: 1230px;
        margin: 0 auto;
        padding: 0 var(--bs-gutter-x, .75rem);
    }
    .ai-dev-page .news-sec .blog-carousel .owl-stage-outer { overflow: visible; }
    .ai-dev-page .news-sec .blog-carousel .owl-stage {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 24px;
        width: auto !important;
        padding: 0 !important;
        transform: none !important;
        transition: none !important;
    }
    .ai-dev-page .news-sec .blog-carousel .owl-item {
        width: auto !important;
        margin: 0 !important;
    }
    .ai-dev-page .news-sec .blog-carousel .owl-item.cloned { display: none; }
}
@media (min-width: 1200px) and (max-width: 1250px) {   /* the container goes to 95% below 1250px */
    .ai-dev-page .news-sec .blog-carousel { width: 95%; }
}
@media (min-width: 1441px) and (max-width: 1549px) {
    .ai-dev-page .news-sec .blog-carousel { width: calc(100% - 120px); max-width: 1450px; }
}
@media (min-width: 1550px) {
    .ai-dev-page .news-sec .blog-carousel { max-width: 1392px; }
}

/* Below 1200px the carousel slides and has to stay clipped: room above and below
   the cards for the hover lift and the shadow, given back by negative margins. */
@media (max-width: 1199px) {
    .ai-dev-page .news-sec .blog-carousel .owl-stage-outer {
        margin: -10px 0 -40px;
        padding: 10px 0 40px;
    }
}
@media (max-width: 1440px) {
    .ai-dev-page .news-sec { padding: 88px 0; }
    .ai-dev-page .news-sec h2 { font-size: 38px; }
}
@media (max-width: 991px) {
    .ai-dev-page .news-sec { padding: 64px 0; }
    .ai-dev-page .news-sec h2 { margin-bottom: 32px; font-size: 32px; letter-spacing: -.5px; }
}
@media (max-width: 575px) {
    .ai-dev-page .news-sec { padding: 48px 0; }
    .ai-dev-page .news-sec h2 { margin-bottom: 26px; font-size: 27px; line-height: 1.2; }
    .ai-dev-page .news-sec .blog-content { padding: 20px 20px 20px; }
    .ai-dev-page .news-sec .blog_desc h3 { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) {
    .ai-dev-page .news-sec .blog-card,
    .ai-dev-page .news-sec .blog-img img { transition: none; }
    .ai-dev-page .news-sec .blog-card:hover,
    .ai-dev-page .news-sec .blog-card:hover .blog-img img { transform: none; }
}

/* ---- 13. CASE STUDIES: "Case studies" ----
   Second take (the white cards were judged too common). The section is the
   shared one every page prints (common/blog-section.php); only its look on
   this page is set here, the other pages keep theirs. Tint band, heading under
   the lime mark with "View All" on the right, inside the same width as the
   testimonials and blog below. Same projects, wording, pictures, links,
   arrows, dots and carousel; nothing in the markup or the script is touched. */
.ai-dev-page .cs-sec {
    padding: 100px 0;
    gap: 0;
    background: var(--ai-tint);
}
/* the shared sections' container rules, repeated for this box (it is not a .container) */
.ai-dev-page .cs-sec .cs-inner {
    gap: 44px;
    width: 90%;
    max-width: 1230px;
    margin: 0 auto;
    padding: 0 var(--bs-gutter-x, .75rem);
}
@media (max-width: 1250px) {
    .ai-dev-page .cs-sec .cs-inner { width: 95%; }
}
@media (max-width: 756px) {
    .ai-dev-page .cs-sec .cs-inner { width: 100%; }
}
@media (min-width: 1441px) and (max-width: 1549px) {
    .ai-dev-page .cs-sec .cs-inner { width: calc(100% - 120px); max-width: 1450px; }
}
@media (min-width: 1550px) {
    .ai-dev-page .cs-sec .cs-inner { max-width: 1392px; }
}
.ai-dev-page .cs-sec .cs-head,
.ai-dev-page .cs-sec .cs-slider-wrap { max-width: none; }
.ai-dev-page .cs-sec .cs-head-text:before {        /* short lime mark above the heading (decorative) */
    content: "";
    display: block;
    width: 44px;
    height: 4px;
    margin-bottom: 22px;
    border-radius: 2px;
    background: var(--ai-lime);
}
.ai-dev-page .cs-sec .cs-head h2 {
    font-size: 42px;
    line-height: 1.14;
    letter-spacing: -.8px;
    color: var(--ai-ink);
}
.ai-dev-page .cs-sec .cs-head p {
    margin-top: 14px;
    font-size: 18px;
    line-height: 1.65;
    letter-spacing: 0;
    color: var(--ai-body);
}
.ai-dev-page .cs-sec .cs-viewall { color: var(--ai-ink); font-weight: 500; }

/* Room round the cards for the hover lift and the shadow; the carousel clips at
   this box. The negative margins give the space back, so nothing moves, and the
   sides stay well inside the 32px between slides, so the next slide never shows. */
.ai-dev-page #case-study-slider.owl-loaded { display: flow-root; }
.ai-dev-page #case-study-slider .owl-stage-outer {
    margin: -10px -12px -36px;
    padding: 10px 12px 36px;
}
.ai-dev-page #case-study-slider .owl-stage { display: flex; }
.ai-dev-page #case-study-slider .owl-stage:after { display: none; }
.ai-dev-page #case-study-slider .owl-item { display: flex; float: none; }
.ai-dev-page .cs-sec .cs-item { display: flex; width: 100%; }

/* Option: the picture with rounded corners, and a white panel with the words
   rising over its lower edge, set in from both sides. */
.ai-dev-page .cs-sec { --cs-arrow-y: calc(14.0625% - 4.5px - 30px); }   /* a little above the picture's middle, clear of the panel */
.ai-dev-page .cs-sec .cs-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    background: none;
}
.ai-dev-page .cs-sec .cs-card-media {
    aspect-ratio: 16 / 9;
    border-radius: 18px;
}
.ai-dev-page .cs-sec .cs-card-body {
    position: relative;
    z-index: 1;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    margin: -72px 24px 0;
    padding: 26px 28px 22px;
    background: #FFFFFF;
    border: 1px solid var(--ai-line);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(20, 8, 28, .04), 0 18px 30px -20px rgba(44, 2, 58, .28);
    transition: transform .3s ease, box-shadow .3s ease;
}
.ai-dev-page .cs-sec .cs-card:hover .cs-card-body {
    transform: translateY(-6px);
    box-shadow: 0 2px 4px rgba(20, 8, 28, .05), 0 24px 34px -20px rgba(44, 2, 58, .36);
}
.ai-dev-page .cs-sec .cs-card-text:before {         /* short lime mark at the top of the panel (decorative) */
    content: "";
    display: block;
    width: 32px;
    height: 3px;
    margin-bottom: 16px;
    border-radius: 2px;
    background: var(--ai-lime);
}
.ai-dev-page .cs-sec .cs-card-text { margin-bottom: 20px; }
.ai-dev-page .cs-sec .cs-card-title {
    margin: 0 0 8px;
    font-size: 22px;
    line-height: 1.3;
    letter-spacing: -.2px;
    color: var(--ai-ink);
}
.ai-dev-page .cs-sec .cs-card-desc {
    font-size: 15px;
    line-height: 1.6;
    letter-spacing: 0;
    color: var(--ai-body);
    -webkit-line-clamp: 2;
    line-clamp: 2;
}
.ai-dev-page .cs-sec .cs-card-btn {
    align-self: stretch;
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid var(--ai-line);
}
.ai-dev-page .cs-sec .cs-card-btn .banner_btn { color: var(--ai-violet); }
.ai-dev-page .cs-sec .cs-card-btn .banner_btn:hover { color: var(--ai-deep); }
/* From 1200px up the carousel shows three cards (set by the short script after
   the section): smaller cards, so the panel rises a little less. */
@media (min-width: 1200px) {
    .ai-dev-page .cs-sec { --cs-arrow-y: calc(12.5% - 8px - 28px); }    /* three cards 32px apart, 4:3 pictures: middle of the picture above the panel */
    .ai-dev-page .cs-sec .cs-card-media { aspect-ratio: 4 / 3; }       /* taller pictures in the three-card row */
    .ai-dev-page .cs-sec .cs-card-body { margin: -56px 18px 0; padding: 22px 22px 20px; }
    .ai-dev-page .cs-sec .cs-card-text { margin-bottom: 16px; }
    .ai-dev-page .cs-sec .cs-card-title { font-size: 20px; }
}
@media (max-width: 991px) {
    .ai-dev-page .cs-sec { --cs-arrow-y: calc(28.125% - 30px); }
}
@media (max-width: 575px) {
    .ai-dev-page .cs-sec .cs-card-body { margin: -48px 14px 0; padding: 22px 20px 20px; }
    .ai-dev-page .cs-sec .cs-card-title { font-size: 19px; }
}

/* The arrows: same buttons and icons, a little smaller, on the pictures' inner edges */
.ai-dev-page #case-study-slider .owl-nav button.owl-prev,
.ai-dev-page #case-study-slider .owl-nav button.owl-next {
    width: 52px;
    height: 52px;
    margin-top: var(--cs-arrow-y);
    border: 1px solid rgba(44, 2, 58, .14);
    box-shadow: 0 6px 16px rgba(20, 8, 28, .14);
    transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.ai-dev-page #case-study-slider .owl-nav button.owl-prev { left: 16px; }
.ai-dev-page #case-study-slider .owl-nav button.owl-next { right: 16px; }
.ai-dev-page #case-study-slider.owl-theme .owl-nav button.owl-prev:hover,
.ai-dev-page #case-study-slider.owl-theme .owl-nav button.owl-next:hover {
    background: var(--ai-lime) !important;
    border-color: var(--ai-lime);
}
.ai-dev-page #case-study-slider.owl-theme .owl-dots { margin-top: 40px; }
.ai-dev-page .cs-sec .cs-card-btn .banner_btn {
    gap: 10px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    line-height: 1.4;
    font-weight: 600;
}
.ai-dev-page .cs-sec .cs-card-btn .banner_btn:after {   /* small arrow (decorative) */
    content: "";
    width: 7px;
    height: 7px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform .25s ease;
}
.ai-dev-page .cs-sec .cs-card-btn .banner_btn:hover { background: none; border-color: transparent; }
.ai-dev-page .cs-sec .cs-card-btn .banner_btn:hover:after { transform: translateX(3px) rotate(45deg); }
@media (max-width: 1440px) {
    .ai-dev-page .cs-sec { padding: 88px 0; }
    .ai-dev-page .cs-sec .cs-head h2 { font-size: 38px; }
    .ai-dev-page .cs-sec .cs-head p { font-size: 17px; }
}
@media (max-width: 991px) {
    .ai-dev-page .cs-sec { padding: 64px 0; }
    .ai-dev-page .cs-sec .cs-inner { gap: 32px; }
    .ai-dev-page .cs-sec .cs-head h2 { font-size: 32px; letter-spacing: -.5px; }
}
@media (max-width: 767px) {
    .ai-dev-page .cs-sec .cs-inner { padding: 0 15px; }
}
@media (max-width: 575px) {
    .ai-dev-page .cs-sec { padding: 48px 0; }
    .ai-dev-page .cs-sec .cs-head h2 { font-size: 27px; line-height: 1.2; }
    .ai-dev-page .cs-sec .cs-head p { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
    .ai-dev-page .cs-sec .cs-card,
    .ai-dev-page .cs-sec .cs-card-body { transition: none; }
    .ai-dev-page .cs-sec .cs-card:hover,
    .ai-dev-page .cs-sec .cs-card:hover .cs-card-body { transform: none; }
}

/* ---- 14. FAQ: "Frequently Asked Questions" ----
   The questions are this page's own; the look is the shared FAQ one, so only
   its look on this page is set here. Now: a white band; on the left the
   heading under the lime mark with the "Need more clarity?" panel straight
   under it (deep violet, lime button, like the banners on this page), staying
   in view while the questions scroll past on wide screens; on the right the
   questions as soft tinted rows, the open one lifted onto white with a lime
   edge and its arrow in a violet circle. Same questions, answers, links and
   opening and closing; nothing in the markup or the script is touched.      */
.ai-dev-page .faq_n_sec {
    display: block;
    min-height: 0;
    padding: 100px 0;
    background: #FFFFFF;
}
.ai-dev-page .faq_n_sec .faq_n_block {
    gap: 64px;
    align-items: flex-start;
    max-width: none;
}
.ai-dev-page .faq_n_sec .faq_left {
    position: sticky;
    top: 140px;
    flex: 0 0 400px;
    max-width: 400px;
}
.ai-dev-page .faq_n_sec h2.home_n_heading {
    margin: 0;
    font-size: 42px;
    line-height: 1.14;
    font-weight: 500;
    letter-spacing: -.8px;
    color: var(--ai-ink);
}
.ai-dev-page .faq_n_sec h2.home_n_heading:before {  /* short lime mark above the heading (decorative) */
    content: "";
    display: block;
    width: 44px;
    height: 4px;
    margin-bottom: 22px;
    border-radius: 2px;
    background: var(--ai-lime);
}
.ai-dev-page .faq_n_sec h2.home_n_heading span { font-weight: 500; color: var(--ai-violet); }

/* "Need more clarity?" */
.ai-dev-page .faq_n_sec .card_cta {
    max-width: none;
    max-height: none;
    margin-top: 36px;
    padding: 30px 30px 32px;
    border-radius: 20px;
    background-image: linear-gradient(135deg, rgba(23, 3, 31, .94) 0%, rgba(44, 2, 58, .90) 55%, rgba(91, 3, 117, .86) 100%), url('/assets/images/home/card-bg.png');
    background-size: cover;
    background-position: center;
    box-shadow: 0 24px 40px -24px rgba(44, 2, 58, .55);
}
.ai-dev-page .faq_n_sec .card_cta h3 {
    margin: 0 0 8px;
    font-size: 24px;
    line-height: 1.3;
    letter-spacing: -.3px;
    color: #FFFFFF;
}
.ai-dev-page .faq_n_sec .card_cta p {
    font-size: 15px;
    line-height: 1.6;
    letter-spacing: 0;
    color: rgba(255, 255, 255, .78);
}
.ai-dev-page .faq_n_sec .card_cta_btn {
    display: inline-flex;
    align-items: center;
    margin-top: 24px;
    padding: 13px 30px;
    border: 1px solid var(--ai-lime);
    border-radius: 999px;
    background: var(--ai-lime);
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    line-height: 1.3;
    font-weight: 600;
    color: var(--ai-ink);
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.ai-dev-page .faq_n_sec .card_cta_btn:hover {
    border-color: #FFFFFF;
    background: #FFFFFF;
    color: var(--ai-deep);
}

/* The questions */
.ai-dev-page .faq_n_sec .faqs_n_blocks { flex: 1 1 0; width: auto; min-width: 0; }
.ai-dev-page .faq_n_sec .faqs_n_blocks .accordion-box {
    margin: 0 0 14px;
    background-color: var(--ai-tint);
    border: 1px solid transparent;
    border-radius: var(--ai-radius);
    transition: background-color .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.ai-dev-page .faq_n_sec .faqs_n_blocks .accordion-box:last-child { margin-bottom: 0; }
.ai-dev-page .faq_n_sec .faqs_n_blocks .accordion-box:hover { border-color: rgba(91, 3, 117, .16); }
.ai-dev-page .faq_n_sec .faqs_n_blocks .accordion-box.active {
    background-color: #FFFFFF;
    border-color: var(--ai-line);
    box-shadow: var(--ai-shadow);
}
.ai-dev-page .faq_n_sec .faqs_n_blocks .accordion-box.active:before {   /* lime edge on the open question (decorative) */
    content: "";
    position: absolute;
    top: 22px;
    bottom: 22px;
    left: -1px;
    width: 4px;
    border-radius: 0 4px 4px 0;
    background: var(--ai-lime);
}
.ai-dev-page .faq_n_sec .faqs_n_blocks .accordion-box h5,
.ai-dev-page .faq_n_sec .faqs_n_blocks .accordion-box.active h5 {
    margin: 0;
    padding: 24px 88px 24px 28px;
    background-color: transparent;
}
.ai-dev-page .faq_n_sec .faqs_n_blocks .accordion-box h5 .title {
    font-size: 19px;
    line-height: 1.4;
    letter-spacing: -.2px;
    color: var(--ai-ink);
    transition: color .2s ease;
}
.ai-dev-page .faq_n_sec .faqs_n_blocks .accordion-box.active h5 .title { color: var(--ai-violet); }
/* the arrow: the same chevron, in a circle at the row's right */
.ai-dev-page .faq_n_sec .faqs_n_blocks .accordion-box span.arrow {
    position: absolute;
    top: 50%;
    right: 24px;
    width: 40px;
    height: 40px;
    margin-top: -20px;
    border: 1px solid rgba(44, 2, 58, .14);
    border-radius: 50%;
    background: #FFFFFF;
    transition: background-color .25s ease, border-color .25s ease;
}
.ai-dev-page .faq_n_sec .faqs_n_blocks .accordion-box span.arrow:before {
    top: 50%;
    right: auto;
    left: 50%;
    width: 9px;
    height: 9px;
    border-width: 0 2px 2px 0;
    border-color: var(--ai-violet);
    transform: translate(-50%, -70%) rotate(45deg);
    transition: transform .25s ease, border-color .25s ease;
}
.ai-dev-page .faq_n_sec .faqs_n_blocks .accordion-box.active span.arrow {
    border-color: var(--ai-violet);
    background: var(--ai-violet);
}
.ai-dev-page .faq_n_sec .faqs_n_blocks .accordion-box.active span.arrow.fa-angle-down:before {
    top: 50%;
    border-color: #FFFFFF;
    transform: translate(-50%, -30%) rotate(-135deg);
}
.ai-dev-page .faq_n_sec .faqs_n_blocks .acordionWrapper { padding: 0 88px 26px 28px; }
.ai-dev-page .faq_n_sec .faqs_n_blocks .acordionWrapper [itemprop="text"],
.ai-dev-page .faq_n_sec .faqs_n_blocks .acordionWrapper p,
.ai-dev-page .faq_n_sec .faqs_n_blocks .acordionWrapper ul li {
    font-size: 16px;
    line-height: 1.7;
    letter-spacing: 0;
    color: var(--ai-body);
}

@media (max-width: 1440px) {
    .ai-dev-page .faq_n_sec { padding: 88px 0; }
    .ai-dev-page .faq_n_sec .faq_n_block { gap: 48px; }
    .ai-dev-page .faq_n_sec .faq_left { flex-basis: 360px; max-width: 360px; }
    .ai-dev-page .faq_n_sec h2.home_n_heading { font-size: 38px; }
}
@media (max-width: 1199px) {
    .ai-dev-page .faq_n_sec .faq_left { flex-basis: 320px; max-width: 320px; }
}
@media (max-width: 992px) {
    .ai-dev-page .faq_n_sec { padding: 64px 0; }
    .ai-dev-page .faq_n_sec .faq_n_block { gap: 32px; }
    .ai-dev-page .faq_n_sec .faq_left { position: static; flex-basis: auto; max-width: none; width: 100%; }
    .ai-dev-page .faq_n_sec h2.home_n_heading { font-size: 32px; letter-spacing: -.5px; }
    .ai-dev-page .faq_n_sec .card_cta { margin-top: 26px; }
    .ai-dev-page .faq_n_sec .faqs_n_blocks { flex: none; width: 100%; }
    .ai-dev-page .faq_n_sec .faqs_n_blocks .accordion_wrap { margin-top: 0; }
}
@media (max-width: 575px) {
    .ai-dev-page .faq_n_sec { padding: 48px 0; }
    .ai-dev-page .faq_n_sec h2.home_n_heading { font-size: 27px; line-height: 1.2; }
    .ai-dev-page .faq_n_sec .card_cta { padding: 24px 22px 26px; }
    .ai-dev-page .faq_n_sec .faqs_n_blocks .accordion-box h5,
    .ai-dev-page .faq_n_sec .faqs_n_blocks .accordion-box.active h5 { padding: 20px 68px 20px 20px; }
    .ai-dev-page .faq_n_sec .faqs_n_blocks .accordion-box h5 .title { font-size: 17px; }
    .ai-dev-page .faq_n_sec .faqs_n_blocks .accordion-box span.arrow { right: 16px; width: 36px; height: 36px; margin-top: -18px; }
    .ai-dev-page .faq_n_sec .faqs_n_blocks .acordionWrapper { padding: 0 20px 22px; }
    .ai-dev-page .faq_n_sec .faqs_n_blocks .acordionWrapper [itemprop="text"],
    .ai-dev-page .faq_n_sec .faqs_n_blocks .acordionWrapper p { font-size: 15px; }
}

/* ---- 15. FOOTER ----
   The contact band and the strip below it now have one look on every page, set in footer.css
   (2026-10-15, "footer make it like before, but design improve"); the purple glass version that
   lived here is retired. Only their edges stay here: the same container as the sections above.  */
@media (min-width: 1441px) and (max-width: 1549px) {
    .ai-dev-page .contact-se .container,
    .ai-dev-page .footer-sec .container { width: calc(100% - 120px); max-width: 1450px; padding: 0 var(--bs-gutter-x, .75rem); }
}
@media (min-width: 1550px) {
    .ai-dev-page .contact-se .container,
    .ai-dev-page .footer-sec .container { max-width: 1392px; }
}

/* ---- 16. BUTTONS: one look for every button on this page ----
   Asked for 14-10-2026: the buttons had grown five different sizes, fonts,
   corner shapes and shadows. Now there are two kinds, set once here (this
   block comes last, so it has the final word):
   - main buttons (lime): Free Consultation, Discuss your needs, Book
     Consultation, Talk to an Expert, LET'S GO!
   - outline buttons: the services "Read More" and "View All"
   The main buttons all copy the "Discuss your needs" button in the first
   banner (the one the client picked, 14-10-2026): Rubik 500 17px, lime with a
   soft lime shadow, turning white with a deeper shadow and rising 2px on hover.
   The outline buttons share its size, corners and lift. The round carousel arrows share one size and shadow too.
   The menu's "Let's Talk" belongs to the shared header and is not changed.
   Same wording and links.                                                   */
body.ai-dev-page :is(.banner-sec, .banner-secW) a.banner_btn.btn-bg-primery,
.ai-dev-page :is(.cta-ai, :where(.hire-dev-page .cta-inner)) a.button.main-btn.btn.bg-white.tblack,
.ai-dev-page .flexible-sec .cta-between a.button.main-btn.btn.bg-white.tblack,
.ai-dev-page .cs-cta-sec a.banner_btn.btn-bg-primery,
.ai-dev-page .sam-cta a.button.main-btn.btn.bg-white.tblack,
.ai-dev-page .sds-cta a.button.main-btn.btn.bg-white.tblack,
.ai-dev-page .sds-story a.banner_btn.sds-story-btn,
.ai-dev-page .faq_n_sec .card_cta_btn,
.ai-dev-page .contact-se .submit-btn,
.ai-dev-page.contact-us-page .contact-section .submit-btn,
.ai-dev-page.home_n .home_vid_sec a.banner_btn.hero_cta_btn,
.ai-dev-page.home_n .solv_cta_sec a.banner_btn.solv_cta_btn,
.ai-dev-page.home_n .flexible-sec a.home_new_btn,
.ai-dev-page.contact-us-page .contact-section a.map-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 0 32px;
    border: 1px solid var(--ai-lime);
    border-radius: 999px;
    background: var(--ai-lime);
    font-family: 'Rubik', sans-serif !important;
    font-size: 17px;
    line-height: 1.2;
    font-weight: 500;
    letter-spacing: 0;
    color: #1B0A22;
    box-shadow: 0 10px 28px rgba(194, 201, 4, .26);
    transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease, color .25s ease, border-color .25s ease;
}
body.ai-dev-page :is(.banner-sec, .banner-secW) a.banner_btn.btn-bg-primery:hover,
.ai-dev-page :is(.cta-ai, :where(.hire-dev-page .cta-inner)) a.button.main-btn.btn.bg-white.tblack:hover,
.ai-dev-page .flexible-sec .cta-between a.button.main-btn.btn.bg-white.tblack:hover,
.ai-dev-page .cs-cta-sec a.banner_btn.btn-bg-primery:hover,
.ai-dev-page .sam-cta a.button.main-btn.btn.bg-white.tblack:hover,
.ai-dev-page .sds-cta a.button.main-btn.btn.bg-white.tblack:hover,
.ai-dev-page .sds-story a.banner_btn.sds-story-btn:hover,
.ai-dev-page .faq_n_sec .card_cta_btn:hover,
.ai-dev-page .contact-se .submit-btn:hover,
.ai-dev-page.contact-us-page .contact-section .submit-btn:hover,
.ai-dev-page.home_n .home_vid_sec a.banner_btn.hero_cta_btn:hover,
.ai-dev-page.home_n .solv_cta_sec a.banner_btn.solv_cta_btn:hover,
.ai-dev-page.home_n .flexible-sec a.home_new_btn:hover,
.ai-dev-page.contact-us-page .contact-section a.map-btn:hover {
    transform: translateY(-2px);
    border-color: #FFFFFF;
    background: #FFFFFF;
    color: var(--ai-deep) !important;              /* the shared a.banner_btn.btn-bg-primery:hover forces white text with !important */
    font-weight: 500 !important;
    box-shadow: 0 14px 34px rgba(11, 6, 18, .40);
}

.ai-dev-page .expert-coders-sec .full-content-column .banner_btn,
.ai-dev-page.home_n .soft_serv_sec a.banner_btn.serv_cta_btn,
.ai-dev-page .cs-sec .cs-viewall {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 52px;
    padding: 0 28px;
    border: 1px solid rgba(44, 2, 58, .22);
    border-radius: 999px;
    background: #FFFFFF;
    font-family: 'Rubik', sans-serif !important;
    font-size: 16px;
    line-height: 1.2;
    font-weight: 500;
    letter-spacing: 0;
    color: #1B0A22;
    box-shadow: 0 6px 16px -6px rgba(44, 2, 58, .20);
    transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease, color .25s ease, border-color .25s ease;
}
.ai-dev-page .expert-coders-sec .full-content-column .banner_btn:hover,
.ai-dev-page .expert-coders-sec .full-content-column:hover .banner_btn,
.ai-dev-page.home_n .soft_serv_sec a.banner_btn.serv_cta_btn:hover,
.ai-dev-page .cs-sec .cs-viewall:hover {
    transform: translateY(-2px);
    border-color: var(--ai-violet);
    background: var(--ai-violet);
    color: #FFFFFF;
    box-shadow: 0 12px 24px -8px rgba(91, 3, 117, .45);
}
.ai-dev-page .cs-sec .cs-viewall svg path { transition: stroke .2s ease; }
.ai-dev-page .cs-sec .cs-viewall:hover svg path { stroke: #FFFFFF; }

/* round carousel arrows: one size and shadow */
.ai-dev-page #case-study-slider .owl-nav button.owl-prev,
.ai-dev-page #case-study-slider .owl-nav button.owl-next,
.ai-dev-page .testimonials .testimonials-box .owl-nav button.owl-prev,
.ai-dev-page .testimonials .testimonials-box .owl-nav button.owl-next {
    width: 48px;
    height: 48px;
    border: 1px solid rgba(44, 2, 58, .14) !important;
    box-shadow: 0 6px 16px rgba(20, 8, 28, .14);
}
@media (max-width: 575px) {
    body.ai-dev-page :is(.banner-sec, .banner-secW) a.banner_btn.btn-bg-primery,
    .ai-dev-page :is(.cta-ai, :where(.hire-dev-page .cta-inner)) a.button.main-btn.btn.bg-white.tblack,
    .ai-dev-page .flexible-sec .cta-between a.button.main-btn.btn.bg-white.tblack,
    .ai-dev-page .faq_n_sec .card_cta_btn,
    .ai-dev-page .contact-se .submit-btn { min-height: 48px; padding: 0 26px; font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
    body.ai-dev-page :is(.banner-sec, .banner-secW) a.banner_btn.btn-bg-primery:hover,
    .ai-dev-page :is(.cta-ai, :where(.hire-dev-page .cta-inner)) a.button.main-btn.btn.bg-white.tblack:hover,
    .ai-dev-page .flexible-sec .cta-between a.button.main-btn.btn.bg-white.tblack:hover,
    .ai-dev-page .faq_n_sec .card_cta_btn:hover,
    .ai-dev-page .contact-se .submit-btn:hover,
    .ai-dev-page .expert-coders-sec .full-content-column .banner_btn:hover,
    .ai-dev-page .expert-coders-sec .full-content-column:hover .banner_btn,
    .ai-dev-page .cs-sec .cs-viewall:hover { transform: none; }
}

/* ---- 17. HEADER & BANNER ----
   The header is the shared one every page prints (common/header.php); only its
   look on this page is set here, the other pages keep theirs. Over the banner
   it stays clear, with a fine line under it; once the page scrolls, the
   violet bar becomes a violet glass bar (the brand violet, slightly see-through
   with a blur). "Let's Talk" takes the lime button
   style used on the rest of this page, in a smaller size. The banner keeps its
   picture, now under a veil that is dark behind the words and opens up towards
   the picture on the right, with the page's lime mark over a larger heading.
   Same links, menus, wording, picture and button; nothing in the markup or
   the scripts is touched.                                                    */
.ai-dev-page .header { border-bottom: 1px solid rgba(255, 255, 255, .08); }
.ai-dev-page .header.fixed-header {
    background: rgba(91, 3, 117, .94);                     /* the brand violet */
    -webkit-backdrop-filter: blur(14px) saturate(140%);
            backdrop-filter: blur(14px) saturate(140%);
    border-bottom-color: rgba(255, 255, 255, .06);
    box-shadow: 0 12px 30px -14px rgba(0, 0, 0, .55);
}
.ai-dev-page .header .main-navigation .menu > li > a { font-weight: 500; }
/* a slimmer header: less padding above and below, and round the menu items */
.ai-dev-page .header .menu-container { padding-top: 10px; padding-bottom: 10px; }
.ai-dev-page .header.fixed-header .menu-container { padding-top: 6px; padding-bottom: 6px; }
.ai-dev-page .header .main-navigation .menu > li { padding-top: 12px; padding-bottom: 12px; }
.ai-dev-page .header .contact-info-top a { transition: color .2s ease; }
.ai-dev-page .header .contact-info-top a:hover { color: var(--ai-lime); }
/* "Let's Talk": the page's lime button, smaller */
.ai-dev-page .header .header-cta a.header-cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 26px;
    border: 1px solid var(--ai-lime);
    border-radius: 999px;
    background: var(--ai-lime);
    font-family: 'Rubik', sans-serif;
    font-size: 16px;
    line-height: 1.2;
    font-weight: 500;
    color: #1B0A22 !important;                     /* the shared .header-cta-btn sets white text with !important: unreadable on lime */
    box-shadow: 0 8px 24px rgba(194, 201, 4, .38);
    transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease, color .25s ease, border-color .25s ease;
}
.ai-dev-page .header .header-cta a.header-cta-btn:hover {
    transform: translateY(-2px);
    border-color: #FFFFFF;
    background: #FFFFFF;
    color: var(--ai-deep) !important;              /* the shared .header-cta-btn:hover sets its colour with !important */
    box-shadow: 0 12px 28px rgba(11, 6, 18, .40);
}
/* the drop-down menus: rounder, softer */
.ai-dev-page .header .main-navigation .menu li ul {
    padding: 10px;
    border: 1px solid var(--ai-line);
    border-radius: 16px;
    box-shadow: 0 2px 4px rgba(20, 8, 28, .05), 0 24px 48px rgba(44, 2, 58, .18);
}

/* The banner */
.ai-dev-page :is(.banner-sec.ai-banner, .banner-secW.software-bannerW, .banner-sec.custom-software-banner, .banner-sec.web-development-banner, .banner-sec.software-banner, .banner-sec.sds-hero, .banner-sec.erp-banner, .banner-sec.mvp-banner, .banner-sec.devops-banner, .banner-sec.developer-banner, .banner-sec.openai-banner):before {           /* the veil over the picture (was a flat 64% black) */
    background: linear-gradient(90deg, rgba(30, 2, 40, .92) 0%, rgba(44, 2, 58, .74) 40%, rgba(44, 2, 58, .28) 100%);
}
.ai-dev-page :is(.banner-sec.ai-banner, .banner-secW.software-bannerW, .banner-sec.custom-software-banner, .banner-sec.web-development-banner, .banner-sec.software-banner, .banner-sec.sds-hero, .banner-sec.erp-banner, .banner-sec.mvp-banner, .banner-sec.devops-banner, .banner-sec.developer-banner, .banner-sec.openai-banner):after {            /* a soft fade into the page at the foot (decorative) */
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 140px;
    background: linear-gradient(180deg, rgba(30, 2, 40, 0) 0%, rgba(30, 2, 40, .55) 100%);
    pointer-events: none;
}
.ai-dev-page :is(.banner-sec.ai-banner, .banner-secW.software-bannerW, .banner-sec.custom-software-banner, .banner-sec.web-development-banner, .banner-sec.software-banner, .banner-sec.sds-hero, .banner-sec.erp-banner, .banner-sec.mvp-banner, .banner-sec.devops-banner, .banner-sec.developer-banner, .banner-sec.openai-banner) .container { position: relative; z-index: 1; }
.ai-dev-page :is(.banner-sec.ai-banner, .banner-secW.software-bannerW, .banner-sec.custom-software-banner, .banner-sec.web-development-banner, .banner-sec.software-banner, .banner-sec.sds-hero, .banner-sec.erp-banner, .banner-sec.mvp-banner, .banner-sec.devops-banner, .banner-sec.developer-banner, .banner-sec.openai-banner) :is(.banner-content, .banner-contentW) { padding-top: 42px; }   /* centred in the space under the header */
.ai-dev-page :is(.banner-sec.ai-banner, .banner-secW.software-bannerW, .banner-sec.custom-software-banner, .banner-sec.web-development-banner, .banner-sec.software-banner, .banner-sec.sds-hero, .banner-sec.erp-banner, .banner-sec.mvp-banner, .banner-sec.devops-banner, .banner-sec.developer-banner, .banner-sec.openai-banner) h1 {
    max-width: 720px;
    margin: 0;
    font-size: 58px;
    line-height: 1.06;
    font-weight: 500;
    letter-spacing: -1.4px;
    color: #FFFFFF;
}
.ai-dev-page :is(.banner-sec.ai-banner, .banner-secW.software-bannerW, .banner-sec.custom-software-banner, .banner-sec.web-development-banner, .banner-sec.software-banner, .banner-sec.sds-hero, .banner-sec.erp-banner, .banner-sec.mvp-banner, .banner-sec.devops-banner, .banner-sec.developer-banner, .banner-sec.openai-banner) h1:before {        /* short lime mark above the heading (decorative) */
    content: "";
    display: block;
    width: 52px;
    height: 4px;
    margin-bottom: 26px;
    border-radius: 2px;
    background: var(--ai-lime);
}
.ai-dev-page :is(.banner-sec.ai-banner, .banner-secW.software-bannerW, .banner-sec.custom-software-banner, .banner-sec.web-development-banner, .banner-sec.software-banner, .banner-sec.sds-hero, .banner-sec.erp-banner, .banner-sec.mvp-banner, .banner-sec.devops-banner, .banner-sec.developer-banner, .banner-sec.openai-banner) :is(.banner-content, .banner-contentW) p {
    max-width: 560px;
    margin: 20px 0 0;
    font-size: 19px;
    line-height: 1.6;
    color: rgba(255, 255, 255, .82);
}
.ai-dev-page :is(.banner-sec.ai-banner, .banner-secW.software-bannerW, .banner-sec.custom-software-banner, .banner-sec.web-development-banner, .banner-sec.software-banner, .banner-sec.sds-hero, .banner-sec.erp-banner, .banner-sec.mvp-banner, .banner-sec.devops-banner, .banner-sec.developer-banner, .banner-sec.openai-banner) .btn-group { margin-top: 36px; }

@media (max-width: 1440px) {
    .ai-dev-page :is(.banner-sec.ai-banner, .banner-secW.software-bannerW, .banner-sec.custom-software-banner, .banner-sec.web-development-banner, .banner-sec.software-banner, .banner-sec.sds-hero, .banner-sec.erp-banner, .banner-sec.mvp-banner, .banner-sec.devops-banner, .banner-sec.developer-banner, .banner-sec.openai-banner) h1 { font-size: 50px; }
    .ai-dev-page :is(.banner-sec.ai-banner, .banner-secW.software-bannerW, .banner-sec.custom-software-banner, .banner-sec.web-development-banner, .banner-sec.software-banner, .banner-sec.sds-hero, .banner-sec.erp-banner, .banner-sec.mvp-banner, .banner-sec.devops-banner, .banner-sec.developer-banner, .banner-sec.openai-banner) :is(.banner-content, .banner-contentW) p { font-size: 18px; }
}
@media (max-width: 1199px) {   /* the shorter mobile-menu header shows from here down */
    .ai-dev-page :is(.banner-sec.ai-banner, .banner-secW.software-bannerW, .banner-sec.custom-software-banner, .banner-sec.web-development-banner, .banner-sec.software-banner, .banner-sec.sds-hero, .banner-sec.erp-banner, .banner-sec.mvp-banner, .banner-sec.devops-banner, .banner-sec.developer-banner, .banner-sec.openai-banner) :is(.banner-content, .banner-contentW) { padding-top: 0; }
}
@media (max-width: 991px) {
    .ai-dev-page :is(.banner-sec.ai-banner, .banner-secW.software-bannerW, .banner-sec.custom-software-banner, .banner-sec.web-development-banner, .banner-sec.software-banner, .banner-sec.sds-hero, .banner-sec.erp-banner, .banner-sec.mvp-banner, .banner-sec.devops-banner, .banner-sec.developer-banner, .banner-sec.openai-banner):before {
        background: linear-gradient(180deg, rgba(44, 2, 58, .70) 0%, rgba(30, 2, 40, .84) 100%);
    }
    .ai-dev-page :is(.banner-sec.ai-banner, .banner-secW.software-bannerW, .banner-sec.custom-software-banner, .banner-sec.web-development-banner, .banner-sec.software-banner, .banner-sec.sds-hero, .banner-sec.erp-banner, .banner-sec.mvp-banner, .banner-sec.devops-banner, .banner-sec.developer-banner, .banner-sec.openai-banner) h1 { font-size: 40px; letter-spacing: -.8px; }
    .ai-dev-page :is(.banner-sec.ai-banner, .banner-secW.software-bannerW, .banner-sec.custom-software-banner, .banner-sec.web-development-banner, .banner-sec.software-banner, .banner-sec.sds-hero, .banner-sec.erp-banner, .banner-sec.mvp-banner, .banner-sec.devops-banner, .banner-sec.developer-banner, .banner-sec.openai-banner) h1:before { margin-bottom: 20px; }
    .ai-dev-page :is(.banner-sec.ai-banner, .banner-secW.software-bannerW, .banner-sec.custom-software-banner, .banner-sec.web-development-banner, .banner-sec.software-banner, .banner-sec.sds-hero, .banner-sec.erp-banner, .banner-sec.mvp-banner, .banner-sec.devops-banner, .banner-sec.developer-banner, .banner-sec.openai-banner) .btn-group { margin-top: 28px; }
}
@media (max-width: 575px) {
    .ai-dev-page :is(.banner-sec.ai-banner, .banner-secW.software-bannerW, .banner-sec.custom-software-banner, .banner-sec.web-development-banner, .banner-sec.software-banner, .banner-sec.sds-hero, .banner-sec.erp-banner, .banner-sec.mvp-banner, .banner-sec.devops-banner, .banner-sec.developer-banner, .banner-sec.openai-banner) h1 { font-size: 32px; line-height: 1.12; }
    .ai-dev-page :is(.banner-sec.ai-banner, .banner-secW.software-bannerW, .banner-sec.custom-software-banner, .banner-sec.web-development-banner, .banner-sec.software-banner, .banner-sec.sds-hero, .banner-sec.erp-banner, .banner-sec.mvp-banner, .banner-sec.devops-banner, .banner-sec.developer-banner, .banner-sec.openai-banner) :is(.banner-content, .banner-contentW) p { font-size: 16px; }
}

/* ---- 18. DROP-DOWN MENUS (the header's sub-menus, e.g. "AI and Data") ----
   Same links, order and behaviour; only their look on this page. A white
   panel with a lime line along its top, roomier rows, a soft violet wash and
   a small arrow sliding in on hover, and the page you are on marked in violet
   with a lime edge (the same mark as the open question in the FAQ).         */
.ai-dev-page .header .main-navigation .menu li ul {
    min-width: 270px;
    padding: 10px;
    border: 1px solid var(--ai-line);
    border-top: 3px solid var(--ai-lime);
    border-radius: 16px;
    background: #FFFFFF;
    box-shadow: 0 2px 4px rgba(20, 8, 28, .05), 0 24px 48px rgba(44, 2, 58, .20);
}
.ai-dev-page .header .main-navigation .menu li ul li,
.ai-dev-page .header .main-navigation .menu .dropdown ul li:has(> a[aria-current="page"]) {
    margin: 0 0 2px;
    padding: 0;
    border-radius: 10px;
    background: none;
}
.ai-dev-page .header .main-navigation .menu li ul li:last-child { margin-bottom: 0; }
.ai-dev-page .header .main-navigation .menu li ul li a {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 11px 14px;
    border-radius: 10px;
    font-family: 'Rubik', sans-serif;
    font-size: 16px;
    line-height: 1.3;
    font-weight: 400;
    color: var(--ai-ink);
    transition: background-color .2s ease, color .2s ease;
}
.ai-dev-page .header .main-navigation .menu li ul li a:after {   /* small arrow that slides in on hover (decorative) */
    content: "";
    flex: none;
    width: 7px;
    height: 7px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    opacity: 0;
    transform: translateX(-6px) rotate(45deg);
    transition: opacity .2s ease, transform .2s ease;
}
.ai-dev-page .header .main-navigation .menu li ul li a:hover {
    background: rgba(91, 3, 117, .06);
    color: var(--ai-violet);
}
.ai-dev-page .header .main-navigation .menu li ul li a:hover:after {
    opacity: 1;
    transform: translateX(0) rotate(45deg);
}
/* the page you are on */
.ai-dev-page .header .main-navigation .menu .dropdown ul li a[aria-current="page"] {
    background: rgba(91, 3, 117, .08);
    font-weight: 500;
    color: var(--ai-violet);
}
.ai-dev-page .header .main-navigation .menu .dropdown ul li a[aria-current="page"]:before {   /* lime edge (decorative) */
    content: "";
    position: absolute;
    top: 9px;
    bottom: 9px;
    left: 0;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--ai-lime);
}
@media (prefers-reduced-motion: reduce) {
    .ai-dev-page .header .main-navigation .menu li ul li a:after { transition: none; }
}

/* ---- 19. SECTION HEADINGS: one size scale for every h2 on the page ----
   The sections were styled one at a time, so their h2 titles had drifted:
   six changed size at 1370px and four at 1440px, two dropped to the small size
   at 992px instead of 991px, and the dark panels (both banners, "Build your
   vision", Contact Us) used three different smaller scales. Every h2 now takes
   the same size, line height and letter spacing at every width, and the same
   gaps: 22px from the lime mark to the title, 18px from the title to its intro.
   The :is() list carries the weight of its most specific entry, so this chunk,
   being last, wins over the per-section rules above.                         */
.ai-dev-page :is(
    .expert-coders-sec .heading2 h2,
    .responsive-design .heading2 h2,
    .why-coding-sprint.padd-60 .heading2 h2,
    .team-model-sec .heading2 h2,
    .industry-sec .home_n_heading,
    .why-ai-coding-sprint .heading2 h2,
    .cs-sec .cs-head h2,
    .testimonials h2,
    .news-sec h2,
    .faq_n_sec h2.home_n_heading,
    :is(.cta-ai, :where(.hire-dev-page .cta-inner)) :is(.heading-cta, :where(.hire-dev-page .cta-row > .heading2)) h2,
    .ai-vision .heading2 h2,
    .flexible-sec .cta-between .heading2 h2,
    .benifites-sec.bespoke .heading2 h2,
    .techno_use_sec .heading2 h2,
    .roi_pre_sec .heading2 h2,
    .contact-se .small-form-box h2
) {
    font-family: 'Rubik', sans-serif;
    font-size: 42px;
    font-weight: 500;
    line-height: 1.14;
    letter-spacing: -.8px;
}
/* lime mark -> title: 22px everywhere (the panels had 24, 20 and 16-18) */
.ai-dev-page :is(.cta-ai, :where(.hire-dev-page .cta-inner)) :is(.heading-cta, :where(.hire-dev-page .cta-row > .heading2)):before,
.ai-dev-page .ai-vision .heading2:before,
.ai-dev-page .flexible-sec .cta-between .heading2:before,
.ai-dev-page .contact-se .small-form-box h2:before { margin-bottom: 22px; }   /* pseudo-elements cannot go inside :is() */
/* title -> intro: 18px everywhere (these had 12, 14, 16 and 20) */
.ai-dev-page :is(.ai-vision .heading2 h2, .flexible-sec .cta-between .heading2 h2) { margin-bottom: 18px; }
.ai-dev-page :is(.cta-ai, :where(.hire-dev-page .cta-inner)) :is(.heading-cta, :where(.hire-dev-page .cta-row > .heading2)) p:is(.width-83, .width-83W) { margin-top: 18px; }
.ai-dev-page .cs-sec .cs-head p { margin-top: 18px; }

@media (max-width: 1440px) {
    .ai-dev-page :is(
        .expert-coders-sec .heading2 h2,
        .responsive-design .heading2 h2,
        .why-coding-sprint.padd-60 .heading2 h2,
        .team-model-sec .heading2 h2,
        .industry-sec .home_n_heading,
        .why-ai-coding-sprint .heading2 h2,
        .cs-sec .cs-head h2,
        .testimonials h2,
        .news-sec h2,
        .faq_n_sec h2.home_n_heading,
        :is(.cta-ai, :where(.hire-dev-page .cta-inner)) :is(.heading-cta, :where(.hire-dev-page .cta-row > .heading2)) h2,
        .ai-vision .heading2 h2,
        .flexible-sec .cta-between .heading2 h2,
        .benifites-sec.bespoke .heading2 h2,
        .techno_use_sec .heading2 h2,
        .roi_pre_sec .heading2 h2,
        .contact-se .small-form-box h2
    ) { font-size: 38px; }
}
@media (max-width: 991px) {
    .ai-dev-page :is(
        .expert-coders-sec .heading2 h2,
        .responsive-design .heading2 h2,
        .why-coding-sprint.padd-60 .heading2 h2,
        .team-model-sec .heading2 h2,
        .industry-sec .home_n_heading,
        .why-ai-coding-sprint .heading2 h2,
        .cs-sec .cs-head h2,
        .testimonials h2,
        .news-sec h2,
        .faq_n_sec h2.home_n_heading,
        :is(.cta-ai, :where(.hire-dev-page .cta-inner)) :is(.heading-cta, :where(.hire-dev-page .cta-row > .heading2)) h2,
        .ai-vision .heading2 h2,
        .flexible-sec .cta-between .heading2 h2,
        .benifites-sec.bespoke .heading2 h2,
        .techno_use_sec .heading2 h2,
        .roi_pre_sec .heading2 h2,
        .contact-se .small-form-box h2
    ) { font-size: 32px; letter-spacing: -.5px; }
}
@media (max-width: 575px) {
    .ai-dev-page :is(
        .expert-coders-sec .heading2 h2,
        .responsive-design .heading2 h2,
        .why-coding-sprint.padd-60 .heading2 h2,
        .team-model-sec .heading2 h2,
        .industry-sec .home_n_heading,
        .why-ai-coding-sprint .heading2 h2,
        .cs-sec .cs-head h2,
        .testimonials h2,
        .news-sec h2,
        .faq_n_sec h2.home_n_heading,
        :is(.cta-ai, :where(.hire-dev-page .cta-inner)) :is(.heading-cta, :where(.hire-dev-page .cta-row > .heading2)) h2,
        .ai-vision .heading2 h2,
        .flexible-sec .cta-between .heading2 h2,
        .benifites-sec.bespoke .heading2 h2,
        .techno_use_sec .heading2 h2,
        .roi_pre_sec .heading2 h2,
        .contact-se .small-form-box h2
    ) { font-size: 27px; line-height: 1.2; }
}

/* ---- 20. BODY TEXT: one size scale for paragraphs ----
   The sections were styled one at a time, so their paragraphs had drifted:
   intros under the headings stepped down at 1370px in some sections and
   1440px in others, the dark panels used three line heights (1.6, 1.65,
   1.75) and three whites (.80, .82, .84), Industries had -0.2px spacing, and
   card text came in 15, 16 and 16.5px. Now there are three sizes only:
   - intro under a section heading (and the review text, which already
     matched): 18px, 17px at 1440px and below, 16px at 575px and below;
   - card and answer text: 16px at every width;
   - small print (form note, copyright): 14px, unchanged.
   Body colour on light sections stays --ai-body; on the violet panels it is
   white at 82%. The hero line keeps its own, larger size.                    */
.ai-dev-page :is(
    .expert-coders-sec .heading2 > p:is(.width-83, .width-83W, :not([class])),
    .responsive-design .heading2 p,
    .why-coding-sprint.padd-60 .heading2 > p:is(.width-83, .width-83W, :not([class])),
    .team-model-sec .heading2 p,
    .industry-sec .home_n_text,
    .why-ai-coding-sprint .heading2 > p:is(.width-83, .width-83W, :not([class])),
    .cs-sec .cs-head p,
    .testimonials .heading2 p,
    :is(.cta-ai, :where(.hire-dev-page .cta-inner)) :is(.heading-cta, :where(.hire-dev-page .cta-row > .heading2)) p:is(.width-83, .width-83W),
    .ai-vision .heading2 p,
    .benifites-sec.bespoke .heading2 > p,
    .flexible-sec .cta-between .heading2 p
) {
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.65;
    letter-spacing: 0;
}
.ai-dev-page :is(
    :is(.cta-ai, :where(.hire-dev-page .cta-inner)) :is(.heading-cta, :where(.hire-dev-page .cta-row > .heading2)) p:is(.width-83, .width-83W),
    .ai-vision .heading2 p,
    .benifites-sec.bespoke .heading2 > p,
    .flexible-sec .cta-between .heading2 p
) { color: rgba(255, 255, 255, .82); }

.ai-dev-page :is(
    .expert-coders-sec .full-content-column p,
    .responsive-design .modelbox-content p,
    .why-coding-sprint.padd-60 .list-itme p,
    .cs-sec .cs-card-desc,
    .news-sec .blog_desc p,
    .faq_n_sec .faqs_n_blocks .acordionWrapper p,
    .benifites-sec.bespoke .why_choose_box p,
    .roi_pre_sec .col-lg-3 p,
    .faq_n_sec .card_cta p
) {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.7;
    letter-spacing: 0;
}
.ai-dev-page .faq_n_sec .card_cta p { color: rgba(255, 255, 255, .82); }

@media (max-width: 1440px) {
    .ai-dev-page :is(
        .expert-coders-sec .heading2 > p:is(.width-83, .width-83W, :not([class])),
        .responsive-design .heading2 p,
        .why-coding-sprint.padd-60 .heading2 > p:is(.width-83, .width-83W, :not([class])),
        .team-model-sec .heading2 p,
        .industry-sec .home_n_text,
        .why-ai-coding-sprint .heading2 > p:is(.width-83, .width-83W, :not([class])),
        .cs-sec .cs-head p,
        .testimonials .heading2 p,
        :is(.cta-ai, :where(.hire-dev-page .cta-inner)) :is(.heading-cta, :where(.hire-dev-page .cta-row > .heading2)) p:is(.width-83, .width-83W),
        .ai-vision .heading2 p,
        .benifites-sec.bespoke .heading2 > p,
        .flexible-sec .cta-between .heading2 p
    ) { font-size: 17px; }
}
@media (max-width: 575px) {
    .ai-dev-page :is(
        .expert-coders-sec .heading2 > p:is(.width-83, .width-83W, :not([class])),
        .responsive-design .heading2 p,
        .why-coding-sprint.padd-60 .heading2 > p:is(.width-83, .width-83W, :not([class])),
        .team-model-sec .heading2 p,
        .industry-sec .home_n_text,
        .why-ai-coding-sprint .heading2 > p:is(.width-83, .width-83W, :not([class])),
        .cs-sec .cs-head p,
        .testimonials .heading2 p,
        :is(.cta-ai, :where(.hire-dev-page .cta-inner)) :is(.heading-cta, :where(.hire-dev-page .cta-row > .heading2)) p:is(.width-83, .width-83W),
        .ai-vision .heading2 p,
        .benifites-sec.bespoke .heading2 > p,
        .flexible-sec .cta-between .heading2 p
    ) { font-size: 16px; }
}

/* ---- 21. OTHER AI AND DATA PAGES: shared fixes and each page's own picture ----
   What the other pages in the menu need on top of the design above.        */
/* The "Why Coding Sprint?" band has a black gradient overlay in style.css.
   AI Development hides it in its own page styles; the other pages do not. */
.ai-dev-page .why-ai-coding-sprint:before { display: none; }

/* AI Consultancy: its own picture in the "Why" frame (the design above draws
   AI Development's picture there). */
.ai-dev-page.ai-consultancy-page .why-ai-coding-sprint .row:after {
    background-image: url('/assets/images/ai-consulting/our-ai-consulting-img.jpg');
    background-position: center;
}

/* AI Automation: its own picture in the "Why" frame. */
.ai-dev-page.ai-automation-page .why-ai-coding-sprint .row:after {
    background-image: url('/assets/images/ai-integration-automation/we-can-help.webp');
    background-position: center;
}

/* Machine Learning: its own picture in the "Why" frame. */
.ai-dev-page.ml-page .why-ai-coding-sprint .row:after {
    background-image: url('/assets/images/machine-learning/our-process-building-ml-models.webp');
    background-position: center;
}
/* AI Support & Maintenance: its own picture in the "Why" frame. */
.ai-dev-page.ai-support-page .why-ai-coding-sprint .row:after {
    background-image: url('/assets/images/ai-support-maintenance/benefits-ai-maintenance.jpg');
    background-position: 72% center;     /* the robot stands right of centre */
}
/* Band rhythm when Industries comes straight after Benefits (Machine Learning): two
   tinted bands in a row merged into one with a 260px gap. Industries turns white
   (and loses style.css's 60px top margin) and the "Why" band after it turns tinted,
   so light and white alternate again. AI Development has a different order. */
.ai-dev-page .why-coding-sprint.padd-60 + .industry-sec { margin-top: 0; background: #FFFFFF; }
.ai-dev-page .why-coding-sprint.padd-60 + .industry-sec + .why-ai-coding-sprint { background: var(--ai-tint); }

/* Benefits list, two-column layout (1550px and up): the grid is filled a column at a
   time with three rows, which fits AI Development's 3 + 3 points. Machine Learning
   has 2 + 2, so the third point slid into the first column. The row count now
   follows the first column: two rows when it holds two points, four when it holds
   four, so each point stays in its own column. */
@media (min-width: 1550px) {
    .ai-dev-page .why-coding-sprint.padd-60 .row:not(:has(> [class*="col-"]:first-child .list-itme:nth-child(3))) { grid-template-rows: repeat(2, auto); }
    .ai-dev-page .why-coding-sprint.padd-60 .row:has(> [class*="col-"]:first-child .list-itme:nth-child(4)) { grid-template-rows: repeat(4, auto); }
    .ai-dev-page .why-coding-sprint.padd-60 .row:has(> [class*="col-"]:first-child .list-itme:nth-child(5)) { grid-template-rows: repeat(5, auto); }   /* Pen Testing: 5 + 5 */
    .ai-dev-page .why-coding-sprint.padd-60 .row:has(> [class*="col-"]:first-child .list-itme:nth-child(6)) { grid-template-rows: repeat(6, auto); }
}

/* Equal space above and below every section (2026-10-14, "top and bottom space should
   be equal"): the section paddings are now the same top and bottom, and the
   container's style.css margin class mb_38 (38px under the content on most pages'
   Benefits sections) is cancelled here. */
.ai-dev-page section .container.mb_38 { margin-bottom: 0; }

/* Cards: the same space above and below the content ("card top and bottom space?").
   The paddings are equal top and bottom, and style.css's 30px bottom margin on the
   last paragraph of a card is removed. */
.ai-dev-page :is(.expert-coders-sec .full-content-column, .benifites-sec.bespoke .why_choose_box, .expert-coders-sec:is(.bg-offwhite, .bg-offwhiteW, :has(.list-coding)) .list-coding, .expert-coders-sec:is(.bg-offwhite, .bg-offwhiteW, :has(.list-coding)) .list-cont, .techno_use_sec .box-technology) > :last-child { margin-bottom: 0; }

/* Benefits intro: when a page has two paragraphs, a gap between them. */
.ai-dev-page .why-coding-sprint.padd-60 .heading2 > p + p:is(.width-83, .width-83W, :not([class])) { margin-top: 14px; }   /* weight above chunk 4's margin reset */
/* FAQ: AI Data Services has an intro line under the FAQ heading (styled in its own
   page styles in #555); it takes the page's body colour and card-text size. */
.ai-dev-page .faq_n_sec .faq_left > h2.home_n_heading + p { font-size: 16px; line-height: 1.7; letter-spacing: 0; color: var(--ai-body); }

/* ---- 22. "WHY CHOOSE CODING SPRINT" SLIDER (benifites-sec bespoke) ----
   On AI Consultancy and other pages in the menu. Was a white band with thin
   grey boxes, lime titles and black icons that all turned lime on hover. Now a
   deep violet band (it sits between a white section and the tinted case
   studies), heading in white with the lime mark, and white cards in the
   page's card style: the icon on a soft tile in brand violet, title and text
   left-aligned. The arrows and dots move under the cards: dots on the left,
   arrows on the right. Same slider (Swiper), same cards, wording and icons;
   the icon colour is CSS only.                                             */
.ai-dev-page .benifites-sec.bespoke {
    padding: 100px 0;
    background: linear-gradient(120deg, #1E0228 0%, var(--ai-deep) 45%, #4A0360 100%);
}
.ai-dev-page .benifites-sec.bespoke .heading2 {
    max-width: 860px;
    margin: 0 auto 48px;
    padding: 0;
    text-align: center;
}
.ai-dev-page .benifites-sec.bespoke .heading2:before {      /* the page's lime heading mark */
    content: "";
    display: block;
    width: 44px;
    height: 4px;
    margin: 0 auto 22px;
    border-radius: 2px;
    background: var(--ai-lime);
}
.ai-dev-page .benifites-sec.bespoke .heading2 h2 { margin: 0 0 18px; color: #FFFFFF; }
.ai-dev-page .benifites-sec.bespoke .heading2 h2 br { display: none; }   /* one balanced line break is left to the browser */
.ai-dev-page .benifites-sec.bespoke .heading2 > p { max-width: 780px; margin: 0 auto; }

/* the slider: full container width, room under the cards for dots and arrows */
.ai-dev-page .benifites-sec.bespoke .why_choose_slide { margin: 0; padding: 0; }   /* style.css pads it 20px on phones */
.ai-dev-page .benifites-sec.bespoke .why_choose_slide .swiper {
    width: 100%;
    padding: 6px 0 84px;
}
.ai-dev-page .benifites-sec.bespoke .why_choose_slide .swiper .swiper-wrapper { padding-bottom: 0; }
.ai-dev-page .benifites-sec.bespoke .why_choose_slide .swiper-slide { align-items: stretch; height: auto; }

/* the cards */
.ai-dev-page .benifites-sec.bespoke .why_choose_slide .why_choose_box,
.ai-dev-page .benifites-sec.bespoke .why_choose_slide .why_choose_box:hover {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    min-height: 0;
    margin: 0;
    padding: 32px 28px 32px;
    text-align: left;
    color: var(--ai-ink);
    background: #FFFFFF;
    border: 0;
    border-radius: 20px;
    box-shadow: 0 18px 30px -22px rgba(0, 0, 0, .55);
    transition: transform .3s ease, box-shadow .3s ease;
}
.ai-dev-page .benifites-sec.bespoke .why_choose_slide .why_choose_box:hover {
    transform: translateY(-4px);
    box-shadow: 0 24px 36px -22px rgba(0, 0, 0, .65);
}
.ai-dev-page .benifites-sec.bespoke .why_choose_slide .why_choose_box svg {   /* icon on a soft tile */
    display: block;
    flex: none;
    width: 80px;
    height: 80px;
    margin: 0 0 24px;
    padding: 18px;
    box-sizing: border-box;
    border-radius: 20px;
    background: var(--ai-tint);
    transition: background-color .3s ease;
}
.ai-dev-page .benifites-sec.bespoke .why_choose_slide .why_choose_box svg path { fill: var(--ai-violet); transition: fill .3s ease; }
.ai-dev-page .benifites-sec.bespoke .why_choose_slide .why_choose_box:hover svg { background: var(--ai-violet); }
.ai-dev-page .benifites-sec.bespoke .why_choose_slide .why_choose_box:hover svg path { fill: #FFFFFF; }
.ai-dev-page .benifites-sec.bespoke .why_choose_slide .why_choose_box h3,
.ai-dev-page .benifites-sec.bespoke .why_choose_slide .why_choose_box:hover h3 {
    margin: 0 0 10px;
    font-size: 21px;
    line-height: 1.3;
    font-weight: 500;
    letter-spacing: -.2px;
    text-align: left;
    color: var(--ai-ink);
}
.ai-dev-page .benifites-sec.bespoke .why_choose_slide .why_choose_box p { margin: 0; text-align: left; color: var(--ai-body); }

/* dots under the cards on the left, arrows on the right */
.ai-dev-page .benifites-sec.bespoke .why_choose_slide .swiper-pagination {
    bottom: 20px !important;
    left: 0 !important;
    width: auto !important;
    text-align: left;
    line-height: 0;
}
.ai-dev-page .benifites-sec.bespoke .why_choose_slide .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    margin: 0 8px 0 0 !important;
    border-radius: 999px;
    background: #FFFFFF;
    opacity: .35;
    transition: width .3s ease, opacity .3s ease, background-color .3s ease;
}
.ai-dev-page .benifites-sec.bespoke .why_choose_slide .swiper-pagination-bullet-active {
    width: 30px;
    opacity: 1;
    background: var(--ai-lime);
}
.ai-dev-page .benifites-sec.bespoke .why_choose_slide .swiper-button-next,
.ai-dev-page .benifites-sec.bespoke .why_choose_slide .swiper-button-prev {
    top: auto;
    bottom: 0;
    left: auto;
    width: 48px;
    height: 48px;
    margin: 0;
    padding: 0;
    color: #FFFFFF;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .30);
    border-radius: 50%;
    transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}
.ai-dev-page .benifites-sec.bespoke .why_choose_slide .swiper-button-next { right: 0; }
.ai-dev-page .benifites-sec.bespoke .why_choose_slide .swiper-button-prev { right: 58px; }
.ai-dev-page .benifites-sec.bespoke .why_choose_slide .swiper-button-next:hover,
.ai-dev-page .benifites-sec.bespoke .why_choose_slide .swiper-button-prev:hover {
    color: #1B0A22;
    background: var(--ai-lime);
    border-color: var(--ai-lime);
}
.ai-dev-page .benifites-sec.bespoke .why_choose_slide .swiper-button-next:after,
.ai-dev-page .benifites-sec.bespoke .why_choose_slide .swiper-button-prev:after { font-size: 15px !important; font-weight: 700; }

@media (max-width: 1440px) {
    .ai-dev-page .benifites-sec.bespoke { padding: 88px 0; }
}
@media (max-width: 991px) {
    .ai-dev-page .benifites-sec.bespoke { padding: 64px 0; }
    .ai-dev-page .benifites-sec.bespoke .heading2 { margin-bottom: 36px; }
}
@media (max-width: 575px) {
    .ai-dev-page .benifites-sec.bespoke { padding: 48px 0; }
    .ai-dev-page .benifites-sec.bespoke .why_choose_slide .why_choose_box,
    .ai-dev-page .benifites-sec.bespoke .why_choose_slide .why_choose_box:hover { padding: 26px 22px 26px; border-radius: 18px; }
    .ai-dev-page .benifites-sec.bespoke .why_choose_slide .why_choose_box svg { width: 68px; height: 68px; padding: 15px; margin-bottom: 20px; border-radius: 18px; }
    .ai-dev-page .benifites-sec.bespoke .why_choose_slide .why_choose_box h3 { font-size: 19px; }
}
@media (prefers-reduced-motion: reduce) {
    .ai-dev-page .benifites-sec.bespoke .why_choose_slide .why_choose_box:hover { transform: none; }
}

/* ---- 22b. "WHY CHOOSE" BAND GRAPHIC: the code symbol ----
   Option 2 of three (2026-10-14): a code symbol </> drawn as three strokes,
   very large and faint in white on the right of the band, running behind the
   cards, with a small lime one in the top left corner. It says "software
   agency" without any words; the shape is a mask, nothing in the markup
   changes. Smaller on tablets, the lime one left out on phones.            */
.ai-dev-page :is(.benifites-sec.bespoke, .expert-coders-sec:is(.bg-offwhite, .bg-offwhiteW, :has(.list-coding))) { position: relative; isolation: isolate; overflow: hidden; }
.ai-dev-page :is(.benifites-sec.bespoke, .expert-coders-sec:is(.bg-offwhite, .bg-offwhiteW, :has(.list-coding))):before,
.ai-dev-page :is(.benifites-sec.bespoke, .expert-coders-sec:is(.bg-offwhite, .bg-offwhiteW, :has(.list-coding))):after {
    content: "";
    position: absolute;
    z-index: -1;
    -webkit-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 400'><g fill='none' stroke='white' stroke-width='22' stroke-linecap='round' stroke-linejoin='round'><path d='M190 80 L60 200 L190 320'/><path d='M410 80 L540 200 L410 320'/><path d='M350 50 L250 350'/></g></svg>") center / contain no-repeat;
    mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 400'><g fill='none' stroke='white' stroke-width='22' stroke-linecap='round' stroke-linejoin='round'><path d='M190 80 L60 200 L190 320'/><path d='M410 80 L540 200 L410 320'/><path d='M350 50 L250 350'/></g></svg>") center / contain no-repeat;
    pointer-events: none;
}
.ai-dev-page :is(.benifites-sec.bespoke, .expert-coders-sec:is(.bg-offwhite, .bg-offwhiteW, :has(.list-coding))):before {      /* large, white, right */
    top: 50%;
    right: -60px;
    width: 640px;
    height: 427px;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, .05);
}
.ai-dev-page :is(.benifites-sec.bespoke, .expert-coders-sec:is(.bg-offwhite, .bg-offwhiteW, :has(.list-coding))):after {       /* small, lime, top left */
    top: 48px;
    left: -40px;
    width: 240px;
    height: 160px;
    background: rgba(194, 201, 4, .10);
}
@media (max-width: 991px) {
    .ai-dev-page :is(.benifites-sec.bespoke, .expert-coders-sec:is(.bg-offwhite, .bg-offwhiteW, :has(.list-coding))):before { right: -80px; width: 420px; height: 280px; }
    .ai-dev-page :is(.benifites-sec.bespoke, .expert-coders-sec:is(.bg-offwhite, .bg-offwhiteW, :has(.list-coding))):after { top: 20px; left: -40px; width: 160px; height: 107px; }
}
@media (max-width: 575px) {
    .ai-dev-page :is(.benifites-sec.bespoke, .expert-coders-sec:is(.bg-offwhite, .bg-offwhiteW, :has(.list-coding))):before { right: -70px; width: 300px; height: 200px; }
    .ai-dev-page :is(.benifites-sec.bespoke, .expert-coders-sec:is(.bg-offwhite, .bg-offwhiteW, :has(.list-coding))):after { display: none; }
}

/* ---- 23. LONG SECTION INTROS: heading left, text right ----
   On the other pages the services intro is long (one to three paragraphs,
   up to ~860 characters), and a long block of centred text under a centred
   heading is hard to read. There the heading block becomes two columns: the
   lime mark and heading on the left, the paragraphs on the right, left-
   aligned, behind a fine rule; the cards follow underneath at full width.
   AI Development keeps its short centred intro. Stacks below 992px.         */
@media (min-width: 992px) {
    .ai-dev-page:not(.ai-development-page) .expert-coders-sec:not(.bg-offwhite, .bg-offwhiteW, :has(.list-coding)) .heading2:has(> p) {
        display: grid;
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
        column-gap: 72px;
        align-items: start;
        max-width: none;
        text-align: left;
    }
    .ai-dev-page:not(.ai-development-page) .expert-coders-sec:not(.bg-offwhite, .bg-offwhiteW, :has(.list-coding)) .heading2:has(> p):before {
        grid-column: 1;
        grid-row: 1;
        margin: 0 0 22px;
    }
    .ai-dev-page:not(.ai-development-page) .expert-coders-sec:not(.bg-offwhite, .bg-offwhiteW, :has(.list-coding)) .heading2:has(> p) h2 {
        grid-column: 1;
        grid-row: 2 / span 3;
        max-width: none;
        margin: 0;
        text-align: left;
    }
    .ai-dev-page:not(.ai-development-page) .expert-coders-sec:not(.bg-offwhite, .bg-offwhiteW, :has(.list-coding)) .heading2:has(> p) > p {
        grid-column: 2;
        max-width: none;
        margin: 0;
        padding: 0 0 16px 36px;
        text-align: left;
        border-left: 1px solid var(--ai-line);
    }
    .ai-dev-page:not(.ai-development-page) .expert-coders-sec:not(.bg-offwhite, .bg-offwhiteW, :has(.list-coding)) .heading2:has(> p) > p:nth-of-type(1) { grid-row: 2; padding-top: 6px; }
    .ai-dev-page:not(.ai-development-page) .expert-coders-sec:not(.bg-offwhite, .bg-offwhiteW, :has(.list-coding)) .heading2:has(> p) > p:nth-of-type(2) { grid-row: 3; }
    .ai-dev-page:not(.ai-development-page) .expert-coders-sec:not(.bg-offwhite, .bg-offwhiteW, :has(.list-coding)) .heading2:has(> p) > p:nth-of-type(3) { grid-row: 4; }
    .ai-dev-page:not(.ai-development-page) .expert-coders-sec:not(.bg-offwhite, .bg-offwhiteW, :has(.list-coding)) .heading2:has(> p) > p:last-of-type { padding-bottom: 6px; }
    .ai-dev-page:not(.ai-development-page) .expert-coders-sec:not(.bg-offwhite, .bg-offwhiteW, :has(.list-coding)) .heading2:has(> p) > .row {
        grid-column: 1 / -1;
        grid-row: 5;
    }
    .ai-dev-page:not(.ai-development-page) .expert-coders-sec:not(.bg-offwhite, .bg-offwhiteW, :has(.list-coding)) .heading2:has(> p) > .row + .row { grid-row: 6; }
}
@media (max-width: 991px) {
    .ai-dev-page:not(.ai-development-page) .expert-coders-sec:not(.bg-offwhite, .bg-offwhiteW, :has(.list-coding)) .heading2:has(> p) { text-align: left; }
    .ai-dev-page:not(.ai-development-page) .expert-coders-sec:not(.bg-offwhite, .bg-offwhiteW, :has(.list-coding)) .heading2:has(> p):before { margin-left: 0; }
    .ai-dev-page:not(.ai-development-page) .expert-coders-sec:not(.bg-offwhite, .bg-offwhiteW, :has(.list-coding)) .heading2:has(> p) h2,
    .ai-dev-page:not(.ai-development-page) .expert-coders-sec:not(.bg-offwhite, .bg-offwhiteW, :has(.list-coding)) .heading2:has(> p) > p { margin-left: 0; text-align: left; }
    .ai-dev-page:not(.ai-development-page) .expert-coders-sec:not(.bg-offwhite, .bg-offwhiteW, :has(.list-coding)) .heading2:has(> p) > p + p { margin-top: 14px; }
}

/* ---- 24. CENTRED SECTION HEADERS: wider ----
   "can we increase the width of the content section?" (2026-10-14). The
   centred headers (services, AI models, process, "Why choose") were held to
   820px for the heading and 780px for the intro, which broke a short heading
   over two lines and made the intro a narrow column. Now up to 1040px and
   920px; the text is unchanged.                                             */
.ai-dev-page :is(.expert-coders-sec, .responsive-design, .team-model-sec) .heading2 h2 { max-width: 1040px; }
.ai-dev-page .expert-coders-sec .heading2 > p:is(.width-83, .width-83W, :not([class])),
.ai-dev-page .responsive-design .heading2 p,
.ai-dev-page .team-model-sec .heading2 p { max-width: 920px; }
.ai-dev-page .benifites-sec.bespoke .heading2 { max-width: 1040px; }
.ai-dev-page .benifites-sec.bespoke .heading2 > p { max-width: 920px; }
/* the CTA banner's heading: 760px broke "...unlock new growth" before the
   heading's own line break, leaving one word on a line at full width */
.ai-dev-page .flexible-sec .cta-between .heading2 :is(h2, p) { max-width: 880px; }

/* ---- 25. SERVICE CARD ICONS ----
   "can we do something with the icons?" (2026-10-14). On the other pages each
   services card starts with a black outline icon (an <img>), shown large and
   grey. It now sits on the same soft tile as the "Why choose" cards, drawn in
   brand violet; on card hover the tile turns violet and the icon white. The
   icon files are untouched: the colour is a CSS filter (black -> #5B0375,
   white on hover). A filter would also tint a background on the image, so the
   tile is drawn behind it by the card (::after), lined up with the card's
   padding. Only cards that start with an icon image get it.                 */
.ai-dev-page .expert-coders-sec .full-content-column > img:first-child {
    position: relative;
    z-index: 1;
    display: block;
    flex: none;
    width: 84px;
    height: 84px;
    margin: 0 0 24px;
    padding: 14px;
    box-sizing: border-box;
    object-fit: contain;
    filter: brightness(0) saturate(100%) invert(16%) sepia(22%) saturate(7395%) hue-rotate(272deg) brightness(89%) contrast(122%);
}
.ai-dev-page .expert-coders-sec .full-content-column:has(> img:first-child):after {   /* the tile (decorative) */
    content: "";
    position: absolute;
    z-index: 0;
    top: 40px;     /* = the card padding (measured from inside its border) */
    left: 36px;
    width: 84px;
    height: 84px;
    border-radius: 22px;
    background: var(--ai-tint);
    transition: background-color .3s ease;
}
.ai-dev-page .expert-coders-sec .full-content-column:hover > img:first-child { filter: brightness(0) invert(1); }
.ai-dev-page .expert-coders-sec .full-content-column:has(> img:first-child):hover:after { background: var(--ai-violet); }
@media (max-width: 1370px) {
    .ai-dev-page .expert-coders-sec .full-content-column:has(> img:first-child):after { top: 34px; left: 28px; }
}
@media (max-width: 575px) {
    .ai-dev-page .expert-coders-sec .full-content-column > img:first-child { width: 72px; height: 72px; padding: 12px; margin-bottom: 20px; }
    .ai-dev-page .expert-coders-sec .full-content-column:has(> img:first-child):after { top: 28px; left: 22px; width: 72px; height: 72px; border-radius: 20px; }
}

/* ---- 26. TECH STACK (techno_use_sec) ----
   On AI Automation and AI Data Services. Was a grey band with thin bordered
   word boxes in three ruled columns. Now a white band (it sits between the
   violet "Why choose" band and the tinted case studies), the heading centred
   with the lime mark, and each category as a soft tint card in a 3 x 2 grid
   with equal rows: the category name, then the
   technologies as quiet white tags (small corners, not pill buttons: they are
   labels, not links). Same categories and names; the columns keep their
   order (the grid fills column by column).                                  */
.ai-dev-page .techno_use_sec {
    padding: 100px 0;
    background: #FFFFFF;
}
.ai-dev-page .techno_use_sec .row { margin: 0; }
.ai-dev-page .techno_use_sec .heading2 {
    max-width: 1040px;
    margin: 0 auto 48px;
    padding: 0;
    text-align: center;
}
.ai-dev-page .techno_use_sec .heading2:before {      /* the page's lime heading mark */
    content: "";
    display: block;
    width: 44px;
    height: 4px;
    margin: 0 auto 22px;
    border-radius: 2px;
    background: var(--ai-lime);
}
.ai-dev-page .techno_use_sec .heading2 h2 { margin: 0; color: var(--ai-ink); }
.ai-dev-page .techno_use_sec .tech_row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(2, auto);
    grid-auto-flow: column;              /* column by column, as the markup reads */
    gap: 24px;
}
.ai-dev-page .techno_use_sec .tech_row > [class*="col-"] { display: contents; }
.ai-dev-page .techno_use_sec .box-technology,
.ai-dev-page .techno_use_sec .col-lg-4:last-child .box-technology {
    height: auto;
    margin: 0;
    padding: 30px 30px 30px;
    background: var(--ai-tint);
    border: 0;
    border-radius: 20px;
}
.ai-dev-page .techno_use_sec .technology-heading { display: block; margin: 0 0 20px; }   /* style.css: a centred flex row */
.ai-dev-page .techno_use_sec .technology-heading h3:after { display: none; }   /* style.css: a lime underline placed at 40% / 20px, which ran through the title */
.ai-dev-page .techno_use_sec .technology-heading h3 {
    margin: 0;
    font-size: 21px;
    line-height: 1.3;
    font-weight: 500;
    letter-spacing: -.2px;
    text-align: left;
    color: var(--ai-ink);
    width: auto;
    padding: 0;
}
.ai-dev-page .techno_use_sec .btn-group {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 10px;
    margin: 0;
}
.ai-dev-page .techno_use_sec .btn-group span {
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    line-height: 1.3;
    font-weight: 500;
    color: var(--ai-ink);
    background: #FFFFFF;
    border: 1px solid var(--ai-line);
    border-radius: 8px;
}
@media (max-width: 1440px) {
    .ai-dev-page .techno_use_sec { padding: 88px 0; }
}
@media (max-width: 991px) {
    .ai-dev-page .techno_use_sec { padding: 64px 0; }
    .ai-dev-page .techno_use_sec .heading2 { margin-bottom: 36px; }
    .ai-dev-page .techno_use_sec .tech_row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: none;
        grid-auto-flow: row;
        gap: 18px;
    }
}
@media (max-width: 575px) {
    .ai-dev-page .techno_use_sec { padding: 48px 0; }
    .ai-dev-page .techno_use_sec .tech_row { grid-template-columns: minmax(0, 1fr); gap: 14px; }
    .ai-dev-page .techno_use_sec .box-technology,
    .ai-dev-page .techno_use_sec .col-lg-4:last-child .box-technology { padding: 24px 22px 24px; border-radius: 18px; }
    .ai-dev-page .techno_use_sec .technology-heading h3 { font-size: 19px; }
    .ai-dev-page .techno_use_sec .btn-group span { font-size: 14px; padding: 7px 12px; }
}

/* ---- 27. ROI STATS BAND (roi_pre_sec) ----
   On AI Data Services. Was the picture with four grey glass boxes. Now the
   same picture (set inline on the section) under the deep violet veil the
   other dark bands use, the heading in white with the lime mark, and the four
   figures as a clean row divided by fine lines, no boxes: the figure large in
   lime, the explanation under it in soft white, both centred. 2 x 2 on tablets, one per row
   on phones. Same figures and wording.                                      */
.ai-dev-page .roi_pre_sec {
    position: relative;
    isolation: isolate;
    padding: 100px 0;
    color: #FFFFFF;
    background-position: center;
    background-size: cover;
}
.ai-dev-page .roi_pre_sec:before {                  /* the violet veil */
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(120deg, rgba(30, 2, 40, .93) 0%, rgba(44, 2, 58, .86) 50%, rgba(91, 3, 117, .72) 100%);
}
.ai-dev-page .roi_pre_sec .row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0;
}
.ai-dev-page .roi_pre_sec .row > .col-lg-12 { grid-column: 1 / -1; width: auto; padding: 0; }
.ai-dev-page .roi_pre_sec .heading2 { max-width: 1040px; margin: 0 auto 56px; text-align: center; }
.ai-dev-page .roi_pre_sec .heading2:before {        /* the page's lime heading mark */
    content: "";
    display: block;
    width: 44px;
    height: 4px;
    margin: 0 auto 22px;
    border-radius: 2px;
    background: var(--ai-lime);
}
.ai-dev-page .roi_pre_sec .heading2 h2 { margin: 0; color: #FFFFFF; }
.ai-dev-page .roi_pre_sec .col-lg-3,
.ai-dev-page .roi_pre_sec .col-lg-3:last-child,
.ai-dev-page .roi_pre_sec .row > .col-lg-12 + .col-lg-3 {
    width: auto;
    margin: 0;
    padding: 4px 28px 6px;
    text-align: center;
    background: none;
    border: 0;
    border-left: 1px solid rgba(255, 255, 255, .16);
    border-radius: 0;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
.ai-dev-page .roi_pre_sec .row > .col-lg-12 + .col-lg-3 { border-left: 0; }   /* no line before the first figure */
.ai-dev-page .roi_pre_sec .col-lg-3 h3 {
    margin: 0 0 14px;
    font-family: 'Rubik', sans-serif;
    font-size: 52px;
    line-height: 1;
    font-weight: 500;
    letter-spacing: -1.2px;
    font-variant-numeric: tabular-nums;     /* even digit widths while the figures count up (ai-pages.js) */
    color: var(--ai-lime);
}
.ai-dev-page .roi_pre_sec .col-lg-3 p { margin: 0; color: rgba(255, 255, 255, .80); }
@media (max-width: 1440px) {
    .ai-dev-page .roi_pre_sec { padding: 88px 0; }
    .ai-dev-page .roi_pre_sec .col-lg-3 h3 { font-size: 44px; }
}
@media (max-width: 1199px) {
    .ai-dev-page .roi_pre_sec .row { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }
    .ai-dev-page .roi_pre_sec .col-lg-3:nth-child(odd) { border-left: 1px solid rgba(255, 255, 255, .16); }
    .ai-dev-page .roi_pre_sec .col-lg-3:nth-child(even),
    .ai-dev-page .roi_pre_sec .row > .col-lg-12 + .col-lg-3 { border-left: 0; }
}
@media (max-width: 991px) {
    .ai-dev-page .roi_pre_sec { padding: 64px 0; }
    .ai-dev-page .roi_pre_sec .heading2 { margin-bottom: 40px; }
    .ai-dev-page .roi_pre_sec .col-lg-3 h3 { font-size: 40px; }
}
@media (max-width: 575px) {
    .ai-dev-page .roi_pre_sec { padding: 48px 0; }
    .ai-dev-page .roi_pre_sec .row { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
    .ai-dev-page .roi_pre_sec .col-lg-3,
    .ai-dev-page .roi_pre_sec .col-lg-3:nth-child(odd),
    .ai-dev-page .roi_pre_sec .col-lg-3:nth-child(even),
    .ai-dev-page .roi_pre_sec .row > .col-lg-12 + .col-lg-3 { padding: 22px 0; border-left: 0; border-top: 1px solid rgba(255, 255, 255, .16); }
    .ai-dev-page .roi_pre_sec .row > .col-lg-12 + .col-lg-3 { border-top: 0; padding-top: 0; }
    .ai-dev-page .roi_pre_sec .col-lg-3 h3 { font-size: 38px; margin-bottom: 10px; }
}

/* ---- 28. AI CHATBOT: the blocks only this page has ----
   - services rows of four cards (col-lg-3): four across (two on tablets);
   - the site's lime icon circle (.figure-box) becomes the page's soft tile with
     the icon in brand violet (CSS filter on the image; white on card hover);
   - the second services block has two rows of cards: the normal gap between them;
   - band rhythm: a services block right after another, and a Benefits section
     right after another, turn white so tint and white alternate;
   - "Why Coding Sprint?" (.expert-coders-sec:is(.bg-offwhite, .bg-offwhiteW, :has(.list-coding))) becomes the deep violet
     band the other pages use for "Why choose" (with the same </> graphic, chunk
     22b): heading and intro in white, the six points as white cards, three across,
     each with its icon on a tint tile. Same wording, icons and order.          */
.ai-dev-page .expert-coders-sec .row:has(> .col-lg-3) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ai-dev-page .expert-coders-sec .heading2 > .row + .row { margin-top: 28px; }
.ai-dev-page .expert-coders-sec .full-content-column .figure-box {
    flex: none;
    width: 84px;
    height: 84px;
    margin: 0 0 24px;
    padding: 14px;
    box-sizing: border-box;
    border-radius: 22px;
    background: var(--ai-tint);
    transition: background-color .3s ease;
}
.ai-dev-page .expert-coders-sec .full-content-column .figure-box img { width: 100%; height: 100%; object-fit: contain; filter: brightness(0) saturate(100%) invert(16%) sepia(22%) saturate(7395%) hue-rotate(272deg) brightness(89%) contrast(122%); }
.ai-dev-page .expert-coders-sec .full-content-column:hover .figure-box { background: var(--ai-violet); }
.ai-dev-page .expert-coders-sec .full-content-column:hover .figure-box img { filter: brightness(0) invert(1); }

.ai-dev-page .expert-coders-sec + .expert-coders-sec { background: #FFFFFF; }
.ai-dev-page .why-coding-sprint.padd-60 + .why-coding-sprint.padd-60 { background: #FFFFFF; }

.ai-dev-page .expert-coders-sec:is(.bg-offwhite, .bg-offwhiteW, :has(.list-coding)) { background: linear-gradient(120deg, #1E0228 0%, var(--ai-deep) 45%, #4A0360 100%); }
.ai-dev-page .expert-coders-sec:is(.bg-offwhite, .bg-offwhiteW, :has(.list-coding)) .heading2 h2 { color: #FFFFFF; }
.ai-dev-page .expert-coders-sec:is(.bg-offwhite, .bg-offwhiteW, :has(.list-coding)) .heading2 > p:is(.width-83, .width-83W, :not([class])) { color: rgba(255, 255, 255, .82); }
.ai-dev-page .expert-coders-sec:is(.bg-offwhite, .bg-offwhiteW, :has(.list-coding)) .row > [class*="col-"],
.ai-dev-page .expert-coders-sec:is(.bg-offwhite, .bg-offwhiteW, :has(.list-coding)) .margin-left-sec { display: contents; }   /* the second column wraps its points once more */
.ai-dev-page .expert-coders-sec:is(.bg-offwhite, .bg-offwhiteW, :has(.list-coding)) .list-coding {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    margin: 0;
    padding: 32px 28px 32px;
    background: #FFFFFF;
    border-radius: 20px;
    box-shadow: 0 18px 30px -22px rgba(0, 0, 0, .55);
    transition: transform .3s ease, box-shadow .3s ease;
}
.ai-dev-page .expert-coders-sec:is(.bg-offwhite, .bg-offwhiteW, :has(.list-coding)) .list-coding:hover { transform: translateY(-4px); box-shadow: 0 24px 36px -22px rgba(0, 0, 0, .65); }
.ai-dev-page .expert-coders-sec:is(.bg-offwhite, .bg-offwhiteW, :has(.list-coding)) :is(.bgicon1, .bgicon2) {
    display: flex;
    flex: none;
    min-width: 0;
    width: 84px;
    height: 84px;
    padding: 14px;
    box-sizing: border-box;
    border-radius: 22px;
    background: var(--ai-tint);
    box-shadow: none;
    transition: background-color .3s ease;
}
.ai-dev-page .expert-coders-sec:is(.bg-offwhite, .bg-offwhiteW, :has(.list-coding)) :is(.bgicon1, .bgicon2) img { width: 100%; height: 100%; margin: 0; object-fit: contain; filter: brightness(0) saturate(100%) invert(16%) sepia(22%) saturate(7395%) hue-rotate(272deg) brightness(89%) contrast(122%); }
.ai-dev-page .expert-coders-sec:is(.bg-offwhite, .bg-offwhiteW, :has(.list-coding)) .list-coding:hover :is(.bgicon1, .bgicon2) { background: var(--ai-violet); }
.ai-dev-page .expert-coders-sec:is(.bg-offwhite, .bg-offwhiteW, :has(.list-coding)) .list-coding:hover :is(.bgicon1, .bgicon2) img { filter: brightness(0) invert(1); }
.ai-dev-page .expert-coders-sec:is(.bg-offwhite, .bg-offwhiteW, :has(.list-coding)) .list-cont p {
    max-width: none;
    margin: 0;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    line-height: 1.7;
    color: var(--ai-body);
}
@media (max-width: 1370px) {
    .ai-dev-page .expert-coders-sec .heading2 > .row + .row { margin-top: 22px; }
}
@media (max-width: 1199px) {
    .ai-dev-page .expert-coders-sec .row:has(> .col-lg-3) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 991px) {
    .ai-dev-page .expert-coders-sec .heading2 > .row + .row { margin-top: 18px; }
    .ai-dev-page .expert-coders-sec:is(.bg-offwhite, .bg-offwhiteW, :has(.list-coding)) .row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575px) {
    .ai-dev-page .expert-coders-sec .row:has(> .col-lg-3),
    .ai-dev-page .expert-coders-sec:is(.bg-offwhite, .bg-offwhiteW, :has(.list-coding)) .row { grid-template-columns: minmax(0, 1fr); }
    .ai-dev-page .expert-coders-sec .full-content-column .figure-box,
    .ai-dev-page .expert-coders-sec:is(.bg-offwhite, .bg-offwhiteW, :has(.list-coding)) :is(.bgicon1, .bgicon2) { width: 72px; height: 72px; padding: 12px; border-radius: 20px; }
    .ai-dev-page .expert-coders-sec:is(.bg-offwhite, .bg-offwhiteW, :has(.list-coding)) .list-coding { padding: 26px 22px 26px; }
}
@media (prefers-reduced-motion: reduce) {
    .ai-dev-page .expert-coders-sec:is(.bg-offwhite, .bg-offwhiteW, :has(.list-coding)) .list-coding:hover { transform: none; }
}

/* ---- 29. AI CHATBOT ROADMAP: step cards ----
   "two sections are same design? can we make differ?" (2026-10-14), then the
   user picked example 2 of three. On AI Chatbot the roadmap and the
   capabilities sections sat one after the other in the same layout. The
   roadmap is a sequence, so it becomes four step cards in order (Discovery,
   Design, Development, Ongoing support): the heading centred, each card white
   with the existing chevron mark on a white tile, the title and text under
   it. The markup lists the stages in two columns (1 + 3, 2 + 4); they are
   placed back in reading order. Two by two on tablets, one per row on phones.
   Capabilities keeps the ruled list.                                        */
.ai-dev-page.ai-chatbot-page .why-coding-sprint.bgilight-grey .container { display: block; }
.ai-dev-page.ai-chatbot-page .why-coding-sprint.bgilight-grey .heading2 {
    position: static;
    max-width: 920px;
    margin: 0 auto;
    text-align: center;
}
.ai-dev-page.ai-chatbot-page .why-coding-sprint.bgilight-grey .heading2:before { margin-left: auto; margin-right: auto; }
.ai-dev-page.ai-chatbot-page .why-coding-sprint.bgilight-grey .heading2 h2 { text-align: center; }
.ai-dev-page.ai-chatbot-page .why-coding-sprint.bgilight-grey .heading2 > p:is(.width-83, .width-83W, :not([class])) { margin: 0 auto; text-align: center; }

.ai-dev-page.ai-chatbot-page .why-coding-sprint.bgilight-grey .row {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: auto;
    grid-auto-flow: row;
    gap: 32px;
    margin: 56px 0 0;
}
/* the Benefits row count (chunk 21, >= 1550px) asks for two rows when a column
   has only two items; here that left an empty second row and a 32px gap under
   the cards, so the bottom space was bigger than the top. Same condition, one
   class heavier. */
.ai-dev-page.ai-chatbot-page .why-coding-sprint.bgilight-grey .row:not(:has(> [class*="col-"]:first-child .list-itme:nth-child(3))) { grid-template-rows: auto; }
.ai-dev-page.ai-chatbot-page .why-coding-sprint.bgilight-grey .row > [class*="col-"]:first-child .list-itme:nth-child(1) { grid-column: 1; grid-row: 1; }
.ai-dev-page.ai-chatbot-page .why-coding-sprint.bgilight-grey .row > [class*="col-"]:last-child .list-itme:nth-child(1) { grid-column: 2; grid-row: 1; }
.ai-dev-page.ai-chatbot-page .why-coding-sprint.bgilight-grey .row > [class*="col-"]:first-child .list-itme:nth-child(2) { grid-column: 3; grid-row: 1; }
.ai-dev-page.ai-chatbot-page .why-coding-sprint.bgilight-grey .row > [class*="col-"]:last-child .list-itme:nth-child(2) { grid-column: 4; grid-row: 1; }
.ai-dev-page.ai-chatbot-page .why-coding-sprint.bgilight-grey .list-itme,
.ai-dev-page.ai-chatbot-page .why-coding-sprint.bgilight-grey .list-itme + .list-itme,
.ai-dev-page.ai-chatbot-page .why-coding-sprint.bgilight-grey .list-itme:first-child,
.ai-dev-page.ai-chatbot-page .why-coding-sprint.bgilight-grey .list-itme:last-child,
.ai-dev-page.ai-chatbot-page .why-coding-sprint.bgilight-grey .row > [class*="col-"] + [class*="col-"] .list-itme:first-child,
.ai-dev-page.ai-chatbot-page .why-coding-sprint.bgilight-grey .row > [class*="col-"]:first-child .list-itme:last-child {
    position: relative;
    margin: 0;
    padding: 112px 28px 32px;
    background: #FFFFFF;
    border: 0;
    border-radius: 20px;
    box-shadow: var(--ai-shadow);
}
.ai-dev-page.ai-chatbot-page .why-coding-sprint.bgilight-grey .list-itme:before,
.ai-dev-page.ai-chatbot-page .why-coding-sprint.bgilight-grey .list-itme:first-child:before,
.ai-dev-page.ai-chatbot-page .why-coding-sprint.bgilight-grey .row > [class*="col-"] + [class*="col-"] .list-itme:first-child:before {
    top: 32px;
    left: 28px;
    width: 56px;
    height: 56px;
    /* white tile like the capabilities icons (user picked option 4 of 4): the
       site's chevron icon has a purple chevron among the lime ones, so it
       needs a light ground to show whole */
    border: 0;
    border-radius: 14px;
    background-color: #FFFFFF;
    background-size: 26px auto;
    background-position: center;
    box-shadow: inset 0 0 0 1px rgba(44, 2, 58, .1), 0 6px 16px rgba(44, 2, 58, .08);
    transform: none;
    transition: transform .25s ease, box-shadow .25s ease;
}
/* the second selector matches the heaviest marker rule above ("Design and
   planning" is the first item of the second column); without it that card
   had no hover */
.ai-dev-page.ai-chatbot-page .why-coding-sprint.bgilight-grey .list-itme:hover:before,
.ai-dev-page.ai-chatbot-page .why-coding-sprint.bgilight-grey .row > [class*="col-"] + [class*="col-"] .list-itme:first-child:hover:before {
    box-shadow: inset 0 0 0 1px rgba(91, 3, 117, .32), 0 10px 22px rgba(91, 3, 117, .16);
    transform: translateY(-2px);
}
.ai-dev-page.ai-chatbot-page .why-coding-sprint.bgilight-grey .list-itme h3 { margin: 0 0 10px; font-size: 21px; }
.ai-dev-page.ai-chatbot-page .why-coding-sprint.bgilight-grey .list-itme p { max-width: none; }
/* no arrows between the cards ("remove between cards arrow") */
.ai-dev-page.ai-chatbot-page .why-coding-sprint.bgilight-grey .list-itme:after,
.ai-dev-page.ai-chatbot-page .why-coding-sprint.bgilight-grey .row > [class*="col-"] .list-itme:nth-child(n):after { content: none; display: none; }

@media (max-width: 1199px) {
    .ai-dev-page.ai-chatbot-page .why-coding-sprint.bgilight-grey .row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
    .ai-dev-page.ai-chatbot-page .why-coding-sprint.bgilight-grey .row > [class*="col-"]:first-child .list-itme:nth-child(1) { grid-column: 1; grid-row: 1; }
    .ai-dev-page.ai-chatbot-page .why-coding-sprint.bgilight-grey .row > [class*="col-"]:last-child .list-itme:nth-child(1) { grid-column: 2; grid-row: 1; }
    .ai-dev-page.ai-chatbot-page .why-coding-sprint.bgilight-grey .row > [class*="col-"]:first-child .list-itme:nth-child(2) { grid-column: 1; grid-row: 2; }
    .ai-dev-page.ai-chatbot-page .why-coding-sprint.bgilight-grey .row > [class*="col-"]:last-child .list-itme:nth-child(2) { grid-column: 2; grid-row: 2; }
}
@media (max-width: 991px) {
    .ai-dev-page.ai-chatbot-page .why-coding-sprint.bgilight-grey .row { margin-top: 40px; }
}
@media (max-width: 575px) {
    .ai-dev-page.ai-chatbot-page .why-coding-sprint.bgilight-grey .row { grid-template-columns: minmax(0, 1fr); gap: 28px; }
    .ai-dev-page.ai-chatbot-page .why-coding-sprint.bgilight-grey .row > [class*="col-"]:first-child .list-itme:nth-child(1) { grid-column: 1; grid-row: 1; }
    .ai-dev-page.ai-chatbot-page .why-coding-sprint.bgilight-grey .row > [class*="col-"]:last-child .list-itme:nth-child(1) { grid-column: 1; grid-row: 2; }
    .ai-dev-page.ai-chatbot-page .why-coding-sprint.bgilight-grey .row > [class*="col-"]:first-child .list-itme:nth-child(2) { grid-column: 1; grid-row: 3; }
    .ai-dev-page.ai-chatbot-page .why-coding-sprint.bgilight-grey .row > [class*="col-"]:last-child .list-itme:nth-child(2) { grid-column: 1; grid-row: 4; }
    .ai-dev-page.ai-chatbot-page .why-coding-sprint.bgilight-grey .list-itme,
.ai-dev-page.ai-chatbot-page .why-coding-sprint.bgilight-grey .list-itme + .list-itme,
.ai-dev-page.ai-chatbot-page .why-coding-sprint.bgilight-grey .list-itme:first-child,
.ai-dev-page.ai-chatbot-page .why-coding-sprint.bgilight-grey .list-itme:last-child,
.ai-dev-page.ai-chatbot-page .why-coding-sprint.bgilight-grey .row > [class*="col-"] + [class*="col-"] .list-itme:first-child,
.ai-dev-page.ai-chatbot-page .why-coding-sprint.bgilight-grey .row > [class*="col-"]:first-child .list-itme:last-child { padding: 96px 22px 26px; border-radius: 18px; }
    .ai-dev-page.ai-chatbot-page .why-coding-sprint.bgilight-grey .list-itme:before,
.ai-dev-page.ai-chatbot-page .why-coding-sprint.bgilight-grey .list-itme:first-child:before,
.ai-dev-page.ai-chatbot-page .why-coding-sprint.bgilight-grey .row > [class*="col-"] + [class*="col-"] .list-itme:first-child:before { top: 26px; left: 22px; width: 50px; height: 50px; background-size: 22px auto; }
    .ai-dev-page.ai-chatbot-page .why-coding-sprint.bgilight-grey .list-itme h3 { font-size: 19px; }
}
@media (prefers-reduced-motion: reduce) {
    .ai-dev-page.ai-chatbot-page .why-coding-sprint.bgilight-grey .list-itme:before { transition: none; }
    .ai-dev-page.ai-chatbot-page .why-coding-sprint.bgilight-grey .list-itme:hover:before,
    .ai-dev-page.ai-chatbot-page .why-coding-sprint.bgilight-grey .row > [class*="col-"] + [class*="col-"] .list-itme:first-child:hover:before { transform: none; }
}

/* ---- 30. BESPOKE SOFTWARE DEVELOPMENT (custom-software-page) ----
   "Next under Software menu pages" (2026-10-14): the first page of the
   Software menu takes the shared redesign. This page was built from its own
   Figma frame and carries its own <style> block, printed after this file, so
   every rule here is one class heavier (.ai-dev-page.custom-software-page).
   Same wording, icons and pictures; only the look changes.
   Band rhythm: cards (tint), services (white), case studies (tint), process
   (white), differences (tint), call to action, industries (white), benefits
   (tint), testimonials (white), blog (tint), FAQ (white).
   - the page's own spacing and heading widths give way to the shared ones;
   - services: heading left, the long intro right (as chunk 23), six white
     cards with the icon on a soft tile in brand violet (as chunk 25);
   - process: a vertical timeline, the steps alternating either side of it
     (one column with the line down the left, below 992px);
   - "what makes us different": the editorial split of the Benefits section
     (chunk 4), heading left, a ruled list with the chevron on a white tile;
   - call to action: a deep violet panel straddling the bands, button right;
   - benefits: six white cards, three across, the chevron on a white tile
     (the AI Chatbot roadmap cards).                                         */

/* shared spacing and widths win over the page's Figma measures */
.ai-dev-page.custom-software-page .breadcrumb { padding: 0; margin-bottom: 0; }
.ai-dev-page.custom-software-page .expert-coders-sec.padd-60 { padding: 96px 0; }
.ai-dev-page.custom-software-page .expert-coders-sec .heading2 h2 { max-width: 1040px; }
.ai-dev-page.custom-software-page :is(.cs-services-sec, .cs-process-sec, .cs-twocol-sec).padd-60 { padding: 100px 0; }
.ai-dev-page.custom-software-page .industry-sec.sam-why-panel { background: #FFFFFF; }

/* FOUR CARDS ("Custom Software Built For Real Business Problems"): "this
   section design not looks good on the 1366px ... to long", then option 2 of
   3 (2026-10-14). Four across made each card a narrow column 592px tall. Now
   one white panel with four cells parted by fine lines, two by two, the icon
   beside the text and the content centred in its cell; one column below
   992px, the icon above the text on phones. Same wording and icons. */
.ai-dev-page.custom-software-page .expert-coders-sec .heading2 > .row:has(> .col-lg-3) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    background: #FFFFFF;
    border: 1px solid var(--ai-line);
    border-radius: 24px;
    box-shadow: var(--ai-shadow);
    overflow: hidden;
}
.ai-dev-page.custom-software-page .expert-coders-sec .full-content-column,
.ai-dev-page.custom-software-page .expert-coders-sec .full-content-column:hover {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 24px;
    align-content: center;
    padding: 40px 44px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    transform: none;
}
.ai-dev-page.custom-software-page .expert-coders-sec .full-content-column { background: transparent; transition: background-color .3s ease; }
.ai-dev-page.custom-software-page .expert-coders-sec .full-content-column:hover { background: var(--ai-tint); }
.ai-dev-page.custom-software-page .expert-coders-sec .full-content-column:before { display: none; }   /* the cards' hover bar: not inside a panel */
.ai-dev-page.custom-software-page .expert-coders-sec .heading2 > .row > [class*="col-"]:nth-child(odd) .full-content-column { border-right: 1px solid var(--ai-line); }
.ai-dev-page.custom-software-page .expert-coders-sec .heading2 > .row > [class*="col-"]:nth-child(-n+2) .full-content-column { border-bottom: 1px solid var(--ai-line); }
.ai-dev-page.custom-software-page .expert-coders-sec .full-content-column .figure-box { grid-column: 1; grid-row: 1 / span 2; align-self: start; width: 72px; height: 72px; margin: 0; padding: 12px; border-radius: 20px; }
.ai-dev-page.custom-software-page .expert-coders-sec .full-content-column h3 { grid-column: 2; grid-row: 1; margin: 2px 0 10px; }
.ai-dev-page.custom-software-page .expert-coders-sec .full-content-column p { grid-column: 2; grid-row: 2; margin: 0; }
@media (max-width: 1370px) {
    .ai-dev-page.custom-software-page .expert-coders-sec .full-content-column,
    .ai-dev-page.custom-software-page .expert-coders-sec .full-content-column:hover { padding: 36px; }
}
@media (max-width: 991px) {
    .ai-dev-page.custom-software-page .expert-coders-sec .heading2 > .row:has(> .col-lg-3) { grid-template-columns: minmax(0, 1fr); }
    .ai-dev-page.custom-software-page .expert-coders-sec .heading2 > .row > [class*="col-"]:nth-child(odd) .full-content-column { border-right: 0; }
    .ai-dev-page.custom-software-page .expert-coders-sec .heading2 > .row > [class*="col-"]:not(:last-child) .full-content-column { border-bottom: 1px solid var(--ai-line); }
    .ai-dev-page.custom-software-page .expert-coders-sec .full-content-column,
    .ai-dev-page.custom-software-page .expert-coders-sec .full-content-column:hover { padding: 32px; }
}
@media (max-width: 575px) {
    .ai-dev-page.custom-software-page .expert-coders-sec .heading2 > .row:has(> .col-lg-3) { border-radius: 20px; }
    .ai-dev-page.custom-software-page .expert-coders-sec .full-content-column,
    .ai-dev-page.custom-software-page .expert-coders-sec .full-content-column:hover { grid-template-columns: minmax(0, 1fr); padding: 28px 22px; }
    .ai-dev-page.custom-software-page .expert-coders-sec .full-content-column .figure-box { grid-row: auto; margin: 0 0 18px; }
    .ai-dev-page.custom-software-page .expert-coders-sec .full-content-column h3 { grid-column: 1; grid-row: auto; margin: 0 0 10px; }
    .ai-dev-page.custom-software-page .expert-coders-sec .full-content-column p { grid-column: 1; grid-row: auto; margin: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .ai-dev-page.custom-software-page .expert-coders-sec .full-content-column { transition: none; }
}

/* section headers on the page's own sections: the shared heading style */
.ai-dev-page.custom-software-page :is(.cs-services-sec, .cs-process-sec, .cs-twocol-sec) .heading2 {
    max-width: 1040px;
    margin: 0 auto;
    text-align: center;
}
.ai-dev-page.custom-software-page .cs-services-sec .heading2:before,
.ai-dev-page.custom-software-page .cs-process-sec .heading2:before,
.ai-dev-page.custom-software-page .cs-twocol-sec .heading2:before {   /* short lime mark (decorative) */
    content: "";
    display: block;
    width: 44px;
    height: 4px;
    margin: 0 auto 22px;
    border-radius: 2px;
    background: var(--ai-lime);
}
.ai-dev-page.custom-software-page :is(.cs-services-sec, .cs-process-sec, .cs-twocol-sec) .heading2 h2 {
    max-width: 1040px;
    margin: 0 auto 18px;
    font-size: 42px;
    line-height: 1.14;
    font-weight: 500;
    letter-spacing: -.8px;
    color: var(--ai-ink);
}
.ai-dev-page.custom-software-page :is(.cs-services-sec, .cs-process-sec, .cs-twocol-sec) .heading2 > p.width-83 {
    width: auto;
    max-width: 920px;
    margin: 0 auto;
    font-size: 18px;
    line-height: 1.65;
    color: var(--ai-body);
}

/* SERVICES: heading left, the two intro paragraphs right */
@media (min-width: 992px) {
    .ai-dev-page.custom-software-page .cs-services-sec .heading2 {
        display: grid;
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
        column-gap: 72px;
        align-items: start;
        max-width: none;
        text-align: left;
    }
    .ai-dev-page.custom-software-page .cs-services-sec .heading2:before { grid-column: 1; grid-row: 1; margin: 0 0 22px; }
    .ai-dev-page.custom-software-page .cs-services-sec .heading2 h2 { grid-column: 1; grid-row: 2 / span 3; max-width: none; margin: 0; text-align: left; }
    .ai-dev-page.custom-software-page .cs-services-sec .heading2 > p.width-83 {
        grid-column: 2;
        max-width: none;
        margin: 0;
        padding: 0 0 16px 36px;
        text-align: left;
        border-left: 1px solid var(--ai-line);
    }
    .ai-dev-page.custom-software-page .cs-services-sec .heading2 > p.width-83:nth-of-type(1) { grid-row: 2; padding-top: 6px; }
    .ai-dev-page.custom-software-page .cs-services-sec .heading2 > p.width-83:nth-of-type(2) { grid-row: 3; }
    .ai-dev-page.custom-software-page .cs-services-sec .heading2 > p.width-83:last-of-type { padding-bottom: 6px; }
}
.ai-dev-page.custom-software-page .cs-services-sec .cs-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
    margin: 56px 0 0;
}
.ai-dev-page.custom-software-page .cs-grid > [class*="col-"] {
    display: flex;
    width: auto;
    max-width: none;
    flex: none;
    margin: 0;
    padding: 0;
}
.ai-dev-page.custom-software-page .cs-services-sec .cs-block {
    position: relative;
    padding: 40px 36px;
    background: #FFFFFF;
    border: 1px solid var(--ai-line);
    border-radius: var(--ai-radius);
    box-shadow: var(--ai-shadow);
    transition: transform .3s ease, box-shadow .3s ease;
}
.ai-dev-page.custom-software-page .cs-services-sec .cs-block:hover { transform: translateY(-4px); box-shadow: var(--ai-shadow-hover); }
.ai-dev-page.custom-software-page .cs-services-sec .cs-block > img {   /* same icon, brand violet, on a tile */
    position: relative;
    z-index: 1;
    display: block;
    width: 84px;
    height: 84px;
    margin: 0 0 24px;
    padding: 14px;
    box-sizing: border-box;
    object-fit: contain;
    filter: brightness(0) saturate(100%) invert(16%) sepia(22%) saturate(7395%) hue-rotate(272deg) brightness(89%) contrast(122%);
    transition: filter .3s ease;
}
.ai-dev-page.custom-software-page .cs-services-sec .cs-block:after {   /* the tile (decorative), lined up with the card padding */
    content: "";
    position: absolute;
    z-index: 0;
    top: 40px;
    left: 36px;
    width: 84px;
    height: 84px;
    border-radius: 22px;
    background: var(--ai-tint);
    transition: background-color .3s ease;
}
.ai-dev-page.custom-software-page .cs-services-sec .cs-block:hover > img { filter: brightness(0) invert(1); }
.ai-dev-page.custom-software-page .cs-services-sec .cs-block:hover:after { background: var(--ai-violet); }
.ai-dev-page.custom-software-page .cs-block h3 {
    margin: 0 0 12px;
    font-family: "Rubik", sans-serif;
    font-size: 22px;
    line-height: 1.25;
    font-weight: 500;
    letter-spacing: -.2px;
    color: var(--ai-ink);
}
.ai-dev-page.custom-software-page .cs-block p {
    margin: 0;
    font-size: 16px;
    line-height: 1.7;
    color: var(--ai-body);
}

/* PROCESS: a vertical timeline (option 3 of 3, picked 2026-10-14). The five
   steps sit on alternate sides of a fine line as white cards. Each icon is a
   round marker on the line, joined to its card by a short stroke ("each card
   icon look like differ icon card": it no longer looks like a card of its
   own). The line runs only from the first marker to the last: each step draws
   the piece down to the next marker.
   "space each card equal": from 992px the steps sit in a grid of equal rows,
   each card two rows tall, the next one starting a row lower on the other
   side. So every card has the same height (the tallest one's), every step is
   the same distance from the next, the text is centred in its card and the
   marker is level with the card's middle.
   Below 992px: one column, the line down the left. Same wording and icons. */
.ai-dev-page.custom-software-page .cs-process-sec .cs-grid {
    display: block;
    position: relative;
    max-width: 1040px;
    margin: 64px auto 0;
    border: 0;
}
.ai-dev-page.custom-software-page .cs-process-sec .cs-grid > [class*="col-"] { position: relative; }
.ai-dev-page.custom-software-page .cs-process-sec .cs-grid > [class*="col-"]:not(:last-child):before {   /* the line to the next marker (decorative) */
    content: "";
    position: absolute;
    width: 2px;
    background: rgba(91, 3, 117, .22);
}
.ai-dev-page.custom-software-page .cs-process-sec .cs-block,
.ai-dev-page.custom-software-page .cs-process-sec .cs-block:hover {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 28px 30px;
    border: 1px solid var(--ai-line);
    border-radius: 20px;
    background: #FFFFFF;
    box-shadow: var(--ai-shadow);
    transition: border-color .3s ease, box-shadow .3s ease;
}
.ai-dev-page.custom-software-page .cs-process-sec .cs-block:hover { border-color: rgba(91, 3, 117, .28); box-shadow: var(--ai-shadow-hover); }
.ai-dev-page.custom-software-page .cs-process-sec .cs-block:hover h3 { color: var(--ai-ink); }
.ai-dev-page.custom-software-page .cs-process-sec .cs-block:hover p { color: var(--ai-body); }
/* the icon and its round marker sit on the line: 107 = the 64px gap + half the marker + the card's 1px border */
.ai-dev-page.custom-software-page .cs-process-sec .cs-block > img {
    position: absolute;
    z-index: 1;
    top: 22px;
    right: -107px;
    width: 84px;
    height: 84px;
    margin: 0;
    padding: 19px;
    box-sizing: border-box;
    object-fit: contain;
    filter: brightness(0) saturate(100%) invert(16%) sepia(22%) saturate(7395%) hue-rotate(272deg) brightness(89%) contrast(122%);
    transition: filter .3s ease;
}
.ai-dev-page.custom-software-page .cs-process-sec .cs-block:before {   /* the marker (decorative) */
    content: "";
    position: absolute;
    z-index: 0;
    top: 22px;
    right: -107px;
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: var(--ai-tint);
    box-shadow: inset 0 0 0 1.5px rgba(91, 3, 117, .22);
    transition: background-color .3s ease, box-shadow .3s ease;
}
.ai-dev-page.custom-software-page .cs-process-sec .cs-block:after {   /* the stroke joining the marker to its card (decorative) */
    content: "";
    position: absolute;
    top: 63px;
    right: -23px;
    width: 22px;
    height: 2px;
    background: rgba(91, 3, 117, .22);
    transition: background-color .3s ease;
}
.ai-dev-page.custom-software-page .cs-process-sec .cs-grid > [class*="col-"]:nth-child(even) .cs-block:after { right: auto; left: -23px; }
.ai-dev-page.custom-software-page .cs-process-sec .cs-grid > [class*="col-"]:nth-child(even) .cs-block > img,
.ai-dev-page.custom-software-page .cs-process-sec .cs-grid > [class*="col-"]:nth-child(even) .cs-block:before { right: auto; left: -107px; }
.ai-dev-page.custom-software-page .cs-process-sec .cs-block:hover > img { filter: brightness(0) invert(1); }
.ai-dev-page.custom-software-page .cs-process-sec .cs-block:hover:before { background: var(--ai-violet); box-shadow: inset 0 0 0 1.5px var(--ai-violet); }
.ai-dev-page.custom-software-page .cs-process-sec .cs-block:hover:after { background: var(--ai-violet); }
.ai-dev-page.custom-software-page .cs-process-sec .cs-block h3 { margin: 0 0 10px; font-size: 20px; }
/* The order of the steps (2026-10-14: "like first, second, third"; a "Step" label and lime number
   badges were turned down; option D of three picked): a large light number, 01 to 05, in the top
   right corner of each card. CSS counters (asked for); the page text is unchanged. The title keeps
   clear of it. */
.ai-dev-page.custom-software-page .cs-process-sec .cs-grid { counter-reset: cs-step; }
.ai-dev-page.custom-software-page .cs-process-sec .cs-grid > [class*="col-"] { counter-increment: cs-step; }
.ai-dev-page.custom-software-page .cs-process-sec .cs-grid > [class*="col-"]:after {
    content: counter(cs-step, decimal-leading-zero);
    position: absolute;
    z-index: 1;
    top: 16px;
    right: 24px;
    font-family: "Rubik", sans-serif;
    font-size: 44px;
    line-height: 1;
    font-weight: 500;
    letter-spacing: -1px;
    color: rgba(91, 3, 117, .16);
    pointer-events: none;
    transition: color .3s ease;
}
.ai-dev-page.custom-software-page .cs-process-sec .cs-grid > [class*="col-"]:hover:after { color: rgba(91, 3, 117, .32); }
.ai-dev-page.custom-software-page .cs-process-sec .cs-block h3 { padding-right: 64px; }
@media (min-width: 992px) {
    .ai-dev-page.custom-software-page .cs-process-sec .cs-grid > [class*="col-"]:nth-child(odd):after { right: 88px; }   /* the card ends 64px short of the line */
}
@media (max-width: 575px) {
    .ai-dev-page.custom-software-page .cs-process-sec .cs-grid > [class*="col-"]:after { top: 14px; right: 18px; font-size: 36px; }
    .ai-dev-page.custom-software-page .cs-process-sec .cs-block h3 { padding-right: 52px; }
}
@media (prefers-reduced-motion: reduce) {
    .ai-dev-page.custom-software-page .cs-process-sec .cs-grid > [class*="col-"]:after { transition: none; }
}
@media (min-width: 992px) {
    /* equal rows: card n covers rows n and n+1, so each step starts half a card (plus half the gap) below the last */
    .ai-dev-page.custom-software-page .cs-process-sec .cs-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: 1fr;
        row-gap: 32px;
        column-gap: 0;
    }
    .ai-dev-page.custom-software-page .cs-process-sec .cs-grid > [class*="col-"] { grid-column: 1; width: auto; margin: 0; padding: 0 64px 0 0; }
    .ai-dev-page.custom-software-page .cs-process-sec .cs-grid > [class*="col-"]:nth-child(even) { grid-column: 2; padding: 0 0 0 64px; }
    .ai-dev-page.custom-software-page .cs-process-sec .cs-grid > [class*="col-"]:nth-child(1) { grid-row: 1 / span 2; }
    .ai-dev-page.custom-software-page .cs-process-sec .cs-grid > [class*="col-"]:nth-child(2) { grid-row: 2 / span 2; }
    .ai-dev-page.custom-software-page .cs-process-sec .cs-grid > [class*="col-"]:nth-child(3) { grid-row: 3 / span 2; }
    .ai-dev-page.custom-software-page .cs-process-sec .cs-grid > [class*="col-"]:nth-child(4) { grid-row: 4 / span 2; }
    .ai-dev-page.custom-software-page .cs-process-sec .cs-grid > [class*="col-"]:nth-child(5) { grid-row: 5 / span 2; }
    /* the next marker is half a card + half the gap lower: from this card's middle to 16px below its foot */
    .ai-dev-page.custom-software-page .cs-process-sec .cs-grid > [class*="col-"]:not(:last-child):before { top: 50%; bottom: -16px; right: -1px; }
    .ai-dev-page.custom-software-page .cs-process-sec .cs-grid > [class*="col-"]:nth-child(even):not(:last-child):before { right: auto; left: -1px; }
    .ai-dev-page.custom-software-page .cs-process-sec .cs-block > img,
    .ai-dev-page.custom-software-page .cs-process-sec .cs-block:before { top: 50%; margin-top: -42px; }
    .ai-dev-page.custom-software-page .cs-process-sec .cs-block:after { top: calc(50% - 1px); }
}
@media (max-width: 991px) {
    /* one column, the line down the left through the markers; equal 24px between the cards */
    .ai-dev-page.custom-software-page .cs-process-sec .cs-grid { max-width: none; margin-top: 40px; }
    .ai-dev-page.custom-software-page .cs-process-sec .cs-grid > [class*="col-"] { width: auto; margin: 0; padding: 0 0 0 106px; }
    .ai-dev-page.custom-software-page .cs-process-sec .cs-grid > [class*="col-"] + [class*="col-"] { margin-top: 24px; }
    /* line pieces: marker centre (64px) to the next marker (24px gap + 64px) */
    .ai-dev-page.custom-software-page .cs-process-sec .cs-grid > [class*="col-"]:not(:last-child):before { top: 64px; bottom: -88px; left: 41px; }
    .ai-dev-page.custom-software-page .cs-process-sec .cs-block:after,
    .ai-dev-page.custom-software-page .cs-process-sec .cs-grid > [class*="col-"]:nth-child(even) .cs-block:after { right: auto; left: -23px; }
    .ai-dev-page.custom-software-page .cs-process-sec .cs-block > img,
    .ai-dev-page.custom-software-page .cs-process-sec .cs-block:before,
    .ai-dev-page.custom-software-page .cs-process-sec .cs-grid > [class*="col-"]:nth-child(even) .cs-block > img,
    .ai-dev-page.custom-software-page .cs-process-sec .cs-grid > [class*="col-"]:nth-child(even) .cs-block:before { right: auto; left: -107px; }
}
@media (max-width: 575px) {
    .ai-dev-page.custom-software-page .cs-process-sec .cs-grid > [class*="col-"]:not(:last-child):before { top: 56px; bottom: -80px; left: 35px; }
    .ai-dev-page.custom-software-page .cs-process-sec .cs-block:after,
    .ai-dev-page.custom-software-page .cs-process-sec .cs-grid > [class*="col-"]:nth-child(even) .cs-block:after { top: 55px; left: -17px; width: 16px; }
    .ai-dev-page.custom-software-page .cs-process-sec .cs-grid > [class*="col-"] { padding-left: 88px; }
    .ai-dev-page.custom-software-page .cs-process-sec .cs-block,
    .ai-dev-page.custom-software-page .cs-process-sec .cs-block:hover { padding: 22px; border-radius: 18px; }
    .ai-dev-page.custom-software-page .cs-process-sec .cs-block > img,
    .ai-dev-page.custom-software-page .cs-process-sec .cs-grid > [class*="col-"]:nth-child(even) .cs-block > img { top: 20px; left: -89px; width: 72px; height: 72px; padding: 16px; }
    .ai-dev-page.custom-software-page .cs-process-sec .cs-block:before,
    .ai-dev-page.custom-software-page .cs-process-sec .cs-grid > [class*="col-"]:nth-child(even) .cs-block:before { top: 20px; left: -89px; width: 72px; height: 72px; }
    .ai-dev-page.custom-software-page .cs-process-sec .cs-block h3 { font-size: 19px; }
}
@media (prefers-reduced-motion: reduce) {
    .ai-dev-page.custom-software-page .cs-process-sec .cs-block,
    .ai-dev-page.custom-software-page .cs-process-sec .cs-block:before,
    .ai-dev-page.custom-software-page .cs-process-sec .cs-block:after,
    .ai-dev-page.custom-software-page .cs-process-sec .cs-block > img { transition: none; }
}

/* DIFFERENCES: the Benefits editorial split (chunk 4) */
.ai-dev-page.custom-software-page .cs-diff-sec { background: var(--ai-tint); }
.ai-dev-page.custom-software-page .cs-diff-sec .container {
    display: grid;
    grid-template-columns: 400px minmax(0, 1fr);
    column-gap: 72px;
    align-items: start;
}
.ai-dev-page.custom-software-page .cs-diff-sec .heading2 {
    position: sticky;
    top: 156px;                       /* clears the fixed header */
    max-width: none;
    margin: 0;
    text-align: left;
}
.ai-dev-page.custom-software-page .cs-diff-sec .heading2:before { margin: 0 0 22px; }
.ai-dev-page.custom-software-page .cs-diff-sec .heading2 h2 { max-width: none; margin: 0 0 18px; text-align: left; }
.ai-dev-page.custom-software-page .cs-diff-sec .heading2 > p.width-83 { max-width: none; margin: 0; text-align: left; }
.ai-dev-page.custom-software-page .cs-diff-sec .cs-twocol {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(3, auto);
    grid-auto-flow: column;
    column-gap: 48px;
    margin: 0;
}
.ai-dev-page.custom-software-page .cs-twocol > [class*="col-"] { display: contents; }
.ai-dev-page.custom-software-page .cs-diff-sec .cs-twocol .list-itme {
    position: relative;
    margin: 0;
    padding: 30px 0 30px 70px;
}
.ai-dev-page.custom-software-page .cs-diff-sec .cs-twocol .list-itme + .list-itme { border-top: 1px solid var(--ai-line); }
.ai-dev-page.custom-software-page .cs-diff-sec .cs-twocol .list-itme:first-child { padding-top: 4px; }
.ai-dev-page.custom-software-page .cs-diff-sec .cs-twocol .list-itme:last-child { padding-bottom: 0; }
.ai-dev-page.custom-software-page .cs-diff-sec .cs-twocol .list-itme:before {   /* the existing chevron on a white tile */
    left: 0;
    top: 30px;
    width: 48px;
    height: 48px;
    border: 1px solid var(--ai-line);
    border-radius: 14px;
    background-color: #FFFFFF;
    background-size: 26px auto;
    background-position: center;
    box-shadow: 0 6px 16px rgba(44, 2, 58, .08);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.ai-dev-page.custom-software-page .cs-diff-sec .cs-twocol .list-itme:first-child:before { top: 4px; }
.ai-dev-page.custom-software-page .cs-diff-sec .cs-twocol .list-itme:hover:before {
    border-color: rgba(91, 3, 117, .32);
    box-shadow: 0 10px 22px rgba(91, 3, 117, .16);
    transform: translateY(-2px);
}
.ai-dev-page.custom-software-page .cs-twocol .list-itme h3 {
    margin: 0 0 10px;
    font-family: "Rubik", sans-serif;
    font-size: 22px;
    line-height: 1.25;
    font-weight: 500;
    letter-spacing: -.2px;
    color: var(--ai-ink);
}
.ai-dev-page.custom-software-page .cs-twocol .list-itme p {
    max-width: none;
    margin: 0;
    font-size: 16px;
    line-height: 1.7;
    color: var(--ai-body);
}

/* CALL TO ACTION: the AI Development banner (chunks 7 and 7b), value for
   value: the same picture under the same violet veil, sizes, spacing and the
   chip drawing round the button. That page hangs the drawing off a wrapper
   round its button; this markup has none (and none is added), so the drawing
   is two extra grid items in the button's cell, made from the row that holds
   the text and button (display: contents, so its ::before/::after join the
   panel's grid). Zero-size margin boxes keep them from widening the cell. */
.ai-dev-page.custom-software-page .cs-cta-sec {
    padding: 0;
    background: linear-gradient(180deg, var(--ai-tint) 50%, #FFFFFF 50%);
}
.ai-dev-page.custom-software-page .cs-cta {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "mark  btn"
        "title btn"
        "text  btn";
    column-gap: 56px;
    align-items: center;
    padding: 60px 64px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 24px;
    overflow: hidden;
    background:
        linear-gradient(120deg, rgba(23, 3, 31, .96) 0%, rgba(44, 2, 58, .94) 55%, rgba(62, 5, 84, .92) 100%),
        url(/assets/images/gradient@2x.webp) center / cover no-repeat #2C023A;   /* AI Development's banner picture */
    box-shadow: 0 24px 48px rgba(44, 2, 58, .22);
}
.ai-dev-page.custom-software-page .cs-cta:before {   /* the short lime mark the other headings carry */
    content: "";
    grid-area: mark;
    display: block;
    width: 44px;
    height: 4px;
    margin: 0 0 22px;
    border-radius: 2px;
    background: var(--ai-lime);
}
.ai-dev-page.custom-software-page .cs-cta h2 {
    grid-area: title;
    max-width: 880px;
    margin: 0 0 18px;
    font-family: "Rubik", sans-serif;
    font-size: 42px;
    line-height: 1.14;
    font-weight: 500;
    letter-spacing: -.8px;
    color: #FFFFFF;
}
.ai-dev-page.custom-software-page .cs-cta-row { display: contents; }
.ai-dev-page.custom-software-page .cs-cta-row p {
    grid-area: text;
    max-width: 880px;
    margin: 0;
    font-size: 18px;
    line-height: 1.65;
    color: rgba(255, 255, 255, .82);
}
.ai-dev-page.custom-software-page .cs-cta-row .cs-cta-btn { grid-area: btn; justify-self: end; white-space: nowrap; }
.ai-dev-page.custom-software-page .cs-cta-row:before {   /* pins and traces (decorative), centred on the button */
    content: "";
    grid-area: btn;
    z-index: -1;
    align-self: center;
    height: 360px;
    margin: -180px -200px;
    background:
        url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 560 360'><g fill='none' stroke='rgba(255,255,255,.2)' stroke-width='1.4' stroke-linejoin='round'><path d='M216 144 V128 L176 88 V82'/><path d='M216 216 V232 L176 272 V278'/><path d='M248 144 V128 L230 110 V96'/><path d='M248 216 V232 L230 250 V264'/><path d='M280 144 V86'/><path d='M280 216 V274'/><path d='M312 144 V128 L330 110 V96'/><path d='M312 216 V232 L330 250 V264'/><path d='M344 144 V128 L384 88 V82'/><path d='M344 216 V232 L384 272 V278'/></g><circle cx='176' cy='82' r='4.5' fill='%232C023A' stroke='rgba(255,255,255,.55)' stroke-width='1.5'/><circle cx='176' cy='278' r='4.5' fill='%232C023A' stroke='rgba(255,255,255,.55)' stroke-width='1.5'/><circle cx='230' cy='96' r='4.5' fill='%232C023A' stroke='rgba(255,255,255,.55)' stroke-width='1.5'/><circle cx='230' cy='264' r='4.5' fill='%232C023A' stroke='rgba(255,255,255,.55)' stroke-width='1.5'/><circle cx='280' cy='86' r='5.5' fill='%23C2C904'/><circle cx='280' cy='274' r='5.5' fill='%23C2C904'/><circle cx='330' cy='96' r='4.5' fill='%232C023A' stroke='rgba(255,255,255,.55)' stroke-width='1.5'/><circle cx='330' cy='264' r='4.5' fill='%232C023A' stroke='rgba(255,255,255,.55)' stroke-width='1.5'/><circle cx='384' cy='82' r='4.5' fill='%232C023A' stroke='rgba(255,255,255,.55)' stroke-width='1.5'/><circle cx='384' cy='278' r='4.5' fill='%232C023A' stroke='rgba(255,255,255,.55)' stroke-width='1.5'/></svg>") center / 560px 360px no-repeat,
        url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 360'><g fill='none' stroke='rgba(255,255,255,.2)' stroke-width='1.4' stroke-linejoin='round'><path d='M10 170 H38 L54 154 H200'/><path d='M10 190 H38 L54 206 H200'/></g></svg>") right center / 200px 360px no-repeat;
    pointer-events: none;
}
.ai-dev-page.custom-software-page .cs-cta-row:after {    /* the outline hugging the button (decorative): 10px round it */
    content: "";
    grid-area: btn;
    z-index: -1;
    align-self: center;
    height: 72px;
    margin: -36px -10px;
    border: 1.2px solid rgba(255, 255, 255, .18);
    border-radius: 999px;
    pointer-events: none;
}

/* HERO: the heading and intro are three times as long as AI Development's,
   so in the 560px column they ran to 3 and 6 lines. A wider measure brings
   the heading to two lines and the intro to four (no word left alone on
   the last line). Same words.               */
/* "hero section overlay not matched?": the veil is the same rule as AI
   Development, but this photo is far darker (average brightness of its left
   and middle thirds 13-14 against 29-77), so the same veil read as flat
   near-black. Here it carries more brand violet through the middle and less
   on the right, so the photo shows through as it does on that page. */
@media (min-width: 992px) {
    .ai-dev-page.custom-software-page .banner-sec.custom-software-banner:before {
        background: linear-gradient(90deg, rgba(30, 2, 40, .88) 0%, rgba(74, 3, 96, .60) 42%, rgba(91, 3, 117, .20) 100%);
    }
}
@media (max-width: 991px) {
    .ai-dev-page.custom-software-page .banner-sec.custom-software-banner:before {
        background: linear-gradient(180deg, rgba(74, 3, 96, .58) 0%, rgba(30, 2, 40, .80) 100%);
    }
}
.ai-dev-page.custom-software-page .banner-sec.custom-software-banner h1 { max-width: 16em; }
.ai-dev-page.custom-software-page .banner-sec.custom-software-banner :is(.banner-content, .banner-contentW) p { max-width: 780px; }   /* 4 lines at 19px, the last one full */
@media (max-width: 1440px) {
    .ai-dev-page.custom-software-page .banner-sec.custom-software-banner :is(.banner-content, .banner-contentW) p { max-width: 760px; }   /* 4 lines at 18px */
}

/* BENEFITS: six white cards, the chevron on a white tile */
.ai-dev-page.custom-software-page .cs-benefits-sec { background: var(--ai-tint); }
.ai-dev-page.custom-software-page .cs-benefits-sec .cs-twocol {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
    margin: 56px 0 0;
}
.ai-dev-page.custom-software-page .cs-benefits-sec .cs-twocol .list-itme {
    position: relative;
    margin: 0;
    padding: 112px 32px 32px;
    background: #FFFFFF;
    border-radius: 20px;
    box-shadow: var(--ai-shadow);
}
.ai-dev-page.custom-software-page .cs-benefits-sec .cs-twocol .list-itme:before {
    top: 32px;
    left: 32px;
    width: 56px;
    height: 56px;
    border: 0;
    border-radius: 14px;
    background-color: #FFFFFF;
    background-size: 26px auto;
    background-position: center;
    box-shadow: inset 0 0 0 1px rgba(44, 2, 58, .1), 0 6px 16px rgba(44, 2, 58, .08);
    transition: transform .25s ease, box-shadow .25s ease;
}
.ai-dev-page.custom-software-page .cs-benefits-sec .cs-twocol .list-itme:hover:before {
    box-shadow: inset 0 0 0 1px rgba(91, 3, 117, .32), 0 10px 22px rgba(91, 3, 117, .16);
    transform: translateY(-2px);
}
.ai-dev-page.custom-software-page .cs-benefits-sec .cs-twocol .list-itme h3 { font-size: 21px; }

@media (max-width: 1549px) {
    /* differences: one ruled column beside the heading */
    .ai-dev-page.custom-software-page .cs-diff-sec .container { grid-template-columns: minmax(300px, 36%) minmax(0, 1fr); column-gap: 56px; }
    .ai-dev-page.custom-software-page .cs-diff-sec .cs-twocol { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-flow: row; }
    .ai-dev-page.custom-software-page .cs-diff-sec .cs-twocol > [class*="col-"] + [class*="col-"] .list-itme:first-child { padding-top: 30px; border-top: 1px solid var(--ai-line); }
    .ai-dev-page.custom-software-page .cs-diff-sec .cs-twocol > [class*="col-"] + [class*="col-"] .list-itme:first-child:before { top: 30px; }
    .ai-dev-page.custom-software-page .cs-diff-sec .cs-twocol > [class*="col-"]:first-child .list-itme:last-child { padding-bottom: 30px; }
    .ai-dev-page.custom-software-page .cs-diff-sec .cs-twocol .list-itme p { max-width: 640px; }
}
@media (max-width: 1440px) {
    .ai-dev-page.custom-software-page :is(.cs-services-sec, .cs-process-sec, .cs-twocol-sec) .heading2 h2,
    .ai-dev-page.custom-software-page .cs-cta h2 { font-size: 38px; }
    .ai-dev-page.custom-software-page :is(.cs-services-sec, .cs-process-sec, .cs-twocol-sec) .heading2 > p.width-83,
    .ai-dev-page.custom-software-page .cs-cta-row p { font-size: 17px; }
}
@media (max-width: 1370px) {
    .ai-dev-page.custom-software-page .cs-services-sec .cs-block { padding: 34px 28px; }
    .ai-dev-page.custom-software-page .cs-services-sec .cs-block:after { top: 34px; left: 28px; }
    .ai-dev-page.custom-software-page .cs-block h3,
    .ai-dev-page.custom-software-page .cs-twocol .list-itme h3 { font-size: 20px; }
    .ai-dev-page.custom-software-page .cs-cta { padding: 52px 48px; column-gap: 40px; }
}
@media (max-width: 1199px) {
    .ai-dev-page.custom-software-page .cs-services-sec .cs-grid,
    .ai-dev-page.custom-software-page .cs-benefits-sec .cs-twocol { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
}
@media (max-width: 991px) {
    .ai-dev-page.custom-software-page .expert-coders-sec.padd-60,
    .ai-dev-page.custom-software-page :is(.cs-services-sec, .cs-process-sec, .cs-twocol-sec).padd-60 { padding: 64px 0; }
    .ai-dev-page.custom-software-page :is(.cs-services-sec, .cs-process-sec, .cs-twocol-sec) .heading2 h2,
    .ai-dev-page.custom-software-page .cs-cta h2 { font-size: 32px; letter-spacing: -.5px; }
    .ai-dev-page.custom-software-page .cs-services-sec .heading2 { text-align: left; }
    .ai-dev-page.custom-software-page .cs-services-sec .heading2:before { margin-left: 0; }
    .ai-dev-page.custom-software-page .cs-services-sec .heading2 h2,
    .ai-dev-page.custom-software-page .cs-services-sec .heading2 > p.width-83 { margin-left: 0; text-align: left; }
    .ai-dev-page.custom-software-page .cs-services-sec .heading2 > p.width-83 + p.width-83 { margin-top: 14px; }
    .ai-dev-page.custom-software-page .cs-services-sec .cs-grid,
    .ai-dev-page.custom-software-page .cs-benefits-sec .cs-twocol { margin-top: 40px; }
    /* differences: stacked, heading no longer sticky */
    .ai-dev-page.custom-software-page .cs-diff-sec .container { display: block; }
    .ai-dev-page.custom-software-page .cs-diff-sec .heading2 { position: static; margin-bottom: 36px; }
    .ai-dev-page.custom-software-page .cs-diff-sec .cs-twocol .list-itme p { max-width: none; }
    /* call to action: stacked, button under the text */
    .ai-dev-page.custom-software-page .cs-cta {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "mark" "title" "text" "btn";
        padding: 44px 36px 48px;
        border-radius: 20px;
    }
    .ai-dev-page.custom-software-page .cs-cta-row .cs-cta-btn { justify-self: start; margin-top: 28px; white-space: normal; }
    .ai-dev-page.custom-software-page .cs-cta-row:before,
    .ai-dev-page.custom-software-page .cs-cta-row:after { display: none; }
}
@media (max-width: 767px) {
    .ai-dev-page.custom-software-page .cs-services-sec .cs-grid,
    .ai-dev-page.custom-software-page .cs-benefits-sec .cs-twocol { grid-template-columns: minmax(0, 1fr); gap: 18px; }
}
@media (max-width: 575px) {
    .ai-dev-page.custom-software-page .expert-coders-sec.padd-60,
    .ai-dev-page.custom-software-page :is(.cs-services-sec, .cs-process-sec, .cs-twocol-sec).padd-60 { padding: 48px 0; }
    .ai-dev-page.custom-software-page :is(.cs-services-sec, .cs-process-sec, .cs-twocol-sec) .heading2 h2,
    .ai-dev-page.custom-software-page .cs-cta h2 { font-size: 27px; line-height: 1.2; }
    .ai-dev-page.custom-software-page :is(.cs-services-sec, .cs-process-sec, .cs-twocol-sec) .heading2 > p.width-83,
    .ai-dev-page.custom-software-page .cs-cta-row p { font-size: 16px; }
    .ai-dev-page.custom-software-page .cs-services-sec .cs-block { padding: 28px 22px; }
    .ai-dev-page.custom-software-page .cs-services-sec .cs-block > img { width: 72px; height: 72px; padding: 12px; margin-bottom: 20px; }
    .ai-dev-page.custom-software-page .cs-services-sec .cs-block:after { top: 28px; left: 22px; width: 72px; height: 72px; border-radius: 20px; }
    .ai-dev-page.custom-software-page .cs-diff-sec .cs-twocol .list-itme { padding-left: 60px; }
    .ai-dev-page.custom-software-page .cs-diff-sec .cs-twocol .list-itme:before { width: 42px; height: 42px; border-radius: 12px; background-size: 22px auto; }
    .ai-dev-page.custom-software-page .cs-twocol .list-itme h3 { font-size: 19px; }
    .ai-dev-page.custom-software-page .cs-cta { padding: 36px 24px 40px; border-radius: 16px; }
    .ai-dev-page.custom-software-page .cs-cta-row a.cs-cta-btn { min-height: 48px; margin-top: 24px; padding: 0 26px; font-size: 16px; }
    .ai-dev-page.custom-software-page .cs-benefits-sec .cs-twocol .list-itme { padding: 96px 22px 26px; border-radius: 18px; }
    .ai-dev-page.custom-software-page .cs-benefits-sec .cs-twocol .list-itme:before { top: 26px; left: 22px; width: 50px; height: 50px; background-size: 22px auto; }
}
@media (prefers-reduced-motion: reduce) {
    .ai-dev-page.custom-software-page .cs-services-sec .cs-block,
    .ai-dev-page.custom-software-page .cs-twocol .list-itme:before { transition: none; }
    .ai-dev-page.custom-software-page .cs-services-sec .cs-block:hover,
    .ai-dev-page.custom-software-page .cs-twocol .list-itme:hover:before { transform: none; }
}

/* ---- 31. "OUR COLLABORATIVE APPROACH" (web-development-bg) ----
   Software pages (Web app, Penetration testing, ERP, MVP). "this section
   should be same as other pages" (2026-10-14): it is the twin of the AI
   pages' "Why Coding Sprint?" (a photo under a dark gradient, white text and
   a list), so it now takes that section's redesign (chunks 9 and 9b) value
   for value: a light two-column block, heading, intro and the points as an
   open checklist on the left, the photo on the right in a rounded frame.
   The photo stays on the section, because each page sets its own: the frame
   is a grid item (.container:before) that lets it show through, with a wide
   white ring round it that hides the photo everywhere else (the section
   clips the ring).
   The chevron here is the lime-and-violet mark, not the light one the AI
   list uses, and its violet stroke would vanish on a deep violet disc. So the
   disc is painted by the row and the mark is turned all lime by a CSS filter
   (the file is untouched): lime on deep violet, as on the AI pages.
   Same wording, photo and marks.                                            */
.ai-dev-page .web-development-bg {
    position: relative;
    overflow: hidden;
    margin: 0;
    padding: 100px 0;
    color: var(--ai-body);
    background-color: #FFFFFF;
    background-position: right center;
}
.ai-dev-page .web-development-bg:before { content: none; }              /* the black gradient */
.ai-dev-page .web-development-bg .container {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 72px;
    align-items: stretch;
}
.ai-dev-page .web-development-bg .container:before {                    /* the photo's frame; white everywhere else (decorative) */
    content: "";
    position: relative;
    z-index: 0;
    grid-column: 2;
    grid-row: 1;
    min-height: 520px;
    border-radius: 20px;
    box-shadow: 0 24px 48px rgba(44, 2, 58, .18), 0 0 0 100vmax #FFFFFF;
    pointer-events: none;
}
.ai-dev-page .web-development-bg .heading2 {
    position: relative;
    z-index: 1;
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    flex: none;
    width: auto;
    max-width: none;
    margin: 0;
    padding: 0;
    text-align: left;
}
.ai-dev-page .web-development-bg .heading2:before {                     /* short lime mark above the heading (decorative) */
    content: "";
    display: block;
    width: 44px;
    height: 4px;
    margin: 0 0 22px;
    border-radius: 2px;
    background: var(--ai-lime);
}
.ai-dev-page .web-development-bg .heading2 h2 {
    max-width: none;
    margin: 0 0 18px;
    font-size: 42px;
    line-height: 1.14;
    font-weight: 500;
    letter-spacing: -.8px;
    color: var(--ai-ink);
    text-align: left;
}
.ai-dev-page .web-development-bg .heading2 > p {
    max-width: 600px;
    margin: 0;
    font-size: 18px;
    line-height: 1.65;
    color: var(--ai-body);
}
/* the points: the open checklist of the AI "Why Coding Sprint?" (chunk 9b) */
.ai-dev-page .web-development-bg .list-itme,
.ai-dev-page .web-development-bg .list-itme:last-child {
    position: relative;
    margin: 0;
    padding: 17px 0 17px 56px;
    border: 0;
    background: radial-gradient(circle at 18px 50%, var(--ai-deep) 17.5px, transparent 18.5px) no-repeat;   /* the disc */
}
.ai-dev-page .web-development-bg .heading2 > p + .list-itme { margin-top: 26px; }
.ai-dev-page .web-development-bg .list-itme + .list-itme:after {        /* faint line between rows (decorative) */
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 56px;
    border-top: 1px solid var(--ai-line);
}
.ai-dev-page .web-development-bg .list-itme:before {                    /* the existing mark, turned lime */
    left: 0;
    top: 50%;
    width: 36px;
    height: 36px;
    margin-top: -18px;
    border-radius: 50%;
    background-color: transparent;
    background-size: 20px auto;
    background-position: center;
    filter: brightness(0) saturate(100%) invert(91%) sepia(16%) saturate(6596%) hue-rotate(11deg) brightness(91%) contrast(97%);
}
.ai-dev-page .web-development-bg .list-itme h3 {
    margin: 0;
    font-family: "Rubik", sans-serif;
    font-size: 19px;
    line-height: 1.35;
    font-weight: 500;
    letter-spacing: -.1px;
    color: var(--ai-ink);
    transition: color .2s ease;
}
.ai-dev-page .web-development-bg .list-itme:hover h3 { color: var(--ai-violet); }
@media (max-width: 1440px) {
    .ai-dev-page .web-development-bg .heading2 h2 { font-size: 38px; }
    .ai-dev-page .web-development-bg .heading2 > p { font-size: 17px; }
}
@media (max-width: 1370px) {
    .ai-dev-page .web-development-bg .container { column-gap: 56px; }
    .ai-dev-page .web-development-bg .list-itme h3 { font-size: 18px; }
}
@media (max-width: 991px) {
    /* stacked: text first, the photo under it */
    .ai-dev-page .web-development-bg { padding: 64px 0; }
    .ai-dev-page .web-development-bg .container { grid-template-columns: minmax(0, 1fr); row-gap: 36px; }
    .ai-dev-page .web-development-bg .container:before { grid-column: 1; grid-row: 2; min-height: 320px; }
    .ai-dev-page .web-development-bg .heading2 h2 { font-size: 32px; letter-spacing: -.5px; }
    .ai-dev-page .web-development-bg .heading2 > p { max-width: none; }
}
@media (max-width: 575px) {
    .ai-dev-page .web-development-bg { padding: 48px 0; }
    .ai-dev-page .web-development-bg .container:before { min-height: 240px; border-radius: 16px; }
    .ai-dev-page .web-development-bg .heading2 h2 { font-size: 27px; line-height: 1.2; }
    .ai-dev-page .web-development-bg .heading2 > p { font-size: 16px; }
    .ai-dev-page .web-development-bg .list-itme,
    .ai-dev-page .web-development-bg .list-itme:last-child { padding: 15px 0 15px 50px; background: radial-gradient(circle at 16px 50%, var(--ai-deep) 15.5px, transparent 16.5px) no-repeat; }
    .ai-dev-page .web-development-bg .list-itme:before { width: 32px; height: 32px; margin-top: -16px; background-size: 18px auto; }
    .ai-dev-page .web-development-bg .list-itme + .list-itme:after { left: 50px; }
    .ai-dev-page .web-development-bg .list-itme h3 { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) {
    .ai-dev-page .web-development-bg .list-itme h3 { transition: none; }
}

/* ---- 32. SOFTWARE MAINTENANCE & SUPPORT (sam-page) ----
   Third Software page (2026-10-14). Built from its own Figma frame with its
   own <style> (printed after this file, many rules as body.sam-page ...), so
   every rule here leads with .ai-dev-page.sam-page. Same wording, icons and
   pictures; only the look changes. Band rhythm: intro (tint), services
   (white), benefits (tint), industries (white), approach (tint), call to
   action, why choose us (white), then the shared case studies onwards.
   - headings: the shared style; their highlighted tail (<span>) in brand
     violet, as on the FAQ heading;
   - intro: heading left, text right behind a fine rule (as chunk 23);
   - services: the six cards keep the shared card; the icon box is the
     shared tile (the page forced 80x80);
   - both calls to action ("Tell us what is slowing your software down", "Let's
     Make Your Software Easier to Maintain") are the AI Development banner
     (chunks 7 and 7b): deep violet panel over the same picture, lime mark,
     button right with the chip drawing (it hangs off the button's own
     column, the same way it hangs off the wrapper on that page);
   - industries: white band; the icons are white artwork (made for the old
     lime disc), so they are drawn in brand violet on the soft tile;
   - approach: centred header over two white cards side by side (it was being
     laid out as the Benefits split), each a short checklist;
   - why choose us: the AI "Why Coding Sprint?" block (chunks 9 and 9b), text
     and checklist left, the photo right in a rounded frame.               */

/* headings: highlighted tail in brand violet */
.ai-dev-page.sam-page .home_n_heading span { display: inline; color: inherit; font-weight: inherit; }
/* "h2 font style not consistant?" then "What are the benefits of software application maintenance? section
   title style?": the headings here wrap part of their words in a <span> the page coloured violet; the same
   section headings on the other pages are one colour, so these are too (the FAQ keeps its violet
   "Questions", as on every page). */
.ai-dev-page.sam-page section:not(.faq_n_sec) .home_n_heading span { color: inherit; font-weight: inherit; }
.ai-dev-page.sam-page section:is(.sam-intro-sec, .sam-benefits, .sam-approach, .sam-why) .home_n_heading span { color: inherit; }   /* the page's own rules here weigh as much as the one above */
.ai-dev-page.sam-page section.sam-ind-sec .home_n_heading span { color: inherit; }   /* all white, as the AI slider heading ("title style differ?") */

/* INTRO: heading left, text right */
.ai-dev-page.sam-page .sam-intro-sec { padding: 96px 0; background: var(--ai-tint); }
.ai-dev-page.sam-page .sam-intro-sec .serv_block {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: 72px;
    align-items: start;
    margin: 0;
}
.ai-dev-page.sam-page .sam-intro-sec .serv_head,
.ai-dev-page.sam-page .sam-intro-sec .serv_des { width: auto; max-width: none; flex: none; margin: 0; padding: 0; }
.ai-dev-page.sam-page .sam-intro-sec .serv_head:before {   /* short lime mark above the heading (decorative) */
    content: "";
    display: block;
    width: 44px;
    height: 4px;
    margin: 0 0 22px;
    border-radius: 2px;
    background: var(--ai-lime);
}
.ai-dev-page.sam-page .sam-intro-sec .serv_head .home_n_heading {
    margin: 0;
    font-size: 42px;
    line-height: 1.14;
    font-weight: 500;
    letter-spacing: -.8px;
    color: var(--ai-ink);
    text-align: left;
}
.ai-dev-page.sam-page .sam-intro-sec .serv_des {
    margin-top: 26px;                  /* level with the heading, below its mark */
    padding: 6px 0 6px 36px;
    border-left: 1px solid var(--ai-line);
}
.ai-dev-page.sam-page .sam-intro-sec .serv_des .home_n_text {
    margin: 0;
    font-size: 18px;
    line-height: 1.65;
    color: var(--ai-body);
}
.ai-dev-page.sam-page .sam-intro-sec .serv_des .home_n_text + .home_n_text { margin-top: 14px; }

/* SERVICES: shared cards; the heading's forced line break is not needed beside the intro */
.ai-dev-page.sam-page .sam-services { padding: 96px 0; }
@media (min-width: 992px) {
    .ai-dev-page.sam-page .sam-services .heading2 h2 br { display: none; }
}
.ai-dev-page.sam-page .sam-services .heading2 > .row,
.ai-dev-page.sam-page .sam-services .heading2 > .row + .row { margin-left: 0; margin-right: 0; }
.ai-dev-page.sam-page .sam-services .full-content-column > img:first-child { width: 84px; height: 84px; margin: 0 0 24px; padding: 14px; }
.ai-dev-page.sam-page .sam-services .unlock_border,
.ai-dev-page.sam-page .sam-services .unlock_border:hover { padding: 40px 36px; }
.ai-dev-page.sam-page .sam-services .unlock_border h3 { margin: 0 0 12px; font-size: 22px; line-height: 1.25; font-weight: 500; letter-spacing: -.2px; color: var(--ai-ink); }
.ai-dev-page.sam-page .sam-services .unlock_border p { margin: 0; font-size: 16px; line-height: 1.7; color: var(--ai-body); }

/* CALLS TO ACTION: the AI Development banner */
.ai-dev-page.sam-page .sam-cta { padding: 64px 0 0; background: none; }
/* the site container (the page held it to 1246); the caps of the CONTAINER block at the end,
   repeated here because the page's own rule weighs the same and comes later */
.ai-dev-page.sam-page .sam-cta .container { max-width: 1230px; }
@media (min-width: 1441px) and (max-width: 1549px) {
    .ai-dev-page.sam-page .sam-cta .container { max-width: 1450px; }
}
@media (min-width: 1550px) {
    .ai-dev-page.sam-page .sam-cta .container { max-width: 1392px; }
    .ai-dev-page.sam-page .sam-cta-block > .container { padding-left: 12px; padding-right: 12px; }   /* the page stripped the padding here */
}
.ai-dev-page.sam-page .sam-cta-block {
    padding: 0;
    background: linear-gradient(180deg, var(--ai-tint) 50%, #FFFFFF 50%);
}
.ai-dev-page.sam-page .sam-cta .row.cta-row {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 56px;
    align-items: center;
    max-width: none;
    margin: 0;
    padding: 60px 64px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 24px;
    overflow: hidden;
    background:
        linear-gradient(120deg, rgba(23, 3, 31, .96) 0%, rgba(44, 2, 58, .94) 55%, rgba(62, 5, 84, .92) 100%),
        url(/assets/images/gradient@2x.webp) center / cover no-repeat #2C023A;   /* AI Development's banner picture */
    box-shadow: 0 24px 48px rgba(44, 2, 58, .22);
}
.ai-dev-page.sam-page .sam-cta .row.cta-row > [class*="col-"] { width: auto; max-width: none; flex: none; padding: 0; }
.ai-dev-page.sam-page .sam-cta .heading-cta { display: block; color: #FFFFFF; }
.ai-dev-page.sam-page .sam-cta .heading-cta:before {   /* the short lime mark the other headings carry */
    content: "";
    display: block;
    width: 44px;
    height: 4px;
    margin: 0 0 22px;
    border-radius: 2px;
    background: var(--ai-lime);
}
.ai-dev-page.sam-page .sam-cta .heading-cta h2 {
    max-width: 880px;
    margin: 0 0 18px;
    font-family: "Rubik", sans-serif;
    font-size: 42px;
    line-height: 1.14;
    font-weight: 500;
    letter-spacing: -.8px;
    color: #FFFFFF;
}
.ai-dev-page.sam-page .sam-cta .heading-cta p {
    max-width: 880px;
    margin: 0;
    font-size: 18px;
    line-height: 1.65;
    letter-spacing: 0;
    color: rgba(255, 255, 255, .82);
}
.ai-dev-page.sam-page .sam-cta .desktop-right {   /* the button's own column: the chip drawing hangs off it */
    position: relative;
    isolation: isolate;
    display: flex;
    justify-content: flex-end;
    margin: 0;
}
.ai-dev-page.sam-page .sam-cta .desktop-right:before {   /* pins and traces (decorative) */
    content: "";
    position: absolute;
    z-index: -1;
    top: 50%;
    right: -200px;
    left: -200px;
    height: 360px;
    transform: translateY(-50%);
    background:
        url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 560 360'><g fill='none' stroke='rgba(255,255,255,.2)' stroke-width='1.4' stroke-linejoin='round'><path d='M216 144 V128 L176 88 V82'/><path d='M216 216 V232 L176 272 V278'/><path d='M248 144 V128 L230 110 V96'/><path d='M248 216 V232 L230 250 V264'/><path d='M280 144 V86'/><path d='M280 216 V274'/><path d='M312 144 V128 L330 110 V96'/><path d='M312 216 V232 L330 250 V264'/><path d='M344 144 V128 L384 88 V82'/><path d='M344 216 V232 L384 272 V278'/></g><circle cx='176' cy='82' r='4.5' fill='%232C023A' stroke='rgba(255,255,255,.55)' stroke-width='1.5'/><circle cx='176' cy='278' r='4.5' fill='%232C023A' stroke='rgba(255,255,255,.55)' stroke-width='1.5'/><circle cx='230' cy='96' r='4.5' fill='%232C023A' stroke='rgba(255,255,255,.55)' stroke-width='1.5'/><circle cx='230' cy='264' r='4.5' fill='%232C023A' stroke='rgba(255,255,255,.55)' stroke-width='1.5'/><circle cx='280' cy='86' r='5.5' fill='%23C2C904'/><circle cx='280' cy='274' r='5.5' fill='%23C2C904'/><circle cx='330' cy='96' r='4.5' fill='%232C023A' stroke='rgba(255,255,255,.55)' stroke-width='1.5'/><circle cx='330' cy='264' r='4.5' fill='%232C023A' stroke='rgba(255,255,255,.55)' stroke-width='1.5'/><circle cx='384' cy='82' r='4.5' fill='%232C023A' stroke='rgba(255,255,255,.55)' stroke-width='1.5'/><circle cx='384' cy='278' r='4.5' fill='%232C023A' stroke='rgba(255,255,255,.55)' stroke-width='1.5'/></svg>") center / 560px 360px no-repeat,
        url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 360'><g fill='none' stroke='rgba(255,255,255,.2)' stroke-width='1.4' stroke-linejoin='round'><path d='M10 170 H38 L54 154 H200'/><path d='M10 190 H38 L54 206 H200'/></g></svg>") right center / 200px 360px no-repeat;
    pointer-events: none;
}
.ai-dev-page.sam-page .sam-cta .desktop-right:after {    /* the outline hugging the button (decorative) */
    content: "";
    position: absolute;
    z-index: -1;
    inset: -10px;
    border: 1.2px solid rgba(255, 255, 255, .18);
    border-radius: 999px;
    pointer-events: none;
}
.ai-dev-page.sam-page .sam-cta a.button.main-btn.btn.bg-white.tblack { margin: 0; white-space: nowrap; }

/* BENEFITS: shared; the page's own gaps between items go */
.ai-dev-page.sam-page .sam-benefits .list-itme,
.ai-dev-page.sam-page .sam-benefits .col-lg-6 > .list-itme:first-child,
.ai-dev-page.sam-page .sam-benefits .margin-left-sec > .list-itme:first-child { margin-top: 0; }   /* the page gave both first items 48px ("right side cards not top align") */
.ai-dev-page.sam-page .sam-benefits .list-itme h3 { margin: 0 0 10px; font-size: 22px; line-height: 1.25; font-weight: 500; color: var(--ai-ink); }
.ai-dev-page.sam-page .sam-benefits .list-itme p { margin: 0; }

/* INDUSTRIES ("Application maintenance for different business needs"): "this
   section should same as Why choose Coding Sprint" (2026-10-14), so it is the
   AI pages' slider (chunks 22 and 22b) value for value: deep violet band with
   the </> mark, centred heading in white, white cards (icon on a soft tile in
   brand violet, title and text left), arrows under the cards on the right.
   The carousel is the page's own (Owl, four per view, no dots); its arrow
   images are white discs with a dark chevron, so they are blended into the
   band (light chevron in a thin ring) and turn dark on the lime hover; the
   images themselves are unchanged.                                          */
.ai-dev-page.sam-page .sam-ind-sec {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 100px 0;
    background: linear-gradient(120deg, #1E0228 0%, var(--ai-deep) 45%, #4A0360 100%);
}
.ai-dev-page.sam-page .sam-ind-sec:before,
.ai-dev-page.sam-page .sam-ind-sec:after {               /* the </> mark (decorative), as chunk 22b */
    content: "";
    position: absolute;
    z-index: -1;
    -webkit-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 400'><g fill='none' stroke='white' stroke-width='22' stroke-linecap='round' stroke-linejoin='round'><path d='M190 80 L60 200 L190 320'/><path d='M410 80 L540 200 L410 320'/><path d='M350 50 L250 350'/></g></svg>") center / contain no-repeat;
    mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 400'><g fill='none' stroke='white' stroke-width='22' stroke-linecap='round' stroke-linejoin='round'><path d='M190 80 L60 200 L190 320'/><path d='M410 80 L540 200 L410 320'/><path d='M350 50 L250 350'/></g></svg>") center / contain no-repeat;
    pointer-events: none;
}
.ai-dev-page.sam-page .sam-ind-sec:before { top: 50%; right: -60px; width: 640px; height: 427px; transform: translateY(-50%); background: rgba(255, 255, 255, .05); }
.ai-dev-page.sam-page .sam-ind-sec:after { top: 48px; left: -40px; width: 240px; height: 160px; background: rgba(194, 201, 4, .10); }
/* the header: centred, white (the long-intro split of chunk 23 does not apply here) */
.ai-dev-page.sam-page .expert-coders-sec.sam-ind-sec .heading2:has(> p) {
    display: block;
    max-width: 1040px;
    margin: 0 auto 48px;
    padding: 0;
    text-align: center;
}
.ai-dev-page.sam-page .expert-coders-sec.sam-ind-sec .heading2:has(> p):before { margin: 0 auto 22px; }
.ai-dev-page.sam-page .expert-coders-sec.sam-ind-sec .heading2:has(> p) h2 { max-width: none; margin: 0 0 18px; color: #FFFFFF; text-align: center; }
.ai-dev-page.sam-page .expert-coders-sec.sam-ind-sec .heading2:has(> p) > p:nth-of-type(n) {
    max-width: 920px;
    margin: 0 auto;
    padding: 0;
    border: 0;
    text-align: center;
    color: rgba(255, 255, 255, .82);
}
/* the carousel: room under the cards for the arrows */
.ai-dev-page.sam-page .sam-ind-sec .sam-ind-carousel { position: relative; z-index: auto; width: auto; margin: 0; padding: 6px 0 84px; }   /* no layer of its own (Owl sets z-index 1): the arrows blend with the band */
.ai-dev-page.sam-page .sam-ind-sec .sam-ind-carousel .owl-stage-outer { margin: -12px -24px -44px; padding: 12px 24px 44px; }   /* room for the hover lift and shadow; the next card waits 32px away */
/* the cards */
.ai-dev-page.sam-page .sam-ind-sec .sam-ind-carousel .full-content-column.new-column-content,
.ai-dev-page.sam-page .sam-ind-sec .sam-ind-carousel .full-content-column.new-column-content:hover {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 32px 28px;
    text-align: left;
    background: #FFFFFF;
    border: 0;
    border-radius: 20px;
    box-shadow: 0 18px 30px -22px rgba(0, 0, 0, .55);
    transition: transform .3s ease, box-shadow .3s ease;
}
.ai-dev-page.sam-page .sam-ind-sec .sam-ind-carousel .full-content-column.new-column-content:hover {
    transform: translateY(-4px);
    box-shadow: 0 24px 36px -22px rgba(0, 0, 0, .65);
}
.ai-dev-page.sam-page .sam-ind-sec .full-content-column:before { display: none; }   /* the services cards' hover bar */
.ai-dev-page.sam-page .sam-ind-sec .full-content-column .figure-box {
    width: 80px;
    height: 80px;
    margin: 0 0 24px;
    padding: 18px;
    border-radius: 20px;
}
.ai-dev-page.sam-page .sam-ind-sec .figure-box svg {
    width: 100%;
    height: 100%;
    filter: brightness(0) saturate(100%) invert(16%) sepia(22%) saturate(7395%) hue-rotate(272deg) brightness(89%) contrast(122%);
    transition: filter .3s ease;
}
.ai-dev-page.sam-page .sam-ind-sec .full-content-column:hover .figure-box svg { filter: brightness(0) invert(1); }
.ai-dev-page.sam-page .sam-ind-sec .new-column-content h3 { margin: 0 0 10px; font-size: 21px; line-height: 1.3; font-weight: 500; letter-spacing: -.2px; text-align: left; color: var(--ai-ink); }
.ai-dev-page.sam-page .sam-ind-sec .new-column-content p { margin: 0; font-size: 16px; line-height: 1.7; text-align: left; color: var(--ai-body); }
/* dots under the cards on the left (turned on by assets/js/ai-pages.js), as the AI slider */
.ai-dev-page.sam-page .sam-ind-sec .sam-ind-carousel .owl-dots {
    position: absolute;
    left: 0;
    bottom: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    line-height: 0;
}
.ai-dev-page.sam-page .sam-ind-sec .sam-ind-carousel .owl-dots.disabled { display: none; }
.ai-dev-page.sam-page .sam-ind-sec .sam-ind-carousel .owl-dots .owl-dot { display: block; width: auto; height: auto; margin: 0; padding: 0; border: 0; background: none; }
.ai-dev-page.sam-page .sam-ind-sec .sam-ind-carousel .owl-dots .owl-dot span {
    display: block;
    width: 8px;
    height: 8px;
    margin: 0;
    border-radius: 999px;
    background: #FFFFFF;
    opacity: .35;
    transition: width .3s ease, opacity .3s ease, background-color .3s ease;
}
.ai-dev-page.sam-page .sam-ind-sec .sam-ind-carousel .owl-dots .owl-dot.active span { width: 30px; opacity: 1; background: var(--ai-lime); }
/* arrows under the cards, on the right */
.ai-dev-page.sam-page .sam-ind-sec .sam-ind-carousel .owl-nav {
    position: absolute;               /* after the cards in the markup, so on top of them without a z-index */
    right: 0;
    bottom: 0;
    display: flex;
    gap: 10px;
    margin: 0;
}
.ai-dev-page.sam-page .sam-ind-sec .sam-ind-carousel .owl-nav button.owl-prev,
.ai-dev-page.sam-page .sam-ind-sec .sam-ind-carousel .owl-nav button.owl-next {
    position: static;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin: 0;
    padding: 0;
    transform: none;
    border: 1px solid rgba(255, 255, 255, .30);
    border-radius: 50%;
    background: transparent;
    box-shadow: none;
    transition: background-color .25s ease, border-color .25s ease;
}
.ai-dev-page.sam-page .sam-ind-sec .sam-ind-carousel .owl-nav button img { width: 38px; height: 38px; filter: invert(1) brightness(1.25); mix-blend-mode: screen; }   /* white disc drops out, chevron turns light */
.ai-dev-page.sam-page .sam-ind-sec .sam-ind-carousel .owl-nav button:hover { background: var(--ai-lime); border-color: var(--ai-lime); }
.ai-dev-page.sam-page .sam-ind-sec .sam-ind-carousel .owl-nav button:hover img { filter: none; mix-blend-mode: multiply; }   /* dark chevron on the lime */
@media (max-width: 1440px) {
    .ai-dev-page.sam-page .sam-ind-sec { padding: 88px 0; }
}
@media (max-width: 991px) {
    .ai-dev-page.sam-page .sam-ind-sec { padding: 64px 0; }
    .ai-dev-page.sam-page .expert-coders-sec.sam-ind-sec .heading2:has(> p) { margin-bottom: 36px; }
    .ai-dev-page.sam-page .sam-ind-sec:before { right: -80px; width: 420px; height: 280px; }
    .ai-dev-page.sam-page .sam-ind-sec:after { top: 20px; left: -40px; width: 160px; height: 107px; }
}
@media (max-width: 575px) {
    .ai-dev-page.sam-page .sam-ind-sec { padding: 48px 0; }
    .ai-dev-page.sam-page .sam-ind-sec:before { right: -70px; width: 300px; height: 200px; }
    .ai-dev-page.sam-page .sam-ind-sec:after { display: none; }
    .ai-dev-page.sam-page .sam-ind-sec .sam-ind-carousel .full-content-column.new-column-content,
    .ai-dev-page.sam-page .sam-ind-sec .sam-ind-carousel .full-content-column.new-column-content:hover { padding: 26px 22px; border-radius: 18px; }
    .ai-dev-page.sam-page .sam-ind-sec .full-content-column .figure-box { width: 68px; height: 68px; padding: 15px; margin-bottom: 20px; border-radius: 18px; }
    .ai-dev-page.sam-page .sam-ind-sec .new-column-content h3 { font-size: 19px; }
}
@media (prefers-reduced-motion: reduce) {
    .ai-dev-page.sam-page .sam-ind-sec .sam-ind-carousel .full-content-column.new-column-content:hover { transform: none; }
    .ai-dev-page.sam-page .sam-ind-sec .figure-box svg { transition: none; }
}

/* APPROACH: centred header, two cards side by side (not the Benefits split) */
.ai-dev-page.sam-page .why-coding-sprint.padd-60.sam-approach .container { display: block; }
.ai-dev-page.sam-page .why-coding-sprint.padd-60.sam-approach .heading2 {
    position: static;
    max-width: 1040px;
    margin: 0 auto;
    text-align: center;
}
.ai-dev-page.sam-page .why-coding-sprint.padd-60.sam-approach .heading2:before { margin: 0 auto 22px; }
.ai-dev-page.sam-page .why-coding-sprint.padd-60.sam-approach .heading2 h2 { margin: 0 auto 18px; text-align: center; }
.ai-dev-page.sam-page .why-coding-sprint.padd-60.sam-approach .heading2 > p.width-83 { max-width: 920px; margin: 0 auto; }
.ai-dev-page.sam-page .why-coding-sprint.padd-60.sam-approach .row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
    grid-auto-flow: row;
    gap: 28px;
    margin: 56px 0 0;
}
.ai-dev-page.sam-page .why-coding-sprint.padd-60.sam-approach .row > [class*="col-"] { display: flex; width: auto; max-width: none; margin: 0; padding: 0; }
.ai-dev-page.sam-page .sam-approach .sam-appr-card {
    display: block;                   /* the page made it a flex column: rows spread, title as wide as its words */
    width: 100%;
    margin: 0;
    padding: 36px;
    background: #FFFFFF;
    border: 1px solid var(--ai-line);
    border-radius: 20px;
    box-shadow: var(--ai-shadow);
}
.ai-dev-page.sam-page .sam-approach .sam-appr-title {
    margin: 0 0 6px;
    padding: 0 0 20px;
    border-bottom: 1px solid var(--ai-line);
    font-family: "Rubik", sans-serif;
    font-size: 24px;
    line-height: 1.2;
    font-weight: 500;
    letter-spacing: -.3px;
    color: var(--ai-violet);
}
.ai-dev-page.sam-page .why-coding-sprint.padd-60.sam-approach .sam-appr-card .list-itme:nth-child(n) {
    position: relative;
    margin: 0;
    padding: 14px 0 14px 48px;
    border: 0;
}
.ai-dev-page.sam-page .why-coding-sprint.padd-60.sam-approach .sam-appr-card .list-itme:nth-child(n):last-child { padding-bottom: 0; }
.ai-dev-page.sam-page .why-coding-sprint.padd-60.sam-approach .sam-appr-card .list-itme:nth-child(n):before {   /* the existing chevron on a soft tint disc */
    top: 16px;                        /* asked for (2026-10-14) */
    left: 0;
    width: 32px;
    height: 32px;
    margin: 0;
    border: 0;
    border-radius: 50%;
    background-color: var(--ai-tint);
    background-size: 17px auto;
    background-position: center;
    box-shadow: inset 0 0 0 1px var(--ai-line);
    transform: none;
}
.ai-dev-page.sam-page .why-coding-sprint.padd-60.sam-approach .sam-appr-card .list-itme h3 {
    margin: 0;
    padding-top: 4px;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    line-height: 1.6;
    font-weight: 500;
    letter-spacing: 0;
    color: var(--ai-ink);
}

/* "why is too much space above cta?": from 1550px the Benefits row-count rule (chunk 21) gave the
   two Approach cards four grid rows (three empty 28px gaps = 84px under them). Same weight, later. */
.ai-dev-page.sam-page .why-coding-sprint.padd-60.sam-approach .row:has(> [class*="col-"]:first-child),
.ai-dev-page.sam-page .why-coding-sprint.padd-60.sam-why .row:has(> [class*="col-"]:first-child) { grid-template-rows: none; }

/* WHY CHOOSE US: the AI "Why Coding Sprint?" block */
.ai-dev-page.sam-page .why-coding-sprint.padd-60.sam-why { padding: 100px 0; background: #FFFFFF; overflow: visible; }
.ai-dev-page.sam-page .why-coding-sprint.padd-60.sam-why .container { display: block; }
.ai-dev-page.sam-page .why-coding-sprint.padd-60.sam-why .row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: none;
    grid-auto-flow: row;
    column-gap: 72px;
    align-items: center;
    margin: 0;
}
.ai-dev-page.sam-page .why-coding-sprint.padd-60.sam-why .row > [class*="col-"] { display: block; flex: none; width: auto; max-width: none; margin: 0; padding: 0; }
.ai-dev-page.sam-page .why-coding-sprint.padd-60.sam-why .row > [class*="col-"]:first-child:before {   /* short lime mark above the heading (decorative) */
    content: "";
    display: block;
    width: 44px;
    height: 4px;
    margin: 0 0 22px;
    border-radius: 2px;
    background: var(--ai-lime);
}
.ai-dev-page.sam-page .sam-why .home_n_heading {
    margin: 0 0 18px;
    font-size: 42px;
    line-height: 1.14;
    font-weight: 500;
    letter-spacing: -.8px;
    color: var(--ai-ink);
}
.ai-dev-page.sam-page .sam-why .home_n_text { margin: 0; font-size: 18px; line-height: 1.65; color: var(--ai-body); }
.ai-dev-page.sam-page .sam-why .home_n_text + .home_n_text { margin-top: 14px; }
.ai-dev-page.sam-page .why-coding-sprint.padd-60.sam-why .list-itme:nth-child(n) {
    position: relative;
    margin: 0;
    padding: 17px 0 17px 56px;
    border: 0;
    background: radial-gradient(circle at 18px 50%, var(--ai-deep) 17.5px, transparent 18.5px) no-repeat;   /* the disc */
}
.ai-dev-page.sam-page .why-coding-sprint.padd-60.sam-why .home_n_text + .list-itme:nth-child(n) { margin-top: 26px; }
.ai-dev-page.sam-page .why-coding-sprint.padd-60.sam-why .list-itme + .list-itme:after {   /* faint line between rows (decorative) */
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 56px;
    border-top: 1px solid var(--ai-line);
}
.ai-dev-page.sam-page .why-coding-sprint.padd-60.sam-why .list-itme:nth-child(n):before {   /* the existing mark, turned lime */
    top: 50%;
    left: 0;
    width: 36px;
    height: 36px;
    margin-top: -18px;
    border: 0;
    border-radius: 50%;
    background-color: transparent;
    background-size: 20px auto;
    background-position: center;
    box-shadow: none;
    transform: none;
    filter: brightness(0) saturate(100%) invert(91%) sepia(16%) saturate(6596%) hue-rotate(11deg) brightness(91%) contrast(97%);
}
.ai-dev-page.sam-page .why-coding-sprint.padd-60.sam-why .list-itme h3 {
    margin: 0;
    font-family: "Rubik", sans-serif;
    font-size: 19px;
    line-height: 1.35;
    font-weight: 500;
    letter-spacing: -.1px;
    color: var(--ai-ink);
    transition: color .2s ease;
}
.ai-dev-page.sam-page .why-coding-sprint.padd-60.sam-why .list-itme:hover h3 { color: var(--ai-violet); }
.ai-dev-page.sam-page .sam-why .sam-why-img {
    position: relative;
    top: auto;
    bottom: auto;
    left: auto;
    width: auto;
    margin: 0;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 24px 48px rgba(44, 2, 58, .18);
}
.ai-dev-page.sam-page .sam-why .sam-why-img img { display: block; width: 100%; height: auto; border-radius: 0; object-fit: initial; }
/* "right side image should be top align": the photo starts level with the heading (below its lime mark) */
@media (min-width: 992px) {
    .ai-dev-page.sam-page .why-coding-sprint.padd-60.sam-why .row { align-items: start; }
    .ai-dev-page.sam-page .why-coding-sprint.padd-60.sam-why .row > [class*="col-"]:last-child { margin-top: 26px; }   /* = the mark (4px) + its gap (22px) */
}

@media (max-width: 1440px) {
    .ai-dev-page.sam-page .sam-intro-sec .serv_head .home_n_heading,
    .ai-dev-page.sam-page .sam-cta .heading-cta h2,
    .ai-dev-page.sam-page .sam-why .home_n_heading { font-size: 38px; }
    .ai-dev-page.sam-page .sam-intro-sec .serv_des .home_n_text,
    .ai-dev-page.sam-page .sam-cta .heading-cta p,
    .ai-dev-page.sam-page .sam-why .home_n_text { font-size: 17px; }
}
@media (max-width: 1370px) {
    .ai-dev-page.sam-page .why-coding-sprint.padd-60.sam-why .row { column-gap: 56px; }
    .ai-dev-page.sam-page .sam-cta .row.cta-row { padding: 52px 48px; column-gap: 40px; }
    .ai-dev-page.sam-page .sam-services .unlock_border,
    .ai-dev-page.sam-page .sam-services .unlock_border:hover { padding: 34px 28px; }
    .ai-dev-page.sam-page .sam-services .unlock_border h3 { font-size: 20px; }
    .ai-dev-page.sam-page .why-coding-sprint.padd-60.sam-why .list-itme h3 { font-size: 18px; }
}
@media (max-width: 1199px) {
    .ai-dev-page.sam-page .why-coding-sprint.padd-60.sam-approach .row { grid-template-columns: minmax(0, 1fr); gap: 24px; }
}
@media (max-width: 991px) {
    .ai-dev-page.sam-page .sam-intro-sec,
    .ai-dev-page.sam-page .sam-services { padding: 64px 0; }
    .ai-dev-page.sam-page .why-coding-sprint.padd-60.sam-why { padding: 64px 0; }
    .ai-dev-page.sam-page .sam-intro-sec .serv_block { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
    .ai-dev-page.sam-page .sam-intro-sec .serv_head .home_n_heading,
    .ai-dev-page.sam-page .sam-cta .heading-cta h2,
    .ai-dev-page.sam-page .sam-why .home_n_heading { font-size: 32px; letter-spacing: -.5px; }
    .ai-dev-page.sam-page .sam-intro-sec .serv_des { margin-top: 24px; padding: 0; border: 0; }
    .ai-dev-page.sam-page .sam-services .sam-cta { padding-top: 48px; }
    .ai-dev-page.sam-page .sam-cta .row.cta-row { grid-template-columns: minmax(0, 1fr); padding: 44px 36px 48px; border-radius: 20px; }
    .ai-dev-page.sam-page .sam-cta .desktop-right { justify-content: flex-start; margin-top: 28px; }
    .ai-dev-page.sam-page .sam-cta .desktop-right:before,
    .ai-dev-page.sam-page .sam-cta .desktop-right:after { display: none; }
    .ai-dev-page.sam-page .sam-cta a.button.main-btn.btn.bg-white.tblack { white-space: normal; }
    .ai-dev-page.sam-page .why-coding-sprint.padd-60.sam-approach .row { margin-top: 40px; }
    .ai-dev-page.sam-page .why-coding-sprint.padd-60.sam-why .row { grid-template-columns: minmax(0, 1fr); row-gap: 36px; }
}
@media (max-width: 575px) {
    .ai-dev-page.sam-page .sam-intro-sec,
    .ai-dev-page.sam-page .sam-services { padding: 48px 0; }
    .ai-dev-page.sam-page .why-coding-sprint.padd-60.sam-why { padding: 48px 0; }
    .ai-dev-page.sam-page .sam-intro-sec .serv_head .home_n_heading,
    .ai-dev-page.sam-page .sam-cta .heading-cta h2,
    .ai-dev-page.sam-page .sam-why .home_n_heading { font-size: 27px; line-height: 1.2; }
    .ai-dev-page.sam-page .sam-intro-sec .serv_des .home_n_text,
    .ai-dev-page.sam-page .sam-cta .heading-cta p,
    .ai-dev-page.sam-page .sam-why .home_n_text { font-size: 16px; }
    .ai-dev-page.sam-page .sam-cta .row.cta-row { padding: 36px 24px 40px; border-radius: 16px; }
    .ai-dev-page.sam-page .sam-cta .desktop-right { margin-top: 24px; }
    .ai-dev-page.sam-page .sam-services .unlock_border,
    .ai-dev-page.sam-page .sam-services .unlock_border:hover { padding: 28px 22px; }
    .ai-dev-page.sam-page .sam-services .full-content-column > img:first-child { width: 72px; height: 72px; padding: 12px; margin-bottom: 20px; }
    .ai-dev-page.sam-page .sam-approach .sam-appr-card { padding: 28px 22px; }
    .ai-dev-page.sam-page .sam-approach .sam-appr-title { font-size: 21px; }
    .ai-dev-page.sam-page .why-coding-sprint.padd-60.sam-why .list-itme:nth-child(n) { padding: 15px 0 15px 50px; background: radial-gradient(circle at 16px 50%, var(--ai-deep) 15.5px, transparent 16.5px) no-repeat; }
    .ai-dev-page.sam-page .why-coding-sprint.padd-60.sam-why .list-itme:nth-child(n):before { width: 32px; height: 32px; margin-top: -16px; background-size: 18px auto; }
    .ai-dev-page.sam-page .why-coding-sprint.padd-60.sam-why .list-itme + .list-itme:after { left: 50px; }
    .ai-dev-page.sam-page .why-coding-sprint.padd-60.sam-why .list-itme h3 { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) {
    .ai-dev-page.sam-page .why-coding-sprint.padd-60.sam-why .list-itme h3 { transition: none; }
}

/* ---- 33. SOFTWARE DEVELOPMENT FOR STARTUPS (sds-page) ----
   Fourth Software page (2026-10-14). Built from its own Figma frame with its
   own <style> and Owl script; every rule here leads with .ai-dev-page.sds-page.
   It takes the patterns already agreed on the other pages, nothing new:
   - hero: the shared hero, with the wider measure for a long intro (Bespoke);
   - "From idea to launch" and "Your Startup Needs More..." and "Industries We
     Support": the AI "Why Coding Sprint?" block (text, the photo in a rounded
     frame level with the heading, the checklist), the second mirrored;
   - services: the Benefits editorial split (chunk 4);
   - process: the shared cards in the page's carousel, arrows under the cards
     on the right and dots on the left (as on the Maintenance page);
   - both calls to action: the AI Development banner (chunks 7, 7b);
   - "How fast you can launch": the deep violet band of the "Why choose"
     slider (chunks 22, 22b) with its three cards;
   - section headings one colour (their <span> tails are not coloured), as on
     the AI pages; FAQ unchanged.
   Band rhythm: story (white), needs more (tint), services (white), case
   studies (tint), process (white), timeline (violet), industries (tint),
   testimonials (white), blog (tint), FAQ (white). Same wording and pictures. */

/* headings: one colour */
.ai-dev-page.sds-page section:not(.faq_n_sec) .home_n_heading span { display: inline; color: inherit; font-weight: inherit; }

/* breadcrumb: the current page in ink, as on the other pages (the page's Figma rule made it purple, lime on hover) */
.ai-dev-page.sds-page .breadcrumb ul li:last-child a,
.ai-dev-page.sds-page .breadcrumb ul li:last-child a span,
.ai-dev-page.sds-page .breadcrumb ul li:last-child a:hover,
.ai-dev-page.sds-page .breadcrumb ul li:last-child a:hover span { color: var(--ai-ink); }

/* the services container is the site container (the page held it to 1246px); wider: the CONTAINER block at the end */
@media (max-width: 1440px) {
    .ai-dev-page.sds-page .sds-services .container.mini-container-inner { max-width: 1230px; }
}

/* HERO: wider measure for the long intro */
.ai-dev-page.sds-page .banner-sec.sds-hero h1 { max-width: 16em; }
.ai-dev-page.sds-page .banner-sec.sds-hero .banner-content p { max-width: 780px; }
@media (max-width: 1440px) {
    .ai-dev-page.sds-page .banner-sec.sds-hero .banner-content p { max-width: 760px; }
}

/* SHARED: the "Why Coding Sprint?" text + photo block, for the story and the two panels */
.ai-dev-page.sds-page .sds-story,
.ai-dev-page.sds-page .sam-why.sam-why-panel { position: relative; overflow: visible; padding: 100px 0; }
.ai-dev-page.sds-page .sds-story { background: #FFFFFF; }
.ai-dev-page.sds-page .sam-why.sam-why-panel.sam-why-reverse { background: var(--ai-tint); }
.ai-dev-page.sds-page .sam-why.sam-why-panel:not(.sam-why-reverse) { background: var(--ai-tint); }
.ai-dev-page.sds-page .sds-story .sds-story-row,
.ai-dev-page.sds-page .sam-why.sam-why-panel > .container > .row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 72px;
    align-items: start;
    min-height: 0;
    margin: 0;
    flex-direction: initial;
}
.ai-dev-page.sds-page .sds-story .sds-story-row > *,
.ai-dev-page.sds-page .sam-why.sam-why-panel > .container > .row > [class*="col-"] {
    display: block;
    flex: none;
    width: auto;
    max-width: none;
    min-width: 0;
    margin: 0;
    padding: 0;
}
/* the mirrored panel: photo left, text right */
.ai-dev-page.sds-page .sam-why.sam-why-panel.sam-why-reverse > .container > .row > [class*="col-"]:first-child { grid-column: 2; grid-row: 1; }
.ai-dev-page.sds-page .sam-why.sam-why-panel.sam-why-reverse > .container > .row > [class*="col-"]:last-child { grid-column: 1; grid-row: 1; }
/* the lime mark above each heading (decorative) */
.ai-dev-page.sds-page .sds-story .sds-story-text:before,
.ai-dev-page.sds-page .sam-why.sam-why-panel > .container > .row > [class*="col-"]:first-child:before {
    content: "";
    display: block;
    width: 44px;
    height: 4px;
    margin: 0 0 22px;
    border-radius: 2px;
    background: var(--ai-lime);
}
.ai-dev-page.sds-page .sds-story .home_n_heading,
.ai-dev-page.sds-page .sam-why.sam-why-panel .home_n_heading {
    margin: 0 0 18px;
    font-size: 42px;
    line-height: 1.14;
    font-weight: 500;
    letter-spacing: -.8px;
    color: var(--ai-ink);
}
.ai-dev-page.sds-page .sds-story .home_n_text,
.ai-dev-page.sds-page .sam-why.sam-why-panel .home_n_text { margin: 0; font-size: 18px; line-height: 1.65; color: var(--ai-body); }
.ai-dev-page.sds-page .sds-story .home_n_text + .home_n_text,
.ai-dev-page.sds-page .sam-why.sam-why-panel .home_n_text + .home_n_text { margin-top: 14px; }
/* the photo, framed, level with the heading (below its mark) */
.ai-dev-page.sds-page .sds-story .sds-story-img,
.ai-dev-page.sds-page .sam-why.sam-why-panel .sam-why-img {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    width: auto;
    max-width: none;
    margin: 26px 0 0;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 24px 48px rgba(44, 2, 58, .18);
}
.ai-dev-page.sds-page .sds-story .sds-story-img img,
.ai-dev-page.sds-page .sam-why.sam-why-panel .sam-why-img img { display: block; width: 100%; height: auto; border-radius: 0; object-fit: initial; }
/* the story's button: the shared main button */
.ai-dev-page.sds-page .sds-story a.banner_btn.sds-story-btn { margin-top: 32px; }
/* "Industries We Support": the open checklist (chunk 9b); the mark here is the lime-and-violet one,
   so the disc is painted by the row and the mark turned all lime (as chunk 31) */
.ai-dev-page.sds-page .sam-why.sam-why-panel .list-itme:nth-child(n) {
    position: relative;
    margin: 0;
    padding: 17px 0 17px 56px;
    border: 0;
    background: radial-gradient(circle at 18px 50%, var(--ai-deep) 17.5px, transparent 18.5px) no-repeat;
}
.ai-dev-page.sds-page .sam-why.sam-why-panel .home_n_text + .list-itme:nth-child(n) { margin-top: 26px; }
.ai-dev-page.sds-page .sam-why.sam-why-panel .list-itme + .home_n_text { margin-top: 26px; }
.ai-dev-page.sds-page .sam-why.sam-why-panel .list-itme + .list-itme:after {   /* faint line between rows (decorative) */
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 56px;
    border-top: 1px solid var(--ai-line);
}
.ai-dev-page.sds-page .sam-why.sam-why-panel .list-itme:nth-child(n):before {
    top: 50%;
    left: 0;
    width: 36px;
    height: 36px;
    margin-top: -18px;
    border: 0;
    border-radius: 50%;
    background-color: transparent;
    background-size: 20px auto;
    background-position: center;
    box-shadow: none;
    transform: none;
    filter: brightness(0) saturate(100%) invert(91%) sepia(16%) saturate(6596%) hue-rotate(11deg) brightness(91%) contrast(97%);
}
.ai-dev-page.sds-page .sam-why.sam-why-panel .list-itme h3 {
    margin: 0;
    font-family: "Rubik", sans-serif;
    font-size: 19px;
    line-height: 1.35;
    font-weight: 500;
    letter-spacing: -.1px;
    color: var(--ai-ink);
    transition: color .2s ease;
}
.ai-dev-page.sds-page .sam-why.sam-why-panel .list-itme:hover h3 { color: var(--ai-violet); }

/* SERVICES: the Benefits editorial split (chunk 4) */
.ai-dev-page.sds-page .why-coding-sprint.sds-services { padding: 100px 0; background: #FFFFFF; }
.ai-dev-page.sds-page .sds-services .container {
    display: grid;
    grid-template-columns: 400px minmax(0, 1fr);
    column-gap: 72px;
    align-items: start;
}
.ai-dev-page.sds-page .sds-services .heading2 {
    position: sticky;
    top: 156px;                       /* clears the fixed header */
    max-width: none;
    margin: 0;
    text-align: left;
}
.ai-dev-page.sds-page .sds-services .heading2:before {
    content: "";
    display: block;
    width: 44px;
    height: 4px;
    margin: 0 0 22px;
    border-radius: 2px;
    background: var(--ai-lime);
}
.ai-dev-page.sds-page .sds-services .heading2 h2 {
    margin: 0 0 18px;
    font-size: 42px;
    line-height: 1.14;
    font-weight: 500;
    letter-spacing: -.8px;
    color: var(--ai-ink);
    text-align: left;
}
.ai-dev-page.sds-page .sds-services .heading2 > p { max-width: none; margin: 0; font-size: 18px; line-height: 1.65; color: var(--ai-body); text-align: left; }
.ai-dev-page.sds-page .sds-services .row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(3, auto);
    grid-auto-flow: column;
    column-gap: 48px;
    margin: 0;
}
.ai-dev-page.sds-page .sds-services .row > [class*="col-"],
.ai-dev-page.sds-page .sds-services .margin-left-sec { display: contents; }
.ai-dev-page.sds-page .sds-services .list-itme:nth-child(n) { position: relative; margin: 0; padding: 30px 0 30px 70px; border: 0; }
.ai-dev-page.sds-page .sds-services .list-itme + .list-itme { border-top: 1px solid var(--ai-line); }
.ai-dev-page.sds-page .sds-services .list-itme:first-child { padding-top: 4px; }
.ai-dev-page.sds-page .sds-services .list-itme:last-child { padding-bottom: 0; }
.ai-dev-page.sds-page .sds-services .list-itme:before {   /* the existing chevron on a white tile */
    top: 30px;
    left: 0;
    width: 48px;
    height: 48px;
    border: 1px solid var(--ai-line);
    border-radius: 14px;
    background-color: #FFFFFF;
    background-size: 26px auto;
    background-position: center;
    box-shadow: 0 6px 16px rgba(44, 2, 58, .08);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.ai-dev-page.sds-page .sds-services .list-itme:first-child:before { top: 4px; }
.ai-dev-page.sds-page .sds-services .list-itme:hover:before { border-color: rgba(91, 3, 117, .32); box-shadow: 0 10px 22px rgba(91, 3, 117, .16); transform: translateY(-2px); }
.ai-dev-page.sds-page .sds-services .list-itme h3 { margin: 0 0 10px; font-family: "Rubik", sans-serif; font-size: 22px; line-height: 1.25; font-weight: 500; letter-spacing: -.2px; color: var(--ai-ink); }
.ai-dev-page.sds-page .sds-services .list-itme p { max-width: none; margin: 0; font-size: 16px; line-height: 1.7; color: var(--ai-body); }

/* CASE STUDIES: tint, as everywhere */

/* PROCESS ("From Product Idea to Scalable Software"): "this section need to same
   as Why choose Coding Sprint for artificial intelligence consulting services"
   (2026-10-14), so it is the AI pages' slider (chunks 22, 22b) value for value,
   as on the Maintenance page: deep violet band with the </> mark, centred white
   heading, white cards (icon on a soft tile in brand violet), dots on the left,
   arrows on the right. The call to action that sits inside this section stands
   on white like every other one: the band ends under the arrows and a white
   layer (full width, behind the panel) carries the panel; the next band is
   white too, so it runs straight on. */
.ai-dev-page.sds-page .sds-process-sec {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 100px 0 0;
    background: linear-gradient(120deg, #1E0228 0%, var(--ai-deep) 45%, #4A0360 100%);
}
.ai-dev-page.sds-page .sds-process-sec:before,
.ai-dev-page.sds-page .sds-process-sec:after {               /* the </> mark (decorative), as chunk 22b */
    content: "";
    position: absolute;
    z-index: -1;
    -webkit-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 400'><g fill='none' stroke='white' stroke-width='22' stroke-linecap='round' stroke-linejoin='round'><path d='M190 80 L60 200 L190 320'/><path d='M410 80 L540 200 L410 320'/><path d='M350 50 L250 350'/></g></svg>") center / contain no-repeat;
    mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 400'><g fill='none' stroke='white' stroke-width='22' stroke-linecap='round' stroke-linejoin='round'><path d='M190 80 L60 200 L190 320'/><path d='M410 80 L540 200 L410 320'/><path d='M350 50 L250 350'/></g></svg>") center / contain no-repeat;
    pointer-events: none;
}
.ai-dev-page.sds-page .sds-process-sec:before { top: 120px; right: -60px; width: 640px; height: 427px; background: rgba(255, 255, 255, .05); }
.ai-dev-page.sds-page .sds-process-sec:after { top: 48px; left: -40px; width: 240px; height: 160px; background: rgba(194, 201, 4, .10); }
.ai-dev-page.sds-page .sds-process-sec .heading2 { max-width: 1040px; margin: 0 auto 48px; padding: 0; text-align: center; }
.ai-dev-page.sds-page .sds-process-sec .heading2 h2 { margin: 0; color: #FFFFFF; text-align: center; }
/* the carousel: room under the cards for the dots and arrows; no layer of its own (Owl sets
   z-index 1), so the arrows blend with the band */
.ai-dev-page.sds-page .sds-process-sec .sds-process-carousel { position: relative; z-index: auto; width: auto; margin: 0; padding: 6px 0 84px; }
.ai-dev-page.sds-page .sds-process-sec .sds-process-carousel .owl-stage-outer { margin: -12px -20px -44px; padding: 12px 20px 44px; }   /* room for the hover lift and shadow; the next card waits 24px away, so it stays hidden */
/* the cards */
.ai-dev-page.sds-page .sds-process-sec .sds-process-carousel .full-content-column.new-column-content,
.ai-dev-page.sds-page .sds-process-sec .sds-process-carousel .full-content-column.new-column-content:hover {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 32px 28px;
    text-align: left;
    background: #FFFFFF;
    border: 0;
    border-radius: 20px;
    box-shadow: 0 18px 30px -22px rgba(0, 0, 0, .55);
    transition: transform .3s ease, box-shadow .3s ease;
}
.ai-dev-page.sds-page .sds-process-sec .sds-process-carousel .full-content-column.new-column-content:hover { transform: translateY(-4px); box-shadow: 0 24px 36px -22px rgba(0, 0, 0, .65); }
.ai-dev-page.sds-page .sds-process-sec .full-content-column:before { display: none; }   /* the services cards' hover bar */
.ai-dev-page.sds-page .sds-process-sec .full-content-column .figure-box { width: 80px; height: 80px; margin: 0 0 24px; padding: 18px; border-radius: 20px; }
.ai-dev-page.sds-page .sds-process-sec .figure-box img { width: 100%; height: 100%; }
.ai-dev-page.sds-page .sds-process-sec .new-column-content h3 { margin: 0 0 10px; font-size: 21px; line-height: 1.3; font-weight: 500; letter-spacing: -.2px; text-align: left; color: var(--ai-ink); }
.ai-dev-page.sds-page .sds-process-sec .new-column-content p { margin: 0; font-size: 16px; line-height: 1.7; text-align: left; color: var(--ai-body); }
/* dots under the cards on the left (turned on by assets/js/ai-pages.js) */
.ai-dev-page.sds-page .sds-process-sec .sds-process-carousel .owl-dots { position: absolute; left: 0; bottom: 20px; display: flex; align-items: center; gap: 8px; margin: 0; line-height: 0; }
.ai-dev-page.sds-page .sds-process-sec .sds-process-carousel .owl-dots.disabled { display: none; }
.ai-dev-page.sds-page .sds-process-sec .sds-process-carousel .owl-dots .owl-dot { display: block; width: auto; height: auto; margin: 0; padding: 0; border: 0; background: none; }
.ai-dev-page.sds-page .sds-process-sec .sds-process-carousel .owl-dots .owl-dot span {
    display: block;
    width: 8px;
    height: 8px;
    margin: 0;
    border-radius: 999px;
    background: #FFFFFF;
    opacity: .35;
    transition: width .3s ease, opacity .3s ease, background-color .3s ease;
}
.ai-dev-page.sds-page .sds-process-sec .sds-process-carousel .owl-dots .owl-dot.active span { width: 30px; opacity: 1; background: var(--ai-lime); }
/* arrows under the cards on the right (after the cards in the markup, so on top without a z-index) */
.ai-dev-page.sds-page .sds-process-sec .sds-process-carousel .owl-nav { position: absolute; right: 0; bottom: 0; display: flex; gap: 10px; margin: 0; }
.ai-dev-page.sds-page .sds-process-sec .sds-process-carousel .owl-nav button.owl-prev,
.ai-dev-page.sds-page .sds-process-sec .sds-process-carousel .owl-nav button.owl-next {
    position: static;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin: 0;
    padding: 0;
    transform: none;
    border: 1px solid rgba(255, 255, 255, .30);
    border-radius: 50%;
    background: transparent !important;   /* the page's own style paints them #fff !important */
    box-shadow: none;
    transition: background-color .25s ease, border-color .25s ease;
}
.ai-dev-page.sds-page .sds-process-sec .sds-process-carousel .owl-nav button img { width: 38px; height: 38px; filter: invert(1) brightness(1.25); mix-blend-mode: screen; }   /* the image's white disc drops out, its chevron turns light */
.ai-dev-page.sds-page .sds-process-sec .sds-process-carousel .owl-nav button:hover { background: var(--ai-lime) !important; border-color: var(--ai-lime); }
.ai-dev-page.sds-page .sds-process-sec .sds-process-carousel .owl-nav button:hover img { filter: none; mix-blend-mode: multiply; }
/* the call to action inside: on white. The white gap under the panel is inside this section,
   so the panel's shadow is not cut off by the band's overflow; the timeline after it starts
   with no top padding of its own, so the gap stays one section padding. */
.ai-dev-page.sds-page .sds-process-sec .sds-cta { position: relative; margin-top: 100px; padding: 100px 0; }
.ai-dev-page.sds-page .sds-process-sec + .sds-timeline { margin-top: -1px; padding-top: 1px; }   /* overlaps the band's last pixel: no grey seam where the two meet on a fraction of a pixel */
.ai-dev-page.sds-page .sds-process-sec .sds-cta:before {   /* the white layer behind it, full width (decorative) */
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: -100vmax;
    right: -100vmax;
    background: #FFFFFF;
}
@media (max-width: 991px) {
    .ai-dev-page.sds-page .sds-process-sec { padding: 64px 0 0; }
    .ai-dev-page.sds-page .sds-process-sec .heading2 { margin-bottom: 36px; }
    .ai-dev-page.sds-page .sds-process-sec .sds-cta { margin-top: 64px; padding: 64px 0; }
    .ai-dev-page.sds-page .sds-process-sec:before { top: 80px; right: -80px; width: 420px; height: 280px; }
    .ai-dev-page.sds-page .sds-process-sec:after { top: 20px; left: -40px; width: 160px; height: 107px; }
}
@media (max-width: 575px) {
    .ai-dev-page.sds-page .sds-process-sec { padding: 48px 0 0; }
    .ai-dev-page.sds-page .sds-process-sec .sds-cta { margin-top: 48px; padding: 48px 0; }
    .ai-dev-page.sds-page .sds-process-sec .sds-process-carousel .full-content-column.new-column-content,
    .ai-dev-page.sds-page .sds-process-sec .sds-process-carousel .full-content-column.new-column-content:hover { padding: 26px 22px; border-radius: 18px; }
    .ai-dev-page.sds-page .sds-process-sec .full-content-column .figure-box { width: 68px; height: 68px; padding: 15px; margin-bottom: 20px; border-radius: 18px; }
    .ai-dev-page.sds-page .sds-process-sec .new-column-content h3 { font-size: 19px; }
    .ai-dev-page.sds-page .sds-process-sec:before { top: 60px; right: -70px; width: 300px; height: 200px; }
    .ai-dev-page.sds-page .sds-process-sec:after { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .ai-dev-page.sds-page .sds-process-sec .sds-process-carousel .full-content-column.new-column-content:hover { transform: none; }
}

/* CALLS TO ACTION (inside the process and industries sections): the AI Development banner */
.ai-dev-page.sds-page .sds-cta { padding: 64px 0 0; background: none; }
.ai-dev-page.sds-page .sds-cta .row.cta-row {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 56px;
    align-items: center;
    max-width: none;
    margin: 0;
    padding: 60px 64px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 24px;
    overflow: hidden;
    background:
        linear-gradient(120deg, rgba(23, 3, 31, .96) 0%, rgba(44, 2, 58, .94) 55%, rgba(62, 5, 84, .92) 100%),
        url(/assets/images/gradient@2x.webp) center / cover no-repeat #2C023A;   /* AI Development's banner picture */
    box-shadow: 0 24px 48px rgba(44, 2, 58, .22);
}
.ai-dev-page.sds-page .sds-cta .row.cta-row > [class*="col-"] { width: auto; max-width: none; flex: none; padding: 0; }
.ai-dev-page.sds-page .sds-cta .heading-cta { display: block; color: #FFFFFF; }
.ai-dev-page.sds-page .sds-cta .heading-cta:before {   /* the short lime mark the other headings carry */
    content: "";
    display: block;
    width: 44px;
    height: 4px;
    margin: 0 0 22px;
    border-radius: 2px;
    background: var(--ai-lime);
}
.ai-dev-page.sds-page .sds-cta .heading-cta h2 {
    max-width: 880px;
    margin: 0 0 18px;
    font-family: "Rubik", sans-serif;
    font-size: 42px;
    line-height: 1.14;
    font-weight: 500;
    letter-spacing: -.8px;
    color: #FFFFFF;
}
.ai-dev-page.sds-page .sds-cta .heading-cta p {
    max-width: 880px;
    margin: 0;
    font-size: 18px;
    line-height: 1.65;
    letter-spacing: 0;
    color: rgba(255, 255, 255, .82);
}
.ai-dev-page.sds-page .sds-cta .desktop-right {   /* the button's own column: the chip drawing hangs off it */
    position: relative;
    isolation: isolate;
    display: flex;
    justify-content: flex-end;
    margin: 0;
}
.ai-dev-page.sds-page .sds-cta .desktop-right:before {   /* pins and traces (decorative) */
    content: "";
    position: absolute;
    z-index: -1;
    top: 50%;
    right: -200px;
    left: -200px;
    height: 360px;
    transform: translateY(-50%);
    background:
        url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 560 360'><g fill='none' stroke='rgba(255,255,255,.2)' stroke-width='1.4' stroke-linejoin='round'><path d='M216 144 V128 L176 88 V82'/><path d='M216 216 V232 L176 272 V278'/><path d='M248 144 V128 L230 110 V96'/><path d='M248 216 V232 L230 250 V264'/><path d='M280 144 V86'/><path d='M280 216 V274'/><path d='M312 144 V128 L330 110 V96'/><path d='M312 216 V232 L330 250 V264'/><path d='M344 144 V128 L384 88 V82'/><path d='M344 216 V232 L384 272 V278'/></g><circle cx='176' cy='82' r='4.5' fill='%232C023A' stroke='rgba(255,255,255,.55)' stroke-width='1.5'/><circle cx='176' cy='278' r='4.5' fill='%232C023A' stroke='rgba(255,255,255,.55)' stroke-width='1.5'/><circle cx='230' cy='96' r='4.5' fill='%232C023A' stroke='rgba(255,255,255,.55)' stroke-width='1.5'/><circle cx='230' cy='264' r='4.5' fill='%232C023A' stroke='rgba(255,255,255,.55)' stroke-width='1.5'/><circle cx='280' cy='86' r='5.5' fill='%23C2C904'/><circle cx='280' cy='274' r='5.5' fill='%23C2C904'/><circle cx='330' cy='96' r='4.5' fill='%232C023A' stroke='rgba(255,255,255,.55)' stroke-width='1.5'/><circle cx='330' cy='264' r='4.5' fill='%232C023A' stroke='rgba(255,255,255,.55)' stroke-width='1.5'/><circle cx='384' cy='82' r='4.5' fill='%232C023A' stroke='rgba(255,255,255,.55)' stroke-width='1.5'/><circle cx='384' cy='278' r='4.5' fill='%232C023A' stroke='rgba(255,255,255,.55)' stroke-width='1.5'/></svg>") center / 560px 360px no-repeat,
        url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 360'><g fill='none' stroke='rgba(255,255,255,.2)' stroke-width='1.4' stroke-linejoin='round'><path d='M10 170 H38 L54 154 H200'/><path d='M10 190 H38 L54 206 H200'/></g></svg>") right center / 200px 360px no-repeat;
    pointer-events: none;
}
.ai-dev-page.sds-page .sds-cta .desktop-right:after {    /* the outline hugging the button (decorative) */
    content: "";
    position: absolute;
    z-index: -1;
    inset: -10px;
    border: 1.2px solid rgba(255, 255, 255, .18);
    border-radius: 999px;
    pointer-events: none;
}
.ai-dev-page.sds-page .sds-cta a.button.main-btn.btn.bg-white.tblack { margin: 0; white-space: nowrap; }
@media (max-width: 1440px) {
    .ai-dev-page.sds-page .sds-cta .heading-cta h2 { font-size: 38px; }
    .ai-dev-page.sds-page .sds-cta .heading-cta p { font-size: 17px; }
}
@media (max-width: 1370px) {
    .ai-dev-page.sds-page .sds-cta .row.cta-row { padding: 52px 48px; column-gap: 40px; }
}
@media (max-width: 991px) {
    .ai-dev-page.sds-page .sds-cta .heading-cta h2 { font-size: 32px; letter-spacing: -.5px; }
    .ai-dev-page.sds-page .sds-cta .row.cta-row { grid-template-columns: minmax(0, 1fr); padding: 44px 36px 48px; border-radius: 20px; }
    .ai-dev-page.sds-page .sds-cta .desktop-right { justify-content: flex-start; margin-top: 28px; }
    .ai-dev-page.sds-page .sds-cta .desktop-right:before,
    .ai-dev-page.sds-page .sds-cta .desktop-right:after { display: none; }
    .ai-dev-page.sds-page .sds-cta a.button.main-btn.btn.bg-white.tblack { white-space: normal; }
}
@media (max-width: 575px) {
    .ai-dev-page.sds-page .sds-cta .heading-cta h2 { font-size: 27px; line-height: 1.2; }
    .ai-dev-page.sds-page .sds-cta .heading-cta p { font-size: 16px; }
    .ai-dev-page.sds-page .sds-cta .row.cta-row { padding: 36px 24px 40px; border-radius: 16px; }
    .ai-dev-page.sds-page .sds-cta .desktop-right { margin-top: 24px; }
}

/* TIMELINE ("How fast you can launch with Coding Sprint"): "change the design
   this section" (2026-10-14; it was the violet band, which the process above
   now has). A milestone track on white: a violet-to-lime line runs across with
   a node above each card, the three timelines as soft cards (white and lifted
   on hover). One column below 992px, the track running down the left through
   the nodes. Same wording. */
.ai-dev-page.sds-page .sds-timeline { position: relative; isolation: auto; overflow: visible; padding: 100px 0; background: #FFFFFF; }
.ai-dev-page.sds-page .sds-timeline:before,
.ai-dev-page.sds-page .sds-timeline:after { content: none; }
.ai-dev-page.sds-page .sds-timeline .heading2 { max-width: 1040px; margin: 0 auto 56px; text-align: center; }
.ai-dev-page.sds-page .sds-timeline .heading2:before { content: ""; display: block; width: 44px; height: 4px; margin: 0 auto 22px; border-radius: 2px; background: var(--ai-lime); }
.ai-dev-page.sds-page .sds-timeline .heading2 h2 { max-width: none; margin: 0 0 18px; font-size: 42px; line-height: 1.14; font-weight: 500; letter-spacing: -.8px; color: var(--ai-ink); text-align: center; }
.ai-dev-page.sds-page .sds-timeline .heading2 > p.width-83 { width: auto; max-width: 920px; margin: 0 auto; font-size: 18px; line-height: 1.65; color: var(--ai-body); text-align: center; }
.ai-dev-page.sds-page .sds-timeline .sds-timeline-grid { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; max-width: none; margin: 0; padding: 52px 0 0; }
.ai-dev-page.sds-page .sds-timeline .sds-timeline-grid:before {   /* the track, from the first node to the last (decorative) */
    content: "";
    position: absolute;
    top: 11px;
    left: calc((100% - 48px) / 6);
    right: calc((100% - 48px) / 6);
    height: 2px;
    background: linear-gradient(90deg, rgba(91, 3, 117, .55), rgba(194, 201, 4, .95));
}
.ai-dev-page.sds-page .sds-timeline .sds-timeline-card {
    position: relative;
    margin: 0;
    padding: 32px 28px;
    text-align: left;
    background: var(--ai-tint);
    border: 0;
    border-radius: 20px;
    box-shadow: none;
    transition: background-color .3s ease, box-shadow .3s ease, transform .3s ease;
}
.ai-dev-page.sds-page .sds-timeline .sds-timeline-card:hover { background: #FFFFFF; box-shadow: var(--ai-shadow-hover); transform: translateY(-4px); }
.ai-dev-page.sds-page .sds-timeline .sds-timeline-card:before {   /* the node on the track (decorative) */
    content: "";
    position: absolute;
    z-index: 1;
    top: -52px;
    left: 50%;
    width: 24px;
    height: 24px;
    margin-left: -12px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--ai-lime) 0 5px, #FFFFFF 5.5px);
    box-shadow: 0 0 0 2px var(--ai-violet), 0 0 0 7px #FFFFFF;
}
.ai-dev-page.sds-page .sds-timeline .sds-timeline-card h3 { margin: 0 0 10px; font-family: "Rubik", sans-serif; font-size: 22px; line-height: 1.25; font-weight: 500; letter-spacing: -.2px; text-align: left; color: var(--ai-ink); }
.ai-dev-page.sds-page .sds-timeline .sds-timeline-card p { margin: 0; font-size: 16px; line-height: 1.7; text-align: left; color: var(--ai-body); }
@media (max-width: 1370px) {
    .ai-dev-page.sds-page .sds-timeline .sds-timeline-card h3 { font-size: 20px; }
}
@media (max-width: 991px) {
    .ai-dev-page.sds-page .sds-timeline .heading2 { margin-bottom: 40px; }
    .ai-dev-page.sds-page .sds-timeline .sds-timeline-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 0 0 0 44px; }
    .ai-dev-page.sds-page .sds-timeline .sds-timeline-grid:before { display: none; }
    .ai-dev-page.sds-page .sds-timeline .sds-timeline-card:before { top: 34px; left: -44px; margin-left: 0; }
    .ai-dev-page.sds-page .sds-timeline .sds-timeline-card:not(:last-child):after {   /* the track down to the next node (decorative) */
        content: "";
        position: absolute;
        top: 46px;
        bottom: -66px;              /* the next node is the 20px gap + 46px further down */
        left: -33px;
        width: 2px;
        background: linear-gradient(180deg, rgba(91, 3, 117, .55), rgba(194, 201, 4, .95));
    }
}
@media (max-width: 575px) {
    .ai-dev-page.sds-page .sds-timeline .sds-timeline-card:before { top: 28px; }
    .ai-dev-page.sds-page .sds-timeline .sds-timeline-card:not(:last-child):after { top: 40px; bottom: -60px; }
}
@media (prefers-reduced-motion: reduce) {
    .ai-dev-page.sds-page .sds-timeline .sds-timeline-card { transition: none; }
    .ai-dev-page.sds-page .sds-timeline .sds-timeline-card:hover { transform: none; }
}

@media (max-width: 1549px) {
    /* services: one ruled column beside the heading */
    .ai-dev-page.sds-page .sds-services .container { grid-template-columns: minmax(300px, 36%) minmax(0, 1fr); column-gap: 56px; }
    .ai-dev-page.sds-page .sds-services .row { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-flow: row; }
    .ai-dev-page.sds-page .sds-services .row > [class*="col-"] + [class*="col-"] .list-itme:first-child { padding-top: 30px; border-top: 1px solid var(--ai-line); }
    .ai-dev-page.sds-page .sds-services .row > [class*="col-"] + [class*="col-"] .list-itme:first-child:before { top: 30px; }
    .ai-dev-page.sds-page .sds-services .row > [class*="col-"]:first-child .list-itme:last-child { padding-bottom: 30px; }
    .ai-dev-page.sds-page .sds-services .list-itme p { max-width: 640px; }
}
@media (max-width: 1440px) {
    .ai-dev-page.sds-page .sds-story .home_n_heading,
    .ai-dev-page.sds-page .sam-why.sam-why-panel .home_n_heading,
    .ai-dev-page.sds-page .sds-services .heading2 h2,
    .ai-dev-page.sds-page .sds-timeline .heading2 h2 { font-size: 38px; }
    .ai-dev-page.sds-page .sds-story .home_n_text,
    .ai-dev-page.sds-page .sam-why.sam-why-panel .home_n_text,
    .ai-dev-page.sds-page .sds-services .heading2 > p,
    .ai-dev-page.sds-page .sds-timeline .heading2 > p.width-83 { font-size: 17px; }
}
@media (max-width: 1370px) {
    .ai-dev-page.sds-page .sds-story .sds-story-row,
    .ai-dev-page.sds-page .sam-why.sam-why-panel > .container > .row { column-gap: 56px; }
    .ai-dev-page.sds-page .sam-why.sam-why-panel .list-itme h3 { font-size: 18px; }
    .ai-dev-page.sds-page .sds-services .list-itme h3,
    .ai-dev-page.sds-page .sds-process-sec .new-column-content h3 { font-size: 20px; }
}
@media (max-width: 991px) {
    .ai-dev-page.sds-page .sds-story,
    .ai-dev-page.sds-page .sam-why.sam-why-panel,
    .ai-dev-page.sds-page .why-coding-sprint.sds-services,
    .ai-dev-page.sds-page .sds-timeline { padding: 64px 0; }
    .ai-dev-page.sds-page .sds-story .sds-story-row,
    .ai-dev-page.sds-page .sam-why.sam-why-panel > .container > .row { grid-template-columns: minmax(0, 1fr); row-gap: 36px; }
    .ai-dev-page.sds-page .sam-why.sam-why-panel.sam-why-reverse > .container > .row > [class*="col-"]:first-child { grid-column: 1; grid-row: 1; }
    .ai-dev-page.sds-page .sam-why.sam-why-panel.sam-why-reverse > .container > .row > [class*="col-"]:last-child { grid-column: 1; grid-row: 2; }
    .ai-dev-page.sds-page .sds-story .sds-story-img,
    .ai-dev-page.sds-page .sam-why.sam-why-panel .sam-why-img { margin-top: 0; }
    .ai-dev-page.sds-page .sds-story .home_n_heading,
    .ai-dev-page.sds-page .sam-why.sam-why-panel .home_n_heading,
    .ai-dev-page.sds-page .sds-services .heading2 h2,
    .ai-dev-page.sds-page .sds-timeline .heading2 h2 { font-size: 32px; letter-spacing: -.5px; }
    .ai-dev-page.sds-page .sds-services .container { display: block; }
    .ai-dev-page.sds-page .sds-services .heading2 { position: static; margin-bottom: 36px; }
    .ai-dev-page.sds-page .sds-services .list-itme p { max-width: none; }
    .ai-dev-page.sds-page .sds-process-sec .heading2,
    .ai-dev-page.sds-page .sds-timeline .heading2 { margin-bottom: 36px; }
    .ai-dev-page.sds-page .sds-cta { padding-top: 48px; }
    .ai-dev-page.sds-page .sds-timeline:before { right: -80px; width: 420px; height: 280px; }
    .ai-dev-page.sds-page .sds-timeline:after { top: 20px; left: -40px; width: 160px; height: 107px; }
}
@media (max-width: 575px) {
    .ai-dev-page.sds-page .sds-story,
    .ai-dev-page.sds-page .sam-why.sam-why-panel,
    .ai-dev-page.sds-page .why-coding-sprint.sds-services,
    .ai-dev-page.sds-page .sds-timeline { padding: 48px 0; }
    .ai-dev-page.sds-page .sds-story .home_n_heading,
    .ai-dev-page.sds-page .sam-why.sam-why-panel .home_n_heading,
    .ai-dev-page.sds-page .sds-services .heading2 h2,
    .ai-dev-page.sds-page .sds-timeline .heading2 h2 { font-size: 27px; line-height: 1.2; }
    .ai-dev-page.sds-page .sds-story .home_n_text,
    .ai-dev-page.sds-page .sam-why.sam-why-panel .home_n_text,
    .ai-dev-page.sds-page .sds-services .heading2 > p,
    .ai-dev-page.sds-page .sds-timeline .heading2 > p.width-83 { font-size: 16px; }
    .ai-dev-page.sds-page .sds-story .sds-story-img,
    .ai-dev-page.sds-page .sam-why.sam-why-panel .sam-why-img { border-radius: 16px; }
    .ai-dev-page.sds-page .sam-why.sam-why-panel .list-itme:nth-child(n) { padding: 15px 0 15px 50px; background: radial-gradient(circle at 16px 50%, var(--ai-deep) 15.5px, transparent 16.5px) no-repeat; }
    .ai-dev-page.sds-page .sam-why.sam-why-panel .list-itme:nth-child(n):before { width: 32px; height: 32px; margin-top: -16px; background-size: 18px auto; }
    .ai-dev-page.sds-page .sam-why.sam-why-panel .list-itme + .list-itme:after { left: 50px; }
    .ai-dev-page.sds-page .sam-why.sam-why-panel .list-itme h3 { font-size: 17px; }
    .ai-dev-page.sds-page .sds-services .list-itme:nth-child(n) { padding-left: 60px; }
    .ai-dev-page.sds-page .sds-services .list-itme:before { width: 42px; height: 42px; border-radius: 12px; background-size: 22px auto; }
    .ai-dev-page.sds-page .sds-services .list-itme h3 { font-size: 20px; }
    .ai-dev-page.sds-page .sds-process-sec .full-content-column .figure-box { width: 72px; height: 72px; padding: 12px; margin-bottom: 20px; }
    .ai-dev-page.sds-page .sds-timeline .sds-timeline-card { padding: 26px 22px; border-radius: 18px; }
    .ai-dev-page.sds-page .sds-timeline .sds-timeline-card h3 { font-size: 19px; }
    .ai-dev-page.sds-page .sds-timeline:before { right: -70px; width: 300px; height: 200px; }
    .ai-dev-page.sds-page .sds-timeline:after { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .ai-dev-page.sds-page .sds-services .list-itme:before,
    .ai-dev-page.sds-page .sds-timeline .sds-timeline-card,
    .ai-dev-page.sds-page .sam-why.sam-why-panel .list-itme h3 { transition: none; }
    .ai-dev-page.sds-page .sds-services .list-itme:hover:before,
    .ai-dev-page.sds-page .sds-timeline .sds-timeline-card:hover { transform: none; }
}

/* ==========================================================================
   34. CONTAINER: every section's content on one container
   "every section content should be in the consistant container" (2026-10-14).
   The header and the shared sections (case studies, testimonials, news, FAQ,
   contact, footer) take style.css's own measurements; each page's own
   sections and the breadcrumb kept the plain .container, so they stood 29px
   wider at 1920, up to 68px narrower between 1441 and 1549px, and 5px wider
   on phones.
   Same numbers as style.css's shared-section rules; the sections that already
   have them are left alone.
   ========================================================================== */
@media (min-width: 1441px) and (max-width: 1549px) {
    .ai-dev-page section:not(.cs-sec, .testimonials, .news-sec, .faq_n_sec, .contact-se, .footer-sec) .container,
    .ai-dev-page .breadcrumb > .container { width: calc(100% - 120px); max-width: 1450px; }
}
@media (min-width: 1550px) {
    .ai-dev-page section:not(.cs-sec, .testimonials, .news-sec, .faq_n_sec, .contact-se, .footer-sec) .container,
    .ai-dev-page .breadcrumb > .container { max-width: 1392px; }
}
@media (max-width: 767px) {
    .ai-dev-page section:not(.cs-sec, .testimonials, .news-sec, .faq_n_sec, .contact-se, .footer-sec) .container,
    .ai-dev-page .breadcrumb > .container { padding-left: 15px; padding-right: 15px; }
    .ai-dev-page .ai-vision .container:before,
    .ai-dev-page .ai-vision .container:after { left: 15px; right: 15px; }   /* the panel's layers follow the gutter */
}

/* ==========================================================================
   35. PHOTO CARDS (Mobile App Development: "We use next-gen technologies")
   Three cards, each with its own photo set inline on the card and a black
   outline icon. Built from the finished parts: the services card (padding,
   radius, hover lift, violet-to-lime hover rule) and its icon tile (chunk 25),
   with the photo kept under a light violet veil (the photos are already dark
   in the files) and a deeper fade behind the text. The veil is an inset shadow: it paints over the photo and under the text,
   and leaves :before (hover rule) and :after (icon tile) free; a background
   layer here would replace the inline photo. White band: the sections either
   side are tinted. The "Why Coding Sprint?" violet band (chunk 28) shares the
   section classes, so its band, marks and heading colours are undone here.
   Same photos, icons and wording.
   ========================================================================== */
.ai-dev-page .expert-coders-sec:is(.bg-offwhite, .bg-offwhiteW, :has(.list-coding)):has(.tech_build) { background: #FFFFFF; }
.ai-dev-page .expert-coders-sec:is(.bg-offwhite, .bg-offwhiteW, :has(.list-coding)):has(.tech_build):before,
.ai-dev-page .expert-coders-sec:is(.bg-offwhite, .bg-offwhiteW, :has(.list-coding)):has(.tech_build):after { content: none; }   /* the </> marks of the violet band */
.ai-dev-page .expert-coders-sec:is(.bg-offwhite, .bg-offwhiteW, :has(.list-coding)):has(.tech_build) .heading2 h2 { color: var(--ai-ink); }
.ai-dev-page .expert-coders-sec:is(.bg-offwhite, .bg-offwhiteW, :has(.list-coding)):has(.tech_build) .heading2 > p:is(.width-83, .width-83W, :not([class])) { color: var(--ai-body); }
.ai-dev-page .expert-coders-sec .full-content-column.tech_build {
    color: #FFFFFF;
    text-align: left !important;          /* the card carries Bootstrap's .text-center (!important); left as every card */
    background-color: var(--ai-deep);
    background-position: center;
    background-size: cover;
    border-color: transparent;
    box-shadow: inset 0 0 0 100vmax rgba(91, 3, 117, .26), inset 0 -220px 150px -70px rgba(22, 3, 33, .62), var(--ai-shadow);
}
.ai-dev-page .expert-coders-sec .full-content-column.tech_build:hover {
    border-color: transparent;
    box-shadow: inset 0 0 0 100vmax rgba(91, 3, 117, .16), inset 0 -220px 150px -70px rgba(22, 3, 33, .62), var(--ai-shadow-hover);
}
.ai-dev-page .expert-coders-sec .full-content-column.tech_build > img:first-child { background: none; border-radius: 0; }   /* the site's white disc; the tile is the card's :after */
.ai-dev-page .expert-coders-sec .full-content-column.tech_build:has(> img:first-child):after { background: #FFFFFF; }
.ai-dev-page .expert-coders-sec .full-content-column.tech_build:hover > img:first-child { filter: brightness(0) saturate(100%) invert(16%) sepia(22%) saturate(7395%) hue-rotate(272deg) brightness(89%) contrast(122%); }   /* stays violet */
.ai-dev-page .expert-coders-sec .full-content-column.tech_build:has(> img:first-child):hover:after { background: var(--ai-lime); }
.ai-dev-page .expert-coders-sec .full-content-column.tech_build h3 { color: #FFFFFF; }
.ai-dev-page .expert-coders-sec .full-content-column.tech_build p { color: rgba(255, 255, 255, .84); }
.ai-dev-page .expert-coders-sec .full-content-column.tech_build > :last-child { margin-bottom: 0; }
/* "check spacing": the cards' row carries the site's .padd-60 (40px above and below, 60px on top on
   phones), which left 136px under the cards against the section's 96. The gap above the cards is the
   row's margin, as in every services section. */
.ai-dev-page .expert-coders-sec .row.padd-60 { padding-top: 0; padding-bottom: 0; }
/* the three cards are as tall as the tallest: the title and text sit at the foot of each card, so every
   card keeps its padding top and bottom and the photo shows in between */
.ai-dev-page .expert-coders-sec .full-content-column.tech_build { display: flex; flex-direction: column; }
.ai-dev-page .expert-coders-sec .full-content-column.tech_build > h3 { margin-top: auto; }
/* "Why choose" cards (chunk 28) with a title above the text (Mobile App): the site indents it 30px;
   set as the titles on the other violet-band cards */
.ai-dev-page .expert-coders-sec:is(.bg-offwhite, .bg-offwhiteW, :has(.list-coding)) .list-cont h3 {
    margin: 0 0 10px;
    padding: 0;
    font-family: "Rubik", sans-serif;
    font-size: 21px;
    line-height: 1.3;
    font-weight: 500;
    letter-spacing: -.2px;
    text-align: left;
    color: var(--ai-ink);
}
@media (max-width: 575px) {
    .ai-dev-page .expert-coders-sec:is(.bg-offwhite, .bg-offwhiteW, :has(.list-coding)) .list-cont h3 { font-size: 19px; }
}

/* ==========================================================================
   36. ERP: the process as step cards
   "Custom ERP modules" and "Our ERP development process" sit one after the
   other; in the same ruled list they read as one section (on AI Chatbot:
   "two sections are same design? can we make differ?"). The process takes the
   finished step cards (AI Chatbot roadmap, Bespoke benefits, six at three
   across): heading centred, white cards with the chevron on a white tile.
   As there, white cards on the tinted band, so the two bands swap: the
   modules list turns white (the strip under the call to action follows) and
   the process band is tinted. Same steps, wording and order (the markup
   lists 1-3 and 4-6 in two columns, which the grid reads row by row).
   ========================================================================== */
.ai-dev-page:is(.erp-page, .mvp-page) .why-coding-sprint.bgilight-grey.padd-60 { background: #FFFFFF; }
.ai-dev-page:is(.erp-page, .mvp-page) .cta-inner:is(.cta-ai, :where(.hire-dev-page .cta-inner)):has(+ .why-coding-sprint.padd-60) { --cta2-bottom: #FFFFFF; }
.ai-dev-page:is(.erp-page, .mvp-page) .why-coding-sprint.padd-60:not(.bgilight-grey) { background: var(--ai-tint); }
.ai-dev-page:is(.erp-page, .mvp-page) .why-coding-sprint.padd-60:not(.bgilight-grey) .container { display: block; }
.ai-dev-page:is(.erp-page, .mvp-page) .why-coding-sprint.padd-60:not(.bgilight-grey) .heading2 {
    position: static;
    max-width: 920px;
    margin: 0 auto;
    text-align: center;
}
.ai-dev-page:is(.erp-page, .mvp-page) .why-coding-sprint.padd-60:not(.bgilight-grey) .heading2:before { margin-left: auto; margin-right: auto; }
.ai-dev-page:is(.erp-page, .mvp-page) .why-coding-sprint.padd-60:not(.bgilight-grey) .heading2 h2 { text-align: center; }
.ai-dev-page:is(.erp-page, .mvp-page) .why-coding-sprint.padd-60:not(.bgilight-grey) .heading2 > p:is(.width-83, .width-83W, :not([class])) { margin: 0 auto; text-align: center; }
.ai-dev-page:is(.erp-page, .mvp-page) .why-coding-sprint.padd-60:not(.bgilight-grey) .row,
.ai-dev-page:is(.erp-page, .mvp-page) .why-coding-sprint.padd-60:not(.bgilight-grey) .row:has(> [class*="col-"]:first-child) {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: none;
    grid-auto-flow: row;
    gap: 28px;
    margin: 56px 0 0;
}
.ai-dev-page:is(.erp-page, .mvp-page) .why-coding-sprint.padd-60:not(.bgilight-grey) .list-itme,
.ai-dev-page:is(.erp-page, .mvp-page) .why-coding-sprint.padd-60:not(.bgilight-grey) .list-itme + .list-itme,
.ai-dev-page:is(.erp-page, .mvp-page) .why-coding-sprint.padd-60:not(.bgilight-grey) .list-itme:first-child,
.ai-dev-page:is(.erp-page, .mvp-page) .why-coding-sprint.padd-60:not(.bgilight-grey) .list-itme:last-child,
.ai-dev-page:is(.erp-page, .mvp-page) .why-coding-sprint.padd-60:not(.bgilight-grey) .row > [class*="col-"] + [class*="col-"] .list-itme:first-child,
.ai-dev-page:is(.erp-page, .mvp-page) .why-coding-sprint.padd-60:not(.bgilight-grey) .row > [class*="col-"]:first-child .list-itme:last-child {
    position: relative;
    margin: 0;
    padding: 112px 32px 32px;
    background: #FFFFFF;
    border: 0;
    border-radius: 20px;
    box-shadow: var(--ai-shadow);
}
.ai-dev-page:is(.erp-page, .mvp-page) .why-coding-sprint.padd-60:not(.bgilight-grey) .list-itme:before,
.ai-dev-page:is(.erp-page, .mvp-page) .why-coding-sprint.padd-60:not(.bgilight-grey) .list-itme:first-child:before,
.ai-dev-page:is(.erp-page, .mvp-page) .why-coding-sprint.padd-60:not(.bgilight-grey) .row > [class*="col-"] + [class*="col-"] .list-itme:first-child:before {
    top: 32px;
    left: 32px;
    width: 56px;
    height: 56px;
    border: 0;
    border-radius: 14px;
    background-color: #FFFFFF;
    background-size: 26px auto;
    background-position: center;
    box-shadow: inset 0 0 0 1px rgba(44, 2, 58, .1), 0 6px 16px rgba(44, 2, 58, .08);
    transform: none;
    transition: transform .25s ease, box-shadow .25s ease;
}
.ai-dev-page:is(.erp-page, .mvp-page) .why-coding-sprint.padd-60:not(.bgilight-grey) .list-itme:hover:before,
.ai-dev-page:is(.erp-page, .mvp-page) .why-coding-sprint.padd-60:not(.bgilight-grey) .row > [class*="col-"] + [class*="col-"] .list-itme:first-child:hover:before {
    box-shadow: inset 0 0 0 1px rgba(91, 3, 117, .32), 0 10px 22px rgba(91, 3, 117, .16);
    transform: translateY(-2px);
}
.ai-dev-page:is(.erp-page, .mvp-page) .why-coding-sprint.padd-60:not(.bgilight-grey) .list-itme h3 { margin: 0 0 10px; font-size: 21px; }
.ai-dev-page:is(.erp-page, .mvp-page) .why-coding-sprint.padd-60:not(.bgilight-grey) .list-itme p { max-width: none; }
.ai-dev-page:is(.erp-page, .mvp-page) .why-coding-sprint.padd-60:not(.bgilight-grey) .list-itme:after,
.ai-dev-page:is(.erp-page, .mvp-page) .why-coding-sprint.padd-60:not(.bgilight-grey) .row > [class*="col-"] .list-itme:nth-child(n):after { content: none; display: none; }
@media (max-width: 1199px) {
    .ai-dev-page:is(.erp-page, .mvp-page) .why-coding-sprint.padd-60:not(.bgilight-grey) .row,
    .ai-dev-page:is(.erp-page, .mvp-page) .why-coding-sprint.padd-60:not(.bgilight-grey) .row:has(> [class*="col-"]:first-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
}
@media (max-width: 991px) {
    .ai-dev-page:is(.erp-page, .mvp-page) .why-coding-sprint.padd-60:not(.bgilight-grey) .row,
    .ai-dev-page:is(.erp-page, .mvp-page) .why-coding-sprint.padd-60:not(.bgilight-grey) .row:has(> [class*="col-"]:first-child) { margin-top: 40px; }
}
@media (max-width: 575px) {
    .ai-dev-page:is(.erp-page, .mvp-page) .why-coding-sprint.padd-60:not(.bgilight-grey) .row,
    .ai-dev-page:is(.erp-page, .mvp-page) .why-coding-sprint.padd-60:not(.bgilight-grey) .row:has(> [class*="col-"]:first-child) { grid-template-columns: minmax(0, 1fr); gap: 18px; }
    .ai-dev-page:is(.erp-page, .mvp-page) .why-coding-sprint.padd-60:not(.bgilight-grey) .list-itme,
    .ai-dev-page:is(.erp-page, .mvp-page) .why-coding-sprint.padd-60:not(.bgilight-grey) .list-itme + .list-itme,
    .ai-dev-page:is(.erp-page, .mvp-page) .why-coding-sprint.padd-60:not(.bgilight-grey) .list-itme:first-child,
    .ai-dev-page:is(.erp-page, .mvp-page) .why-coding-sprint.padd-60:not(.bgilight-grey) .list-itme:last-child,
    .ai-dev-page:is(.erp-page, .mvp-page) .why-coding-sprint.padd-60:not(.bgilight-grey) .row > [class*="col-"] + [class*="col-"] .list-itme:first-child,
    .ai-dev-page:is(.erp-page, .mvp-page) .why-coding-sprint.padd-60:not(.bgilight-grey) .row > [class*="col-"]:first-child .list-itme:last-child { padding: 96px 22px 26px; border-radius: 18px; }
    .ai-dev-page:is(.erp-page, .mvp-page) .why-coding-sprint.padd-60:not(.bgilight-grey) .list-itme:before,
    .ai-dev-page:is(.erp-page, .mvp-page) .why-coding-sprint.padd-60:not(.bgilight-grey) .list-itme:first-child:before,
    .ai-dev-page:is(.erp-page, .mvp-page) .why-coding-sprint.padd-60:not(.bgilight-grey) .row > [class*="col-"] + [class*="col-"] .list-itme:first-child:before { top: 26px; left: 22px; width: 50px; height: 50px; background-size: 22px auto; }
    .ai-dev-page:is(.erp-page, .mvp-page) .why-coding-sprint.padd-60:not(.bgilight-grey) .list-itme h3 { font-size: 19px; }
}
@media (prefers-reduced-motion: reduce) {
    .ai-dev-page:is(.erp-page, .mvp-page) .why-coding-sprint.padd-60:not(.bgilight-grey) .list-itme:before { transition: none; }
    .ai-dev-page:is(.erp-page, .mvp-page) .why-coding-sprint.padd-60:not(.bgilight-grey) .list-itme:hover:before,
    .ai-dev-page:is(.erp-page, .mvp-page) .why-coding-sprint.padd-60:not(.bgilight-grey) .row > [class*="col-"] + [class*="col-"] .list-itme:first-child:hover:before { transform: none; }
}

/* ==========================================================================
   37. MVP DEVELOPMENT (mvp-page)
   The page carries its own "spacing system" in a style block printed after
   this file: every section gets 50px (36px below 992px) through
   `.mvp-page > main > section:not(...)` x6, weight (0,7,1), which beats every
   shared section rule. The same selector with the section's own class (one
   class heavier) gives each section the shared padding back, so the page
   keeps the rhythm of every other page. The rest of the page is the shared
   design: hero, the four cards, services, case studies, the call to action,
   the two lists (the process as step cards, chunk 36), industries and the
   violet "Why" band (its cards alone mark it: chunk 28 matches
   `:has(.list-coding)`).
   ========================================================================== */
.ai-dev-page.mvp-page > main > section:not(.banner-sec):not(.footer-sec):not(.testimonials):not(.news-sec):not(.faq_n_sec).expert-coders-sec { padding-top: 96px; padding-bottom: 96px; }
.ai-dev-page.mvp-page > main > section:not(.banner-sec):not(.footer-sec):not(.testimonials):not(.news-sec):not(.faq_n_sec).why-coding-sprint.padd-60 { padding-top: 100px; padding-bottom: 100px; }
.ai-dev-page.mvp-page > main > section:not(.banner-sec):not(.footer-sec):not(.testimonials):not(.news-sec):not(.faq_n_sec).cs-sec,
.ai-dev-page.mvp-page > main > section:not(.banner-sec):not(.footer-sec):not(.testimonials):not(.news-sec):not(.faq_n_sec).contact-se { padding-top: 100px; padding-bottom: 100px; }
.ai-dev-page.mvp-page > main > section:not(.banner-sec):not(.footer-sec):not(.testimonials):not(.news-sec):not(.faq_n_sec).cta-inner { padding-top: 0; padding-bottom: 0; }   /* the strip: the panel straddles the bands */
@media (max-width: 1440px) {
    .ai-dev-page.mvp-page > main > section:not(.banner-sec):not(.footer-sec):not(.testimonials):not(.news-sec):not(.faq_n_sec).cs-sec,
    .ai-dev-page.mvp-page > main > section:not(.banner-sec):not(.footer-sec):not(.testimonials):not(.news-sec):not(.faq_n_sec).contact-se { padding-top: 88px; padding-bottom: 88px; }
}
@media (max-width: 991px) {
    .ai-dev-page.mvp-page > main > section:not(.banner-sec):not(.footer-sec):not(.testimonials):not(.news-sec):not(.faq_n_sec).expert-coders-sec,
    .ai-dev-page.mvp-page > main > section:not(.banner-sec):not(.footer-sec):not(.testimonials):not(.news-sec):not(.faq_n_sec).why-coding-sprint.padd-60,
    .ai-dev-page.mvp-page > main > section:not(.banner-sec):not(.footer-sec):not(.testimonials):not(.news-sec):not(.faq_n_sec).industry-sec,
    .ai-dev-page.mvp-page > main > section:not(.banner-sec):not(.footer-sec):not(.testimonials):not(.news-sec):not(.faq_n_sec).cs-sec,
    .ai-dev-page.mvp-page > main > section:not(.banner-sec):not(.footer-sec):not(.testimonials):not(.news-sec):not(.faq_n_sec).contact-se { padding-top: 64px; padding-bottom: 64px; }
}
@media (max-width: 575px) {
    .ai-dev-page.mvp-page > main > section:not(.banner-sec):not(.footer-sec):not(.testimonials):not(.news-sec):not(.faq_n_sec).expert-coders-sec,
    .ai-dev-page.mvp-page > main > section:not(.banner-sec):not(.footer-sec):not(.testimonials):not(.news-sec):not(.faq_n_sec).why-coding-sprint.padd-60,
    .ai-dev-page.mvp-page > main > section:not(.banner-sec):not(.footer-sec):not(.testimonials):not(.news-sec):not(.faq_n_sec).industry-sec,
    .ai-dev-page.mvp-page > main > section:not(.banner-sec):not(.footer-sec):not(.testimonials):not(.news-sec):not(.faq_n_sec).cs-sec,
    .ai-dev-page.mvp-page > main > section:not(.banner-sec):not(.footer-sec):not(.testimonials):not(.news-sec):not(.faq_n_sec).contact-se { padding-top: 48px; padding-bottom: 48px; }
}

/* ==========================================================================
   38. DEVOPS CONSULTING (devops-page)
   Every section is a finished one. Two page details: the call to action has
   its own picture (Build-stronger-DevOps.webp, set by the page on the
   section), which the shared panel would replace with the AI picture, so the
   panel shows the page's picture under the same veils (pinned right, where
   the code is); and the page gives the "Why" cards a 207px minimum height,
   which left empty space under the shorter ones.
   ========================================================================== */
.ai-dev-page.devops-page :is(.cta-ai, :where(.hire-dev-page .cta-inner)) .cta-row {
    background:
        linear-gradient(100deg, #17031F 0%, rgba(34, 3, 46, .94) 36%, rgba(44, 2, 58, .58) 60%, rgba(44, 2, 58, .08) 100%),
        url('/assets/images/devops/Build-stronger-DevOps.webp') right center / cover no-repeat #17031F;
}
@media (max-width: 991px) {
    .ai-dev-page.devops-page :is(.cta-ai, :where(.hire-dev-page .cta-inner)) .cta-row {
        background:
            linear-gradient(180deg, rgba(23, 3, 31, .93), rgba(44, 2, 58, .84)),
            url('/assets/images/devops/Build-stronger-DevOps.webp') right center / cover no-repeat #17031F;
    }
}
.ai-dev-page.devops-page .expert-coders-sec .list-coding { min-height: 0; }

/* Services rows carry the site's .pt_66 (66px padding-top from 1550px, 30px below), on top of the
   row's own 52px: 118px of space above the cards at 1920, 82px at 1366 ("check spacing above
   cards", DevOps). The row's margin is the gap, at every width. */
.ai-dev-page .expert-coders-sec .row.pt_66 { padding-top: 0; }

/* DevOps service icons: magenta outlines drawn on a white rectangle inside each file, so the shared
   violet filter (chunk 25) turned the whole icon into a violet block. Here the outline becomes brand
   violet and the white stays white (grey + contrast -> black on white; invert; tint; invert back),
   then multiplies into the tile, so only the outline shows. On hover: white outline, screened onto
   the violet tile. The files are untouched. */
.ai-dev-page.devops-page .expert-coders-sec .full-content-column > img:first-child {
    filter: grayscale(1) contrast(5) invert(1) sepia(1) saturate(9.313) hue-rotate(41deg) brightness(.98) invert(1);   /* contrast 5: edge pixels go to outline or white, so the outline reads as solid violet */
    mix-blend-mode: multiply;
}
.ai-dev-page.devops-page .expert-coders-sec .full-content-column:hover > img:first-child {
    filter: grayscale(1) contrast(5) invert(1);
    mix-blend-mode: screen;
}

/* ==========================================================================
   39. DEVOPS: "How our DevOps consulting process works" as the timeline
   "change this section like timeline, we have already used" (2026-10-14):
   the Bespoke process timeline (chunk 30), value for value: white band,
   heading centred, the six steps as white cards on alternate sides of a fine
   line, each card two rows tall and starting a row lower than the one before
   (equal heights, equal steps), a round tinted marker on the line level with
   each card's middle, joined to it by a short stroke; below 992px one column
   with the line down the left. The marker carries the existing chevron (these
   steps have no icons). No corner numbers: the titles already say "Step 1"
   to "Step 6". The list sits in two columns of three in the markup; the grid
   places the steps back in reading order. Each card has only two pseudo
   elements here, so :after draws both the stroke and the line down to the
   next marker (two gradients). Same wording.
   ========================================================================== */
.ai-dev-page.devops-page .why-coding-sprint.bgilight-grey.padd-60 { background: #FFFFFF; }
.ai-dev-page.devops-page .cta-inner:is(.cta-ai, :where(.hire-dev-page .cta-inner)):has(+ .why-coding-sprint.padd-60) { --cta2-bottom: #FFFFFF; }
.ai-dev-page.devops-page .why-coding-sprint.bgilight-grey.padd-60 .container { display: block; }
.ai-dev-page.devops-page .why-coding-sprint.bgilight-grey.padd-60 .heading2 {
    position: static;
    max-width: 1040px;
    margin: 0 auto;
    text-align: center;
}
.ai-dev-page.devops-page .why-coding-sprint.bgilight-grey.padd-60 .heading2:before { margin-left: auto; margin-right: auto; }
.ai-dev-page.devops-page .why-coding-sprint.bgilight-grey.padd-60 .heading2 h2 { text-align: center; }
.ai-dev-page.devops-page .why-coding-sprint.bgilight-grey.padd-60 .row,
.ai-dev-page.devops-page .why-coding-sprint.bgilight-grey.padd-60 .row:has(> [class*="col-"]:first-child) {
    position: relative;
    display: block;
    grid-template-rows: none;
    max-width: 1040px;
    margin: 64px auto 0;
}
.ai-dev-page.devops-page .why-coding-sprint.bgilight-grey.padd-60 .row > [class*="col-"]:first-child .list-itme:nth-child(1),
.ai-dev-page.devops-page .why-coding-sprint.bgilight-grey.padd-60 .row > [class*="col-"]:first-child .list-itme:nth-child(2),
.ai-dev-page.devops-page .why-coding-sprint.bgilight-grey.padd-60 .row > [class*="col-"]:first-child .list-itme:nth-child(3),
.ai-dev-page.devops-page .why-coding-sprint.bgilight-grey.padd-60 .row > [class*="col-"]:last-child .list-itme:nth-child(1),
.ai-dev-page.devops-page .why-coding-sprint.bgilight-grey.padd-60 .row > [class*="col-"]:last-child .list-itme:nth-child(2),
.ai-dev-page.devops-page .why-coding-sprint.bgilight-grey.padd-60 .row > [class*="col-"]:last-child .list-itme:nth-child(3) {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 0;
    padding: 28px 30px;
    border: 1px solid var(--ai-line);
    border-radius: 20px;
    background: #FFFFFF;
    box-shadow: var(--ai-shadow);
    transition: border-color .3s ease, box-shadow .3s ease;
}
.ai-dev-page.devops-page .why-coding-sprint.bgilight-grey.padd-60 .row > [class*="col-"]:first-child .list-itme:nth-child(1):hover,
.ai-dev-page.devops-page .why-coding-sprint.bgilight-grey.padd-60 .row > [class*="col-"]:first-child .list-itme:nth-child(2):hover,
.ai-dev-page.devops-page .why-coding-sprint.bgilight-grey.padd-60 .row > [class*="col-"]:first-child .list-itme:nth-child(3):hover,
.ai-dev-page.devops-page .why-coding-sprint.bgilight-grey.padd-60 .row > [class*="col-"]:last-child .list-itme:nth-child(1):hover,
.ai-dev-page.devops-page .why-coding-sprint.bgilight-grey.padd-60 .row > [class*="col-"]:last-child .list-itme:nth-child(2):hover,
.ai-dev-page.devops-page .why-coding-sprint.bgilight-grey.padd-60 .row > [class*="col-"]:last-child .list-itme:nth-child(3):hover { border-color: rgba(91, 3, 117, .28); box-shadow: var(--ai-shadow-hover); }
.ai-dev-page.devops-page .why-coding-sprint.bgilight-grey.padd-60 .row > [class*="col-"]:first-child .list-itme:nth-child(1):before,
.ai-dev-page.devops-page .why-coding-sprint.bgilight-grey.padd-60 .row > [class*="col-"]:first-child .list-itme:nth-child(2):before,
.ai-dev-page.devops-page .why-coding-sprint.bgilight-grey.padd-60 .row > [class*="col-"]:first-child .list-itme:nth-child(3):before,
.ai-dev-page.devops-page .why-coding-sprint.bgilight-grey.padd-60 .row > [class*="col-"]:last-child .list-itme:nth-child(1):before,
.ai-dev-page.devops-page .why-coding-sprint.bgilight-grey.padd-60 .row > [class*="col-"]:last-child .list-itme:nth-child(2):before,
.ai-dev-page.devops-page .why-coding-sprint.bgilight-grey.padd-60 .row > [class*="col-"]:last-child .list-itme:nth-child(3):before {   /* the marker on the line, with the chevron (decorative) */
    z-index: 1;
    top: 50%;
    margin-top: -42px;
    width: 84px;
    height: 84px;
    border: 0;
    border-radius: 50%;
    background-color: var(--ai-tint);
    background-size: 30px auto;
    background-position: center;
    background-repeat: no-repeat;
    box-shadow: inset 0 0 0 1.5px rgba(91, 3, 117, .22);
    transform: none;
    transition: background-color .3s ease, box-shadow .3s ease;
}
.ai-dev-page.devops-page .why-coding-sprint.bgilight-grey.padd-60 .row > [class*="col-"]:first-child .list-itme:nth-child(1):hover:before,
.ai-dev-page.devops-page .why-coding-sprint.bgilight-grey.padd-60 .row > [class*="col-"]:first-child .list-itme:nth-child(2):hover:before,
.ai-dev-page.devops-page .why-coding-sprint.bgilight-grey.padd-60 .row > [class*="col-"]:first-child .list-itme:nth-child(3):hover:before,
.ai-dev-page.devops-page .why-coding-sprint.bgilight-grey.padd-60 .row > [class*="col-"]:last-child .list-itme:nth-child(1):hover:before,
.ai-dev-page.devops-page .why-coding-sprint.bgilight-grey.padd-60 .row > [class*="col-"]:last-child .list-itme:nth-child(2):hover:before,
.ai-dev-page.devops-page .why-coding-sprint.bgilight-grey.padd-60 .row > [class*="col-"]:last-child .list-itme:nth-child(3):hover:before { background-color: #FFFFFF; box-shadow: inset 0 0 0 1.5px var(--ai-violet), 0 10px 22px rgba(91, 3, 117, .16); transform: none; }
.ai-dev-page.devops-page .why-coding-sprint.bgilight-grey.padd-60 .row > [class*="col-"]:first-child .list-itme:nth-child(1):after,
.ai-dev-page.devops-page .why-coding-sprint.bgilight-grey.padd-60 .row > [class*="col-"]:first-child .list-itme:nth-child(2):after,
.ai-dev-page.devops-page .why-coding-sprint.bgilight-grey.padd-60 .row > [class*="col-"]:first-child .list-itme:nth-child(3):after,
.ai-dev-page.devops-page .why-coding-sprint.bgilight-grey.padd-60 .row > [class*="col-"]:last-child .list-itme:nth-child(1):after,
.ai-dev-page.devops-page .why-coding-sprint.bgilight-grey.padd-60 .row > [class*="col-"]:last-child .list-itme:nth-child(2):after,
.ai-dev-page.devops-page .why-coding-sprint.bgilight-grey.padd-60 .row > [class*="col-"]:last-child .list-itme:nth-child(3):after {    /* the stroke to the card + the line down to the next marker (decorative) */
    content: "";
    display: block;
    position: absolute;
    z-index: 0;
    top: calc(50% - 1px);
    bottom: -28px;          /* the next marker: half a card + half the 56px gap lower */
    width: 65px;
    height: auto;
    border: 0;
    pointer-events: none;
}
.ai-dev-page.devops-page .why-coding-sprint.bgilight-grey.padd-60 h3 { margin: 0 0 10px; font-size: 20px; }
.ai-dev-page.devops-page .why-coding-sprint.bgilight-grey.padd-60 .list-itme p { max-width: none; margin: 0; font-size: 16px; }
@media (min-width: 992px) {
    .ai-dev-page.devops-page .why-coding-sprint.bgilight-grey.padd-60 .row,
    .ai-dev-page.devops-page .why-coding-sprint.bgilight-grey.padd-60 .row:has(> [class*="col-"]:first-child) {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: none;
        grid-auto-rows: 1fr;
        grid-auto-flow: row;
        row-gap: 56px;      /* "use proper gap it too tight": 56 between the cards on a side, the steps 128px apart */
        column-gap: 0;
    }
    /* these steps are short: at their own height the 84px markers almost touched; with 200px and the 56px gap about 44px of line shows between markers (text centred, equal top and bottom) */
    .ai-dev-page.devops-page .why-coding-sprint.bgilight-grey.padd-60 .row > [class*="col-"] .list-itme:nth-child(n) { min-height: 200px; }
    .ai-dev-page.devops-page .why-coding-sprint.bgilight-grey.padd-60 .row > [class*="col-"]:first-child .list-itme:nth-child(1) { grid-column: 1; grid-row: 1 / span 2; }
    .ai-dev-page.devops-page .why-coding-sprint.bgilight-grey.padd-60 .row > [class*="col-"]:first-child .list-itme:nth-child(2) { grid-column: 2; grid-row: 2 / span 2; }
    .ai-dev-page.devops-page .why-coding-sprint.bgilight-grey.padd-60 .row > [class*="col-"]:first-child .list-itme:nth-child(3) { grid-column: 1; grid-row: 3 / span 2; }
    .ai-dev-page.devops-page .why-coding-sprint.bgilight-grey.padd-60 .row > [class*="col-"]:last-child .list-itme:nth-child(1) { grid-column: 2; grid-row: 4 / span 2; }
    .ai-dev-page.devops-page .why-coding-sprint.bgilight-grey.padd-60 .row > [class*="col-"]:last-child .list-itme:nth-child(2) { grid-column: 1; grid-row: 5 / span 2; }
    .ai-dev-page.devops-page .why-coding-sprint.bgilight-grey.padd-60 .row > [class*="col-"]:last-child .list-itme:nth-child(3) { grid-column: 2; grid-row: 6 / span 2; }
    .ai-dev-page.devops-page .why-coding-sprint.bgilight-grey.padd-60 .row > [class*="col-"]:first-child .list-itme:nth-child(1),
    .ai-dev-page.devops-page .why-coding-sprint.bgilight-grey.padd-60 .row > [class*="col-"]:first-child .list-itme:nth-child(3),
    .ai-dev-page.devops-page .why-coding-sprint.bgilight-grey.padd-60 .row > [class*="col-"]:last-child .list-itme:nth-child(2) { margin-right: 64px; }
    .ai-dev-page.devops-page .why-coding-sprint.bgilight-grey.padd-60 .row > [class*="col-"]:first-child .list-itme:nth-child(2),
    .ai-dev-page.devops-page .why-coding-sprint.bgilight-grey.padd-60 .row > [class*="col-"]:last-child .list-itme:nth-child(1),
    .ai-dev-page.devops-page .why-coding-sprint.bgilight-grey.padd-60 .row > [class*="col-"]:last-child .list-itme:nth-child(3) { margin-left: 64px; }
    .ai-dev-page.devops-page .why-coding-sprint.bgilight-grey.padd-60 .row > [class*="col-"]:first-child .list-itme:nth-child(1):before,
    .ai-dev-page.devops-page .why-coding-sprint.bgilight-grey.padd-60 .row > [class*="col-"]:first-child .list-itme:nth-child(3):before,
    .ai-dev-page.devops-page .why-coding-sprint.bgilight-grey.padd-60 .row > [class*="col-"]:last-child .list-itme:nth-child(2):before { left: auto; right: -107px; }   /* 107 = the 64px gap + half the marker + the 1px border */
    .ai-dev-page.devops-page .why-coding-sprint.bgilight-grey.padd-60 .row > [class*="col-"]:first-child .list-itme:nth-child(2):before,
    .ai-dev-page.devops-page .why-coding-sprint.bgilight-grey.padd-60 .row > [class*="col-"]:last-child .list-itme:nth-child(1):before,
    .ai-dev-page.devops-page .why-coding-sprint.bgilight-grey.padd-60 .row > [class*="col-"]:last-child .list-itme:nth-child(3):before { right: auto; left: -107px; }
    .ai-dev-page.devops-page .why-coding-sprint.bgilight-grey.padd-60 .row > [class*="col-"]:first-child .list-itme:nth-child(1):after,
    .ai-dev-page.devops-page .why-coding-sprint.bgilight-grey.padd-60 .row > [class*="col-"]:first-child .list-itme:nth-child(3):after,
    .ai-dev-page.devops-page .why-coding-sprint.bgilight-grey.padd-60 .row > [class*="col-"]:last-child .list-itme:nth-child(2):after {
        left: calc(100% + 1px);
        right: auto;
        background: linear-gradient(rgba(91, 3, 117, .22), rgba(91, 3, 117, .22)) left top / 64px 2px no-repeat, linear-gradient(rgba(91, 3, 117, .22), rgba(91, 3, 117, .22)) right top / 2px 100% no-repeat;
    }
    .ai-dev-page.devops-page .why-coding-sprint.bgilight-grey.padd-60 .row > [class*="col-"]:first-child .list-itme:nth-child(2):after,
    .ai-dev-page.devops-page .why-coding-sprint.bgilight-grey.padd-60 .row > [class*="col-"]:last-child .list-itme:nth-child(1):after,
    .ai-dev-page.devops-page .why-coding-sprint.bgilight-grey.padd-60 .row > [class*="col-"]:last-child .list-itme:nth-child(3):after {
        right: calc(100% + 1px);
        left: auto;
        background: linear-gradient(rgba(91, 3, 117, .22), rgba(91, 3, 117, .22)) right top / 64px 2px no-repeat, linear-gradient(rgba(91, 3, 117, .22), rgba(91, 3, 117, .22)) left top / 2px 100% no-repeat;
    }
    .ai-dev-page.devops-page .why-coding-sprint.bgilight-grey.padd-60 .row > [class*="col-"]:last-child .list-itme:nth-child(3):after { bottom: auto; height: 2px; background: linear-gradient(rgba(91, 3, 117, .22), rgba(91, 3, 117, .22)) right top / 64px 2px no-repeat; }   /* the last step: the stroke only */
}
@media (max-width: 991px) {
    .ai-dev-page.devops-page .why-coding-sprint.bgilight-grey.padd-60 .row,
    .ai-dev-page.devops-page .why-coding-sprint.bgilight-grey.padd-60 .row:has(> [class*="col-"]:first-child) { max-width: none; margin-top: 40px; }
    .ai-dev-page.devops-page .why-coding-sprint.bgilight-grey.padd-60 .row > [class*="col-"]:first-child .list-itme:nth-child(1),
    .ai-dev-page.devops-page .why-coding-sprint.bgilight-grey.padd-60 .row > [class*="col-"]:first-child .list-itme:nth-child(2),
    .ai-dev-page.devops-page .why-coding-sprint.bgilight-grey.padd-60 .row > [class*="col-"]:first-child .list-itme:nth-child(3),
    .ai-dev-page.devops-page .why-coding-sprint.bgilight-grey.padd-60 .row > [class*="col-"]:last-child .list-itme:nth-child(1),
    .ai-dev-page.devops-page .why-coding-sprint.bgilight-grey.padd-60 .row > [class*="col-"]:last-child .list-itme:nth-child(2),
    .ai-dev-page.devops-page .why-coding-sprint.bgilight-grey.padd-60 .row > [class*="col-"]:last-child .list-itme:nth-child(3) { margin: 0 0 0 106px; }
    .ai-dev-page.devops-page .why-coding-sprint.bgilight-grey.padd-60 .row > [class*="col-"]:first-child .list-itme:nth-child(2),
    .ai-dev-page.devops-page .why-coding-sprint.bgilight-grey.padd-60 .row > [class*="col-"]:first-child .list-itme:nth-child(3),
    .ai-dev-page.devops-page .why-coding-sprint.bgilight-grey.padd-60 .row > [class*="col-"]:last-child .list-itme:nth-child(1),
    .ai-dev-page.devops-page .why-coding-sprint.bgilight-grey.padd-60 .row > [class*="col-"]:last-child .list-itme:nth-child(2),
    .ai-dev-page.devops-page .why-coding-sprint.bgilight-grey.padd-60 .row > [class*="col-"]:last-child .list-itme:nth-child(3) { margin-top: 24px; }
    .ai-dev-page.devops-page .why-coding-sprint.bgilight-grey.padd-60 .row > [class*="col-"]:first-child .list-itme:nth-child(1):before,
    .ai-dev-page.devops-page .why-coding-sprint.bgilight-grey.padd-60 .row > [class*="col-"]:first-child .list-itme:nth-child(2):before,
    .ai-dev-page.devops-page .why-coding-sprint.bgilight-grey.padd-60 .row > [class*="col-"]:first-child .list-itme:nth-child(3):before,
    .ai-dev-page.devops-page .why-coding-sprint.bgilight-grey.padd-60 .row > [class*="col-"]:last-child .list-itme:nth-child(1):before,
    .ai-dev-page.devops-page .why-coding-sprint.bgilight-grey.padd-60 .row > [class*="col-"]:last-child .list-itme:nth-child(2):before,
    .ai-dev-page.devops-page .why-coding-sprint.bgilight-grey.padd-60 .row > [class*="col-"]:last-child .list-itme:nth-child(3):before { top: 22px; margin-top: 0; left: -107px; right: auto; }
    .ai-dev-page.devops-page .why-coding-sprint.bgilight-grey.padd-60 .row > [class*="col-"]:first-child .list-itme:nth-child(1):after,
    .ai-dev-page.devops-page .why-coding-sprint.bgilight-grey.padd-60 .row > [class*="col-"]:first-child .list-itme:nth-child(2):after,
    .ai-dev-page.devops-page .why-coding-sprint.bgilight-grey.padd-60 .row > [class*="col-"]:first-child .list-itme:nth-child(3):after,
    .ai-dev-page.devops-page .why-coding-sprint.bgilight-grey.padd-60 .row > [class*="col-"]:last-child .list-itme:nth-child(1):after,
    .ai-dev-page.devops-page .why-coding-sprint.bgilight-grey.padd-60 .row > [class*="col-"]:last-child .list-itme:nth-child(2):after,
    .ai-dev-page.devops-page .why-coding-sprint.bgilight-grey.padd-60 .row > [class*="col-"]:last-child .list-itme:nth-child(3):after {
        top: 63px;
        bottom: -88px;      /* the next marker: the 24px gap + 64px */
        left: -66px;
        right: auto;
        background: linear-gradient(rgba(91, 3, 117, .22), rgba(91, 3, 117, .22)) right top / 22px 2px no-repeat, linear-gradient(rgba(91, 3, 117, .22), rgba(91, 3, 117, .22)) left top / 2px 100% no-repeat;
    }
    .ai-dev-page.devops-page .why-coding-sprint.bgilight-grey.padd-60 .row > [class*="col-"]:last-child .list-itme:nth-child(3):after { bottom: auto; height: 2px; background: linear-gradient(rgba(91, 3, 117, .22), rgba(91, 3, 117, .22)) right top / 22px 2px no-repeat; }
}
@media (max-width: 575px) {
    .ai-dev-page.devops-page .why-coding-sprint.bgilight-grey.padd-60 .row > [class*="col-"]:first-child .list-itme:nth-child(1),
    .ai-dev-page.devops-page .why-coding-sprint.bgilight-grey.padd-60 .row > [class*="col-"]:first-child .list-itme:nth-child(2),
    .ai-dev-page.devops-page .why-coding-sprint.bgilight-grey.padd-60 .row > [class*="col-"]:first-child .list-itme:nth-child(3),
    .ai-dev-page.devops-page .why-coding-sprint.bgilight-grey.padd-60 .row > [class*="col-"]:last-child .list-itme:nth-child(1),
    .ai-dev-page.devops-page .why-coding-sprint.bgilight-grey.padd-60 .row > [class*="col-"]:last-child .list-itme:nth-child(2),
    .ai-dev-page.devops-page .why-coding-sprint.bgilight-grey.padd-60 .row > [class*="col-"]:last-child .list-itme:nth-child(3) { margin-left: 88px; padding: 22px; border-radius: 18px; }
    .ai-dev-page.devops-page .why-coding-sprint.bgilight-grey.padd-60 .row > [class*="col-"]:first-child .list-itme:nth-child(2),
    .ai-dev-page.devops-page .why-coding-sprint.bgilight-grey.padd-60 .row > [class*="col-"]:first-child .list-itme:nth-child(3),
    .ai-dev-page.devops-page .why-coding-sprint.bgilight-grey.padd-60 .row > [class*="col-"]:last-child .list-itme:nth-child(1),
    .ai-dev-page.devops-page .why-coding-sprint.bgilight-grey.padd-60 .row > [class*="col-"]:last-child .list-itme:nth-child(2),
    .ai-dev-page.devops-page .why-coding-sprint.bgilight-grey.padd-60 .row > [class*="col-"]:last-child .list-itme:nth-child(3) { margin-top: 24px; }
    .ai-dev-page.devops-page .why-coding-sprint.bgilight-grey.padd-60 .row > [class*="col-"]:first-child .list-itme:nth-child(1):before,
    .ai-dev-page.devops-page .why-coding-sprint.bgilight-grey.padd-60 .row > [class*="col-"]:first-child .list-itme:nth-child(2):before,
    .ai-dev-page.devops-page .why-coding-sprint.bgilight-grey.padd-60 .row > [class*="col-"]:first-child .list-itme:nth-child(3):before,
    .ai-dev-page.devops-page .why-coding-sprint.bgilight-grey.padd-60 .row > [class*="col-"]:last-child .list-itme:nth-child(1):before,
    .ai-dev-page.devops-page .why-coding-sprint.bgilight-grey.padd-60 .row > [class*="col-"]:last-child .list-itme:nth-child(2):before,
    .ai-dev-page.devops-page .why-coding-sprint.bgilight-grey.padd-60 .row > [class*="col-"]:last-child .list-itme:nth-child(3):before { top: 20px; left: -89px; width: 72px; height: 72px; background-size: 26px auto; }
    .ai-dev-page.devops-page .why-coding-sprint.bgilight-grey.padd-60 .row > [class*="col-"]:first-child .list-itme:nth-child(1):after,
    .ai-dev-page.devops-page .why-coding-sprint.bgilight-grey.padd-60 .row > [class*="col-"]:first-child .list-itme:nth-child(2):after,
    .ai-dev-page.devops-page .why-coding-sprint.bgilight-grey.padd-60 .row > [class*="col-"]:first-child .list-itme:nth-child(3):after,
    .ai-dev-page.devops-page .why-coding-sprint.bgilight-grey.padd-60 .row > [class*="col-"]:last-child .list-itme:nth-child(1):after,
    .ai-dev-page.devops-page .why-coding-sprint.bgilight-grey.padd-60 .row > [class*="col-"]:last-child .list-itme:nth-child(2):after,
    .ai-dev-page.devops-page .why-coding-sprint.bgilight-grey.padd-60 .row > [class*="col-"]:last-child .list-itme:nth-child(3):after {
        top: 55px;
        bottom: -80px;
        left: -54px;
        width: 53px;
        background: linear-gradient(rgba(91, 3, 117, .22), rgba(91, 3, 117, .22)) right top / 16px 2px no-repeat, linear-gradient(rgba(91, 3, 117, .22), rgba(91, 3, 117, .22)) left top / 2px 100% no-repeat;
    }
    .ai-dev-page.devops-page .why-coding-sprint.bgilight-grey.padd-60 .row > [class*="col-"]:last-child .list-itme:nth-child(3):after { bottom: auto; height: 2px; background: linear-gradient(rgba(91, 3, 117, .22), rgba(91, 3, 117, .22)) right top / 16px 2px no-repeat; }
    .ai-dev-page.devops-page .why-coding-sprint.bgilight-grey.padd-60 h3 { font-size: 19px; }
}
@media (prefers-reduced-motion: reduce) {
    .ai-dev-page.devops-page .why-coding-sprint.bgilight-grey.padd-60 .row > [class*="col-"]:first-child .list-itme:nth-child(1),
    .ai-dev-page.devops-page .why-coding-sprint.bgilight-grey.padd-60 .row > [class*="col-"]:first-child .list-itme:nth-child(2),
    .ai-dev-page.devops-page .why-coding-sprint.bgilight-grey.padd-60 .row > [class*="col-"]:first-child .list-itme:nth-child(3),
    .ai-dev-page.devops-page .why-coding-sprint.bgilight-grey.padd-60 .row > [class*="col-"]:last-child .list-itme:nth-child(1),
    .ai-dev-page.devops-page .why-coding-sprint.bgilight-grey.padd-60 .row > [class*="col-"]:last-child .list-itme:nth-child(2),
    .ai-dev-page.devops-page .why-coding-sprint.bgilight-grey.padd-60 .row > [class*="col-"]:last-child .list-itme:nth-child(3),
    .ai-dev-page.devops-page .why-coding-sprint.bgilight-grey.padd-60 .row > [class*="col-"]:first-child .list-itme:nth-child(1):before,
    .ai-dev-page.devops-page .why-coding-sprint.bgilight-grey.padd-60 .row > [class*="col-"]:first-child .list-itme:nth-child(2):before,
    .ai-dev-page.devops-page .why-coding-sprint.bgilight-grey.padd-60 .row > [class*="col-"]:first-child .list-itme:nth-child(3):before,
    .ai-dev-page.devops-page .why-coding-sprint.bgilight-grey.padd-60 .row > [class*="col-"]:last-child .list-itme:nth-child(1):before,
    .ai-dev-page.devops-page .why-coding-sprint.bgilight-grey.padd-60 .row > [class*="col-"]:last-child .list-itme:nth-child(2):before,
    .ai-dev-page.devops-page .why-coding-sprint.bgilight-grey.padd-60 .row > [class*="col-"]:last-child .list-itme:nth-child(3):before { transition: none; }
}

/* ==========================================================================
   40. HIRE DEVELOPER (hire-dev-page)
   Every section is a finished one: hero; the process carousel (AI Development);
   the call to action (chunk 2: this page's markup has no .cta-ai and a
   .heading2 in place of .heading-cta, so chunk 2's selectors also match
   `:where(.hire-dev-page .cta-inner)` / `:where(.hire-dev-page .cta-row >
   .heading2)`, which adds no weight anywhere); the "Why" list (Benefits);
   "Why Hire Dedicated Developers" as the four cards of Web App's "Grow your
   business" (white cards, the icon on the soft tile in brand violet, the
   title under it); the CTA banner (chunk 7b). The page's own block (printed
   later) restyles the reasons as lime-bordered cards and pads two sections:
   each rule here is one class heavier.
   ========================================================================== */
/* the strip behind the call to action: white above, as the process band */
.ai-dev-page .team-model-sec + .cta-inner { --cta2-top: #FFFFFF; }
/* the process row: from 1200px all six steps are on screen and nothing slides, so no dots */
@media (min-width: 1200px) {
    .ai-dev-page .team-model-sec .owl-dots { display: none; }
}

/* WHY HIRE DEDICATED DEVELOPERS: the four cards */
.ai-dev-page.hire-dev-page section.benifites-sec { margin: 0; padding: 100px 0; background: #FFFFFF; }
.ai-dev-page.hire-dev-page .benifites-sec .heading2 {
    max-width: 1040px;
    margin: 0 auto;
    padding: 0;
    text-align: center;
}
.ai-dev-page.hire-dev-page .benifites-sec .heading2:before {   /* short lime mark (decorative) */
    content: "";
    display: block;
    width: 44px;
    height: 4px;
    margin: 0 auto 22px;
    border-radius: 2px;
    background: var(--ai-lime);
}
.ai-dev-page.hire-dev-page .benifites-sec .heading2 h2 {
    max-width: 1040px;
    margin: 0 auto 18px;
    font-family: "Rubik", sans-serif;
    font-size: 42px;
    line-height: 1.14;
    font-weight: 500;
    letter-spacing: -.8px;
    color: var(--ai-ink);
    text-wrap: balance;   /* two even lines, not "Teams?" alone */
}
.ai-dev-page.hire-dev-page .benifites-sec .heading2 > p {
    max-width: 920px;
    margin: 0 auto;
    font-size: 18px;
    line-height: 1.65;
    color: var(--ai-body);
}
.ai-dev-page.hire-dev-page .benifites-sec .row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: auto;
    gap: 28px;
    margin: 52px 0 0;
}
.ai-dev-page.hire-dev-page .benifites-sec .row > [class*="col-"] {
    display: flex;
    width: auto;
    max-width: none;
    margin: 0;
    padding: 0;
}
.ai-dev-page.hire-dev-page .benifites-sec .benifites-box {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    margin: 0;
    padding: 40px 36px;
    text-align: left;
    background: #FFFFFF;
    border: 1px solid var(--ai-line);
    border-radius: var(--ai-radius);
    box-shadow: var(--ai-shadow);
    overflow: hidden;
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.ai-dev-page.hire-dev-page .benifites-sec .benifites-box:before {   /* violet-to-lime rule that draws in on hover, as the services cards */
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, var(--ai-violet), var(--ai-lime));
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .4s ease;
}
.ai-dev-page.hire-dev-page .benifites-sec .benifites-box:hover {
    transform: translateY(-6px);
    border-color: rgba(91, 3, 117, .22);
    box-shadow: var(--ai-shadow-hover);
}
.ai-dev-page.hire-dev-page .benifites-sec .benifites-box:hover:before { transform: scaleX(1); }
.ai-dev-page.hire-dev-page .benifites-sec .icon-box {   /* the soft tile (chunk 28's .figure-box) */
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 84px;
    height: 84px;
    margin: 0 0 24px;
    padding: 14px;
    box-sizing: border-box;
    border: 0;
    border-radius: 22px;
    background: var(--ai-tint);
    box-shadow: none;
    transition: background-color .3s ease;
}
.ai-dev-page.hire-dev-page .benifites-sec .benefit-icon { display: flex; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; background: none; }
.ai-dev-page.hire-dev-page .benifites-sec .benefit-icon svg {
    width: 100%;
    height: 100%;
    filter: brightness(0) saturate(100%) invert(16%) sepia(22%) saturate(7395%) hue-rotate(272deg) brightness(89%) contrast(122%);
}
.ai-dev-page.hire-dev-page .benifites-sec .benifites-box:hover .icon-box { background: var(--ai-violet); }
.ai-dev-page.hire-dev-page .benifites-sec .benifites-box:hover .benefit-icon svg { filter: brightness(0) invert(1); }
.ai-dev-page.hire-dev-page .benifites-sec h4.beifit-heading {
    margin: 0;
    font-family: "Rubik", sans-serif;
    font-size: 24px;
    line-height: 1.22;
    font-weight: 500;
    letter-spacing: -.2px;
    text-align: left;
    color: var(--ai-ink);
}
/* the banner after it stands on the strip, no padding of its own (the page added 60/40/30px) */
.ai-dev-page.hire-dev-page .flexible-sec { padding-bottom: 0; }
@media (max-width: 1370px) {
    .ai-dev-page.hire-dev-page .benifites-sec .heading2 h2 { font-size: 38px; }
    .ai-dev-page.hire-dev-page .benifites-sec .heading2 > p { font-size: 17px; }
    .ai-dev-page.hire-dev-page .benifites-sec .row { gap: 22px; }
    .ai-dev-page.hire-dev-page .benifites-sec .benifites-box { padding: 34px 28px; }
    .ai-dev-page.hire-dev-page .benifites-sec h4.beifit-heading { font-size: 22px; }
}
@media (max-width: 1199px) {
    .ai-dev-page.hire-dev-page .benifites-sec .row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 991px) {
    .ai-dev-page.hire-dev-page section.benifites-sec { padding: 64px 0; }
    .ai-dev-page.hire-dev-page .benifites-sec .heading2 h2 { font-size: 32px; letter-spacing: -.5px; }
    .ai-dev-page.hire-dev-page .benifites-sec .row { margin-top: 36px; gap: 18px; }
    .ai-dev-page.hire-dev-page .flexible-sec { padding-bottom: 0; }
}
@media (max-width: 575px) {
    .ai-dev-page.hire-dev-page section.benifites-sec { padding: 48px 0; }
    .ai-dev-page.hire-dev-page .benifites-sec .heading2 h2 { font-size: 27px; line-height: 1.2; }
    .ai-dev-page.hire-dev-page .benifites-sec .heading2 > p { font-size: 16px; }
    .ai-dev-page.hire-dev-page .benifites-sec .row { grid-template-columns: minmax(0, 1fr); }
    .ai-dev-page.hire-dev-page .benifites-sec .benifites-box { padding: 28px 22px; }
    .ai-dev-page.hire-dev-page .benifites-sec .icon-box { width: 72px; height: 72px; padding: 12px; border-radius: 20px; }
    .ai-dev-page.hire-dev-page .benifites-sec h4.beifit-heading { font-size: 21px; }
}
@media (prefers-reduced-motion: reduce) {
    .ai-dev-page.hire-dev-page .benifites-sec .benifites-box,
    .ai-dev-page.hire-dev-page .benifites-sec .benifites-box:before { transition: none; }
    .ai-dev-page.hire-dev-page .benifites-sec .benifites-box:hover { transform: none; }
}
/* "Build Your Team": the button sits in a column of its own in this markup (on the finished pages it
   follows the text inside the text column); like them, it goes under the text, on the left */
.ai-dev-page.hire-dev-page .cta-inner .cta-row { row-gap: 0; }   /* the row wraps the button column below 992px with a 15px gap; the twin has none */
.ai-dev-page.hire-dev-page .cta-inner .cta-row > .desktop-right {
    display: block;
    flex: 0 0 100%;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    text-align: left;
}
/* process icons "same as ai development page": these carry fill="#150d29" on every path, which the
   violet set on the svg (as on AI Development) cannot reach; the paths take it directly */
.ai-dev-page.hire-dev-page .team-model-sec .inner-bg svg [fill="#150d29"] { fill: var(--ai-violet); }

/* ==========================================================================
   41. HEALTHCARE SOFTWARE DEVELOPMENT (healthcare-page)
   Every section is a finished one (the AI Automation set: hero, the two
   Benefits lists, CTA banner, services, tech stack). Band rhythm: the
   process list came straight before the case studies, both tinted, which
   reads as one long band, so working back from the case studies the page
   alternates: process white, tech stack tinted (its cards white, their tags
   tinted), services white (as the second services band on Web App), and the
   strip under the call to action follows (white below).
   ========================================================================== */
.ai-dev-page section.mb_38 { margin-bottom: 0; }   /* style.css's 38px gap, on this page set on a section (on the others, on a container) */
.ai-dev-page.healthcare-page .flexible-sec:has(+ .expert-coders-sec) { --cta-bottom: #FFFFFF; }
.ai-dev-page.healthcare-page .expert-coders-sec.padd-60 { background: #FFFFFF; }
.ai-dev-page.healthcare-page .techno_use_sec { background: var(--ai-tint); }
.ai-dev-page.healthcare-page .techno_use_sec .box-technology,
.ai-dev-page.healthcare-page .techno_use_sec .col-lg-4:last-child .box-technology { background: #FFFFFF; box-shadow: var(--ai-shadow); }
.ai-dev-page.healthcare-page .techno_use_sec .btn-group span { background: var(--ai-tint); border-color: transparent; }
.ai-dev-page.healthcare-page .techno_use_sec + .why-coding-sprint.padd-60 { background: #FFFFFF; }
/* tech stack heading with an intro under it (Healthcare; chunk 26 was built for a heading alone): the
   centred intro of every other section, 18px below the heading */
.ai-dev-page .techno_use_sec .heading2:has(> p) h2 { margin-bottom: 18px; }
.ai-dev-page .techno_use_sec .heading2 > p {
    max-width: 920px;
    margin: 0 auto;
    font-size: 18px;
    line-height: 1.65;
    color: var(--ai-body);
    text-align: center;
}
@media (max-width: 1370px) {
    .ai-dev-page .techno_use_sec .heading2 > p { font-size: 17px; }
}
@media (max-width: 575px) {
    .ai-dev-page .techno_use_sec .heading2 > p { font-size: 16px; }
}
/* Healthcare services: a <br/> after the cards (inside the section's wrapper) added an 18px line under
   them, so the space below the cards was bigger than above */
.ai-dev-page .expert-coders-sec :is(.mini-containerW, .mini-container) > br { display: none; }

/* ==========================================================================
   42. CONTACT US (contact-us-page)
   No finished twin for the whole page, so it is built from finished parts:
   a tinted band; the contact details as the deep violet panel of the calls
   to action (in place of the black card: the brand is purple and lime);
   the form as a white card (the services card), its fields shaped like the
   footer form's (12px corners, 14/16 padding) in a light version, the
   focus ring in brand violet; both buttons are the shared lime button
   (chunk 16 list).
   "make sure dont break contact form functionality": appearance only. The
   honeypot (inline, off screen), the hidden file input (opened by a click
   on the drop zone), the token, the reCAPTCHA button and the error lines
   the script inserts are never hidden, moved or resized here; the drop
   zone's "over" and file-name states are styled, not replaced. Same text,
   fields, names, links, map and logo.
   ========================================================================== */
.ai-dev-page.contact-us-page .contact-section { padding: 100px 0; background: var(--ai-tint); }
.ai-dev-page.contact-us-page .contact-section .row {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    gap: 32px;
    margin: 0;
}
.ai-dev-page.contact-us-page .contact-section .row > [class*="col-"] { width: auto; max-width: none; margin: 0; flex: none; }
/* the contact details: the violet panel */
.ai-dev-page.contact-us-page .contact-section .contact-left-sec {
    position: relative;
    padding: 40px 36px;
    border-radius: 24px;
    background: linear-gradient(160deg, #1E0228 0%, var(--ai-deep) 48%, #4A0360 100%);
    box-shadow: 0 30px 60px rgba(44, 2, 58, .28);
    overflow: hidden;
}
.ai-dev-page.contact-us-page .contact-section .contact-left-sec .contact-logo { margin: 0 0 28px; }
.ai-dev-page.contact-us-page .contact-section .contact-left-sec h4 {
    margin: 0 0 10px;
    font-family: "Rubik", sans-serif;
    font-size: 20px;
    line-height: 1.3;
    font-weight: 500;
    color: #FFFFFF;
}
.ai-dev-page.contact-us-page .contact-section .contact-left-sec > p {
    margin: 0 0 24px;
    font-size: 16px;
    line-height: 1.6;
    color: rgba(255, 255, 255, .82);
}
.ai-dev-page.contact-us-page .contact-section .contact-left-sec > p strong { color: #FFFFFF; font-weight: 600; }
.ai-dev-page.contact-us-page .contact-section .contact-detail {
    padding: 16px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .14);
}
.ai-dev-page.contact-us-page .contact-section .contact-detail:first-child { border-top: 1px solid rgba(255, 255, 255, .14); }
.ai-dev-page.contact-us-page .contact-section .contact-detail a {
    font-size: 16px;
    line-height: 1.5;
    color: #FFFFFF;
    transition: color .2s ease;
}
.ai-dev-page.contact-us-page .contact-section .contact-detail a:hover { color: var(--ai-lime); }
.ai-dev-page.contact-us-page .contact-section .contact-detail a span { color: rgba(255, 255, 255, .7); }
.ai-dev-page.contact-us-page .contact-section .contact-left-sec .map { margin-top: 24px; border-radius: 16px; overflow: hidden; }
.ai-dev-page.contact-us-page .contact-section .contact-left-sec .map img { border-radius: 16px; }
/* the form: a white card */
.ai-dev-page.contact-us-page .contact-section .contact-right {
    padding: 48px;
    border: 1px solid var(--ai-line);
    border-radius: 24px;
    background: #FFFFFF;
    box-shadow: var(--ai-shadow);
}
.ai-dev-page.contact-us-page .contact-section .contact-right .heading2 { margin: 0 0 32px; padding: 0; text-align: left; }
.ai-dev-page.contact-us-page .contact-section .contact-right .heading2:before {   /* short lime mark (decorative) */
    content: "";
    display: block;
    width: 44px;
    height: 4px;
    margin: 0 0 22px;
    border-radius: 2px;
    background: var(--ai-lime);
}
.ai-dev-page.contact-us-page .contact-section .contact-right .heading2 h2 {
    font-family: "Rubik", sans-serif;
    font-size: 42px;
    line-height: 1.14;
    font-weight: 500;
    letter-spacing: -.8px;
    text-align: left;
    color: var(--ai-ink);
}
.ai-dev-page.contact-us-page .contact-section .contact-right .heading2 > p {
    max-width: 760px;
    margin: 0;
    font-size: 18px;
    line-height: 1.65;
    text-align: left;
    color: var(--ai-body);
}
.ai-dev-page.contact-us-page .contact-section .form-filed label {
    margin: 0 0 8px;
    font-family: "Inter", sans-serif;
    font-size: 15px;
    line-height: 1.4;
    font-weight: 500;
    color: var(--ai-ink);
}
.ai-dev-page.contact-us-page .contact-section .form-filed :is(input:not([type="file"]):not([type="hidden"]):not(.honeypot-field), textarea) {
    width: 100%;
    min-height: 52px;
    padding: 14px 16px;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    line-height: 1.4;
    color: var(--ai-ink);
    background: var(--ai-tint);
    border: 1px solid transparent;
    border-radius: 12px;
    box-shadow: none;
    transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.ai-dev-page.contact-us-page .contact-section .form-filed :is(input:not([type="file"]):not([type="hidden"]):not(.honeypot-field), textarea)::placeholder { color: rgba(74, 61, 86, .7); }
.ai-dev-page.contact-us-page .contact-section .form-filed :is(input:not([type="file"]):not([type="hidden"]):not(.honeypot-field), textarea):focus {
    outline: none;
    background: #FFFFFF;
    border-color: var(--ai-violet);
    box-shadow: 0 0 0 4px rgba(91, 3, 117, .12);
}
.ai-dev-page.contact-us-page .contact-section .drop-zone {
    min-height: 56px;
    padding: 14px 16px;
    background: #FFFFFF;
    border: 1.5px dashed rgba(91, 3, 117, .32);
    border-radius: 12px;
    color: var(--ai-body);
    cursor: pointer;
    transition: border-color .2s ease, background-color .2s ease;
}
.ai-dev-page.contact-us-page .contact-section .drop-zone:hover,
.ai-dev-page.contact-us-page .contact-section .drop-zone.drop-zone--over { border-color: var(--ai-violet); background: var(--ai-tint); }
.ai-dev-page.contact-us-page .contact-section .drop-zone__prompt svg { color: var(--ai-violet); }
.ai-dev-page.contact-us-page .contact-section .drop-zone__filename { font-size: 15px; color: var(--ai-ink); }
.ai-dev-page.contact-us-page .contact-section .conttact-secure { margin: 16px 0 24px; font-size: 14px; color: var(--ai-body); }
@media (max-width: 1440px) {
    .ai-dev-page.contact-us-page .contact-section { padding: 88px 0; }
}
@media (max-width: 1370px) {
    .ai-dev-page.contact-us-page .contact-section .contact-right .heading2 h2 { font-size: 38px; }
    .ai-dev-page.contact-us-page .contact-section .contact-right .heading2 > p { font-size: 17px; }
    .ai-dev-page.contact-us-page .contact-section .contact-right { padding: 40px; }
    .ai-dev-page.contact-us-page .contact-section .contact-left-sec { padding: 34px 28px; }
}
@media (max-width: 991px) {
    .ai-dev-page.contact-us-page .contact-section { padding: 64px 0; }
    .ai-dev-page.contact-us-page .contact-section .row { grid-template-columns: minmax(0, 1fr); gap: 24px; }
    .ai-dev-page.contact-us-page .contact-section .contact-left-sec .map { max-width: 480px; }   /* full width it grew to ~830px square at 991; the image is not cropped */
    .ai-dev-page.contact-us-page .contact-section .contact-right .heading2 h2 { font-size: 32px; letter-spacing: -.5px; }
}
@media (max-width: 575px) {
    .ai-dev-page.contact-us-page .contact-section { padding: 48px 0; }
    .ai-dev-page.contact-us-page .contact-section .contact-right { padding: 28px 22px; border-radius: 20px; }
    .ai-dev-page.contact-us-page .contact-section .contact-left-sec { padding: 28px 22px; border-radius: 20px; }
    .ai-dev-page.contact-us-page .contact-section .contact-right .heading2 h2 { font-size: 27px; line-height: 1.2; }
    .ai-dev-page.contact-us-page .contact-section .contact-right .heading2 > p { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
    .ai-dev-page.contact-us-page .contact-section .form-filed :is(input, textarea),
    .ai-dev-page.contact-us-page .contact-section .drop-zone { transition: none; }
}

/* "on hover map button it's behave slide right": style.css centres the map button on the map with
   left:50% + translateX(-50%), and the shared button hover (translateY(-2px)) replaced that transform,
   so the button jumped right by half its width. The lift keeps the centring. */
.ai-dev-page.contact-us-page .contact-section a.map-btn:hover { transform: translate(-50%, -2px); }
@media (prefers-reduced-motion: reduce) {
    .ai-dev-page.contact-us-page .contact-section a.map-btn:hover { transform: translateX(-50%); }
    .ai-dev-page.contact-us-page .contact-section .submit-btn:hover { transform: none; }
}
/* the shared buttons' phone size, as every other main button */
@media (max-width: 575px) {
    .ai-dev-page.contact-us-page .contact-section .submit-btn,
    .ai-dev-page.contact-us-page .contact-section a.map-btn { min-height: 48px; padding: 0 26px; font-size: 16px; }
}

/* "below header and breadcrum gap check": the header is fixed, so this page (no hero) reserves its
   height as top padding. The page's own style reserved 143px (82px below 1200px) for the old header;
   with the shared header it is 123px (67px), which left a 20px (15px) white strip between the header
   and the breadcrumb. The padding now equals the header. */
.ai-dev-page.contact-us-page { padding-top: 123px; }
@media (max-width: 1199px) {
    .ai-dev-page.contact-us-page { padding-top: 67px; }
}

/* ==========================================================================
   43. HOME (index.php, body "ai-dev-page home home_n")
   "Next home" (2026-10-14). The shared sections (header, case studies,
   testimonials, blog, FAQ, contact, footer) take the shared design like on
   every other page. The page's own sections, each as its finished twin:
   - hero: the same video and two-column layout; the shared hero type (lime
     mark, heading scale, 19px lead text, lime button) and a violet veil in
     place of the black one;
   - service band: the violet "Why choose" band, the four cards white with
     their pictures on top;
   - "From frustration to automation": the services split header (heading
     left, intro and button right of a hairline) over the services cards;
   - "Tell us your biggest operational pain point": the call-to-action panel
     (chunks 7/7b) with this band's own picture under the veil;
   - "Human-led AI expertise" / "The collaboration of": the AI "Why" block,
     text beside the picture in a rounded frame, the second row mirrored;
   - "Why Startups Choose": the photo cards of Mobile App (chunk 35).
   Band rhythm: hero, violet, white, call to action, tint, white, then the
   shared case studies (tint)... The page's Figma rules (home.css, .home_n)
   are outweighed with `.ai-dev-page.home_n`. Same text, images, video, links.
   ========================================================================== */

/* ---- HERO (video) ---- */
.ai-dev-page.home_n .home_vid_sec.video-banner:before { display: none; }   /* "remove overlay on the home hero section": the video shows as it is (no veil, no black gradient) */
.ai-dev-page.home_n .home_vid_sec .banner-content p {
    margin: 0 0 14px;
    font-size: 17px;
    line-height: 1.5;
    letter-spacing: 0;
    color: rgba(255, 255, 255, .82);
    opacity: 1;
}
.ai-dev-page.home_n .home_vid_sec .banner-content p:before {   /* short lime mark above the heading (decorative), as the other heroes */
    content: "";
    display: block;
    width: 52px;
    height: 4px;
    margin-bottom: 22px;
    border-radius: 2px;
    background: var(--ai-lime);
}
.ai-dev-page.home_n .home_vid_sec .banner-content h1 {
    margin: 0;
    font-size: 58px;
    line-height: 1.06;
    font-weight: 500;
    letter-spacing: -1.4px;
    color: #FFFFFF;
}
.ai-dev-page.home_n .home_vid_sec .banner-desc p {
    margin: 0 0 28px;
    font-size: 19px;
    line-height: 1.6;
    letter-spacing: 0;
    color: rgba(255, 255, 255, .82);
    opacity: 1;
}

/* ---- SERVICE BAND: the violet band, four white cards ---- */
.ai-dev-page.home_n .service-sec {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 100px 0;
    background: linear-gradient(120deg, #1E0228 0%, var(--ai-deep) 45%, #4A0360 100%);
}
.ai-dev-page.home_n .service-sec:before,
.ai-dev-page.home_n .service-sec:after {        /* the </> mark (decorative), as chunk 22b */
    content: "";
    position: absolute;
    z-index: -1;
    -webkit-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 400'><g fill='none' stroke='white' stroke-width='22' stroke-linecap='round' stroke-linejoin='round'><path d='M190 80 L60 200 L190 320'/><path d='M410 80 L540 200 L410 320'/><path d='M350 50 L250 350'/></g></svg>") center / contain no-repeat;
    mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 400'><g fill='none' stroke='white' stroke-width='22' stroke-linecap='round' stroke-linejoin='round'><path d='M190 80 L60 200 L190 320'/><path d='M410 80 L540 200 L410 320'/><path d='M350 50 L250 350'/></g></svg>") center / contain no-repeat;
    pointer-events: none;
}
.ai-dev-page.home_n .service-sec:before { top: 50%; right: -60px; width: 640px; height: 427px; margin-top: -213px; background: rgba(255, 255, 255, .05); }
.ai-dev-page.home_n .service-sec:after { top: 32px; left: -40px; width: 240px; height: 160px; background: rgba(194, 201, 4, .10); }
.ai-dev-page.home_n .service-sec .row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
    margin: 0;
}
.ai-dev-page.home_n .service-sec .row > [class*="col-"] { display: flex; width: auto; max-width: none; margin: 0; padding: 0; }
.ai-dev-page.home_n .service-sec .full-content-column {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 16px 16px 28px;
    text-align: left;
    background: #FFFFFF;
    border: 0;
    border-radius: 20px;
    box-shadow: 0 18px 30px -22px rgba(0, 0, 0, .55);
    backdrop-filter: none;
    transition: transform .3s ease, box-shadow .3s ease;
}
.ai-dev-page.home_n .service-sec .full-content-column:hover { transform: translateY(-4px); box-shadow: 0 24px 36px -22px rgba(0, 0, 0, .65); }
.ai-dev-page.home_n .service-sec .full-content-column img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0 0 22px;
    border-radius: 12px;
}
.ai-dev-page.home_n .service-sec .full-content-column h3 {
    margin: 0 12px 10px;
    font-family: "Rubik", sans-serif;
    font-size: 21px;
    line-height: 1.3;
    font-weight: 500;
    letter-spacing: -.2px;
    color: var(--ai-ink);
}
.ai-dev-page.home_n .service-sec .full-content-column p {
    margin: 0 12px;
    font-size: 16px;
    line-height: 1.7;
    color: var(--ai-body);
}

/* ---- SERVICES: split header over the cards ---- */
.ai-dev-page.home_n .soft_serv_sec { padding: 96px 0; background: #FFFFFF; }
.ai-dev-page.home_n .soft_serv_sec .serv_block {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: 72px;
    align-items: start;
    margin: 0;
    padding: 0;
}
.ai-dev-page.home_n .soft_serv_sec .serv_head { width: auto; max-width: none; margin: 0; padding: 0; }
.ai-dev-page.home_n .soft_serv_sec .serv_head:before {   /* short lime mark (decorative) */
    content: "";
    display: block;
    width: 44px;
    height: 4px;
    margin: 0 0 22px;
    border-radius: 2px;
    background: var(--ai-lime);
}
.ai-dev-page.home_n .soft_serv_sec .serv_head h2 {
    max-width: none;
    margin: 0;
    font-size: 42px;
    line-height: 1.14;
    font-weight: 500;
    letter-spacing: -.8px;
    text-align: left;
    color: var(--ai-ink);
}
.ai-dev-page.home_n .soft_serv_sec .serv_head h2 span { color: inherit; font-weight: inherit; }   /* one colour, as every section heading */
.ai-dev-page.home_n .soft_serv_sec .serv_des {
    width: auto;
    max-width: none;
    margin: 0;
    padding: 6px 0 6px 36px;
    border-left: 1px solid var(--ai-line);
}
.ai-dev-page.home_n .soft_serv_sec .serv_des p {
    max-width: none;
    margin: 0 0 16px;
    font-size: 18px;
    line-height: 1.65;
    color: var(--ai-body);
}
.ai-dev-page.home_n .soft_serv_sec .serv_des .btn-group { margin: 12px 0 0; }
.ai-dev-page.home_n .soft_serv_sec .block_grid_sec {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
    margin: 52px 0 0;
    padding: 0;
}
.ai-dev-page.home_n .soft_serv_sec .block_grid_sec .full-content-column { width: auto; max-width: none; margin: 0; }

/* ---- CALL TO ACTION: "Tell us your biggest operational pain point" (the chunk 7/7b panel) ---- */
.ai-dev-page.home_n .solv_cta_sec {
    display: block;      /* home.css (>=1441) made it a 450px flex box centring the panel: 110px more space above it */
    min-height: 0;
    margin: 0;
    padding: 0;
    background: linear-gradient(180deg, #FFFFFF 0, #FFFFFF 50%, var(--ai-tint) 50%, var(--ai-tint) 100%);   /* white above (services), tint below */
}
.ai-dev-page.home_n .solv_cta_sec .container > .heading2 {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "mark  btn"
        "title btn"
        "text  btn";
    column-gap: 56px;
    align-items: center;
    width: 100%;
    max-width: none;
    margin: 0 !important;      /* the column carries Bootstrap's .m-auto (margin: auto !important) */
    padding: 60px 64px;
    text-align: left;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 24px;
    overflow: hidden;
    background:
        linear-gradient(120deg, rgba(23, 3, 31, .96) 0%, rgba(44, 2, 58, .94) 55%, rgba(62, 5, 84, .92) 100%),
        url(/assets/images/home/home-cta-bg.webp) center / cover no-repeat #2C023A;   /* this band's own picture */
    box-shadow: 0 24px 48px rgba(44, 2, 58, .22);
}
.ai-dev-page.home_n .solv_cta_sec .container > .heading2:before {
    content: "";
    grid-area: mark;
    width: 44px;
    height: 4px;
    margin: 0 0 20px;
    border-radius: 2px;
    background: var(--ai-lime);
}
.ai-dev-page.home_n .solv_cta_sec .container > .heading2 h2 {
    grid-area: title;
    max-width: 760px;
    margin: 0 0 12px;
    font-size: 36px;
    line-height: 1.2;
    font-weight: 500;
    letter-spacing: -.5px;
    text-align: left;
    color: #FFFFFF;
}
.ai-dev-page.home_n .solv_cta_sec .container > .heading2 p {
    grid-area: text;
    max-width: 760px;
    margin: 0;
    font-size: 18px;
    line-height: 1.6;
    text-align: left;
    color: rgba(255, 255, 255, .80);
}
.ai-dev-page.home_n .solv_cta_sec .cta-btn-inner { grid-area: btn; position: relative; isolation: isolate; display: flex; margin: 0; }
.ai-dev-page.home_n .solv_cta_sec .cta-btn-inner:before {    /* pins and traces (decorative), as chunk 7b */
    content: "";
    position: absolute;
    z-index: -1;
    top: 50%;
    right: -200px;
    left: -200px;
    height: 360px;
    transform: translateY(-50%);
    background:
        url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 560 360'><g fill='none' stroke='rgba(255,255,255,.2)' stroke-width='1.4' stroke-linejoin='round'><path d='M216 144 V128 L176 88 V82'/><path d='M216 216 V232 L176 272 V278'/><path d='M248 144 V128 L230 110 V96'/><path d='M248 216 V232 L230 250 V264'/><path d='M280 144 V86'/><path d='M280 216 V274'/><path d='M312 144 V128 L330 110 V96'/><path d='M312 216 V232 L330 250 V264'/><path d='M344 144 V128 L384 88 V82'/><path d='M344 216 V232 L384 272 V278'/></g><circle cx='176' cy='82' r='4.5' fill='%232C023A' stroke='rgba(255,255,255,.55)' stroke-width='1.5'/><circle cx='176' cy='278' r='4.5' fill='%232C023A' stroke='rgba(255,255,255,.55)' stroke-width='1.5'/><circle cx='230' cy='96' r='4.5' fill='%232C023A' stroke='rgba(255,255,255,.55)' stroke-width='1.5'/><circle cx='230' cy='264' r='4.5' fill='%232C023A' stroke='rgba(255,255,255,.55)' stroke-width='1.5'/><circle cx='280' cy='86' r='5.5' fill='%23C2C904'/><circle cx='280' cy='274' r='5.5' fill='%23C2C904'/><circle cx='330' cy='96' r='4.5' fill='%232C023A' stroke='rgba(255,255,255,.55)' stroke-width='1.5'/><circle cx='330' cy='264' r='4.5' fill='%232C023A' stroke='rgba(255,255,255,.55)' stroke-width='1.5'/><circle cx='384' cy='82' r='4.5' fill='%232C023A' stroke='rgba(255,255,255,.55)' stroke-width='1.5'/><circle cx='384' cy='278' r='4.5' fill='%232C023A' stroke='rgba(255,255,255,.55)' stroke-width='1.5'/></svg>") center / 560px 360px no-repeat,
        url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 360'><g fill='none' stroke='rgba(255,255,255,.2)' stroke-width='1.4' stroke-linejoin='round'><path d='M10 170 H38 L54 154 H200'/><path d='M10 190 H38 L54 206 H200'/></g></svg>") right center / 200px 360px no-repeat;
    pointer-events: none;
}
.ai-dev-page.home_n .solv_cta_sec .cta-btn-inner:after {     /* the outline hugging the button (decorative) */
    content: "";
    position: absolute;
    z-index: -1;
    inset: -10px;
    border: 1.2px solid rgba(255, 255, 255, .18);
    border-radius: 999px;
    pointer-events: none;
}

/* ---- "Human-led AI expertise" / "The collaboration of": text beside a framed picture ---- */
.ai-dev-page.home_n .flexible-sec { margin: 0; padding: 100px 0; background: var(--ai-tint); }
.ai-dev-page.home_n .flexible-sec .full-width {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 72px;
    align-items: center;
    box-sizing: border-box;
    width: 90%;                 /* the section container's own measurements (it is not a .container) */
    max-width: 1230px;
    margin: 0 auto;
    padding: 0 var(--bs-gutter-x, .75rem);
    background: none;
}
.ai-dev-page.home_n .flexible-sec .full-width + .full-width { margin-top: 100px; }
.ai-dev-page.home_n .flexible-sec .text-column { width: auto; max-width: none; margin: 0; padding: 0; }
.ai-dev-page.home_n .flexible-sec .image-column { position: static; justify-self: stretch; width: auto; min-width: 0; max-width: 100%; aspect-ratio: auto; margin: 0; padding: 0; }   /* min-width 0: the grid track, not the picture's own width, sets it; home.css (from 1441px) made it a 756/752 box with the picture absolute inside, and the portrait picture ran out of it into the bottom padding: it wraps its picture now */
.ai-dev-page.home_n .flexible-sec .image-column img {
    position: static;
    display: block;
    width: 100%;
    height: auto;
    border-radius: 20px;
    box-shadow: 0 24px 48px -24px rgba(44, 2, 58, .35);
}
.ai-dev-page.home_n .flexible-sec .text-column .serv_head { margin: 0; padding: 0; }
.ai-dev-page.home_n .flexible-sec .text-column .serv_head:before,
.ai-dev-page.home_n .flexible-sec .text-column > h2.new-color:before {   /* short lime mark (decorative) */
    content: "";
    display: block;
    width: 44px;
    height: 4px;
    margin: 0 0 22px;
    border-radius: 2px;
    background: var(--ai-lime);
}
.ai-dev-page.home_n .flexible-sec .text-column h2 {
    max-width: none;
    margin: 0 0 18px;
    font-size: 42px;
    line-height: 1.14;
    font-weight: 500;
    letter-spacing: -.8px;
    text-align: left;
    color: var(--ai-ink);
}
.ai-dev-page.home_n .flexible-sec .text-column h2 span { color: inherit; font-weight: inherit; }
.ai-dev-page.home_n .flexible-sec .text-column p {
    max-width: none;
    margin: 0 0 16px;
    font-size: 18px;
    line-height: 1.65;
    text-align: left;
    color: var(--ai-body);
}
.ai-dev-page.home_n .flexible-sec .text-column p:last-child { margin-bottom: 0; }
.ai-dev-page.home_n .flexible-sec .text-column p a { color: var(--ai-violet); text-decoration: underline; text-underline-offset: 3px; }
.ai-dev-page.home_n .flexible-sec .text-column .logo-flex { margin: 0 0 22px; }
.ai-dev-page.home_n .flexible-sec a.home_new_btn { margin-top: 12px; }

/* ---- WHY STARTUPS CHOOSE CODING SPRINT: feature tabs (round 5 design 1, picked 2026-10-15) ----
   White band, heading on the left. From 992px the six reasons are separate white cards on the left, each
   with a round arrow (decorative); the open one shows its text, a lime edge, a soft shadow and a lime
   arrow, and its picture fills the large frame on the right (left-list look B, picked 2026-10-15). Open =
   the hovered reason, else the first. Each picture is set inline on its card, so the card hides its own
   background (background-size 0) and its :before shows the same picture (background-image: inherit):
   nothing stretched, nothing replaced. From 992px the six :before boxes are stacked in the frame (cards
   position: static against the positioned list) and only the open one shows; its transparent left border
   spans the gap, so the pointer can cross from the list onto the picture without the reason closing.
   Browsers without :has() keep the first reason open as well (two open) instead of hiding everything.
   Up to 991px every reason is open with its own picture on top (no hover needed on touch screens).
   home.css drew a black gradient on that :before; it is the picture now. */
.ai-dev-page.home_n .why_sec {
    padding: 100px 0;
    background: #FFFFFF;
}
.ai-dev-page.home_n .why_sec .container > h2:before {   /* short lime mark (decorative) */
    content: "";
    display: block;
    width: 44px;
    height: 4px;
    margin: 0 0 22px;
    border-radius: 2px;
    background: var(--ai-lime);
}
.ai-dev-page.home_n .why_sec .container > h2 {
    max-width: none;
    margin: 0;
    font-size: 42px;
    line-height: 1.14;
    font-weight: 500;
    letter-spacing: -.8px;
    text-align: left;
    color: var(--ai-ink);
}
.ai-dev-page.home_n .why_sec .container > h2 span { color: inherit; font-weight: inherit; }
.ai-dev-page.home_n .why_sec .wh_grid_block {
    max-width: none;     /* home.css held it to 1224 (the Figma narrow tier): every section is on the container now */
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px 28px;
    margin: 48px 0 0;
    padding: 0;
}
.ai-dev-page.home_n .why_sec .wh_block {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    min-height: 0;
    margin: 0;
    padding: 0;
    background-size: 0 0;                         /* the picture shows in the :before box */
    background-repeat: no-repeat;
    background-color: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
}
.ai-dev-page.home_n .why_sec .wh_block:before {      /* the card's own picture (home.css: a black gradient here) */
    content: "";
    display: block;
    position: relative;
    inset: auto;
    z-index: 0;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    margin: 0 0 20px;
    border-radius: 16px;
    opacity: 1;
    background: none;
    background-image: inherit;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.ai-dev-page.home_n .why_sec .wh_block h3 {
    position: relative;
    margin: 0 0 8px;
    font-family: "Rubik", sans-serif;
    font-size: 20px;
    line-height: 1.3;
    font-weight: 500;
    letter-spacing: -.2px;
    color: var(--ai-ink);
}
.ai-dev-page.home_n .why_sec .wh_block p {
    position: relative;
    margin: 0;
    font-size: 16px;
    line-height: 1.7;
    color: var(--ai-body);
}
@media (min-width: 992px) {
    .ai-dev-page.home_n .why_sec .wh_grid_block {
        --why-gap: 56px;                          /* list to picture */
        position: relative;
        display: block;
        margin: 42px 0 -6px;                      /* less the cards' 6px transparent edges: 48px under the heading, 100px to the band's end */
        padding: 0 calc(50% + var(--why-gap)) 0 0;
    }
    .ai-dev-page.home_n .why_sec .wh_block {
        position: static;                         /* the pictures stack against the list, not the row */
        display: grid;
        grid-template-columns: minmax(0, 1fr) 38px;   /* words | arrow */
        grid-template-rows: auto minmax(0, 0fr);             /* title | text: the text row opens to 1fr (minimum 0, so a closed text takes no room) */
        column-gap: 20px;
        align-items: center;
        margin: 0;
        padding: 20px 20px 20px 26px;
        background-color: #FFFFFF;
        background-clip: padding-box;
        border: 0;
        border-top: 6px solid transparent;        /* the 12px between cards belongs to the cards: no un-hovered gap */
        border-bottom: 6px solid transparent;
        border-radius: 16px / 22px;               /* 16px round at the visible edge */
        box-shadow: inset 3px 0 0 transparent, inset 0 0 0 1px var(--ai-line), 0 0 0 0 rgba(44, 2, 58, 0);   /* lime edge | hairline | (no outer shadow: the next card covered it and left a strip in the gap) */
        cursor: default;
        transition: grid-template-rows .4s ease, box-shadow .3s ease;
    }
    .ai-dev-page.home_n .why_sec .wh_block:after {     /* round arrow (decorative) */
        content: "";
        grid-column: 2;
        grid-row: 1;
        width: 38px;
        height: 38px;
        border: 1px solid var(--ai-line);
        border-radius: 50%;
        background: #FFFFFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4' fill='none' stroke='%2314081C' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 15px no-repeat;
        transition: background-color .3s ease, border-color .3s ease;
    }
    .ai-dev-page.home_n .why_sec .wh_block:before {
        position: absolute;
        top: 6px;                                 /* level with the first and last cards' visible edges */
        right: 0;
        bottom: 6px;
        left: auto;
        z-index: 0;
        width: calc(50% + var(--why-gap));
        height: auto;
        aspect-ratio: auto;
        margin: 0;
        border-left: var(--why-gap) solid transparent;   /* invisible bridge over the gap */
        border-radius: calc(24px + var(--why-gap)) 24px 24px calc(24px + var(--why-gap)) / 24px;
        background-origin: padding-box;
        background-clip: padding-box;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0s linear .8s;        /* a closing picture stays until the next one has faded in over it */
    }
    .ai-dev-page.home_n .why_sec .wh_block h3 {
        grid-column: 1;
        grid-row: 1;
        margin: 0;
        font-size: 21px;
        color: var(--ai-body);
        transition: color .25s ease;
    }
    .ai-dev-page.home_n .why_sec .wh_block p {
        grid-column: 1;
        grid-row: 2;
        align-self: stretch;
        min-height: 0;                            /* lets the 0fr row close it */
        margin: 10px 0 0;
        overflow: hidden;
        opacity: 0;
        visibility: hidden;                       /* closed: not drawn, not hoverable */
        transition: opacity .25s ease, visibility 0s linear .4s;
    }
    /* open: the hovered reason, and the first one */
    .ai-dev-page.home_n .why_sec .wh_block:first-child,
    .ai-dev-page.home_n .why_sec .wh_block:hover { grid-template-rows: auto minmax(0, 1fr); box-shadow: inset 3px 0 0 var(--ai-lime), inset 0 0 0 1px rgba(91, 3, 117, .30), 0 0 0 0 rgba(44, 2, 58, 0); }
    .ai-dev-page.home_n .why_sec .wh_block:first-child:after,
    .ai-dev-page.home_n .why_sec .wh_block:hover:after { background-color: var(--ai-lime); border-color: var(--ai-lime); }
    .ai-dev-page.home_n .why_sec .wh_block:first-child:before,
    .ai-dev-page.home_n .why_sec .wh_block:hover:before { z-index: 1; opacity: 1; pointer-events: auto; transition: opacity .45s ease; }
    .ai-dev-page.home_n .why_sec .wh_block:first-child h3,
    .ai-dev-page.home_n .why_sec .wh_block:hover h3 { color: var(--ai-ink); }
    .ai-dev-page.home_n .why_sec .wh_block:first-child p,
    .ai-dev-page.home_n .why_sec .wh_block:hover p { opacity: 1; visibility: visible; transition: opacity .35s ease .1s, visibility 0s; }
    /* ... the first one closes while another is hovered */
    .ai-dev-page.home_n .why_sec .wh_grid_block:has(.wh_block:hover) .wh_block:first-child:not(:hover) { grid-template-rows: auto minmax(0, 0fr); box-shadow: inset 3px 0 0 transparent, inset 0 0 0 1px var(--ai-line), 0 0 0 0 rgba(44, 2, 58, 0); }
    .ai-dev-page.home_n .why_sec .wh_grid_block:has(.wh_block:hover) .wh_block:first-child:not(:hover):after { background-color: #FFFFFF; border-color: var(--ai-line); }
    .ai-dev-page.home_n .why_sec .wh_grid_block:has(.wh_block:hover) .wh_block:first-child:not(:hover):before { z-index: 0; opacity: 0; pointer-events: none; transition: opacity 0s linear .8s; }
    .ai-dev-page.home_n .why_sec .wh_grid_block:has(.wh_block:hover) .wh_block:first-child:not(:hover) h3 { color: var(--ai-body); }
    .ai-dev-page.home_n .why_sec .wh_grid_block:has(.wh_block:hover) .wh_block:first-child:not(:hover) p { opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility 0s linear .4s; }
}
@media (min-width: 992px) and (max-width: 1365px) {   /* some texts wrap to three lines here: every text keeps three, so the list (and the picture) keep one height */
    .ai-dev-page.home_n .why_sec .wh_block p { min-height: calc(1.7em * 3); }
}
@media (min-width: 992px) and (max-width: 1099px) {   /* the last text ran to four lines at 992-994 */
    .ai-dev-page.home_n .why_sec .wh_block { column-gap: 14px; }
}

@media (max-width: 1440px) {
    .ai-dev-page.home_n .home_vid_sec .banner-content h1 { font-size: 50px; }
    .ai-dev-page.home_n .home_vid_sec .banner-desc p { font-size: 18px; }
}
@media (min-width: 1441px) and (max-width: 1549px) {
    .ai-dev-page.home_n .flexible-sec .full-width { width: calc(100% - 120px); max-width: 1450px; }
}
@media (min-width: 1550px) {
    .ai-dev-page.home_n .flexible-sec .full-width { max-width: 1392px; }
}
@media (max-width: 1370px) {
    .ai-dev-page.home_n .soft_serv_sec .serv_head h2,
    .ai-dev-page.home_n .flexible-sec .text-column h2,
    .ai-dev-page.home_n .why_sec .container > h2 { font-size: 38px; }
    .ai-dev-page.home_n .soft_serv_sec .serv_des p,
    .ai-dev-page.home_n .flexible-sec .text-column p { font-size: 17px; }
    .ai-dev-page.home_n .soft_serv_sec .block_grid_sec { gap: 22px; }
    .ai-dev-page.home_n .solv_cta_sec .container > .heading2 { padding: 52px 48px; column-gap: 40px; }
    .ai-dev-page.home_n .solv_cta_sec .container > .heading2 h2 { font-size: 32px; }
    .ai-dev-page.home_n .solv_cta_sec .container > .heading2 p { font-size: 17px; }
    .ai-dev-page.home_n .why_sec .wh_block h3 { font-size: 20px; }
    .ai-dev-page.home_n .flexible-sec .full-width { column-gap: 56px; }
}
@media (max-width: 1250px) {
    .ai-dev-page.home_n .flexible-sec .full-width { width: 95%; }
}
@media (max-width: 1199px) {
    .ai-dev-page.home_n .service-sec .row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ai-dev-page.home_n .why_sec .wh_grid_block { --why-gap: 40px; }
}
@media (max-width: 991px) {
        .ai-dev-page.home_n .home_vid_sec .banner-content h1 { font-size: 40px; letter-spacing: -.8px; }
    .ai-dev-page.home_n .service-sec,
    .ai-dev-page.home_n .flexible-sec,
    .ai-dev-page.home_n .why_sec { padding: 64px 0; }
    .ai-dev-page.home_n .soft_serv_sec { padding: 64px 0; }
    .ai-dev-page.home_n .soft_serv_sec .serv_head h2,
    .ai-dev-page.home_n .flexible-sec .text-column h2,
    .ai-dev-page.home_n .why_sec .container > h2 { font-size: 32px; letter-spacing: -.5px; }
    .ai-dev-page.home_n .soft_serv_sec .serv_block { grid-template-columns: minmax(0, 1fr); }
    .ai-dev-page.home_n .soft_serv_sec .serv_des { margin-top: 18px; padding: 0; border-left: 0; }
    .ai-dev-page.home_n .soft_serv_sec .block_grid_sec { grid-template-columns: minmax(0, 1fr); gap: 18px; margin-top: 36px; }
    .ai-dev-page.home_n .solv_cta_sec .container > .heading2 {
        padding: 44px 36px 48px;
        border-radius: 20px;
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "mark" "title" "text" "btn";
    }
    .ai-dev-page.home_n .solv_cta_sec .container > .heading2 h2 { font-size: 28px; }
    .ai-dev-page.home_n .solv_cta_sec .cta-btn-inner { margin-top: 28px; justify-self: start; }
    .ai-dev-page.home_n .solv_cta_sec .cta-btn-inner:before,
    .ai-dev-page.home_n .solv_cta_sec .cta-btn-inner:after { display: none; }
    .ai-dev-page.home_n .flexible-sec .full-width { grid-template-columns: minmax(0, 1fr); row-gap: 36px; }
    .ai-dev-page.home_n .flexible-sec .full-width + .full-width { margin-top: 64px; }
    .ai-dev-page.home_n .flexible-sec .full-width .text-column { order: 1; }   /* text first, picture under it, in both rows */
    .ai-dev-page.home_n .flexible-sec .full-width .image-column { order: 2; max-width: 560px; }   /* stacked, the portrait pictures grew ~1000px tall; scaled, not cropped */
    .ai-dev-page.home_n .why_sec .wh_grid_block { margin-top: 36px; gap: 36px 24px; }
}
@media (max-width: 767px) {
    .ai-dev-page.home_n .flexible-sec .full-width { padding: 0 15px; }
}
@media (max-width: 756px) {
    .ai-dev-page.home_n .flexible-sec .full-width { width: 100%; }   /* the shared container is 100% from here down */
}
@media (max-width: 575px) {
    .ai-dev-page.home_n .home_vid_sec .banner-content h1 { font-size: 32px; line-height: 1.12; }
    .ai-dev-page.home_n .home_vid_sec .banner-desc p { font-size: 16px; }
    .ai-dev-page.home_n .service-sec,
    .ai-dev-page.home_n .soft_serv_sec,
    .ai-dev-page.home_n .flexible-sec,
    .ai-dev-page.home_n .why_sec { padding: 48px 0; }
    .ai-dev-page.home_n .service-sec .row { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .ai-dev-page.home_n .why_sec .wh_grid_block { grid-template-columns: minmax(0, 1fr); gap: 32px; }
    .ai-dev-page.home_n .service-sec:after { display: none; }
    .ai-dev-page.home_n .soft_serv_sec .serv_head h2,
    .ai-dev-page.home_n .flexible-sec .text-column h2,
    .ai-dev-page.home_n .why_sec .container > h2 { font-size: 27px; line-height: 1.2; }
    .ai-dev-page.home_n .soft_serv_sec .serv_des p,
    .ai-dev-page.home_n .flexible-sec .text-column p { font-size: 16px; }
    .ai-dev-page.home_n .solv_cta_sec .container > .heading2 { padding: 36px 24px 40px; border-radius: 16px; }
    .ai-dev-page.home_n .solv_cta_sec .container > .heading2 h2 { font-size: 24px; letter-spacing: -.3px; }
    .ai-dev-page.home_n .solv_cta_sec .container > .heading2 p { font-size: 16px; }
    .ai-dev-page.home_n .flexible-sec .full-width + .full-width { margin-top: 48px; }
    .ai-dev-page.home_n .why_sec .wh_block h3 { font-size: 19px; }
}
@media (prefers-reduced-motion: reduce) {
    .ai-dev-page.home_n .service-sec .full-content-column,
    .ai-dev-page.home_n .why_sec .wh_block,
    .ai-dev-page.home_n .why_sec .wh_block:before,
    .ai-dev-page.home_n .why_sec .wh_block:after,
    .ai-dev-page.home_n .why_sec .wh_block h3,
    .ai-dev-page.home_n .why_sec .wh_block p { transition: none; }
    .ai-dev-page.home_n .service-sec .full-content-column:hover { transform: none; }
}

/* home.css sets the "Why" container to 100% from 767px; the shared container is 95% down to 757px */
@media (min-width: 757px) and (max-width: 767px) {
    .ai-dev-page.home_n .why_sec > .container { width: 95%; margin-left: auto; margin-right: auto; }
}

/* ---- TYPE CONSISTENCY (site-wide audit, 2026-10-16) ----
   The home page's service cards ("AI Workflow Automation"...) kept home.css's #555 grey text: the one card text on
   the site not in the body colour. Same wording. */
.ai-dev-page.home_n .soft_serv_sec .full-content-column p.home_n_text { color: var(--ai-body); }

/* ==========================================================================
   INDUSTRIES: the hairline checklist (picked A, 2026-10-16)
   "Industries We Support" / "Business Industries" on every page with the shared panel (AI Development, Machine
   Learning, Mobile App, Custom Software, MVP) and the Startups page's own version. The industries were white
   tiles; now an open list in two columns - each industry on its row with its chevron and a hairline under it
   (violet on hover) - and the closing note in a soft callout with a lime edge. Same heading, text, industry
   names, picture and chevrons.
   ========================================================================== */
.ai-dev-page .industry-sec.sam-why-panel ul.industry-list { column-gap: 40px; row-gap: 0; margin: 28px 0; }
.ai-dev-page .industry-sec.sam-why-panel ul.industry-list li {
    min-height: 0;
    padding: 16px 4px 16px 40px;
    background: none;
    border: 0;
    border-bottom: 1px solid rgba(44, 2, 58, .12);
    border-radius: 0;
    box-shadow: none;
    transition: border-color .25s ease, color .25s ease;
}
.ai-dev-page .industry-sec.sam-why-panel ul.industry-list li:before { left: 0; }
.ai-dev-page .industry-sec.sam-why-panel ul.industry-list li:hover { border-color: var(--ai-violet); box-shadow: none; color: var(--ai-violet); }
/* the closing note: a soft callout (a violet wash reads on the white and on the tinted band) */
.ai-dev-page .industry-sec.sam-why-panel ul.industry-list + p.sam-why-lead,
.ai-dev-page.sds-page .sam-why.sam-why-panel:has(.list-itme) .list-itme + p.sam-why-lead {
    padding: 18px 22px;
    background: rgba(91, 3, 117, .05);
    border-left: 3px solid var(--ai-lime);
    border-radius: 0 12px 12px 0;
}
/* the Startups page's version (its industries are div.list-itme > h3): the same two columns */
@media (min-width: 576px) {
    .ai-dev-page.sds-page .sam-why.sam-why-panel:has(.list-itme) .col-lg-6:has(> .list-itme) {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 40px;
        align-content: center;
    }
    .ai-dev-page.sds-page .sam-why.sam-why-panel:has(.list-itme) .col-lg-6:has(> .list-itme) > :not(.list-itme) { grid-column: 1 / -1; }
}
.ai-dev-page.sds-page .sam-why.sam-why-panel:has(.list-itme) .home_n_text + .list-itme:nth-child(n) { margin-top: 0; }
.ai-dev-page.sds-page .sam-why.sam-why-panel:has(.list-itme) p.sam-why-lead:first-of-type { margin-bottom: 28px; }
.ai-dev-page.sds-page .sam-why.sam-why-panel:has(.list-itme) .list-itme + .home_n_text { margin-top: 28px; }
.ai-dev-page.sds-page .sam-why.sam-why-panel:has(.list-itme) .list-itme:nth-child(n) {
    display: flex;
    align-items: center;
    padding: 16px 4px 16px 40px;
    background: none;
    border-bottom: 1px solid rgba(44, 2, 58, .12);
    transition: border-color .25s ease;
}
.ai-dev-page.sds-page .sam-why.sam-why-panel:has(.list-itme) .list-itme + .list-itme:after { display: none; }   /* the hairline is now under every row */
.ai-dev-page.sds-page .sam-why.sam-why-panel:has(.list-itme) .list-itme:nth-child(n):before {   /* the chevron, as the shared panel */
    left: 0;
    width: 26px;
    height: 24px;
    margin-top: -12px;
    background-size: contain;
    background-position: center;
}
.ai-dev-page.sds-page .sam-why.sam-why-panel:has(.list-itme) .list-itme h3 {
    font-family: "Inter", sans-serif;
    font-size: 16.5px;
    line-height: 1.4;
    font-weight: 500;
    letter-spacing: 0;
}
.ai-dev-page.sds-page .sam-why.sam-why-panel:has(.list-itme) .list-itme:hover { border-color: var(--ai-violet); }
@media (max-width: 575px) {
    .ai-dev-page .industry-sec.sam-why-panel ul.industry-list { grid-template-columns: minmax(0, 1fr); margin: 24px 0; }
    .ai-dev-page .industry-sec.sam-why-panel ul.industry-list li { padding: 14px 4px 14px 36px; font-size: 15.5px; }
    .ai-dev-page .industry-sec.sam-why-panel ul.industry-list li:before { left: 0; }
    .ai-dev-page .industry-sec.sam-why-panel ul.industry-list + p.sam-why-lead,
    .ai-dev-page.sds-page .sam-why.sam-why-panel:has(.list-itme) .list-itme + p.sam-why-lead { padding: 16px 18px; }
    .ai-dev-page.sds-page .sam-why.sam-why-panel:has(.list-itme) .list-itme:nth-child(n) { padding: 14px 4px 14px 36px; background: none; }
    .ai-dev-page.sds-page .sam-why.sam-why-panel:has(.list-itme) .list-itme:nth-child(n):before { width: 22px; height: 20px; margin-top: -10px; background-size: contain; }
    .ai-dev-page.sds-page .sam-why.sam-why-panel:has(.list-itme) .list-itme h3 { font-size: 15.5px; }
}
@media (prefers-reduced-motion: reduce) {
    .ai-dev-page .industry-sec.sam-why-panel ul.industry-list li,
    .ai-dev-page.sds-page .sam-why.sam-why-panel:has(.list-itme) .list-itme:nth-child(n) { transition: none; }
}

/* ==========================================================================
   CUSTOM SOFTWARE: every card takes the home page's card hover (2026-10-16, "cards hover same as front
   hover") - the card rises 6px, a soft violet edge and a deeper shadow, a violet-to-lime rule draws in along
   the top, the icon tile turns violet. "Custom Software Built For Real Business Problems" were four cells
   of one panel (a hover could only tint a cell): they are four cards now, in the same 2 x 2 order.
   Where a card's ::before/::after already draw its tile or marker, the rule is a background stripe that
   grows from the left (it looks the same). Same wording, icons and order.
   ========================================================================== */
/* 1. the four reasons: separate cards */
.ai-dev-page.custom-software-page .expert-coders-sec .heading2 > .row:has(> .col-lg-3) {
    gap: 24px;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
}
.ai-dev-page.custom-software-page .expert-coders-sec .heading2 > .row > [class*="col-"]:nth-child(n) .full-content-column {
    background: #FFFFFF;
    border: 1px solid var(--ai-line);
    border-radius: var(--ai-radius);
    box-shadow: var(--ai-shadow);
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.ai-dev-page.custom-software-page .expert-coders-sec .heading2 > .row > [class*="col-"]:nth-child(n) .full-content-column:hover {
    transform: translateY(-6px);
    background: #FFFFFF;
    border-color: rgba(91, 3, 117, .22);
    box-shadow: var(--ai-shadow-hover);
}
.ai-dev-page.custom-software-page .expert-coders-sec .heading2 .full-content-column:before { display: block; }   /* the home cards' rule along the top (chunk 1) */

/* 2. services */
.ai-dev-page.custom-software-page .cs-services-sec .cs-block { overflow: hidden; transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
.ai-dev-page.custom-software-page .cs-services-sec .cs-block:before {   /* violet-to-lime rule that draws in on hover (decorative) */
    content: "";
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, var(--ai-violet), var(--ai-lime));
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .4s ease;
}
.ai-dev-page.custom-software-page .cs-services-sec .cs-block:hover { transform: translateY(-6px); border-color: rgba(91, 3, 117, .22); box-shadow: var(--ai-shadow-hover); }
.ai-dev-page.custom-software-page .cs-services-sec .cs-block:hover:before { transform: scaleX(1); }

/* 3. the process steps (their marker sits outside the card, so the rule is a background stripe) */
.ai-dev-page.custom-software-page .cs-process-sec .cs-block,
.ai-dev-page.custom-software-page .cs-process-sec .cs-block:hover {
    background: #FFFFFF linear-gradient(90deg, var(--ai-violet), var(--ai-lime)) left top / 0 3px no-repeat;
    transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease, background-size .4s ease;
}
.ai-dev-page.custom-software-page .cs-process-sec .cs-block:hover {
    transform: translateY(-6px);
    border-color: rgba(91, 3, 117, .22);
    background-size: 100% 3px;
}

/* the step number sits on the column, so it rises with its card */
.ai-dev-page.custom-software-page .cs-process-sec .cs-grid > [class*="col-"]:after { transition: color .3s ease, transform .3s ease; }
.ai-dev-page.custom-software-page .cs-process-sec .cs-grid > [class*="col-"]:has(> .cs-block:hover):after { transform: translateY(-6px); }

/* 4. benefits ("Why Are More UK Businesses Moving to Bespoke Software?") */
.ai-dev-page.custom-software-page .cs-benefits-sec .cs-twocol .list-itme {
    border: 1px solid var(--ai-line);
    background: #FFFFFF linear-gradient(90deg, var(--ai-violet), var(--ai-lime)) left top / 0 3px no-repeat;
    transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease, background-size .4s ease;
}
.ai-dev-page.custom-software-page .cs-benefits-sec .cs-twocol .list-itme:hover {
    transform: translateY(-6px);
    border-color: rgba(91, 3, 117, .22);
    box-shadow: var(--ai-shadow-hover);
    background-size: 100% 3px;
}
/* the tile keeps its own hover (violet ring, small lift): its chevron has a violet stroke that a violet tile would hide */

@media (prefers-reduced-motion: reduce) {
    .ai-dev-page.custom-software-page .expert-coders-sec .heading2 > .row > [class*="col-"]:nth-child(n) .full-content-column,
    .ai-dev-page.custom-software-page .cs-services-sec .cs-block,
    .ai-dev-page.custom-software-page .cs-process-sec .cs-block,
    .ai-dev-page.custom-software-page .cs-benefits-sec .cs-twocol .list-itme { transition: none; }
    .ai-dev-page.custom-software-page .expert-coders-sec .heading2 > .row > [class*="col-"]:nth-child(n) .full-content-column:hover,
    .ai-dev-page.custom-software-page .cs-services-sec .cs-block:hover,
    .ai-dev-page.custom-software-page .cs-process-sec .cs-block:hover,
    .ai-dev-page.custom-software-page .cs-benefits-sec .cs-twocol .list-itme:hover,
    .ai-dev-page.custom-software-page .cs-process-sec .cs-grid > [class*="col-"]:has(> .cs-block:hover):after { transform: none; }
}

/* ==========================================================================
   44. HIRE AN OPENAI DEVELOPER (openai-dev-page, hire-openai-developer.php)
   New page (2026-10-16): copy from the client's Google Doc, sections from the
   Figma frame "OpenAI Developer" (2428:1897), drawn in the site's new layout.
   Finished sections used as they are: hero (its own picture, added to the hero
   list above), the "Why" panel (its own picture), the services cards, the call
   to action, the benefits list, testimonials, case studies, insights and the
   FAQ (the shared sections in the site's usual order). New here: the
   ways-of-working table, the hiring step cards and the tech tabs (a side menu). Bands
   alternate white / tint down the page; the call to action sits between two
   white bands.
   ========================================================================== */
/* hero: the Figma picture (a developer at a laptop with the OpenAI mark) under the shared veil */
.ai-dev-page.openai-dev-page .banner-sec.openai-banner {
    background: #080A12 url('/assets/images/hire-openai-developer/Hero-section-banner.webp') 72% center / cover no-repeat;
}
.ai-dev-page.openai-dev-page .banner-sec.openai-banner .banner-content p { max-width: 700px; }   /* a long intro: four lines, not six */

/* the shared heading pieces of the two new sections */
.ai-dev-page.openai-dev-page :is(.openai-models-sec, .openai-steps-sec, .openai-tech-sec) .heading2 {
    max-width: 1040px;
    margin: 0 auto 48px;
    padding: 0;
    text-align: center;
}
.ai-dev-page.openai-dev-page :is(.openai-models-sec, .openai-steps-sec, .openai-tech-sec) .heading2:before {   /* short lime mark (decorative) */
    content: "";
    display: block;
    width: 44px;
    height: 4px;
    margin: 0 auto 22px;
    border-radius: 2px;
    background: var(--ai-lime);
}
.ai-dev-page.openai-dev-page :is(.openai-models-sec, .openai-steps-sec, .openai-tech-sec) .heading2 h2 {
    max-width: none;
    margin: 0;
    font-family: 'Rubik', sans-serif;
    font-size: 42px;
    line-height: 1.14;
    font-weight: 500;
    letter-spacing: -.8px;
    color: var(--ai-ink);
}
.ai-dev-page.openai-dev-page :is(.openai-models-sec, .openai-steps-sec, .openai-tech-sec) .heading2 > p {
    max-width: 920px;
    margin: 18px auto 0;
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    line-height: 1.65;
    color: var(--ai-body);
    text-align: center;
}

/* 1. "How Do You Make AI Work for Your Business?": the "Why" panel, this page's picture; the
   five lines are plain items (not headings) set like the panel's reasons */
.ai-dev-page.openai-dev-page .why-ai-coding-sprint .row:after {
    background-image: url('/assets/images/hire-openai-developer/how-ai-works-for-business.webp');
    background-position: center 35%;
}
.ai-dev-page.openai-dev-page .why-ai-coding-sprint .heading2 > p + p { margin-top: 14px; }
.ai-dev-page.openai-dev-page .why-ai-coding-sprint .list-itme p {
    max-width: none;
    margin: 0;
    font-family: 'Inter', sans-serif;
    font-size: 17px;
    line-height: 1.5;
    font-weight: 500;
    color: var(--ai-ink);
    transition: color .2s ease;
}
.ai-dev-page.openai-dev-page .why-ai-coding-sprint .list-itme:hover p { color: var(--ai-violet); }

/* 2. "How Would You Like to Work With Our OpenAI Developers?": the doc's table as a panel */
.ai-dev-page.openai-dev-page .openai-models-sec { padding: 100px 0; background: var(--ai-tint); }
.ai-dev-page.openai-dev-page .openai-table-wrap {
    background: #FFFFFF;
    border: 1px solid var(--ai-line);
    border-radius: 20px;
    box-shadow: var(--ai-shadow);
    overflow: hidden;
}
.ai-dev-page.openai-dev-page .openai-table-wrap:focus-visible { outline: 2px solid var(--ai-violet); outline-offset: 3px; }
.ai-dev-page.openai-dev-page .openai-table {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
    table-layout: fixed;
}
.ai-dev-page.openai-dev-page .openai-table thead th {
    padding: 20px 28px;
    font-family: 'Rubik', sans-serif;
    font-size: 16px;
    line-height: 1.4;
    font-weight: 500;
    letter-spacing: .1px;
    text-align: left;
    color: #FFFFFF;
    background: var(--ai-deep);
    border: 0;
}
.ai-dev-page.openai-dev-page .openai-table thead th:first-child { width: 24%; }
.ai-dev-page.openai-dev-page .openai-table tbody :is(th, td) {
    padding: 26px 28px;
    vertical-align: top;
    text-align: left;
    border: 0;
    transition: background-color .2s ease;
}
.ai-dev-page.openai-dev-page .openai-table tbody tr + tr > * { border-top: 1px solid var(--ai-line); }
.ai-dev-page.openai-dev-page .openai-table tbody th {
    font-family: 'Rubik', sans-serif;
    font-size: 19px;
    line-height: 1.35;
    font-weight: 500;
    color: var(--ai-ink);
    background: rgba(91, 3, 117, .035);
    box-shadow: inset 3px 0 0 var(--ai-lime);
}
.ai-dev-page.openai-dev-page .openai-table tbody td {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: var(--ai-body);
}
.ai-dev-page.openai-dev-page .openai-table tbody tr:hover > * { background-color: rgba(91, 3, 117, .05); }
.ai-dev-page.openai-dev-page .openai-note {
    max-width: none;
    margin: 28px 0 0;
    padding: 18px 22px;
    font-family: 'Inter', sans-serif;
    font-size: 17px;
    line-height: 1.6;
    color: var(--ai-body);
    background: #FFFFFF;
    border-left: 3px solid var(--ai-lime);
    border-radius: 0 12px 12px 0;
}

/* 3. services: the shared cards (the home card hover), on white between the two tinted bands */
.ai-dev-page.openai-dev-page .expert-coders-sec.openai-services-sec { background: #FFFFFF; }
.ai-dev-page.openai-dev-page .openai-services-sec + .cta-inner { --cta2-top: #FFFFFF; --cta2-bottom: #FFFFFF; }   /* white on both sides: the steps below are white too */

/* 4. "How Do You Hire an OpenAI Developer From Coding Sprint?": six step cards, three across, each
   with its Figma icon on a white tile (brand violet); the home card hover */
.ai-dev-page.openai-dev-page .openai-steps-sec { padding: 100px 0; background: #FFFFFF; }
.ai-dev-page.openai-dev-page .openai-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
}
.ai-dev-page.openai-dev-page .openai-step {
    position: relative;
    padding: 40px 36px;              /* as the services cards above */
    overflow: hidden;
    background: #FFFFFF linear-gradient(90deg, var(--ai-violet), var(--ai-lime)) left top / 0 3px no-repeat;
    border: 1px solid var(--ai-line);
    border-radius: var(--ai-radius);
    box-shadow: var(--ai-shadow);
    transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease, background-size .4s ease;
}
.ai-dev-page.openai-dev-page .openai-step:hover {
    transform: translateY(-6px);
    border-color: rgba(91, 3, 117, .22);
    box-shadow: var(--ai-shadow-hover);
    background-size: 100% 3px;
}
.ai-dev-page.openai-dev-page .openai-step-icon {   /* the services cards' icon tile (chunk 25): 84px soft tile, 56px icon */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 84px;
    height: 84px;
    margin: 0 0 24px;
    border-radius: 22px;
    background: var(--ai-tint);
    transition: background-color .3s ease;
}
.ai-dev-page.openai-dev-page .openai-step-icon img {
    display: block;
    width: 56px;
    height: 56px;
    object-fit: contain;
    filter: brightness(0) saturate(100%) invert(16%) sepia(22%) saturate(7395%) hue-rotate(272deg) brightness(89%) contrast(122%);
    transition: filter .3s ease;
}
.ai-dev-page.openai-dev-page .openai-step:hover .openai-step-icon { background: var(--ai-violet); }
.ai-dev-page.openai-dev-page .openai-step:hover .openai-step-icon img { filter: brightness(0) invert(1); }
.ai-dev-page.openai-dev-page .openai-step h3 {
    margin: 0 0 10px;
    font-family: 'Rubik', sans-serif;
    font-size: 21px;
    line-height: 1.3;
    font-weight: 500;
    letter-spacing: -.2px;
    color: var(--ai-ink);
}
.ai-dev-page.openai-dev-page .openai-step p {
    max-width: none;
    margin: 0;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    line-height: 1.7;
    color: var(--ai-body);
}

/* 5. "What Do You Get": the shared benefits list as it is (tinted band) */

/* 6. "OpenAI Developer Skills and Technology": vertical tabs (picked D, 2026-10-16; A, the Figma
   underline tabs, came first). The four groups as a side menu, the chosen one deep violet with a
   lime edge; its tools as tags on a soft panel beside it. All panels share one grid cell, so the
   height never jumps when the tab changes; a short group sits in the middle of the panel.
   Phones: the menu becomes pills above the panel. */
.ai-dev-page.openai-dev-page .openai-tech-sec { padding: 100px 0; background: #FFFFFF; }
.ai-dev-page.openai-dev-page .openai-tech-tabs {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    gap: 28px;
    max-width: 1040px;
    margin: 0 auto;
    align-items: stretch;
}
.ai-dev-page.openai-dev-page .openai-tabs {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
}
.ai-dev-page.openai-dev-page .openai-tab {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    margin: 0;
    padding: 20px 22px;
    font-family: 'Rubik', sans-serif;
    font-size: 17px;
    line-height: 1.3;
    font-weight: 500;
    text-align: left;
    color: var(--ai-ink);
    background: #FFFFFF;
    border: 1px solid var(--ai-line);
    border-radius: 14px;
    cursor: pointer;
    transition: color .2s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.ai-dev-page.openai-dev-page .openai-tab:after {   /* small arrow (decorative) */
    content: "";
    flex: none;
    width: 8px;
    height: 8px;
    margin-right: 4px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    opacity: .45;
    transform: rotate(45deg);
    transition: opacity .2s ease, transform .2s ease, border-color .2s ease;
}
.ai-dev-page.openai-dev-page .openai-tab:hover { color: var(--ai-violet); border-color: rgba(91, 3, 117, .3); }
.ai-dev-page.openai-dev-page .openai-tab:hover:after { opacity: 1; transform: translateX(2px) rotate(45deg); }
.ai-dev-page.openai-dev-page .openai-tab[aria-selected="true"] {
    color: #FFFFFF;
    background: var(--ai-deep);
    border-color: var(--ai-deep);
    box-shadow: inset 4px 0 0 var(--ai-lime), 0 12px 28px rgba(44, 2, 58, .2);
}
.ai-dev-page.openai-dev-page .openai-tab[aria-selected="true"]:after { opacity: 1; border-color: var(--ai-lime); transform: rotate(45deg); }
.ai-dev-page.openai-dev-page .openai-tab:focus-visible { outline: 2px solid var(--ai-violet); outline-offset: 3px; }
.ai-dev-page.openai-dev-page .openai-tab-panels { display: grid; }
.ai-dev-page.openai-dev-page .openai-tab-panel {
    grid-area: 1 / 1;
    display: flex;
    align-items: center;
    padding: 40px 44px;
    background: var(--ai-tint);
    border-radius: 24px;
    transition: opacity .25s ease;
}
.ai-dev-page.openai-dev-page .openai-tab-panel[hidden] { display: flex; visibility: hidden; opacity: 0; }   /* keeps its place in the grid cell */
.ai-dev-page.openai-dev-page .openai-tab-panel:focus-visible { outline: 2px solid var(--ai-violet); outline-offset: 3px; }
.ai-dev-page.openai-dev-page .openai-tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 14px;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}
.ai-dev-page.openai-dev-page .openai-tags li {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 14px 22px;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    line-height: 1.3;
    font-weight: 500;
    color: var(--ai-ink);
    background: #FFFFFF;
    border: 1px solid var(--ai-line);
    border-radius: 12px;
    box-shadow: 0 6px 16px -8px rgba(44, 2, 58, .18);
    list-style: none;
}
.ai-dev-page.openai-dev-page .openai-tags li:before {   /* lime dot (decorative) */
    content: "";
    position: static;
    flex: none;
    width: 8px;
    height: 8px;
    margin: 0;
    border-radius: 50%;
    background: var(--ai-lime);
}

@media (max-width: 1440px) {
    .ai-dev-page.openai-dev-page :is(.openai-models-sec, .openai-steps-sec, .openai-tech-sec) { padding: 88px 0; }
}
@media (max-width: 1370px) {
    .ai-dev-page.openai-dev-page :is(.openai-models-sec, .openai-steps-sec, .openai-tech-sec) .heading2 h2 { font-size: 38px; }
    .ai-dev-page.openai-dev-page :is(.openai-models-sec, .openai-steps-sec, .openai-tech-sec) .heading2 > p { font-size: 17px; }
    .ai-dev-page.openai-dev-page .openai-step { padding: 34px 28px; }
}
@media (max-width: 1199px) {
    .ai-dev-page.openai-dev-page .openai-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
    .ai-dev-page.openai-dev-page .openai-table :is(thead th, tbody th, tbody td) { padding-left: 22px; padding-right: 22px; }
}
@media (max-width: 991px) {
    .ai-dev-page.openai-dev-page :is(.openai-models-sec, .openai-steps-sec, .openai-tech-sec) { padding: 64px 0; }
    .ai-dev-page.openai-dev-page :is(.openai-models-sec, .openai-steps-sec, .openai-tech-sec) .heading2 { margin-bottom: 36px; }
    .ai-dev-page.openai-dev-page :is(.openai-models-sec, .openai-steps-sec, .openai-tech-sec) .heading2 h2 { font-size: 32px; letter-spacing: -.5px; }
    .ai-dev-page.openai-dev-page .openai-table tbody :is(th, td) { padding-top: 20px; padding-bottom: 20px; }
    .ai-dev-page.openai-dev-page .openai-table tbody th { font-size: 17px; }
    .ai-dev-page.openai-dev-page .openai-table tbody td { font-size: 15px; }
    .ai-dev-page.openai-dev-page .openai-tech-tabs { grid-template-columns: 250px minmax(0, 1fr); gap: 20px; }
    .ai-dev-page.openai-dev-page .openai-tab { padding: 16px 18px; font-size: 16px; }
    .ai-dev-page.openai-dev-page .openai-tab-panel { padding: 32px 28px; }
}
@media (max-width: 767px) {
    /* the table keeps its columns and scrolls sideways inside its panel */
    .ai-dev-page.openai-dev-page .openai-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .ai-dev-page.openai-dev-page .openai-table { min-width: 680px; }
    /* the side menu becomes pills above the panel */
    .ai-dev-page.openai-dev-page .openai-tech-tabs { grid-template-columns: minmax(0, 1fr); gap: 20px; }
    .ai-dev-page.openai-dev-page .openai-tabs { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 8px; }
    .ai-dev-page.openai-dev-page .openai-tab,
    .ai-dev-page.openai-dev-page .openai-tab:hover { width: auto; padding: 10px 14px; font-size: 15px; color: var(--ai-ink); background: #FFFFFF; border: 1px solid var(--ai-line); border-radius: 999px; box-shadow: none; }
    .ai-dev-page.openai-dev-page .openai-tab[aria-selected="true"] { color: #FFFFFF; background: var(--ai-violet); border-color: var(--ai-violet); box-shadow: none; }
    .ai-dev-page.openai-dev-page .openai-tab:after { display: none; }
}
@media (max-width: 575px) {
    .ai-dev-page.openai-dev-page :is(.openai-models-sec, .openai-steps-sec, .openai-tech-sec) { padding: 48px 0; }
    .ai-dev-page.openai-dev-page :is(.openai-models-sec, .openai-steps-sec, .openai-tech-sec) .heading2 h2 { font-size: 27px; line-height: 1.2; }
    .ai-dev-page.openai-dev-page :is(.openai-models-sec, .openai-steps-sec, .openai-tech-sec) .heading2 > p { font-size: 16px; }
    .ai-dev-page.openai-dev-page .openai-table-wrap { border-radius: 16px; }
    .ai-dev-page.openai-dev-page .openai-note { font-size: 16px; padding: 16px 18px; }
    .ai-dev-page.openai-dev-page .openai-steps { grid-template-columns: minmax(0, 1fr); gap: 18px; }
    .ai-dev-page.openai-dev-page .openai-step { padding: 28px 22px; }
    .ai-dev-page.openai-dev-page .openai-step-icon { width: 72px; height: 72px; margin-bottom: 20px; border-radius: 20px; }
    .ai-dev-page.openai-dev-page .openai-step-icon img { width: 48px; height: 48px; }
    .ai-dev-page.openai-dev-page .openai-step h3 { font-size: 19px; }
    .ai-dev-page.openai-dev-page .openai-tab-panel { padding: 24px 18px; border-radius: 18px; }
    .ai-dev-page.openai-dev-page .openai-tags { justify-content: flex-start; gap: 10px; }
    .ai-dev-page.openai-dev-page .openai-tags li { padding: 10px 14px; font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
    .ai-dev-page.openai-dev-page :is(.openai-step, .openai-step-icon, .openai-step-icon img, .openai-table tbody th, .openai-table tbody td, .openai-tab, .openai-tab:after, .openai-tab-panel) { transition: none; }
    .ai-dev-page.openai-dev-page .openai-step:hover { transform: none; }
}

/* ==========================================================================
   45. HERO PICTURE AT FIRST PAINT (2026-10-22: "on page load hero banner image load first .banner-sec after
   1 second the appear page banner")
   Each of these pages sets its hero picture (and on some its height) in the page's own <style>, which sits at
   the foot of the HTML. Until the browser reached it, the hero showed style.css's general picture
   (coding-banner-ai / the AI Consultancy picture) or none, at another height. The same declarations, copied
   exactly, now arrive in the head, scoped to each page. The page rules still follow and say the same, so the
   finished page is unchanged; only the first paint is.
   (MVP: its page rule for Safari points at a .jpg that does not exist, so Safari showed no picture; this
   head rule outranks it, and Safari shows the .webp like every other browser.)
   ========================================================================== */
.ai-dev-page:is(.ai-automation-page, .healthcare-page) .banner-secW.ai-banner-hero.ai-integration { background: url("/assets/images/ai-integration-automation/ai-int-hero-banner.webp") center center / cover no-repeat; }
.ai-dev-page.ai-chatbot-page .banner-sec.ai-banner { background: url("/assets/images/ai-chatbot/hero-banner.webp") center center / cover no-repeat; }
.ai-dev-page.ai-data-page .banner-secW.ai-data-banner { background: url("/assets/images/ai-data-services/hero-ai-data-banner.webp") center center / cover no-repeat rgb(34, 34, 34); height: 100vh; width: 100%; position: relative; max-height: 829px; }
.ai-dev-page.gen-ai-page .banner-secW.gen-ai-banner { background: url("/assets/images/gen-ai/gen-ai-hero-banner.webp") center center / cover no-repeat rgb(34, 34, 34); height: 100vh; width: 100%; position: relative; max-height: 829px; }
.ai-dev-page.custom-software-page .banner-sec.custom-software-banner { background: url("/assets/images/custom-software-development/Hero-section-banner.webp") center center / cover no-repeat; }
@supports (-webkit-hyphens:none) {
    .ai-dev-page.custom-software-page .banner-sec.custom-software-banner { background: url("/assets/images/custom-software-development/Hero-section-banner.jpg") center center / cover no-repeat; }
}
.ai-dev-page.devops-page .banner-sec.devops-banner { background: url("/assets/images/devops/devops-hero.webp") center center / cover no-repeat; }
.ai-dev-page.erp-page .banner-sec.erp-banner { background-image: url("/assets/images/erp-dev/erp-banner.webp"); }
.ai-dev-page.ml-page .banner-secW.ai-banner-hero.ml-learning { background: url("/assets/images/machine-learning/machine-learning-hero-banner.webp") center center / cover no-repeat; }
.ai-dev-page.mobile-app-page .banner-secW.ai-banner-hero.mob-app { background: url("/assets/images/mobile-app-dev/mobile-app-banner.webp") center center / cover no-repeat; }
.ai-dev-page.mvp-page .banner-sec.mvp-banner { background: url("/assets/images/mvp-dev/Hero-section-banner.webp") center center / cover no-repeat; }
.ai-dev-page.sam-page .banner-sec.sam-hero { height: 100vh; max-height: 829px; background: url("/assets/images/software-application-maintenance-services-uk/hero-banner.webp") center center / cover no-repeat; }
.ai-dev-page.sds-page .banner-sec.sds-hero { height: 100vh; max-height: 829px; background: url("/assets/images/software-development-for-startups/hero-banner.webp") center center / cover no-repeat; }
@media (max-width: 991px) {
    .ai-dev-page.sam-page .banner-sec.sam-hero,
    .ai-dev-page.sds-page .banner-sec.sds-hero { height: 60vh; }
}