/* ========== CHANNEL SOFTECH — BROCHURE DESIGN PAGE ========== */
/* ========== 01. HERO BANNER ========== */
.brochure-showcase {
    --bs-hero-dark: #063568;
    --bs-hero-light: #5fc3ee;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: clamp(48px, 5.5vw, 80px) 0;
    background: radial-gradient(
            ellipse at 83% 18%,
            rgba(95, 195, 238, 0.75) 0%,
            rgba(50, 164, 235, 0.18) 37%,
            transparent 62%
        ),
        linear-gradient(112deg, #063568 0%, #07528e 38%, #0870af 70%, #148fc4 100%);
}

/* ---------- lower background light ---------- */
.brochure-showcase::before {
    content: "";
    position: absolute;
    right: -10%;
    bottom: -70%;
    z-index: -1;
    width: 110%;
    height: 130%;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(50, 164, 235, 0.32), transparent 68%);
    pointer-events: none;
}

.brochure-showcase > .container {
    position: relative;
}

/* ---------- content ---------- */
.brochure-showcase__content {
    position: relative;
    z-index: 2;
    padding: 20px 22px 20px 0;
}

.brochure-showcase__content .cs-title {
    max-width: 540px;
    margin: 0;
    color: #ffffff;
    text-align: left;
    text-wrap: balance;
}

/* ---------- preserve your shared heading font size ---------- */
.brochure-showcase__content .cs-accent {
    display: block;
    color: #a9eaff;
    background: none;
    -webkit-text-fill-color: currentColor;
}

.brochure-showcase__description {
    max-width: 465px;
    margin: 25px 0 31px;
    color: #e8f9ff;
    line-height: 1.85;
    text-align: left;
}

.brochure-showcase__content .cs-btn-group {
    justify-content: flex-start;
    margin: 0;
}

/* ---------- image composition ---------- */
.brochure-showcase__visual {
    position: relative;
    isolation: isolate;
    display: grid;
    place-items: center;
    width: 112%;
    margin-left: -1%;
}

/* ---------- subtle circular backdrop ---------- */
.brochure-showcase__halo {
    position: absolute;
    top: -4%;
    left: 16%;
    z-index: -1;
    width: 73%;
    aspect-ratio: 1;
    border: 1px solid rgba(203, 242, 255, 0.22);
    border-radius: 50%;
    background: radial-gradient(
        circle at 50% 35%,
        rgba(171, 234, 255, 0.2),
        rgba(95, 195, 238, 0.025) 69%,
        transparent 70%
    );
    pointer-events: none;
}

.brochure-showcase__halo::after {
    content: "";
    position: absolute;
    inset: 8%;
    border: 1px solid rgba(203, 242, 255, 0.16);
    border-radius: inherit;
}

/* ---------- full image — no cropping or extra platform ---------- */
.brochure-showcase__image {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}

/* ---------- small desktop ---------- */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .brochure-showcase__content {
        padding-right: 12px;
    }

    .brochure-showcase__description {
        margin-top: 21px;
        margin-bottom: 27px;
    }

    .brochure-showcase__visual {
        width: 108%;
        margin-left: 0;
    }
}

/* ---------- tablet ---------- */
@media (max-width: 991.98px) {
    .brochure-showcase {
        padding: 49px 0 30px;
        background: radial-gradient(ellipse at 65% 80%, rgba(95, 195, 238, 0.5), transparent 58%),
            linear-gradient(145deg, #063568, #0870af 72%, #148fc4);
    }

    .brochure-showcase__content {
        max-width: 680px;
        padding: 0;
    }

    .brochure-showcase__content .cs-title {
        max-width: 650px;
    }

    .brochure-showcase__description {
        max-width: 590px;
    }

    .brochure-showcase__visual {
        width: 100%;
        max-width: 750px;
        margin: 12px auto 0;
    }

    .brochure-showcase__halo {
        top: 0;
    }
}

/* ---------- mobile ---------- */
@media (max-width: 575.98px) {
    .brochure-showcase {
        padding: 38px 0 24px;
    }

    .brochure-showcase__description {
        margin: 20px 0 25px;
        line-height: 1.8;
    }

    .brochure-showcase__visual {
        margin-top: 9px;
    }

    .brochure-showcase__halo {
        left: 12%;
        width: 78%;
    }
}

/* ========== 02. BROCHURE DESIGN SERVICES (groups inside the shared .menu-types cards) ========== */
/* service groups inside the shared .menu-types cards */
.brochure-services__group + .brochure-services__group {
    margin-top: 50px;
}

.brochure-services__group-title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0 7px;
    margin: 0 0 26px;
    padding-left: 16px;
    border-left: 3px solid #0870af;
    color: var(--cs-c-title);
    font-size: var(--cs-fs-group-title);
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: -0.4px;
}

