/* ==========================================================================
   Coding Sprint - the WordPress pages (blog, case studies): design refresh, 2026-10-15
   Linked by header.php AFTER wp_head(), so these follow the theme's own styles (blog.css, style.css)
   and the inline <style> in the templates. Same text, images, links and markup; nothing in the
   templates' scripts is touched.
   ========================================================================== */
:root {
    --csp-ink: #14081C;
    --csp-body: #4E4858;
    --csp-violet: #5B0375;
    --csp-deep: #2C023A;
    --csp-lime: #C2C904;
    --csp-tint: #F7F5FA;
    --csp-line: rgba(44, 2, 58, .10);
}

/* ---- The header bar: the brand violet the main site's header turns when scrolled. The templates
   forced it black (".header { background: #000000 !important }"); the brand never uses black. ---- */
body.wp-theme-codingsprint .header { background: var(--csp-violet) !important; }


/* ==========================================================================
   CASE STUDIES ("Our latest work", /case-studies/)
   The heading in the site's section style (lime mark, Rubik 500) and the cards in the same design
   as the case-study cards on the main pages: the picture with rounded corners and a white panel
   rising over its lower edge, lime mark, title, two lines of the summary and a violet link.
   The words were a lime overlay that only showed on hover; they are always shown now.
   ========================================================================== */
body.post-type-archive-case-studies { background: var(--csp-tint); }   /* behind the contact band's rounded corners */
body.post-type-archive-case-studies section.main-content.mar-t-150 {
    margin-top: 0;
    padding-top: 150px;                            /* room for the fixed header, as the margin gave */
    background: #FFFFFF;                           /* the breadcrumb strip stays white */
}
/* the breadcrumb on its own white row (the theme floats it, so the content started beside/under it) */
body.post-type-archive-case-studies section.main-content > .breadcrumb {
    float: none;
    width: 100%;
    margin: 0;
    padding: 16px 0;
    background: #FFFFFF;
}
body.post-type-archive-case-studies section.main-content > .breadcrumb .container { display: flow-root; }   /* its links float: the row wraps them */
/* the page band: heading and cards on the light tint, edge to edge */
body.post-type-archive-case-studies section.main-content > .container {
    padding-top: 100px;          /* the main pages' section spacing: equal above and below (100 / 88 / 64 / 48) */
    padding-bottom: 100px;
    background: var(--csp-tint);
    box-shadow: 0 0 0 100vmax var(--csp-tint);
    clip-path: inset(0 -100vmax);
}

/* the heading */
body.post-type-archive-case-studies .coding_blogsW .mini-container {
    max-width: none;
    margin: 0 0 48px;
    padding: 0;
    text-align: left;
}
body.post-type-archive-case-studies .coding_blogsW h1.blog-title {
    margin: 0 0 18px;
    font-family: 'Rubik', sans-serif;
    font-size: 46px;
    line-height: 1.12;
    font-weight: 500;
    letter-spacing: -.8px;
    color: var(--csp-ink);
}
body.post-type-archive-case-studies .coding_blogsW h1.blog-title:before {   /* short lime mark (decorative) */
    content: "";
    display: block;
    width: 44px;
    height: 4px;
    margin: 0 0 22px;
    border-radius: 2px;
    background: var(--csp-lime);
}
body.post-type-archive-case-studies .coding_blogsW h1.blog-title .leaf { padding: 0; background: none; }
body.post-type-archive-case-studies .coding_blogsW .mini-container .both-side-padding {
    max-width: 780px;
    margin: 0;
    padding: 0;
}
body.post-type-archive-case-studies .coding_blogsW .mini-container .both-side-padding p {
    margin: 0;
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    line-height: 1.65;
    color: var(--csp-body);
}

/* the cards */
body.post-type-archive-case-studies #case-studies-container {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 40px 32px;
    margin: 0;
}
body.post-type-archive-case-studies #case-studies-container:before,
body.post-type-archive-case-studies #case-studies-container:after { display: none; }
body.post-type-archive-case-studies #case-studies-container > .filter-item {
    float: none;
    flex: none;
    width: auto;
    max-width: none;
    margin: 0;
    padding: 0;
}
body.post-type-archive-case-studies #case-studies-container .wp-project {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    margin: 0;
    background: none;
    box-shadow: none;
    overflow: visible;
}
/* the picture: the photos' own shape (741 x 485), so the brand names printed in their corners are never
   cut; the theme's float, padding-top box and grey fill are dropped */
body.post-type-archive-case-studies #case-studies-container .wp-pro-img {
    position: relative;
    float: none;
    width: 100%;
    margin: 0;
    padding: 0;
    aspect-ratio: 741 / 485;
    height: auto;
    border-radius: 18px;
    background: none;
    overflow: hidden;
}
/* the theme centres it with translate(-50%, -50%) and a 2.5s transition: the hover zoom replaced that
   transform and threw the picture into the corner. It now simply fills its box and zooms in place. */
body.post-type-archive-case-studies #case-studies-container .wp-pro-img img {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    min-width: 0;
    max-width: none;
    object-fit: cover;
    transform: none;
    transition: transform .5s ease;
}
body.post-type-archive-case-studies #case-studies-container .wp-pro-img .tech-icon { display: none; }   /* empty */
body.post-type-archive-case-studies #case-studies-container .wp-pro-cont {
    position: relative;
    inset: auto;
    z-index: 1;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    width: auto;
    height: auto;
    margin: -56px 18px 0;
    padding: 22px 22px 20px;
    background: #FFFFFF;
    border: 1px solid var(--csp-line);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(20, 8, 28, .04), 0 18px 30px -20px rgba(44, 2, 58, .28);
    text-align: left;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: transform .3s ease, box-shadow .3s ease;
}
body.post-type-archive-case-studies #case-studies-container .wp-pro-cont:before {   /* short lime mark (decorative) */
    content: "";
    display: block;
    width: 32px;
    height: 3px;
    margin: 0 0 16px;
    border-radius: 2px;
    background: var(--csp-lime);
}
body.post-type-archive-case-studies #case-studies-container .wp-pro-cont h3 {
    margin: 0 0 8px;
    font-family: 'Rubik', sans-serif;
    font-size: 20px;
    line-height: 1.3;
    font-weight: 500;
    letter-spacing: -.2px;
    color: var(--csp-ink);
}
body.post-type-archive-case-studies #case-studies-container .wp-pro-cont p {
    display: -webkit-box;
    margin: 0 0 16px;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    font-family: 'Inter', sans-serif;
    font-size: 16px;                               /* as the main pages' case study cards */
    line-height: 1.6;
    color: var(--csp-body);
}
body.post-type-archive-case-studies #case-studies-container .wp-pro-cont .btn-cont {
    margin: auto 0 0;
    padding: 16px 0 0;
    border-top: 1px solid var(--csp-line);
    text-align: left;
}
body.post-type-archive-case-studies #case-studies-container .wp-pro-cont .btn-cont a.btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    line-height: 1.4;
    font-weight: 600;
    letter-spacing: 0;
    color: var(--csp-violet);
    transition: color .2s ease;
}
body.post-type-archive-case-studies #case-studies-container .wp-pro-cont .btn-cont a.btn span { padding: 0; background: none; color: inherit; }
/* the whole card opens the case study: the "View Project" link's own (invisible) layer is stretched over the
   card, picture included. It is positioned on the panel, so it reaches up by the picture's height (65.45% of
   the panel width = the 741/485 picture, less the 56px the panel rises over it) and out by the 18px insets. */
body.post-type-archive-case-studies #case-studies-container .wp-pro-cont .btn-cont,
body.post-type-archive-case-studies #case-studies-container .wp-pro-cont .btn-cont a.btn { position: static; }
body.post-type-archive-case-studies #case-studies-container .wp-pro-cont .btn-cont a.btn:before {
    content: "";
    position: absolute;
    z-index: 2;
    top: 0;
    right: -19px;
    bottom: -1px;
    left: -19px;
    margin-top: calc(26px - 65.45%);
}
body.post-type-archive-case-studies #case-studies-container .wp-project { cursor: pointer; }
body.post-type-archive-case-studies #case-studies-container .wp-pro-cont .btn-cont a.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;
}
body.post-type-archive-case-studies #case-studies-container .wp-project:hover .wp-pro-cont {
    transform: translateY(-6px);
    box-shadow: 0 2px 4px rgba(20, 8, 28, .05), 0 24px 34px -20px rgba(44, 2, 58, .36);
}
body.post-type-archive-case-studies #case-studies-container .wp-project:hover .wp-pro-img img { transform: scale(1.04); }
body.post-type-archive-case-studies #case-studies-container .wp-pro-cont .btn-cont a.btn:hover { color: var(--csp-deep); background: none; }
body.post-type-archive-case-studies #case-studies-container .wp-pro-cont .btn-cont a.btn:hover:after { transform: translateX(3px) rotate(45deg); }

/* "Load More" (shown by the page script only when there are more case studies than the first batch):
   the site's outline pill, centred under the cards; same button and behaviour */
body.post-type-archive-case-studies #load-more-container { margin: 48px 0 0; padding: 0; text-align: center; }
body.post-type-archive-case-studies #load-more-container #load-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;                              /* the main pages' outline button (the cards' "Tell us what's slowing you down") */
    margin: 0;
    padding: 0 28px;
    border: 1px solid rgba(44, 2, 58, .22);
    border-radius: 999px;
    background: #FFFFFF;
    font-family: 'Rubik', sans-serif;
    font-size: 16px;
    line-height: 1.2;
    font-weight: 500;
    color: #1B0A22;
    box-shadow: 0 6px 16px -6px rgba(44, 2, 58, .20);
    transition: transform .25s ease, background-color .25s ease, border-color .25s ease, color .25s ease, box-shadow .25s ease;
}
body.post-type-archive-case-studies #load-more-container #load-more:hover {
    transform: translateY(-2px);
    background: var(--csp-deep);
    border-color: var(--csp-deep);
    color: #FFFFFF;
    box-shadow: 0 6px 16px rgba(20, 8, 28, .14);
}

@media (max-width: 1440px) {
    body.post-type-archive-case-studies section.main-content > .container { padding-top: 88px; padding-bottom: 88px; }
    body.post-type-archive-case-studies .coding_blogsW h1.blog-title { font-size: 42px; }
    body.post-type-archive-case-studies .coding_blogsW .mini-container .both-side-padding p { font-size: 17px; }
}
@media (max-width: 1199px) {
    /* the header is 82px tall from here down (143px above): no white gap under it */
    body.post-type-archive-case-studies section.main-content.mar-t-150 { padding-top: 82px; }
    body.post-type-archive-case-studies #case-studies-container { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 991px) {
    body.post-type-archive-case-studies section.main-content > .container { padding-top: 64px; padding-bottom: 64px; }
    body.post-type-archive-case-studies .coding_blogsW .mini-container { margin-bottom: 36px; }
    body.post-type-archive-case-studies #load-more-container { margin-top: 36px; }
    body.post-type-archive-case-studies .coding_blogsW h1.blog-title { font-size: 34px; letter-spacing: -.5px; }
    body.post-type-archive-case-studies #case-studies-container { gap: 32px 24px; }
}
@media (max-width: 575px) {
    body.post-type-archive-case-studies section.main-content > .container { padding-top: 48px; padding-bottom: 48px; }
    body.post-type-archive-case-studies .coding_blogsW h1.blog-title { font-size: 28px; line-height: 1.2; }
    body.post-type-archive-case-studies .coding_blogsW .mini-container .both-side-padding p { font-size: 16px; }
    body.post-type-archive-case-studies #case-studies-container { grid-template-columns: minmax(0, 1fr); gap: 28px; }
    body.post-type-archive-case-studies #case-studies-container .wp-pro-cont { margin: -48px 14px 0; padding: 22px 20px 20px; }
    body.post-type-archive-case-studies #case-studies-container .wp-pro-cont .btn-cont a.btn:before { right: -15px; left: -15px; margin-top: calc(22px - 65.45%); }
    body.post-type-archive-case-studies #case-studies-container .wp-pro-cont h3 { font-size: 19px; }
    body.post-type-archive-case-studies #load-more-container #load-more { min-height: 48px; padding: 0 26px; font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
    body.post-type-archive-case-studies #case-studies-container .wp-pro-cont,
    body.post-type-archive-case-studies #case-studies-container .wp-pro-img img { transition: none; }
    body.post-type-archive-case-studies #case-studies-container .wp-project:hover .wp-pro-cont,
    body.post-type-archive-case-studies #case-studies-container .wp-project:hover .wp-pro-img img { transform: none; }
}


/* ==========================================================================
   CASE STUDY DETAIL (/case-studies/<name>/), 2026-10-16
   Every section on the site's design: the hero under a deep violet veil (it was 70% black) with the
   lime mark; the section headings in the shared style (Rubik 500, lime mark); bands alternating white
   and the light tint; "How we helped" as white cards; the technologies as logo tiles; the features as
   white tiles with their chevron; "Our Approach" as three cards with a lime edge, the existing chevrons
   between them; the call to action as the rounded violet panel the main pages use; the blog as the
   same cards as the case studies. Same text, images, icons, links and markup.
   ========================================================================== */
body.single-case-studies { background: var(--csp-tint); }   /* behind the contact band's rounded corners */

