/*
 * Codexia design system: global fixes from the 13 Oct 2026 design audit
 * (quick-fix items, section 10 "Proposed unified standard").
 *
 * Loaded after style.css so these rules win. Values live in the custom
 * properties below; when the Claude Design handover changes a value, change
 * it here once.
 *
 * Round 2 (QA, 19 Oct 2026): section spacing reduced to 40/24px, logo sizing
 * by area, portfolio icons back to live sizes, and the testimonial slider is
 * now included in these rules.
 */

:root {
    /* Colour */
    --cx-primary: #284d91;
    --cx-text: #2e2e2e;
    --cx-text-muted: #555555;
    --cx-surface: #ffffff;
    --cx-surface-alt: #f6f6f6;
    --cx-tint: #f1f6ff;
    --cx-on-primary: #ffffff;

    /* Type scale (desktop) */
    --cx-h1: 48px;
    --cx-h2: 36px;
    --cx-h3: 22px;
    --cx-h4: 18px;
    --cx-body: 16px;
    --cx-lead: 20px;
    --cx-small: 14px;
    --cx-line-body: 1.65;

    /* Shape and spacing */
    --cx-radius-card: 20px;   /* cards and card images */
    --cx-shadow: 0 0 10px rgba(0, 0, 0, .09); /* the one shadow */
    --cx-card-padding: 30px;
    --cx-grid-gap: 24px;
    --cx-radius-control: 10px;
    --cx-button-height: 52px;
    --cx-field-height: 48px;
    --cx-chip-height: 48px;
    --cx-section-space: 40px; /* per side, sections on the same background */
    --cx-band-space: 64px;    /* inside sections with their own background */
    --cx-heading-gap: 40px;
    --cx-text-measure: 760px;
}

@media (max-width: 767.98px) {
    :root {
        --cx-h1: 30px;
        --cx-h2: 24px;
        --cx-h3: 18px;
        --cx-h4: 16px;
        --cx-lead: 18px;
        --cx-button-height: 48px;
        --cx-card-padding: 20px;
        --cx-section-space: 24px;
        --cx-band-space: 40px;
    }
}


/* ---------------------------------------------------------------------------
 * T5 Body text: 16/500, line height 1.65, nothing below 14px, no justify (L4)
 * ------------------------------------------------------------------------ */

body {
    line-height: var(--cx-line-body);
}

/* :where() keeps this at element-level specificity, so purpose-built text
   styles (lead, labels, small text) still win over it. */
p:where(:not(.count-text)),
.banner-content,
.services-area .services-items .default-tab .info,
.specialities-area p,
.blog-tab .info p,
.blog-detail p,
.pricing-heading p {
    font-size: var(--cx-body);
    line-height: var(--cx-line-body);
}

.blog-tab .info p,
.blog-detail p {
    text-align: left;
}


/* ---------------------------------------------------------------------------
 * T1 H1: one style on every page. Colour rule stays as built: the H1 is blue
 * and its <span> part is dark, so the blue phrase is the text outside the span.
 * ------------------------------------------------------------------------ */

.banner-caption h1,
.banner-content h1,
.cost-banner-caption h1,
.portfolio-hero h1 {
    font-size: var(--cx-h1);
    font-weight: 800;
    line-height: 1.2;
    text-transform: none;
    color: var(--cx-primary);
}

.banner-caption h1 span,
.banner-content h1 span,
.cost-banner-caption h1 span {
    color: var(--cx-text);
}


/* ---------------------------------------------------------------------------
 * T2 H2 section titles: 36/700 (24 mobile), dark, sentence case
 * ------------------------------------------------------------------------ */

h2,
.specialities-area h2,
.process-tab-area h2,
.blog-top-area h2,
.pricing-heading h2,
.testimonials-had h2 {
    font-size: var(--cx-h2);
    font-weight: 700;
    line-height: 1.25;
    text-transform: none;
}

/* The hero card title ("What makes us different") is a label, not a
   section heading: a <p>, card-title size, 22px (18px mobile). */
.banner-text .banner-title {
    background-color: var(--cx-primary);
    color: var(--cx-on-primary);
    text-align: center;
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: var(--cx-h3);
    font-weight: 700;
    line-height: 1.25;
}

/* Section subtitle: moved out of the H2 into its own paragraph (was a span
   inside the heading). Same look as before, 16px minimum on mobile. */
.section-subtitle {
    margin-top: -10px;
    margin-bottom: 20px;
    font-size: 18px;
    font-weight: 500;
    text-align: center;
}

.contact-area.left .section-subtitle {
    text-align: left;
}

@media (max-width: 767.98px) {
    .section-subtitle {
        font-size: var(--cx-body);
    }
}


/* ---------------------------------------------------------------------------
 * T3 Home hero subtitle: a lead paragraph (was an H2), 20/500, 18 mobile
 * ------------------------------------------------------------------------ */

.banner-caption .banner-lead {
    font-size: var(--cx-lead);
    font-weight: 500;
    line-height: 1.5;
    color: var(--cx-text);
    margin-bottom: 20px;
}


/* ---------------------------------------------------------------------------
 * M3 Mobile titles: H3 and card titles 18, H4 16
 * ------------------------------------------------------------------------ */

@media (max-width: 767.98px) {
    h3 {
        font-size: var(--cx-h3);
    }

    h4 {
        font-size: var(--cx-h4);
    }

    /* Portfolio and blog card titles are card titles (18px), whatever their tag. */
    .portfolio-tab .portfolio-content h4,
    .blog-tab .info h4 {
        font-size: var(--cx-h3);
    }
}


/* ---------------------------------------------------------------------------
 * T6 Nav "Get In Touch" sub-line: 14px minimum (QA 29 Oct)
 * ------------------------------------------------------------------------ */

.main-menu #mega-menu-wrap-primary #mega-menu-primary > li.get-touch-btn > a.mega-menu-link small,
.contact-btn a.btn-default small {
    font-size: var(--cx-small);
    line-height: 1.3;
}

/* At 14px the button no longer fits beside the menu on small laptops and
   wrapped to a second row; narrower side padding there keeps one row. */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .main-menu #mega-menu-wrap-primary #mega-menu-primary > li.get-touch-btn > a.mega-menu-link {
        padding-left: 20px;
        padding-right: 20px;
    }
}

/* The line would widen the mobile header button over the logo, so on
   mobile it is removed (the audit allows "remove, or the minimum size"). */
@media (max-width: 767.98px) {
    .contact-btn a.btn-default small {
        display: none;
    }
}


/* ---------------------------------------------------------------------------
 * B2 / M5 Buttons: 52px tall (48 mobile), 16/600, padding 0 28, radius 10
 * ------------------------------------------------------------------------ */

/* The two-line nav "Get In Touch" button (.contact-btn on mobile) keeps its own layout. */
.btn-default:not(.contact-btn *),
.btn-secondary,
.loadMoreBtn,
.wpcf7 .wpcf7-submit,
.contact-form input[type="submit"],
.blog-newsletter .tnp-widget-minimal input.tnp-submit,
input.tnp-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--cx-button-height);
    height: auto;
    padding: 0 28px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
    border-radius: var(--cx-radius-control);
}

/* Two 16px buttons don't fit side by side on a phone: stack them full width. */
@media (max-width: 767.98px) {
    .banner-btns {
        flex-direction: column;
        align-items: stretch;
    }

    .banner-btns .btn-default,
    .banner-btns .btn-secondary {
        width: 100%;
        white-space: nowrap;
    }
}

/* <input> buttons don't centre text with flex; give them a fixed height. */
.wpcf7 .wpcf7-submit,
.contact-form input[type="submit"],
input.tnp-submit {
    display: inline-block;
    height: var(--cx-button-height);
}


/* ---------------------------------------------------------------------------
 * B6 Form fields: 48px, 16px, radius 10, one surface colour
 * ------------------------------------------------------------------------ */

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="url"],
.wpcf7 input[type="number"],
.wpcf7 select,
.contact-form .form-control,
.contact-form .form-select {
    height: var(--cx-field-height);
    font-size: 16px;
    color: var(--cx-text);
    background-color: var(--cx-surface-alt);
}

.wpcf7 textarea,
.contact-form textarea.form-control {
    height: auto;
    font-size: 16px;
    color: var(--cx-text);
}

.wpcf7 select,
.wpcf7 textarea,
.wpcf7 input[type="text"]:not(.wpcf7-countrytext),
.wpcf7 input[type="email"] {
    border-radius: var(--cx-radius-control);
}

/* Phone field: country picker and number read as one 48px box. */
.wpcf7 .wpcf7-countrytext {
    border-radius: var(--cx-radius-control) 0 0 var(--cx-radius-control);
}

.wpcf7 .wpcf7-tel {
    border-radius: 0 var(--cx-radius-control) var(--cx-radius-control) 0;
}

/* On desktop the picker and the number sit in two Bootstrap columns; close
   the gutter between them so they join into one box. (The theme's mobile
   layout already overlaps them into one box.) */
@media (min-width: 768px) {
    .row:has(.wpcf7-countrytext) > [class*="col-"]:has(.wpcf7-countrytext) {
        padding-right: 0;
    }

    .row:has(.wpcf7-countrytext) > [class*="col-"]:has(.wpcf7-tel) {
        padding-left: 0;
    }
}


/* ---------------------------------------------------------------------------
 * B5 Text links: brand blue, 600, underline on hover
 * ------------------------------------------------------------------------ */

/* Bootstrap 5.2 colours every unstyled link #0d6efd through this variable. */
:root {
    --bs-link-color: var(--cx-primary);
    --bs-link-hover-color: var(--cx-primary);
}

.show-more-link,
.service-tab-box .default-tab a,
p a:not(.btn) {
    color: var(--cx-primary);
    font-weight: 600;
}

.show-more-link:hover,
.service-tab-box .default-tab a:hover,
p a:not(.btn):hover {
    text-decoration: underline;
}


/* ---------------------------------------------------------------------------
 * B4 Slider arrows: 44px solid primary circle
 * ------------------------------------------------------------------------ */

.portfolio-slider .slick-prev,
.portfolio-slider .slick-next,
.testimonials-area .slick-prev,
.testimonials-area .slick-next,
.testimonial-carousel .slick-arrow {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: var(--cx-primary) !important; /* theme uses !important */
    opacity: 1;
}

.portfolio-slider .slick-prev:hover,
.portfolio-slider .slick-next:hover,
.portfolio-slider .slick-prev:focus,
.portfolio-slider .slick-next:focus,
.testimonials-area .slick-arrow:hover,
.testimonials-area .slick-arrow:focus,
.testimonial-carousel .slick-arrow:hover,
.testimonial-carousel .slick-arrow:focus {
    background-color: var(--cx-primary) !important;
}


/* ---------------------------------------------------------------------------
 * B7 Portfolio filter chips (QA round 2, A4): 48px, 16/600, button side
 * padding, #f6f6f6 idle, primary active
 * ------------------------------------------------------------------------ */

.content-area .responsive-tabs .responsive-tabs__list__item,
.content-area .responsive-tabs .responsive-tabs__list__item--active,
.content-area .responsive-tabs .responsive-tabs__list__item--active:hover {
    height: var(--cx-chip-height);
    padding: 0 24px;
    font-size: var(--cx-body);
    font-weight: 600;
    line-height: var(--cx-chip-height);
    border-radius: var(--cx-radius-control);
}

.content-area .responsive-tabs .responsive-tabs__list__item {
    background: var(--cx-surface-alt);
    color: var(--cx-text);
}

.content-area .responsive-tabs .responsive-tabs__list__item:hover,
.content-area .responsive-tabs .responsive-tabs__list__item:focus,
.content-area .responsive-tabs .responsive-tabs__list__item--active,
.content-area .responsive-tabs .responsive-tabs__list__item--active:hover {
    background: var(--cx-primary);
    color: var(--cx-on-primary);
}


/* ---------------------------------------------------------------------------
 * C9 / A1 Client logos: back to the live display size (QA round 2): each logo
 * fits a 234 x 80 box in its own ratio, never stretched. !important: the
 * theme forces height 80px and width:fill.
 * ------------------------------------------------------------------------ */

.clients-item img {
    height: auto !important;
    width: auto !important;
    max-height: 80px;
    max-width: min(234px, 100%) !important; /* never wider than its slide (4 Nov) */
    object-fit: contain;
}

/* Each logo centred in its slide, so the gaps between logos are even. */
.clients-item .thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 80px;
}

@media (max-width: 767.98px) {
    .clients-item img {
        max-height: 56px;
    }

    .clients-item .thumb {
        height: 56px;
    }
}


/* ---------------------------------------------------------------------------
 * C5 Service icons: one 48x48 box
 * ------------------------------------------------------------------------ */

.services-area .services-items .default-tab .icon img {
    width: 48px;
    height: 48px;
    object-fit: contain;
}


/* ---------------------------------------------------------------------------
 * C10 Portfolio service and tech icons: live sizes kept (from style.css);
 * only the mobile labels are raised from 13px to the 14px minimum.
 * ------------------------------------------------------------------------ */

@media (max-width: 767.98px) {
    .portfolio-info,
    .platform {
        font-size: var(--cx-small);
    }
}


/* ---------------------------------------------------------------------------
 * C12 / N8 Stat counter: number and "+" in one style, Raleway 800
 * ------------------------------------------------------------------------ */

.counter-row {
    font-size: 60px;
    color: var(--cx-primary);
    line-height: 1.2;
}

.counter-row,
.counter-row .count-title,
.counter-row span {
    font-family: 'Raleway', sans-serif;
    font-weight: 800;
}

.counter-row .count-title,
.counter-row span {
    font-size: 1em;
}

@media (max-width: 767.98px) {
    .counter-row {
        font-size: 30px;
    }

    .counter .count-text {
        font-size: var(--cx-small);
    }
}


/* ---------------------------------------------------------------------------
 * L1 Section spacing (QA round 2): 40px top and bottom on desktop, 24px on
 * mobile, so two neighbouring sections sit about 80 / 48px apart. Sections
 * with their own background band use 64 / 40px inside the band.
 * Applies to page-level sections (direct children of <body>); the hero
 * banners keep their own spacing.
 * ------------------------------------------------------------------------ */

body > .services-area,
body > .specialities-area,
body > .message-area,
body > .portfolio-area,
body > .work-tab-area,
body > .testimonials-area,
body > .contact-area,
body > .content-area.content-area, /* class repeated to outrank .content-area.inner etc. */
body > .process-tab-area {
    padding-top: var(--cx-section-space);
    padding-bottom: var(--cx-section-space);
}

body > .clients-area {
    padding-top: var(--cx-band-space);
    padding-bottom: var(--cx-band-space);
}

/* Bootstrap pt-0 / pt-5 on these sections are !important utilities. */
body > .content-area.pt-0,
body > .process-tab-area.pt-5 {
    padding-top: var(--cx-section-space) !important;
}

/* No stray margin under a section's last element, so the padding alone sets
   the gap. */
body > [class*="-area"] > .container > :last-child {
    margin-bottom: 0;
}

/* ---------------------------------------------------------------------------
 * N2 CEO video: 16:9, at most 960px wide, wrapper sized by the video (it had
 * a fixed 700 / 480px height that the full-width iframe overflowed)
 * ------------------------------------------------------------------------ */

.message-area .message-video {
    max-width: 864px; /* S4: 864 x 486 */
    height: auto;
    margin-left: auto;
    margin-right: auto;
}

.message-area .message-video iframe {
    display: block;
    width: 100%;
    min-width: 0;
    height: auto;
    min-height: 0;
    aspect-ratio: 16 / 9;
}

.message-area .message-video p {
    margin-bottom: 0;
}

/* 40px between a section title block and its content */
.site-heading,
.portfolio-had,
.services-had,
.process-tab-area > .container > h2 {
    margin-bottom: var(--cx-heading-gap);
}


/* ---------------------------------------------------------------------------
 * L3 Long paragraphs: 760px reading width
 * ------------------------------------------------------------------------ */

.specialities-area p,
.our-about-text p,
.our-aim-text p,
.our-vision-text p {
    max-width: var(--cx-text-measure);
    margin-left: auto;
    margin-right: auto;
}


/* ---------------------------------------------------------------------------
 * L4 Alignment: card text left aligned (section titles stay centred)
 * ------------------------------------------------------------------------ */