.brochure-services__group-title span {
    color: #0870af;
}

.brochure-services__group .menu-types__card {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
}

.brochure-services__group .menu-types__body {
    display: flex;
    flex: 1;
    flex-direction: column;
}

.brochure-services__group .menu-types__body h4 {
    margin: 0 0 12px;
    color: var(--cs-c-title);
    font-size: var(--cs-fs-card-title);
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: -0.3px;
}

.brochure-services__link {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 10px;
    margin-top: 18px;
    color: #0870af;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.6;
    text-decoration: none;
}

.brochure-services__link i {
    flex-shrink: 0;
    font-size: 13px;
}

.brochure-services__link:hover {
    color: #124a6e;
}

.brochure-services__link:focus-visible {
    outline: 2px solid #0870af;
    outline-offset: 5px;
    border-radius: 3px;
}

@media (max-width: 575.98px) {
    .brochure-services__group + .brochure-services__group {
        margin-top: 35px;
    }

    .brochure-services__group-title {
        margin-bottom: 22px;
        padding-left: 13px;
    }
}

/* ========== 03. WHICH FOLD TO CHOOSE (table) ========== */
.brochure-guide {
    --bg-border: #dcecf3;
}

/* ---------- main panel ---------- */
.brochure-guide__panel {
    max-width: 1080px;
    margin: 0 auto;
    overflow: hidden;
    border: 1px solid #d5ebf2;
    border-radius: 22px;
    background: #ffffff;
    box-shadow: 0 15px 40px rgba(26, 73, 102, 0.045);
}

/* ---------- table ---------- */
.brochure-guide__table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    text-align: left;
}

.brochure-guide__table th {
    padding: 22px 30px;
    background: #0870af;
    color: #ffffff;
    font-size: var(--cs-fs-card-title);
    font-weight: 600;
    line-height: 1.5;
}

.brochure-guide__table th:first-child {
    width: 60%;
}

.brochure-guide__table th + th {
    border-left: 1px solid rgba(255, 255, 255, 0.2);
}

.brochure-guide__table td {
    padding: 19px 30px;
    vertical-align: middle;
    font-size: var(--cs-fs-subtext);
    line-height: 1.7;
}

.brochure-guide__table tbody tr + tr td {
    border-top: 1px solid var(--bg-border);
}

.brochure-guide__table td:last-child {
    border-left: 1px solid var(--bg-border);
    background: #f7fcfe;
}

/* ---------- requirement ---------- */
.brochure-guide__need {
    display: flex;
    align-items: center;
    gap: 17px;
    color: var(--cs-c-title);
}

.brochure-guide__need > span:last-child {
    flex: 1;
    min-width: 0;
    overflow-wrap: break-word;
}

/* ---------- icon ---------- */
.brochure-guide__icon {
    display: grid;
    flex: 0 0 43px;
    place-items: center;
    width: 43px;
    height: 43px;
    border: 1px solid #dcf0f7;
    border-radius: 12px;
    background: #eef9fe;
    color: var(--cs-c-blue);
    font-size: 18px;
}

/* ---------- recommended format ---------- */
.brochure-guide__format {
    display: inline-block;
    padding: 8px 13px;
    border: 1px solid #d4eef6;
    border-radius: 9px;
    background: #eaf6fd;
    color: #0972b2;
    font-weight: 600;
    overflow-wrap: break-word;
}

.brochure-guide__mobile-label {
    display: none;
}

/* ---------- hover ---------- */
@media (hover: hover) {
    .brochure-guide__table tbody tr:hover td:first-child {
        background: #fcfdfe;
    }

    .brochure-guide__table tbody tr:hover td:last-child {
        background: #f0fafe;
    }
}

/* ---------- tablet ---------- */
@media (max-width: 991.98px) {
    .brochure-guide__table th,
    .brochure-guide__table td {
        padding-right: 22px;
        padding-left: 22px;
    }
}

/* ---------- mobile ---------- */
@media (max-width: 767.98px) {
    .brochure-guide__panel {
        padding: 0 21px;
        border-radius: 18px;
    }

    .brochure-guide__table,
    .brochure-guide__table tbody {
        display: block;
    }

    /* Visually hide headers while retaining them for screen readers */
    .brochure-guide__table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .brochure-guide__table tbody tr {
        display: block;
        padding: 22px 0;
    }

    .brochure-guide__table tbody tr + tr {
        border-top: 1px solid var(--bg-border);
    }

    .brochure-guide__table td {
        display: block;
        padding: 0;
    }

    .brochure-guide__table tbody tr + tr td {
        border-top: 0;
    }

    .brochure-guide__table td:last-child {
        margin-top: 13px;
        padding-left: 60px;
        border-left: 0;
        background: transparent;
    }

    .brochure-guide__need {
        align-items: flex-start;
    }

    .brochure-guide__mobile-label {
        display: block;
        margin-bottom: 6px;
        color: #2e6c8b;
        font-size: 13px;
        font-weight: 500;
    }

    .brochure-guide__format {
        padding: 7px 11px;
    }
}