/* ---- hero ---- */
body.single-case-studies .herobanner.case-innerpage-banner {
    position: relative;
    padding: 207px 0 112px;                        /* the fixed header (143px) + 64px */
    background-size: cover;
}
body.single-case-studies .herobanner.case-innerpage-banner:before {
    background: linear-gradient(90deg, rgba(20, 2, 30, .92) 0%, rgba(44, 2, 58, .80) 42%, rgba(44, 2, 58, .38) 100%);
    opacity: 1;
}
body.single-case-studies .herobanner .magento-flex,
body.single-case-studies .herobanner .magento-cont { display: block; max-width: 760px; margin: 0; padding: 0; text-align: left; }
body.single-case-studies .herobanner .heading2 { margin: 0; padding: 0; text-align: left; }
body.single-case-studies .herobanner .heading2 h1 {
    margin: 0 0 18px;
    font-family: 'Rubik', sans-serif;
    font-size: 58px;
    line-height: 1.08;
    font-weight: 500;
    letter-spacing: -1px;
    color: #FFFFFF;
    text-align: left;
}
body.single-case-studies .herobanner .heading2 h1:before {   /* short lime mark (decorative) */
    content: "";
    display: block;
    width: 56px;
    height: 4px;
    margin: 0 0 26px;
    border-radius: 2px;
    background: var(--csp-lime);
}
body.single-case-studies .herobanner .heading2 p {
    max-width: 640px;
    margin: 0;
    font-family: 'Inter', sans-serif;
    font-size: 19px;
    line-height: 1.6;
    color: rgba(255, 255, 255, .86);
    text-align: left;
}

/* ---- breadcrumb: its own white row (the theme floats it) ---- */
body.single-case-studies section.main-content > .breadcrumb {
    float: none;
    width: 100%;
    margin: 0;
    padding: 16px 0;
    background: #FFFFFF;
    border-bottom: 1px solid var(--csp-line);
}
body.single-case-studies section.main-content > .breadcrumb .container { display: flow-root; }

/* ---- the sections: one rhythm, alternating bands ---- */
body.single-case-studies section.main-content { clear: both; margin-top: 0; }   /* the hero floats: start below it */
body.single-case-studies .case_study_about { padding: 100px 0; background: #FFFFFF; }
body.single-case-studies section.main-content > .container { max-width: none; width: 100%; padding: 0; }   /* the overview's outer wrapper: its own inner container sets the width */
body.single-case-studies section.main-content > .container > .row { margin: 0; }
body.single-case-studies section.main-content > .container > .row > [class*="col-"] { padding: 0; }
body.single-case-studies .why-coding-sprint.bgilight-grey,
body.single-case-studies .why-coding-sprint:not(.bgilight-grey),
body.single-case-studies .technologies-sec,
body.single-case-studies .Process_sec,
body.single-case-studies .news-sec { margin: 0; padding: 100px 0; }
body.single-case-studies .why-coding-sprint.bgilight-grey { background: var(--csp-tint); }        /* How we helped */
body.single-case-studies .technologies-sec { background: #FFFFFF; }
body.single-case-studies .why-coding-sprint:not(.bgilight-grey) { background: var(--csp-tint); }  /* Project features */
body.single-case-studies .Process_sec { background: #FFFFFF; }                                   /* Our Approach */
body.single-case-studies .news-sec { background: var(--csp-tint); }

/* section headings (the call to action has its own below) */
body.single-case-studies section.main-content section:not(.cta-inner) .heading2 h2,
body.single-case-studies .news-sec .sec-heading h2 {
    margin: 0 0 18px;
    font-family: 'Rubik', sans-serif;
    font-size: 42px;
    line-height: 1.14;
    font-weight: 500;
    letter-spacing: -.8px;
    color: var(--csp-ink);
    text-align: center;
}
body.single-case-studies section.main-content section:not(.cta-inner) .heading2 h2:before,
body.single-case-studies .news-sec .sec-heading h2:before {   /* short lime mark (decorative) */
    content: "";
    display: block;
    width: 44px;
    height: 4px;
    margin: 0 auto 22px;
    border-radius: 2px;
    background: var(--csp-lime);
}
body.single-case-studies section.main-content section:not(.cta-inner) .heading2,
body.single-case-studies .news-sec .sec-heading { max-width: none; margin: 0; padding: 0; }
body.single-case-studies section.main-content section:not(.cta-inner) .heading2 p,
body.single-case-studies .case_study_about .about_content p {
    max-width: 880px;
    margin: 0 auto 14px;
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    line-height: 1.7;
    color: var(--csp-body);
    text-align: center;
}
body.single-case-studies section.main-content section:not(.cta-inner) .heading2 p:last-child,
body.single-case-studies .case_study_about .about_content p:last-child { margin-bottom: 0; }
body.single-case-studies .case_study_about .about_content { margin-top: 0; }

/* ---- Overview (picked: editorial split): the heading on the left; the story on the right behind a hairline,
   level with the heading words, the first paragraph a little larger as the lead ---- */
body.single-case-studies .case_study_about { --bs-gutter-x: .75rem; }   /* it sits inside the template's outer .row, whose 1.5rem gutter made its container 12px narrower each side than every other section */
body.single-case-studies .case_study_about .container > .row > [class*="col-"] {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);   /* the same columns as How we helped and Project features: the text starts on one line */
    column-gap: 72px;
    align-items: start;
}
body.single-case-studies section.main-content section.case_study_about .heading2 h2.text-center,
body.single-case-studies section.main-content section.case_study_about .heading2 h2 { margin: 0; text-align: left; }
body.single-case-studies section.main-content section.case_study_about .heading2 h2:before { margin: 0 0 22px; }
body.single-case-studies .case_study_about .about_content {
    max-width: none;
    margin: 26px 0 0 -36px;    /* level with the heading words; the hairline sits in the middle of the column gap */
    padding: 0 0 0 36px;
    background: none;
    border-left: 1px solid rgba(44, 2, 58, .14);
    border-radius: 0;
}
body.single-case-studies .case_study_about .about_content p { max-width: none; margin: 0 0 16px; font-size: 17px; line-height: 1.75; color: var(--csp-body); text-align: left; }
body.single-case-studies .case_study_about .about_content p:first-of-type { font-size: 20px; line-height: 1.65; }   /* the lead: larger, in the site's body colour */
body.single-case-studies .case_study_about .about_content p:last-child { margin-bottom: 0; }

/* ---- How we helped (picked from option 1): heading on the left, its line on the right; white cards with a
   short lime rule on top and the chevrons on a deep violet tile ---- */
/* blog.css .mar-t-30 is margin-top 30px !important: on the section it opened a 30px strip of the page tint above
   the band (the band looked 30px deeper at the top), and on the card row it overrode the 48px under the heading */
body.single-case-studies section.main-content section.mar-t-30 { margin-top: 0 !important; }
body.single-case-studies section.main-content section.why-coding-sprint.bgilight-grey .heading2 {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: 72px;
    align-items: start;        /* the heading and its line start on the same level */
}
body.single-case-studies section.main-content section.why-coding-sprint.bgilight-grey .heading2 > h2 { grid-column: 1; grid-row: 1 / span 6; }
body.single-case-studies section.main-content section.why-coding-sprint.bgilight-grey .heading2 > :not(h2) { grid-column: 2; }
body.single-case-studies section.main-content section.why-coding-sprint.bgilight-grey .heading2 > h2 + * { padding-top: 26px; }   /* level with the heading words, under its lime mark */
body.single-case-studies section.main-content section.why-coding-sprint.bgilight-grey .heading2 h2 { margin: 0; text-align: left; }
body.single-case-studies section.main-content section.why-coding-sprint.bgilight-grey .heading2 h2:before { margin: 0 0 22px; }
body.single-case-studies section.main-content section.why-coding-sprint.bgilight-grey .heading2 p { max-width: none; margin: 0 0 14px; text-align: left; }
body.single-case-studies section.main-content section.why-coding-sprint.bgilight-grey .heading2 p:last-child { margin-bottom: 0; }
body.single-case-studies .why-coding-sprint.bgilight-grey .row.mar-t-30 { margin: 48px -12px 0; row-gap: 24px; }   /* -12: the cards on the container edge, under the heading (the columns keep 12px each side) */
body.single-case-studies .why-coding-sprint.bgilight-grey .row.mar-t-30.mar-t-30 { margin-top: 48px !important; }
body.single-case-studies .why-coding-sprint.bgilight-grey .row.mar-t-30.mar-b-30 { margin-bottom: 0 !important; }   /* blog.css .mar-b-30 (30px !important) made the space under the cards 30px deeper than above the heading */
body.single-case-studies .why-coding-sprint.bgilight-grey .row.mar-t-30 > .col-lg-4 { display: flex; padding: 0 12px; }
body.single-case-studies .why-coding-sprint .service-list {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 34px 32px 36px;
    background: #FFFFFF;
    border: 1px solid var(--csp-line);
    border-radius: 18px;
    box-shadow: 0 1px 2px rgba(20, 8, 28, .04), 0 12px 32px rgba(44, 2, 58, .07);
    text-align: left;
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
/* hover as the home page's service cards (AI Workflow Automation...): the card rises with a soft violet edge and a deeper
   shadow, a violet-to-lime rule draws in along the top, the icon tile turns violet */
body.single-case-studies .why-coding-sprint .service-list { position: relative; overflow: hidden; }
body.single-case-studies .why-coding-sprint .service-list:before {   /* the rule (decorative) */
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, var(--csp-violet), var(--csp-lime));
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .4s ease;
}
body.single-case-studies .why-coding-sprint .service-list:hover {
    transform: translateY(-6px);
    border-color: rgba(91, 3, 117, .22);
    box-shadow: 0 2px 4px rgba(20, 8, 28, .05), 0 24px 48px rgba(44, 2, 58, .14);
}
body.single-case-studies .why-coding-sprint .service-list:hover:before { transform: scaleX(1); }
body.single-case-studies .why-coding-sprint .service-list .service_icon svg { transition: background-color .3s ease; }
body.single-case-studies .why-coding-sprint .service-list:hover .service_icon svg { background-color: var(--csp-violet); }
body.single-case-studies .why-coding-sprint .service-list .service_icon { width: auto; margin: 0 0 22px; padding: 0; text-align: left; }
body.single-case-studies .why-coding-sprint .service-list .service_icon svg {   /* the existing chevrons, on a deep violet tile */
    display: block;
    width: 60px;
    height: 60px;
    margin: 0;
    padding: 18px 14px;
    border-radius: 16px;
    background: var(--csp-deep);
}
body.single-case-studies .why-coding-sprint .service-list h3 {
    margin: 0 0 10px;
    font-family: 'Rubik', sans-serif;
    font-size: 21px;
    line-height: 1.3;
    font-weight: 500;
    color: var(--csp-ink);
    text-align: left;
}
body.single-case-studies .why-coding-sprint .service-list p {
    margin: 0;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    line-height: 1.7;
    color: var(--csp-body);
    text-align: left;
}
body.single-case-studies .why-coding-sprint .service-list p:empty { display: none; }

/* ---- Technologies (picked from option 2): logo chips, the logo on a round tint, the name beside it ---- */
body.single-case-studies .technologies-sec .technology_logos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
    margin: 48px 0 0;
}
body.single-case-studies .technologies-sec .image-name-wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 14px;
    width: auto;
    max-width: none;           /* blog.css caps it at 127px */
    margin: 0;
    padding: 10px 26px 10px 10px;
    background: #FFFFFF;
    border: 1px solid var(--csp-line);
    border-radius: 999px;
    text-align: left;
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
body.single-case-studies .technologies-sec .image-name-wrapper:hover {
    transform: translateY(-3px);
    border-color: rgba(91, 3, 117, .22);
    box-shadow: 0 14px 28px -18px rgba(44, 2, 58, .28);
}
body.single-case-studies .technologies-sec .image_box {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    min-width: 0;              /* blog.css: min-width 120px */
    height: 56px;
    margin: 0;
    border-radius: 50%;
    background: var(--csp-tint);
}
body.single-case-studies .technologies-sec .image_box img { width: auto; max-width: 34px; height: auto; max-height: 30px; }
body.single-case-studies .technologies-sec .image-name-wrapper span {
    display: block;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    line-height: 1.4;
    font-weight: 500;
    color: var(--csp-ink);
}

/* ---- Project features (picked: matching cards): the "How we helped" pattern - heading on the left, its line on
   the right, level with the heading words; six white cards with a short lime rule on top, the chevrons on a deep
   violet tile beside the title ---- */
body.single-case-studies section.main-content section.why-coding-sprint:not(.bgilight-grey) .heading2 {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: 72px;
    align-items: start;
}
body.single-case-studies section.main-content section.why-coding-sprint:not(.bgilight-grey) .heading2 > h2 { grid-column: 1; grid-row: 1 / span 6; margin: 0; text-align: left; }
body.single-case-studies section.main-content section.why-coding-sprint:not(.bgilight-grey) .heading2 > :not(h2) { grid-column: 2; }
body.single-case-studies section.main-content section.why-coding-sprint:not(.bgilight-grey) .heading2 > h2 + * { padding-top: 26px; }   /* level with the heading words, under its lime mark */
body.single-case-studies section.main-content section.why-coding-sprint:not(.bgilight-grey) .heading2 h2:before { margin: 0 0 22px; }
body.single-case-studies section.main-content section.why-coding-sprint:not(.bgilight-grey) .heading2 p { max-width: none; margin: 0 0 14px; text-align: left; }
body.single-case-studies section.main-content section.why-coding-sprint:not(.bgilight-grey) .heading2 p:last-child { margin-bottom: 0; }
body.single-case-studies .why-coding-sprint:not(.bgilight-grey) .container > .row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    margin: 48px 0 0;
}
body.single-case-studies .why-coding-sprint:not(.bgilight-grey) .container > .row > [class*="col-"] { display: contents; }
body.single-case-studies .why-coding-sprint .feat_benefit {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 18px;
    min-height: 0;
    margin: 0;
    padding: 30px 28px;
    background: #FFFFFF linear-gradient(90deg, var(--csp-lime), var(--csp-lime)) 28px 0 / 48px 3px no-repeat;   /* the short lime rule, over the icon */
    border: 0;
    border-radius: 18px;
    box-shadow: 0 1px 2px rgba(20, 8, 28, .04), 0 12px 32px rgba(44, 2, 58, .07);
    text-align: left;
    transition: transform .3s ease, box-shadow .3s ease;
}
body.single-case-studies .why-coding-sprint .feat_benefit:hover {
    transform: translateY(-4px);
    box-shadow: 0 2px 4px rgba(20, 8, 28, .05), 0 24px 48px rgba(44, 2, 58, .14);
}
body.single-case-studies .why-coding-sprint .feat_benefit:before,
body.single-case-studies .why-coding-sprint .feat_benefit:after { display: none; }   /* the old dividers */
body.single-case-studies .why-coding-sprint .feat_benefit svg {   /* the existing chevrons, on a deep violet tile */
    flex: none;
    width: 48px;
    height: 48px;
    margin: 0;
    padding: 14px 10px;
    border-radius: 12px;
    background: var(--csp-deep);
}
body.single-case-studies .why-coding-sprint .feat_benefit h3 {
    margin: 0;
    font-family: 'Rubik', sans-serif;
    font-size: 18px;
    line-height: 1.4;
    font-weight: 500;
    color: var(--csp-ink);
    text-align: left;
}