.services-area .services-items .default-tab,
.services-area .services-items .default-tab .info {
    text-align: left;
}

.services-area .services-items .default-tab .icon {
    margin-left: 0;
    margin-right: 0;
}


/* ---------------------------------------------------------------------------
 * M1 Screen-reader-only text (the blog search label was 375px wide and
 * pushed the mobile Blog page to 537px)
 * ------------------------------------------------------------------------ */

.screen-reader-text {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.wp-block-search__inside-wrapper {
    max-width: 100%;
}

.wp-block-search__input {
    min-width: 0;
}


/* ---------------------------------------------------------------------------
 * M2 "What happens next" / process steps on mobile: stacked white cards,
 * titles visible, 14px minimum
 * ------------------------------------------------------------------------ */

@media (max-width: 767.98px) {
    /* On Get in touch the row is not inside a .container: add the gutter. */
    .process-tab-area > .process-tab-row {
        padding-left: 16px;
        padding-right: 16px;
    }

    .process-tab-row {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
        overflow: visible;
        white-space: normal;
    }

    .process-tab,
    .process-tab.expand,
    .intelligence .process-tab.expand {
        display: block;
        width: 100%;
        max-width: none;
        padding: 20px;
        text-align: left;
        background: var(--cx-surface);
        border-radius: 20px;
        box-shadow: 0 0 10px rgba(0, 0, 0, .09);
    }

    .process-tab .info,
    .process-tab.expand:hover .info {
        position: static;
        top: auto;
        margin-bottom: 8px;
    }

    .process-tab .info h4,
    .process-tab h4 {
        display: block;
        color: var(--cx-text);
    }

    .process-tab-row .process-tab .icon,
    .process-tab-row .process-tab.expand .icon,
    .process-tab-row .process-tab.expand:hover .icon {
        position: static;
        width: auto !important; /* theme forces 200px with !important */
        height: auto;
        margin: 0;
        padding: 0;
        background: transparent;
        box-shadow: none;
    }

    .process-tab.expand .expand-text {
        min-height: 0;
        padding: 0;
        font-size: var(--cx-small);
        line-height: 1.5;
        color: var(--cx-text);
        background: transparent;
    }

    .process-tab.expand .expand-text p {
        font-size: var(--cx-small);
        line-height: 1.5;
        color: var(--cx-text);
        margin-bottom: 0;
    }
}


/* ---------------------------------------------------------------------------
 * Small text raised to the 14px minimum (desktop and mobile)
 * ------------------------------------------------------------------------ */

.process-tab.expand .expand-text,
.process-tab h4 span,
.pricing-duration,
.popular-badge,
.map-area .location .map-tooltip a,
.map-area .location .map-tooltip,
.blog-page .category-title,
.blog-page .category-title a {
    font-size: var(--cx-small);
}

@media (max-width: 767.98px) {
    .content-area .responsive-tabs .responsive-tabs__list__item,
    .content-area .responsive-tabs .responsive-tabs__list__item--active,
    .content-area .responsive-tabs .responsive-tabs__list__item--active:hover {
        font-size: var(--cx-body); /* the theme sets 11px on mobile */
        /* 16px sides (the mobile gutter) so the three chips fit one row */
        padding: 0 16px;
        margin: 0 4px 16px;
    }
}


/* ---------------------------------------------------------------------------
 * K1 Contact map links: muted text colour (were #687188)
 * ------------------------------------------------------------------------ */

.map-area .location .map-tooltip a {
    color: var(--cx-text-muted);
}


/* ---------------------------------------------------------------------------
 * T5 Testimonial cards on mobile: 14px minimum and no inner scroll box
 * (the theme set 11px text inside a fixed 230px box that scrolled)
 * ------------------------------------------------------------------------ */

@media (max-width: 767.98px) {
    .testimonials-area .info {
        height: auto;
        min-height: 0;
        overflow: visible;
        font-size: var(--cx-small);
    }

}

/* The arrows and dots sit below the testimonial slider (arrows at -90px);
   reserve that space so they stay inside the section instead of overlapping
   the next one. */
.testimonials-area > .container > .testimonials-slider.slick-slider {
    margin-bottom: 68px;
}

/* Testimonials page: the review list is a .testimonials-area nested in the
   content area (which already has the bottom padding), with 80/80 padding of
   its own and a 30px margin under the last review. */
.content-area > .testimonials-area {
    padding-top: var(--cx-section-space);
    padding-bottom: var(--cx-section-space);
}

.testimonials-area > .container > .testimonials-item:last-child {
    margin-bottom: 0;
}

/* Home "What we build": cancel the 30px bottom margin of the last row of
   cards, so the gap below the cards is the section padding alone. */
.services-area .services-items > .row {
    margin-bottom: -30px;
}

/* "What happens next" had a fixed 520px minimum height, leaving empty space
   under the steps. */
body > .process-tab-area {
    min-height: 0;
}


/* ---------------------------------------------------------------------------
 * N9 Footer copyright in the site font
 * ------------------------------------------------------------------------ */

.footer-bottom,
.footer-bottom .widget,
.footer-bottom span {
    font-family: 'Raleway', sans-serif;
    text-transform: none;
}


/* ---------------------------------------------------------------------------
 * N10 "How we work" icons: one 48px height
 * ------------------------------------------------------------------------ */

.work-tab .icon img {
    width: auto;
    height: 48px;
    object-fit: contain;
}


/* ---------------------------------------------------------------------------
 * N11 Blog sidebar "Categories": a widget title (20/700), not a section
 * title. Plain text, not a heading (QA 2 Nov, 2.7)
 * ------------------------------------------------------------------------ */

.blog-top-area .title .blog-categories-title {
    margin-bottom: 0;
    line-height: 24px;
    font-size: 20px;
    font-weight: 700;
    color: var(--cx-text);
}


/* ---------------------------------------------------------------------------
 * T7 Services mega menu column titles: now <p> (see functions.php), styled as
 * the <h4> they replace
 * ------------------------------------------------------------------------ */

#mega-menu-wrap-primary #mega-menu-primary p.mega-block-title {
    display: block;
    margin: 0 0 10px;
    padding: 0 0 15px;
    border-bottom: 1px solid #e1e1e1;
    font-family: 'Raleway', sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
    text-align: left;
    color: var(--cx-primary);
}


/* ---------------------------------------------------------------------------
 * M7 Mobile side gutter: 16px (Bootstrap's default is 12px)
 * ------------------------------------------------------------------------ */

@media (max-width: 767.98px) {
    .container,
    .container-fluid {
        --bs-gutter-x: 2rem;
    }
}


/* ===========================================================================
 * CARDS (Design fixes round 2, file 01: T4, C1, C2, C3, C4, C6, C8)
 *
 * Three card types only:
 *   A. Feature card - white, radius 20, the one shadow, padding 30 (20 mobile),
 *      48x48 icon, H3 card title, 16/500 body, left aligned, equal height.
 *      Service cards, contact steps, office cards, stats.
 *   B. Media card - image on top (radius 20, 4:3; team 1:1), title max 2
 *      lines, body max 3 lines, 14px meta, equal height. No outer box.
 *      Project slides, portfolio rows, blog cards, team cards.
 *   C. Tint card - #f1f6ff, no shadow, radius and padding as A.
 *      Testimonial quotes and reviews.
 * ======================================================================== */

/* --- T4 One card title style: 22/700, 18 mobile, line height 1.3 -------- */

.card-title,
.services-items .default-tab h3,
.portfolio-slider .info h4,         /* service-page templates still use h4 */
.testimonials-area .info h4,
.process-tab .info h4,
.map-area .location .map-tooltip h5 {
    margin: 0 0 8px;
    font-size: var(--cx-h3);
    font-weight: 700;
    line-height: 1.3;
    color: var(--cx-text);
}

.card-title a {
    color: inherit;
}

/* Media-card text limits (C3): title 2 lines, body 3 lines. */
.portfolio-slider .card-title,
.portfolio-slider .info h4,
.portfolio-tab .card-title,
.blog-tab .card-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.card-excerpt,
.portfolio-tab .portfolio-text p {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 16px;
}

.card-meta,
.team-tab .card-title span {
    display: block;
    margin: 0 0 8px;
    font-size: var(--cx-small);
    font-weight: 500;
    line-height: 1.5;
    color: var(--cx-primary);
}

.team-tab .card-title span {
    margin: 4px 0 0;
}


/* --- C4 Card images: 4:3 (team 1:1), cover, radius 20, never stretched --- */

.portfolio-slider .img-holder img,
.blog-tab .thumb img,
.portfolio-page .thumb img,
.team-tab .thumb img {
    display: block;
    width: 100%;
    height: auto !important; /* the theme fixes some heights */
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--cx-radius-card);
}

.team-tab .thumb img {
    aspect-ratio: 1 / 1;
}

.team-tab .thumb .social-div {
    border-radius: var(--cx-radius-card);
}


/* --- A. Feature cards ----------------------------------------------------- */

.services-items .default-tab,
.counter,
.map-area .location .map-tooltip,
.page-template-templatecontact-php .process-tab {
    background: var(--cx-surface);
    border-radius: var(--cx-radius-card);
    box-shadow: var(--cx-shadow);
    padding: var(--cx-card-padding);
    text-align: left;
}

/* C6 Service cards (Home): equal height in the row, body 16/500. */
.services-items > .row > [class*="col-"] {
    display: flex;
}

.services-items .default-tab {
    width: 100%;
}

.services-items .default-tab > a {
    display: block;
    height: 100%;
}

.services-items .default-tab .info p {
    font-size: var(--cx-body);
    font-weight: 500;
}

/* Stats and review badges (Home, About, service pages): one feature card
   each, equal height, centred (6 Nov 2026; were left aligned); one per row
   on mobile. */
.row > [class*="col-"]:has(> .counter) {
    display: flex;
}

.counter {
    width: 100%;
    text-align: center;
}

.counter .counter-row {
    justify-content: center;
}

.counter .count-text {
    text-align: center;
}

.counter img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* Stat cards are as tall as the badge cards (6 Nov 2026): every card is at
   least badge + padding high (80 + 2 x 30 = 140, phones 50 + 2 x 20 = 90),
   content centred. The number line is set solid and the label sits 4px
   under it (60 + 4 + 28 = 92 on desktop); stat cards keep less padding so
   that fits, and the min-height centres it. */
.counter {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: calc(80px + 2 * var(--cx-card-padding));
}

.counter:has(> .counter-row) {
    padding-top: calc(var(--cx-card-padding) - 10px);
    padding-bottom: calc(var(--cx-card-padding) - 10px);
}

.counter .counter-row,
.counter .counter-row .count-title,
.counter .counter-row span {
    line-height: 1;
}

.counter .count-text {
    margin: 4px 0 0;
    line-height: 1.4;
}

/* 992-1199px: four narrow cards (176px inside); at 20px "Years of
   excellence" wraps and that row grows taller than the badges. 16px, one
   line. */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .counter .count-text {
        font-size: var(--cx-body);
        white-space: nowrap;
    }
}

@media (max-width: 767.98px) {
    .counter {
        min-height: calc(50px + 2 * var(--cx-card-padding));
    }
}

/* A badge that links to its review profile (Clutch). */
.counter .cx-rating-link {
    display: block;
    border-radius: var(--cx-radius-control);
}

.counter .cx-rating-link:focus-visible {
    outline: 2px solid var(--cx-primary);
    outline-offset: 4px;
}

.counter:has(.cx-rating-link) {
    transition: box-shadow .2s ease;
}

.counter:has(.cx-rating-link:hover) {
    box-shadow: 0 4px 18px rgba(0, 0, 0, .14);
}

/* Stats and review badges wrap onto two rows: 24px between rows at every
   width (none under the last row). */
.row:has(> [class*="col-"] > .counter) {
    row-gap: var(--cx-grid-gap);
}

@media (max-width: 767.98px) {
    .row > [class*="col-"]:has(> .counter) {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* Office cards (Get in touch map): the flag sits in a 48x48 icon box. */
.map-area .location .map-tooltip > img {
    display: block;
    width: 48px;
    max-width: none;
    height: 48px;
    margin-bottom: 16px;
    object-fit: contain;
    box-shadow: none;
}

/* The widget markup has a <br> straight after the flag; the icon box already
   ends the line. */
.map-area .location .map-tooltip > img + br {
    display: none;
}

.map-area .location .map-tooltip,
.map-area .location .map-tooltip a {
    font-size: var(--cx-body);
    font-weight: 500;
}

/* C8 "What happens next" (Get in touch): three feature cards in a row on
   desktop, title inside the card; stacked on mobile (see M2). Order inside
   the card: icon, number + title, text. */
@media (min-width: 768px) {
    .page-template-templatecontact-php .process-tab-row {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: var(--cx-grid-gap);
        max-width: 1320px;
        margin: 0 auto;
        padding: 0 12px;
    }
}

.page-template-templatecontact-php .process-tab,
.page-template-templatecontact-php .process-tab.expand {
    display: flex;
    flex-direction: column;
    width: auto;
    max-width: none;
}

.page-template-templatecontact-php .process-tab:after {
    display: none !important; /* connector lines between steps */
}

.page-template-templatecontact-php .process-tab .icon {
    display: contents;
}

.page-template-templatecontact-php .process-tab .icon img {
    order: 1;
    display: block;
    width: 48px;
    height: 48px;
    max-width: none;
    margin: 0 0 16px;
    object-fit: contain;
}

.page-template-templatecontact-php .process-tab .info {
    order: 2;
    position: static;
    top: auto;
    margin: 0;
}

.page-template-templatecontact-php .process-tab .number {
    font-size: var(--cx-small);
    font-weight: 700;
    color: var(--cx-primary);
}

.page-template-templatecontact-php .process-tab .expand-text {
    order: 3;
    display: block;
    position: static;
    min-height: 0;
    padding: 0;
    background: transparent;
}

.page-template-templatecontact-php .process-tab .expand-text,
.page-template-templatecontact-php .process-tab .expand-text p {
    font-size: var(--cx-body);
    font-weight: 500;
    line-height: var(--cx-line-body);
    color: var(--cx-text);
    margin-bottom: 0;
}


/* --- B. Media cards: equal heights (C3) ------------------------------------ */

/* Project slider (Home and service pages) */
.portfolio-slider .slick-track {
    display: flex;
}

.portfolio-slider .slick-slide {
    height: auto;
}

.portfolio-slider .slick-slide > div,
.portfolio-slider .item,
.portfolio-slider .item > a {
    height: 100%;
}

.portfolio-slider .item .info {
    padding-top: 16px;
}

/* Blog post: no extra space before the footer. The theme pads the post by
   200px and the comments box adds 50px under it; the page keeps only the
   standard section spacing (.content-area, 40/24). */
.blog-detail-area {
    padding-bottom: 0;
}

.blog-detail #comments.comments-area { /* the comments plugin sets #comments { margin: 50px auto } */
    margin-bottom: 0;
}

.blog-detail #comments #wpdcom { /* its 15px bottom margin shows below the box */
    margin-bottom: 0;
}

/* Without comments (6 Nov 2026) the article's last paragraph ends the
   column: no margin under it, so the gap to the footer is the 40 / 24px
   section space. */
.blog-detail > :last-child {
    margin-bottom: 0;
}

.blog-sidebar > .blog-tab:last-child { /* stacked under the post on phones */
    margin-bottom: 0;
}

/* Blog grid: cards fill the row height, "Continue reading" at the bottom. */
.blog-page .row:has(> [class*="col-"] > .blog-tab) {
    row-gap: var(--cx-grid-gap); /* gap between rows, none under the last */
}

.blog-page .row > [class*="col-"]:has(> .blog-tab) {
    display: flex;
    margin-bottom: 0;
}

.blog-page .blog-tab {
    margin-bottom: 0; /* theme adds 40px */
}

