/*
 * Custom Software Template (pages/page-custom-software.php).
 *
 * Shared by every landing page on that template: custom software, ecommerce, CMS and AI
 * integrations. It is loaded only on that template, and its rules are scoped to
 * .custom-software-template as well, so nothing here reaches the agency page, which shares
 * the section markup. Enqueued in functions.php after
 * style-responsive.css, which keeps the cascade order these rules had when they were an inline
 * <style> block in the template.
 */

/* The hero carries width and height attributes so the browser reserves its space; the theme
   sets the width, so the height must follow it. */
.custom-software-template .d-home-hero .d-home-hero-right img {
    height: auto;
}

.circleContactButtonWrap {
    display: none !important;
}

.custom-software-template .cs-hero-heading {
    margin: 0;
    font-size: inherit;
    line-height: inherit;
    text-transform: none;
    letter-spacing: normal;
}

.custom-software-template .d-home-hero .d-home-hero-left p.cs-hero-lead {
    margin: 28px 0 0;
    max-width: 560px;
    font-family: 'museo';
    font-size: 20px;
    line-height: 1.5em;
    color: #eeeeee;
}

/* Links inside the Build or Buy cards: the agency sections never style links. */
.custom-software-template .d-section-desc a {
    color: #ffb81c;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* The agency stylesheet fixes Build or Buy at 1400px tall to fit its rows of icons,
   which this page does not have, so let it take its content's height. */
.custom-software-template .d-technical-delivery-inner {
    padding-bottom: 60px;
    margin-top: 30px;
}

.custom-software-template .d-technical-delivery-inner .d-section-content {
    height: auto;
}

/* On the agency page other sections sit between About and the form; here they meet. */
.custom-software-template #experience.d-about-us {
    padding-bottom: 60px;
}

.custom-software-template #contact.getin-touch-wrapper {
    margin-top: 0;
}

/* Contact form: full-size fields on an even grid. */
.custom-software-template #contact .getin-touch-ctnr {
    max-width: 760px;
    padding: 0 20px;
    box-sizing: border-box;
}

.custom-software-template #contact .getin-touch-ctnr h2 {
    padding-left: 0;
    margin-bottom: 28px;
}

.custom-software-template #contact .getin-form-ctn-home {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    width: 100%;
}

.custom-software-template #contact .getin-form-ctn-home > input[type=hidden] {
    display: none;
}

.custom-software-template #contact .getin-form-ctn-home .form-input {
    display: block;
    width: auto;
    margin: 0;
    padding: 0;
}

.custom-software-template #contact .getin-form-ctn-home .d-full-base,
.custom-software-template #contact .getin-form-ctn-home .d-submit-button {
    grid-column: 1 / -1;
}

.custom-software-template #contact .getin-form-ctn-home input[type=text],
.custom-software-template #contact .getin-form-ctn-home input[type=email],
.custom-software-template #contact .getin-form-ctn-home input[type=phone],
.custom-software-template #contact .getin-form-ctn-home select,
.custom-software-template #contact .getin-form-ctn-home textarea {
    width: 100%;
    height: 50px;
    box-sizing: border-box;
    padding: 0 16px;
    font-family: 'museo';
    font-size: 16px;
    color: #253746;
    background-color: #ffffff;
    border: 0;
    border-radius: 8px;
}

.custom-software-template #contact .getin-form-ctn-home textarea {
    height: 160px;
    padding: 14px 16px;
    resize: vertical;
}

.custom-software-template #contact .getin-form-ctn-home ::placeholder {
    color: #6b7782;
    opacity: 1;
}

.custom-software-template #contact .getin-form-ctn-home .d-submit-button input[type=submit] {
    width: auto;
    height: 54px;
    padding: 0 44px;
    font-size: 16px;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
}

.custom-software-template .asp-service-item .d-light-content h3 {
    margin-bottom: 15px !important;
}