@media (max-width: 575.98px) {
    .brochure-guide__panel {
        padding-right: 17px;
        padding-left: 17px;
    }

    .brochure-guide__need {
        gap: 13px;
    }

    .brochure-guide__icon {
        flex-basis: 38px;
        width: 38px;
        height: 38px;
        border-radius: 11px;
        font-size: 17px;
    }

    .brochure-guide__table td:last-child {
        padding-left: 51px;
    }
}

/* ========== 04. BENEFITS ========== */
/* ---------- cards ---------- */
.brochure-benefits__card {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
    padding: 27px 25px 29px;
    border: 1px solid #d2e9f7;
    border-radius: 21px;
    background: radial-gradient(ellipse at bottom right, #eaf5ff 0%, #ffffff 65%);
    box-shadow: 0 7px 22px rgba(26, 73, 102, 0.035);
    transition:
        border-color 200ms ease,
        box-shadow 200ms ease;
}

/* ---------- images ---------- */
.brochure-benefits__image {
    display: block;
    flex: 0 0 auto;
    width: 101px;
    height: 101px;
    max-width: 100%;
    margin-bottom: 5px;
    object-fit: contain;
    object-position: left center;
}

/* ---------- content ---------- */
.brochure-benefits__card h3 {
    margin: 0 0 4px;
    color: var(--cs-c-title);
    font-size: var(--cs-fs-card-title);
    font-weight: 700;
    line-height: 1.45;
    letter-spacing: -0.25px;
}

.brochure-benefits__card p {
    margin: 0;
    color: var(--cs-c-text);
    font-size: var(--cs-fs-subtext);
    line-height: 1.72;
    overflow-wrap: break-word;
}

/* ---------- hover ---------- */
@media (hover: hover) {
    .brochure-benefits__card:hover {
        border-color: #adcfe2;
        box-shadow: 0 10px 26px rgba(26, 73, 102, 0.07);
    }
}

/* ---------- mobile ---------- */
@media (max-width: 575.98px) {
    .brochure-benefits .row {
        --bs-gutter-y: 18px;
    }

    .brochure-benefits__card {
        padding: 25px 23px;
        border-radius: 18px;
    }

    .brochure-benefits__image {
        width: 70px;
        height: 70px;
        margin-bottom: 20px;
    }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    .brochure-benefits__card {
        transition: none;
    }
}

/* ========== 05. INDUSTRIES — card text (shared .menu-businesses) ========== */
/* industry card text (shared .menu-businesses) */
.menu-businesses__card p {
    margin: 5px 0 0;
    color: var(--cs-c-text);
    font-size: var(--cs-fs-subtext);
    line-height: 1.72;
    overflow-wrap: break-word;
}

/* ========== 06. WHAT MAKES US THE BEST ========== */
/* ---------- card ---------- */
.brochure-promise__card {
    --promise-accent: #0870af;
    --promise-tint: #edf7ff;
    --promise-border: #d5eef7;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    min-width: 0;
    padding: 22px;
    overflow: hidden;
    border: 1px solid #ddecf1;
    border-radius: 21px;
    background: linear-gradient(155deg, #ffffff 65%, var(--promise-tint));
    box-shadow: 0 8px 25px rgba(59, 59, 59, 0.035);
    transition:
        border-color 220ms ease,
        box-shadow 220ms ease,
        transform 220ms ease;
}

/* ---------- individual colours ---------- */
.brochure-promise__card--blue {
    --promise-accent: #0870af;
    --promise-tint: #edf7ff;
    --promise-border: #d5eef7;
}

/* ---------- image icon ---------- */
.brochure-promise__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 77px;
    width: 77px;
    height: 77px;
    margin-bottom: 13px;
    padding: 5px;
    border: 1px solid var(--promise-border);
    border-radius: 11px;
    background: linear-gradient(145deg, #ffffff, #e7f8fd);
}

.brochure-promise__icon img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* ---------- content ---------- */
.brochure-promise__card h3 {
    margin: 0 0 5px;
    color: var(--cs-c-title);
    font-size: var(--cs-fs-card-title);
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: -0.35px;
}

.brochure-promise__card p {
    margin: 0;
    color: var(--cs-c-text);
    font-size: var(--cs-fs-subtext);
    line-height: 1.72;
    overflow-wrap: break-word;
}

/* ---------- hover ---------- */
@media (hover: hover) {
    .brochure-promise__card:hover {
        transform: translateY(-4px);
        border-color: var(--promise-accent);
        box-shadow: 0 14px 30px rgba(59, 59, 59, 0.075);
    }
}

/* ---------- mobile ---------- */
@media (max-width: 575.98px) {
    .brochure-promise .row {
        --bs-gutter-y: 18px;
    }

    .brochure-promise__card {
        padding: 27px;
        border-radius: 18px;
    }

    .brochure-promise__card::after {
        left: 27px;
    }

    .brochure-promise__icon {
        flex-basis: 90px;
        width: 90px;
        height: 90px;
        margin-bottom: 23px;
        padding: 9px;
        border-radius: 21px;
    }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    .brochure-promise__card {
        transition: none;
    }

    .brochure-promise__card:hover {
        transform: none;
    }
}

/* ========== 07. QUOTE CTA ========== */
/* ---------- blue panel ---------- */
.brochure-quote__panel {
    padding: 46px;
    border: 1px solid #2280ba;
    border-radius: 24px;
    background: linear-gradient(120deg, #096aa7 0%, #0870af 55%, #2283a9 100%);
    box-shadow: 0 14px 35px rgba(8, 112, 175, 0.1);
}

/* ---------- content ---------- */
.brochure-quote__content {
    padding-right: 20px;
}

/* ---------- tablet ---------- */
@media (max-width: 991.98px) {
    .brochure-quote__panel {
        padding: 36px;
    }

    .brochure-quote__content {
        padding-right: 0;
    }
}

/* ---------- mobile ---------- */
@media (max-width: 575.98px) {
    .brochure-quote__panel {
        padding: 30px 23px;
        border-radius: 19px;
    }
}

/* actions: the shared .cs-btn-group, stacked in the right-hand column on desktop */
.brochure-quote__actions.cs-btn-group {
    flex-direction: column;
    align-items: stretch;
    margin-top: 0;
}

@media (max-width: 991.98px) {
    .brochure-quote__actions.cs-btn-group {
        flex-direction: row;
        align-items: center;
        margin-top: 4px;
    }
}

/* ========== 08. TIPS FOR CHOOSING A DESIGNER ========== */
.brochure-checklist {
    --checklist-border: #dceaf4;
}

/* ---------- connected surface ---------- */
.brochure-checklist__panel {
    overflow: hidden;
    border: 1px solid #d1ebf4;
    border-radius: 23px;
    background: #ffffff;
    box-shadow: 0 12px 35px rgba(26, 73, 102, 0.04);
}

.brochure-checklist__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.brochure-checklist__list > li {
    display: flex;
    min-width: 0;
}

/* ---------- individual cell ---------- */
.brochure-checklist__item {
    width: 100%;
    min-width: 0;
    padding: 31px;
    transition: background-color 200ms ease;
}

/* ---------- full-colour icons ---------- */
.brochure-checklist__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 76px;
    margin-bottom: 23px;
}

.brochure-checklist__icon svg {
    display: block;
    flex-shrink: 0;
    width: 76px;
    height: 76px;
}

/* ---------- content ---------- */
.brochure-checklist__item h3 {
    margin: 0 0 12px;
    color: var(--cs-c-title);
    font-size: var(--cs-fs-card-title);
    font-weight: 700;
    line-height: 1.45;
    letter-spacing: -0.3px;
}

.brochure-checklist__item p {
    margin: 0;
    color: var(--cs-c-text);
    font-size: var(--cs-fs-subtext);
    line-height: 1.85;
    overflow-wrap: break-word;
}

/* ---------- desktop — three columns ---------- */
@media (min-width: 992px) {
    .brochure-checklist__list > li:not(:nth-child(3n)) {
        border-right: 1px solid var(--checklist-border);
    }

    .brochure-checklist__list > li:nth-child(-n + 3) {
        border-bottom: 1px solid var(--checklist-border);
    }
}

/* ---------- tablet — two columns ---------- */
@media (min-width: 768px) and (max-width: 991.98px) {
    .brochure-checklist__list > li:nth-child(odd) {
        border-right: 1px solid var(--checklist-border);
    }

    .brochure-checklist__list > li:nth-child(-n + 4) {
        border-bottom: 1px solid var(--checklist-border);
    }
}

/* ---------- hover ---------- */
@media (hover: hover) {
    .brochure-checklist__item:hover {
        background-color: #f8fcff;
    }
}

/* ---------- mobile — single column ---------- */
@media (max-width: 767.98px) {
    .brochure-checklist__panel {
        border-radius: 18px;
    }

    .brochure-checklist__list > li + li {
        border-top: 1px solid var(--checklist-border);
    }

    .brochure-checklist__item {
        padding: 26px;
    }
}

@media (max-width: 575.98px) {
    .brochure-checklist__item {
        padding: 24px;
    }

    .brochure-checklist__icon,
    .brochure-checklist__icon svg {
        width: 70px;
        height: 70px;
    }

    .brochure-checklist__icon {
        margin-bottom: 20px;
    }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    .brochure-checklist__item {
        transition: none;
    }
}