.blog-tab,
.blog-tab .blog-content {
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* Full height only in the grids (blog, category, search). In a post's sidebar
   the column is as tall as the article, so 100% made each card that tall. */
.blog-page .blog-tab,
.blog-page .blog-tab .blog-content {
    height: 100%;
}

.blog-tab .info {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding-top: 16px;
}

.blog-tab .info .more-link {
    margin-top: auto;
    font-weight: 600;
}


/* --- C. Tint cards: testimonial quotes and reviews ------------------------ */

.testimonials-area .info,
.testimonials-area .testimonials-item.inner .info, /* theme zeroes this on mobile */
.testimonial-carousel .testimonials-item .info {
    background: var(--cx-tint);
    border-radius: var(--cx-radius-card);
    box-shadow: none;
    padding: var(--cx-card-padding);
}

/* The video beside a testimonial quote gets the card radius too (an embed on
   Home and Get in touch, a thumbnail that opens a popup on Testimonials). */
.testimonials-area .testimonials-item iframe,
.testimonials-area .testimonials-item.inner .col-md-6 > p img {
    border-radius: var(--cx-radius-card);
}

/* Reviews slider (Testimonials page): equal heights. */
.testimonial-carousel .slick-track {
    display: flex;
}

.testimonial-carousel .slick-slide {
    height: auto;
}

.testimonial-carousel .slick-slide > div,
.testimonial-carousel .testimonials-item,
.testimonial-carousel .testimonials-item .info {
    height: 100%;
}


/* --- C1 Other boxes: one card radius -------------------------------------- */

.our-vision-text {
    border-radius: var(--cx-radius-card);
}


/* ===========================================================================
 * BUTTONS (Design fixes round 2, file 02: B3)
 *
 * Secondary button: the second choice next to a primary button (one primary
 * per block). Same size and radius as the primary (B2 rule above): 52px
 * (48 mobile), padding 0 28, 16/600, radius 10. Outline instead of fill.
 * Used for "See our work" (Home, App development cost).
 * ======================================================================== */

.btn-secondary {
    background: transparent;
    border: 2px solid var(--cx-primary);
    color: var(--cx-primary);
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active {
    background: var(--cx-primary);
    border-color: var(--cx-primary);
    color: var(--cx-on-primary);
}


/* ===========================================================================
 * SLIDERS (Design fixes round 2, file 03: S2, S3)
 *
 * Every slider with controls gets one nav row BELOW it, right aligned:
 * 8px dots, then the two 44px arrows (prev, next). Nothing sits over the
 * slides. The row is 44px tall with 24px above it, so each slider reserves
 * 68px under itself.
 *   - Project slider (Home, service pages): .portfolio-slider. Only its
 *     controls change here; its size and layout are S1 (design later).
 *   - Testimonial slider (Home, Get in touch, service pages).
 *   - Review slider (Testimonials page): .clients-area .testimonial-carousel,
 *     now inside the container, 3 / 2 / 1 per view (see footer.php).
 * ======================================================================== */

.portfolio-slider.slick-slider,
.testimonials-area > .container > .testimonials-slider.slick-slider,
.clients-area .testimonial-carousel.slick-slider {
    margin-bottom: 68px;
}

/* Arrows: bottom right, next at the edge, prev 8px to its left. */
.portfolio-slider .slick-prev,
.portfolio-slider .slick-next,
.testimonials-area .slick-prev,
.testimonials-area .slick-next,
.clients-area .testimonial-carousel .slick-arrow {
    top: auto !important; /* the theme pins the testimonial arrows with !important */
    bottom: -68px;
    left: auto;
    right: 0;
    margin: 0;
    transform: none;
}

.portfolio-slider .slick-prev,
.testimonials-area .slick-prev,
.clients-area .testimonial-carousel .slick-arrow.slick-prev {
    right: 52px;
}

/* Dots: 8px, in the same row, to the left of the arrows. */
.portfolio-slider .slick-dots,
.testimonials-area .slick-dots,
.clients-area .testimonial-carousel .slick-dots {
    position: absolute;
    bottom: -50px; /* centred on the 44px arrows */
    left: auto;
    right: 112px;  /* two arrows + gaps */
    display: flex !important;
    gap: 8px;
    width: auto;
    margin: 0;
    padding: 0;
}

.portfolio-slider .slick-dots li,
.testimonials-area .slick-dots li,
.clients-area .testimonial-carousel .slick-dots li {
    width: 8px;
    height: 8px;
    margin: 0 !important; /* theme forces margins on mobile */
}

.portfolio-slider .slick-dots li button,
.testimonials-area .slick-dots li button,
.clients-area .testimonial-carousel .slick-dots li button {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    font-size: 0;
    background-color: rgba(40, 77, 145, .25) !important; /* light tint of primary */
}

.portfolio-slider .slick-dots li button:before,
.testimonials-area .slick-dots li button:before,
.clients-area .testimonial-carousel .slick-dots li button:before {
    display: none;
}

.portfolio-slider .slick-dots li.slick-active button,
.testimonials-area .slick-dots li.slick-active button,
.clients-area .testimonial-carousel .slick-dots li.slick-active button {
    background-color: var(--cx-primary) !important;
}

/* S3 Review slider: inside the container (the theme let it overflow to the
   screen edges), 24px between cards. */
.clients-area .testimonial-carousel .slick-list {
    overflow: hidden;
    margin: 0 -12px;
}

.clients-area .testimonial-carousel .slick-slide {
    margin: 0 12px;
}

/* Business website page: the theme moves this page's review arrows to the
   sides on mobile with page-specific rules; keep them in the nav row. */
@media (max-width: 575.98px) {
    body.page-template-business-web-development .testimonial-carousel .slick-arrow {
        transform: none;
    }

    body.page-template-business-web-development .testimonial-carousel .slick-arrow.slick-next {
        left: auto;
        right: 0;
    }

    body.page-template-business-web-development .testimonial-carousel .slick-arrow.slick-prev {
        left: auto;
        right: 52px;
    }
}


/* ===========================================================================
 * VIDEO AND TESTIMONIALS (Design fixes round 2, file 04: S4, C7)
 * ======================================================================== */

/* S4 CEO video (Home): 864 x 486 max, radius 20. With supporting text: text
   on the left (about 400px), video on the right, 40px gap; stacked below
   992px with the text first. Without text the video stays centred. */
.message-area .message-video iframe {
    border-radius: var(--cx-radius-card);
}

.message-layout:has(.message-text) {
    display: grid;
    grid-template-columns: minmax(300px, 1fr) minmax(0, 864px);
    gap: 40px;
    align-items: center;
}

.message-layout:has(.message-text) .message-video {
    width: 100%;
    max-width: none;
    margin: 0;
}

.message-text {
    text-align: left;
}

.message-text .message-name {
    margin-bottom: 8px;
    font-size: var(--cx-h4);
    font-weight: 700;
    line-height: 1.35;
    color: var(--cx-text);
}

.message-text p {
    margin-bottom: 24px;
}

@media (max-width: 991.98px) {
    .message-layout:has(.message-text) {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}

/* C7 One testimonial card family. Reference: the testimonial slider (tint
   #f1f6ff, radius 20, padding 30 / 20, no shadow). Name 18/700, quote 16/500,
   company or country 14/500. Applies to the slider (Home, Get in touch,
   service pages) and both card styles on the Testimonials page. */
.testimonials-area .info .card-title,
.testimonials-area .info h4,
.testimonial-carousel .testimonials-item .card-title {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.35;
}

.testimonials-area .info p,
.testimonials-area .info .full-content,
.testimonial-carousel .testimonials-item .info p {
    font-size: var(--cx-body);
    font-weight: 500;
}

.testimonials-area .info > span,
.testimonial-carousel .testimonials-item .country-info,
.testimonial-carousel .testimonials-item .country-info span {
    font-size: var(--cx-small);
    font-weight: 500;
}


/* ===========================================================================
 * QA ROUND 2, FILE 1 (priority changes from Ali)
 * A1 logos and A4 chips are in their sections above; A3 spacing is below.
 * ======================================================================== */

/* A2 Hero intro line under the H1 (About, Portfolio, Testimonials, Blog,
   Get in touch). Text comes from the "Hero intro line" field in wp-admin. */
.banner-content .hero-lead {
    max-width: var(--cx-text-measure);
    margin-top: 8px; /* 16px under the H1 with its own margin */
    margin-bottom: 16px;
    font-size: var(--cx-lead);
    font-weight: 700; /* bold (6 Nov 2026; was 500) */
    line-height: 1.5;
    color: var(--cx-text);
}

/* A3 Even gaps between sections: about 80px desktop / 48px mobile from the
   last content of one section to the heading of the next. Removes the extra
   space that stacked on top of the 40 / 24px section padding. */

/* Inner-page hero: the theme fixed it at 400px tall, so pages with a shorter
   hero (Get in touch) had a large empty gap under it. */
body > .inner-banner {
    height: auto;
    min-height: 0;
    padding-top: var(--cx-section-space);
    padding-bottom: var(--cx-section-space);
}

/* About: each sub-section (who we are, aim and vision, team) is a section
   with the standard 40/40 (24/24) padding; its wrapper adds none. */
body > .content-area.inner:has(> .our-about) {
    padding-top: 0;
    padding-bottom: 0;
}

.content-area > .our-about,
.content-area > .our-aim,
.content-area > .team-area {
    padding-top: var(--cx-section-space);
    padding-bottom: var(--cx-section-space);
}

/* Aim and team are both white, so the two paddings read as one wide gap:
   half the section space above the team (60 / 36 between them, 4 Nov). */
.content-area > .our-aim + .team-area {
    padding-top: calc(var(--cx-section-space) / 2);
}

/* Testimonials page: the wrapper adds no padding; the reviews band follows
   the band rule (64 / 40 inside) with the section space above it, and the
   review list below is a standard 40/40 (24/24) section. */
body > .content-area.pt-0:has(> .clients-area) {
    padding-top: 0 !important; /* beats the pt-0 / pt-5 rule above */
    padding-bottom: 0;
}

.content-area > .clients-area {
    margin-top: var(--cx-section-space);
    padding-top: var(--cx-band-space);
    padding-bottom: var(--cx-band-space);
}

/* Home: margins under the last text of a section. */
.specialities-area .specialities-content > :last-child,
.work-tab > :last-child {
    margin-bottom: 0;
}

/* Home hero: the theme fixed it at 400px while its content needs more, so
   the content overflowed the box (under the header at the top, into the
   next section at the bottom). Size it to its content with the section
   spacing above and below. */
body > .banner-area {
    height: auto;
    min-height: 0;
    padding-top: var(--cx-section-space); /* on the hero, so both columns start on one line */
}

body > .banner-area .banner-caption {
    padding-top: 0;
    padding-bottom: var(--cx-section-space);
}

/* "What makes us different" card: no space under the list when the card has
   no button (the theme reserves 16px plus item padding for it). */
.banner-text:not(:has(.banner-btn a)) ul {
    margin-bottom: 0;
}

.banner-text:not(:has(.banner-btn a)) ul li:last-child {
    padding-bottom: 0;
}

/* On mobile the Home hero columns stack and the card ends the hero: give it
   the section spacing below. */
@media (max-width: 767.98px) {
    body > .banner-area {
        padding-bottom: var(--cx-section-space);
    }
}


/* ===========================================================================
 * QA ROUND 2, FILE 2 (partial fixes). L1 spacing is in the A3 rules above;
 * M3 and K2 were already in place (card titles, slider dots).
 * ======================================================================== */

/* T5 Body and list text: 16/500. Service card text sits straight in .info;
   the "What makes us different" list was 19/600 (15/600 mobile). */
.services-items .default-tab .info,
.specialities-area .specialities-content p {
    font-weight: 500;
}

.banner-text ul li {
    font-size: var(--cx-body);
    font-weight: 500;
}

/* T5 Blog author and date line: the meta style, 14/500 (the body-text rule
   for blog paragraphs was overriding it). */
.blog-tab .info .card-meta {
    font-size: var(--cx-small);
    font-weight: 500;
}

/* Portfolio list: the small service icon after each project title. The theme
   capped it at 20px for the old <h4> title; same for the H3 card title. */
.portfolio-content .card-title img {
    max-width: 20px;
    height: auto;
    vertical-align: middle;
}

/* ===========================================================================
 * QA ROUND 2, FILE 3 (hero copy and fixes)
 * ======================================================================== */

/* Hero columns start at the top: the heading and paragraph line up with the
   top of the card beside them instead of centring against it. */
body > .banner-area > .container > .row,
body > .inner-banner > .container > .row {
    align-items: flex-start !important; /* beats Bootstrap's align-items-center */
}

/* Hero paragraph under the intro line: 16/500, 1.65, muted, 760 max. */
.inner-banner .banner-content p:not(.hero-lead) {
    max-width: var(--cx-text-measure);
    font-size: var(--cx-body);
    font-weight: 500;
    line-height: var(--cx-line-body);
    color: var(--cx-text-muted);
}

/* Project images (Portfolio page, Home project slider): show the whole
   image at its own ratio. The 4:3 crop cut the top and bottom off the app
   screenshots. */
.portfolio-page .thumb img,
.portfolio-slider .img-holder img {
    aspect-ratio: auto;
    object-fit: contain;
}

/* Testimonial video thumbnails (Home, Get in touch, service pages): the
   whole image at its own ratio, never cropped, with the card radius. The
   slider takes the active slide's height (adaptiveHeight in footer.php). */
.testimonials-area #testi-video img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--cx-radius-card);
}

/* Until the lazy-loaded image arrives its placeholder is a 1x1 image, which
   would show square: hold the thumbnails' own shape (636 x 399) meanwhile. */
.testimonials-area #testi-video img.lazyload,
.testimonials-area #testi-video img.lazyloading {
    aspect-ratio: 636 / 399;
}

/* YouTube players in the testimonial popups: the popup's full width at
   16:9. The embed's fixed 422px height made a tall box on mobile, so the
   video showed small with black bars above and below. */
.pum-content iframe[src*="youtube"],
.pum-content iframe[data-src*="youtube"] { /* lazy-loaded embeds start with data-src */
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
}

/* About: the vision card is gone, so the aim text ends the section. */
.our-aim-text:last-child {
    margin-bottom: 0;
}

/* Award badges (About): natural ratio, never stretched. The theme sets them
   to 100% wide on mobile. The height is fixed (80 / 50) rather than auto:
   the lazy-load placeholder is a 1x1 image, so at auto height the row would
   jump from 1px to full size as the badges load. */
.counter img {
    width: auto !important;
    max-width: 100%;
    height: 80px;
    object-fit: contain;
}

/* Single blog post: the title is the page H1 (T1 style); the author and date
   line matches the blog list meta (14/500). */
.blog-detail h1 {
    margin: 16px 0 24px;
    font-size: var(--cx-h1);
    font-weight: 800;
    line-height: 1.2;
    color: var(--cx-primary);
}

.blog-detail .blog-author .card-meta {
    margin: 0;
    font-size: var(--cx-small);
    font-weight: 500;
    color: var(--cx-text-muted);
}

@media (max-width: 767.98px) {
    .counter img {
        height: 50px;
    }

    /* Testimonials on mobile: no tint box around the testimonial, so a card
       never sits inside a card. */
    .testimonials-item.inner {
        background: none;
        padding: 0;
        border-radius: 0;
    }
}

/* style.css animates every header property (transition: all .5s), so any
   size change plays out as a slow expand. Animate only the look, never the
   size or position. (The header jump itself was the logo placeholder: see
   the .logo img rule further down.) */
.main-header {
    transition: background-color 0.3s ease-out, box-shadow 0.3s ease-out !important;
}


/* ===========================================================================
 * SERVICE PAGES (the 10 service templates, 14 pages): the same tokens as the
 * main pages. All service sections sit inside .content-area.p-content.
 * ======================================================================== */

/* --- Section spacing: each section 40/40 (24/24); background bands 64/40
   inside. The wrapper adds none. Bootstrap spacing utilities on these
   sections (pt-5, pb-1, mt-4, pt-lg-0) are !important, hence !important. */

body > .content-area.p-content.p-content {
    padding-top: 0;
    padding-bottom: 0;
}

.content-area.p-content > [class*="-area"],
.content-area.p-content > .pricing-section,
.content-area.p-content > .container {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: var(--cx-section-space) !important;
    padding-bottom: var(--cx-section-space) !important;
}

.content-area.p-content > .grey-bg,
.content-area.p-content > .welcome-area {
    padding-top: var(--cx-band-space) !important;
    padding-bottom: var(--cx-band-space) !important;
}

/* The process note under the steps belongs to the steps section. Pages
   without a note print an empty one: hide it. */
.content-area.p-content > .process-tab-area + .text-center {
    margin: 0;
    padding: 0 0 var(--cx-section-space) !important;
}

.content-area.p-content > .process-tab-area + .text-center:has(> strong:empty) {
    display: none;
}

.content-area.p-content > .process-tab-area:has(+ .text-center:not(:has(> strong:empty))) {
    padding-bottom: 24px !important;
}

/* Contact block at the end of service pages: the theme's .bottom variant
   keeps a 10px top padding. */
body > .contact-area.bottom {
    padding-top: var(--cx-section-space);
}

/* The theme gives the process section a 520px minimum height. */
.content-area.p-content > .process-tab-area {
    min-height: 0;
}

/* Section containers carry no margin of their own (cloud tabs had 60). */
.content-area.p-content > [class*="-area"] > .container {
    margin-bottom: 0;
}

/* No stray margin under the last paragraph or list item of a section. */
.content-area.p-content > [class*="-area"] > .container > :nth-last-child(1 of :not(script, style, noscript)) :is(p, ul, ol, li):last-child,
.content-area.p-content > [class*="-area"] > .container > :is(p, ul, ol):nth-last-child(1 of :not(script, style, noscript)) {
    margin-bottom: 0;
}

/* No stray margin under a section's last element (card rows use mb-4).
   Scripts after the content are skipped; sliders keep the 68px they reserve
   for the arrows below them. */
.content-area.p-content > [class*="-area"] > .container > :nth-last-child(1 of :not(script, style, noscript)):not(.slick-slider),
.content-area.p-content > .pricing-section > .container > :nth-last-child(1 of :not(script, style, noscript)),
.content-area.p-content > .container > :nth-last-child(1 of :not(script, style, noscript)) {
    margin-bottom: 0 !important;
}

/* 40px between a section title and its content (the process title had 60). */
.content-area.p-content > .process-tab-area > h2 {
    margin-bottom: var(--cx-heading-gap);
}

/* Card grids: the theme spaces rows with a 30px margin under every card,
   which also adds 30px under the last row. Space rows with the grid gap.
   Not the tools diagram (Enterprise, SQA): its connector lines are drawn
   for the theme's spacing and tile sizes. */
.content-area.p-content .row:has(> [class*="col-"] > .default-tab):not(.process-tab-area.app *) {
    row-gap: var(--cx-grid-gap);
}

.content-area.p-content .row > [class*="col-"] > .default-tab:not(.process-tab-area.app *),
.content-area.p-content .row > .tab-item:has(> .default-tab):not(.process-tab-area.app *) {
    margin-bottom: 0;
}

/* --- Small icon tiles (benefits, industries, tech stack): one card radius
   and shadow; labels 16/700, 14 on mobile (they were 15 / 12). */
.content-area .default-tab.small:not(.tab-choose),
.content-area .default-tab.tab-features {
    border-radius: var(--cx-radius-card);
    box-shadow: var(--cx-shadow);
}

.content-area .default-tab.small:not(.new):not(.process-tab-area.app *) h3,
.content-area .service-tab-area:not(.conditional-1) .default-tab.small.new h3 {
    font-size: var(--cx-body);
    font-weight: 700;
    line-height: 1.3;
}

/* --- Feature cards (A), as Home "What we build": "What we offer" (icon,
   title, description) and the business page's service cards. Left aligned,
   padding 30 (20 mobile), 48px icon, card title, 16/500 body, equal height,
   one per row on mobile. */
.service-tab-area.conditional-1 .tab-item > .default-tab.small.new,
.content-area.p-content .tab-item > .default-tab:not(.small):not(.tab-choose):not(.tab-features) {
    height: 100%;
    min-height: 0;
    padding: var(--cx-card-padding);
    text-align: left;
    justify-content: flex-start;
}

.service-tab-area.conditional-1 .tab-item > .default-tab.small.new > a,
.service-tab-area.conditional-1 .tab-item > .default-tab.small.new > .tab-link {
    display: block;
    height: 100%;
}

.service-tab-area.conditional-1 .tab-item > .default-tab.small.new .icon,
.content-area.p-content .tab-item > .default-tab:not(.small):not(.tab-choose):not(.tab-features) .icon {
    margin: 0 0 16px;
}

.service-tab-area.conditional-1 .tab-item > .default-tab.small.new .icon img,
.content-area.p-content .tab-item > .default-tab:not(.small):not(.tab-choose):not(.tab-features) .icon img {
    display: block;
    width: 48px;
    height: 48px;
    max-height: none;
    object-fit: contain;
}

.service-tab-area.conditional-1 .tab-item > .default-tab.small.new h3,
.content-area.p-content .tab-item > .default-tab:not(.small):not(.tab-choose):not(.tab-features) h3 {
    margin: 0 0 8px;
    font-size: var(--cx-h3);
    font-weight: 700;
    line-height: 1.3;
    color: var(--cx-text);
}

.service-tab-area.conditional-1 .tab-item > .default-tab.small.new .info,
.content-area.p-content .tab-item > .default-tab:not(.small):not(.tab-choose):not(.tab-features) .info,
.service-tab-area.conditional-1 .tab-item > .default-tab.small.new .info p,
.content-area.p-content .tab-item > .default-tab:not(.small):not(.tab-choose):not(.tab-features) .info p {
    font-size: var(--cx-body);
    font-weight: 500;
    line-height: var(--cx-line-body);
    color: var(--cx-text);
}

@media (max-width: 767.98px) {
    .service-tab-area.conditional-1 .row > .tab-item:has(> .default-tab.small.new),
    .content-area.p-content .row > .tab-item:has(> .default-tab.tab-features),
    .content-area.p-content .row > .tab-item:has(> .default-tab:not(.small):not(.tab-choose):not(.tab-features)) {
        flex: 0 0 100%;
        width: 100%;
        max-width: 100%;
    }

    .service-tab-area.conditional-1 .tab-item > .default-tab.small.new .info p,
    .content-area.p-content .tab-item > .default-tab:not(.small) .info p {
        display: block; /* the theme hides the description on mobile */
    }
}

/* Every service-page card and tile: the one card radius. Cards inside the
   "why choose" tint box are white, as on the other service pages. */
.content-area.p-content .default-tab {
    border-radius: var(--cx-radius-card);
}

.service-tab-box .default-tab {
    background: var(--cx-surface);
    text-align: left;
    justify-content: flex-start;
}

/* "Load More" under the card grids (mobile only, the theme hides it from
   769px): the grid gap above it. */
@media (max-width: 768px) {
    .content-area.p-content .text-center:has(> [id^="load-more"]) {
        margin-top: var(--cx-grid-gap) !important;
    }

    /* The theme shows it as inline-block, which drops the button's centring. */
    #load-more-btn,
    #load-more-indus,
    #load-more-btn8 {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

/* Technology tiles on mobile: 3 per row (4 broke labels like "Wordpress"
   mid-word); 9 show at first, so the rows are full (the theme showed 8). */
@media (max-width: 767.98px) {
    .service-tab-area.conditional.small .row > .tab-item-small {
        flex: 0 0 33.333%;
        width: 33.333%;
        max-width: 33.333%;
    }

    .service-tab-area.conditional.small .row > .tab-item-small:nth-child(9) {
        display: block;
    }

    .content-area .default-tab.small h3 {
        word-wrap: normal;
        overflow-wrap: normal;
    }
}

@media (max-width: 767.98px) {
    .service-tab-box .row > .tab-item {
        flex: 0 0 100%;
        width: 100%;
        max-width: 100%;
    }
}

/* --- Card titles: the T4 style (22/700, 18 mobile) on the service-page
   cards. Their markup keeps h3 / h4 where the heading order needs it. */
.content-area .default-tab.tab-features h4,
.service-tab-box .default-tab h3,
.pricing-card h3,
.pricing-info h4,
.price-cost-tab > strong:first-child {
    margin: 0 0 8px;
    font-size: var(--cx-h3);
    font-weight: 700;
    line-height: 1.3;
    color: var(--cx-text);
}

.price-cost-tab > strong:first-child {
    display: block;
}

.pricing-info h4 a {
    color: inherit;
}

/* --- Cards: radius 20, padding 30 (20 mobile), body 16/500. */
.pricing-card,
.pricing-info,
.price-cost-tab,
.service-tab-box,
.service-tab-box .default-tab.tab-choose,
.content-area .default-tab.tab-features {
    border-radius: var(--cx-radius-card);
    padding: var(--cx-card-padding);
}

/* AI feature cards (AI MVP and similar): feature cards, left aligned; the
   text sits straight in .info, which adds no box of its own. */
.content-area .default-tab.tab-features {
    text-align: left;
    justify-content: flex-start;
}

.content-area .default-tab.tab-features .info {
    padding: 0;
    font-size: var(--cx-body);
    font-weight: 500;
    line-height: var(--cx-line-body);
    color: var(--cx-text);
}

.pricing-card p,
.pricing-info p,
.price-cost-tab p,
.service-tab-box .default-tab p,
.service-tab-box .default-tab .info,
.content-area .default-tab.tab-features .info p {
    font-size: var(--cx-body);
    font-weight: 500;
    line-height: var(--cx-line-body);
    color: var(--cx-text);
}

.pricing-heading p,
.pricing-note {
    font-size: var(--cx-body);
    color: var(--cx-text-muted);
}

/* Welcome statement (App development cost): the lead style. */
.welcome-area,
.welcome-area p {
    font-size: var(--cx-lead);
    font-weight: 500;
    line-height: 1.5;
}

/* Long centred paragraphs: the 760px reading width (L3). */
.welcome-area p,
.cross-platform-area p,
.why-build-area p {
    max-width: var(--cx-text-measure);
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 767.98px) {
    .content-area .default-tab.small:not(.tab-choose):not(.process-tab-area.app *) {
        padding: 16px 8px;
    }

    .content-area .default-tab.small:not(.new) h3,
    .content-area .service-tab-area:not(.conditional-1) .default-tab.small.new h3 {
        font-size: var(--cx-small);
    }

    .service-tab-area.conditional-1 .tab-item > .default-tab.small.new {
        padding: var(--cx-card-padding);
    }
}

/* FAQ questions (service pages): the H4 token, 18 / 16 on mobile. A later
   change on live set 16 / 15. */
.faqs-area .ewd-ufaq-faq-title h4 {
    font-size: var(--cx-h4);
}

/* Tile grids without a "Load More" button (removed on several service pages
   on live): show every tile on mobile. The theme hides tiles past the 6th /
   8th there, and the industries tiles start hidden in the markup, so phones
   showed an industries heading with no tiles. */
@media (max-width: 768px) {
    .container:not(:has([id^="load-more"])) > .service-tab-area .row > .tab-item,
    .container:not(:has([id^="load-more"])) > .service-tab-area .row > .tab-item-small {
        display: block !important;
    }
}

/* Header jump on page load: the logo is lazy-loaded, and until it arrives
   its placeholder is a 1x1 image, so the logo showed as a 200px square and
   the header grew from 88 to 247px for a moment. Hold the logo's own shape
   (441 x 81) from the start. */
.logo img {
    aspect-ratio: 441 / 81;
}

/* Portfolio detail: services / technologies / links band. Even spacing
   above and below (the theme had 20 / 20, and 20 / 0 on mobile). */
.portfolio-detail-info {
    padding: var(--cx-section-space) 0;
}

.portfolio-detail-info .detail-info-tab:last-child,
.portfolio-detail-info .detail-info-tab ul {
    margin-bottom: 0;
}

.portfolio-detail-info .detail-info-tab ul li:last-child {
    padding-bottom: 0;
}

/* ---------------------------------------------------------------------------
 * QA 29 Oct: off-palette colours and one-off shadows brought onto the tokens
 * ------------------------------------------------------------------------ */

/* Pricing block (service pages and the cost guide). */
.pricing-card,
.pricing-card:hover,
.pricing-featured {
    box-shadow: var(--cx-shadow);
}

.pricing-price,
.pricing-features li::before {
    color: var(--cx-primary);
}

.pricing-duration {
    color: var(--cx-text-muted);
}

.pricing-features li {
    color: var(--cx-text);
}

.popular-badge,
.pricing-btn {
    background: var(--cx-primary);
}

.pricing-info {
    background: var(--cx-tint);
}

/* Grey bands and boxes: surface-alt. */
.grey-bg,
.quote-content {
    background: var(--cx-surface-alt);
}

/* Process step timing ("Week 1") and the "why choose" box. */
.process-tab h4 span {
    color: var(--cx-text-muted);
}

.service-tab-box {
    background-color: var(--cx-tint);
}

/* Tables in posts, case studies and the cost guide: Bootstrap's own text
   colour (#212529) replaced by the text token. */
.table {
    --bs-table-color: var(--cx-text);
    --bs-table-striped-color: var(--cx-text);
    --bs-table-active-color: var(--cx-text);
    --bs-table-hover-color: var(--cx-text);
    color: var(--cx-text);
}

.table > :not(caption) > * > * {
    color: var(--cx-text);
}

/* Stats counter labels: written in sentence case, shown as written. */
.count-text {
    text-transform: none;
}

/* Pricing on mobile: the highlighted ("Most popular") card first. */
@media (max-width: 991.98px) {
    .pricing-section .row > [class*="col-"]:has(> .pricing-featured) {
        order: -1;
    }
}

/* Portfolio slider cards whose excerpt sits straight in .info (Mobile app
   and SaaS pages): the theme's mobile 12px; same 16px as the other cards. */
.portfolio-slider .item .info {
    font-size: var(--cx-body);
    line-height: var(--cx-line-body);
}

/* Case study hero: H1 (the T1 style above) and the summary as the lead
   line, on white above the project image, as on the main pages. */
.portfolio-hero {
    padding: var(--cx-section-space) 0;
}

.portfolio-hero h1 {
    margin-bottom: 8px;
}

.portfolio-hero .portfolio-summary,
.portfolio-hero .portfolio-summary p {
    max-width: var(--cx-text-measure);
    margin: 0;
    font-size: var(--cx-lead);
    font-weight: 500;
    line-height: 1.5;
    color: var(--cx-text);
}

/* Footer column titles: labels, not headings (a <p>, from the widget areas
   and the Contact block), shown as written in sentence case. Same look as
   the old H5s: 20/700 white, 8px above the list. */
.footer-main .widget-title,
.footer-main h5 {
    margin: 0 0 8px;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--cx-on-primary);
    text-transform: none;
}


/* ---------------------------------------------------------------------------
 * QA 2 Nov, 2.8 Portfolio page: filter buttons (were Tabby tab headings) and
 * "Load more" (was the Load More Anything plugin). Same look as before:
 * 48px chips, 16/600, #f6f6f6 idle, primary active; 20px under the row.
 * ------------------------------------------------------------------------ */

.cx-portfolio-filters {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0 20px;
    margin-bottom: 40px;
}

.cx-portfolio-filter {
    height: var(--cx-chip-height);
    margin: 0 0 20px;
    padding: 0 24px;
    border: 0;
    border-radius: var(--cx-radius-control);
    background: var(--cx-surface-alt);
    color: var(--cx-text);
    font-family: inherit;
    font-size: var(--cx-body);
    font-weight: 600;
    line-height: var(--cx-chip-height);
    cursor: pointer;
}

.cx-portfolio-filter:hover,
.cx-portfolio-filter:focus-visible,
.cx-portfolio-filter.is-active {
    background: var(--cx-primary);
    color: var(--cx-on-primary);
}

/* The tab panel's inset, kept for the list. */
.cx-portfolio .portfolio-div {
    padding: 0 20px;
}

.cx-portfolio-empty {
    text-align: center;
}

.cx-portfolio-more {
    margin-top: var(--cx-grid-gap);
    text-align: center;
}

.cx-portfolio[aria-busy] .loadMoreBtn {
    opacity: 0.6;
    pointer-events: none;
}

@media (max-width: 767.98px) {
    .cx-portfolio-filters {
        gap: 0 8px;
        margin-bottom: 20px;
    }

    .cx-portfolio .portfolio-div {
        padding: 0;
    }

    .cx-portfolio-filter {
        margin-bottom: 16px;
        padding: 0 16px;
    }
}


/* ---------------------------------------------------------------------------
 * QA 2 Nov, 2.10 / 2.11 Service page spacing: the last paragraph or list
 * item of the pricing note and of list sections adds no space of its own
 * (the theme gives every ol li 10px below), so the 40/40 (24/24) and 64/40
 * section padding alone sets the gaps.
 * ------------------------------------------------------------------------ */

.content-area.p-content > .pricing-section > .container > :nth-last-child(1 of :not(script, style, noscript)) :is(p, ul, ol, li):last-child {
    margin-bottom: 0;
}

.content-area.p-content > [class*="-area"] > .container > :is(ul, ol):nth-last-child(1 of :not(script, style, noscript)) > li:last-child {
    padding-bottom: 0;
}

/* Cost Guide "How we price" / "Four ways to lower the cost": section
   titles in the H2 size (36/24) like every other H2 (were card-title
   size), and the grid gap between the two cards when they stack (they
   touched). */
.price-cost-tab > h2:first-child {
    margin: 0 0 16px;
    font-size: var(--cx-h2);
    font-weight: 700;
    line-height: 1.25;
    color: var(--cx-text);
}

.content-area.p-content > .price-cost-area .row {
    row-gap: var(--cx-grid-gap);
}

/* Cost Guide "six things" list (two columns): space the items with a margin,
   which the browser drops at the column break, so the first column's last
   item adds nothing under the list. */
.six-things-area ol > li {
    padding-bottom: 0;
    margin-bottom: 10px;
    break-inside: avoid;
}

.six-things-area ol > li:last-child {
    margin-bottom: 0;
}

/* AI MVP "AI features" group labels ("What most founders ask for", "For
   advanced products"): card-title size, 22/18 (were a one-off 28px H3). */
.ai-features-area > h3 {
    font-size: var(--cx-h3);
    font-weight: 700;
    line-height: 1.3;
}


/* ---------------------------------------------------------------------------
 * QA 2 Nov, 2.11 Blog posts: the wpDiscuz rating and comment block on the
 * tokens. It had 10-13px text, its own "square721" number font and greys
 * #666 / #777 / #888 / #989898. Now Raleway, 14px minimum, #555 for labels
 * and #2e2e2e for what people write; buttons as the site's primary button.
 * Icons (Font Awesome, SVG) keep their own font and size.
 * ------------------------------------------------------------------------ */

.blog-detail :is(.wpd-rating-wrap, #wpdcom) :is(div, span, p, label, a, li, input, textarea, select, option, button):not([class*="fa-"]):not(.fas):not(.far):not(.fab) {
    font-family: inherit;
}

.blog-detail .wpd-rating-wrap .wpd-rating-title,
.blog-detail .wpd-post-rating .wpd-rating-wrap .wpd-rating-value .wpdrt,
.blog-detail #wpdcom label,
.blog-detail #wpdcom :is(.wpd-sbs-title, .wpdiscuz-subscribe-form-intro, .wpd-thread-info, .wpdiscuz-sort-button, .wpd-comment-date, .wpd-reply-button, .wpd-vote-result, .wpd-comment-label, .wpdlb, .wpd-field-desc, .wpd-thread-filter, .wpd-filter),
.blog-detail #wpdcom :is(input:not([type="submit"]):not([type="checkbox"]), textarea, select, option) {
    font-size: var(--cx-small) !important;
    color: var(--cx-text-muted) !important;
}