.custom-software-template .asp-service-item .d-light-content .d-light-desc {
    font-size: 15px !important;
}

.custom-software-template .d-technical-delivery-inner .d-section-content-inner .d-section-item .d-section-item-inner {
    box-shadow: 0px 8px 31px 5px rgba(0, 0, 0, 0.25);
}

.custom-software-template .d-technical-delivery-inner .d-section-content-inner .d-section-showing-items {
    padding-bottom: 40px;
}

.custom-software-template .section.d-what-agency-tell-us {
    padding-top: 30px;
}

.custom-software-template .four-stage-ctnr {
    padding-bottom: 60px;
}

.custom-software-template form.getin-form-ctn-home .d-submit-button input:hover {
    border: solid 1px #ffb81c !important;
}

@media (max-width: 1120px) {
    .custom-software-template .four-stage-ctnr {
        padding-top: 0;
    }
}

@media (max-width: 768px) {
    .custom-software-template #contact.getin-touch-wrapper {
        padding-bottom: 30px;
    }
}

/* reCAPTCHA is a fixed 304x78 iframe, so it can only be scaled down, not resized.
   --cb-rc is the scale; the negative margin gives back the 78px height it no longer fills. */
@media (max-width: 400px) {
    .custom-software-template #contact .g-recaptcha {
        --cb-rc: 0.9;
        transform: scale(var(--cb-rc));
        transform-origin: 0 0;
        margin-bottom: calc(78px * (var(--cb-rc) - 1));
    }
}

@media (max-width: 350px) {
    .custom-software-template #contact .g-recaptcha {
        --cb-rc: 0.8;
    }
}

@media (max-width: 320px) {
    .custom-software-template #contact .g-recaptcha {
        --cb-rc: 0.7;
    }
}

@media (max-width: 390px) {
    .custom-software-template #contact .getin-form-ctn-home {
        display: block;
    }

    .custom-software-template #contact .getin-form-ctn-home .form-input {
        margin-bottom: 15px;
    }
}

@media (max-width: 425px) {
    .custom-software-template section.d-what-agency-tell-us {
        padding-top: 120px;
    }
}

@media (max-width: 945px) {
    .custom-software-template .d-technical-delivery-inner {
        padding-bottom: 0;
    }

    .custom-software-template .d-technical-delivery-inner .d-section-content {
        padding-bottom: 60px;
    }
}

.custom-software-template .d-about-us .d-about-cta-base-inner .d-about-cta-item .d-about-cta-item-inner .d-about-cta-item-file {
    right: 31px;
}

.custom-software-template .d-about-us .d-about-cta-base-inner .d-about-cta-item.d-about-one .d-about-cta-item-inner .d-about-cta-item-file {
    right: 32px;
}



/* What we build: two columns of cards at 1040px and below. */
@media (max-width: 1040px) {
    .custom-software-template .d-digital-work .d-digital-work-items-inner {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 20px;
    }

    .custom-software-template .d-digital-work .d-digital-work-items-inner .d-digital-work-item {
        display: block;
        width: auto;
        margin: 0;
    }
}

@media (max-width: 945px) {
    .custom-software-template .d-home-hero .d-home-hero-left p.cs-hero-lead {
        margin: 30px auto 0;
    }
}

/* What drives the cost: when the pieces stack (1000px and below) their size follows the
   width, so let the grid's height follow its content instead of a fixed pixel height.
   overflow-x: clip hides the sideways spill without turning overflow-y into a scroll/clip. */
@media (max-width: 1000px) {
    .custom-software-template .d-what-agency-tell-us .agency-tell-grid {
        height: auto !important;
        overflow-x: clip;
        overflow-y: visible;
    }
}