/* ---- Our Approach (option 2's layout, option 1's list): centred heading; the picture on the left;
   Need, Solution, Outcome on the right as a timeline - a lime dot by each title, a line down to the next ---- */
body.single-case-studies .Process_sec .container > .row:nth-child(2) { flex-direction: row-reverse; align-items: center; margin-top: 48px; }
body.single-case-studies .Process_sec .process-box_border { position: relative; padding: 0 12px; border: 0; text-align: left; }
body.single-case-studies .Process_sec .process-box_border:before,
body.single-case-studies .Process_sec .process-box_border:after { display: none; }
body.single-case-studies .Process_sec .process-box_border:not(:last-child):after {   /* the line to the next dot (decorative) */
    content: "";
    display: block;
    position: absolute;
    left: 19px;
    top: 30px;
    bottom: -38px;
    width: 2px;
    background: rgba(91, 3, 117, .14);
}
body.single-case-studies .Process_sec .process-box_border + .process-box_border { margin-top: 36px; }
body.single-case-studies .Process_sec .process_box {
    position: relative;
    margin: 0;
    padding: 0 0 0 40px;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    text-align: left;
}
body.single-case-studies .Process_sec .process_box:before {   /* the dot (decorative) */
    content: "";
    position: absolute;
    left: 0;
    top: 5px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--csp-lime);
    box-shadow: 0 0 0 5px rgba(194, 201, 4, .20);
}
body.single-case-studies .Process_sec .process_box h3 {
    margin: 0 0 10px;
    font-family: 'Rubik', sans-serif;
    font-size: 21px;
    line-height: 1.3;
    font-weight: 500;
    color: var(--csp-ink);
    text-align: left;
}
body.single-case-studies .Process_sec .process_content p {
    margin: 0;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    line-height: 1.7;
    color: var(--csp-body);
    text-align: left;
}
body.single-case-studies .Process_sec .process_icon { display: none; }   /* the old chevron connectors: the line joins the steps now */
body.single-case-studies .Process_sec .image_sticky_box { top: 170px; }
body.single-case-studies .Process_sec .image_sticky_box img { border-radius: 24px; }

/* ---- the client's words ("What ... has to say", only on some case studies): the main pages' banner panel
   (ai-pages.css chunk 7/7b, .flexible-sec .cta-between) - a deep violet panel over the band's own picture
   (gradient@2x.webp), across the join between the white Technologies band and the tinted Features band;
   lime mark, white heading and quote on the left, the lime button on the right drawn as a chip.
   The section headings' dark centred style no longer reaches it. Same wording, quote and link. ---- */
body.single-case-studies section.main-content section.flexible-sec {
    margin: 0;
    padding: 0;
    background: linear-gradient(180deg, #FFFFFF 0, #FFFFFF 50%, var(--csp-tint) 50%, var(--csp-tint) 100%);   /* white above (Technologies), tint below (Features) */
}
body.single-case-studies section.main-content section.flexible-sec .row.cta-between {
    position: relative;
    isolation: isolate;
    display: block;
    width: auto;
    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;   /* the band's own picture */
    box-shadow: 0 24px 48px rgba(44, 2, 58, .22);
}
body.single-case-studies section.main-content section.flexible-sec .cta-between:before,
body.single-case-studies section.main-content section.flexible-sec .cta-between:after { display: none; }   /* the magenta multiply wash */
body.single-case-studies section.main-content section.flexible-sec .cta-between .heading2 {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 56px;
    align-items: center;
    flex: none;
    width: 100%;
    max-width: none;
    margin: 0 !important;      /* the column carries Bootstrap's .m-auto (margin: auto !important) */
    padding: 0;
    text-align: left;
}
body.single-case-studies section.main-content section.flexible-sec .cta-between .heading2 > :not(.cta-btn-inner) { grid-column: 1; }
body.single-case-studies section.main-content section.flexible-sec .cta-between .heading2 h2 {
    max-width: 760px;
    margin: 0 0 12px;
    font-family: 'Rubik', sans-serif;
    font-size: 36px;
    line-height: 1.2;
    font-weight: 500;
    letter-spacing: -.5px;
    color: #FFFFFF;
    text-align: left;
    text-wrap: balance;
}
body.single-case-studies section.main-content section.flexible-sec .cta-between .heading2 h2:before { margin: 0 0 20px; }   /* the lime mark, on the left */
body.single-case-studies section.main-content section.flexible-sec .cta-between .heading2 p {
    max-width: 760px;
    margin: 0;
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    line-height: 1.6;
    color: rgba(255, 255, 255, .80);
    text-align: left;
}
body.single-case-studies section.main-content section.flexible-sec .cta-between .heading2 p:empty { display: none; }   /* the editor wrapped the quote in a second <p>: two empty ones */
body.single-case-studies section.main-content section.flexible-sec .cta-between .cta-btn-inner {
    position: relative;
    isolation: isolate;
    grid-column: 2;
    grid-row: 1 / span 6;      /* across the mark, heading and quote */
    justify-self: end;
    display: flex;
    margin: 0;
}
body.single-case-studies section.main-content section.flexible-sec .cta-between a.button.main-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    margin: 0;
    padding: 0 32px;
    border: 1px solid var(--csp-lime);
    border-radius: 999px;
    background: var(--csp-lime);
    font-family: 'Rubik', sans-serif;
    font-size: 17px;
    line-height: 1.2;
    font-weight: 500;
    letter-spacing: 0;
    white-space: nowrap;
    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.single-case-studies section.main-content section.flexible-sec .cta-between a.button.main-btn:hover {
    transform: translateY(-2px);
    border-color: #FFFFFF;
    background: #FFFFFF;
    color: var(--csp-deep);
    box-shadow: 0 6px 16px rgba(20, 8, 28, .14);
}
body.single-case-studies section.main-content section.flexible-sec .cta-between .cta-btn-inner:before {    /* pins and traces (decorative), as on the main pages */
    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;
}
body.single-case-studies section.main-content section.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: 1370px) {
    body.single-case-studies section.main-content section.flexible-sec .row.cta-between { padding: 52px 48px; }
    body.single-case-studies section.main-content section.flexible-sec .cta-between .heading2 { column-gap: 40px; }
    body.single-case-studies section.main-content section.flexible-sec .cta-between .heading2 h2 { font-size: 32px; }
    body.single-case-studies section.main-content section.flexible-sec .cta-between .heading2 p { font-size: 17px; }
}
@media (max-width: 991px) {
    /* stacked: the button under the quote, without the drawing */
    body.single-case-studies section.main-content section.flexible-sec .row.cta-between { padding: 44px 36px 48px; border-radius: 20px; }
    body.single-case-studies section.main-content section.flexible-sec .cta-between .heading2 { grid-template-columns: minmax(0, 1fr); }
    body.single-case-studies section.main-content section.flexible-sec .cta-between .heading2 h2 { font-size: 28px; }
    body.single-case-studies section.main-content section.flexible-sec .cta-between .cta-btn-inner { grid-column: 1; grid-row: auto; justify-self: start; margin-top: 28px; }
    body.single-case-studies section.main-content section.flexible-sec .cta-between .cta-btn-inner:before,
    body.single-case-studies section.main-content section.flexible-sec .cta-between .cta-btn-inner:after { display: none; }
}
@media (max-width: 575px) {
    body.single-case-studies section.main-content section.flexible-sec .row.cta-between { padding: 36px 24px 40px; border-radius: 16px; }
    body.single-case-studies section.main-content section.flexible-sec .cta-between .heading2 h2 { font-size: 24px; line-height: 1.2; letter-spacing: -.3px; }
    body.single-case-studies section.main-content section.flexible-sec .cta-between .heading2 p { font-size: 16px; }
    body.single-case-studies section.main-content section.flexible-sec .cta-between a.button.main-btn { min-height: 48px; padding: 0 26px; font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
    body.single-case-studies section.main-content section.flexible-sec .cta-between a.button.main-btn { transition: none; }
    body.single-case-studies section.main-content section.flexible-sec .cta-between a.button.main-btn:hover { transform: none; }
}

/* ---- the call to action: the home page's "Tell us your biggest operational pain point" panel ----
   (ai-pages.css .solv_cta_sec) a deep violet panel across the join between the white "Our Approach" band
   above and the tinted Blog band below; lime mark, heading and line on the left, the lime button on the
   right drawn as a chip (an outline hugging it, pins fanning out to small pads, two traces to the edge).
   This page's own picture (style.css .cta-inner: cta-banner.jpg) under the same veil. Same wording and link.
   The editor printed the button inside the text column and wrapped the line in a second <p> (two empty
   ones): the column is a two-column grid, the button in the second column across all rows. */
body.single-case-studies section.cta-inner {
    margin: 0;
    padding: 0;
    background: linear-gradient(180deg, #FFFFFF 0, #FFFFFF 50%, var(--csp-tint) 50%, var(--csp-tint) 100%);   /* white above (Our Approach), tint below (Blog) */
}
body.single-case-studies section.cta-inner:before,
body.single-case-studies section.cta-inner:after { display: none; }
body.single-case-studies section.cta-inner .cta-row {
    position: relative;
    isolation: isolate;        /* the chip drawing sits above the panel's picture, under the text and button */
    display: block;
    margin: 0;
    padding: 60px 64px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 24px;
    overflow: hidden;
    text-align: left;
    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/cta-banner.jpg') center / cover no-repeat #2C023A;   /* this page's own picture */
    box-shadow: 0 24px 48px rgba(44, 2, 58, .22);
}
body.single-case-studies section.cta-inner .cta-row:before,
body.single-case-studies section.cta-inner .cta-row:after { display: none; }
body.single-case-studies section.cta-inner .heading2 {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 56px;
    align-items: center;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    text-align: left;
}
body.single-case-studies section.cta-inner .heading2 > :not(a) { grid-column: 1; }
body.single-case-studies section.main-content section.cta-inner .heading2 h2 {
    max-width: 760px;
    margin: 0 0 12px;
    font-family: 'Rubik', sans-serif;
    font-size: 36px;
    line-height: 1.2;
    font-weight: 500;
    letter-spacing: -.5px;
    color: #FFFFFF;
    text-align: left;
    text-wrap: balance;
}
body.single-case-studies section.cta-inner .heading2 h2:before {   /* the short lime mark the section headings carry */
    content: "";
    display: block;
    width: 44px;
    height: 4px;
    margin: 0 0 20px;
    border-radius: 2px;
    background: var(--csp-lime);
}
body.single-case-studies section.cta-inner .heading2 p {
    max-width: 760px;
    margin: 0;
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    line-height: 1.6;
    color: rgba(255, 255, 255, .80);
    text-align: left;
}
body.single-case-studies section.cta-inner .heading2 p + p:not(:empty) { margin-top: 12px; }
body.single-case-studies section.cta-inner .heading2 p:empty { display: none; }   /* the editor wrapped the line in a second <p>: two empty ones */
body.single-case-studies section.cta-inner a.button.main-btn {
    position: relative;        /* carries the chip drawing; it lifts with top (a transform would pull the drawing over the button) */
    top: 0;
    grid-column: 2;
    grid-row: 1 / span 6;      /* across the mark, heading and line(s) */
    justify-self: end;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    margin: 0;
    padding: 0 32px;
    border: 1px solid var(--csp-lime);
    border-radius: 999px;
    background: var(--csp-lime);
    font-family: 'Rubik', sans-serif;
    font-size: 17px;
    line-height: 1.2;
    font-weight: 500;
    letter-spacing: 0;
    white-space: nowrap;
    color: #1B0A22;
    box-shadow: 0 10px 28px rgba(194, 201, 4, .26);
    transition: top .25s ease, box-shadow .25s ease, background-color .25s ease, color .25s ease, border-color .25s ease;
}
body.single-case-studies section.cta-inner a.button.main-btn:hover {
    top: -2px;
    border-color: #FFFFFF;
    background: #FFFFFF;
    color: var(--csp-deep);
    box-shadow: 0 6px 16px rgba(20, 8, 28, .14);
}
body.single-case-studies section.cta-inner a.button.main-btn:before {    /* pins and traces (decorative), as on the home page */
    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;
}
body.single-case-studies section.cta-inner a.button.main-btn: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: 1370px) {
    body.single-case-studies section.cta-inner .cta-row { padding: 52px 48px; }
    body.single-case-studies section.cta-inner .heading2 { column-gap: 40px; }
    body.single-case-studies section.main-content section.cta-inner .heading2 h2 { font-size: 32px; }
    body.single-case-studies section.cta-inner .heading2 p { font-size: 17px; }
}
@media (max-width: 991px) {
    /* stacked: the button under the line, without the drawing */
    body.single-case-studies section.cta-inner .cta-row { padding: 44px 36px 48px; border-radius: 20px; }
    body.single-case-studies section.cta-inner .heading2 { grid-template-columns: minmax(0, 1fr); }
    body.single-case-studies section.main-content section.cta-inner .heading2 h2 { font-size: 28px; }
    body.single-case-studies section.cta-inner a.button.main-btn { grid-column: 1; grid-row: auto; justify-self: start; margin-top: 28px; }
    body.single-case-studies section.cta-inner a.button.main-btn:before,
    body.single-case-studies section.cta-inner a.button.main-btn:after { display: none; }
}
@media (max-width: 575px) {
    body.single-case-studies section.cta-inner .cta-row { padding: 36px 24px 40px; border-radius: 16px; }
    body.single-case-studies section.main-content section.cta-inner .heading2 h2 { font-size: 24px; line-height: 1.2; letter-spacing: -.3px; }
    body.single-case-studies section.cta-inner .heading2 p { font-size: 16px; }
}

/* ---- Blog: the same as the home page's "Latest Technology Insights" (ai-pages.css block 12) ----
   heading on the left under the lime mark; white cards with a hairline edge and a soft shadow, the
   picture on top (16:10), title, excerpt and "Read more" under a hairline; the card rises on hover and
   the picture zooms. The theme prints different markup (news-card / border_box_content / overlay-bg),
   so the same values are set on its classes. Same posts, titles, excerpts, pictures and links. */
body.single-case-studies section.main-content section.news-sec .sec-heading.heading2 { width: 100%; max-width: none; margin: 0; padding: 0; text-align: left; }
body.single-case-studies section.main-content section.news-sec .sec-heading.heading2 h2 {
    margin: 0 0 44px;
    text-align: left;
}
body.single-case-studies section.main-content section.news-sec .sec-heading.heading2 h2:before { margin: 0 0 22px; }
body.single-case-studies .news-sec .container > .row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    margin: 0;
}
body.single-case-studies .news-sec .container > .row:before,
body.single-case-studies .news-sec .container > .row:after { display: none; }
body.single-case-studies .news-sec .news-card { float: none; flex: none; display: block; width: auto; max-width: none; margin: 0; padding: 0; border: 0; }
/* the card */
body.single-case-studies .news-sec .border_box_content {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;              /* fills the grid cell: the three cards of a row are equal */
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: #FFFFFF;
    border: 1px solid var(--csp-line);
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(20, 8, 28, .04), 0 12px 32px rgba(44, 2, 58, .07);
    cursor: pointer;
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
body.single-case-studies .news-sec .border_box_content:hover {
    transform: translateY(-6px);
    border-color: rgba(91, 3, 117, .22);
    box-shadow: 0 2px 4px rgba(20, 8, 28, .05), 0 24px 48px rgba(44, 2, 58, .14);
}
/* the picture */
body.single-case-studies .news-sec .blog-image-container {
    position: relative;
    flex: none;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    margin: 0;
    border-radius: 0;
    overflow: hidden;
    background: var(--csp-tint);
}
body.single-case-studies .news-sec .blog-image-container:before,
body.single-case-studies .news-sec .blog-image-container:after { display: none; }
body.single-case-studies .news-sec .blog-image-container img {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    border-radius: 0;
    transform: none;
    transition: transform .5s ease;
}
body.single-case-studies .news-sec .border_box_content:hover .blog-image-container img { transform: scale(1.04); }
/* the words (the theme's dark overlay becomes the card body) */
body.single-case-studies .news-sec .overlay-bg {
    position: static;
    display: flex;
    flex: 1 1 auto;
    margin: 0;
    padding: 24px 26px;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    opacity: 1;
    overflow: visible;
    transform: none;
    -webkit-backdrop-filter: none;   /* style.css blurs it on hover */
    backdrop-filter: none;
}
body.single-case-studies .news-sec .overlay-bg:before,
body.single-case-studies .news-sec .overlay-bg:after { display: none; }
body.single-case-studies .news-sec .item-content {
    position: static;
    display: flex;
    flex-direction: column;
    align-items: stretch;      /* the theme centres the card text on small screens */
    justify-content: flex-start;
    width: 100%;
    height: auto;              /* style.css sets 17rem (272px) on hover: the card and its row grew */
    bottom: auto;
    margin: 0;
    padding: 0;
    background: none;
    overflow: visible;
    transform: none;
    opacity: 1;
    text-align: left;
}
body.single-case-studies .news-sec .item-content h3 {
    min-height: 0;
    height: auto;
    margin: 0 0 10px;
    font-family: 'Rubik', sans-serif;
    font-size: 20px;
    line-height: 1.35;
    font-weight: 500;
    letter-spacing: -.2px;
}
body.single-case-studies .news-sec .item-content h3 a { font: inherit; letter-spacing: inherit; color: var(--csp-ink); text-decoration: none; transition: color .2s ease; }
body.single-case-studies .news-sec .border_box_content:hover .item-content h3 a { color: var(--csp-violet); }
body.single-case-studies .news-sec .item-content p {
    display: block;
    overflow: visible;
    -webkit-line-clamp: none;
    line-clamp: none;
    margin: 0 0 22px;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    line-height: 1.7;
    color: var(--csp-body);
}
/* the link with a hairline above it; its wording and letter case exactly as the theme prints it */
body.single-case-studies .news-sec .item-content a.blog-btn {
    position: static;
    display: block;
    width: auto;
    margin: auto 0 0;
    padding: 18px 0 0;
    border: 0;
    border-top: 1px solid var(--csp-line);
    border-radius: 0;
    background: none;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    line-height: 1.4;
    font-weight: 600;
    letter-spacing: 0;
    color: var(--csp-violet);
    text-decoration: none;
}
body.single-case-studies .news-sec .item-content a.blog-btn:after {   /* small arrow (decorative) */
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    margin: 0 0 1px 10px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform .25s ease;
}
body.single-case-studies .news-sec .border_box_content:hover a.blog-btn { color: var(--csp-deep); }
body.single-case-studies .news-sec .border_box_content:hover a.blog-btn:after { transform: translateX(3px) rotate(45deg); }
/* the whole card opens the post: the link's own layer stretched over the card */
body.single-case-studies .news-sec .item-content a.blog-btn:before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
}