/* The average score beside the stars. */
.blog-detail .wpd-rating-wrap :is(.wpdrv, .wpdrc) {
    font-family: inherit !important;
    color: var(--cx-text) !important;
}

.blog-detail #wpdcom :is(.wpd-comment-text, .wpd-comment-text p, .wpd-comment-author, .wpd-comment-author a) {
    font-size: var(--cx-body) !important;
    color: var(--cx-text) !important;
}

.blog-detail #wpdcom :is(.wpd-prim-button, .wc_comm_submit, input[type="submit"]) {
    border: 0 !important;
    border-radius: var(--cx-radius-control) !important;
    background: var(--cx-primary) !important;
    color: var(--cx-on-primary) !important;
    font-family: inherit !important;
    font-size: var(--cx-small) !important;
    font-weight: 600;
}


/* ---------------------------------------------------------------------------
 * QA 2 Nov, File 2 recheck: blog posts. Category badges (12px) and tags (11px
 * on mobile) at the 14px minimum; "Back to blog" in the muted text colour
 * (was #989898), primary on hover as before.
 * ------------------------------------------------------------------------ */

.single-page .category-title,
.single-page .category-title a,
.single-page .post-tags span {
    font-size: var(--cx-small);
}

.back-btn {
    color: var(--cx-text-muted);
}