/* Cards are fixed at 282px tall, so a single column on phones. */
@media (max-width: 520px) {
    .custom-software-template .d-digital-work .d-digital-work-items-inner {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767px) {
    .custom-software-template .d-home-hero .d-home-hero-left p.cs-hero-lead {
        margin: 20px auto 0;
        font-size: 17px;
    }

    .custom-software-template #contact .getin-form-ctn-home {
        grid-template-columns: 1fr;
    }

    .custom-software-template #contact .getin-form-ctn-home .d-submit-button input[type=submit] {
        width: 100%;
    }
}

/* What drives the cost: page-specific copy of the responsive rules for .agency-tell-grid.
   Traced from style-responsive.css; scoped so edits here only affect this page.
   Order matters: widest breakpoint first. */
@media (max-width: 1190px) {
    .custom-software-template .ag-gr-1 p, .custom-software-template .ag-gr-2 p,
    .custom-software-template .ag-gr-3 p, .custom-software-template .ag-gr-4 p {
        font-size: 17px;
    }
}

/* Stacked layout: each piece goes full width and the puzzle images overlap. */
@media (max-width: 1000px) {
    .custom-software-template .ag-gr-1, .custom-software-template .ag-gr-2,
    .custom-software-template .ag-gr-3, .custom-software-template .ag-gr-4 {
        width: 100%;
        display: block;
        left: initial;
        top: initial;
        right: initial;
        bottom: initial;
    }

    .custom-software-template .ag-gr-1 p, .custom-software-template .ag-gr-4 p {
        width: 55%;
        font-size: 20px;
        margin: 0;
    }

    .custom-software-template .ag-gr-2, .custom-software-template .ag-gr-3,
    .custom-software-template .ag-gr-4 {
        margin-top: -8.5%;
    }

    .custom-software-template .ag-gr-2 figure img, .custom-software-template .ag-gr-3 figure img {
        width: 140%;
        margin-left: -20%;
        margin-top: -13%;
        margin-bottom: -13%;
        max-width: initial;
    }

    .custom-software-template .ag-gr-2 p, .custom-software-template .ag-gr-3 p {
        width: 83%;
        font-size: 20px;
        margin: 0;
    }
}

@media (max-width: 768px) {
    .custom-software-template .d-what-agency-tell-us h2 {
        font-size: 40px;
        margin-bottom: 25px;
    }

    .custom-software-template .d-what-agency-tell-us p.d-sub-header {
        font-size: 18px;
        width: 100%;
        margin-bottom: 60px;
    }

    .custom-software-template .d-what-agency-tell-us .agency-tell-grid {
        padding: 0 0 100px;
    }
}

@media (max-width: 425px) {
    .custom-software-template .ag-gr-1 p, .custom-software-template .ag-gr-4 p {
        width: 52%;
        font-size: 20px;
    }

    .custom-software-template .ag-gr-2 p, .custom-software-template .ag-gr-3 p {
        font-size: 20px;
    }

    .custom-software-template .ag-gr-2 figure img, .custom-software-template .ag-gr-3 figure img {
        margin-top: -21%;
        margin-bottom: -21%;
    }

    .custom-software-template .ag-gr-2, .custom-software-template .ag-gr-3,
    .custom-software-template .ag-gr-4 {
        margin-top: -1%;
    }
}

@media (max-width: 320px) {
    .custom-software-template .ag-gr-2 figure img, .custom-software-template .ag-gr-3 figure img {
        margin-top: -19%;
        margin-bottom: -19%;
    }

    .custom-software-template .ag-gr-1 p, .custom-software-template .ag-gr-2 p,
    .custom-software-template .ag-gr-3 p, .custom-software-template .ag-gr-4 p {
        font-size: 20px;
    }

    .custom-software-template .ag-gr-2, .custom-software-template .ag-gr-3, .custom-software-template .ag-gr-4 {
        margin-top: -4%;
    }
}