/* ---- responsive ---- */
@media (max-width: 1440px) {
    body.single-case-studies .why-coding-sprint.bgilight-grey,
    body.single-case-studies .why-coding-sprint:not(.bgilight-grey),
    body.single-case-studies .technologies-sec,
    body.single-case-studies .Process_sec,
    body.single-case-studies .news-sec,
    body.single-case-studies .case_study_about { padding: 88px 0; }
    body.single-case-studies section.main-content section .heading2 h2,
    body.single-case-studies section.main-content section:not(.cta-inner) .heading2 h2 { font-size: 38px; }
    body.single-case-studies .herobanner .heading2 h1 { font-size: 52px; }
    body.single-case-studies section.main-content section:not(.cta-inner) .heading2 p { font-size: 17px; }
    body.single-case-studies .case_study_about .about_content p:first-of-type { font-size: 19px; }
}
@media (max-width: 1199px) {
    body.single-case-studies .herobanner.case-innerpage-banner { padding: 138px 0 88px; }   /* the header is 82px from here down */
    body.single-case-studies .news-sec .container > .row,
    body.single-case-studies .why-coding-sprint:not(.bgilight-grey) .container > .row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 991px) {
    body.single-case-studies .why-coding-sprint.bgilight-grey,
    body.single-case-studies .why-coding-sprint:not(.bgilight-grey),
    body.single-case-studies .technologies-sec,
    body.single-case-studies .Process_sec,
    body.single-case-studies .news-sec,
    body.single-case-studies .case_study_about { padding: 64px 0; }
    body.single-case-studies section.main-content section .heading2 h2,
    body.single-case-studies section.main-content section:not(.cta-inner) .heading2 h2 { font-size: 32px; letter-spacing: -.5px; }
    body.single-case-studies .herobanner .heading2 h1 { font-size: 42px; }
    body.single-case-studies .herobanner .heading2 p { font-size: 17px; }
    body.single-case-studies .why-coding-sprint.bgilight-grey .row.mar-t-30.mar-t-30 { margin-top: 36px !important; }
    body.single-case-studies .why-coding-sprint:not(.bgilight-grey) .container > .row,
    body.single-case-studies .Process_sec .container > .row:nth-child(2) { margin-top: 36px; }
    body.single-case-studies .technologies-sec .technology_logos { margin-top: 36px; }
    body.single-case-studies section.main-content section.why-coding-sprint.bgilight-grey .heading2 { grid-template-columns: minmax(0, 1fr); row-gap: 18px; }
    body.single-case-studies section.main-content section.why-coding-sprint.bgilight-grey .heading2 > h2,
    body.single-case-studies section.main-content section.why-coding-sprint.bgilight-grey .heading2 > :not(h2) { grid-column: 1; grid-row: auto; }
    body.single-case-studies section.main-content section.why-coding-sprint.bgilight-grey .heading2 > h2 + * { padding-top: 0; }
    body.single-case-studies section.main-content section.why-coding-sprint:not(.bgilight-grey) .heading2 { grid-template-columns: minmax(0, 1fr); row-gap: 18px; }
    body.single-case-studies section.main-content section.why-coding-sprint:not(.bgilight-grey) .heading2 > h2,
    body.single-case-studies section.main-content section.why-coding-sprint:not(.bgilight-grey) .heading2 > :not(h2) { grid-column: 1; grid-row: auto; }
    body.single-case-studies section.main-content section.why-coding-sprint:not(.bgilight-grey) .heading2 > h2 + * { padding-top: 0; }
    body.single-case-studies .case_study_about .container > .row > [class*="col-"] { grid-template-columns: minmax(0, 1fr); }
    body.single-case-studies .case_study_about .about_content { margin: 36px 0 0; padding-left: 24px; }
    body.single-case-studies .case_study_about .about_content p:first-of-type { font-size: 18px; }
    body.single-case-studies .Process_sec .image_sticky_box { position: static; margin-top: 36px; }
    body.single-case-studies section.main-content section.news-sec .sec-heading.heading2 h2 { margin-bottom: 32px; }
}
@media (max-width: 767px) {
    body.single-case-studies .news-sec .container > .row { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}
@media (max-width: 575px) {
    body.single-case-studies .herobanner.case-innerpage-banner { padding: 122px 0 64px; }
    body.single-case-studies .why-coding-sprint.bgilight-grey,
    body.single-case-studies .why-coding-sprint:not(.bgilight-grey),
    body.single-case-studies .technologies-sec,
    body.single-case-studies .Process_sec,
    body.single-case-studies .news-sec,
    body.single-case-studies .case_study_about { padding: 48px 0; }
    body.single-case-studies section.main-content section .heading2 h2,
    body.single-case-studies section.main-content section:not(.cta-inner) .heading2 h2 { font-size: 27px; line-height: 1.2; }
    body.single-case-studies .herobanner .heading2 h1 { font-size: 34px; line-height: 1.12; }
    body.single-case-studies .herobanner .heading2 p,
    body.single-case-studies section.main-content section:not(.cta-inner) .heading2 p,
    body.single-case-studies .case_study_about .about_content p,
    body.single-case-studies section.cta-inner .heading2 p { font-size: 16px; }
    body.single-case-studies .why-coding-sprint .service-list { padding: 26px 22px 28px; }
    body.single-case-studies .technologies-sec .technology_logos { gap: 12px; }
    body.single-case-studies .technologies-sec .image-name-wrapper { gap: 10px; padding: 8px 18px 8px 8px; }
    body.single-case-studies .technologies-sec .image_box { width: 44px; height: 44px; }
    body.single-case-studies .technologies-sec .image_box img { max-width: 28px; max-height: 24px; }
    body.single-case-studies .technologies-sec .image-name-wrapper span { font-size: 15px; }
    body.single-case-studies .why-coding-sprint:not(.bgilight-grey) .container > .row { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    body.single-case-studies .why-coding-sprint .feat_benefit { gap: 16px; padding: 22px 20px; background-position: 20px 0; }
    body.single-case-studies .why-coding-sprint .feat_benefit svg { width: 44px; height: 44px; padding: 12px 9px; border-radius: 12px; }
    body.single-case-studies .why-coding-sprint .feat_benefit h3 { font-size: 17px; }
    body.single-case-studies .case_study_about .about_content { padding-left: 18px; }
    body.single-case-studies .case_study_about .about_content p:first-of-type { font-size: 17px; }
    body.single-case-studies .news-sec .overlay-bg { padding: 20px; }
    body.single-case-studies .news-sec .item-content h3 { font-size: 18px; }
    body.single-case-studies section.main-content section.news-sec .sec-heading.heading2 h2 { margin-bottom: 26px; }
}
@media (prefers-reduced-motion: reduce) {
    body.single-case-studies .why-coding-sprint .service-list,
    body.single-case-studies .technologies-sec .image-name-wrapper,
    body.single-case-studies .why-coding-sprint .feat_benefit,
    body.single-case-studies .news-sec .border_box_content,
    body.single-case-studies .news-sec .blog-image-container img,
    body.single-case-studies section.cta-inner a.button.main-btn { transition: none; }
    body.single-case-studies .why-coding-sprint .service-list:hover,
    body.single-case-studies .technologies-sec .image-name-wrapper:hover,
    body.single-case-studies .why-coding-sprint .service-list:hover:before,
    body.single-case-studies .why-coding-sprint .feat_benefit:hover,
    body.single-case-studies .news-sec .border_box_content:hover,
    body.single-case-studies .news-sec .border_box_content:hover .blog-image-container img { transform: none; }
    body.single-case-studies section.cta-inner a.button.main-btn:hover { top: 0; }
}

/* ---- one container for every section, on both case-study pages (the main pages' ai-pages.css chunk 34) ----
   The header, the blog cards and the shared contact/footer sections sit on style.css's shared container;
   this page's own sections, the hero and the breadcrumb kept the plain .container (58px wider at 1920,
   up to 68px narrower between 1441 and 1549px, 5px wider on phones). Same numbers as the shared one. */
@media (min-width: 1441px) and (max-width: 1549px) {
    body.single-case-studies .herobanner .container,
    body.single-case-studies .breadcrumb > .container,
    body.single-case-studies section.main-content section:not(.news-sec) .container,
    body.post-type-archive-case-studies section.main-content > .container,
    body.post-type-archive-case-studies section.main-content > .breadcrumb .container { width: calc(100% - 120px); max-width: 1450px; }
}
@media (min-width: 1550px) {
    body.single-case-studies .herobanner .container,
    body.single-case-studies .breadcrumb > .container,
    body.single-case-studies section.main-content section:not(.news-sec) .container,
    body.post-type-archive-case-studies section.main-content > .container,
    body.post-type-archive-case-studies section.main-content > .breadcrumb .container { max-width: 1392px; }
}
@media (max-width: 767px) {
    body.single-case-studies .herobanner .container,
    body.single-case-studies .breadcrumb > .container,
    body.single-case-studies section.main-content section:not(.news-sec) .container,
    body.post-type-archive-case-studies section.main-content > .container,
    body.post-type-archive-case-studies section.main-content > .breadcrumb .container { padding-left: 15px; padding-right: 15px; }
}

/* ==========================================================================
   BLOG ("Our blogs", /blog/ and its pages 2, 3...) - the frame and the sidebar also serve the posts (.single-post)
   The same frame as the case studies page: the breadcrumb on a white row, then the light tint band
   with the heading in the site's section style (lime mark, Rubik 500). Each post is a white card
   (picture on the left; date, title, excerpt and "Read More" on the right) with the home page
   blog card's hover, the whole card opening the post. The sidebar: the subscribe form as a white
   card, the "Free consultation" box as the site's deep violet panel. Page numbers as round pills.
   Same posts, pictures, wording, links, form and behaviour.
   ========================================================================== */
body:is(.blog, .single-post, .category) { background: var(--csp-tint); }   /* behind the contact band's rounded corners */
/* the header stays fixed from the top of the page, as on every other page: blog.css put it in the page flow on the
   blog and the posts, and the theme's script fixed it on the first scroll - the whole page jumped up by its height */
body:is(.blog, .single-post, .category) header.header { position: fixed; }
body:is(.blog, .single-post, .category) section.main-content.mar-t-150 {
    margin-top: 0;
    padding-top: 150px;                            /* the room the fixed header takes (143px) */
    background: #FFFFFF;
}
body:is(.blog, .single-post, .category) section.main-content > .breadcrumb {
    float: none;
    width: 100%;
    margin: 0;
    padding: 16px 0;
    background: #FFFFFF;
}
body:is(.blog, .single-post, .category) section.main-content > .breadcrumb .container { display: flow-root; }   /* its links float: the row wraps them */
body:is(.blog, .single-post, .category) section.main-content > .container {
    padding-top: 100px;                            /* the main pages' section spacing: equal above and below */
    padding-bottom: 100px;
    background: var(--csp-tint);
    box-shadow: 0 0 0 100vmax var(--csp-tint);
    clip-path: inset(0 -100vmax);
}

/* the heading */
body:is(.blog, .single-post, .category) .coding_blogsW h1.blog-title {
    margin: 0 0 48px !important;                   /* blog.css .mar-b-30 is !important */
    font-family: 'Rubik', sans-serif;
    font-size: 46px;
    line-height: 1.12;
    font-weight: 500;
    letter-spacing: -.8px;
    color: var(--csp-ink);
    text-align: left;
}
body:is(.blog, .single-post, .category) .coding_blogsW h1.blog-title:before {   /* short lime mark (decorative) */
    content: "";
    display: block;
    width: 44px;
    height: 4px;
    margin: 0 0 22px;
    border-radius: 2px;
    background: var(--csp-lime);
}
body:is(.blog, .single-post, .category) .coding_blogsW h1.blog-title .leaf { padding: 0; background: none; }

/* posts beside the sidebar */
body:is(.blog, .single-post, .category) .coding_blogsW section.listing-page.row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    column-gap: 48px;
    align-items: start;
    margin: 0;
    padding: 0;                /* the theme's 40px under the list made the band deeper at the bottom than at the top */
}
body:is(.blog, .single-post, .category) .coding_blogsW section.listing-page.row:before,
body:is(.blog, .single-post, .category) .coding_blogsW section.listing-page.row:after { display: none; }
body:is(.blog, .single-post, .category) .coding_blogsW section.listing-page.row > [class*="col-"] { width: auto; max-width: none; margin: 0; padding: 0; }
body:is(.blog, .single-post, .category) #blog_listing { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 24px; }   /* the newest post across the top, the others two across */

/* a post */
body:is(.blog, .single-post, .category) #blog_listing .blog-list {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    margin: 0;
    background: #FFFFFF;
    border: 1px solid var(--csp-line);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(20, 8, 28, .04), 0 12px 32px rgba(44, 2, 58, .07);
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
body:is(.blog, .single-post, .category) #blog_listing .blog-list:hover {
    transform: translateY(-6px);
    border-color: rgba(91, 3, 117, .22);
    box-shadow: 0 2px 4px rgba(20, 8, 28, .05), 0 24px 48px rgba(44, 2, 58, .14);
}
body:is(.blog, .single-post, .category) #blog_listing .blog-list .image {
    position: relative;
    float: none;
    width: auto;
    min-height: 0;
    aspect-ratio: 16 / 10;
    padding: 0;
    overflow: hidden;
    background: var(--csp-tint);
}
body:is(.blog, .single-post, .category) #blog_listing .blog-list .image a { display: block; }
body:is(.blog, .single-post, .category) #blog_listing .blog-list .image img {   /* the picture fills its side of the card */
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    transform: none;
    transition: transform .5s ease;
}
body:is(.blog, .single-post, .category) #blog_listing .blog-list:hover .image img { transform: scale(1.04); }
body:is(.blog, .single-post, .category) #blog_listing .blog-list .content {
    display: flex;
    flex-direction: column;
    float: none;
    width: auto;
    min-height: 0;
    padding: 26px 28px 28px;
}
body:is(.blog, .single-post, .category) #blog_listing .blog-list .content h3 {
    margin: 0 0 12px;
    font-family: 'Rubik', sans-serif;
    font-size: 20px;
    line-height: 1.35;
    font-weight: 500;
    letter-spacing: -.2px;
}
body:is(.blog, .single-post, .category) #blog_listing .blog-list .content h3 a { color: var(--csp-ink); text-decoration: none; transition: color .2s ease; }
body:is(.blog, .single-post, .category) #blog_listing .blog-list:hover .content h3 a { color: var(--csp-violet); }
body:is(.blog, .single-post, .category) #blog_listing .blog-list .content p.small {   /* the date */
    order: -1;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 14px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    line-height: 1.4;
    font-weight: 500;
    color: var(--csp-violet);
}
body:is(.blog, .single-post, .category) #blog_listing .blog-list .content p.small:before {   /* small lime dot (decorative) */
    content: "";
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--csp-lime);
}
body:is(.blog, .single-post, .category) #blog_listing .blog-list .entry-content p {
    margin: 0;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    line-height: 1.7;
    color: var(--csp-body);
}
body:is(.blog, .single-post, .category) #blog_listing .blog-list .entry-content { margin: 0 0 22px; }
body:is(.blog, .single-post, .category) #blog_listing .blog-list .btn-cont {
    position: static;
    margin: auto 0 0 !important;                   /* blog.css .mar-t-30 is !important */
    padding: 18px 0 0;
    border-top: 1px solid var(--csp-line);         /* as the home page blog cards */
}
body:is(.blog, .single-post, .category) #blog_listing .blog-list .btn-cont a.main-btn.btn-bg-transparent {
    position: static;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    line-height: 1.4;
    font-weight: 600;
    color: var(--csp-violet);
    transition: color .2s ease;
}
body:is(.blog, .single-post, .category) #blog_listing .blog-list .btn-cont a.main-btn.btn-bg-transparent span { padding: 0; background: none; color: inherit; }
body:is(.blog, .single-post, .category) #blog_listing .blog-list .btn-cont a.main-btn.btn-bg-transparent: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;
}
body:is(.blog, .single-post, .category) #blog_listing .blog-list:hover .btn-cont a.main-btn.btn-bg-transparent,
body:is(.blog, .single-post, .category) #blog_listing .blog-list .btn-cont a.main-btn.btn-bg-transparent:hover { color: var(--csp-deep) !important; background: none; border: 0; }   /* blog.css turns it white (!important) on hover: it vanished on the white card */
body:is(.blog, .single-post, .category) #blog_listing .blog-list:hover .btn-cont a.main-btn.btn-bg-transparent:after { transform: translateX(3px) rotate(45deg); }
/* the whole card opens the post: the link's own layer stretched over the card (the picture and title link there too) */
body:is(.blog, .single-post, .category) #blog_listing .blog-list .btn-cont a.main-btn.btn-bg-transparent:before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
}