/* ===========================================================================
 * "Products we've shipped" slider (Ali's Products Slider design, 3 Nov 2026):
 * template-parts/products-slider.php, js/products-slider.js.
 * Cards: 4 per view from 1200px, 2 from 768px, 300px (about 1.15) below.
 * ======================================================================== */

.portfolio-area:has(.cx-products) .portfolio-had {
    text-align: left;
}

.portfolio-area:has(.cx-products) .portfolio-had h2 {
    margin: 0 0 20px;
}

.cx-products {
    --cx-products-gap: 24px;
    --cx-products-per-view: 4;
}

/* The scroll box reaches 12px past the container so card shadows and the
   hover lift aren't clipped. */
.cx-products-viewport {
    margin: 0 -12px;
    padding: 12px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 12px;
    scrollbar-width: none;
}

.cx-products-viewport::-webkit-scrollbar {
    display: none;
}

.cx-products-track {
    display: flex;
    align-items: stretch;
    gap: var(--cx-products-gap);
    margin: 0;
    padding: 0;
    list-style: none;
}

.cx-products-slide {
    flex: none;
    width: calc((100% - (var(--cx-products-per-view) - 1) * var(--cx-products-gap)) / var(--cx-products-per-view));
    scroll-snap-align: start;
    display: flex;
}

.cx-product-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    background: var(--cx-surface);
    border-radius: var(--cx-radius-card);
    box-shadow: var(--cx-shadow);
    color: var(--cx-text);
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.cx-product-card:hover,
.cx-product-card:focus-visible {
    transform: translateY(-4px);
    box-shadow: 0 10px 28px rgba(40, 77, 145, 0.16);
    color: var(--cx-text);
}

/* 4:3 image. The whole image shows on the tint until every project has its
   4:3 export (the image template in the design), so nothing is cropped. */
.cx-product-media {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: var(--cx-radius-card) var(--cx-radius-card) 0 0;
    background: var(--cx-tint);
}

.cx-product-media .cx-product-img {
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: contain;
    border-radius: 0;
}

/* The design has 13px here; 14 is the site's minimum text size. */
.cx-product-tag {
    position: absolute;
    left: 14px;
    top: 14px;
    display: flex;
    align-items: center;
    height: 28px;
    padding: 0 12px;
    border-radius: 30px;
    background: var(--cx-surface);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    color: var(--cx-primary);
    font-size: var(--cx-small);
    font-weight: 600;
    line-height: 1;
}

/* Fixed-height text area: names line up on every card, cards are equal. */
.cx-product-text {
    height: 116px;
    padding: 18px 20px 0;
}

.cx-product-text .cx-product-name {
    margin: 0;
    font-size: var(--cx-h3);
    font-weight: 700;
    line-height: 1.3;
    color: var(--cx-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cx-product-text .cx-product-tagline {
    margin: 4px 0 0;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--cx-text-muted);
    text-wrap: pretty;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Controls (7 Nov 2026): "See all work" centred under the cards, dots and
   arrows at the right edge. Three columns, the outer two equal, so the
   button sits in the true centre whatever the nav's width. On phones the nav
   row goes above a full-width button (below). */
.cx-products-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 24px;
    margin-top: 20px;
}

.cx-products-controls .cx-products-work {
    grid-column: 2;
}

.cx-products-controls .cx-products-nav {
    grid-column: 3;
    justify-self: end;
}

.cx-products-work {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--cx-button-height);
    padding: 0 32px;
    border: 2px solid var(--cx-primary);
    border-radius: var(--cx-radius-control);
    background: var(--cx-surface);
    color: var(--cx-primary);
    font-size: var(--cx-body);
    font-weight: 600;
    text-decoration: none;
}

.cx-products-work:hover,
.cx-products-work:focus-visible {
    background: var(--cx-tint);
    color: var(--cx-primary);
}

.cx-products-nav {
    display: flex;
    align-items: center;
    gap: 20px;
}

.cx-products-dots {
    display: flex;
    align-items: center;
    gap: 2px;
}

.cx-products-dot {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 44px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

.cx-products-dot span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #dbdbdb;
}

.cx-products-dot.is-active span {
    background: var(--cx-primary);
}

.cx-products-arrows {
    display: flex;
    gap: 10px;
}

.cx-products-prev,
.cx-products-next {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--cx-primary);
    color: var(--cx-on-primary);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

.cx-products-prev:disabled,
.cx-products-next:disabled {
    background: #dbdbdb;
    cursor: default;
}

/* Fewer cards than fit: no dots or arrows; "See all work" stays centred. */
.cx-products.is-static .cx-products-nav {
    display: none;
}

@media (max-width: 1199.98px) {
    .cx-products {
        --cx-products-per-view: 2;
    }
}

@media (max-width: 767.98px) {
    .portfolio-area:has(.cx-products) .portfolio-had h2 {
        margin-bottom: 10px;
    }

    .cx-products {
        --cx-products-gap: 12px;
    }

    /* Cards run to the screen edge so the next one peeks in. */
    .cx-products-viewport {
        margin: 0 calc(var(--bs-gutter-x, 1.5rem) * -0.5);
        padding: 10px calc(var(--bs-gutter-x, 1.5rem) * 0.5) 12px;
        scroll-padding: 0 calc(var(--bs-gutter-x, 1.5rem) * 0.5);
    }

    .cx-products-slide {
        width: 300px;
    }

    .cx-product-text {
        height: 104px;
        padding: 16px 18px 0;
    }

    .cx-product-text .cx-product-name {
        font-size: var(--cx-h4);
    }

    .cx-products-controls {
        display: flex; /* back from the desktop grid */
        flex-wrap: wrap;
        gap: 16px 12px;
        margin-top: 8px;
    }

    .cx-products-nav {
        order: -1;
        flex: 1 1 100%;
        justify-content: space-between;
    }

    .cx-products-work {
        flex: 1 1 100%;
        height: 48px;
    }
}


/* ---------------------------------------------------------------------------
 * Services mega menu (Services Mega Menu design, layout 1a, 3 Nov 2026).
 * Desktop: one white panel under the header, lined up with the logo and the
 * button, three groups split by thin dividers. Mobile (Max Mega Menu's
 * off-canvas menu, up to 991px): a full-screen white menu under the logo and
 * close button, the groups as an accordion (js/services-menu.js), "Get in
 * touch" pinned at the bottom. Group titles are 14px (the design's 12px is
 * under the site minimum).
 * ------------------------------------------------------------------------ */

#mega-menu-wrap-primary #mega-menu-primary p.mega-block-title {
    margin: 0 0 10px;
    padding: 0 0 12px;
    border-bottom: 1px solid #dbdbdb;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.12em;
    color: var(--cx-primary);
}

/* The title button (mobile accordion) reads as a plain label on desktop. */
#mega-menu-wrap-primary #mega-menu-primary .cx-menu-group {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    color: inherit;
    cursor: default;
}

#mega-menu-wrap-primary #mega-menu-primary .cx-menu-group-icon {
    display: none;
}

@media (min-width: 992px) {
    /* Flush under the header (no gap), the width of the header's content. */
    .main-menu #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu {
        padding: 28px 0 0;
    }

    .main-menu #mega-menu-wrap-primary #mega-menu-primary[data-effect="fade_up"] li.mega-menu-item.mega-menu-megamenu > ul.mega-sub-menu {
        left: calc(var(--bs-gutter-x, 1.5rem) * 0.5) !important;
        width: calc(100% - var(--bs-gutter-x, 1.5rem)) !important;
    }

    .main-menu #mega-menu-wrap-primary #mega-menu-primary li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-row {
        padding: 32px 0 26px;
        border: 1px solid #dbdbdb;
        border-top: 0;
        border-radius: 0 0 10px 10px;
        box-shadow: 0 22px 48px rgba(20, 40, 80, 0.12);
    }

    .main-menu #mega-menu-wrap-primary #mega-menu-primary li.mega-menu-item.mega-menu-megamenu ul.mega-sub-menu ul.mega-sub-menu {
        padding-top: 0;
    }

    .main-menu #mega-menu-wrap-primary #mega-menu-primary li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-row > ul.mega-sub-menu {
        display: flex;
    }

    .main-menu #mega-menu-wrap-primary #mega-menu-primary li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-row > ul.mega-sub-menu > li.mega-menu-column {
        flex: 1 1 0;
        min-width: 0;
        padding: 0 36px;
    }

    .main-menu #mega-menu-wrap-primary #mega-menu-primary li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-row > ul.mega-sub-menu > li.mega-menu-column + li.mega-menu-column {
        border-left: 1px solid #dbdbdb;
    }

    .main-menu #mega-menu-wrap-primary #mega-menu-primary li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-row .mega-menu-column > ul.mega-sub-menu > li.mega-menu-item {
        padding: 0;
        margin: 0 0 2px;
    }

    .main-menu #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu li.mega-menu-column > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link {
        height: auto;
        margin: 0 -12px;
        padding: 9px 12px;
        border-radius: 6px !important;
        font-size: 16px;
        font-weight: 500;
        line-height: 20px;
        text-transform: none;
        color: var(--cx-text);
    }

    .main-menu #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu li.mega-menu-column > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link:hover,
    .main-menu #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu li.mega-menu-column > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link:focus-visible,
    .main-menu #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu li.mega-menu-column > ul.mega-sub-menu > li.mega-current-menu-item > a.mega-menu-link {
        background-color: var(--cx-tint) !important;
        color: var(--cx-primary);
    }
}

