/* SERVICE AREA INNER — loaded after main.css and service-areas.css */
.cn-inner-area .cn-inner-hero .inner-banner-content { max-width: 600px; }
.cn-inner-area .cn-inner-hero .heading-1 { max-width: 560px; }
.cn-inner-area .cn-inner-hero .heading-1 .text-orange { display: block; }
.cn-inner-area .cn-inner-hero p { max-width: 550px; }
.cn-inner-area .cn-inner-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.cn-inner-area .cn-inner-actions .btn-primary,
.cn-inner-area .cn-inner-actions .btn-secondary,
.cn-inner-area .cn-inner-actions .btn-outline-orange { white-space: nowrap; }
.cn-inner-area .cn-inner-intro .service-contact-card { max-width: 100%; }
.cn-inner-area .cn-inner-services .section-heading-center,
.cn-inner-area .cn-inner-signs .section-heading-center { margin-bottom: 32px; }

/* SERVICE CARDS */
.cn-inner-area .cn-inner-service-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.cn-inner-area .cn-inner-service-card { display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 0; padding: 22px 20px 20px; border: 1px solid #F56600; border-radius: 9px; background: #fff; box-shadow: 7px 7px 0 #FFF3EB; }
.cn-inner-area .cn-inner-service-card h3 { margin: 0 0 12px; color: #075A91; font-family: var(--heading-font); font-size: 20px; line-height: 1.4; }
.cn-inner-area .cn-inner-service-card p { flex: 1; margin: 0 0 14px; font-size: 16px; line-height: 1.75; }
.cn-inner-area .cn-inner-service-card a { display: inline-flex; align-items: center; justify-content: center; gap: 8px; color: #F56600; font-family: var(--heading-font); font-size: 14px; font-weight: 700; line-height: 1.5; text-transform: uppercase; text-decoration: none; }
.cn-inner-area .cn-inner-service-card a:hover { color: #075A91; }

/* SUPPORT SIGNS */
.cn-inner-area .cn-inner-sign-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.cn-inner-area .cn-inner-sign-card { min-width: 0; padding: 28px 24px; background: #FFF6F0; border-radius: 10px; box-shadow: 0 4px 2px -2px rgba(0,0,0,.25); }
.cn-inner-area .cn-inner-sign-card h3 { margin: 0 0 12px; color: #075A91; font-family: var(--heading-font); font-size: 20px; line-height: 1.4; }
.cn-inner-area .cn-inner-sign-card p { margin: 0; font-size: 16px; line-height: 1.75; }

/* NEIGHBOURHOODS — Figma rows 4 / 3 / 3 / 3 / 2 */
.cn-inner-area .cn-inner-neighbourhood-box { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 42px; padding: 45px 48px; background: #EEF4F9; border-radius: 10px; box-shadow: 0 4px 2px -2px rgba(0,0,0,.25); }
.cn-inner-area .cn-inner-neighbourhood-copy .heading-2 { margin: 16px 0; }
.cn-inner-area .cn-inner-neighbourhood-copy p { font-size: 17px; line-height: 1.75; }
.cn-inner-area .cn-inner-neighbourhood-list h3 { margin: 0 0 22px; text-align: center; color: #075A91; font-family: var(--heading-font); font-size: 21px; }
.cn-inner-area .cn-inner-neighbourhood-grid { display: flex; flex-wrap: wrap; justify-content: center; align-content: center; align-items: stretch; gap: 9px; width: 100%; }
.cn-inner-area .cn-inner-neighbourhood-grid > span { position: relative; display: inline-flex; flex: 0 0 calc((100% - 18px) / 3); flex-direction: column; align-items: center; justify-content: center; min-width: 0; min-height: 46px; padding: 10px 9px; background: #fff; border: 1px solid #DFE7ED; border-radius: 9px; box-shadow: 0 2px 2px rgba(0,0,0,.12); color: #075A91; font-family: var(--heading-font); font-weight: 700; font-size: 16px; line-height: 1.35; text-align: center; }
.cn-inner-area .cn-inner-neighbourhood-grid > span:nth-child(-n+4) { flex-basis: calc((100% - 27px) / 4); }
.cn-inner-area .cn-inner-neighbourhood-grid > span:nth-last-child(-n+2) { flex-basis: calc((100% - 9px) / 2); }
.cn-inner-area .cn-inner-neighbourhood-grid > span::after { content: ""; display: block; width: 22px; height: 2px; margin: 3px auto 0; background: #F56600; border-radius: 2px; flex-shrink: 0; }

/* FOUR STEPS — same connector technique as global 5-step component.
   Only the grid count and line start/end change for four icons.
   Do not create extra connector pseudo-elements on the icons. */
.cn-inner-area .cn-inner-process .cn-inner-four-steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 34px;
    max-width: 960px;
    margin: 55px auto 0;
    position: relative;
}
/* Global connector line is 10%–90% for five steps. For four, centers
   are 12.5% and 87.5% when columns/gaps are equal; use icon centers
   calculated from grid column width and gap. */
.cn-inner-area .cn-inner-process .cn-inner-four-steps::before {
    content: "";
    display: block;
    position: absolute;
    top: 51px;
    left: calc((100% - 102px) / 8);
    right: calc((100% - 102px) / 8);
    height: 0;
    border: 0;
    border-top: 3px dotted var(--primary);
    background: none;
    z-index: 1;
    pointer-events: none;
}
.cn-inner-area .cn-inner-process .cn-inner-four-steps .how-step { position: relative; z-index: 2; min-width: 0; text-align: center; }
/* Dot centered in the gap between steps, matching main.css */
.cn-inner-area .cn-inner-process .cn-inner-four-steps .how-step::after {
    content: "";
    display: block;
    position: absolute;
    top: 44px;
    right: -24px;
    width: 14px;
    height: 14px;
    background: var(--primary);
    border-radius: 50%;
    z-index: 3;
}
.cn-inner-area .cn-inner-process .cn-inner-four-steps .how-step:last-child::after { content: none; display: none; }
.cn-inner-area .cn-inner-process .cn-inner-four-steps .how-step-icon {
    position: relative;
    z-index: 3;
    width: 105px;
    height: 105px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: #FDF4EE;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cn-inner-area .cn-inner-process .cn-inner-four-steps .how-step-icon img { width: 52px; height: 52px; object-fit: contain; }
.cn-inner-area .cn-inner-process .cn-inner-four-steps .how-step h3 { margin: 0 0 14px; font-size: 20px; line-height: 1.25; text-align: center; }
.cn-inner-area .cn-inner-process .cn-inner-four-steps .how-step p { max-width: 190px; margin: 0 auto; font-size: 16px; line-height: 1.8; text-align: center; }
.cn-inner-area .cn-inner-faq .faq-list { max-width: 1000px; margin-left: auto; margin-right: auto; }

@media (max-width: 991px) {
    .cn-inner-area .cn-inner-service-grid, .cn-inner-area .cn-inner-sign-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cn-inner-area .cn-inner-neighbourhood-box { grid-template-columns: 1fr; padding: 35px 28px; }
    .cn-inner-area .cn-inner-neighbourhood-grid > span,
    .cn-inner-area .cn-inner-neighbourhood-grid > span:nth-child(-n+4),
    .cn-inner-area .cn-inner-neighbourhood-grid > span:nth-last-child(-n+2) { flex-basis: calc((100% - 9px) / 2); }
    .cn-inner-area .cn-inner-process .cn-inner-four-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 35px 20px; max-width: 600px; }
    .cn-inner-area .cn-inner-process .cn-inner-four-steps::before,
    .cn-inner-area .cn-inner-process .cn-inner-four-steps .how-step::after { content: none; display: none; }
}
@media (max-width: 767px) {
    .cn-inner-area .cn-inner-hero .heading-1 .text-orange { display: inline; }
    .cn-inner-area .cn-inner-service-grid, .cn-inner-area .cn-inner-sign-grid { grid-template-columns: 1fr; }
    .cn-inner-area .cn-inner-service-card, .cn-inner-area .cn-inner-sign-card { padding: 24px 20px; }
    .cn-inner-area .cn-inner-neighbourhood-box { padding: 28px 20px; }
    .cn-inner-area .cn-inner-actions { align-items: stretch; }
    .cn-inner-area .cn-inner-actions a { max-width: 100%; text-align: center; }
}
@media (max-width: 575px) {
    .cn-inner-area .cn-inner-process .cn-inner-four-steps { grid-template-columns: 1fr; max-width: 300px; }
    .cn-inner-area .cn-inner-neighbourhood-grid { gap: 8px; }
    .cn-inner-area .cn-inner-neighbourhood-grid > span,
    .cn-inner-area .cn-inner-neighbourhood-grid > span:nth-child(-n+4),
    .cn-inner-area .cn-inner-neighbourhood-grid > span:nth-last-child(-n+2) { flex-basis: 100%; font-size: 13px; padding: 8px 10px; }
    .cn-inner-area .cn-inner-actions { flex-direction: column; align-items: flex-start; }
    .cn-inner-area .cn-inner-service-card h3, .cn-inner-area .cn-inner-sign-card h3 { font-size: 19px; }
}





/* ==========================================
   SERVICE AREA INNER - MOBILE OVERFLOW FIX
========================================== */

.cn-inner-area,
.cn-inner-area .container,
.cn-inner-area .cn-inner-neighbourhood-box,
.cn-inner-area .cn-inner-neighbourhood-copy,
.cn-inner-area .cn-inner-neighbourhood-list,
.cn-inner-area .cn-inner-neighbourhood-grid {
    min-width: 0;
    box-sizing: border-box;
}

@media (max-width: 767px) {

    /* Neighbourhood section */
    .cn-inner-area .cn-inner-neighbourhood-box {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 28px;
        padding: 28px 16px;
        width: 100%;
        max-width: 100%;
    }

    /* Neighbourhood cards */
    .cn-inner-area .cn-inner-neighbourhood-grid {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        width: 100%;
        max-width: 100%;
        gap: 10px !important;
    }

    .cn-inner-area .cn-inner-neighbourhood-grid > *,
    .cn-inner-area .cn-inner-neighbourhood-grid > :nth-child(-n+4),
    .cn-inner-area .cn-inner-neighbourhood-grid > :nth-last-child(-n+2) {
        width: 100% !important;
        max-width: 100%;
        min-width: 0;
        flex: none !important;
        box-sizing: border-box;
    }

    /* Buttons */
    .cn-inner-area .cn-inner-neighbourhood-copy .cn-inner-actions {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        gap: 12px;
    }

    .cn-inner-area .cn-inner-neighbourhood-copy .cn-inner-actions a {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
        white-space: normal;
        text-align: center;
    }

    /* Heading and paragraph */
    .cn-inner-area .cn-inner-neighbourhood-copy .heading-2,
    .cn-inner-area .cn-inner-neighbourhood-copy p {
        max-width: 100%;
        overflow-wrap: break-word;
    }
}