/* the newest post: a wide card, the picture beside the words */
body:is(.blog, .single-post, .category) #blog_listing .blog-list:is(:first-child, h1 + *) { grid-column: 1 / -1; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
body:is(.blog, .single-post, .category) #blog_listing .blog-list:is(:first-child, h1 + *) .image { align-self: stretch; aspect-ratio: auto; min-height: 0; }   /* the full height of the card ... */
body:is(.blog, .single-post, .category) #blog_listing .blog-list:is(:first-child, h1 + *) .image:before { content: ""; display: block; padding-top: 61.81%; }   /* ... and at least the pictures' own proportions (1092 x 675): nothing cut when the words are shorter */
body:is(.blog, .single-post, .category) #blog_listing .blog-list:is(:first-child, h1 + *) .content { justify-content: center; padding: 40px 40px; }
body:is(.blog, .single-post, .category) #blog_listing .blog-list:is(:first-child, h1 + *) .content h3 { font-size: 26px; }
body:is(.blog, .single-post, .category) #blog_listing .blog-list:is(:first-child, h1 + *) .entry-content { margin: 0; }
body:is(.blog, .single-post, .category) #blog_listing .blog-list:is(:first-child, h1 + *) .btn-cont { margin-top: 0 !important; padding-top: 22px; border-top: 0; }

/* page numbers */
body:is(.blog, .single-post, .category) #blog_listing .navigation { grid-column: 1 / -1; margin: 20px 0 0; }
body:is(.blog, .single-post, .category) #blog_listing .navigation ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0; padding: 0; list-style: none; }
body:is(.blog, .single-post, .category) #blog_listing .navigation li { margin: 0; padding: 0; }
body:is(.blog, .single-post, .category) #blog_listing .navigation li a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 46px;
    height: 46px;
    padding: 0 16px;
    background: #FFFFFF;
    border: 1px solid var(--csp-line);
    border-radius: 999px;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    line-height: 1;
    font-weight: 500;
    color: var(--csp-ink);
    transition: border-color .2s ease, color .2s ease, background-color .2s ease;
}
body:is(.blog, .single-post, .category) #blog_listing .navigation li a:hover { border-color: rgba(91, 3, 117, .35); color: var(--csp-violet); }
body:is(.blog, .single-post, .category) #blog_listing .navigation li.active a { background: var(--csp-violet); border-color: var(--csp-violet); color: #FFFFFF; }