@media (max-width: 991.98px) {
    /* Full screen under the header (its height: --cx-menu-top, set by
       js/services-menu.js); the logo and the toggle (now an X) stay. */
    .main-menu #mega-menu-wrap-primary .mega-menu-toggle + #mega-menu-primary {
        display: flex;
        flex-direction: column;
        top: var(--cx-menu-top, 56px);
        left: -100%;
        width: 100%;
        height: calc(100vh - var(--cx-menu-top, 56px));
        height: calc(100dvh - var(--cx-menu-top, 56px));
        max-height: none;
        padding: 8px 0 0;
        background: var(--cx-surface);
        box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.08);
    }

    .main-menu #mega-menu-wrap-primary .mega-menu-toggle.mega-menu-open + #mega-menu-primary {
        left: 0;
    }

    .main-menu #mega-menu-wrap-primary .mega-menu-toggle.mega-menu-open::after {
        opacity: 0;
    }

    .main-menu #mega-menu-wrap-primary #mega-menu-primary + button.mega-close,
    html.mega-menu-primary-off-canvas-open .main-header .contact-btn {
        display: none !important;
    }

    /* Home, About Us, Services, Portfolio, Testimonials, Blog */
    .main-menu #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item {
        flex: none;
        margin: 0 20px;
        border-bottom: 1px solid #dbdbdb;
    }

    .main-menu #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item:has(+ li.get-touch-btn) {
        border-bottom: 0;
    }

    .main-menu #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link {
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: 56px;
        height: auto;
        padding: 0;
        border: 0;
        background: none;
        font-size: 18px;
        font-weight: 500;
        line-height: 1.3;
        color: var(--cx-text);
    }

    .main-menu #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-menu-item > a.mega-menu-link,
    .main-menu #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-menu-ancestor > a.mega-menu-link,
    .main-menu #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-page-ancestor > a.mega-menu-link,
    .main-menu #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-toggle-on > a.mega-menu-link {
        background: none;
        color: var(--cx-primary);
    }

    .main-menu #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-toggle-on > a.mega-menu-link {
        font-weight: 600;
    }

    .main-menu #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link > span.mega-indicator {
        margin-left: auto;
        color: inherit;
    }

    /* Services: the three groups */
    .main-menu #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu {
        padding: 0 0 12px;
        background: none;
    }

    .main-menu #mega-menu-wrap-primary #mega-menu-primary li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-row,
    .main-menu #mega-menu-wrap-primary #mega-menu-primary li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-row > ul.mega-sub-menu,
    .main-menu #mega-menu-wrap-primary #mega-menu-primary li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-row > ul.mega-sub-menu > li.mega-menu-column,
    .main-menu #mega-menu-wrap-primary #mega-menu-primary li.mega-menu-item.mega-menu-megamenu ul.mega-sub-menu ul.mega-sub-menu {
        width: 100%;
        margin: 0;
        padding: 0;
        border-radius: 0;
        background: none;
        box-shadow: none;
    }

    .main-menu #mega-menu-wrap-primary #mega-menu-primary li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-row > ul.mega-sub-menu > li.mega-menu-column {
        border-top: 1px solid #dbdbdb;
    }

    .main-menu #mega-menu-wrap-primary #mega-menu-primary li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-row .mega-menu-column > ul.mega-sub-menu > li.mega-menu-item {
        padding: 0;
    }

    .main-menu #mega-menu-wrap-primary #mega-menu-primary li.mega-menu-megamenu .mega-menu-column.cx-open > ul.mega-sub-menu {
        padding-bottom: 10px;
    }

    .main-menu #mega-menu-wrap-primary #mega-menu-primary li.mega-menu-megamenu .mega-menu-column:not(.cx-open) > ul.mega-sub-menu > li.mega-menu-item:not(.widget_text) {
        display: none;
    }

    #mega-menu-wrap-primary #mega-menu-primary p.mega-block-title {
        margin: 0;
        padding: 0;
        border: 0;
        color: var(--cx-primary);
    }

    #mega-menu-wrap-primary #mega-menu-primary .cx-menu-group {
        min-height: 48px;
        padding: 0 4px;
        cursor: pointer;
    }

    /* + when closed, - when open */
    #mega-menu-wrap-primary #mega-menu-primary .cx-menu-group-icon {
        display: block;
        position: relative;
        flex: none;
        width: 14px;
        height: 14px;
    }

    #mega-menu-wrap-primary #mega-menu-primary .cx-menu-group-icon::before,
    #mega-menu-wrap-primary #mega-menu-primary .cx-menu-group-icon::after {
        content: "";
        position: absolute;
        left: 0;
        top: 6px;
        width: 14px;
        height: 2px;
        border-radius: 2px;
        background: currentColor;
    }

    #mega-menu-wrap-primary #mega-menu-primary .cx-menu-group-icon::after {
        transform: rotate(90deg);
    }

    #mega-menu-wrap-primary #mega-menu-primary .cx-menu-group[aria-expanded="true"] .cx-menu-group-icon::after {
        display: none;
    }

    .main-menu #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu li.mega-menu-column > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link {
        display: flex;
        align-items: center;
        min-height: 44px;
        height: auto;
        padding: 0 12px;
        border-radius: 6px;
        background: none;
        font-size: 16px;
        font-weight: 500;
        line-height: 1.3;
        text-transform: none;
        color: var(--cx-text);
    }

    .main-menu #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu li.mega-menu-column > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link:hover,
    .main-menu #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu li.mega-menu-column > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link:focus-visible,
    .main-menu #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu li.mega-menu-column > ul.mega-sub-menu > li.mega-current-menu-item > a.mega-menu-link {
        background-color: var(--cx-tint) !important;
        border-radius: 6px !important;
        color: var(--cx-primary);
    }

    /* "Get in touch", pinned to the bottom */
    .main-menu #mega-menu-wrap-primary #mega-menu-primary > li.get-touch-btn {
        position: sticky;
        bottom: 0;
        z-index: 1;
        margin: auto 0 0;
        padding: 16px 20px 28px;
        border-top: 1px solid #dbdbdb;
        border-bottom: 0;
        background: var(--cx-surface);
    }

    .main-menu #mega-menu-wrap-primary #mega-menu-primary > li.get-touch-btn > a.mega-menu-link,
    .main-menu #mega-menu-wrap-primary #mega-menu-primary > li.get-touch-btn.mega-current-menu-item > a.mega-menu-link {
        flex-direction: column;
        justify-content: center;
        height: 56px;
        min-height: 0;
        margin: 0;
        padding: 0;
        border-radius: var(--cx-radius-control);
        background: var(--cx-primary);
        font-size: 17px;
        font-weight: 700;
        color: var(--cx-on-primary);
    }

    .main-menu #mega-menu-wrap-primary #mega-menu-primary > li.get-touch-btn > a.mega-menu-link small {
        margin-top: 2px;
        font-size: 10px;
        font-weight: 600;
    }
}


/* ---------------------------------------------------------------------------
 * Pricing and FAQ sections (Pricing and FAQ Sections design, 3 Nov 2026):
 * service pages and the cost guide. The card and FAQ text is edited in
 * wp-admin; only the look changes here. Durations and the footnote keep the
 * muted token (#555): the design's #8C8C8C is too light to read on white.
 * The badge is 14px (site minimum; the design has 13px).
 * ------------------------------------------------------------------------ */

.pricing-section .text-center.mb-5 {
    margin-bottom: 56px !important;
}

.pricing-section .text-center.mb-5 > p {
    margin: 14px 0 0;
    font-size: 17px;
    font-weight: 500;
    line-height: 1.75;
    color: var(--cx-text);
}

/* Cards */
.pricing-section .pricing-card {
    padding: 44px 36px 36px;
    border-radius: var(--cx-radius-card);
    box-shadow: 0 0 22px rgba(0, 0, 0, 0.08);
}

.pricing-section .pricing-card.pricing-featured {
    padding: 42px 34px 34px; /* the same outer size with the 2px border */
    border: 2px solid var(--cx-primary);
    box-shadow: 0 10px 32px rgba(40, 77, 145, 0.16);
}

.pricing-section .popular-badge {
    top: -15px;
    padding: 7px 16px;
    border-radius: 30px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--cx-on-primary);
}

.pricing-section .pricing-card h3 {
    margin: 0;
    font-size: var(--cx-h3);
    line-height: 1.3;
}

.pricing-section .pricing-price {
    margin: 18px 0 0;
    font-size: 34px;
    line-height: 1.2;
    font-variant-numeric: lining-nums;
}

.pricing-section .pricing-duration {
    margin-top: 8px;
    font-size: 17px;
    font-weight: 500;
    font-variant-numeric: lining-nums;
}

.pricing-section .pricing-card hr {
    margin: 28px 0;
    border: 0;
    border-top: 1px solid #dbdbdb;
    opacity: 1;
}

.pricing-section .pricing-features {
    flex: 1 0 auto; /* the buttons line up at the bottom */
    margin: 0;
}

.pricing-section .pricing-features li {
    margin: 0 0 14px;
    padding-left: 22px;
    font-size: 17px;
    font-weight: 500;
    line-height: 1.4;
}

.pricing-section .pricing-features li:last-child {
    margin-bottom: 0;
}

/* Bullet: a small solid triangle */
.pricing-section .pricing-features li::before {
    content: "";
    top: 0.7em; /* the middle of the first line */
    font-size: inherit;
    width: 0;
    height: 0;
    border-left: 8px solid var(--cx-primary);
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    transform: translateY(-50%);
}

.pricing-section .pricing-card > p:last-child {
    margin-top: 36px;
}

.pricing-section .pricing-card .btn-default {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 57px;
    padding: 0 16px;
    border-radius: var(--cx-radius-control);
    font-size: 14px;
    font-weight: 500;
}

/* "What drives cost" / "How we price" */
.pricing-section .row.g-3 {
    --bs-gutter-x: 24px;
    --bs-gutter-y: 24px;
    margin-top: 24px !important; /* + the 24px row gap = the design's 48 */
}

.pricing-section .pricing-info {
    padding: 34px 36px;
    border-radius: 16px;
}

.pricing-section .pricing-info h4,
.pricing-section .pricing-info h3.cx-h4 {
    margin: 0;
    font-size: var(--cx-h3);
    line-height: 1.3;
    color: var(--cx-primary);
}

.pricing-section .pricing-info p {
    margin: 12px 0 0;
    font-size: 17px;
    line-height: 1.75;
}

.pricing-section .pricing-note {
    margin-top: 40px !important;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.6;
}

@media (max-width: 767.98px) {
    .pricing-section .text-center.mb-5 {
        margin-bottom: 44px !important;
    }

    .pricing-section .text-center.mb-5 > p {
        margin-top: 12px;
        font-size: 16px;
        line-height: 1.7;
    }

    .pricing-section .pricing-card {
        padding: 34px 24px 24px;
    }

    .pricing-section .pricing-card.pricing-featured {
        padding: 36px 22px 24px;
    }

    .pricing-section .pricing-card h3 {
        font-size: 20px;
    }

    .pricing-section .pricing-price {
        margin-top: 14px;
        font-size: 30px;
    }

    .pricing-section .pricing-duration {
        margin-top: 6px;
        font-size: 16px;
    }

    .pricing-section .pricing-card hr {
        margin: 22px 0;
    }

    .pricing-section .pricing-features li {
        margin-bottom: 12px;
        padding-left: 20px;
        font-size: 16px;
    }

    .pricing-section .pricing-card > p:last-child {
        margin-top: 28px;
    }

    .pricing-section .pricing-card .btn-default {
        height: 54px;
    }

    .pricing-section .row.g-3 {
        --bs-gutter-y: 16px;
        margin-top: 20px !important; /* + 16 = 36 */
    }

    .pricing-section .pricing-info {
        padding: 26px 22px;
    }

    .pricing-section .pricing-info h4,
    .pricing-section .pricing-info h3.cx-h4 {
        font-size: 20px;
    }

    .pricing-section .pricing-info p {
        margin-top: 10px;
        font-size: 16px;
        line-height: 1.7;
    }

    .pricing-section .pricing-note {
        margin-top: 30px !important;
        font-size: 14px;
    }
}

/* FAQ: an 800px list of rows split by thin rules, + / - on the right. */
.faqs-area .ewd-ufaq-faq-list {
    max-width: 800px;
    margin: 48px auto 0;
    padding: 0;
    border-top: 1px solid #dbdbdb;
}

.faqs-area .ewd-ufaq-faq-div {
    border-bottom: 1px solid #dbdbdb;
}

.faqs-area .ewd-ufaq-faq-list .ewd-ufaq-faq-title a {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 24px 0;
    border: 0;
    border-radius: 0;
    color: var(--cx-text);
    text-decoration: none;
}

.faqs-area .ewd-ufaq-faq-list .ewd-ufaq-faq-title a .ewd-ufaq-faq-title-text {
    flex: 1 1 auto;
    min-width: 0;
}

.faqs-area .ewd-ufaq-faq-list .ewd-ufaq-faq-title a .ewd-ufaq-clear {
    display: none;
}

.faqs-area .ewd-ufaq-faq-list .ewd-ufaq-faq-title :is(h4, h3.cx-h4) {
    display: block;
    margin: 0 !important;
    font-size: 19px;
    font-weight: 600;
    line-height: 1.4;
    color: inherit;
    transition: color 0.2s ease;
}

.faqs-area .ewd-ufaq-faq-list .ewd-ufaq-faq-title a:hover :is(h4, h3.cx-h4),
.faqs-area .ewd-ufaq-faq-list .ewd-ufaq-faq-title a:focus-visible :is(h4, h3.cx-h4) {
    color: var(--cx-primary);
}

/* The + (closed) / - (open) icon, drawn in the brand blue */
.faqs-area .ewd-ufaq-faq-list .ewd-ufaq-faq-title a::after {
    position: static;
    flex: none;
    width: 18px;
    height: 18px;
    margin: 0;
    background:
        linear-gradient(var(--cx-primary), var(--cx-primary)) center / 18px 2px no-repeat,
        linear-gradient(var(--cx-primary), var(--cx-primary)) center / 2px 18px no-repeat;
    border-radius: 2px;
    transform: none;
}

.faqs-area .ewd-ufaq-faq-list .ewd-ufaq-post-active .ewd-ufaq-faq-title a::after {
    background: linear-gradient(var(--cx-primary), var(--cx-primary)) center / 18px 2px no-repeat;
}

.faqs-area .ewd-ufaq-faq-body {
    padding: 0 48px 26px 0;
    font-size: 17px;
    font-weight: 500;
    line-height: 1.75;
    color: var(--cx-text);
}

.faqs-area .ewd-ufaq-faq-body .ewd-ufaq-post-margin {
    margin: 0;
    padding: 0;
}

.faqs-area .ewd-ufaq-faq-body p {
    font-size: inherit;
    line-height: inherit;
    color: inherit;
}

.faqs-area .ewd-ufaq-faq-body p:last-child {
    margin-bottom: 0;
}

@media (max-width: 767.98px) {
    .faqs-area .ewd-ufaq-faq-list {
        margin-top: 32px;
    }

    .faqs-area .ewd-ufaq-faq-list .ewd-ufaq-faq-title a {
        gap: 16px;
        min-height: 64px;
        padding: 20px 0;
    }

    .faqs-area .ewd-ufaq-faq-list .ewd-ufaq-faq-title :is(h4, h3.cx-h4) {
        font-size: 17px;
    }

    .faqs-area .ewd-ufaq-faq-list .ewd-ufaq-faq-title a::after {
        width: 16px;
        height: 16px;
        background:
            linear-gradient(var(--cx-primary), var(--cx-primary)) center / 16px 2px no-repeat,
            linear-gradient(var(--cx-primary), var(--cx-primary)) center / 2px 16px no-repeat;
    }

    .faqs-area .ewd-ufaq-faq-list .ewd-ufaq-post-active .ewd-ufaq-faq-title a::after {
        background: linear-gradient(var(--cx-primary), var(--cx-primary)) center / 16px 2px no-repeat;
    }

    .faqs-area .ewd-ufaq-faq-body {
        padding: 0 0 22px;
        font-size: 16px;
        line-height: 1.7;
    }
}


/* ---------------------------------------------------------------------------
 * Home "How we work" (How We Work design, 3 Nov 2026):
 * template-parts/how-we-work.php. Desktop: five steps in one card, joined by
 * a line through the icons. Mobile (up to 767px): a numbered stepper, no
 * icons. The step number and timing chip are 14px (site minimum; the design
 * has 13px). Section spacing: the site's section space (40 / 24).
 * ------------------------------------------------------------------------ */

/* The theme hid this section on phones; the stepper shows every step. */
.work-tab-area.cx-work {
    display: block;
}

.cx-work-head {
    text-align: center;
}

.cx-work-head h2 {
    margin: 0;
}

.cx-work .cx-work-intro {
    max-width: var(--cx-text-measure, 760px);
    margin: 12px auto 0;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.5;
    color: var(--cx-text-muted);
}

.cx-work-card {
    position: relative;
    margin-top: 40px;
    padding: 40px 32px 36px;
    border-radius: var(--cx-radius-card);
    background: var(--cx-surface);
    box-shadow: var(--cx-shadow);
}

/* The line through the icon centres, from the first column to the last */
.cx-work-card::before {
    content: "";
    position: absolute;
    top: 64px; /* card padding 40 + half the 48px icon */
    left: calc(32px + (100% - 64px - 4 * 24px) / 10);
    right: calc(32px + (100% - 64px - 4 * 24px) / 10);
    height: 2px;
    background: var(--cx-primary);
}

.cx-work-steps {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 24px;
    position: relative;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cx-work-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.cx-work-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border: 2px solid var(--cx-surface);
    border-radius: 12px;
    background: var(--cx-tint);
    box-shadow: 0 0 0 6px var(--cx-surface); /* the line stops at each icon */
    color: var(--cx-primary);
}

.cx-work-num {
    margin-top: 20px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--cx-primary);
    font-variant-numeric: lining-nums;
}