/* AI tools bar (template-parts/content-ai-tools-bar.php), shown only where a page turns it on. */
.custom-software-template .cs-tools-bar {
    max-width: 1100px;
    margin: 0 auto;
    padding: 90px 16px 0;
    text-align: center;
}
.custom-software-template .cs-tools-bar h2 {
    font-family: 'museo-bolder';
    font-size: 40px;
    line-height: 1.1em;
    color: #ffb81c;
    margin: 0 0 16px;
}
.custom-software-template .cs-tools-bar .cs-tb-intro {
    font-family: 'museo';
    font-weight: 300;
    font-size: 20px;
    line-height: 1.5em;
    color: #eeeeee;
    max-width: 700px;
    margin: 0 auto 36px;
}
.custom-software-template .cs-tools-bar .cs-tb-label {
    font-family: 'museo';
    font-size: 14px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #ffb81c;
    margin: 0 0 14px;
}
.custom-software-template .cs-tools-bar ul {
    list-style: none;
    margin: 0 0 32px;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px 32px;
}
.custom-software-template .cs-tools-bar li {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-family: 'museo';
    font-size: 18px;
    color: #eeeeee;
    white-space: nowrap;
}
.custom-software-template .cs-tools-bar .cs-tb-icon {
    width: 30px;
    height: 30px;
    flex: none;
    color: #eeeeee;
}
@media (max-width: 767px) {
    .custom-software-template .cs-tools-bar {
        padding-top: 50px;
    }
    .custom-software-template .cs-tools-bar h2 {
        font-size: 30px;
    }
    .custom-software-template .cs-tools-bar .cs-tb-intro {
        font-size: 17px;
    }
    .custom-software-template .cs-tools-bar ul {
        gap: 12px 22px;
    }
    .custom-software-template .cs-tools-bar li {
        font-size: 16px;
    }
}

/* Tools bar layout. Wide screens: one row per list, which the 28px gap allows at 1440px.
   Narrower: smaller type so the longer list still fits one row at 1024px. Below 900px the
   names sit in aligned columns, so a list never ends on a single stranded name. */
.custom-software-template .cs-tools-bar ul {
    gap: 14px 28px;
}

@media (max-width: 1100px) {
    .custom-software-template .cs-tools-bar ul {
        gap: 12px 22px;
    }

    .custom-software-template .cs-tools-bar li {
        font-size: 16px;
    }
}

@media (max-width: 900px) {
    .custom-software-template .cs-tools-bar ul {
        display: grid;
        grid-template-columns: repeat(3, max-content);
        justify-content: center;
        gap: 14px 32px;
    }
}

@media (max-width: 520px) {
    .custom-software-template .cs-tools-bar ul {
        grid-template-columns: repeat(2, max-content);
        gap: 14px 28px;
    }
}

/* What We Build cards, front face: the agency page's 50px side padding leaves 182px for a
   24px title, so longer service names ran to four lines and were cut off at the bottom of the
   282px card. Less padding, same type size (CBW-124). */
.custom-software-template .d-digital-work .d-digital-work-items-inner .d-digital-work-item .d-digital-work-item-inner .d-dark-content {
    padding: 0 22px;
}

/* "The First Question" title: the agency page sets 80px on phones (70px under 345px), which
   suits "Delivery Gap" but pushed "Automation or an Agent?" and "Custom or Platform?" past the
   edge of the screen. On this template it scales with the screen instead: 12vw, between 36px
   and the agency page's 80px (CBW-124). */
@media screen and (max-width: 768px) {
    .custom-software-template .d-technical-delivery-inner .d-section-title .d-section-main-title {
        font-size: clamp(36px, 12vw, 80px);
    }
}

/* Links on the back of a What We Build card: the theme's default bright blue reads at about
   2:1 on the grey card, so they take the card's navy text colour with an underline, the way
   links in the comparison cards are marked. */
.custom-software-template .d-digital-work .d-light-desc a {
    color: #253746;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.custom-software-template .d-digital-work .d-light-desc a:hover,
.custom-software-template .d-digital-work .d-light-desc a:focus {
    text-decoration-thickness: 2px;
}