/* the sidebar */
body:is(.blog, .single-post, .category) .coding_blogsW .sidebar_main { align-self: stretch; }   /* the column runs the full height of the posts: the cards inside stay in view while scrolling */
body:is(.blog, .single-post, .category) .sidebar_main .sticky#sidebarfixed {
    position: sticky;
    top: 145px;                                    /* 24px under the header once it slims on scroll (121px) */
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-width: none;
}
body:is(.blog, .single-post, .category) .sidebar_main .widget-area { display: flex; flex-direction: column; gap: 24px; width: 100%; }
body:is(.blog, .single-post, .category) .sidebar_main aside.widget { float: none !important; width: auto; margin: 0; }   /* blog.css floats them with !important */
/* subscribe: a white card */
body:is(.blog, .single-post, .category) .sidebar_main aside.s2_form_widget {
    padding: 34px 30px;
    background: #FFFFFF;
    border: 1px solid var(--csp-line);
    border-radius: 20px;
    box-shadow: 0 1px 2px rgba(20, 8, 28, .04), 0 12px 32px rgba(44, 2, 58, .07);
    color: var(--csp-body);
}
body:is(.blog, .single-post, .category) .sidebar_main aside.s2_form_widget h2.widget-title {
    margin: 0 0 14px;
    font-family: 'Rubik', sans-serif;
    font-size: 24px;
    line-height: 1.25;
    font-weight: 500;
    color: var(--csp-ink);
    text-align: left;
}
body:is(.blog, .single-post, .category) .sidebar_main aside.s2_form_widget h2.widget-title:before {   /* short lime mark (decorative) */
    content: "";
    display: block;
    width: 36px;
    height: 4px;
    margin: 0 0 18px;
    border-radius: 2px;
    background: var(--csp-lime);
}
body:is(.blog, .single-post, .category) .sidebar_main .subscribe-section { font-family: 'Inter', sans-serif; font-size: 15px; line-height: 1.65; color: var(--csp-body); }
body:is(.blog, .single-post, .category) .sidebar_main .subscribe-section p.space { margin: 0; font-size: 8px; line-height: 1; }   /* the theme's spacer between the two lines */
body:is(.blog, .single-post, .category) .sidebar_main .subscribe-section form p { margin: 18px 0 0; }
body:is(.blog, .single-post, .category) .sidebar_main .subscribe-section form label { display: inline-block; margin: 0 0 8px; font-size: 14px; font-weight: 600; color: var(--csp-ink); }
body:is(.blog, .single-post, .category) .sidebar_main .subscribe-section form input[type="email"] {
    display: block;
    width: 100%;
    height: 50px;
    margin: 0;
    padding: 0 16px;
    background: var(--csp-tint);
    border: 1px solid rgba(44, 2, 58, .14);
    border-radius: 12px;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    color: var(--csp-ink);
    transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
body:is(.blog, .single-post, .category) .sidebar_main .subscribe-section form input[type="email"]:focus {
    outline: none;
    background: #FFFFFF;
    border-color: var(--csp-violet);
    box-shadow: 0 0 0 3px rgba(91, 3, 117, .12);
}
body:is(.blog, .single-post, .category) .sidebar_main .subscribe-section form input[type="submit"] {   /* the site's button: the same size, colours and hover as on every page */
    display: inline-block;
    width: auto;
    min-height: 52px;
    margin: 0;
    padding: 0 32px;
    background: var(--csp-lime);
    border: 1px solid var(--csp-lime);
    border-radius: 999px;
    box-shadow: 0 10px 28px rgba(194, 201, 4, .26);
    font-family: 'Rubik', sans-serif;
    font-size: 17px;
    line-height: 1.2;
    font-weight: 500;
    color: #1B0A22;
    cursor: pointer;
    transition: transform .25s ease, background-color .25s ease, border-color .25s ease, color .25s ease, box-shadow .25s ease;
}
body:is(.blog, .single-post, .category) .sidebar_main .subscribe-section form input[type="submit"]:hover {
    transform: translateY(-2px);
    background: #FFFFFF;
    border-color: #FFFFFF;
    color: var(--csp-deep);
    box-shadow: 0 6px 16px rgba(20, 8, 28, .14);
}
body:is(.blog, .single-post, .category) .sidebar_main .subscribe-section p.note { margin: 16px 0 0; font-size: 12.5px; line-height: 1.6; color: #6B6475; }
/* "Free consultation": the site's deep violet panel, its own picture */
body:is(.blog, .single-post, .category) .sidebar_main aside.widget_text { padding: 0; background: none; border: 0; }
body:is(.blog, .single-post, .category) .sidebar_main .free-cons-cta {
    margin: 0;
    padding: 36px 30px 38px;
    border: 0;
    border-radius: 20px;
    background: linear-gradient(150deg, #22022E 0%, #3A044E 55%, #5B0375 100%);
    box-shadow: 0 24px 48px -28px rgba(44, 2, 58, .55);
    color: #FFFFFF;
    text-align: center;
}
body:is(.blog, .single-post, .category) .sidebar_main .free-cons-cta p {
    margin: 0;
    font-family: 'Rubik', sans-serif;
    font-size: 22px;
    line-height: 1.3;
    font-weight: 500;
    color: #FFFFFF;
}
body:is(.blog, .single-post, .category) .sidebar_main .free-cons-cta .cta_image { display: block; margin: 0 auto 22px; }
body:is(.blog, .single-post, .category) .sidebar_main .free-cons-cta .cta_image img { display: block; width: auto; max-width: 170px; height: auto; margin: 0 auto; }
body:is(.blog, .single-post, .category) .sidebar_main .free-cons-cta a.button.main-btn.side-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    margin: 22px 0 0;
    padding: 0 32px;
    background: var(--csp-lime);
    border: 1px solid var(--csp-lime);
    border-radius: 999px;
    box-shadow: 0 10px 28px rgba(194, 201, 4, .26);
    font-family: 'Rubik', sans-serif;
    font-size: 17px;
    line-height: 1.2;
    font-weight: 500;
    color: #1B0A22;
    transition: background-color .25s ease, border-color .25s ease, color .25s ease, transform .25s ease, box-shadow .25s ease;
}
body:is(.blog, .single-post, .category) .sidebar_main .free-cons-cta a.button.main-btn.side-btn:hover {
    transform: translateY(-2px);
    background: #FFFFFF;
    border-color: #FFFFFF;
    color: var(--csp-deep);
    box-shadow: 0 6px 16px rgba(20, 8, 28, .14);
}

@media (min-width: 1441px) and (max-width: 1549px) {
    body:is(.blog, .single-post, .category) section.main-content > .container,
    body:is(.blog, .single-post, .category) section.main-content > .breadcrumb .container { width: calc(100% - 120px); max-width: 1450px; }
}
@media (min-width: 1550px) {
    body:is(.blog, .single-post, .category) section.main-content > .container,
    body:is(.blog, .single-post, .category) section.main-content > .breadcrumb .container { max-width: 1392px; }
}
@media (max-width: 1440px) {
    body:is(.blog, .single-post, .category) section.main-content > .container { padding-top: 88px; padding-bottom: 88px; }
    body:is(.blog, .single-post, .category) #blog_listing .blog-list:is(:first-child, h1 + *) .content { padding: 32px 32px; }
    body:is(.blog, .single-post, .category) #blog_listing .blog-list:is(:first-child, h1 + *) .content h3 { font-size: 22px; }
    body:is(.blog, .single-post, .category) .coding_blogsW h1.blog-title { font-size: 42px; }
}
@media (max-width: 1199px) {
    body:is(.blog, .single-post, .category) .coding_blogsW section.listing-page.row { grid-template-columns: minmax(0, 1fr) 300px; column-gap: 32px; }
    body:is(.blog, .single-post, .category) .sidebar_main .sticky#sidebarfixed { top: 90px; }   /* the header is 82px from here down, 66px once scrolled */
    body:is(.blog, .single-post, .category) section.main-content.mar-t-150 { padding-top: 82px; }
    body:is(.blog, .single-post, .category) #blog_listing .blog-list .content { padding: 24px 24px 26px; }
    body:is(.blog, .single-post, .category) #blog_listing .blog-list .content h3 { font-size: 19px; }
    body:is(.blog, .single-post, .category) .sidebar_main aside.s2_form_widget,
    body:is(.blog, .single-post, .category) .sidebar_main .free-cons-cta { padding-left: 24px; padding-right: 24px; }
}
@media (min-width: 992px) and (max-width: 1199px), (max-width: 767px) {
    /* the newest post's column is narrow here: the picture above the words */
    body:is(.blog, .single-post, .category) #blog_listing .blog-list:is(:first-child, h1 + *) { grid-template-columns: minmax(0, 1fr); }
    body:is(.blog, .single-post, .category) #blog_listing .blog-list:is(:first-child, h1 + *) .image { min-height: 0; aspect-ratio: 1092 / 675; }
    body:is(.blog, .single-post, .category) #blog_listing .blog-list:is(:first-child, h1 + *) .content { padding: 28px 28px 30px; }
    body:is(.blog, .single-post, .category) #blog_listing .blog-list:is(:first-child, h1 + *) .content h3 { font-size: 23px; }
}
@media (max-width: 991px) {
    body:is(.blog, .single-post, .category) section.main-content > .container { padding-top: 64px; padding-bottom: 64px; }
    body:is(.blog, .single-post, .category) .coding_blogsW h1.blog-title { margin-bottom: 36px !important; font-size: 34px; letter-spacing: -.5px; }
    body:is(.blog, .single-post, .category) .coding_blogsW section.listing-page.row { grid-template-columns: minmax(0, 1fr); row-gap: 48px; }
    body:is(.blog, .single-post, .category) .sidebar_main .sticky#sidebarfixed { position: static; }
    body:is(.blog, .single-post, .category) .sidebar_main .widget-area { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}
@media (max-width: 767px) {
    body:is(.blog, .single-post, .category) section.main-content > .container,
    body:is(.blog, .single-post, .category) section.main-content > .breadcrumb .container { padding-left: 15px; padding-right: 15px; }
    body:is(.blog, .single-post, .category) #blog_listing { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 575px) {
    body:is(.blog, .single-post, .category) section.main-content > .container { padding-top: 48px; padding-bottom: 48px; }
    body:is(.blog, .single-post, .category) .coding_blogsW h1.blog-title { font-size: 28px; line-height: 1.2; }
    body:is(.blog, .single-post, .category) #blog_listing { gap: 20px; }
    body:is(.blog, .single-post, .category) #blog_listing .blog-list { border-radius: 16px; }
    body:is(.blog, .single-post, .category) #blog_listing .blog-list .content { padding: 22px 20px 24px; }
    body:is(.blog, .single-post, .category) #blog_listing .blog-list .content h3 { font-size: 19px; }
    body:is(.blog, .single-post, .category) #blog_listing .blog-list:is(:first-child, h1 + *) .content { padding: 22px 20px 24px; }
    body:is(.blog, .single-post, .category) #blog_listing .blog-list:is(:first-child, h1 + *) .content h3 { font-size: 22px; }
    body:is(.blog, .single-post, .category) #blog_listing .navigation li a { min-width: 42px; height: 42px; padding: 0 14px; font-size: 14px; }
    body:is(.blog, .single-post, .category) .sidebar_main .widget-area { grid-template-columns: minmax(0, 1fr); }
    body:is(.blog, .single-post, .category) .sidebar_main .subscribe-section form input[type="submit"],
    body:is(.blog, .single-post, .category) .sidebar_main .free-cons-cta a.button.main-btn.side-btn { min-height: 48px; padding: 0 26px; font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
    body:is(.blog, .single-post, .category) #blog_listing .blog-list,
    body:is(.blog, .single-post, .category) #blog_listing .blog-list .image img,
    body:is(.blog, .single-post, .category) .sidebar_main .free-cons-cta a.button.main-btn.side-btn { transition: none; }
    body:is(.blog, .single-post, .category) #blog_listing .blog-list:hover,
    body:is(.blog, .single-post, .category) #blog_listing .blog-list:hover .image img,
    body:is(.blog, .single-post, .category) .sidebar_main .free-cons-cta a.button.main-btn.side-btn:hover { transform: none; }
}

/* ==========================================================================
   BLOG POST (.single-post)
   The blog page's frame (breadcrumb row, light tint band, sidebar cards). The article is a white card:
   the featured picture on top with the title over it under a deep violet veil and the lime mark (as the
   case study heroes), then the text set for reading - Inter 17px, Rubik headings, violet links (the lime
   ones were hard to read on white), the theme's chevron bullets - and the related posts in a soft panel.
   Same picture, title, text, links, lists and related posts.
   ========================================================================== */

/* the article beside the sidebar */
body.single-post .coding_blogsW section.single-page.row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    column-gap: 48px;
    align-items: start;
    margin: 0;
    padding: 0;
}
body.single-post .coding_blogsW section.single-page.row:before,
body.single-post .coding_blogsW section.single-page.row:after { display: none; }
body.single-post .coding_blogsW section.single-page.row > [class*="col-"] { width: auto; max-width: none; margin: 0; padding: 0; }
body.single-post #blog_detail article.blog-detail {
    margin: 0;
    background: #FFFFFF;
    border: 1px solid var(--csp-line);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(20, 8, 28, .04), 0 12px 32px rgba(44, 2, 58, .07);
}
body.single-post #blog_detail article .entry-content { margin: 0; padding: 0; }

/* the picture and the title */
body.single-post #blog_detail .post-thumb { margin: 0; padding: 0; }
body.single-post #blog_detail .post-thumb figure.detail_image {
    position: relative;
    min-height: 0;
    margin: 0;
    background: var(--csp-deep);
}
body.single-post #blog_detail .post-thumb figure.detail_image img { display: block; width: 100%; height: auto; margin: 0; }
body.single-post #blog_detail .post-thumb figure.detail_image .caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    padding: 120px 48px 40px;
    background: linear-gradient(180deg, rgba(20, 2, 30, 0) 0%, rgba(20, 2, 30, .55) 42%, rgba(20, 2, 30, .9) 100%);
}
body.single-post #blog_detail .post-thumb h1.blog_title {
    margin: 0;
    font-family: 'Rubik', sans-serif;
    font-size: 40px;
    line-height: 1.18;
    font-weight: 500;
    letter-spacing: -.6px;
    color: #FFFFFF;
    text-wrap: balance;
}
body.single-post #blog_detail .post-thumb h1.blog_title:before {   /* short lime mark (decorative) */
    content: "";
    display: block;
    width: 44px;
    height: 4px;
    margin: 0 0 20px;
    border-radius: 2px;
    background: var(--csp-lime);
}
body.single-post #blog_detail .post-thumb h1.blog_title .leaf { padding: 0; background: none; color: inherit; }