.cx-work-body,
.cx-work-heading {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.cx-work .cx-work-title {
    margin: 6px 0 0;
    font-size: var(--cx-h4);
    font-weight: 700;
    line-height: 1.35;
    color: var(--cx-text);
}

.cx-work-time {
    display: inline-flex;
    align-items: center;
    height: 26px;
    margin-top: 8px;
    padding: 0 12px;
    border-radius: 30px;
    background: var(--cx-tint);
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    color: var(--cx-primary);
    font-variant-numeric: lining-nums;
}

.cx-work .cx-work-text {
    max-width: 220px;
    margin: 10px 0 0;
    font-size: var(--cx-body);
    font-weight: 500;
    line-height: 1.5;
    color: var(--cx-text-muted);
}

/* Tablet: five columns get too narrow; the stepper reads better below 992. */
@media (max-width: 991.98px) {
    .cx-work-card {
        padding: 24px 20px 8px;
    }

    .cx-work-card::before {
        display: none;
    }

    .cx-work-steps {
        display: block;
    }

    .cx-work-step {
        display: grid;
        grid-template-columns: 36px minmax(0, 1fr);
        column-gap: 16px;
        position: relative;
        text-align: left;
    }

    /* The line down to the next step, 4px clear of the circles */
    .cx-work-step:not(:last-child)::after {
        content: "";
        position: absolute;
        left: 17px;
        top: 40px;
        bottom: 4px;
        width: 2px;
        background: var(--cx-primary);
    }

    .cx-work-icon,
    .cx-work-num-word {
        display: none;
    }

    .cx-work-num {
        grid-column: 1;
        align-self: start;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        margin: 0;
        border-radius: 50%;
        background: var(--cx-primary);
        font-size: 15px;
        letter-spacing: 0;
        color: var(--cx-on-primary);
    }

    .cx-work-body {
        grid-column: 2;
        align-items: stretch;
        padding: 6px 0 22px;
    }

    .cx-work-heading {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px 10px;
    }

    .cx-work .cx-work-title {
        margin: 0;
        font-size: 17px;
    }

    .cx-work-time {
        height: 24px;
        margin: 0;
        padding: 0 10px;
    }

    .cx-work .cx-work-text {
        max-width: none;
        margin-top: 6px;
        font-size: 15px;
    }
}

@media (max-width: 767.98px) {
    .cx-work .cx-work-intro {
        margin-top: 8px;
        font-size: 16px;
    }

    .cx-work-card {
        margin-top: 24px;
    }
}


/* ---------------------------------------------------------------------------
 * Service pages "Process" (3 Nov 2026): the "How we work" layout above, via
 * template-parts/process-steps.php. The page's own step icons sit in the icon
 * tiles. Up to 6 steps in one row, more in two centred rows, so the line runs
 * from each icon to the next instead of across the card. Below 992: the same
 * stepper as Home.
 * ------------------------------------------------------------------------ */

.cx-process .cx-work-card::before {
    display: none;
}

.cx-work-icon img {
    display: block;
    width: 26px;
    height: 26px;
    object-fit: contain;
}

.cx-process .cx-work-text p {
    margin: 0;
    font: inherit;
    color: inherit;
}

.cx-process .cx-work-text p + p {
    margin-top: 8px;
}

.cx-process-note {
    margin-top: 24px;
    text-align: center;
    font-size: var(--cx-body);
    font-weight: 600;
    line-height: 1.5;
    color: var(--cx-text);
}

@media (min-width: 992px) {
    .cx-process .cx-work-steps {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 40px 24px;
    }

    .cx-process .cx-work-step {
        position: relative;
        flex: 0 0 calc((100% - (var(--cx-cols, 5) - 1) * 24px) / var(--cx-cols, 5));
    }

    /* To the next icon in the row, through the icon centres */
    .cx-process .cx-work-step:not(:last-child):not(.cx-row-end)::before {
        content: "";
        position: absolute;
        top: 24px;
        left: 50%;
        width: calc(100% + 24px);
        height: 2px;
        background: var(--cx-primary);
    }

    .cx-process .cx-work-icon {
        position: relative;
        z-index: 1;
    }
}

/* ---------------------------------------------------------------------------
 * Service page card icons (4 Nov 2026): line icons in a tinted tile, from
 * inc/card-icons.php (same style as the Home "How we work" icons).
 * ------------------------------------------------------------------------ */

.default-tab .icon .cx-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: var(--cx-tint);
    color: var(--cx-primary);
    vertical-align: top;
}

.default-tab .icon .cx-card-icon svg {
    display: block;
    width: 26px;
    height: 26px;
}

@media (max-width: 767.98px) {
    .default-tab .icon .cx-card-icon {
        width: 44px;
        height: 44px;
        border-radius: 12px;
    }

    .default-tab .icon .cx-card-icon svg {
        width: 22px;
        height: 22px;
    }
}

/* Small square tiles (e.g. "What every app includes", industries): top
   aligned, so the icons line up whether the title takes one line or two, and
   as tall as their content (no fixed 190px), tiles in a row equal height. */
.service-tab-area:not(.conditional-1) .default-tab.small.new:has(.cx-card-icon) {
    justify-content: flex-start;
    min-height: 0;
    height: 100%;
    padding-top: 28px;
    padding-bottom: 24px;
}

.service-tab-area:not(.conditional-1) .default-tab.small.new:has(.cx-card-icon) .info :is(h3, h4):last-child {
    margin-bottom: 0;
}


/* ---------------------------------------------------------------------------
 * Portfolio listing v2 (4 Nov 2026): template/portfolio.php and
 * template-parts/portfolio-card.php. Chips left aligned with counts, cards
 * 2 per row (1 on mobile): 4:3 image, name (1 line), tagline (2 lines),
 * excerpt (4 lines), Services and Tech stack pinned to the bottom. The hero
 * is unchanged.
 * ------------------------------------------------------------------------ */

.cx-visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

body > .content-area.portfolio-page {
    border-top: 1px solid #eeeeee;
}

.cx-portfolio-filters {
    justify-content: flex-start;
    gap: 12px;
    margin-bottom: 32px;
}

.cx-portfolio-filter {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.cx-portfolio-count {
    font-size: 14px;
    font-weight: 600;
    opacity: 0.7;
    font-variant-numeric: lining-nums;
}

.cx-portfolio .portfolio-div {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    padding: 0;
}

.cx-pf-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    border-radius: var(--cx-radius-card);
    background: var(--cx-surface);
    box-shadow: var(--cx-shadow);
    color: var(--cx-text);
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.cx-pf-card:hover,
.cx-pf-card:focus-visible {
    transform: translateY(-4px);
    box-shadow: 0 10px 28px rgba(40, 77, 145, 0.16);
    color: var(--cx-text);
}

/* 4:3; the whole image shows on white (no cropping), until each project
   has its 4:3 export. */
.cx-pf-media {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: var(--cx-radius-card) var(--cx-radius-card) 0 0;
    background: var(--cx-surface);
}

.cx-pf-media img {
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: contain;
    border-radius: 0;
}

.cx-pf-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 28px 28px 30px;
}

.cx-portfolio .cx-pf-name {
    margin: 0;
    overflow: hidden;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.3;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--cx-text);
}

.cx-portfolio .cx-pf-tagline,
.cx-portfolio .cx-pf-desc {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    font-weight: 500;
    color: var(--cx-text-muted);
    text-wrap: pretty;
}

.cx-portfolio .cx-pf-tagline {
    margin: 4px 0 0;
    -webkit-line-clamp: 2;
    font-size: 15px;
    line-height: 1.4;
}

.cx-portfolio .cx-pf-desc {
    max-width: none;
    margin: 14px 0 0;
    -webkit-line-clamp: 4;
    font-size: var(--cx-body);
    line-height: 1.6;
}

/* Pinned to the bottom, so the rows line up across a row of cards. */
.cx-pf-meta {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-top: auto;
    padding-top: 24px;
}

.cx-pf-meta::before {
    content: "";
    display: block;
    margin-bottom: 4px;
    border-top: 1px solid #eeeeee;
}

.cx-pf-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cx-pf-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--cx-text-muted);
}

.cx-portfolio .cx-pf-items {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 24px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cx-portfolio .cx-pf-item {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 0;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.3;
    white-space: nowrap;
    color: var(--cx-text);
}

.cx-portfolio .cx-pf-item::before {
    display: none; /* no list bullet */
}

.cx-pf-service-icon,
.cx-pf-tech-logo {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    border-radius: var(--cx-radius-control);
}

.cx-pf-service-icon {
    width: 40px;
    height: 40px;
    background: var(--cx-tint);
    color: var(--cx-primary);
}

.cx-pf-tech-logo {
    width: 36px;
    height: 36px;
    border: 1px solid #eeeeee;
    background: var(--cx-surface);
}

.cx-portfolio .cx-pf-tech-logo img {
    display: block;
    width: 22px !important;
    height: 22px !important;
    max-width: none;
    object-fit: contain;
}

.cx-portfolio-more {
    margin-top: 40px;
}

.cx-portfolio-more .loadMoreBtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 52px;
    padding: 0 32px;
    border: 2px solid var(--cx-primary);
    border-radius: var(--cx-radius-control);
    background: var(--cx-surface);
    color: var(--cx-primary);
    font-size: var(--cx-body);
    font-weight: 600;
}

.cx-portfolio-more .loadMoreBtn:hover,
.cx-portfolio-more .loadMoreBtn:focus-visible {
    background: var(--cx-tint);
    color: var(--cx-primary);
}

@media (max-width: 1199.98px) {
    .cx-portfolio .portfolio-div {
        gap: 20px;
    }
}

@media (max-width: 767.98px) {
    /* Chips scroll sideways in one row; no counts. */
    .cx-portfolio-filters {
        flex-wrap: nowrap;
        gap: 8px;
        /* Bleed to the screen edges: the page's side padding (16px). A fixed
           20px went 4px past the edge, so the whole page scrolled sideways. */
        --cx-bleed: calc(var(--bs-gutter-x, 2rem) * 0.5);
        margin: 0 calc(-1 * var(--cx-bleed)) 24px;
        padding: 0 var(--cx-bleed);
        overflow-x: auto;
        scrollbar-width: none;
    }

    .cx-portfolio-filter {
        flex: none;
        padding: 0 18px;
        white-space: nowrap;
    }

    .cx-portfolio-count {
        display: none;
    }

    .cx-portfolio .portfolio-div {
        grid-template-columns: minmax(0, 1fr);
    }

    .cx-pf-body {
        padding: 20px 20px 22px;
    }

    .cx-portfolio .cx-pf-name {
        font-size: 18px;
    }

    .cx-portfolio .cx-pf-desc {
        margin-top: 12px;
        line-height: 1.55;
    }

    .cx-pf-meta {
        gap: 16px;
        padding-top: 18px;
    }

    .cx-portfolio .cx-pf-items {
        gap: 10px 18px;
    }

    .cx-portfolio .cx-pf-item {
        gap: 8px;
    }

    .cx-pf-tech-logo {
        width: 32px;
        height: 32px;
        border-radius: 8px;
    }

    .cx-portfolio .cx-pf-tech-logo img {
        width: 20px !important;
        height: 20px !important;
    }

    .cx-portfolio-more {
        margin-top: 28px;
    }

    .cx-portfolio-more .loadMoreBtn {
        width: 100%;
        height: 48px;
    }
}


/* ---------------------------------------------------------------------------
 * "What clients say about us" slider v2 (4 Nov 2026):
 * template-parts/testimonials-slider.php. Quote card beside the media
 * (video thumbnail, or a project panel with a screenshot when there is no
 * video). The media has the video thumbnails' shape (636 x 399), so they
 * show whole, and sets the slide height; the quote card matches it and
 * scrolls inside, so every slide is the same height. Below
 * 992 the media sits on top. The design's 13px pill and 12px label are 14px
 * (site minimum), and its #8c8c8c role is the site's muted #555.
 * ------------------------------------------------------------------------ */

.cx-testi .testimonials-had {
    margin-bottom: 40px;
}

.cx-testi-slider .cx-testi-slide,
.cx-testi-slider .cx-testi-slide.slick-slide {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    padding: 0 1px; /* the next slide's edge never shows at half-pixel offsets */
}

/* Before the slider starts (or without JavaScript): the first one only. */
.cx-testi-slider:not(.slick-initialized) .cx-testi-slide + .cx-testi-slide {
    display: none;
}

.cx-testi-quote {
    display: flex;
    flex-direction: column;
    min-height: 0;
    contain: size; /* its text never makes the slide taller than the media */
    padding: 36px 36px 32px;
    border-radius: var(--cx-radius-card);
    background: var(--cx-tint);
}

.cx-testi .cx-testi-name {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--cx-text);
}

.cx-testi .cx-testi-role {
    margin: 4px 0 0;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--cx-text-muted);
}

.cx-testi-text {
    flex: 1;
    min-height: 0;
    margin-top: 18px;
    overflow: hidden;
}

/* "Show more": the full quote scrolls inside the card. */
.cx-testi-quote.is-open .cx-testi-text {
    overflow-y: auto;
}

/* Closed: whole lines only (the count is set by js/testimonials-slider.js). */
.cx-testi .cx-testi-q.is-clamped {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cx-testi .cx-testi-text p {
    max-width: none;
    margin: 0;
    font-size: var(--cx-body);
    font-weight: 500;
    line-height: 1.85;
    color: var(--cx-text);
    text-wrap: pretty;
}

.cx-testi-more {
    flex: none;
    align-self: flex-start;
    margin-top: 6px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--cx-primary);
    font-family: inherit;
    font-size: var(--cx-body);
    font-weight: 600;
    line-height: 1.6;
    cursor: pointer;
}

.cx-testi-more:hover {
    text-decoration: underline;
}

.cx-testi-project {
    display: inline-flex;
    flex: none;
    align-self: flex-start;
    align-items: center;
    height: 32px;
    margin-top: 18px;
    padding: 0 14px;
    border: 1px solid #dbdbdb;
    border-radius: 30px;
    background: var(--cx-surface);
    color: var(--cx-primary);
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
}

.cx-testi-project:hover,
.cx-testi-project:focus-visible {
    border-color: var(--cx-primary);
    color: var(--cx-primary);
}

.cx-testi-media {
    position: relative;
    min-height: 0;
    aspect-ratio: 636 / 399;
    overflow: hidden;
    border-radius: var(--cx-radius-card);
}

/* Video: the thumbnail fills the frame and opens the video popup. */
.cx-testi-video {
    background: #1f2b40;
}

.cx-testi-video p,
.cx-testi-video a {
    display: block;
    height: 100%;
    margin: 0;
}

.cx-testi-video img {
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: contain;
    border-radius: 0;
}

/* No video: the project panel. */
.cx-testi-panel {
    background: var(--cx-primary);
}

.cx-testi-panel-text {
    position: absolute;
    left: 36px;
    top: 36px;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 220px;
}

.cx-testi-panel-type {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--cx-on-primary);
    opacity: 0.85;
}

.cx-testi-panel-name {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--cx-on-primary);
}

.cx-testi-panel-link {
    align-self: flex-start;
    margin-top: 6px;
    padding-bottom: 2px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
    color: var(--cx-on-primary);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
}

.cx-testi-panel-link:hover,
.cx-testi-panel-link:focus-visible {
    border-bottom-color: var(--cx-on-primary);
    color: var(--cx-on-primary);
}

.cx-testi-frame {
    position: absolute;
    display: flex;
    flex-direction: column;
    box-shadow: 0 24px 50px rgba(0, 0, 0, 0.35);
}

.cx-testi-frame-screen {
    position: relative;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    background: var(--cx-surface);
}

.cx-testi-frame-screen img {
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover;
    object-position: top;
    border-radius: 0;
}

/* Phone: right of the text, running off the bottom. */
.is-phone .cx-testi-frame {
    right: 64px;
    top: 36px;
    width: 196px;
    height: 404px;
    padding: 9px;
    border-radius: 34px;
    background: #11182a;
}

.is-phone .cx-testi-frame-screen {
    border-radius: 26px;
}

/* Browser: under the text, running off the right and bottom. */
.is-browser .cx-testi-frame {
    left: 36px;
    top: 180px;
    width: 600px;
    height: 340px;
    overflow: hidden;
    border-radius: 12px;
    background: var(--cx-surface);
}

.cx-testi-frame-bar {
    display: flex;
    flex: none;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 14px;
    border-bottom: 1px solid #dbdbdb;
    background: #f6f6f6;
}

.cx-testi-frame-bar i {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #dbdbdb;
}

/* No screenshot yet: the project image on the right. */
.cx-testi-panel-image {
    position: absolute;
    inset: 36px 24px 24px 45%;
}

.cx-testi-panel-image img {
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: contain;
}

/* Controls: arrows, dots and counter, centred under the slide. */
.cx-testi-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 28px;
    margin-top: 32px;
}

.cx-testi-controls[hidden] {
    display: none;
}