/* the text */
body.single-post #blog_detail .post-content { padding: 48px 56px 56px; }
body.single-post #blog_detail .post-content p {
    margin: 0 0 18px;
    font-family: 'Inter', sans-serif;
    font-size: 17px;
    line-height: 1.8;
    color: var(--csp-body);
}
body.single-post #blog_detail .post-content h2 {
    margin: 44px 0 16px;
    font-family: 'Rubik', sans-serif;
    font-size: 30px;
    line-height: 1.25;
    font-weight: 500;
    letter-spacing: -.4px;
    color: var(--csp-ink);
}
body.single-post #blog_detail .post-content h3 {
    margin: 32px 0 14px;
    font-family: 'Rubik', sans-serif;
    font-size: 22px;
    line-height: 1.3;
    font-weight: 500;
    color: var(--csp-ink);
}
body.single-post #blog_detail .post-content > :first-child { margin-top: 0; }
body.single-post #blog_detail .post-content :is(h2, h3, h4) :is(strong, b) { font-weight: inherit; }   /* some headings are wrapped in <b>, some in <strong>: one weight */
body.single-post #blog_detail .post-content :is(strong, b) { font-weight: 600; color: var(--csp-ink); }

/* tables (e.g. React vs React Native): a rounded panel, the first row as a deep violet header, the first column
   on the tint, hairlines between the rows; on phones the table scrolls sideways inside its panel */
body.single-post #blog_detail .post-content table {
    width: 100%;
    margin: 28px 0 32px;
    border: 1px solid var(--csp-line);
    border-collapse: separate;
    border-spacing: 0;
    border-radius: 16px;
    overflow: hidden;
    background: #FFFFFF;
    box-shadow: 0 1px 2px rgba(20, 8, 28, .04), 0 12px 32px rgba(44, 2, 58, .06);
}
body.single-post #blog_detail .post-content table td,
body.single-post #blog_detail .post-content table th {
    padding: 16px 20px;
    border: 0;
    border-top: 1px solid var(--csp-line);
    vertical-align: top;
    text-align: left;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: var(--csp-body);
}
body.single-post #blog_detail .post-content table td :is(span, p) { font-size: inherit; line-height: inherit; color: inherit; }
body.single-post #blog_detail .post-content table td p { margin: 0; }
body.single-post #blog_detail .post-content table td:first-child { width: 24%; background: var(--csp-tint); }
body.single-post #blog_detail .post-content table td:first-child :is(b, strong) { color: var(--csp-ink); }
body.single-post #blog_detail .post-content table tr:first-child > :is(td, th) {   /* the column titles */
    border-top: 0;
    background: var(--csp-deep);
    font-family: 'Rubik', sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: #FFFFFF;
}
body.single-post #blog_detail .post-content table tr:first-child > :is(td, th) :is(b, strong) { font-weight: 500; color: #FFFFFF; }
body.single-post #blog_detail .post-content table tr:first-child > :is(td, th) + :is(td, th) { border-left: 1px solid rgba(255, 255, 255, .10); }
body.single-post #blog_detail .post-content table tr:not(:first-child) > td + td { border-left: 1px solid var(--csp-line); }
/* links: the main site's text link (home: violet, underlined 3px below; the underline goes on hover) */
body.single-post #blog_detail .post-content a,
body.single-case-studies section.main-content section :is(p, li) a:not(.button):not(.btn):not(.blog-btn) {
    font-weight: inherit;
    color: var(--csp-violet);
    text-decoration: underline;
    text-decoration-color: currentColor;
    text-underline-offset: 3px;
}
body.single-post #blog_detail .post-content a:hover,
body.single-case-studies section.main-content section :is(p, li) a:not(.button):not(.btn):not(.blog-btn):hover { color: var(--csp-violet); text-decoration: none; }
body.single-post #blog_detail .post-content :is(ul, ol) { margin: 0 0 10px; padding: 0; }
body.single-post #blog_detail .post-content :is(ul, ol) li:before {   /* the theme's chevron bullet at its own proportions (48 x 26), centred on the first line */
    top: 8px;
    width: 26px;
    height: 14px;
    background-position: 0 0;
    background-size: 26px 14px;
}
body.single-post #blog_detail .post-content :is(ul, ol) li { margin: 0 0 6px; padding: 0 0 0 40px; font-family: 'Inter', sans-serif; font-size: 17px; line-height: 1.8; color: var(--csp-body); }   /* the numbered points (ol) had the theme's 15px and a larger arrow */

/* related posts */
body.single-post #blog_detail .post-content .yarpp-related {
    margin: 44px 0 0;
    padding: 30px 32px 22px;
    background: var(--csp-tint);
    border-radius: 18px;
}
body.single-post #blog_detail .post-content .yarpp-related h3 { margin: 0 0 8px; font-size: 21px; }
body.single-post #blog_detail .post-content .yarpp-related ol { margin: 0; padding: 0; list-style: none; }
body.single-post #blog_detail .post-content .yarpp-related ol li {
    margin: 0;
    padding: 14px 0;
    border-top: 1px solid var(--csp-line);
    list-style: none;
}
body.single-post #blog_detail .post-content .yarpp-related ol li:first-child { border-top: 0; }
body.single-post #blog_detail .post-content .yarpp-related ol li:before,
body.single-post #blog_detail .post-content .yarpp-related ol li:after { display: none; }
body.single-post #blog_detail .post-content .yarpp-related ol li a {
    display: inline-flex;
    align-items: baseline;
    gap: 10px;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    line-height: 1.5;
    font-weight: 500;
    color: var(--csp-ink);
    text-decoration: none;
}
body.single-post #blog_detail .post-content .yarpp-related ol li a:after {   /* small arrow (decorative) */
    content: "";
    flex: none;
    width: 7px;
    height: 7px;
    border-top: 2px solid var(--csp-violet);
    border-right: 2px solid var(--csp-violet);
    transform: rotate(45deg);
    transition: transform .25s ease;
}
body.single-post #blog_detail .post-content .yarpp-related ol li a:hover { color: var(--csp-violet); }
body.single-post #blog_detail .post-content .yarpp-related ol li a:hover:after { transform: translateX(3px) rotate(45deg); }

@media (max-width: 1440px) {
    body.single-post #blog_detail .post-thumb h1.blog_title { font-size: 36px; }
}
@media (max-width: 1199px) {
    body.single-post .coding_blogsW section.single-page.row { grid-template-columns: minmax(0, 1fr) 300px; column-gap: 32px; }
    body.single-post #blog_detail .post-thumb figure.detail_image .caption { padding: 90px 36px 32px; }
    body.single-post #blog_detail .post-thumb h1.blog_title { font-size: 30px; }
    body.single-post #blog_detail .post-content { padding: 40px 40px 44px; }
    body.single-post #blog_detail .post-content h2 { font-size: 26px; }
}
@media (max-width: 991px) {
    body.single-post .coding_blogsW section.single-page.row { grid-template-columns: minmax(0, 1fr); row-gap: 48px; }
    body.single-post #blog_detail .post-thumb h1.blog_title { font-size: 32px; }
}
@media (max-width: 575px) {
    body.single-post #blog_detail article.blog-detail { border-radius: 18px; }
    /* the title under the picture on the violet: over a small picture it covered most of it */
    body.single-post #blog_detail .post-thumb figure.detail_image .caption { position: static; padding: 26px 22px 28px; background: var(--csp-deep); }
    body.single-post #blog_detail .post-thumb h1.blog_title { font-size: 24px; line-height: 1.25; }
    body.single-post #blog_detail .post-thumb h1.blog_title:before { margin-bottom: 16px; }
    body.single-post #blog_detail .post-content { padding: 28px 22px 32px; }
    body.single-post #blog_detail .post-content p,
    body.single-post #blog_detail .post-content :is(ul, ol) li { font-size: 16px; }
    body.single-post #blog_detail .post-content h2 { margin-top: 36px; font-size: 23px; }
    body.single-post #blog_detail .post-content h3 { margin-top: 28px; font-size: 19px; }
    body.single-post #blog_detail .post-content .yarpp-related { padding: 24px 20px 16px; }
    body.single-post #blog_detail .post-content table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    body.single-post #blog_detail .post-content table tbody { display: table; width: 100%; min-width: 560px; }
    body.single-post #blog_detail .post-content table :is(td, th) { padding: 14px 16px; font-size: 15px; }
}

/* ==========================================================================
   BLOG CATEGORY PAGES (/blog/category/...): the blog page's design. The heading sits inside the list (it spans
   the full width, the post after it is the featured one) and there is no sidebar (the list takes the full width).
   ========================================================================== */
body.category .coding_blogsW section.listing-page.row { grid-template-columns: minmax(0, 1fr); }
body.category #blog_listing > h1.blog-title { grid-column: 1 / -1; margin-bottom: 20px !important; }   /* + the list's 28px gap = 48 under the heading */
body.category #blog_listing > h1.blog-title > .leaf > span { color: inherit; }
@media (min-width: 992px) and (max-width: 1199px) {
    /* no sidebar here: the newest post keeps its picture beside the words */
    body.category #blog_listing .blog-list:is(:first-child, h1 + *) { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
    body.category #blog_listing .blog-list:is(:first-child, h1 + *) .content { padding: 36px 36px; }
    body.category #blog_listing .blog-list:is(:first-child, h1 + *) .content h3 { font-size: 24px; }
}
@media (max-width: 991px) {
    body.category #blog_listing > h1.blog-title { margin-bottom: 8px !important; }   /* + 28 = 36 */
}
@media (max-width: 575px) {
    body.category #blog_listing > h1.blog-title { margin-bottom: 16px !important; }   /* + the 20px gap = 36 */
}

/* ==========================================================================
   HEADER MENU on every WordPress page (blog, posts, categories, case studies): the same look as on the
   main pages (ai-pages.css chunks 17-18, which only reach pages with .ai-dev-page). The drop-down menus:
   a white panel with a lime line along its top, roomier rows, a soft violet wash and a small arrow sliding
   in on hover, the page you are on marked in violet with a lime edge. The top-level links in medium weight,
   the phone and email turning lime on hover, "Let's Talk" as the site's lime button in a smaller size.
   Same links, order, menus and behaviour; the header keeps its height.
   ========================================================================== */
body.wp-theme-codingsprint .header .main-navigation .menu > li > a { font-weight: 500; }
body.wp-theme-codingsprint .header .contact-info-top a { transition: color .2s ease; }
body.wp-theme-codingsprint .header .contact-info-top a:hover { color: var(--csp-lime); }
body.wp-theme-codingsprint .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(--csp-lime);
    border-radius: 999px;
    background: var(--csp-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;
}
body.wp-theme-codingsprint .header .header-cta a.header-cta-btn:hover {
    transform: translateY(-2px);
    border-color: #FFFFFF;
    background: #FFFFFF;
    color: var(--csp-deep) !important;             /* the shared .header-cta-btn:hover sets its colour with !important */
    box-shadow: 0 12px 28px rgba(11, 6, 18, .40);
}
body.wp-theme-codingsprint .header .main-navigation .menu li ul {
    min-width: 270px;
    padding: 10px;
    border: 1px solid var(--csp-line);
    border-top: 3px solid var(--csp-lime);
    border-radius: 16px;
    background: #FFFFFF;
    box-shadow: 0 2px 4px rgba(20, 8, 28, .05), 0 24px 48px rgba(44, 2, 58, .20);
}
body.wp-theme-codingsprint .header .main-navigation .menu li ul li,
body.wp-theme-codingsprint .header .main-navigation .menu .dropdown ul li:has(> a[aria-current="page"]) {
    margin: 0 0 2px;
    padding: 0;
    border-radius: 10px;
    background: none;
}
body.wp-theme-codingsprint .header .main-navigation .menu li ul li:last-child { margin-bottom: 0; }
body.wp-theme-codingsprint .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(--csp-ink);
    transition: background-color .2s ease, color .2s ease;
}
body.wp-theme-codingsprint .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;
}
body.wp-theme-codingsprint .header .main-navigation .menu li ul li a:hover {
    background: rgba(91, 3, 117, .06);
    color: var(--csp-violet);
}
body.wp-theme-codingsprint .header .main-navigation .menu li ul li a:hover:after {
    opacity: 1;
    transform: translateX(0) rotate(45deg);
}
body.wp-theme-codingsprint .header .main-navigation .menu .dropdown ul li a[aria-current="page"] {
    background: rgba(91, 3, 117, .08);
    font-weight: 500;
    color: var(--csp-violet);
}
body.wp-theme-codingsprint .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(--csp-lime);
}
@media (prefers-reduced-motion: reduce) {
    body.wp-theme-codingsprint .header .main-navigation .menu li ul li a:after,
    body.wp-theme-codingsprint .header .header-cta a.header-cta-btn { transition: none; }
    body.wp-theme-codingsprint .header .header-cta a.header-cta-btn:hover { transform: none; }
}