.cx-testi-prev,
.cx-testi-next {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;  /* same as every slider's arrows (was 50) */
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--cx-primary);
    color: var(--cx-on-primary);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

.cx-testi-prev:hover,
.cx-testi-next:hover {
    background: #2a4d8f;
}

.cx-testi-dots {
    display: flex;
    align-items: center;
    gap: 14px;
}

.cx-testi-dot {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

.cx-testi-dot span {
    display: block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #e8ecf3;
}

.cx-testi-dot.is-active span {
    background: var(--cx-primary);
}

.cx-testi-counter {
    margin-left: -14px; /* 14px after the dots, as in the design */
    font-size: 15px;
    font-weight: 600;
    color: var(--cx-text);
    font-variant-numeric: lining-nums tabular-nums;
}

/* Small laptops: the media shape alone would leave the quote only a few
   lines, so the slide keeps 380px; the thumbnail shows whole, centred on
   the dark frame. */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .cx-testi-slider .cx-testi-slide,
    .cx-testi-slider .cx-testi-slide.slick-slide {
        height: 380px !important; /* style.css sets slides to auto !important */
    }

    .cx-testi-media {
        aspect-ratio: auto;
    }
}

@media (max-width: 991.98px) {
    .cx-testi-slider .cx-testi-slide,
    .cx-testi-slider .cx-testi-slide.slick-slide {
        display: flex;
        flex-direction: column;
        gap: 12px;
        height: 820px !important; /* style.css sets slides to auto !important */
    }

    .cx-testi-media {
        flex: none;
        order: -1;
    }

    .cx-testi-quote {
        flex: 1;
        contain: none;
    }
}

@media (max-width: 767.98px) {
    .cx-testi .testimonials-had {
        margin-bottom: 28px;
    }

    .cx-testi-slider .cx-testi-slide,
    .cx-testi-slider .cx-testi-slide.slick-slide {
        height: 640px !important;
    }

    .cx-testi-media {
        border-radius: 16px;
    }

    .cx-testi-quote {
        padding: 26px 22px 22px;
        border-radius: 16px;
    }

    .cx-testi .cx-testi-name {
        font-size: 20px;
    }

    .cx-testi .cx-testi-role {
        font-size: 14px;
    }

    .cx-testi-text {
        margin-top: 14px;
    }

    .cx-testi .cx-testi-text p {
        line-height: 1.75;
    }

    .cx-testi-project {
        margin-top: 14px;
    }

    .cx-testi-panel-text {
        left: 20px;
        top: 20px;
        gap: 5px;
        max-width: 160px;
    }

    .cx-testi-panel-type {
        letter-spacing: 0.08em;
    }

    .cx-testi-panel-name {
        font-size: 18px;
    }

    .cx-testi-panel-link {
        padding-top: 8px;
        font-size: 14px;
    }

    .is-phone .cx-testi-frame {
        right: 28px;
        top: 22px;
        width: 118px;
        height: 240px;
        padding: 6px;
        border-radius: 22px;
    }

    .is-phone .cx-testi-frame-screen {
        border-radius: 17px;
    }

    .is-browser .cx-testi-frame {
        left: 176px;
        top: 30px;
        width: 260px;
        height: 200px;
        border-radius: 8px;
        box-shadow: none;
    }

    .cx-testi-frame-bar {
        gap: 4px;
        height: 18px;
        padding: 0 8px;
    }

    .cx-testi-frame-bar i {
        width: 6px;
        height: 6px;
    }

    .cx-testi-panel-image {
        inset: 20px 16px 16px 50%;
    }

    /* Swipe on phones; dots (44px tap targets) and counter only. */
    .cx-testi-controls {
        flex-wrap: wrap;
        gap: 0 12px;
        margin-top: 20px;
    }

    .cx-testi-prev,
    .cx-testi-next {
        display: none;
    }

    .cx-testi-dots {
        flex-wrap: wrap;
        justify-content: center;
        gap: 0 2px;
    }

    .cx-testi-dot {
        width: 28px;
        height: 44px;
    }

    .cx-testi-dot span {
        width: 12px;
        height: 12px;
    }

    .cx-testi-counter {
        margin-left: 0;
        font-size: 14px;
    }
}

/* Home: the counter band (numbers and review ratings) between the
   testimonials and the contact form, with the band spacing the service
   pages give it. */
body > .counter-area {
    padding-top: var(--cx-band-space);
    padding-bottom: var(--cx-band-space);
}

/* About "Who we are" and "What we aim for": 16px between paragraphs, none
   after the last (the theme set 0 under every "Who we are" paragraph). */
.our-about-text p + p {
    margin-top: 16px;
}

.our-about-text p:last-child,
.our-aim-text p:last-child {
    margin-bottom: 0;
}

/* UI/UX "We Can Design": four tiles across (col-3) are 82px wide on a
   phone, too narrow for "Progressive", which pushed the page 11px sideways.
   Two across on phones. */
@media (max-width: 575.98px) {
    .service-tab-area > .row > .col-lg-3.col-3 {
        flex: 0 0 auto;
        width: 50%;
    }
}

/* Blog post tables: the editor writes a fixed width and height (e.g.
   width="725"), wider than a phone. On phones they fit the column and the
   cells wrap; desktop keeps the editor's size. */
@media (max-width: 767.98px) {
    .blog-detail table {
        width: 100% !important;
        height: auto !important;
    }
}

/* Service-page industry tiles (three across, col-4): below 360px "Communication"
   or "Transportation" is wider than a tile. Two across there. */
@media (max-width: 359.98px) {
    .service-tab-area > .row > .col-lg-2.col-4 {
        flex: 0 0 auto;
        width: 50%;
    }
}

/* Newsletter form (Blog page): the theme sets the email box to 190px at
   375px and below, which with "Subscribe" is wider than a 320px screen.
   There it takes the space left beside the button. Wider screens unchanged. */
@media (max-width: 375.98px) {
    .blog-newsletter .tnp-widget-minimal form.tnp-form input.tnp-email {
        flex: 1 1 0;
        min-width: 0;
        width: auto;
    }

    .blog-newsletter .tnp-widget-minimal form.tnp-form input.tnp-submit {
        flex: none;
    }
}

/* Portfolio list opened at /portfolios/page/N/: "Projects 13–18 of 123. See
   all from the start". */
.cx-portfolio-range {
    margin: 0 0 24px;
    font-size: 16px;
    color: #555;
}

.cx-portfolio-range a {
    font-weight: 600;
}


/* ===========================================================================
 * SLIDER ARROWS, the same on every slider (6 Nov 2026): 44px primary circle,
 * white 20px arrow, darker on hover, a focus ring for keyboard users, grey
 * when there is nowhere to go. Covers the products slider, the testimonial
 * slider and the slick sliders (reviews on Testimonials and Get in touch,
 * older service-page carousels). Sizes and positions are set above.
 * ======================================================================== */

:root {
    --cx-primary-hover: #1d3a6f;
    --cx-arrow-disabled: #dbdbdb;
}

.cx-products-prev,
.cx-products-next,
.cx-testi-prev,
.cx-testi-next,
.portfolio-slider .slick-arrow,
.testimonials-area .slick-arrow,
.testimonial-carousel .slick-arrow {
    transition: background-color .2s ease;
}

.cx-products-prev:hover:not(:disabled),
.cx-products-next:hover:not(:disabled),
.cx-testi-prev:hover,
.cx-testi-next:hover,
.portfolio-slider .slick-arrow:hover:not(.slick-disabled),
.testimonials-area .slick-arrow:hover:not(.slick-disabled),
.testimonial-carousel .slick-arrow:hover:not(.slick-disabled) {
    background-color: var(--cx-primary-hover) !important; /* slick rules use !important */
}

.cx-products-prev:focus-visible,
.cx-products-next:focus-visible,
.cx-testi-prev:focus-visible,
.cx-testi-next:focus-visible,
.portfolio-slider .slick-arrow:focus-visible,
.testimonials-area .slick-arrow:focus-visible,
.testimonial-carousel .slick-arrow:focus-visible {
    outline: 2px solid var(--cx-primary);
    outline-offset: 3px;
}

.cx-products-prev:disabled,
.cx-products-next:disabled,
.portfolio-slider .slick-arrow.slick-disabled,
.testimonials-area .slick-arrow.slick-disabled,
.testimonial-carousel .slick-arrow.slick-disabled {
    background-color: var(--cx-arrow-disabled) !important;
    cursor: default;
}

/* The arrow itself: one SVG arrow, drawn in the middle of the circle, for
   every slider. The "←"/"→" text characters sat a few pixels off centre
   (where depends on the font), so the text is hidden and the arrow is a mask
   in white (6 Nov 2026). */
.cx-products-prev,
.cx-products-next,
.cx-testi-prev,
.cx-testi-next {
    font-size: 0 !important;
}

.cx-products-prev::before,
.cx-products-next::before,
.cx-testi-prev::before,
.cx-testi-next::before,
.portfolio-slider .slick-arrow::before,
.testimonials-area .slick-arrow::before,
.testimonial-carousel .slick-arrow::before {
    content: "" !important;
    display: block;
    width: 20px;
    height: 20px;
    margin: 0 !important;
    background-color: var(--cx-on-primary);
    opacity: 1 !important;
    -webkit-mask: var(--cx-arrow-next) center / contain no-repeat;
    mask: var(--cx-arrow-next) center / contain no-repeat;
}

.cx-products-prev::before,
.cx-testi-prev::before,
.portfolio-slider .slick-prev::before,
.testimonials-area .slick-prev::before,
.testimonial-carousel .slick-prev::before {
    -webkit-mask-image: var(--cx-arrow-prev);
    mask-image: var(--cx-arrow-prev);
}

:root {
    --cx-arrow-next: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h16M14 6l6 6-6 6'/%3E%3C/svg%3E");
    --cx-arrow-prev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12H4M10 6l-6 6 6 6'/%3E%3C/svg%3E");
}


/* ===========================================================================
 * Home client logos: continuous scroll (6 Nov 2026), js/logo-marquee.js.
 * One steady speed, right to left, full screen width, paused while the
 * pointer is over it.
 * Every logo gets the same slot (234 x 80, 160 x 56 on phones) with 60px
 * (40px) between, so the spacing stays even while the images load. Before
 * the script runs the logos already sit in one row, so nothing jumps.
 * ======================================================================== */

/* Tighter than the other bands (64/40): the section space, 40px (24px on
   phones), above and below. */
body > .clients-area:has(> .container > .clients-slider.autoplay) {
    padding-top: var(--cx-section-space);
    padding-bottom: var(--cx-section-space);
}

.clients-slider.autoplay {
    display: flex;
    overflow: hidden;
}

.clients-slider.autoplay .clients-item,
.cx-marquee .clients-item {
    flex: 0 0 auto;
    width: 234px;
    margin: 0 30px;
}

.cx-marquee-track,
.cx-marquee-set {
    display: flex;
    flex: none;
}

.cx-marquee-track {
    animation: cx-marquee var(--cx-marquee-duration, 30s) linear infinite;
    will-change: transform;
}

.cx-marquee:hover .cx-marquee-track {
    animation-play-state: paused;
}

/* Full screen width: the row runs from one edge of the window to the other
   (out of the 1320px container), with no fade. The section clips the
   scrollbar's width (.clients-area has overflow: hidden). */
.clients-slider.autoplay {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

@keyframes cx-marquee {
    to {
        transform: translateX(-50%);
    }
}

@media (max-width: 767.98px) {
    .clients-slider.autoplay .clients-item,
    .cx-marquee .clients-item {
        width: 160px;
        margin: 0 20px;
    }
}

/* Reduced motion: the logos stand still, centred, wrapping if needed. */
@media (prefers-reduced-motion: reduce) {
    .cx-marquee-track {
        animation: none;
        flex: auto;
    }

    .cx-marquee-set {
        flex: auto;
        flex-wrap: wrap;
        justify-content: center;
        row-gap: 24px;
    }

    .cx-marquee [data-cx-copy] {
        display: none;
    }
}


/* ===========================================================================
 * Home hero proof points as pills (6 Nov 2026): "250+ products shipped ·
 * 150+ clients · 15+ countries · Since 2018" (the banner's Content field,
 * split at "·" in home.php). Tinted pills with a thin primary border; the
 * figure in each is bold primary. They wrap on narrow screens.
 * ======================================================================== */

.cx-hero-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 24px;
    padding: 0;
    list-style: none;
}

.cx-hero-pills li {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 40px;
    padding: 8px 16px;
    border: 1px solid rgba(40, 77, 145, .35);
    border-radius: 999px;
    background: var(--cx-tint);
    box-shadow: 0 2px 6px rgba(40, 77, 145, .08);
    color: var(--cx-text);
    font-size: var(--cx-body);
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
}

.cx-hero-pills li strong {
    color: var(--cx-primary);
    font-weight: 800;
}

@media (max-width: 767.98px) {
    .cx-hero-pills {
        gap: 6px;
        margin-bottom: 20px;
    }

    .cx-hero-pills li {
        min-height: 34px;
        padding: 6px 12px;
        font-size: var(--cx-small);
    }
}


/* Get in touch map pins (6 Nov 2026): country, then "Phone:", "Email:",
   "Address:" lines, the same in both pins (scripts/qa6nov-21-map-pins.php). */
.map-area .location .map-tooltip .cx-office-line {
    margin: 0 0 8px;
    font-size: var(--cx-body);
    line-height: 1.5;
    color: var(--cx-text-muted);
}

.map-area .location .map-tooltip .cx-office-line:last-child {
    margin-bottom: 0;
}

.map-area .location .map-tooltip .cx-office-line strong {
    color: var(--cx-text);
    font-weight: 700;
}

.map-area .location .map-tooltip .cx-office-line a {
    margin: 0;
    line-height: inherit;
}


/* Testimonial project panel, image only (7 Nov 2026): no browser window.
   The panel is a column: type, name and "View project", then 20px below
   them the image, which fills the rest and runs off the right and bottom
   edges, showing its top-left part. The gap stays 20px whether the name
   takes one line or two (the browser window sat at a fixed 180px). */
.cx-testi-panel {
    display: flex;
    flex-direction: column;
    padding: 36px 0 0 36px;
}

.cx-testi-panel .cx-testi-panel-text {
    position: static;
    flex: none;
    max-width: 260px;
}

.cx-testi-panel-shot {
    position: relative;
    flex: 1;
    min-height: 0;
    margin-top: 20px;
    overflow: hidden;
    border-top-left-radius: 12px;
    box-shadow: 0 24px 50px rgba(0, 0, 0, 0.35);
}

.cx-testi-panel-shot img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover;
    object-position: left top;
    border-radius: 0;
}

/* Phones (panel about 343 x 215): text on the left, the image on the
   right half from 20px down, as in the design's mobile frame; stacked, the
   text left the image under 100px. */
@media (max-width: 767.98px) {
    .cx-testi-panel {
        display: block;
        padding: 20px;
    }

    .cx-testi-panel .cx-testi-panel-text {
        max-width: 44%;
    }

    .cx-testi-panel-shot {
        position: absolute;
        top: 20px;
        right: 0;
        bottom: 0;
        left: 50%;
        margin-top: 0;
        border-top-left-radius: 8px;
        box-shadow: none;
    }
}

/* Testimonials page (the panel in a page column, not the slider): it keeps
   the design's 636:399 shape at every width (the 992-1199px slider rule
   above sets the media to auto, which left this panel only text-high), and
   in the narrow two-column layout (768-991px, about 336px wide) it uses the
   phone layout: text left, image right. */
[class*="col-"] > .cx-testi-panel {
    aspect-ratio: 636 / 399;
}

@media (min-width: 768px) and (max-width: 991.98px) {
    [class*="col-"] > .cx-testi-panel {
        display: block;
        padding: 20px;
    }

    [class*="col-"] > .cx-testi-panel .cx-testi-panel-text {
        max-width: 44%;
        gap: 5px;
    }

    [class*="col-"] > .cx-testi-panel .cx-testi-panel-name {
        font-size: 18px;
    }

    [class*="col-"] > .cx-testi-panel .cx-testi-panel-shot {
        position: absolute;
        top: 20px;
        right: 0;
        bottom: 0;
        left: 50%;
        margin-top: 0;
        border-top-left-radius: 8px;
        box-shadow: none;
    }
}