/* ==========================================================================
   TYPE CONSISTENCY with the main pages (site-wide audit, 2026-10-16)
   - the breadcrumb on every WordPress page: the main pages' bar (ai-pages.css chunk 10) - a white bar closed by a
     hairline, Inter 14px, "Home" in the body colour after a small lime house tile, a chevron between the steps,
     the page you are on in bold ink (it was Rubik, black or violet depending on the page)
   - the case study hero title and line on the main pages' page-title scale (58 / 50 / 40 / 32px, the line 82%
     white): blog.css held the title at 64px (4rem) on every screen with a heavier selector
   ========================================================================== */
body.wp-theme-codingsprint section.main-content > .breadcrumb {
    float: none;
    width: 100%;
    margin: 0;
    padding: 0;
    background: #FFFFFF;
    border-bottom: 1px solid var(--csp-line);
}
body.wp-theme-codingsprint section.main-content > .breadcrumb .container { display: block; }
body.wp-theme-codingsprint section.main-content > .breadcrumb ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    row-gap: 6px;
    min-height: 62px;
    margin: 0;
    padding: 12px 0;
    list-style: none;
}
body.wp-theme-codingsprint section.main-content > .breadcrumb ul li {
    position: relative;
    display: inline-flex;
    align-items: center;
    float: none;
    min-width: 0;
    margin: 0;
    padding: 0;
}
body.wp-theme-codingsprint section.main-content > .breadcrumb ul li,
body.wp-theme-codingsprint section.main-content > .breadcrumb ul li :is(a, span) {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    line-height: 21px;
    font-weight: 500;
    letter-spacing: 0;
    color: var(--csp-ink);
    text-decoration: none;
}
body.wp-theme-codingsprint section.main-content > .breadcrumb ul li a { display: inline-flex; align-items: center; transition: color .2s ease; }
body.wp-theme-codingsprint section.main-content > .breadcrumb ul li a:hover { color: var(--csp-ink); }   /* the shared style.css turns it lime */
body.wp-theme-codingsprint section.main-content > .breadcrumb ul li:first-child a { color: var(--csp-body); }
body.wp-theme-codingsprint section.main-content > .breadcrumb ul li:first-child a:hover { color: var(--csp-ink); }
body.wp-theme-codingsprint section.main-content > .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(--csp-lime);
    border-radius: 9px;
    background: var(--csp-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;
}
body.wp-theme-codingsprint section.main-content > .breadcrumb ul li:first-child a:hover:before { border-color: #B1B803; background-color: #B1B803; }
body.wp-theme-codingsprint section.main-content > .breadcrumb ul li + li { margin-left: 12px; padding-left: 26px; }
body.wp-theme-codingsprint section.main-content > .breadcrumb ul li + li:before {   /* chevron between the steps (decorative) */
    content: "";
    position: absolute;
    top: 50%;
    left: 6px;
    width: 6px;
    height: 6px;
    margin: 0;
    background: none;
    border: 0;
    border-right: 1.5px solid rgba(20, 8, 28, .45);
    border-bottom: 1.5px solid rgba(20, 8, 28, .45);
    transform: translateY(-50%) rotate(-45deg);
}
body.wp-theme-codingsprint section.main-content > .breadcrumb ul li:last-child > :is(a, span) {   /* the page you are on: plain bold text */
    display: block;
    overflow: hidden;
    font-weight: 600;
    color: var(--csp-ink);
    text-overflow: ellipsis;
    white-space: nowrap;
}
@media (max-width: 374px) {
    body.wp-theme-codingsprint section.main-content > .breadcrumb ul { min-height: 58px; }
    body.wp-theme-codingsprint section.main-content > .breadcrumb ul li,
    body.wp-theme-codingsprint section.main-content > .breadcrumb ul li :is(a, span) { font-size: 13px; }
    body.wp-theme-codingsprint section.main-content > .breadcrumb ul li:first-child a:before { width: 26px; height: 26px; margin-right: 6px; background-size: 14px 14px; }
    body.wp-theme-codingsprint section.main-content > .breadcrumb ul li + li { margin-left: 4px; padding-left: 18px; }
    body.wp-theme-codingsprint section.main-content > .breadcrumb ul li + li:before { left: 5px; }
}

/* the case study hero: the main pages' page-title scale */
body.single-case-studies .herobanner.case-innerpage-banner .herobanner-content .magento-flex .magento-cont .heading2 h1 {
    font-size: 58px;
    line-height: 1.06;
    letter-spacing: -1.4px;
}
body.single-case-studies .herobanner.case-innerpage-banner .herobanner-content .magento-flex .magento-cont .heading2 h1:before { width: 52px; margin-bottom: 26px; }
body.single-case-studies .herobanner.case-innerpage-banner .herobanner-content .magento-flex .magento-cont .heading2 p {
    font-size: 19px;
    line-height: 1.6;
    color: rgba(255, 255, 255, .82);
}
@media (max-width: 1440px) {
    body.single-case-studies .herobanner.case-innerpage-banner .herobanner-content .magento-flex .magento-cont .heading2 h1 { font-size: 50px; }
    body.single-case-studies .herobanner.case-innerpage-banner .herobanner-content .magento-flex .magento-cont .heading2 p { font-size: 18px; }
}
@media (max-width: 991px) {
    body.single-case-studies .herobanner.case-innerpage-banner .herobanner-content .magento-flex .magento-cont .heading2 h1 { font-size: 40px; letter-spacing: -.8px; }
    body.single-case-studies .herobanner.case-innerpage-banner .herobanner-content .magento-flex .magento-cont .heading2 h1:before { margin-bottom: 20px; }
    body.single-case-studies .herobanner.case-innerpage-banner .herobanner-content .magento-flex .magento-cont .heading2 p { font-size: 17px; }
}
@media (max-width: 575px) {
    body.single-case-studies .herobanner.case-innerpage-banner .herobanner-content .magento-flex .magento-cont .heading2 h1 { font-size: 32px; line-height: 1.12; }
    body.single-case-studies .herobanner.case-innerpage-banner .herobanner-content .magento-flex .magento-cont .heading2 p { font-size: 16px; }
}

/* ==========================================================================
   POST: "Get a summary in" and the in-text call to action (2026-10-22, "on blog details page this section
   not looking good"). The post's text rules had reached inside them: the link rule turned the buttons'
   white text violet and underlined, and the paragraph colour made the banner's white line grey on dark.
   Both are now drawn in the site's styles. Same wording, links and picture.
   ========================================================================== */
/* the AI summary buttons: on a soft strip, each in its own brand colour (blog.css), white text, no underline */
body.single-post #blog_detail .post-content .ai-share-buttons.ai-share {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 0 0 36px;
    padding: 16px 20px;
    background: var(--csp-tint);
    border-radius: 16px;
}
body.single-post #blog_detail .post-content .ai-share-buttons.ai-share h3.widget-title {
    margin: 0 6px 0 0;
    font-family: 'Rubik', sans-serif;
    font-size: 16px;
    line-height: 1.3;
    font-weight: 500;
    color: var(--csp-ink);
}
body.single-post #blog_detail .post-content .ai-share-buttons a.ai-share-button {
    display: inline-flex;
    align-items: center;
    height: 38px;
    padding: 0 18px;
    font-family: 'Inter', sans-serif;
    font-size: 14.5px;
    line-height: 1;
    font-weight: 500;
    color: #FFFFFF;
    text-decoration: none;
    border-radius: 999px;
    opacity: 1;
    box-shadow: 0 6px 14px -8px rgba(20, 8, 28, .45);
    transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
body.single-post #blog_detail .post-content .ai-share-buttons a.ai-share-button:hover,
body.single-post #blog_detail .post-content .ai-share-buttons a.ai-share-button:focus {
    color: #FFFFFF;
    text-decoration: none;
    opacity: 1;
    filter: brightness(1.08);
    transform: translateY(-2px);
    box-shadow: 0 10px 18px -8px rgba(20, 8, 28, .5);
}
body.single-post #blog_detail .post-content .ai-share-buttons a.ai-share-button:focus-visible { outline: 2px solid var(--csp-violet); outline-offset: 2px; }

/* the call to action inside a post: the site's violet panel, lime button, the picture on a white tile */
body.single-post #blog_detail .post-content .content_cta_banner {
    margin: 40px 0;
    padding: 36px 40px;
    overflow: hidden;
    background: linear-gradient(120deg, #1E0228 0%, var(--csp-deep) 45%, #4A0360 100%);
    border-radius: 20px;
    box-shadow: 0 24px 48px rgba(44, 2, 58, .18);
}
body.single-post #blog_detail .post-content .content_cta_banner:before { display: none; }   /* the dark texture (hot-linked from another site) */
body.single-post #blog_detail .post-content .content_cta_banner .ctaContainer { gap: 36px; }
body.single-post #blog_detail .post-content .content_cta_banner .ctaContainer > div.ctaContent { flex: 1 1 auto; min-width: 0; }
body.single-post #blog_detail .post-content .content_cta_banner .ctaContainer > div.ctaContent h5 {
    margin: 0 0 12px;
    font-family: 'Rubik', sans-serif !important;     /* the banner's own style forces Raleway with !important */
    font-size: 26px;
    line-height: 1.25;
    font-weight: 500;
    letter-spacing: -.3px;
    color: #FFFFFF;
}
body.single-post #blog_detail .post-content .content_cta_banner .ctaContainer > div.ctaContent h5:before {   /* short lime mark (decorative) */
    content: "";
    display: block;
    width: 44px;
    height: 4px;
    margin: 0 0 18px;
    border-radius: 2px;
    background: var(--csp-lime);
}
body.single-post #blog_detail .post-content .content_cta_banner .ctaContainer > div.ctaContent p {
    max-width: 560px;
    margin: 0 0 26px;
    font-family: 'Inter', sans-serif !important;
    font-size: 17px;
    line-height: 1.65;
    color: rgba(255, 255, 255, .82);
}
body.single-post #blog_detail .post-content .content_cta_banner .ctaContainer > div.ctaContent a.Ctabtn {   /* the site's primary button */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 52px;
    margin: 0;
    padding: 0 32px;
    font-family: 'Rubik', sans-serif !important;
    font-size: 17px;
    line-height: 1;
    font-weight: 500;
    color: #1B0A22;
    text-decoration: none;
    background: var(--csp-lime);
    border: 1px solid var(--csp-lime);
    border-radius: 999px;
    box-shadow: 0 10px 28px rgba(194, 201, 4, .26);
    transition: transform .2s ease, background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
}
body.single-post #blog_detail .post-content .content_cta_banner .ctaContainer > div.ctaContent a.Ctabtn:hover,
body.single-post #blog_detail .post-content .content_cta_banner .ctaContainer > div.ctaContent a.Ctabtn:focus {
    color: var(--csp-deep) !important;                 /* blog.css sets white !important on hover */
    text-decoration: none;
    background: #FFFFFF;
    border-color: #FFFFFF;
    box-shadow: 0 6px 16px rgba(20, 8, 28, .14);
    transform: translateY(-2px);
}
body.single-post #blog_detail .post-content .content_cta_banner .ctaContainer > div.ctaContent a.Ctabtn:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 3px; }
body.single-post #blog_detail .post-content .content_cta_banner .ctaButton:empty { display: none; }   /* an empty box: only a gap in the row */
body.single-post #blog_detail .post-content .content_cta_banner .ctaImg {
    flex: none;
    padding: 14px;
    background: #FFFFFF;
    border-radius: 16px;
    box-shadow: 0 12px 28px rgba(10, 2, 16, .28);
}
body.single-post #blog_detail .post-content .content_cta_banner .ctaImg img { display: block; width: 220px; max-width: 100%; height: auto; margin: 0; }

@media (max-width: 1199px) {
    body.single-post #blog_detail .post-content .content_cta_banner { padding: 32px; }
    body.single-post #blog_detail .post-content .content_cta_banner .ctaContainer > div.ctaContent h5 { font-size: 23px; }
    body.single-post #blog_detail .post-content .content_cta_banner .ctaImg img { width: 180px; }
}
@media (max-width: 767px) {
    /* stacked: the picture above the text */
    body.single-post #blog_detail .post-content .content_cta_banner .ctaContainer { flex-direction: column-reverse; align-items: flex-start; gap: 24px; }
    body.single-post #blog_detail .post-content .content_cta_banner .ctaImg img { width: 200px; }
}
@media (max-width: 575px) {
    body.single-post #blog_detail .post-content .ai-share-buttons.ai-share { padding: 14px 16px; gap: 8px; }
    body.single-post #blog_detail .post-content .ai-share-buttons.ai-share h3.widget-title { flex-basis: 100%; margin: 0 0 4px; }
    body.single-post #blog_detail .post-content .ai-share-buttons a.ai-share-button { height: 36px; padding: 0 15px; font-size: 14px; }
    body.single-post #blog_detail .post-content .content_cta_banner { margin: 32px 0; padding: 28px 22px; border-radius: 18px; }
    body.single-post #blog_detail .post-content .content_cta_banner .ctaContainer > div.ctaContent h5 { font-size: 21px; }
    body.single-post #blog_detail .post-content .content_cta_banner .ctaContainer > div.ctaContent p { font-size: 16px; }
    body.single-post #blog_detail .post-content .content_cta_banner .ctaContainer > div.ctaContent a.Ctabtn { height: 48px; padding: 0 26px; font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
    body.single-post #blog_detail .post-content .ai-share-buttons a.ai-share-button,
    body.single-post #blog_detail .post-content .content_cta_banner .ctaContainer > div.ctaContent a.Ctabtn { transition: none; }
    body.single-post #blog_detail .post-content .ai-share-buttons a.ai-share-button:hover,
    body.single-post #blog_detail .post-content .content_cta_banner .ctaContainer > div.ctaContent a.Ctabtn:hover { transform: none; }
}