/* =========================================================
   SCHOOL A CHILD INITIATIVE
   GLOBAL DESIGN SYSTEM
   ========================================================= */


/* ---------------------------------------------------------
   COLOUR + SPACING VARIABLES
   --------------------------------------------------------- */

:root {

    /* Colours */
    --sci-orange: #EB5523;
    --sci-orange-dark: #D9461B;

    --sci-blue: #468AC9;
    --sci-blue-dark: #3479B7;

    --sci-gold: #F4B942;
    --sci-gold-dark: #D99B2E;

    --sci-navy: #17324D;
    --sci-text: #334E68;
    --sci-muted: #667685;

    --sci-white: #FFFFFF;
    --sci-bg: #FAFAF7;
    --sci-light-blue: #F1F7FC;
    --sci-border: #DCE6EF;


    /* Border radius */
    --sci-radius: 8px;
    --sci-radius-lg: 14px;


    /* Transitions */
    --sci-transition: all 0.3s ease;


    /* =====================================================
       GLOBAL SPACING
       ===================================================== */

    /* Section spacing */
    --sci-section-padding-y: 80px;
    --sci-section-padding-x: 30px;


    /* Button spacing */
    --sci-button-padding-y: 14px;
    --sci-button-padding-x: 26px;


    /* Card spacing */
    --sci-card-padding: 30px;


    /* Content width */
    --sci-container-width: 1200px;
}


/* =========================================================
   BUTTONS
   ========================================================= */


/* ---------------------------------------------------------
   BASE BUTTON
   --------------------------------------------------------- */

.sci-btn,
.sci-btn a,
.sci-button,
.sci-button a {

    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 8px;

    padding:
        var(--sci-button-padding-y)
        var(--sci-button-padding-x);

    min-height: 50px;

    border-radius: var(--sci-radius);

    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;

    text-decoration: none !important;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        background-color 0.3s ease,
        border-color 0.3s ease,
        color 0.3s ease;

    cursor: pointer;
}


/* ---------------------------------------------------------
   PRIMARY BUTTON
   --------------------------------------------------------- */

.sci-btn-primary,
.sci-btn-primary a {

    background: var(--sci-orange);

    color: var(--sci-white) !important;

    border: 2px solid var(--sci-orange);

    box-shadow:
        0 5px 15px rgba(235, 85, 35, 0.18);
}


/* Primary hover */

.sci-btn-primary:hover,
.sci-btn-primary a:hover {

    background: var(--sci-orange-dark);

    border-color: var(--sci-orange-dark);

    color: var(--sci-white) !important;

    transform: translateY(-3px);

    box-shadow:
        0 10px 24px rgba(235, 85, 35, 0.28);
}


/* ---------------------------------------------------------
   SECONDARY BUTTON
   --------------------------------------------------------- */

.sci-btn-secondary,
.sci-btn-secondary a {

    background: transparent;

    color: var(--sci-blue) !important;

    border: 2px solid var(--sci-blue);
}


/* Secondary hover */

.sci-btn-secondary:hover,
.sci-btn-secondary a:hover {

    background: var(--sci-blue);

    border-color: var(--sci-blue);

    color: var(--sci-white) !important;

    transform: translateY(-3px);

    box-shadow:
        0 10px 24px rgba(70, 138, 201, 0.25);
}


/* =========================================================
   BUTTON ICON ANIMATION
   ========================================================= */

.sci-btn-primary i,
.sci-btn-secondary i,
.sci-btn-primary svg,
.sci-btn-secondary svg {

    transition:
        transform 0.3s ease;
}


.sci-btn-primary:hover i,
.sci-btn-secondary:hover i,
.sci-btn-primary:hover svg,
.sci-btn-secondary:hover svg {

    transform: translateX(4px);
}


/* =========================================================
   TWO BUTTONS IN A ROW
   ========================================================= */

.sci-btn-row {

    display: flex;

    align-items: center;

    gap: 14px;

    flex-wrap: wrap;
}


.sci-btn-row .elementor-button,
.sci-btn-row .sci-btn,
.sci-btn-row .sci-button {

    margin: 0;
}


/* =========================================================
   SECTION STYLES
   ========================================================= */


/* ---------------------------------------------------------
   STANDARD SECTION
   --------------------------------------------------------- */

.sci-section {

    position: relative;

    width: 100%;

    padding:
        var(--sci-section-padding-y)
        var(--sci-section-padding-x);
}


/* ---------------------------------------------------------
   LIGHT BLUE SECTION
   --------------------------------------------------------- */

.sci-section-light {

    background: var(--sci-light-blue);

    padding:
        var(--sci-section-padding-y)
        var(--sci-section-padding-x);
}


/* ---------------------------------------------------------
   SOFT BACKGROUND
   --------------------------------------------------------- */

.sci-section-soft {

    background: var(--sci-bg);

    padding:
        var(--sci-section-padding-y)
        var(--sci-section-padding-x);
}


/* ---------------------------------------------------------
   DARK SECTION
   --------------------------------------------------------- */

.sci-section-dark {

    background: var(--sci-navy);

    color: var(--sci-white);

    padding:
        var(--sci-section-padding-y)
        var(--sci-section-padding-x);
}


/* ---------------------------------------------------------
   ORANGE SECTION
   --------------------------------------------------------- */

.sci-section-orange {

    background: var(--sci-orange);

    color: var(--sci-white);

    padding:
        var(--sci-section-padding-y)
        var(--sci-section-padding-x);
}


/* =========================================================
   SECTION CONTAINER
   ========================================================= */

.sci-container {

    width: 100%;

    max-width: var(--sci-container-width);

    margin-left: auto;
    margin-right: auto;
}


/* =========================================================
   EYEBROW / SMALL SECTION LABEL
   ========================================================= */

.sci-eyebrow {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    color: var(--sci-orange);

    font-size: 13px;

    font-weight: 700;

    line-height: 1.3;

    letter-spacing: 1.5px;

    text-transform: uppercase;
}


/* Gold line before eyebrow */

.sci-eyebrow-line::before {

    content: "";

    width: 28px;

    height: 3px;

    background: var(--sci-gold);

    border-radius: 10px;
}


/* =========================================================
   HEADINGS
   ========================================================= */

.sci-heading {

    color: var(--sci-navy);
	font-size: clamp(42px, 5vw, 68px);
    font-weight: 700;

    line-height: 1.08;
    letter-spacing: -1.5px;
}


.sci-heading-white {

    color: var(--sci-white);
	font-size: clamp(42px, 5vw, 68px);
    font-weight: 700;

    line-height: 1.08;
    letter-spacing: -1.5px;
}


/* =========================================================
   TEXT
   ========================================================= */

.sci-text {

    color: var(--sci-text);
}


.sci-text-muted {

    color: var(--sci-muted);
}


.text-gold {

    color: var(--sci-gold);
}


.text-center {

    text-align: center;
}


/* =========================================================
   CARDS
   ========================================================= */

.sci-card {

    background: var(--sci-white);

    border: 1px solid var(--sci-border);

    border-radius: var(--sci-radius-lg);

    padding: var(--sci-card-padding);

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease,
        border-color 0.35s ease;
}


.sci-card:hover {

    transform: translateY(-6px);

    border-color:
        rgba(70, 138, 201, 0.35);

    box-shadow:
        0 15px 35px rgba(23, 50, 77, 0.10);
}


/* =========================================================
   ICON BOX
   ========================================================= */

.sci-icon {

    display: flex;

    align-items: center;
    justify-content: center;

    width: 58px;
    height: 58px;

    background:
        rgba(235, 85, 35, 0.10);

    border-radius: 12px;

    color: var(--sci-orange);

    transition:
        var(--sci-transition);
}


.sci-card:hover .sci-icon {

    background: var(--sci-orange);

    color: var(--sci-white);

    transform:
        scale(1.08)
        rotate(-3deg);
}


/* =========================================================
   IMAGE HOVER
   ========================================================= */

.sci-image-hover {

    overflow: hidden;

    border-radius: var(--sci-radius-lg);
}


.sci-image-hover img {

    display: block;

    width: 100%;

    transition:
        transform 0.5s ease;
}


.sci-image-hover:hover img {

    transform: scale(1.05);
}


/* =========================================================
   LINK HOVER
   ========================================================= */

.sci-link {

    color: var(--sci-blue);

    font-weight: 600;

    text-decoration: none;

    transition:
        var(--sci-transition);
}


.sci-link:hover {

    color: var(--sci-orange);
}


/* =========================================================
   HIGHLIGHT / ACCENT
   ========================================================= */

.sci-accent {

    color: var(--sci-orange);
}


.sci-gold {

    color: var(--sci-gold);
}


.sci-blue {

    color: var(--sci-blue);
}


/* =========================================================
   DECORATIVE DIVIDER
   ========================================================= */

.sci-divider {

    width: 55px;

    height: 4px;

    background: var(--sci-orange);

    border-radius: 10px;
}


/* Gold version */

.sci-divider-gold {

    background: var(--sci-gold);
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 991px) {

    :root {

        --sci-section-padding-y: 60px;

        --sci-section-padding-x: 25px;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

    :root {

        --sci-section-padding-y: 50px;

        --sci-section-padding-x: 20px;

        --sci-button-padding-y: 13px;

        --sci-button-padding-x: 22px;

        --sci-card-padding: 24px;
    }


    /* Button row */

    .sci-btn-row {

        width: 100%;

        gap: 10px;
    }


    /* Mobile buttons */

    .sci-btn-row .elementor-button,
    .sci-btn-row .sci-btn,
    .sci-btn-row .sci-button {

        flex: 1 1 auto;
    }


    .sci-btn,
    .sci-btn a,
    .sci-button,
    .sci-button a {

        min-height: 48px;

        font-size: 14px;
    }

}

/* =========================================
   SECTION 6: FEATURED CHILD STORY
========================================= */

.sci-featured-story {
    background: #FFFFFF;
    padding: 80px 30px;
    overflow: hidden;
}

.sci-featured-story-container {
    max-width: 1200px;
    margin: 0 auto;

    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;

    align-items: center;
}


/* =========================================
   STORY IMAGE
========================================= */

.sci-featured-story-image {
    position: relative;
    padding: 0 25px 25px 0;
}

.sci-featured-story-image-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 5;

    overflow: hidden;
    border-radius: 14px;
    background: #F1F7FC;
}

.sci-featured-story-image-wrap::after {
    content: "";
    position: absolute;
    inset: 0;

    background: linear-gradient(
        to top,
        rgba(23, 50, 77, 0.18),
        transparent 45%
    );

    pointer-events: none;
}

.sci-featured-story-image-wrap img {
    width: 100%;
    height: 100%;

    display: block;
    object-fit: cover;

    transition: transform 0.5s ease;
}

.sci-featured-story-image:hover
.sci-featured-story-image-wrap img {
    transform: scale(1.04);
}


/* =========================================
   IMAGE DECORATIVE FRAME
========================================= */

.sci-featured-story-image::before {
    content: "";

    position: absolute;

    left: 20px;
    bottom: 0;

    width: 85%;
    height: 85%;

    border: 3px solid #EB5523;
    border-radius: 14px;

    z-index: 0;
}

.sci-featured-story-image-wrap {
    position: relative;
    z-index: 1;
}


/* =========================================
   STORY BADGE
========================================= */

.sci-featured-story-badge {
    position: absolute;

    right: 0;
    bottom: 45px;

    width: 155px;
    min-height: 145px;

    padding: 22px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    background: #17324D;
    border-radius: 10px;

    box-shadow: 0 12px 30px rgba(23, 50, 77, 0.18);

    z-index: 3;
}

.sci-featured-story-badge-label {
    display: block;

    margin-bottom: 8px;

    color: #F4B942;

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    line-height: 1.3;
}

.sci-featured-story-badge strong {
    color: #FFFFFF;

    font-size: 22px;
    line-height: 1.15;
    font-weight: 700;
}


/* =========================================
   STORY CONTENT
========================================= */

.sci-featured-story-content {
    max-width: 540px;
}

.sci-featured-story-content h2 {
    margin: 18px 0 25px;

    color: #17324D;

    font-size: 44px;
    line-height: 1.12;
    font-weight: 700;
}

.sci-featured-story-content h2 span {
    display: block;
    color: #EB5523;
}


/* =========================================
   STORY COPY
========================================= */

.sci-featured-story-copy {
    margin-bottom: 30px;
}

.sci-featured-story-copy p {
    margin: 0 0 18px;

    color: #334E68;

    font-size: 17px;
    line-height: 1.75;
}

.sci-featured-story-copy p:last-child {
    margin-bottom: 0;
}


/* =========================================
   CTA
========================================= */

.sci-featured-story-content .sci-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 991px) {

    .sci-featured-story {
        padding: 60px 25px;
    }

    .sci-featured-story-container {
        grid-template-columns: 1fr 1fr;
        gap: 45px;
    }

    .sci-featured-story-content h2 {
        font-size: 36px;
    }

    .sci-featured-story-copy p {
        font-size: 16px;
        line-height: 1.7;
    }

    .sci-featured-story-image {
        padding-right: 15px;
    }

    .sci-featured-story-badge {
        width: 135px;
        min-height: 125px;
        padding: 18px;

        right: -5px;
        bottom: 30px;
    }

    .sci-featured-story-badge strong {
        font-size: 19px;
    }
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 767px) {

    .sci-featured-story {
        padding: 50px 20px;
    }

    .sci-featured-story-container {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .sci-featured-story-image {
        padding: 0 15px 15px 0;
    }

    .sci-featured-story-image-wrap {
        aspect-ratio: 4 / 5;
        border-radius: 12px;
    }

    .sci-featured-story-image::before {
        left: 10px;
        bottom: 0;

        width: 90%;
        height: 90%;

        border-width: 2px;
        border-radius: 12px;
    }

    .sci-featured-story-badge {
        right: -2px;
        bottom: 25px;

        width: 125px;
        min-height: 115px;

        padding: 16px;

        border-radius: 8px;
    }

    .sci-featured-story-badge-label {
        font-size: 9px;
        letter-spacing: 1.2px;
    }

    .sci-featured-story-badge strong {
        font-size: 18px;
    }

    .sci-featured-story-content {
        max-width: 100%;
    }

    .sci-featured-story-content h2 {
        margin-top: 16px;
        margin-bottom: 22px;

        font-size: 32px;
        line-height: 1.18;
    }

    .sci-featured-story-copy p {
        font-size: 16px;
        line-height: 1.7;
        margin-bottom: 17px;
    }

    .sci-featured-story-content .sci-btn {
        width: 100%;
        justify-content: center;
        text-align: center;
    }
}

/* =========================================
   SECTION 1: ABOUT HERO
========================================= */

.sci-about-hero {
    position: relative;
    background: #F1F7FC;
    padding: 90px 30px;
    overflow: hidden;
}

.sci-about-hero-container {
    max-width: 1200px;
    margin: 0 auto;

    display: grid;
    grid-template-columns: 1fr 0.95fr;
    gap: 75px;

    align-items: center;
}


/* =========================================
   HERO CONTENT
========================================= */

.sci-about-hero-content {
    max-width: 620px;
}

.sci-about-hero-content h1 {
    margin: 20px 0 28px;

    color: #17324D;

    font-size: 52px;
    line-height: 1.1;
    font-weight: 700;
    letter-spacing: -1px;
}

.sci-about-hero-content h1 span {
    display: block;
    color: #EB5523;
}

.sci-about-hero-content p {
    margin: 0 0 18px;

    color: #334E68;

    font-size: 18px;
    line-height: 1.75;
}

.sci-about-hero-content p:last-child {
    margin-bottom: 0;
}


/* =========================================
   HERO VISUAL
========================================= */

.sci-about-hero-visual {
    position: relative;
    padding: 0 25px 25px 0;
}

.sci-about-hero-image {
    position: relative;
    z-index: 2;

    width: 100%;
    aspect-ratio: 4 / 5;

    overflow: hidden;
    border-radius: 14px;

    background: #FFFFFF;
}

.sci-about-hero-image::after {
    content: "";

    position: absolute;
    inset: 0;

    background: linear-gradient(
        to top,
        rgba(23, 50, 77, 0.18),
        transparent 50%
    );

    pointer-events: none;
}

.sci-about-hero-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition: transform 0.5s ease;
}

.sci-about-hero-visual:hover
.sci-about-hero-image img {
    transform: scale(1.04);
}


/* =========================================
   DECORATIVE FRAME
========================================= */

.sci-about-hero-visual::before {
    content: "";

    position: absolute;

    left: 20px;
    bottom: 0;

    width: 88%;
    height: 88%;

    border: 3px solid #EB5523;
    border-radius: 14px;

    z-index: 0;
}


/* =========================================
   FLOATING CARD
========================================= */

.sci-about-hero-card {
    position: absolute;

    right: 0;
    bottom: 45px;

    width: 190px;
    min-height: 105px;

    padding: 20px;

    display: flex;
    align-items: center;
    gap: 14px;

    background: #17324D;
    border-radius: 10px;

    box-shadow: 0 15px 35px rgba(23, 50, 77, 0.2);

    z-index: 4;
}

.sci-about-hero-card-icon {
    width: 42px;
    height: 42px;

    flex: 0 0 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 7px;

    background: #EB5523;
    color: #FFFFFF;

    font-size: 13px;
    font-weight: 700;
}

.sci-about-hero-card strong {
    display: block;

    margin-bottom: 4px;

    color: #FFFFFF;

    font-size: 15px;
    line-height: 1.3;
}

.sci-about-hero-card span:last-child {
    display: block;

    color: rgba(255, 255, 255, 0.7);

    font-size: 12px;
    line-height: 1.4;
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 991px) {

    .sci-about-hero {
        padding: 60px 25px;
    }

    .sci-about-hero-container {
        grid-template-columns: 1fr 1fr;
        gap: 45px;
    }

    .sci-about-hero-content h1 {
        font-size: 40px;
    }

    .sci-about-hero-content p {
        font-size: 16px;
        line-height: 1.7;
    }

    .sci-about-hero-card {
        width: 165px;
        min-height: 95px;
        padding: 16px;
    }

    .sci-about-hero-card-icon {
        width: 36px;
        height: 36px;
        flex-basis: 36px;
        font-size: 11px;
    }
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 767px) {

    .sci-about-hero {
        padding: 50px 20px;
    }

    .sci-about-hero-container {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .sci-about-hero-content {
        max-width: 100%;
    }

    .sci-about-hero-content h1 {
        margin: 16px 0 22px;

        font-size: 34px;
        line-height: 1.15;
        letter-spacing: -0.5px;
    }

    .sci-about-hero-content p {
        font-size: 16px;
        line-height: 1.7;
    }

    .sci-about-hero-visual {
        padding-right: 15px;
        padding-bottom: 15px;
    }

    .sci-about-hero-image {
        border-radius: 12px;
    }

    .sci-about-hero-visual::before {
        left: 10px;
        bottom: 0;

        width: 90%;
        height: 90%;

        border-width: 2px;
        border-radius: 12px;
    }

    .sci-about-hero-card {
        right: -2px;
        bottom: 25px;

        width: 155px;
        min-height: 90px;

        padding: 14px;

        gap: 10px;
        border-radius: 8px;
    }

    .sci-about-hero-card-icon {
        width: 34px;
        height: 34px;
        flex-basis: 34px;

        font-size: 10px;
    }

    .sci-about-hero-card strong {
        font-size: 13px;
    }

    .sci-about-hero-card span:last-child {
        font-size: 11px;
    }
}


/* =========================================
   SECTION 2: OUR STORY
========================================= */

.sci-our-story {
    background: #FFFFFF;
    padding: 80px 30px;
    overflow: hidden;
}

.sci-our-story-container {
    max-width: 1200px;
    margin: 0 auto;

    display: grid;
    grid-template-columns: 1fr 0.9fr;
    gap: 80px;

    align-items: center;
}


/* =========================================
   STORY CONTENT
========================================= */

.sci-our-story-content {
    max-width: 600px;
}

.sci-our-story-content h2 {
    margin: 18px 0 28px;

    color: #17324D;

    font-size: 44px;
    line-height: 1.12;
    font-weight: 700;
}

.sci-our-story-content h2 span {
    display: block;
    color: #EB5523;
}


/* =========================================
   STORY COPY
========================================= */

.sci-our-story-copy p {
    margin: 0 0 19px;

    color: #334E68;

    font-size: 17px;
    line-height: 1.75;
}

.sci-our-story-copy p:last-child {
    margin-bottom: 0;
}


/* =========================================
   STORY VISUAL
========================================= */

.sci-our-story-visual {
    position: relative;
    padding: 0 0 45px 25px;
}

.sci-our-story-image {
    position: relative;
    z-index: 2;

    width: 100%;
    aspect-ratio: 4 / 5;

    overflow: hidden;
    border-radius: 14px;

    background: #F1F7FC;
}

.sci-our-story-image::after {
    content: "";

    position: absolute;
    inset: 0;

    background: linear-gradient(
        to top,
        rgba(23, 50, 77, 0.2),
        transparent 50%
    );

    pointer-events: none;
}

.sci-our-story-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition: transform 0.5s ease;
}

.sci-our-story-visual:hover
.sci-our-story-image img {
    transform: scale(1.04);
}


/* =========================================
   DECORATIVE FRAME
========================================= */

.sci-our-story-visual::before {
    content: "";

    position: absolute;

    left: 0;
    bottom: 20px;

    width: 88%;
    height: 88%;

    border: 3px solid #EB5523;
    border-radius: 14px;

    z-index: 0;
}


/* =========================================
   QUOTE CARD
========================================= */

.sci-our-story-quote {
    position: absolute;

    left: 0;
    bottom: 0;

    width: 78%;

    padding: 25px 30px;

    background: #17324D;
    border-radius: 10px;

    box-shadow: 0 12px 30px rgba(23, 50, 77, 0.18);

    z-index: 3;
}

.sci-our-story-quote-mark {
    display: block;

    margin-bottom: -5px;

    color: #F4B942;

    font-family: Georgia, serif;
    font-size: 42px;
    line-height: 1;
}

.sci-our-story-quote p {
    margin: 0;

    color: #FFFFFF;

    font-size: 16px;
    line-height: 1.55;
    font-weight: 600;
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 991px) {

    .sci-our-story {
        padding: 60px 25px;
    }

    .sci-our-story-container {
        grid-template-columns: 1fr 1fr;
        gap: 45px;
    }

    .sci-our-story-content h2 {
        font-size: 36px;
    }

    .sci-our-story-copy p {
        font-size: 16px;
        line-height: 1.7;
    }

    .sci-our-story-visual {
        padding-left: 15px;
    }

    .sci-our-story-quote {
        width: 85%;
        padding: 20px 22px;
    }

    .sci-our-story-quote p {
        font-size: 14px;
    }
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 767px) {

    .sci-our-story {
        padding: 50px 20px;
    }

    .sci-our-story-container {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .sci-our-story-content {
        max-width: 100%;
    }

    .sci-our-story-content h2 {
        margin: 16px 0 22px;

        font-size: 32px;
        line-height: 1.18;
    }

    .sci-our-story-copy p {
        font-size: 16px;
        line-height: 1.7;
        margin-bottom: 17px;
    }

    .sci-our-story-visual {
        padding-left: 15px;
        padding-bottom: 45px;
    }

    .sci-our-story-image {
        border-radius: 12px;
    }

    .sci-our-story-visual::before {
        left: 5px;
        bottom: 20px;

        width: 90%;
        height: 90%;

        border-width: 2px;
        border-radius: 12px;
    }

    .sci-our-story-quote {
        left: 0;
        bottom: 0;

        width: 88%;

        padding: 18px 20px;

        border-radius: 8px;
    }

    .sci-our-story-quote-mark {
        font-size: 34px;
    }

    .sci-our-story-quote p {
        font-size: 14px;
        line-height: 1.5;
    }
}


/* =========================================
   SECTION 3: GODFREY'S STORY
========================================= */

.sci-godfrey-story {
    background: #F1F7FC;
    padding: 80px 30px;
    overflow: hidden;
}

.sci-godfrey-story-container {
    max-width: 1200px;
    margin: 0 auto;

    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 80px;

    align-items: center;
}


/* =========================================
   STORY VISUAL
========================================= */

.sci-godfrey-story-visual {
    position: relative;
    padding: 0 25px 25px 0;
}

.sci-godfrey-story-image {
    position: relative;
    z-index: 2;

    width: 100%;
    aspect-ratio: 4 / 5;

    overflow: hidden;
    border-radius: 14px;

    background: #FFFFFF;
}

.sci-godfrey-story-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition: transform 0.5s ease;
}

.sci-godfrey-story-visual:hover
.sci-godfrey-story-image img {
    transform: scale(1.04);
}


/* Decorative frame */

.sci-godfrey-story-visual::before {
    content: "";

    position: absolute;

    left: 20px;
    bottom: 0;

    width: 88%;
    height: 88%;

    border: 3px solid #EB5523;
    border-radius: 14px;

    z-index: 0;
}


/* =========================================
   NAME LABEL
========================================= */

.sci-godfrey-story-label {
    position: absolute;

    right: 0;
    bottom: 45px;

    width: 190px;

    padding: 20px 22px;

    background: #17324D;
    border-radius: 10px;

    box-shadow: 0 12px 30px rgba(23, 50, 77, 0.2);

    z-index: 4;
}

.sci-godfrey-story-label span {
    display: block;

    margin-bottom: 7px;

    color: #F4B942;

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.4px;
}

.sci-godfrey-story-label strong {
    display: block;

    color: #FFFFFF;

    font-size: 17px;
    line-height: 1.35;
}


/* =========================================
   STORY CONTENT
========================================= */

.sci-godfrey-story-content {
    max-width: 620px;
}

.sci-godfrey-story-content h2 {
    margin: 18px 0 28px;

    color: #17324D;

    font-size: 44px;
    line-height: 1.12;
    font-weight: 700;
}

.sci-godfrey-story-content h2 span {
    display: block;
    color: #EB5523;
}


/* =========================================
   STORY COPY
========================================= */

.sci-godfrey-story-copy p {
    margin: 0 0 19px;

    color: #334E68;

    font-size: 17px;
    line-height: 1.75;
}

.sci-godfrey-story-copy p:last-child {
    margin-bottom: 0;
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 991px) {

    .sci-godfrey-story {
        padding: 60px 25px;
    }

    .sci-godfrey-story-container {
        grid-template-columns: 1fr 1fr;
        gap: 45px;
    }

    .sci-godfrey-story-content h2 {
        font-size: 36px;
    }

    .sci-godfrey-story-copy p {
        font-size: 16px;
        line-height: 1.7;
    }

    .sci-godfrey-story-label {
        width: 165px;
        padding: 16px;
    }

    .sci-godfrey-story-label strong {
        font-size: 15px;
    }
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 767px) {

    .sci-godfrey-story {
        padding: 50px 20px;
    }

    .sci-godfrey-story-container {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .sci-godfrey-story-visual {
        padding-right: 15px;
        padding-bottom: 15px;
    }

    .sci-godfrey-story-image {
        border-radius: 12px;
    }

    .sci-godfrey-story-visual::before {
        left: 10px;
        bottom: 0;

        width: 90%;
        height: 90%;

        border-width: 2px;
        border-radius: 12px;
    }

    .sci-godfrey-story-label {
        right: -2px;
        bottom: 25px;

        width: 150px;

        padding: 15px;

        border-radius: 8px;
    }

    .sci-godfrey-story-label span {
        font-size: 9px;
        letter-spacing: 1.1px;
    }

    .sci-godfrey-story-label strong {
        font-size: 14px;
    }

    .sci-godfrey-story-content {
        max-width: 100%;
    }

    .sci-godfrey-story-content h2 {
        margin: 16px 0 22px;

        font-size: 32px;
        line-height: 1.18;
    }

    .sci-godfrey-story-copy p {
        font-size: 16px;
        line-height: 1.7;
        margin-bottom: 17px;
    }
}

/* =========================================
   MISSION, VISION & VALUES
========================================= */

.sci-mission-vision-values {
    background: #FFFFFF;
    padding: 80px 30px;
}

.sci-mvv-container {
    max-width: 1200px;
    margin: 0 auto;
}


/* =========================================
   MISSION & VISION
========================================= */

.sci-mvv-intro {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 70px;
    margin-bottom: 85px;
}

.sci-mvv-block {
    position: relative;
    padding: 10px 0 10px 35px;
}

/* Vertical accent line */

.sci-mvv-block::before {
    content: "";

    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;

    width: 4px;

    background: #EB5523;
    border-radius: 4px;
}

.sci-vision-block::before {
    background: #468AC9;
}


/* Headings */

.sci-mvv-block h2 {
    margin: 18px 0 25px;

    color: #17324D;

    font-size: 40px;
    line-height: 1.15;
    font-weight: 700;
}

.sci-mvv-block h2 span {
    display: block;
    color: #EB5523;
}

.sci-vision-block h2 span {
    color: #468AC9;
}


/* Paragraphs */

.sci-mvv-block p {
    margin: 0 0 18px;

    color: #334E68;

    font-size: 16px;
    line-height: 1.75;
}

.sci-mvv-block p:last-child {
    margin-bottom: 0;
}


/* =========================================
   VALUES HEADER
========================================= */

.sci-values-section {
    border-top: 1px solid #DCE6EF;
    padding-top: 70px;
}

.sci-values-header {
    max-width: 650px;
    margin-bottom: 40px;
}

.sci-values-header h2 {
    margin: 18px 0 0;

    color: #17324D;

    font-size: 42px;
    line-height: 1.12;
    font-weight: 700;
}

.sci-values-header h2 span {
    color: #EB5523;
}


/* =========================================
   VALUES GRID
========================================= */

.sci-values-grid {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 20px;
}


/* =========================================
   VALUE CARD
========================================= */

.sci-value-card {
    position: relative;

    min-height: 235px;

    padding: 30px;

    background: #FAFAF7;

    border: 1px solid #DCE6EF;
    border-radius: 10px;

    overflow: hidden;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}

.sci-value-card::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 100%;
    height: 4px;

    background: #EB5523;

    transform: scaleX(0);
    transform-origin: left;

    transition: transform 0.3s ease;
}

.sci-value-card:hover {
    transform: translateY(-6px);

    border-color: #EB5523;

    box-shadow: 0 14px 30px rgba(23, 50, 77, 0.10);
}

.sci-value-card:hover::after {
    transform: scaleX(1);
}


/* Number */

.sci-value-number {
    width: 44px;
    height: 44px;

    margin-bottom: 22px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 7px;

    background: #468AC9;
    color: #FFFFFF;

    font-size: 13px;
    font-weight: 700;

    transition: background 0.3s ease;
}

.sci-value-card:hover .sci-value-number {
    background: #EB5523;
}


/* Card heading */

.sci-value-card h3 {
    margin: 0 0 12px;

    color: #17324D;

    font-size: 19px;
    line-height: 1.3;
    font-weight: 700;
}


/* Card text */

.sci-value-card p {
    margin: 0;

    color: #667685;

    font-size: 15px;
    line-height: 1.65;
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 991px) {

    .sci-mission-vision-values {
        padding: 60px 25px;
    }

    .sci-mvv-intro {
        gap: 40px;
        margin-bottom: 60px;
    }

    .sci-mvv-block {
        padding-left: 28px;
    }

    .sci-mvv-block h2 {
        font-size: 34px;
    }

    .sci-values-section {
        padding-top: 55px;
    }

    .sci-values-header h2 {
        font-size: 36px;
    }

    .sci-values-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 767px) {

    .sci-mission-vision-values {
        padding: 50px 20px;
    }

    .sci-mvv-intro {
        grid-template-columns: 1fr;
        gap: 45px;
        margin-bottom: 55px;
    }

    .sci-mvv-block {
        padding-left: 24px;
    }

    .sci-mvv-block h2 {
        margin: 16px 0 20px;

        font-size: 31px;
        line-height: 1.18;
    }

    .sci-mvv-block p {
        font-size: 16px;
        line-height: 1.7;
    }

    .sci-values-section {
        padding-top: 50px;
    }

    .sci-values-header {
        margin-bottom: 30px;
    }

    .sci-values-header h2 {
        font-size: 32px;
        line-height: 1.18;
    }

    .sci-values-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .sci-value-card {
        min-height: auto;
        padding: 25px;
    }

    .sci-value-number {
        margin-bottom: 18px;
    }

}

/* =========================================
   SECTION 8: LOCATION
========================================= */

.sci-location {
    background: #F1F7FC;
    padding: 80px 30px;
    overflow: hidden;
}

.sci-location-container {
    max-width: 1200px;
    margin: 0 auto;

    display: grid;
    grid-template-columns: 1fr 0.85fr;
    gap: 80px;

    align-items: center;
}


/* =========================================
   LOCATION CONTENT
========================================= */

.sci-location-content {
    max-width: 620px;
}

.sci-location-content h2 {
    margin: 18px 0 28px;

    color: #17324D;

    font-size: 46px;
    line-height: 1.12;
    font-weight: 700;
}

.sci-location-content h2 span {
    display: block;
    color: #EB5523;
}

.sci-location-content p {
    margin: 0 0 19px;

    color: #334E68;

    font-size: 17px;
    line-height: 1.75;
}

.sci-location-content p:last-child {
    margin-bottom: 0;
}


/* =========================================
   LOCATION VISUAL
========================================= */

.sci-location-visual {
    position: relative;

    min-height: 360px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 40px;
}


/* =========================================
   LOCATION CARD
========================================= */

.sci-location-card {
    position: relative;
    z-index: 3;

    width: 100%;
    max-width: 390px;

    padding: 45px 40px;

    display: flex;
    align-items: center;
    gap: 25px;

    background: #17324D;

    border-radius: 14px;

    box-shadow: 0 18px 40px rgba(23, 50, 77, 0.18);
}


/* Location Icon */

.sci-location-icon {
    width: 65px;
    height: 65px;

    flex: 0 0 65px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #EB5523;
}

.sci-location-icon span {
    position: relative;

    color: #FFFFFF;

    font-size: 27px;
    line-height: 1;
}


/* Card Content */

.sci-location-label {
    display: block;

    margin-bottom: 7px;

    color: #F4B942;

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
}

.sci-location-card h3 {
    margin: 0 0 4px;

    color: #FFFFFF;

    font-size: 27px;
    line-height: 1.2;
    font-weight: 700;
}

.sci-location-card p {
    margin: 0;

    color: rgba(255, 255, 255, 0.72);

    font-size: 15px;
    line-height: 1.5;
}


/* =========================================
   DECORATIVE ELEMENTS
========================================= */

.sci-location-decoration {
    position: absolute;

    border-radius: 50%;
}

.sci-location-decoration-one {
    width: 210px;
    height: 210px;

    top: 10px;
    right: 10px;

    border: 3px solid #EB5523;

    opacity: 0.8;
}

.sci-location-decoration-two {
    width: 100px;
    height: 100px;

    bottom: 5px;
    left: 10px;

    background: #F4B942;

    opacity: 0.8;
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 991px) {

    .sci-location {
        padding: 60px 25px;
    }

    .sci-location-container {
        grid-template-columns: 1fr 1fr;
        gap: 45px;
    }

    .sci-location-content h2 {
        font-size: 38px;
    }

    .sci-location-content p {
        font-size: 16px;
        line-height: 1.7;
    }

    .sci-location-visual {
        min-height: 320px;
        padding: 25px;
    }

    .sci-location-card {
        padding: 30px 25px;
        gap: 18px;
    }

    .sci-location-icon {
        width: 55px;
        height: 55px;
        flex-basis: 55px;
    }

    .sci-location-card h3 {
        font-size: 23px;
    }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 767px) {

    .sci-location {
        padding: 50px 20px;
    }

    .sci-location-container {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .sci-location-content {
        max-width: 100%;
    }

    .sci-location-content h2 {
        margin: 16px 0 22px;

        font-size: 32px;
        line-height: 1.18;
    }

    .sci-location-content p {
        font-size: 16px;
        line-height: 1.7;
        margin-bottom: 17px;
    }

    .sci-location-visual {
        min-height: 270px;
        padding: 20px 10px;
    }

    .sci-location-card {
        max-width: 100%;

        padding: 30px 24px;

        gap: 18px;

        border-radius: 12px;
    }

    .sci-location-icon {
        width: 52px;
        height: 52px;
        flex-basis: 52px;
    }

    .sci-location-icon span {
        font-size: 23px;
    }

    .sci-location-label {
        font-size: 9px;
        letter-spacing: 1.2px;
    }

    .sci-location-card h3 {
        font-size: 22px;
    }

    .sci-location-card p {
        font-size: 14px;
    }

    .sci-location-decoration-one {
        width: 150px;
        height: 150px;

        top: 0;
        right: 0;
    }

    .sci-location-decoration-two {
        width: 70px;
        height: 70px;

        bottom: 0;
        left: 0;
    }

}

/* =========================================
   SCI HOMEPAGE HERO
   ========================================= */

.sci-hero {
    position: relative;
    overflow: hidden;
    background: #FAFAF7;
    padding: 90px 30px;
}


/* Background decorative shape */

.sci-hero::before {
    content: "";
    position: absolute;
    width: 500px;
    height: 500px;
    right: -220px;
    top: -250px;

    background: rgba(70, 138, 201, 0.08);

    border-radius: 50%;
}


/* Main container */

.sci-hero-inner {
    position: relative;
    z-index: 2;

    max-width: 1200px;
    margin: 0 auto;

    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;

    gap: 70px;
}


/* =========================================
   CONTENT
   ========================================= */

.sci-hero-content {
    max-width: 600px;
}


/* Eyebrow */

.sci-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    margin-bottom: 20px;

    color: #EB5523;

    font-size: 13px;
    font-weight: 700;

    letter-spacing: 1.8px;
    text-transform: uppercase;
}


.sci-hero-eyebrow::before {
    content: "";

    width: 32px;
    height: 3px;

    background: #F4B942;

    border-radius: 10px;
}


/* Heading */

.sci-hero h1 {
    margin: 0 0 22px;

    color: #17324D;

    font-size: clamp(42px, 5vw, 68px);
    font-weight: 700;

    line-height: 1.08;
    letter-spacing: -1.5px;
}


.sci-hero h1 span {
    display: block;
    color: #EB5523;
}


/* Description */

.sci-hero p {
    max-width: 560px;

    margin: 0 0 32px;

    color: #667685;

    font-size: 17px;
    line-height: 1.75;
}


/* =========================================
   BUTTONS
   ========================================= */

.sci-hero-buttons {
    display: flex;
    align-items: center;
    gap: 14px;

    flex-wrap: wrap;
}


.sci-hero-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    padding: 15px 25px;

    border-radius: 8px;

    font-size: 15px;
    font-weight: 600;

    text-decoration: none !important;

    transition:
        transform 0.3s ease,
        background 0.3s ease,
        color 0.3s ease,
        box-shadow 0.3s ease;
}


/* Primary */

.sci-hero-primary {
    background: #EB5523;
    color: #FFFFFF !important;

    border: 2px solid #EB5523;

    box-shadow: 0 6px 18px rgba(235, 85, 35, 0.18);
}


.sci-hero-primary:hover {
    background: #D9461B;
    border-color: #D9461B;

    color: #FFFFFF !important;

    transform: translateY(-3px);

    box-shadow: 0 12px 25px rgba(235, 85, 35, 0.28);
}


/* Secondary */

.sci-hero-secondary {
    background: transparent;
    color: #468AC9 !important;

    border: 2px solid #468AC9;
}


.sci-hero-secondary:hover {
    background: #468AC9;

    color: #FFFFFF !important;

    transform: translateY(-3px);

    box-shadow: 0 12px 25px rgba(70, 138, 201, 0.25);
}


/* Arrow animation */

.sci-hero-btn span {
    transition: transform 0.3s ease;
}


.sci-hero-btn:hover span {
    transform: translateX(5px);
}


/* =========================================
   IMAGE
   ========================================= */

.sci-hero-image {
    position: relative;

    min-height: 520px;

    display: flex;
    align-items: center;
    justify-content: center;
}


/* Decorative orange shape */

.sci-hero-image-shape {
    position: absolute;

    width: 390px;
    height: 390px;

    background: #EB5523;

    border-radius: 45% 55% 60% 40% / 45% 40% 60% 55%;

    transform: rotate(-8deg);

    opacity: 0.95;
}


/* Image */

.sci-hero-image img {
    position: relative;
    z-index: 2;

    width: 430px;
    height: 500px;

    object-fit: cover;

    border-radius: 18px;

    box-shadow:
        0 25px 50px rgba(23, 50, 77, 0.18);

    transition: transform 0.5s ease;
}


.sci-hero-image:hover img {
    transform: translateY(-6px);
}


/* =========================================
   BADGE
   ========================================= */

.sci-hero-badge {
    position: absolute;

    z-index: 3;

    left: 5px;
    bottom: 35px;

    display: flex;
    flex-direction: column;

    padding: 16px 20px;

    background: #FFFFFF;

    border-radius: 10px;

    box-shadow: 0 12px 30px rgba(23, 50, 77, 0.15);
}


.sci-hero-badge strong {
    color: #17324D;

    font-size: 15px;
}


.sci-hero-badge span {
    margin-top: 4px;

    color: #667685;

    font-size: 12px;
}


/* =========================================
   TABLET
   ========================================= */

@media (max-width: 991px) {

    .sci-hero {
        padding: 70px 25px;
    }

    .sci-hero-inner {
        grid-template-columns: 1fr;

        gap: 50px;
    }

    .sci-hero-content {
        max-width: 700px;
        text-align: center;
        margin: 0 auto;
    }

    .sci-hero-eyebrow {
        justify-content: center;
    }

    .sci-hero p {
        margin-left: auto;
        margin-right: auto;
    }

    .sci-hero-buttons {
        justify-content: center;
    }

    .sci-hero-image {
        min-height: 450px;
    }

}


/* =========================================
   MOBILE
   ========================================= */

@media (max-width: 767px) {

    .sci-hero {
        padding: 55px 20px 65px;
    }

    .sci-hero-inner {
        gap: 40px;
    }

    .sci-hero h1 {
        font-size: 40px;
        line-height: 1.1;
        letter-spacing: -0.8px;
    }

    .sci-hero p {
        font-size: 15px;
        line-height: 1.65;
    }

    .sci-hero-buttons {
        width: 100%;
        flex-direction: column;
    }

    .sci-hero-btn {
        width: 100%;
    }

    .sci-hero-image {
        min-height: 380px;
    }

    .sci-hero-image-shape {
        width: 280px;
        height: 280px;
    }

    .sci-hero-image img {
        width: 300px;
        height: 360px;
    }

    .sci-hero-badge {
        left: 5px;
        bottom: 15px;
        padding: 12px 15px;
    }

}

/* =========================================================
   WHO WE ARE
   ========================================================= */

.sci-about-section {

    width: 100%;

    background: #FFFFFF;

    padding:
        var(--sci-section-padding-y)
        var(--sci-section-padding-x);
}


/* Container */

.sci-about-container {

    width: 100%;

    max-width: var(--sci-container-width);

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        0.85fr 1.15fr;

    gap: 80px;

    align-items: start;
}


/* =========================================================
   LEFT CONTENT
   ========================================================= */

.sci-about-heading {

    position: sticky;

    top: 100px;
}


.sci-about-heading h2 {

    margin: 18px 0 0;

    color: var(--sci-navy);

    font-size: clamp(36px, 4vw, 52px);

    line-height: 1.12;

    letter-spacing: -1px;

    font-weight: 700;
}


.sci-about-heading h2 span {

    display: block;

    color: var(--sci-orange);
}


/* =========================================================
   RIGHT CONTENT
   ========================================================= */

.sci-about-content {

    max-width: 700px;
}


.sci-about-content p {

    margin: 0 0 20px;

    color: var(--sci-text);

    font-size: 17px;

    line-height: 1.8;
}


.sci-about-content p:last-child {

    margin-bottom: 0;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 991px) {

    .sci-about-container {

        grid-template-columns: 1fr;

        gap: 35px;
    }


    .sci-about-heading {

        position: static;
    }


    .sci-about-heading h2 {

        max-width: 650px;
    }

}


@media (max-width: 767px) {

    .sci-about-section {

        padding:
            var(--sci-section-padding-y)
            var(--sci-section-padding-x);
    }


    .sci-about-container {

        gap: 25px;
    }


    .sci-about-heading h2 {

        font-size: 36px;

        line-height: 1.15;
    }


    .sci-about-content p {

        font-size: 15px;

        line-height: 1.7;

        margin-bottom: 17px;
    }

}

h2 {
    margin: 18px 0 18px;
    font-size: clamp(36px, 4vw, 52px);
    line-height: 1.12;
    letter-spacing: -1px;
    font-weight: 700;
}

/* =========================================================
   SCI IMPACT COUNTERS
   ========================================================= */

.sci-impact-counters {
    width: 100%;

    background: #17324D;

    padding: 70px 30px;
}


/* =========================================================
   CONTAINER
   ========================================================= */

.sci-counter-container {

    width: 100%;

    max-width: 1200px;

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    align-items: stretch;
}


/* =========================================================
   INDIVIDUAL COUNTER
   ========================================================= */

.sci-counter {

    position: relative;

    padding: 15px 35px;

    text-align: center;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;
}


/* Vertical divider */

.sci-counter:not(:last-child)::after {

    content: "";

    position: absolute;

    right: 0;

    top: 15%;

    width: 1px;

    height: 70%;

    background: rgba(255, 255, 255, 0.18);
}


/* =========================================================
   NUMBER
   ========================================================= */

.sci-counter-number {

    color: #FFFFFF;

    font-size: clamp(42px, 4vw, 58px);

    font-weight: 700;

    line-height: 1;

    letter-spacing: -1px;

    margin-bottom: 12px;
}


/*  Gold plus sign

.sci-counter-number::first-letter {
     Keeps number styling consistent
} */


/* =========================================================
   LABEL
   ========================================================= */

.sci-counter-label {

    max-width: 190px;

    color: rgba(255, 255, 255, 0.82);

    font-size: 15px;

    font-weight: 500;

    line-height: 1.5;
}


/* Asterisk */

.sci-counter-label sup {

    color: #F4B942;

    font-size: 11px;

    margin-left: 2px;

    top: -0.3em;

    position: relative;
}


/* =========================================================
   GOLD ACCENT
   ========================================================= */

.sci-counter::before {

    content: "";

    position: absolute;

    top: 0;

    width: 32px;

    height: 3px;

    background: #F4B942;

    border-radius: 10px;

    opacity: 0;

    transform: scaleX(0.5);

    transition:
        opacity 0.3s ease,
        transform 0.3s ease;
}


/* Hover */

.sci-counter:hover::before {

    opacity: 1;

    transform: scaleX(1);
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 991px) {

    .sci-impact-counters {

        padding: 60px 25px;
    }


    .sci-counter {

        padding:
            15px 20px;
    }


    .sci-counter-number {

        font-size: 44px;
    }


    .sci-counter-label {

        font-size: 14px;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .sci-impact-counters {

        padding: 50px 20px;
    }


    .sci-counter-container {

        grid-template-columns:
            repeat(2, 1fr);

        row-gap: 35px;
    }


    .sci-counter {

        padding:
            10px 15px;
    }


    /* Remove vertical dividers */

    .sci-counter:not(:last-child)::after {

        display: none;
    }


    /* Add horizontal divider between rows */

    .sci-counter:nth-child(1)::before,
    .sci-counter:nth-child(2)::before {

        content: "";

        position: absolute;

        top: auto;

        bottom: -18px;

        left: 15%;

        width: 70%;

        height: 1px;

        background:
            rgba(255, 255, 255, 0.15);

        opacity: 1;

        transform: none;
    }


    .sci-counter-number {

        font-size: 40px;

        margin-bottom: 9px;
    }


    .sci-counter-label {

        font-size: 13px;

        line-height: 1.4;
    }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

    .sci-impact-counters {

        padding:
            45px 15px;
    }


    .sci-counter {

        padding:
            8px 10px;
    }


    .sci-counter-number {

        font-size: 36px;
    }


    .sci-counter-label {

        font-size: 12px;
    }

}


/* =========================================================
   WHAT WE DO / PROGRAMMES
   ========================================================= */

.sci-programmes {

    width: 100%;

    background: var(--sci-bg);

    padding:
        var(--sci-section-padding-y)
        var(--sci-section-padding-x);
}


/* =========================================================
   CONTAINER
   ========================================================= */

.sci-programmes-container {

    width: 100%;

    max-width: var(--sci-container-width);

    margin: 0 auto;
}


/* =========================================================
   SECTION HEADER
   ========================================================= */

.sci-programmes-header {

    max-width: 760px;

    margin-bottom: 50px;
}


.sci-programmes-header h2 {

    margin: 18px 0 18px;

    color: var(--sci-navy);

    font-size: clamp(36px, 4vw, 52px);

    line-height: 1.12;

    letter-spacing: -1px;

    font-weight: 700;
}


.sci-programmes-header h2 span {

    display: block;

    color: var(--sci-orange);
}


.sci-programmes-header > p {

    max-width: 680px;

    margin: 0;

    color: var(--sci-text);

    font-size: 17px;

    line-height: 1.75;
}


/* =========================================================
   PROGRAMME GRID
   ========================================================= */

.sci-programmes-grid {

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 20px;

    align-items: stretch;
}


/* =========================================================
   PROGRAMME CARD
   ========================================================= */

.sci-programme-card {

    position: relative;

    display: flex;

    flex-direction: column;

    min-height: 440px;

    padding: 30px;

    background: var(--sci-white);

    border: 1px solid var(--sci-border);

    border-radius: var(--sci-radius-lg);

    overflow: hidden;

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease,
        border-color 0.35s ease;
}


/* Top accent */

.sci-programme-card::before {

    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;

    height: 4px;

    background: var(--sci-orange);

    transform: scaleX(0);

    transform-origin: left;

    transition:
        transform 0.35s ease;
}


/* Hover */

.sci-programme-card:hover {

    transform: translateY(-8px);

    border-color:
        rgba(70, 138, 201, 0.35);

    box-shadow:
        0 18px 40px rgba(23, 50, 77, 0.12);
}


.sci-programme-card:hover::before {

    transform: scaleX(1);
}


/* =========================================================
   CARD NUMBER
   ========================================================= */

.sci-programme-icon {

    width: 52px;
    height: 52px;

    display: flex;

    align-items: center;
    justify-content: center;

    margin-bottom: 28px;

    background:
        rgba(70, 138, 201, 0.10);

    border-radius: 12px;

    color: var(--sci-blue);

    font-size: 14px;

    font-weight: 700;

    transition:
        background 0.3s ease,
        color 0.3s ease,
        transform 0.3s ease;
}


.sci-programme-card:hover .sci-programme-icon {

    background: var(--sci-orange);

    color: var(--sci-white);

    transform:
        scale(1.08)
        rotate(-3deg);
}


/* =========================================================
   CARD CONTENT
   ========================================================= */

.sci-programme-content {

    flex: 1;
}


/* Small category label */

.sci-programme-label {

    margin-bottom: 12px;

    color: var(--sci-orange);

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 1.2px;

    line-height: 1.4;
}


/* Card heading */

.sci-programme-card h3 {

    margin: 0 0 15px;

    color: var(--sci-navy);

    font-size: 22px;

    line-height: 1.25;

    font-weight: 700;
}


/* Card paragraph */

.sci-programme-card p {

    margin: 0;

    color: var(--sci-muted);

    font-size: 14px;

    line-height: 1.7;
}


/* =========================================================
   CARD LINK
   ========================================================= */

.sci-programme-link {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    width: fit-content;

    margin-top: 25px;

    color: var(--sci-blue);

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 0.8px;

    text-decoration: none;

    transition:
        color 0.3s ease;
}


.sci-programme-link span {

    font-size: 17px;

    line-height: 1;

    transition:
        transform 0.3s ease;
}


.sci-programme-link:hover {

    color: var(--sci-orange);
}


.sci-programme-link:hover span {

    transform:
        translateX(5px);
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1100px) {

    .sci-programmes-grid {

        grid-template-columns:
            repeat(2, 1fr);

        gap: 20px;
    }


    .sci-programme-card {

        min-height: 400px;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .sci-programmes-header {

        margin-bottom: 35px;
    }


    .sci-programmes-header h2 {

        font-size: 36px;

        line-height: 1.15;
    }


    .sci-programmes-header > p {

        font-size: 15px;

        line-height: 1.7;
    }


    .sci-programmes-grid {

        grid-template-columns: 1fr;

        gap: 16px;
    }


    .sci-programme-card {

        min-height: 0;

        padding: 25px;
    }


    .sci-programme-icon {

        margin-bottom: 22px;
    }


    .sci-programme-card h3 {

        font-size: 21px;
    }

}
/* =========================================================
   SCHOOL A CHILD INITIATIVE
   PAGE 12: DONATE
   Scoped under .saci-donate-page

   Brand palette:
   Primary   Orange     #EB5523
   Secondary Blue       #468AC9
   Accent    Warm Gold  #F4B942
   Bg        Soft White #FAFAF7
   Light     Pale Blue  #F1F7FC
   Text      Deep Navy  #17324D
   Muted     Slate      #667685
========================================================= */

.saci-donate-page {
    --saci-primary: #EB5523;
    --saci-primary-dark: #D44A1C;
    --saci-secondary: #468AC9;
    --saci-accent: #F4B942;
    --saci-light: #F1F7FC;
    --saci-bg-soft: #FAFAF7;
    --saci-dark: #17324D;
    --saci-text: #667685;
    --saci-border: rgba(70, 138, 201, 0.18);
    --saci-white: #FFFFFF;

    font-family: inherit;
    color: var(--saci-text);
    line-height: 1.7;
    overflow: hidden;
}

.saci-donate-page * {
    box-sizing: border-box;
}

/* =========================================================
   GLOBAL
========================================================= */

.saci-donate-container {
    width: min(1120px, 90%);
    margin: 0 auto;
}

.saci-donate-eyebrow {
    display: inline-block;
    margin-bottom: 14px;
    color: var(--saci-primary); /* Primary Orange */
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 2px;
    line-height: 1.3;
    text-transform: uppercase;
}

.saci-donate-heading {
    max-width: 720px;
    margin: 0 auto 55px;
    text-align: center;
}

.saci-donate-heading h2 {
    margin: 0 0 18px;
    color: var(--saci-dark); /* Deep Navy */
    font-size: clamp(32px, 4vw, 48px);
    font-weight: 800;
    line-height: 1.15;
}

.saci-donate-heading p {
    margin: 0;
    font-size: 17px;
    line-height: 1.75;
    color: var(--saci-text);
}


/* =========================================================
   HERO
========================================================= */

.saci-donate-hero {
    position: relative;
    padding: 115px 0 125px;
    background:
        radial-gradient(
            circle at 88% 20%,
            rgba(70, 138, 201, 0.14),
            transparent 30%
        ),
        radial-gradient(
            circle at 10% 90%,
            rgba(244, 185, 66, 0.22),
            transparent 32%
        ),
        var(--saci-bg-soft); /* Soft White */
}

.saci-donate-hero:after {
    content: "";
    position: absolute;
    right: -160px;
    bottom: -190px;
    width: 470px;
    height: 470px;
    border: 75px solid rgba(235, 85, 35, 0.06); /* Primary Orange ring */
    border-radius: 50%;
    pointer-events: none;
}

.saci-donate-hero-content {
    position: relative;
    z-index: 2;
    max-width: 820px;
    margin: 0 auto;
    text-align: center;
}

.saci-donate-hero-content h1 {
    margin: 0 0 25px;
    color: var(--saci-dark); /* Deep Navy */
    font-size: clamp(42px, 6vw, 70px);
    font-weight: 850;
    letter-spacing: -1.5px;
    line-height: 1.06;
}

.saci-donate-hero-content p {
    max-width: 730px;
    margin: 0 auto;
    color: var(--saci-text);
    font-size: clamp(17px, 2vw, 20px);
    line-height: 1.8;
}


/* =========================================================
   SECTION 2 — WHERE YOUR DONATION CAN HELP
========================================================= */

.saci-donation-impact {
    padding: 105px 0;
    background: var(--saci-bg-soft); /* Soft White */
}

.saci-donation-impact-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.saci-donation-impact-card {
    position: relative;
    min-height: 235px;
    padding: 32px 25px;
    border: 1px solid var(--saci-border);
    border-radius: 14px;
    background: var(--saci-white);
    box-shadow: 0 8px 30px rgba(23, 50, 77, 0.06);
    overflow: hidden;
    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;
}

.saci-donation-impact-card:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: var(--saci-primary); /* Primary Orange */
}

.saci-donation-impact-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 17px 38px rgba(23, 50, 77, 0.12);
    border-color: rgba(70, 138, 201, 0.35);
}

.saci-donation-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    margin-bottom: 22px;
    border-radius: 50%;
    background: var(--saci-accent); /* Warm Gold fill */
    color: var(--saci-dark); /* Deep Navy */
    font-size: 23px;
    border: 2px solid var(--saci-primary); /* Orange ring */
}

.saci-donation-impact-card h3 {
    margin: 0 0 10px;
    color: var(--saci-dark); /* Deep Navy */
    font-size: 21px;
    font-weight: 800;
    line-height: 1.25;
}

.saci-donation-impact-card p {
    margin: 0;
    font-size: 15px;
    line-height: 1.65;
    color: var(--saci-text); /* Slate */
}


/* =========================================================
   SECTION 3 — EVERY CONTRIBUTION COUNTS
========================================================= */

.saci-contribution-section {
    padding: 100px 0;
    background: var(--saci-dark); /* Deep Navy */
    position: relative;
    overflow: hidden;
}

.saci-contribution-section::before {
    content: "";
    position: absolute;
    width: 340px;
    height: 340px;
    border-radius: 50%;
    top: -180px;
    right: -100px;
    background: rgba(70, 138, 201, 0.18); /* Secondary Blue bubble */
}

.saci-contribution-section::after {
    content: "";
    position: absolute;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    bottom: -140px;
    left: -80px;
    background: rgba(244, 185, 66, 0.14); /* Warm Gold bubble */
}

.saci-contribution-inner {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    align-items: center;
    gap: 80px;
}

.saci-contribution-section .saci-donate-eyebrow {
    color: var(--saci-accent); /* Warm Gold */
}

.saci-contribution-section h2 {
    margin: 0;
    color: var(--saci-bg-soft); /* Soft White */
    font-size: clamp(35px, 4.5vw, 54px);
    font-weight: 800;
    line-height: 1.12;
}

.saci-contribution-copy {
    margin: 0;
    color: rgba(250, 250, 247, 0.9);
    font-size: 19px;
    line-height: 1.85;
}


/* =========================================================
   SECTION 4 — DONATION FORM
========================================================= */

.saci-donate-form-section {
    padding: 110px 0 120px;
    background: var(--saci-light); /* Pale Blue */
}

.saci-form-wrapper {
    max-width: 850px;
    margin: 0 auto;
    padding: 55px;
    border-radius: 16px;
    background: var(--saci-white);
    box-shadow: 0 15px 55px rgba(23, 50, 77, 0.1);
    border: 1px solid var(--saci-border);
}

.saci-form-header {
    margin-bottom: 38px;
    text-align: center;
}

.saci-form-header h2 {
    margin: 0 0 12px;
    color: var(--saci-dark); /* Deep Navy */
    font-size: clamp(32px, 4vw, 45px);
    font-weight: 800;
    line-height: 1.15;
}

.saci-form-header p {
    max-width: 650px;
    margin: 0 auto;
    font-size: 16px;
    color: var(--saci-text);
}


/* =========================================================
   FORM FIELDS
========================================================= */

.saci-form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
}

.saci-form-field {
    display: flex;
    flex-direction: column;
}

.saci-form-field.full-width {
    grid-column: 1 / -1;
}

.saci-form-field label {
    margin-bottom: 8px;
    color: var(--saci-dark);
    font-size: 14px;
    font-weight: 700;
}

.saci-form-field input,
.saci-form-field textarea,
.saci-form-field select {
    width: 100%;
    min-height: 52px;
    padding: 13px 15px;
    border: 1px solid rgba(70, 138, 201, 0.28);
    border-radius: 8px;
    outline: none;
    background: #fff;
    color: var(--saci-dark);
    font-family: inherit;
    font-size: 15px;
    transition:
        border-color .2s ease,
        box-shadow .2s ease;
}

.saci-form-field textarea {
    min-height: 125px;
    resize: vertical;
}

.saci-form-field input:focus,
.saci-form-field textarea:focus,
.saci-form-field select:focus {
    border-color: var(--saci-primary); /* Primary Orange */
    box-shadow: 0 0 0 3px rgba(235, 85, 35, 0.14);
}

.saci-form-field input::placeholder,
.saci-form-field textarea::placeholder {
    color: rgba(102, 118, 133, 0.65);
}


/* =========================================================
   DONATION AMOUNT
========================================================= */

.saci-amount-section {
    grid-column: 1 / -1;
}

.saci-amount-label {
    display: block;
    margin-bottom: 12px;
    color: var(--saci-dark);
    font-size: 14px;
    font-weight: 700;
}

.saci-amount-options {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.saci-amount-option {
    position: relative;
}

.saci-amount-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.saci-amount-option label {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 10px;
    border: 1px solid rgba(70, 138, 201, 0.28);
    border-radius: 8px;
    background: var(--saci-white);
    color: var(--saci-dark);
    cursor: pointer;
    font-size: 14px;
    font-weight: 700;
    text-align: center;
    transition: all .2s ease;
}

.saci-amount-option label:hover {
    border-color: var(--saci-primary);
    background: rgba(235, 85, 35, 0.04);
}

.saci-amount-option input:checked + label {
    border-color: var(--saci-primary);
    background: var(--saci-primary);
    color: var(--saci-white);
    box-shadow: 0 4px 12px rgba(235, 85, 35, 0.28);
}


/* =========================================================
   OTHER AMOUNT
========================================================= */

.saci-other-amount {
    display: none;
    margin-top: 12px;
}

.saci-other-amount.active {
    display: block;
}


/* =========================================================
   SUPPORT AREA
========================================================= */

.saci-support-options {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.saci-support-option {
    position: relative;
}

.saci-support-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.saci-support-option label {
    display: flex;
    align-items: center;
    min-height: 50px;
    padding: 12px 15px;
    border: 1px solid rgba(70, 138, 201, 0.28);
    border-radius: 8px;
    background: var(--saci-white);
    color: var(--saci-dark);
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    transition: all .2s ease;
}

.saci-support-option label:hover {
    border-color: var(--saci-primary);
    background: rgba(235, 85, 35, 0.04);
}

.saci-support-option input:checked + label {
    border-color: var(--saci-primary);
    background: rgba(235, 85, 35, 0.08);
    color: var(--saci-primary-dark);
}


/* =========================================================
   FORM SUBMIT
========================================================= */

.saci-submit-wrapper {
    grid-column: 1 / -1;
    margin-top: 5px;
    text-align: center;
}

.saci-donate-submit {
    width: 100%;
    min-height: 58px;
    padding: 15px 30px;
    border: 2px solid var(--saci-primary);
    border-radius: 50px;
    background: var(--saci-primary);
    color: var(--saci-white);
    cursor: pointer;
    font-family: inherit;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: all .25s ease;
    box-shadow: 0 12px 28px rgba(235, 85, 35, 0.28);
}

.saci-donate-submit:hover,
.saci-donate-submit:focus {
    background: var(--saci-accent); /* Warm Gold */
    border-color: var(--saci-accent);
    color: var(--saci-dark);
    transform: translateY(-2px);
    box-shadow: 0 16px 32px rgba(244, 185, 66, 0.4);
}

.saci-payment-note {
    margin: 20px auto 0;
    color: var(--saci-text);
    font-size: 13px;
    line-height: 1.6;
}

.saci-payment-note strong {
    color: var(--saci-dark);
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 980px) {

    .saci-donation-impact-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .saci-contribution-inner {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .saci-amount-options {
        grid-template-columns: repeat(2, 1fr);
    }
}


@media (max-width: 600px) {

    .saci-donate-container {
        width: 88%;
    }

    .saci-donate-hero {
        padding: 75px 0 80px;
    }

    .saci-donate-hero-content h1 {
        font-size: 42px;
        letter-spacing: -1px;
    }

    .saci-donate-hero-content p {
        font-size: 16px;
        line-height: 1.7;
    }

    .saci-donation-impact,
    .saci-contribution-section,
    .saci-donate-form-section {
        padding: 75px 0;
    }

    .saci-donate-heading {
        margin-bottom: 38px;
    }

    .saci-donate-heading h2 {
        font-size: 34px;
    }

    .saci-donation-impact-grid {
        grid-template-columns: 1fr;
    }

    .saci-donation-impact-card {
        min-height: auto;
    }

    .saci-contribution-section h2 {
        font-size: 36px;
    }

    .saci-contribution-copy {
        font-size: 17px;
    }

    .saci-form-wrapper {
        padding: 30px 20px;
        border-radius: 12px;
    }

    .saci-form-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .saci-form-field.full-width,
    .saci-amount-section,
    .saci-submit-wrapper {
        grid-column: auto;
    }

    .saci-amount-options {
        grid-template-columns: repeat(2, 1fr);
    }

    .saci-support-options {
        grid-template-columns: 1fr;
    }

}

/* =========================================================
   SCHOOL A CHILD INITIATIVE
   HOME PAGE CSS
   Elementor Ready
========================================================= */


/* =========================================================
   GLOBAL CONTAINER
========================================================= */

.sci-container {
    width: min(1200px, calc(100% - 60px));
    margin-left: auto;
    margin-right: auto;
}


/* =========================================================
   SHARED TYPOGRAPHY
========================================================= */

.sci-eyebrow {
    margin-bottom: 16px;
    color: #EB5523;
    font-size: 12px;
    line-height: 1.4;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.sci-eyebrow-line {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sci-eyebrow-line::before {
    content: "";
    width: 28px;
    height: 3px;
    flex: 0 0 28px;
    background: #EB5523;
    border-radius: 3px;
}

.sci-eyebrow-light {
    color: #F4B942;
}

.sci-eyebrow-light::before {
    background: #F4B942;
}

.sci-heading {
    margin: 0;
    color: #17324D;
    font-size: clamp(34px, 4vw, 52px);
    line-height: 1.12;
    font-weight: 800;
    letter-spacing: -1.5px;
}

.sci-heading span {
    color: #EB5523;
}

.sci-btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.sci-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 50px;
    padding: 14px 26px;
    border-radius: 8px;
    font-size: 13px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: .4px;
    text-decoration: none !important;
    transition: all .3s ease;
}

.sci-btn span {
    transition: transform .3s ease;
}

.sci-btn:hover span {
    transform: translateX(4px);
}

.sci-btn-primary {
    background: #EB5523;
    color: #FFFFFF !important;
    border: 2px solid #EB5523;
}

.sci-btn-primary:hover {
    background: #D9461B;
    border-color: #D9461B;
    color: #FFFFFF !important;
    transform: translateY(-3px);
    box-shadow: 0 12px 25px rgba(235, 85, 35, .20);
}

.sci-btn-secondary {
    background: transparent;
    color: #468AC9 !important;
    border: 2px solid #468AC9;
}

.sci-btn-secondary:hover {
    background: #468AC9;
    color: #FFFFFF !important;
    transform: translateY(-3px);
}

.sci-btn-light {
    background: #FFFFFF;
    color: #17324D !important;
    border: 2px solid #FFFFFF;
}

.sci-btn-light:hover {
    background: #F4B942;
    border-color: #F4B942;
    color: #17324D !important;
    transform: translateY(-3px);
}

.sci-link,
.sci-card-link {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #EB5523 !important;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .7px;
    text-decoration: none !important;
    transition: all .3s ease;
}

.sci-link span,
.sci-card-link span {
    transition: transform .3s ease;
}

.sci-link:hover,
.sci-card-link:hover {
    color: #D9461B !important;
}

.sci-link:hover span,
.sci-card-link:hover span {
    transform: translateX(4px);
}

.sci-section {
    padding: 80px 0;
}


/* =========================================================
   SECTION 1: HERO
========================================================= */

.sci-home-hero {
    position: relative;
    overflow: hidden;
    padding: 90px 0;
    background: #FAFAF7;
}

.sci-home-hero-inner {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(420px, .85fr);
    align-items: center;
    gap: 70px;
    width: min(1200px, calc(100% - 60px));
    margin: 0 auto;
}

.sci-home-hero-content {
    position: relative;
    z-index: 2;
}

.sci-home-hero h1 {
    max-width: 760px;
    margin: 0 0 25px;
    color: #17324D;
    font-size: clamp(44px, 5.3vw, 72px);
    line-height: 1.02;
    font-weight: 850;
    letter-spacing: -2.5px;
}

.sci-home-hero h1 span {
    display: block;
    color: #EB5523;
}

.sci-home-hero-content > p {
    max-width: 680px;
    margin: 0 0 17px;
    color: #334E68;
    font-size: 17px;
    line-height: 1.75;
}

.sci-home-hero-content .sci-btn-row {
    margin-top: 32px;
}

.sci-home-hero-image {
    position: relative;
    min-height: 540px;
}

.sci-hero-image-frame {
    position: absolute;
    z-index: 2;
    top: 0;
    right: 30px;
    width: min(100%, 490px);
    height: 500px;
    overflow: hidden;
    border-radius: 14px;
    background: #DCE6EF;
    box-shadow: 0 25px 55px rgba(23, 50, 77, .15);
}

.sci-hero-image-frame::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        transparent 60%,
        rgba(23, 50, 77, .16)
    );
    pointer-events: none;
}

.sci-hero-image-frame img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform .5s ease;
}

.sci-hero-image-frame:hover img {
    transform: scale(1.04);
}

.sci-hero-shape {
    position: absolute;
    z-index: 1;
    right: 0;
    bottom: 5px;
    width: 230px;
    height: 230px;
    border-radius: 14px;
    background: #EB5523;
}

.sci-hero-badge {
    position: absolute;
    z-index: 4;
    left: 0;
    bottom: 35px;
    display: flex;
    flex-direction: column;
    padding: 20px 24px;
    min-width: 205px;
    border-radius: 10px;
    background: #17324D;
    color: #FFFFFF;
    box-shadow: 0 15px 35px rgba(23, 50, 77, .2);
}

.sci-hero-badge strong {
    margin-bottom: 5px;
    color: #F4B942;
    font-size: 17px;
}

.sci-hero-badge span {
    color: #FFFFFF;
    font-size: 13px;
    opacity: .9;
}


/* =========================================================
   SECTION 2: INTRODUCTION
========================================================= */

.sci-home-intro {
    background: #FFFFFF;
}

.sci-home-intro-grid {
    display: grid;
    grid-template-columns: .85fr 1.15fr;
    gap: 90px;
    align-items: start;
}

.sci-home-intro-heading {
    position: sticky;
    top: 100px;
}

.sci-home-intro-content {
    max-width: 700px;
}

.sci-home-intro-content p {
    margin: 0 0 18px;
    color: #334E68;
    font-size: 16px;
    line-height: 1.8;
}

.sci-home-intro-content .sci-link {
    margin-top: 12px;
}


/* =========================================================
   SECTION 3: IMPACT
========================================================= */

.sci-home-impact {
    position: relative;
    padding: 75px 0 65px;
    overflow: hidden;
    background: #17324D;
}

.sci-home-impact::before {
    content: "";
    position: absolute;
    top: -100px;
    right: -100px;
    width: 280px;
    height: 280px;
    border: 70px solid rgba(244, 185, 66, .08);
    border-radius: 50%;
}

.sci-home-impact .sci-container {
    position: relative;
    z-index: 2;
}

.sci-impact-heading {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 50px;
}

.sci-impact-heading .sci-eyebrow {
    justify-content: center;
}

.sci-impact-heading h2 {
    margin: 0;
    color: #FFFFFF;
    font-size: clamp(32px, 4vw, 48px);
    line-height: 1.12;
    font-weight: 800;
}

.sci-impact-heading h2 span {
    color: #F4B942;
}

.sci-impact-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.sci-impact-item {
    padding: 10px 35px;
    text-align: center;
    border-right: 1px solid rgba(255, 255, 255, .20);
}

.sci-impact-item:last-child {
    border-right: 0;
}

.sci-impact-number {
    margin-bottom: 8px;
    color: #FFFFFF;
    font-size: clamp(42px, 5vw, 64px);
    line-height: 1;
    font-weight: 850;
    letter-spacing: -2px;
}

.sci-impact-label {
    color: rgba(255, 255, 255, .78);
    font-size: 13px;
    line-height: 1.5;
    font-weight: 600;
}

.sci-impact-label span {
    color: #F4B942;
}

.sci-impact-note {
    margin: 35px 0 0;
    color: rgba(255, 255, 255, .55);
    text-align: center;
    font-size: 11px;
}


/* =========================================================
   SECTION 4: PROGRAMMES
========================================================= */

.sci-home-programmes {
    background: #FAFAF7;
}

.sci-programmes-heading {
    display: grid;
    grid-template-columns: 1fr .75fr;
    gap: 70px;
    align-items: end;
    margin-bottom: 45px;
}

.sci-programmes-heading > p {
    margin: 0;
    color: #667685;
    font-size: 16px;
    line-height: 1.75;
}

.sci-programmes-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.sci-programme-card {
    position: relative;
    min-height: 420px;
    padding: 30px;
    overflow: hidden;
    border: 1px solid #DCE6EF;
    border-radius: 10px;
    background: #FFFFFF;
    transition: all .3s ease;
}

.sci-programme-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: #EB5523;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .3s ease;
}

.sci-programme-card:hover {
    transform: translateY(-7px);
    border-color: rgba(235, 85, 35, .3);
    box-shadow: 0 18px 40px rgba(23, 50, 77, .10);
}

.sci-programme-card:hover::before {
    transform: scaleX(1);
}

.sci-programme-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    margin-bottom: 32px;
    border-radius: 50%;
    background: #F1F7FC;
    color: #468AC9;
    font-size: 14px;
    font-weight: 800;
}

.sci-programme-label {
    margin-bottom: 10px;
    color: #EB5523;
    font-size: 11px;
    line-height: 1.4;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.sci-programme-card h3 {
    margin: 0 0 16px;
    color: #17324D;
    font-size: 22px;
    line-height: 1.25;
    font-weight: 800;
}

.sci-programme-card p {
    margin: 0 0 25px;
    color: #667685;
    font-size: 14px;
    line-height: 1.7;
}

.sci-programme-card .sci-card-link {
    margin-top: auto;
}


/* =========================================================
   SECTION 5: WHY EDUCATION
========================================================= */

.sci-home-why {
    background: #FFFFFF;
}

.sci-why-grid {
    display: grid;
    grid-template-columns: .85fr 1.15fr;
    gap: 90px;
    align-items: start;
}

.sci-why-heading {
    position: sticky;
    top: 100px;
}

.sci-why-content p {
    margin: 0 0 18px;
    color: #334E68;
    font-size: 16px;
    line-height: 1.8;
}

.sci-why-content .sci-btn {
    margin-top: 10px;
}

.sci-why-highlight {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 25px;
    align-items: start;
    margin-top: 60px;
    padding: 35px;
    border-radius: 12px;
    background: #17324D;
}

.sci-why-highlight-number {
    color: #F4B942;
    font-size: 18px;
    font-weight: 800;
}

.sci-why-highlight h3 {
    margin: 0 0 10px;
    color: #FFFFFF;
    font-size: 23px;
    line-height: 1.3;
    font-weight: 800;
}

.sci-why-highlight p {
    margin: 0;
    color: rgba(255, 255, 255, .75);
    font-size: 14px;
    line-height: 1.75;
}


/* =========================================================
   SECTION 6: FEATURED CHILD STORY
========================================================= */

.sci-home-story {
    background: #F1F7FC;
}

.sci-story-grid {
    display: grid;
    grid-template-columns: .95fr 1.05fr;
    gap: 85px;
    align-items: center;
}

.sci-story-image {
    position: relative;
    min-height: 500px;
}

.sci-story-image-frame {
    position: absolute;
    top: 0;
    left: 30px;
    width: calc(100% - 30px);
    height: 470px;
    overflow: hidden;
    border-radius: 14px;
    background: #DCE6EF;
    box-shadow: 0 20px 45px rgba(23, 50, 77, .12);
}

.sci-story-image-frame::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 25px;
    left: -30px;
    width: 100%;
    height: 100%;
    border-radius: 14px;
    background: #EB5523;
}

.sci-story-image-frame img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.sci-story-badge {
    position: absolute;
    z-index: 3;
    bottom: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    padding: 19px 23px;
    min-width: 210px;
    border-radius: 9px;
    background: #17324D;
    box-shadow: 0 15px 35px rgba(23, 50, 77, .18);
}

.sci-story-badge span {
    margin-bottom: 5px;
    color: #F4B942;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.sci-story-badge strong {
    color: #FFFFFF;
    font-size: 17px;
}

.sci-story-content p {
    margin: 0 0 17px;
    color: #334E68;
    font-size: 16px;
    line-height: 1.8;
}

.sci-story-content .sci-btn {
    margin-top: 10px;
}


/* =========================================================
   SECTION 7: OTHER CHILDREN
========================================================= */

.sci-section-soft {
    background: #FAFAF7;
}

.sci-centred-heading {
    max-width: 700px;
    margin: 0 auto 45px;
    text-align: center;
}

.sci-centred-heading .sci-eyebrow {
    display: block;
}

.sci-children-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
    max-width: 950px;
    margin: 0 auto;
}

.sci-child-card {
    overflow: hidden;
    border: 1px solid #DCE6EF;
    border-radius: 12px;
    background: #FFFFFF;
    transition: all .3s ease;
}

.sci-child-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px rgba(23, 50, 77, .10);
}

.sci-child-image {
    height: 300px;
    overflow: hidden;
    background: #DCE6EF;
}

.sci-child-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform .5s ease;
}

.sci-child-card:hover .sci-child-image img {
    transform: scale(1.05);
}

.sci-child-content {
    padding: 30px;
}

.sci-child-label {
    margin-bottom: 8px;
    color: #EB5523;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.sci-child-content h3 {
    margin: 0 0 12px;
    color: #17324D;
    font-size: 25px;
    line-height: 1.25;
    font-weight: 800;
}

.sci-child-content p {
    margin: 0 0 22px;
    color: #667685;
    font-size: 14px;
    line-height: 1.7;
}


/* =========================================================
   SECTION 8: COMMUNITY PARTNERSHIPS
========================================================= */

.sci-home-partnerships {
    background: #FFFFFF;
}

.sci-partnership-grid {
    display: grid;
    grid-template-columns: 1fr .85fr;
    gap: 80px;
    align-items: center;
}

.sci-partnership-content p {
    margin: 0 0 18px;
    color: #334E68;
    font-size: 16px;
    line-height: 1.8;
}

.sci-partnership-content .sci-btn {
    margin-top: 12px;
}

.sci-partnership-visual {
    position: relative;
    min-height: 410px;
}

.sci-partner-main-card {
    position: absolute;
    top: 35px;
    left: 35px;
    z-index: 2;
    width: calc(100% - 70px);
    padding: 45px 35px;
    border-radius: 14px;
    background: #17324D;
    box-shadow: 0 20px 45px rgba(23, 50, 77, .15);
}

.sci-partner-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 65px;
    height: 65px;
    margin-bottom: 25px;
    border-radius: 50%;
    background: #F4B942;
    font-size: 27px;
}

.sci-partner-main-card h3 {
    margin: 0 0 12px;
    color: #FFFFFF;
    font-size: 28px;
    font-weight: 800;
}

.sci-partner-main-card p {
    margin: 0;
    color: rgba(255, 255, 255, .75);
    font-size: 14px;
    line-height: 1.7;
}

.sci-partner-mini-card {
    position: absolute;
    z-index: 3;
    display: flex;
    flex-direction: column;
    padding: 18px 22px;
    border-radius: 9px;
    background: #FFFFFF;
    border: 1px solid #DCE6EF;
    box-shadow: 0 12px 30px rgba(23, 50, 77, .10);
}

.sci-partner-mini-card strong {
    color: #EB5523;
    font-size: 11px;
    letter-spacing: 1px;
}

.sci-partner-mini-card span {
    margin-top: 4px;
    color: #667685;
    font-size: 12px;
}

.sci-partner-mini-one {
    top: 0;
    right: 0;
}

.sci-partner-mini-two {
    right: 10px;
    bottom: 0;
}


/* =========================================================
   SECTION 9: HOW YOU CAN HELP
========================================================= */

.sci-home-help {
    background: #F1F7FC;
}

.sci-help-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.sci-help-card {
    position: relative;
    padding: 30px;
    overflow: hidden;
    border: 1px solid #DCE6EF;
    border-radius: 11px;
    background: #FFFFFF;
    transition: all .3s ease;
}

.sci-help-card:hover {
    transform: translateY(-7px);
    box-shadow: 0 18px 40px rgba(23, 50, 77, .10);
}

.sci-help-number {
    position: absolute;
    top: 20px;
    right: 22px;
    color: #DCE6EF;
    font-size: 28px;
    font-weight: 850;
}

.sci-help-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    margin-bottom: 25px;
    border-radius: 50%;
    background: #FFF4EE;
    font-size: 24px;
}

.sci-help-card h3 {
    margin: 0 0 14px;
    color: #17324D;
    font-size: 19px;
    line-height: 1.3;
    font-weight: 800;
}

.sci-help-card p {
    margin: 0 0 25px;
    color: #667685;
    font-size: 14px;
    line-height: 1.7;
}


/* =========================================================
   SECTION 10: FINAL CTA
========================================================= */

.sci-home-final-cta {
    position: relative;
    overflow: hidden;
    padding: 95px 0;
    background: #17324D;
}

.sci-home-final-cta::before {
    content: "";
    position: absolute;
    top: -150px;
    left: -150px;
    width: 380px;
    height: 380px;
    border: 90px solid rgba(235, 85, 35, .15);
    border-radius: 50%;
}

.sci-home-final-cta::after {
    content: "";
    position: absolute;
    right: -120px;
    bottom: -180px;
    width: 400px;
    height: 400px;
    border: 90px solid rgba(244, 185, 66, .10);
    border-radius: 50%;
}

.sci-final-cta-content {
    position: relative;
    z-index: 2;
    max-width: 820px;
    margin: 0 auto;
    text-align: center;
}

.sci-final-cta-content .sci-eyebrow {
    justify-content: center;
}

.sci-final-cta-content h2 {
    margin: 0 0 22px;
    color: #FFFFFF;
    font-size: clamp(36px, 5vw, 58px);
    line-height: 1.1;
    font-weight: 850;
    letter-spacing: -1.5px;
}

.sci-final-cta-content h2 span {
    color: #F4B942;
}

.sci-final-cta-content p {
    max-width: 680px;
    margin: 0 auto 10px;
    color: rgba(255, 255, 255, .78);
    font-size: 16px;
    line-height: 1.8;
}

.sci-final-cta-content .sci-btn {
    margin-top: 25px;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

    .sci-home-hero-inner {
        grid-template-columns: minmax(0, 1fr) minmax(350px, .8fr);
        gap: 45px;
    }

    .sci-home-hero h1 {
        font-size: 52px;
    }

    .sci-programmes-grid,
    .sci-help-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .sci-programme-card {
        min-height: 390px;
    }

    .sci-impact-item {
        padding-left: 20px;
        padding-right: 20px;
    }
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .sci-container,
    .sci-home-hero-inner {
        width: min(100% - 50px, 900px);
    }

    .sci-section {
        padding: 60px 0;
    }

    /* Hero */
    .sci-home-hero {
        padding: 70px 0;
    }

    .sci-home-hero-inner {
        grid-template-columns: 1fr;
        gap: 55px;
    }

    .sci-home-hero h1 {
        max-width: 750px;
    }

    .sci-home-hero-content {
        max-width: 750px;
    }

    .sci-home-hero-image {
        width: min(100%, 600px);
        min-height: 560px;
        margin: 0 auto;
    }

    .sci-hero-image-frame {
        right: 30px;
        width: calc(100% - 60px);
        height: 520px;
    }

    /* Introduction */
    .sci-home-intro-grid,
    .sci-why-grid {
        grid-template-columns: 1fr;
        gap: 35px;
    }

    .sci-home-intro-heading,
    .sci-why-heading {
        position: static;
    }

    /* Programmes */
    .sci-programmes-heading {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    /* Impact */
    .sci-impact-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .sci-impact-item:nth-child(2) {
        border-right: 0;
    }

    .sci-impact-item:nth-child(-n+2) {
        padding-bottom: 35px;
        border-bottom: 1px solid rgba(255, 255, 255, .20);
    }

    .sci-impact-item:nth-child(n+3) {
        padding-top: 35px;
    }

    /* Story */
    .sci-story-grid {
        grid-template-columns: 1fr;
        gap: 55px;
    }

    .sci-story-image {
        width: min(100%, 600px);
        margin: 0 auto;
    }

    /* Partnership */
    .sci-partnership-grid {
        grid-template-columns: 1fr;
        gap: 55px;
    }

    .sci-partnership-visual {
        width: min(100%, 600px);
        margin: 0 auto;
    }

    /* Help */
    .sci-help-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .sci-container,
    .sci-home-hero-inner {
        width: calc(100% - 40px);
    }

    .sci-section {
        padding: 50px 0;
    }

    /* Shared */
    .sci-heading {
        font-size: 34px;
        letter-spacing: -1px;
    }

    .sci-btn-row {
        flex-direction: column;
    }

    .sci-btn-row .sci-btn {
        width: 100%;
    }

    /* Hero */
    .sci-home-hero {
        padding: 55px 0;
    }

    .sci-home-hero h1 {
        font-size: 43px;
        line-height: 1.04;
        letter-spacing: -1.7px;
    }

    .sci-home-hero-content > p {
        font-size: 15px;
        line-height: 1.7;
    }

    .sci-home-hero-image {
        min-height: 430px;
    }

    .sci-hero-image-frame {
        top: 0;
        right: 15px;
        width: calc(100% - 30px);
        height: 400px;
    }

    .sci-hero-shape {
        width: 150px;
        height: 150px;
        bottom: 0;
    }

    .sci-hero-badge {
        left: 0;
        bottom: 20px;
        min-width: 175px;
        padding: 15px 18px;
    }

    .sci-hero-badge strong {
        font-size: 15px;
    }

    .sci-hero-badge span {
        font-size: 11px;
    }

    /* Intro */
    .sci-home-intro-content p,
    .sci-why-content p,
    .sci-partnership-content p,
    .sci-story-content p {
        font-size: 15px;
    }

    /* Impact */
    .sci-home-impact {
        padding: 55px 0;
    }

    .sci-impact-heading {
        margin-bottom: 35px;
    }

    .sci-impact-heading h2 {
        font-size: 34px;
    }

    .sci-impact-item {
        padding-left: 10px;
        padding-right: 10px;
    }

    .sci-impact-number {
        font-size: 42px;
    }

    .sci-impact-label {
        font-size: 11px;
    }

    /* Programmes */
    .sci-programmes-grid {
        grid-template-columns: 1fr;
    }

    .sci-programme-card {
        min-height: auto;
        padding: 25px;
    }

    .sci-programme-number {
        margin-bottom: 25px;
    }

    /* Why */
    .sci-why-highlight {
        grid-template-columns: 1fr;
        gap: 12px;
        margin-top: 40px;
        padding: 25px;
    }

    /* Story */
    .sci-story-image {
        min-height: 390px;
    }

    .sci-story-image-frame {
        left: 15px;
        width: calc(100% - 15px);
        height: 370px;
    }

    .sci-story-badge {
        min-width: 180px;
        padding: 15px 18px;
    }

    /* Children */
    .sci-children-grid {
        grid-template-columns: 1fr;
    }

    .sci-child-image {
        height: 270px;
    }

    /* Partnership */
    .sci-partnership-visual {
        min-height: 390px;
    }

    .sci-partner-main-card {
        top: 35px;
        left: 15px;
        width: calc(100% - 30px);
        padding: 35px 25px;
    }

    .sci-partner-main-card h3 {
        font-size: 24px;
    }

    .sci-partner-mini-card {
        padding: 14px 16px;
    }

    .sci-partner-mini-one {
        right: 0;
    }

    .sci-partner-mini-two {
        right: 0;
    }

    /* Help */
    .sci-help-grid {
        grid-template-columns: 1fr;
    }

    .sci-help-card {
        padding: 25px;
    }

    /* Final CTA */
    .sci-home-final-cta {
        padding: 65px 0;
    }

    .sci-final-cta-content h2 {
        font-size: 36px;
    }

    .sci-final-cta-content p {
        font-size: 15px;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .sci-home-hero h1 {
        font-size: 38px;
    }

    .sci-heading {
        font-size: 31px;
    }

    .sci-impact-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .sci-impact-number {
        font-size: 36px;
    }

    .sci-impact-label {
        font-size: 10px;
    }

    .sci-home-hero-image {
        min-height: 360px;
    }

    .sci-hero-image-frame {
        height: 335px;
    }

    .sci-hero-shape {
        width: 120px;
        height: 120px;
    }

    .sci-hero-badge {
        min-width: 155px;
    }

    .sci-story-image {
        min-height: 340px;
    }

    .sci-story-image-frame {
        height: 320px;
    }

}

/* =========================================================
   PEOPLE PAGE
   Brand palette:
   Primary   Orange     #EB5523
   Secondary Blue       #468AC9
   Accent    Warm Gold  #F4B942
   Bg        Soft White #FAFAF7
   Light     Pale Blue  #F1F7FC
   Text      Deep Navy  #17324D
   Muted     Slate      #667685
========================================================= */

.saci-people-hero *,
.saci-team-section *,
.saci-people-hero *::before,
.saci-people-hero *::after,
.saci-team-section *::before,
.saci-team-section *::after {
    box-sizing: border-box;
}


/* =========================================================
   HERO
========================================================= */

.saci-people-hero {
    position: relative;
    width: 100%;
    padding: 125px 20px 120px;

    background:
        radial-gradient(
            circle at 85% 20%,
            rgba(244, 185, 66, 0.18),
            transparent 34%
        ),
        radial-gradient(
            circle at 15% 80%,
            rgba(70, 138, 201, 0.18),
            transparent 38%
        ),
        #17324D; /* Deep Navy base */

    overflow: hidden;
}

.saci-people-hero::before {
    content: "";
    position: absolute;

    width: 500px;
    height: 500px;

    top: -280px;
    right: -180px;

    border: 1px solid rgba(244, 185, 66, 0.18); /* Warm Gold */
    border-radius: 50%;
}

.saci-people-hero::after {
    content: "";
    position: absolute;

    width: 350px;
    height: 350px;

    bottom: -230px;
    left: -170px;

    border: 1px solid rgba(70, 138, 201, 0.28); /* Secondary Blue */
    border-radius: 50%;
}

.saci-people-hero-container {
    position: relative;
    z-index: 2;

    width: 100%;
    max-width: 1180px;

    margin: 0 auto;
}

.saci-people-hero-content {
    max-width: 850px;
    margin: 0 auto;

    text-align: center;
}

.saci-people-hero-eyebrow {
    display: inline-block;

    margin-bottom: 18px;

    color: #F4B942; /* Warm Gold */

    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2.5px;
}

.saci-people-hero h1 {
    margin: 0 auto 25px;

    color: #FAFAF7; /* Soft White */

    font-size: 56px;
    font-weight: 700;
    line-height: 1.1;
}

.saci-people-hero p {
    max-width: 700px;

    margin: 0 auto;

    color: rgba(250, 250, 247, 0.88);

    font-size: 18px;
    line-height: 1.75;
}


/* =========================================================
   TEAM SECTIONS
========================================================= */

.saci-team-section {
    width: 100%;
    padding: 105px 20px;
}

.saci-team-container {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
}

.saci-leadership-section {
    background: #FAFAF7; /* Soft White */
}

.saci-field-team-section {
    background: #F1F7FC; /* Pale Blue */
}


/* =========================================================
   SECTION HEADINGS
========================================================= */

.saci-team-section-heading {
    max-width: 760px;

    margin: 0 auto 55px;

    text-align: center;
}

.saci-team-eyebrow {
    display: inline-block;

    margin-bottom: 15px;

    color: #EB5523; /* Primary Orange */

    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2.5px;
}

.saci-team-section-heading h2 {
    margin: 0;

    color: #17324D; /* Deep Navy */

    font-size: 44px;
    font-weight: 700;
    line-height: 1.15;
}


/* =========================================================
   GRIDS
========================================================= */

.saci-team-grid {
    display: grid;
    gap: 28px;
}

.saci-leadership-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.saci-field-team-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}


/* =========================================================
   TEAM CARD
========================================================= */

.saci-team-card {
    position: relative;

    display: flex;
    flex-direction: column;

    padding: 36px;

    background: #FFFFFF;

    border: 1px solid rgba(70, 138, 201, 0.18); /* soft Secondary Blue */
    border-radius: 16px;

    overflow: hidden;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}

/* Top accent bar — Primary Orange */
.saci-team-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 4px;

    background: #EB5523;
}

.saci-team-card:hover {
    transform: translateY(-5px);

    border-color: rgba(70, 138, 201, 0.35);

    box-shadow:
        0 18px 40px rgba(23, 50, 77, 0.12);
}


/* =========================================================
   TEAM MEMBER IMAGE
========================================================= */

.saci-team-card-top {
    display: flex;
    align-items: center;

    gap: 18px;

    margin-bottom: 28px;
}

.saci-team-photo {
    flex: 0 0 auto;

    width: 76px;
    height: 76px;

    border-radius: 50%;

    overflow: hidden;

    background: #F1F7FC; /* Pale Blue fallback */
    border: 3px solid #F1F7FC;
}

.saci-team-photo img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    border-radius: 50%;
}


/* =========================================================
   PERSON INFORMATION
========================================================= */

.saci-team-person {
    min-width: 0;
}

.saci-team-person h3 {
    margin: 0 0 5px;

    color: #17324D; /* Deep Navy */

    font-size: 23px;
    font-weight: 700;
    line-height: 1.2;
}

.saci-team-person span {
    display: block;

    color: #EB5523; /* Primary Orange */

    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    line-height: 1.4;
    text-transform: uppercase;
}


/* =========================================================
   BIO
========================================================= */

.saci-team-card-body {
    flex: 1;
}

.saci-team-card-body p {
    margin: 0 0 16px;

    color: #667685; /* Slate */

    font-size: 15px;
    line-height: 1.75;
}

.saci-team-card-body p:last-child {
    margin-bottom: 0;
}


/* =========================================================
   LEADERSHIP
========================================================= */

.saci-leadership-grid .saci-team-card {
    padding: 42px;
}

.saci-leadership-grid .saci-team-card-body p {
    font-size: 16px;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 980px) {

    .saci-people-hero {
        padding: 100px 20px;
    }

    .saci-people-hero h1 {
        font-size: 48px;
    }

    .saci-team-section {
        padding: 85px 20px;
    }

    .saci-field-team-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .saci-people-hero {
        padding: 75px 20px 80px;
    }

    .saci-people-hero-eyebrow {
        font-size: 11px;
        letter-spacing: 2px;
    }

    .saci-people-hero h1 {
        font-size: 36px;
        line-height: 1.18;
    }

    .saci-people-hero p {
        font-size: 15px;
        line-height: 1.7;
    }

    .saci-team-section {
        padding: 70px 20px;
    }

    .saci-team-section-heading {
        margin-bottom: 40px;
    }

    .saci-team-section-heading h2 {
        font-size: 34px;
        line-height: 1.2;
    }

    .saci-leadership-grid,
    .saci-field-team-grid {
        grid-template-columns: 1fr;
    }

    .saci-team-card,
    .saci-leadership-grid .saci-team-card {
        padding: 30px 27px;
    }

    .saci-team-card-top {
        gap: 15px;
        margin-bottom: 23px;
    }

    .saci-team-photo {
        width: 64px;
        height: 64px;
    }

    .saci-team-person h3 {
        font-size: 21px;
    }

    .saci-team-person span {
        font-size: 11px;
    }

    .saci-team-card-body p,
    .saci-leadership-grid .saci-team-card-body p {
        font-size: 14px;
        line-height: 1.7;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .saci-people-hero {
        padding: 62px 17px 68px;
    }

    .saci-people-hero h1 {
        font-size: 30px;
    }

    .saci-people-hero p {
        font-size: 14px;
    }

    .saci-team-section {
        padding: 60px 16px;
    }

    .saci-team-section-heading h2 {
        font-size: 29px;
    }

    .saci-team-eyebrow {
        font-size: 11px;
        letter-spacing: 2px;
    }

    .saci-team-card,
    .saci-leadership-grid .saci-team-card {
        padding: 27px 23px;
        border-radius: 14px;
    }

    .saci-team-card-top {
        align-items: center;
    }

    .saci-team-photo {
        width: 58px;
        height: 58px;
    }

    .saci-team-card-body p,
    .saci-leadership-grid .saci-team-card-body p {
        font-size: 14px;
        line-height: 1.65;
    }

}


/* =========================================================
   PAGE 3 - WHAT WE DO
   Scoped under .saci-what-we-do

   Brand palette:
   Primary   Orange     #EB5523
   Secondary Blue       #468AC9
   Accent    Warm Gold  #F4B942
   Bg        Soft White #FAFAF7
   Light     Pale Blue  #F1F7FC
   Text      Deep Navy  #17324D
   Muted     Slate      #667685
========================================================= */

.saci-what-we-do {
    --saci-primary: #EB5523;
    --saci-secondary: #468AC9;
    --saci-accent: #F4B942;
    --saci-bg-soft: #FAFAF7;
    --saci-bg-light: #F1F7FC;
    --saci-text: #17324D;
    --saci-muted: #667685;
    --saci-white: #FFFFFF;
    --saci-border: rgba(70, 138, 201, 0.18);

    font-family: inherit;
    color: var(--saci-muted);
    overflow: hidden;
}

/* =========================================================
   GLOBAL
========================================================= */

.saci-what-we-do *,
.saci-what-we-do *::before,
.saci-what-we-do *::after {
    box-sizing: border-box;
}

.saci-what-we-do .saci-container {
    width: 90%;
    max-width: 1180px;
    margin: 0 auto;
}

.saci-what-we-do h1,
.saci-what-we-do h2,
.saci-what-we-do h3,
.saci-what-we-do p {
    margin-top: 0;
}

.saci-what-we-do h2 {
    color: var(--saci-text);
    font-size: clamp(32px, 4vw, 48px);
    line-height: 1.12;
    font-weight: 700;
    margin-bottom: 24px;
    letter-spacing: -0.5px;
}

.saci-what-we-do h3 {
    color: var(--saci-text);
    font-size: 24px;
    line-height: 1.25;
    margin-bottom: 14px;
}

.saci-what-we-do p {
    font-size: 17px;
    line-height: 1.8;
    margin-bottom: 18px;
}

.saci-what-we-do .saci-eyebrow {
    display: inline-block;
    color: var(--saci-primary);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 16px;
}

.saci-what-we-do .saci-section {
    padding: 100px 0;
}

/* =========================================================
   SECTION 1 - HERO
========================================================= */

.saci-what-we-do .saci-hero {
    position: relative;
    background:
        radial-gradient(
            circle at 85% 20%,
            rgba(244, 185, 66, 0.18),
            transparent 34%
        ),
        radial-gradient(
            circle at 15% 85%,
            rgba(70, 138, 201, 0.18),
            transparent 38%
        ),
        var(--saci-text); /* Deep Navy */
    padding: 125px 0 120px;
    color: var(--saci-white);
    overflow: hidden;
}

.saci-what-we-do .saci-hero::before,
.saci-what-we-do .saci-hero::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.saci-what-we-do .saci-hero::before {
    width: 430px;
    height: 430px;
    top: -220px;
    right: -120px;
    border: 1px solid rgba(244, 185, 66, 0.18); /* Warm Gold */
    background: transparent;
}

.saci-what-we-do .saci-hero::after {
    width: 250px;
    height: 250px;
    bottom: -150px;
    left: -90px;
    border: 1px solid rgba(70, 138, 201, 0.28); /* Secondary Blue */
    background: transparent;
}

.saci-what-we-do .saci-hero-content {
    position: relative;
    z-index: 2;
    max-width: 850px;
}

.saci-what-we-do .saci-hero h1 {
    color: var(--saci-bg-soft); /* Soft White */
    font-size: clamp(42px, 6vw, 72px);
    line-height: 1.05;
    font-weight: 700;
    letter-spacing: -1.5px;
    margin-bottom: 28px;
}

.saci-what-we-do .saci-hero p {
    max-width: 760px;
    color: rgba(250, 250, 247, 0.88);
    font-size: 19px;
    line-height: 1.8;
    margin-bottom: 0;
}

/* =========================================================
   SECTION 2 - EDUCATION SUPPORT
========================================================= */

.saci-what-we-do .saci-education {
    background: var(--saci-bg-soft);
}

.saci-what-we-do .saci-two-column {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 70px;
    align-items: center;
}

.saci-what-we-do .saci-copy {
    max-width: 720px;
}

.saci-what-we-do .saci-highlights {
    display: grid;
    gap: 18px;
}

.saci-what-we-do .saci-highlight {
    position: relative;
    background: var(--saci-white);
    border-left: 5px solid var(--saci-primary);
    padding: 26px 28px;
    border-radius: 0 14px 14px 0;
    box-shadow: 0 4px 14px rgba(23, 50, 77, 0.05);
}

.saci-what-we-do .saci-highlight strong {
    display: block;
    color: var(--saci-text);
    font-size: 21px;
    margin-bottom: 7px;
}

.saci-what-we-do .saci-highlight span {
    display: block;
    font-size: 15px;
    line-height: 1.6;
    color: var(--saci-muted);
}

/* =========================================================
   SECTION 3 - SCHOLASTIC MATERIALS
========================================================= */

.saci-what-we-do .saci-materials {
    background: var(--saci-bg-light);
}

.saci-what-we-do .saci-materials-inner {
    max-width: 950px;
    margin: 0 auto;
    text-align: center;
}

.saci-what-we-do .saci-materials-inner p {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.saci-what-we-do .saci-material-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin-top: 45px;
    text-align: left;
}

.saci-what-we-do .saci-material-item {
    background: var(--saci-white);
    border: 1px solid var(--saci-border);
    border-radius: 14px;
    padding: 26px 22px;
    color: var(--saci-text);
    font-weight: 600;
    font-size: 16px;
    position: relative;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.saci-what-we-do .saci-material-item::before {
    content: "";
    display: block;
    width: 10px;
    height: 10px;
    background: var(--saci-accent); /* Warm Gold */
    border: 2px solid var(--saci-primary); /* Orange ring */
    border-radius: 50%;
    margin-bottom: 18px;
}

.saci-what-we-do .saci-material-item:hover {
    transform: translateY(-4px);
    border-color: rgba(70, 138, 201, 0.35);
    box-shadow: 0 12px 30px rgba(23, 50, 77, 0.1);
}

/* =========================================================
   SECTION 4 - GIRLS' EMPOWERMENT
========================================================= */

.saci-what-we-do .saci-girls {
    background: var(--saci-bg-soft);
}

.saci-what-we-do .saci-girls-layout {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 70px;
    align-items: center;
}

.saci-what-we-do .saci-girls-card {
    background: var(--saci-primary); /* Primary Orange */
    color: var(--saci-white);
    padding: 48px;
    border-radius: 24px;
    position: relative;
    overflow: hidden;
}

.saci-what-we-do .saci-girls-card::after {
    content: "";
    position: absolute;
    width: 190px;
    height: 190px;
    border-radius: 50%;
    right: -75px;
    bottom: -90px;
    background: rgba(244, 185, 66, 0.2); /* Warm Gold */
}

.saci-what-we-do .saci-girls-card strong {
    position: relative;
    z-index: 2;
    display: block;
    color: var(--saci-accent); /* Warm Gold */
    font-size: 18px;
    margin-bottom: 14px;
    letter-spacing: 0.5px;
}

.saci-what-we-do .saci-girls-card p {
    position: relative;
    z-index: 2;
    color: rgba(255, 255, 255, 0.94);
    margin-bottom: 0;
}

.saci-what-we-do .saci-girls-copy h3 {
    margin-top: 32px;
}

/* =========================================================
   SECTION 5 - YOUTH AGRICULTURE
========================================================= */

.saci-what-we-do .saci-agriculture {
    background: var(--saci-bg-light);
}

.saci-what-we-do .saci-agriculture-header {
    max-width: 750px;
    margin-bottom: 45px;
}

.saci-what-we-do .saci-agriculture-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.saci-what-we-do .saci-agriculture-card {
    background: var(--saci-white);
    border-radius: 16px;
    padding: 32px 25px;
    border-top: 5px solid var(--saci-primary); /* Orange top border */
    min-height: 190px;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.saci-what-we-do .saci-agriculture-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(23, 50, 77, 0.1);
}

.saci-what-we-do .saci-agriculture-card h3 {
    font-size: 21px;
    margin-bottom: 12px;
}

.saci-what-we-do .saci-agriculture-card p {
    font-size: 15px;
    line-height: 1.65;
    margin-bottom: 0;
    color: var(--saci-muted);
}

/* =========================================================
   SECTION 6 - OUR APPROACH
========================================================= */

.saci-what-we-do .saci-approach {
    background: var(--saci-text); /* Deep Navy */
    color: var(--saci-bg-soft);
}

.saci-what-we-do .saci-approach-content {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

.saci-what-we-do .saci-approach h2 {
    color: var(--saci-bg-soft);
}

.saci-what-we-do .saci-approach p {
    color: rgba(250, 250, 247, 0.85);
}

.saci-what-we-do .saci-values {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 38px;
}

.saci-what-we-do .saci-value {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 13px 22px;
    border: 1px solid rgba(244, 185, 66, 0.4); /* Warm Gold border */
    border-radius: 50px;
    color: var(--saci-accent); /* Warm Gold */
    font-size: 14px;
    font-weight: 600;
    background: rgba(244, 185, 66, 0.08);
}

/* =========================================================
   TABLET
========================================================= */

@media (max-width: 980px) {

    .saci-what-we-do .saci-section {
        padding: 80px 0;
    }

    .saci-what-we-do .saci-two-column,
    .saci-what-we-do .saci-girls-layout {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .saci-what-we-do .saci-material-list {
        grid-template-columns: repeat(2, 1fr);
    }

    .saci-what-we-do .saci-agriculture-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .saci-what-we-do .saci-container {
        width: 88%;
    }

    .saci-what-we-do .saci-section {
        padding: 65px 0;
    }

    .saci-what-we-do .saci-hero {
        padding: 90px 0 80px;
    }

    .saci-what-we-do .saci-hero h1 {
        font-size: 43px;
        letter-spacing: -0.8px;
    }

    .saci-what-we-do .saci-hero p {
        font-size: 17px;
        line-height: 1.7;
    }

    .saci-what-we-do h2 {
        font-size: 34px;
    }

    .saci-what-we-do p {
        font-size: 16px;
        line-height: 1.75;
    }

    .saci-what-we-do .saci-material-list,
    .saci-what-we-do .saci-agriculture-grid {
        grid-template-columns: 1fr;
    }

    .saci-what-we-do .saci-girls-card {
        padding: 35px 28px;
    }

    .saci-what-we-do .saci-values {
        gap: 9px;
    }

    .saci-what-we-do .saci-value {
        font-size: 13px;
        padding: 11px 16px;
    }
}

/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .saci-what-we-do .saci-container {
        width: 90%;
    }

    .saci-what-we-do .saci-hero {
        padding: 75px 0 70px;
    }

    .saci-what-we-do .saci-hero h1 {
        font-size: 38px;
    }

    .saci-what-we-do h2 {
        font-size: 30px;
    }

    .saci-what-we-do .saci-section {
        padding: 55px 0;
    }

    .saci-what-we-do .saci-highlight {
        padding: 22px;
    }

    .saci-what-we-do .saci-material-item {
        padding: 23px 20px;
    }

    .saci-what-we-do .saci-agriculture-card {
        min-height: auto;
        padding: 27px 22px;
    }

    .saci-what-we-do .saci-girls-card {
        padding: 30px 23px;
    }
}
/* =========================================================
   PAGE 4 - EDUCATION SUPPORT
   Scoped under .saci-education-page

   Brand palette:
   Primary   Orange     #EB5523
   Secondary Blue       #468AC9
   Accent    Warm Gold  #F4B942
   Bg        Soft White #FAFAF7
   Light     Pale Blue  #F1F7FC
   Text      Deep Navy  #17324D
   Muted     Slate      #667685
========================================================= */

.saci-education-page {
    --saci-primary: #EB5523;
    --saci-secondary: #468AC9;
    --saci-accent: #F4B942;
    --saci-bg-soft: #FAFAF7;
    --saci-bg-light: #F1F7FC;
    --saci-text: #17324D;
    --saci-muted: #667685;
    --saci-white: #FFFFFF;
    --saci-border: rgba(70, 138, 201, 0.18);

    font-family: inherit;
    color: var(--saci-muted);
    overflow: hidden;
}

.saci-education-page *,
.saci-education-page *::before,
.saci-education-page *::after {
    box-sizing: border-box;
}

.saci-education-page .saci-container {
    width: 90%;
    max-width: 1180px;
    margin: 0 auto;
}

.saci-education-page h1,
.saci-education-page h2,
.saci-education-page h3,
.saci-education-page p {
    margin-top: 0;
}

.saci-education-page h2 {
    color: var(--saci-text);
    font-size: clamp(32px, 4vw, 48px);
    line-height: 1.12;
    font-weight: 700;
    margin-bottom: 24px;
    letter-spacing: -0.5px;
}

.saci-education-page p {
    font-size: 17px;
    line-height: 1.8;
    margin-bottom: 18px;
}

.saci-education-page .saci-section {
    padding: 100px 0;
}

.saci-education-page .saci-eyebrow {
    display: inline-block;
    color: var(--saci-primary);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 16px;
}

/* =========================================================
   HERO
========================================================= */

.saci-education-page .saci-hero {
    position: relative;
    background:
        radial-gradient(
            circle at 85% 20%,
            rgba(244, 185, 66, 0.18),
            transparent 34%
        ),
        radial-gradient(
            circle at 15% 85%,
            rgba(70, 138, 201, 0.18),
            transparent 38%
        ),
        var(--saci-text); /* Deep Navy */
    padding: 125px 0 120px;
    color: var(--saci-white);
    overflow: hidden;
}

.saci-education-page .saci-hero::before,
.saci-education-page .saci-hero::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.saci-education-page .saci-hero::before {
    width: 430px;
    height: 430px;
    top: -220px;
    right: -120px;
    border: 1px solid rgba(244, 185, 66, 0.18); /* Warm Gold ring */
}

.saci-education-page .saci-hero::after {
    width: 250px;
    height: 250px;
    bottom: -150px;
    left: -90px;
    border: 1px solid rgba(70, 138, 201, 0.28); /* Secondary Blue ring */
}

.saci-education-page .saci-hero-content {
    position: relative;
    z-index: 2;
    max-width: 850px;
}

.saci-education-page .saci-hero h1 {
    color: var(--saci-bg-soft);
    font-size: clamp(42px, 6vw, 72px);
    line-height: 1.05;
    font-weight: 700;
    letter-spacing: -1.5px;
    margin-bottom: 28px;
}

.saci-education-page .saci-hero p {
    max-width: 760px;
    color: rgba(250, 250, 247, 0.88);
    font-size: 19px;
    line-height: 1.8;
    margin-bottom: 0;
}

/* =========================================================
   SECTION 2 — REMOVING FINANCIAL BARRIERS
========================================================= */

.saci-education-page .saci-barrier-section {
    background: var(--saci-bg-soft);
}

.saci-education-page .saci-barrier-layout {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: 75px;
    align-items: center;
}

.saci-education-page .saci-number-card {
    position: relative;
    background: var(--saci-white);
    border-radius: 24px;
    padding: 50px;
    overflow: hidden;
    min-height: 330px;
    display: flex;
    align-items: flex-end;
    box-shadow: 0 6px 22px rgba(23, 50, 77, 0.06);
    border: 1px solid var(--saci-border);
}

.saci-education-page .saci-number-card::before {
    content: "";
    position: absolute;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    background: var(--saci-accent); /* Warm Gold */
    top: -110px;
    left: -80px;
    opacity: 0.85;
}

.saci-education-page .saci-number-card::after {
    content: "";
    position: absolute;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: rgba(235, 85, 35, 0.14); /* Primary Orange tint */
    bottom: -50px;
    right: -30px;
}

.saci-education-page .saci-number-card-content {
    position: relative;
    z-index: 2;
}

.saci-education-page .saci-number-card strong {
    display: block;
    color: var(--saci-primary); /* Primary Orange */
    font-size: 70px;
    line-height: 1;
    font-weight: 700;
    margin-bottom: 10px;
}

.saci-education-page .saci-number-card span {
    display: block;
    color: var(--saci-text); /* Deep Navy */
    font-size: 19px;
    font-weight: 600;
    max-width: 230px;
    line-height: 1.4;
}

.saci-education-page .saci-barrier-copy {
    max-width: 700px;
}

/* =========================================================
   SECTION 3 - SUPPORT CARDS
========================================================= */

.saci-education-page .saci-support-section {
    background: var(--saci-bg-light); /* Pale Blue */
}

.saci-education-page .saci-section-heading {
    max-width: 720px;
    margin-bottom: 45px;
}

.saci-education-page .saci-support-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.saci-education-page .saci-support-card {
    background: var(--saci-white);
    border-radius: 16px;
    padding: 32px 27px;
    min-height: 190px;
    border-top: 5px solid var(--saci-primary); /* Orange top bar */
    position: relative;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.saci-education-page .saci-support-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(23, 50, 77, 0.1);
}

.saci-education-page .saci-support-card::before {
    content: "";
    display: block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--saci-accent); /* Warm Gold fill */
    border: 2px solid var(--saci-primary); /* Orange ring */
    margin-bottom: 25px;
}

.saci-education-page .saci-support-card h3 {
    color: var(--saci-text);
    font-size: 21px;
    line-height: 1.3;
    margin-bottom: 0;
}

/* =========================================================
   SECTION 4 - WHY YOUR SUPPORT MATTERS
========================================================= */

.saci-education-page .saci-why-section {
    background: var(--saci-bg-soft);
}

.saci-education-page .saci-why-box {
    max-width: 1000px;
    margin: 0 auto;
    background: var(--saci-primary); /* Primary Orange */
    border-radius: 24px;
    padding: 65px 75px;
    position: relative;
    overflow: hidden;
    text-align: center;
}

.saci-education-page .saci-why-box::before {
    content: "";
    position: absolute;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background: rgba(244, 185, 66, 0.22); /* Warm Gold bubble */
    top: -130px;
    right: -70px;
}

.saci-education-page .saci-why-box::after {
    content: "";
    position: absolute;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: rgba(244, 185, 66, 0.14); /* Softer Warm Gold */
    bottom: -100px;
    left: -60px;
}

.saci-education-page .saci-why-content {
    position: relative;
    z-index: 2;
}

.saci-education-page .saci-why-box h2 {
    color: var(--saci-bg-soft); /* Soft White */
}

.saci-education-page .saci-why-box p {
    color: rgba(250, 250, 247, 0.94);
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

/* =========================================================
   SECTION 5 - CTA
========================================================= */

.saci-education-page .saci-cta {
    position: relative;
    background: var(--saci-text); /* Deep Navy */
    padding: 100px 0;
    text-align: center;
    overflow: hidden;
}

.saci-education-page .saci-cta::before {
    content: "";
    position: absolute;
    width: 350px;
    height: 350px;
    border-radius: 50%;
    background: rgba(70, 138, 201, 0.22); /* Secondary Blue bubble */
    top: -190px;
    left: -100px;
}

.saci-education-page .saci-cta::after {
    content: "";
    position: absolute;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    background: rgba(244, 185, 66, 0.14); /* Warm Gold bubble */
    bottom: -160px;
    right: -70px;
}

.saci-education-page .saci-cta-content {
    position: relative;
    z-index: 2;
    max-width: 850px;
    margin: 0 auto;
}

.saci-education-page .saci-cta h2 {
    color: var(--saci-bg-soft);
    margin-bottom: 0;
}

.saci-education-page .saci-cta-buttons {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 35px;
}

.saci-education-page .saci-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 54px;
    padding: 15px 32px;
    border-radius: 50px;
    text-decoration: none !important;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: all 0.25s ease;
}

/* Primary button — Orange */
.saci-education-page .saci-button-primary {
    background: var(--saci-primary);
    color: var(--saci-white) !important;
    box-shadow: 0 8px 20px rgba(235, 85, 35, 0.35);
    border: 2px solid var(--saci-primary);
}

.saci-education-page .saci-button-primary:hover {
    background: var(--saci-accent); /* Warm Gold */
    border-color: var(--saci-accent);
    color: var(--saci-text) !important;
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(244, 185, 66, 0.4);
}

/* Secondary button — outline */
.saci-education-page .saci-button-secondary {
    background: transparent;
    color: var(--saci-bg-soft) !important;
    border: 2px solid rgba(250, 250, 247, 0.55);
}

.saci-education-page .saci-button-secondary:hover {
    background: var(--saci-bg-soft);
    color: var(--saci-text) !important;
    border-color: var(--saci-bg-soft);
    transform: translateY(-2px);
}

/* =========================================================
   TABLET
========================================================= */

@media (max-width: 980px) {

    .saci-education-page .saci-section {
        padding: 80px 0;
    }

    .saci-education-page .saci-barrier-layout {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .saci-education-page .saci-support-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .saci-education-page .saci-why-box {
        padding: 55px 50px;
    }
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .saci-education-page .saci-container {
        width: 88%;
    }

    .saci-education-page .saci-section {
        padding: 65px 0;
    }

    .saci-education-page .saci-hero {
        padding: 90px 0 80px;
    }

    .saci-education-page .saci-hero h1 {
        font-size: 43px;
        letter-spacing: -0.8px;
    }

    .saci-education-page .saci-hero p {
        font-size: 17px;
        line-height: 1.7;
    }

    .saci-education-page h2 {
        font-size: 34px;
    }

    .saci-education-page p {
        font-size: 16px;
        line-height: 1.75;
    }

    .saci-education-page .saci-number-card {
        min-height: 260px;
        padding: 35px;
    }

    .saci-education-page .saci-number-card strong {
        font-size: 58px;
    }

    .saci-education-page .saci-support-grid {
        grid-template-columns: 1fr;
    }

    .saci-education-page .saci-why-box {
        padding: 45px 28px;
        border-radius: 20px;
    }

    .saci-education-page .saci-cta {
        padding: 70px 0;
    }

    .saci-education-page .saci-cta-buttons {
        flex-direction: column;
        align-items: stretch;
    }

    .saci-education-page .saci-button {
        width: 100%;
    }
}

/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .saci-education-page .saci-container {
        width: 90%;
    }

    .saci-education-page .saci-hero {
        padding: 75px 0 70px;
    }

    .saci-education-page .saci-hero h1 {
        font-size: 38px;
    }

    .saci-education-page h2 {
        font-size: 30px;
    }

    .saci-education-page .saci-section {
        padding: 55px 0;
    }

    .saci-education-page .saci-number-card {
        padding: 28px;
    }

    .saci-education-page .saci-support-card {
        min-height: auto;
        padding: 27px 23px;
    }

    .saci-education-page .saci-why-box {
        padding: 38px 22px;
    }
}
/* =========================================================
   PAGE 5 - GIRLS' EMPOWERMENT
   Scoped under .saci-girls-page

   Brand palette:
   Primary   Orange     #EB5523
   Secondary Blue       #468AC9
   Accent    Warm Gold  #F4B942
   Bg        Soft White #FAFAF7
   Light     Pale Blue  #F1F7FC
   Text      Deep Navy  #17324D
   Muted     Slate      #667685
========================================================= */

.saci-girls-page {
    --saci-primary: #EB5523;
    --saci-secondary: #468AC9;
    --saci-accent: #F4B942;
    --saci-bg-soft: #FAFAF7;
    --saci-bg-light: #F1F7FC;
    --saci-text: #17324D;
    --saci-muted: #667685;
    --saci-white: #FFFFFF;
    --saci-border: rgba(70, 138, 201, 0.18);

    font-family: inherit;
    color: var(--saci-muted);
    overflow: hidden;
}

.saci-girls-page *,
.saci-girls-page *::before,
.saci-girls-page *::after {
    box-sizing: border-box;
}

.saci-girls-page .saci-container {
    width: 90%;
    max-width: 1180px;
    margin: 0 auto;
}

.saci-girls-page h1,
.saci-girls-page h2,
.saci-girls-page h3,
.saci-girls-page p {
    margin-top: 0;
}

.saci-girls-page h2 {
    color: var(--saci-text);
    font-size: clamp(32px, 4vw, 48px);
    line-height: 1.12;
    font-weight: 700;
    margin-bottom: 24px;
    letter-spacing: -0.5px;
}

.saci-girls-page p {
    font-size: 17px;
    line-height: 1.8;
    margin-bottom: 18px;
}

.saci-girls-page .saci-section {
    padding: 100px 0;
}

.saci-girls-page .saci-eyebrow {
    display: inline-block;
    color: var(--saci-primary);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 16px;
}

/* =========================================================
   HERO
========================================================= */

.saci-girls-page .saci-hero {
    position: relative;
    background:
        radial-gradient(
            circle at 85% 20%,
            rgba(244, 185, 66, 0.18),
            transparent 34%
        ),
        radial-gradient(
            circle at 15% 85%,
            rgba(70, 138, 201, 0.18),
            transparent 38%
        ),
        var(--saci-text); /* Deep Navy */
    padding: 125px 0 120px;
    color: var(--saci-white);
    overflow: hidden;
}

.saci-girls-page .saci-hero::before,
.saci-girls-page .saci-hero::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.saci-girls-page .saci-hero::before {
    width: 440px;
    height: 440px;
    top: -230px;
    right: -120px;
    border: 1px solid rgba(244, 185, 66, 0.18); /* Warm Gold ring */
}

.saci-girls-page .saci-hero::after {
    width: 260px;
    height: 260px;
    bottom: -150px;
    left: -100px;
    border: 1px solid rgba(70, 138, 201, 0.28); /* Secondary Blue ring */
}

.saci-girls-page .saci-hero-content {
    position: relative;
    z-index: 2;
    max-width: 880px;
}

.saci-girls-page .saci-hero h1 {
    color: var(--saci-bg-soft); /* Soft White */
    font-size: clamp(42px, 6vw, 72px);
    line-height: 1.05;
    font-weight: 700;
    letter-spacing: -1.5px;
    margin-bottom: 28px;
}

.saci-girls-page .saci-hero p {
    max-width: 780px;
    color: rgba(250, 250, 247, 0.88);
    font-size: 19px;
    line-height: 1.8;
    margin-bottom: 0;
}

/* =========================================================
   SECTION 2 - WHY GIRLS' EDUCATION MATTERS
========================================================= */

.saci-girls-page .saci-why {
    background: var(--saci-bg-soft); /* Soft White */
}

.saci-girls-page .saci-why-layout {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: 75px;
    align-items: center;
}

.saci-girls-page .saci-why-visual {
    min-height: 390px;
    border-radius: 24px;
    background: var(--saci-white);
    border: 1px solid var(--saci-border);
    box-shadow: 0 6px 22px rgba(23, 50, 77, 0.06);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    padding: 45px;
}

.saci-girls-page .saci-why-visual::before {
    content: "";
    position: absolute;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    background: var(--saci-accent); /* Warm Gold */
    top: -125px;
    left: -80px;
    opacity: 0.9;
}

.saci-girls-page .saci-why-visual::after {
    content: "";
    position: absolute;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: rgba(235, 85, 35, 0.14); /* Primary Orange tint */
    bottom: -75px;
    right: -45px;
}

.saci-girls-page .saci-why-stat {
    position: relative;
    z-index: 2;
}

.saci-girls-page .saci-why-stat strong {
    display: block;
    color: var(--saci-primary); /* Primary Orange */
    font-size: 48px;
    line-height: 1.1;
    margin-bottom: 10px;
}

.saci-girls-page .saci-why-stat span {
    display: block;
    max-width: 260px;
    color: var(--saci-text); /* Deep Navy */
    font-size: 19px;
    font-weight: 600;
    line-height: 1.45;
}

.saci-girls-page .saci-why-copy {
    max-width: 720px;
}

/* =========================================================
   SECTION 3 - SUPPORT CARDS
========================================================= */

.saci-girls-page .saci-support {
    background: var(--saci-bg-light); /* Pale Blue */
}

.saci-girls-page .saci-section-heading {
    max-width: 700px;
    margin-bottom: 45px;
}

.saci-girls-page .saci-support-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.saci-girls-page .saci-support-card {
    background: var(--saci-white);
    border-radius: 16px;
    padding: 32px 27px;
    min-height: 190px;
    border-top: 5px solid var(--saci-primary); /* Orange top bar */
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    border-left: 1px solid var(--saci-border);
    border-right: 1px solid var(--saci-border);
    border-bottom: 1px solid var(--saci-border);
}

.saci-girls-page .saci-support-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(23, 50, 77, 0.1);
}

.saci-girls-page .saci-support-card::before {
    content: "";
    display: block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--saci-accent); /* Warm Gold fill */
    border: 2px solid var(--saci-primary); /* Orange ring */
    margin-bottom: 25px;
}

.saci-girls-page .saci-support-card h3 {
    color: var(--saci-text);
    font-size: 21px;
    line-height: 1.3;
    margin: 0;
}

/* =========================================================
   SECTION 4 - BREAKING BARRIERS
========================================================= */

.saci-girls-page .saci-barriers {
    background: var(--saci-bg-soft); /* Soft White */
}

.saci-girls-page .saci-barriers-box {
    max-width: 1050px;
    margin: 0 auto;
    background: var(--saci-primary); /* Primary Orange */
    border-radius: 24px;
    padding: 70px 80px;
    position: relative;
    overflow: hidden;
    text-align: center;
}

.saci-girls-page .saci-barriers-box::before {
    content: "";
    position: absolute;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    background: rgba(244, 185, 66, 0.22); /* Warm Gold bubble */
    top: -140px;
    right: -80px;
}

.saci-girls-page .saci-barriers-box::after {
    content: "";
    position: absolute;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: rgba(244, 185, 66, 0.14); /* Softer gold */
    bottom: -110px;
    left: -70px;
}

.saci-girls-page .saci-barriers-content {
    position: relative;
    z-index: 2;
}

.saci-girls-page .saci-barriers-box h2 {
    color: var(--saci-bg-soft); /* Soft White */
}

.saci-girls-page .saci-barriers-box p {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    color: rgba(250, 250, 247, 0.94);
}

/* =========================================================
   SECTION 5 - CTA
========================================================= */

.saci-girls-page .saci-cta {
    background: var(--saci-text); /* Deep Navy */
    padding: 100px 0;
    position: relative;
    overflow: hidden;
    text-align: center;
}

.saci-girls-page .saci-cta::before {
    content: "";
    position: absolute;
    width: 350px;
    height: 350px;
    border-radius: 50%;
    background: rgba(70, 138, 201, 0.22); /* Secondary Blue bubble */
    top: -190px;
    left: -100px;
}

.saci-girls-page .saci-cta::after {
    content: "";
    position: absolute;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    background: rgba(244, 185, 66, 0.14); /* Warm Gold bubble */
    bottom: -160px;
    right: -70px;
}

.saci-girls-page .saci-cta-content {
    position: relative;
    z-index: 2;
    max-width: 850px;
    margin: 0 auto;
}

.saci-girls-page .saci-cta h2 {
    color: var(--saci-bg-soft);
    margin-bottom: 0;
}

.saci-girls-page .saci-cta p {
    max-width: 680px;
    margin: 20px auto 0;
    color: rgba(250, 250, 247, 0.85);
}

.saci-girls-page .saci-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 54px;
    padding: 15px 34px;
    margin-top: 32px;
    border-radius: 50px;
    background: var(--saci-primary); /* Primary Orange */
    border: 2px solid var(--saci-primary);
    color: var(--saci-white) !important;
    text-decoration: none !important;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    box-shadow: 0 8px 20px rgba(235, 85, 35, 0.35);
    transition: all 0.25s ease;
}

.saci-girls-page .saci-button:hover,
.saci-girls-page .saci-button:focus {
    background: var(--saci-accent); /* Warm Gold */
    border-color: var(--saci-accent);
    color: var(--saci-text) !important;
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(244, 185, 66, 0.4);
}

/* =========================================================
   TABLET
========================================================= */

@media (max-width: 980px) {

    .saci-girls-page .saci-section {
        padding: 80px 0;
    }

    .saci-girls-page .saci-why-layout {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .saci-girls-page .saci-support-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .saci-girls-page .saci-barriers-box {
        padding: 60px 50px;
    }
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .saci-girls-page .saci-container {
        width: 88%;
    }

    .saci-girls-page .saci-section {
        padding: 65px 0;
    }

    .saci-girls-page .saci-hero {
        padding: 90px 0 80px;
    }

    .saci-girls-page .saci-hero h1 {
        font-size: 43px;
        letter-spacing: -0.8px;
    }

    .saci-girls-page .saci-hero p {
        font-size: 17px;
        line-height: 1.7;
    }

    .saci-girls-page h2 {
        font-size: 34px;
    }

    .saci-girls-page p {
        font-size: 16px;
        line-height: 1.75;
    }

    .saci-girls-page .saci-why-visual {
        min-height: 280px;
        padding: 32px;
    }

    .saci-girls-page .saci-why-stat strong {
        font-size: 40px;
    }

    .saci-girls-page .saci-support-grid {
        grid-template-columns: 1fr;
    }

    .saci-girls-page .saci-support-card {
        min-height: auto;
    }

    .saci-girls-page .saci-barriers-box {
        padding: 45px 28px;
        border-radius: 20px;
    }

    .saci-girls-page .saci-cta {
        padding: 70px 0;
    }

    .saci-girls-page .saci-button {
        width: 100%;
    }
}

/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .saci-girls-page .saci-container {
        width: 90%;
    }

    .saci-girls-page .saci-hero {
        padding: 75px 0 70px;
    }

    .saci-girls-page .saci-hero h1 {
        font-size: 38px;
    }

    .saci-girls-page h2 {
        font-size: 30px;
    }

    .saci-girls-page .saci-section {
        padding: 55px 0;
    }

    .saci-girls-page .saci-why-visual {
        min-height: 250px;
        padding: 27px;
    }

    .saci-girls-page .saci-support-card {
        padding: 27px 23px;
    }

    .saci-girls-page .saci-barriers-box {
        padding: 38px 22px;
    }
}
/* =========================================================
   PAGE 6 - YOUTH AGRICULTURE
   Scoped under .saci-youth-agriculture-page

   Brand palette:
   Primary   Orange     #EB5523
   Secondary Blue       #468AC9
   Accent    Warm Gold  #F4B942
   Bg        Soft White #FAFAF7
   Light     Pale Blue  #F1F7FC
   Text      Deep Navy  #17324D
   Muted     Slate      #667685
========================================================= */

.saci-youth-agriculture-page {
    --saci-primary: #EB5523;
    --saci-secondary: #468AC9;
    --saci-accent: #F4B942;
    --saci-bg-soft: #FAFAF7;
    --saci-bg-light: #F1F7FC;
    --saci-text: #17324D;
    --saci-muted: #667685;
    --saci-white: #FFFFFF;
    --saci-border: rgba(70, 138, 201, 0.18);

    font-family: inherit;
    color: var(--saci-muted);
    overflow: hidden;
}

.saci-youth-agriculture-page *,
.saci-youth-agriculture-page *::before,
.saci-youth-agriculture-page *::after {
    box-sizing: border-box;
}

.saci-youth-agriculture-page .saci-container {
    width: 90%;
    max-width: 1180px;
    margin: 0 auto;
}

.saci-youth-agriculture-page h1,
.saci-youth-agriculture-page h2,
.saci-youth-agriculture-page h3,
.saci-youth-agriculture-page p {
    margin-top: 0;
}

.saci-youth-agriculture-page h2 {
    color: var(--saci-text);
    font-size: clamp(32px, 4vw, 48px);
    line-height: 1.12;
    font-weight: 700;
    margin-bottom: 24px;
    letter-spacing: -0.5px;
}

.saci-youth-agriculture-page h3 {
    color: var(--saci-text);
    font-size: 23px;
    line-height: 1.25;
    margin-bottom: 13px;
}

.saci-youth-agriculture-page p {
    font-size: 17px;
    line-height: 1.8;
    margin-bottom: 18px;
}

.saci-youth-agriculture-page .saci-section {
    padding: 100px 0;
}

.saci-youth-agriculture-page .saci-eyebrow {
    display: inline-block;
    color: var(--saci-primary);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 16px;
}

/* =========================================================
   HERO
========================================================= */

.saci-youth-agriculture-page .saci-hero {
    position: relative;
    background:
        radial-gradient(
            circle at 85% 20%,
            rgba(244, 185, 66, 0.18),
            transparent 34%
        ),
        radial-gradient(
            circle at 15% 85%,
            rgba(70, 138, 201, 0.18),
            transparent 38%
        ),
        var(--saci-text); /* Deep Navy */
    padding: 125px 0 120px;
    color: var(--saci-white);
    overflow: hidden;
}

.saci-youth-agriculture-page .saci-hero::before,
.saci-youth-agriculture-page .saci-hero::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.saci-youth-agriculture-page .saci-hero::before {
    width: 440px;
    height: 440px;
    top: -230px;
    right: -120px;
    border: 1px solid rgba(244, 185, 66, 0.18); /* Warm Gold ring */
}

.saci-youth-agriculture-page .saci-hero::after {
    width: 260px;
    height: 260px;
    bottom: -150px;
    left: -100px;
    border: 1px solid rgba(70, 138, 201, 0.28); /* Secondary Blue ring */
}

.saci-youth-agriculture-page .saci-hero-content {
    position: relative;
    z-index: 2;
    max-width: 850px;
}

.saci-youth-agriculture-page .saci-hero h1 {
    color: var(--saci-bg-soft); /* Soft White */
    font-size: clamp(42px, 6vw, 72px);
    line-height: 1.05;
    font-weight: 700;
    letter-spacing: -1.5px;
    margin-bottom: 28px;
}

.saci-youth-agriculture-page .saci-hero p {
    max-width: 780px;
    color: rgba(250, 250, 247, 0.88);
    font-size: 19px;
    line-height: 1.8;
    margin-bottom: 0;
}

/* =========================================================
   SECTION 2 - PRACTICAL SKILLS
========================================================= */

.saci-youth-agriculture-page .saci-practical {
    background: var(--saci-bg-soft); /* Soft White */
}

.saci-youth-agriculture-page .saci-practical-layout {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: 75px;
    align-items: center;
}

.saci-youth-agriculture-page .saci-practical-visual {
    position: relative;
    min-height: 380px;
    background: var(--saci-white);
    border: 1px solid var(--saci-border);
    box-shadow: 0 6px 22px rgba(23, 50, 77, 0.06);
    border-radius: 24px;
    overflow: hidden;
    padding: 45px;
    display: flex;
    align-items: flex-end;
}

.saci-youth-agriculture-page .saci-practical-visual::before {
    content: "";
    position: absolute;
    width: 290px;
    height: 290px;
    border-radius: 50%;
    background: var(--saci-accent); /* Warm Gold */
    top: -130px;
    left: -80px;
    opacity: 0.9;
}

.saci-youth-agriculture-page .saci-practical-visual::after {
    content: "";
    position: absolute;
    width: 170px;
    height: 170px;
    border-radius: 50%;
    background: rgba(235, 85, 35, 0.14); /* Primary Orange tint */
    bottom: -70px;
    right: -45px;
}

.saci-youth-agriculture-page .saci-practical-number {
    position: relative;
    z-index: 2;
}

.saci-youth-agriculture-page .saci-practical-number strong {
    display: block;
    color: var(--saci-primary); /* Primary Orange */
    font-size: 72px;
    line-height: 1;
    margin-bottom: 12px;
}

.saci-youth-agriculture-page .saci-practical-number span {
    display: block;
    max-width: 270px;
    color: var(--saci-text); /* Deep Navy */
    font-size: 19px;
    font-weight: 600;
    line-height: 1.45;
}

.saci-youth-agriculture-page .saci-practical-copy {
    max-width: 720px;
}

/* =========================================================
   SECTION 3 - FOUR PROGRAMMES
========================================================= */

.saci-youth-agriculture-page .saci-programmes {
    background: var(--saci-bg-light); /* Pale Blue */
}

.saci-youth-agriculture-page .saci-programmes-heading {
    max-width: 760px;
    margin-bottom: 45px;
}

.saci-youth-agriculture-page .saci-programmes-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
}

.saci-youth-agriculture-page .saci-programme-card {
    position: relative;
    background: var(--saci-white);
    border-radius: 18px;
    padding: 38px 34px;
    min-height: 220px;
    border-top: 5px solid var(--saci-primary); /* Orange top bar */
    border-left: 1px solid var(--saci-border);
    border-right: 1px solid var(--saci-border);
    border-bottom: 1px solid var(--saci-border);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.saci-youth-agriculture-page .saci-programme-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(23, 50, 77, 0.1);
}

.saci-youth-agriculture-page .saci-programme-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--saci-accent); /* Warm Gold fill */
    color: var(--saci-text); /* Deep Navy number */
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 25px;
    border: 2px solid var(--saci-primary); /* Orange ring */
}

.saci-youth-agriculture-page .saci-programme-card h3 {
    margin-bottom: 12px;
}

.saci-youth-agriculture-page .saci-programme-card p {
    font-size: 16px;
    line-height: 1.7;
    margin-bottom: 0;
    color: var(--saci-muted);
}

/* =========================================================
   SECTION 4 - FROM SKILLS TO OPPORTUNITY
========================================================= */

.saci-youth-agriculture-page .saci-opportunity {
    background: var(--saci-bg-soft); /* Soft White */
}

.saci-youth-agriculture-page .saci-opportunity-box {
    max-width: 1050px;
    margin: 0 auto;
    background: var(--saci-primary); /* Primary Orange */
    border-radius: 24px;
    padding: 70px 80px;
    position: relative;
    overflow: hidden;
    text-align: center;
}

.saci-youth-agriculture-page .saci-opportunity-box::before {
    content: "";
    position: absolute;
    width: 290px;
    height: 290px;
    border-radius: 50%;
    background: rgba(244, 185, 66, 0.22); /* Warm Gold bubble */
    top: -145px;
    right: -80px;
}

.saci-youth-agriculture-page .saci-opportunity-box::after {
    content: "";
    position: absolute;
    width: 210px;
    height: 210px;
    border-radius: 50%;
    background: rgba(244, 185, 66, 0.14); /* Softer gold */
    bottom: -115px;
    left: -70px;
}

.saci-youth-agriculture-page .saci-opportunity-content {
    position: relative;
    z-index: 2;
}

.saci-youth-agriculture-page .saci-opportunity-box h2 {
    color: var(--saci-bg-soft); /* Soft White */
}

.saci-youth-agriculture-page .saci-opportunity-box p {
    max-width: 820px;
    margin-left: auto;
    margin-right: auto;
    color: rgba(250, 250, 247, 0.94);
}

/* =========================================================
   TABLET
========================================================= */

@media (max-width: 980px) {

    .saci-youth-agriculture-page .saci-section {
        padding: 80px 0;
    }

    .saci-youth-agriculture-page .saci-practical-layout {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .saci-youth-agriculture-page .saci-opportunity-box {
        padding: 60px 50px;
    }
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .saci-youth-agriculture-page .saci-container {
        width: 88%;
    }

    .saci-youth-agriculture-page .saci-section {
        padding: 65px 0;
    }

    .saci-youth-agriculture-page .saci-hero {
        padding: 90px 0 80px;
    }

    .saci-youth-agriculture-page .saci-hero h1 {
        font-size: 43px;
        letter-spacing: -0.8px;
    }

    .saci-youth-agriculture-page .saci-hero p {
        font-size: 17px;
        line-height: 1.7;
    }

    .saci-youth-agriculture-page h2 {
        font-size: 34px;
    }

    .saci-youth-agriculture-page p {
        font-size: 16px;
        line-height: 1.75;
    }

    .saci-youth-agriculture-page .saci-practical-visual {
        min-height: 280px;
        padding: 32px;
    }

    .saci-youth-agriculture-page .saci-practical-number strong {
        font-size: 58px;
    }

    .saci-youth-agriculture-page .saci-programmes-grid {
        grid-template-columns: 1fr;
    }

    .saci-youth-agriculture-page .saci-programme-card {
        min-height: auto;
    }

    .saci-youth-agriculture-page .saci-opportunity-box {
        padding: 45px 28px;
        border-radius: 20px;
    }
}

/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .saci-youth-agriculture-page .saci-container {
        width: 90%;
    }

    .saci-youth-agriculture-page .saci-hero {
        padding: 75px 0 70px;
    }

    .saci-youth-agriculture-page .saci-hero h1 {
        font-size: 38px;
    }

    .saci-youth-agriculture-page h2 {
        font-size: 30px;
    }

    .saci-youth-agriculture-page .saci-section {
        padding: 55px 0;
    }

    .saci-youth-agriculture-page .saci-practical-visual {
        min-height: 250px;
        padding: 27px;
    }

    .saci-youth-agriculture-page .saci-programme-card {
        padding: 30px 24px;
    }

    .saci-youth-agriculture-page .saci-opportunity-box {
        padding: 38px 22px;
    }
}
/* =========================================================
   SCHOOL A CHILD INITIATIVE
   OUR IMPACT PAGE
   Scoped under .saci-impact-page

   Brand palette:
   Primary   Orange     #EB5523
   Secondary Blue       #468AC9
   Accent    Warm Gold  #F4B942
   Bg        Soft White #FAFAF7
   Light     Pale Blue  #F1F7FC
   Text      Deep Navy  #17324D
   Muted     Slate      #667685
   ========================================================= */

.saci-impact-page {
    --saci-primary: #EB5523;
    --saci-secondary: #468AC9;
    --saci-accent: #F4B942;
    --saci-bg-soft: #FAFAF7;
    --saci-bg-light: #F1F7FC;
    --saci-text: #17324D;
    --saci-muted: #667685;
    --saci-white: #FFFFFF;
    --saci-border: rgba(70, 138, 201, 0.18);
    --saci-shadow: 0 15px 40px rgba(23, 50, 77, 0.1);

    font-family: inherit;
    color: var(--saci-muted);
    line-height: 1.7;
    overflow: hidden;
}

/* =========================================================
   GLOBAL
   ========================================================= */

.saci-impact-page *,
.saci-impact-page *::before,
.saci-impact-page *::after {
    box-sizing: border-box;
}

.saci-impact-page h1,
.saci-impact-page h2,
.saci-impact-page h3,
.saci-impact-page p {
    margin-top: 0;
}

.saci-impact-page h1,
.saci-impact-page h2,
.saci-impact-page h3 {
    line-height: 1.2;
}

.saci-impact-page a {
    text-decoration: none;
}

.saci-impact-container {
    width: 90%;
    max-width: 1180px;
    margin: 0 auto;
}

/* =========================================================
   HERO
   ========================================================= */

.saci-impact-hero {
    position: relative;
    background:
        radial-gradient(
            circle at 85% 20%,
            rgba(244, 185, 66, 0.18),
            transparent 34%
        ),
        radial-gradient(
            circle at 15% 85%,
            rgba(70, 138, 201, 0.18),
            transparent 38%
        ),
        var(--saci-text); /* Deep Navy */
    padding: 110px 0 120px;
    overflow: hidden;
}

.saci-impact-hero::before,
.saci-impact-hero::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.saci-impact-hero::before {
    width: 340px;
    height: 340px;
    top: -170px;
    right: -80px;
    border: 1px solid rgba(244, 185, 66, 0.18); /* Warm Gold ring */
}

.saci-impact-hero::after {
    width: 230px;
    height: 230px;
    bottom: -125px;
    left: -70px;
    border: 1px solid rgba(70, 138, 201, 0.28); /* Secondary Blue ring */
}

.saci-impact-hero-inner {
    position: relative;
    z-index: 2;
    max-width: 850px;
}

.saci-impact-hero h1 {
    color: var(--saci-bg-soft); /* Soft White */
    font-size: clamp(42px, 5vw, 68px);
    font-weight: 700;
    letter-spacing: -1.5px;
    margin-bottom: 26px;
}

.saci-impact-hero p {
    max-width: 780px;
    color: rgba(250, 250, 247, 0.88);
    font-size: 19px;
    line-height: 1.8;
    margin-bottom: 0;
}

/* =========================================================
   STATISTICS INTRO
   ========================================================= */

.saci-impact-stats {
    background: var(--saci-bg-soft); /* Soft White */
    padding: 95px 0 100px;
}

.saci-impact-section-heading {
    max-width: 760px;
    margin: 0 auto 55px;
    text-align: center;
}

.saci-impact-section-heading h2 {
    color: var(--saci-text); /* Deep Navy */
    font-size: clamp(34px, 4vw, 48px);
    margin-bottom: 18px;
}

.saci-impact-section-heading p {
    font-size: 17px;
    margin-bottom: 0;
    color: var(--saci-muted);
}

/* =========================================================
   STATISTICS GRID
   ========================================================= */

.saci-impact-stat-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 18px;
}

.saci-impact-stat {
    position: relative;
    background: var(--saci-white);
    border: 1px solid var(--saci-border);
    border-radius: 18px;
    padding: 32px 22px;
    text-align: center;
    transition: all 0.25s ease;
    border-top: 5px solid var(--saci-primary); /* Orange accent bar */
}

.saci-impact-stat:hover {
    transform: translateY(-5px);
    box-shadow: var(--saci-shadow);
    border-color: rgba(70, 138, 201, 0.35);
}

.saci-impact-stat-number {
    display: block;
    color: var(--saci-primary); /* Primary Orange */
    font-size: clamp(32px, 3vw, 46px);
    line-height: 1;
    font-weight: 700;
    margin-bottom: 16px;
}

.saci-impact-stat-label {
    display: block;
    color: var(--saci-text); /* Deep Navy */
    font-size: 15px;
    line-height: 1.45;
    font-weight: 700;
}

.saci-impact-stat-note {
    display: block;
    margin-top: 14px;
    color: var(--saci-muted);
    font-size: 11px;
    line-height: 1.4;
}

/* =========================================================
   IMPACT AREAS
   ========================================================= */

.saci-impact-areas {
    background: var(--saci-bg-light); /* Pale Blue */
    padding: 100px 0;
}

.saci-impact-area-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.saci-impact-area-card {
    position: relative;
    background: var(--saci-white);
    border: 1px solid var(--saci-border);
    border-radius: 22px;
    padding: 40px;
    min-height: 245px;
    box-shadow: 0 8px 25px rgba(23, 50, 77, 0.05);
    transition: all 0.25s ease;
}

.saci-impact-area-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--saci-shadow);
    border-color: rgba(70, 138, 201, 0.35);
}

.saci-impact-area-number {
    display: inline-flex;
    width: 46px;
    height: 46px;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
    border-radius: 50%;
    background: var(--saci-accent); /* Warm Gold fill */
    color: var(--saci-text); /* Deep Navy number */
    font-size: 13px;
    font-weight: 700;
    border: 2px solid var(--saci-primary); /* Orange ring */
}

.saci-impact-area-card h3 {
    color: var(--saci-text);
    font-size: 26px;
    margin-bottom: 14px;
}

.saci-impact-area-card p {
    font-size: 16px;
    margin-bottom: 0;
    color: var(--saci-muted);
}

/* =========================================================
   RIPPLE EFFECT SECTION
   ========================================================= */

.saci-impact-ripple {
    background: var(--saci-bg-soft); /* Soft White */
    padding: 100px 0;
}

.saci-impact-ripple-box {
    position: relative;
    background: var(--saci-primary); /* Primary Orange */
    border-radius: 28px;
    padding: 75px 85px;
    overflow: hidden;
}

.saci-impact-ripple-box::before,
.saci-impact-ripple-box::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    background: var(--saci-accent); /* Warm Gold bubbles */
}

.saci-impact-ripple-box::before {
    width: 270px;
    height: 270px;
    top: -135px;
    right: -70px;
    opacity: 0.22;
}

.saci-impact-ripple-box::after {
    width: 190px;
    height: 190px;
    bottom: -110px;
    left: -65px;
    opacity: 0.14;
}

.saci-impact-ripple-content {
    position: relative;
    z-index: 2;
    max-width: 820px;
}

.saci-impact-ripple-content h2 {
    color: var(--saci-bg-soft); /* Soft White */
    font-size: clamp(34px, 4vw, 50px);
    margin-bottom: 28px;
}

.saci-impact-ripple-content p {
    color: rgba(250, 250, 247, 0.94);
    font-size: 17px;
    line-height: 1.8;
    margin-bottom: 18px;
}

.saci-impact-ripple-content p:last-child {
    margin-bottom: 0;
}

/* =========================================================
   FINAL CTA
   ========================================================= */

.saci-impact-final {
    position: relative;
    background: var(--saci-text); /* Deep Navy */
    padding: 100px 0;
    text-align: center;
    overflow: hidden;
}

.saci-impact-final::before {
    content: "";
    position: absolute;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: rgba(70, 138, 201, 0.22); /* Secondary Blue bubble */
    top: -160px;
    left: -80px;
}

.saci-impact-final::after {
    content: "";
    position: absolute;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    background: rgba(244, 185, 66, 0.14); /* Warm Gold bubble */
    bottom: -130px;
    right: -60px;
}

.saci-impact-final-inner {
    position: relative;
    z-index: 2;
    max-width: 760px;
    margin: 0 auto;
}

.saci-impact-final h2 {
    color: var(--saci-bg-soft); /* Soft White */
    font-size: clamp(34px, 4vw, 50px);
    margin-bottom: 22px;
}

.saci-impact-final p {
    max-width: 650px;
    margin: 0 auto 32px;
    color: rgba(250, 250, 247, 0.85);
    font-size: 17px;
}

.saci-impact-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 54px;
    padding: 15px 34px;
    border-radius: 50px;
    background: var(--saci-primary); /* Primary Orange */
    border: 2px solid var(--saci-primary);
    color: var(--saci-white) !important;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    box-shadow: 0 8px 20px rgba(235, 85, 35, 0.35);
    transition: all 0.25s ease;
}

.saci-impact-button:hover,
.saci-impact-button:focus {
    background: var(--saci-accent); /* Warm Gold */
    border-color: var(--saci-accent);
    color: var(--saci-text) !important;
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(244, 185, 66, 0.4);
}

/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1100px) {

    .saci-impact-stat-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 980px) {

    .saci-impact-hero {
        padding: 90px 0 100px;
    }

    .saci-impact-stat-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .saci-impact-area-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .saci-impact-ripple-box {
        padding: 60px;
    }
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .saci-impact-container {
        width: 88%;
    }

    .saci-impact-hero {
        padding: 75px 0 85px;
    }

    .saci-impact-hero h1 {
        font-size: 42px;
        letter-spacing: -1px;
    }

    .saci-impact-hero p {
        font-size: 17px;
    }

    .saci-impact-stats,
    .saci-impact-areas,
    .saci-impact-ripple {
        padding: 70px 0;
    }

    .saci-impact-section-heading {
        margin-bottom: 40px;
    }

    .saci-impact-stat-grid,
    .saci-impact-area-grid {
        grid-template-columns: 1fr;
    }

    .saci-impact-stat {
        padding: 30px 24px;
    }

    .saci-impact-area-card {
        min-height: auto;
        padding: 32px;
    }

    .saci-impact-ripple-box {
        padding: 50px 35px;
        border-radius: 22px;
    }

    .saci-impact-ripple-content p {
        font-size: 16px;
    }

    .saci-impact-final {
        padding: 75px 0;
    }
}

/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

    .saci-impact-container {
        width: 86%;
    }

    .saci-impact-hero {
        padding: 65px 0 75px;
    }

    .saci-impact-hero h1 {
        font-size: 36px;
    }

    .saci-impact-hero p {
        font-size: 16px;
    }

    .saci-impact-section-heading h2 {
        font-size: 32px;
    }

    .saci-impact-stat-number {
        font-size: 38px;
    }

    .saci-impact-area-card {
        padding: 28px;
    }

    .saci-impact-area-card h3 {
        font-size: 24px;
    }

    .saci-impact-ripple-box {
        padding: 42px 26px;
    }

    .saci-impact-ripple-content h2 {
        font-size: 32px;
    }

    .saci-impact-button {
        width: 100%;
    }

    .saci-impact-final h2 {
        font-size: 32px;
    }
}

/* =========================================================
   SCHOOL A CHILD INITIATIVE
   PRIVACY POLICY PAGE CSS
========================================================= */


/* =========================================================
   HERO
========================================================= */

.sci-legal-hero {
    padding: 90px 0;
    background: #F1F7FC;
    border-bottom: 1px solid #DCE6EF;
}

.sci-legal-hero-content {
    max-width: 800px;
}

.sci-legal-hero h1 {
    margin: 0 0 22px;
    color: #17324D;
    font-size: clamp(42px, 5vw, 64px);
    line-height: 1.05;
    font-weight: 850;
    letter-spacing: -2px;
}

.sci-legal-hero h1 span {
    display: block;
    color: #EB5523;
}

.sci-legal-hero p {
    max-width: 700px;
    margin: 0;
    color: #334E68;
    font-size: 17px;
    line-height: 1.75;
}


/* =========================================================
   PRIVACY SECTION
========================================================= */

.sci-privacy-section {
    background: #FFFFFF;
}

.sci-privacy-layout {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 75px;
    align-items: start;
}


/* =========================================================
   SIDEBAR
========================================================= */

.sci-privacy-sidebar {
    position: sticky;
    top: 100px;
}

.sci-privacy-nav {
    display: flex;
    flex-direction: column;
    padding: 25px;
    border: 1px solid #DCE6EF;
    border-radius: 10px;
    background: #FAFAF7;
}

.sci-privacy-nav strong {
    margin-bottom: 15px;
    color: #17324D;
    font-size: 14px;
    font-weight: 800;
}

.sci-privacy-nav a {
    padding: 9px 0;
    color: #667685;
    font-size: 13px;
    line-height: 1.4;
    text-decoration: none !important;
    border-bottom: 1px solid #DCE6EF;
    transition: all .25s ease;
}

.sci-privacy-nav a:last-child {
    border-bottom: 0;
}

.sci-privacy-nav a:hover {
    padding-left: 5px;
    color: #EB5523;
}


/* =========================================================
   CONTENT
========================================================= */

.sci-privacy-content {
    max-width: 850px;
}

.sci-privacy-block {
    position: relative;
    padding-bottom: 50px;
    margin-bottom: 50px;
    border-bottom: 1px solid #DCE6EF;
}

.sci-privacy-block:last-child {
    margin-bottom: 0;
    border-bottom: 0;
}

.sci-privacy-number {
    display: block;
    margin-bottom: 12px;
    color: #EB5523;
    font-size: 12px;
    line-height: 1;
    font-weight: 850;
    letter-spacing: 1.5px;
}

.sci-privacy-block h2 {
    margin: 0 0 22px;
    color: #17324D;
    font-size: 32px;
    line-height: 1.2;
    font-weight: 800;
}

.sci-privacy-block h3 {
    margin: 28px 0 10px;
    color: #17324D;
    font-size: 20px;
    line-height: 1.3;
    font-weight: 800;
}

.sci-privacy-block p {
    margin: 0 0 17px;
    color: #334E68;
    font-size: 15px;
    line-height: 1.85;
}

.sci-privacy-block p:last-child {
    margin-bottom: 0;
}


/* =========================================================
   LIST
========================================================= */

.sci-privacy-block ul {
    margin: 15px 0 22px;
    padding-left: 22px;
}

.sci-privacy-block li {
    margin-bottom: 10px;
    padding-left: 5px;
    color: #334E68;
    font-size: 15px;
    line-height: 1.7;
}

.sci-privacy-block li::marker {
    color: #EB5523;
}


/* =========================================================
   CHILDREN HIGHLIGHT
========================================================= */

.sci-privacy-highlight {
    padding: 35px;
    border: 0;
    border-radius: 12px;
    background: #F1F7FC;
}

.sci-privacy-highlight h2 {
    margin-bottom: 20px;
}


/* =========================================================
   POLICY DATE
========================================================= */

.sci-policy-date {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 15px;
    padding: 12px 16px;
    border-left: 3px solid #EB5523;
    background: #FAFAF7;
    color: #667685;
    font-size: 12px;
}

.sci-policy-date strong {
    color: #17324D;
}


/* =========================================================
   CONTACT
========================================================= */

.sci-privacy-contact {
    padding: 35px;
    border: 0;
    border-radius: 12px;
    background: #17324D;
}

.sci-privacy-contact h2 {
    color: #FFFFFF;
}

.sci-privacy-contact > p {
    color: rgba(255, 255, 255, .78);
}

.sci-contact-box {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 30px;
}

.sci-contact-box > div {
    display: flex;
    flex-direction: column;
    padding: 20px;
    border-radius: 8px;
    background: rgba(255, 255, 255, .07);
}

.sci-contact-box span {
    margin-bottom: 8px;
    color: #F4B942;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.3px;
}

.sci-contact-box strong {
    color: #FFFFFF;
    font-size: 13px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .sci-container {
        width: min(100% - 50px, 900px);
    }

    .sci-legal-hero {
        padding: 70px 0;
    }

    .sci-privacy-layout {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .sci-privacy-sidebar {
        position: static;
    }

    .sci-privacy-nav {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0 20px;
    }

    .sci-privacy-nav strong {
        grid-column: 1 / -1;
    }

    .sci-contact-box {
        grid-template-columns: 1fr;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .sci-container {
        width: calc(100% - 40px);
    }

    .sci-legal-hero {
        padding: 55px 0;
    }

    .sci-legal-hero h1 {
        font-size: 40px;
        letter-spacing: -1.5px;
    }

    .sci-legal-hero p {
        font-size: 15px;
    }

    .sci-privacy-section {
        padding: 50px 0;
    }

    .sci-privacy-layout {
        gap: 35px;
    }

    .sci-privacy-nav {
        display: flex;
    }

    .sci-privacy-block {
        padding-bottom: 40px;
        margin-bottom: 40px;
    }

    .sci-privacy-block h2 {
        font-size: 28px;
    }

    .sci-privacy-block h3 {
        font-size: 19px;
    }

    .sci-privacy-block p,
    .sci-privacy-block li {
        font-size: 14px;
        line-height: 1.75;
    }

    .sci-privacy-highlight,
    .sci-privacy-contact {
        padding: 25px;
    }

    .sci-contact-box {
        gap: 12px;
    }

}

/* =========================================================
   SCHOOL A CHILD INITIATIVE
   TERMS & CONDITIONS PAGE
========================================================= */


/* =========================
   LEGAL HERO
========================= */

.sci-legal-hero {
    background: #F1F7FC;
    padding: 90px 30px;
    position: relative;
    overflow: hidden;
}

.sci-legal-hero-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(280px, 0.7fr);
    gap: 70px;
    align-items: center;
}

.sci-legal-hero-content h1 {
    margin: 12px 0 22px;
    color: #17324D;
    font-size: clamp(42px, 5vw, 68px);
    line-height: 1.05;
    font-weight: 700;
    letter-spacing: -1.5px;
}

.sci-legal-hero-content > p {
    max-width: 720px;
    margin: 0 0 25px;
    color: #334E68;
    font-size: 18px;
    line-height: 1.75;
}

.sci-policy-date {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #667685;
    font-size: 14px;
}

.sci-legal-hero-card {
    background: #17324D;
    color: #FFFFFF;
    padding: 35px;
    border-radius: 14px;
    position: relative;
    box-shadow: 0 18px 45px rgba(23, 50, 77, 0.16);
}

.sci-legal-number {
    color: #F4B942;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1.5px;
    margin-bottom: 18px;
}

.sci-legal-hero-card h3 {
    color: #FFFFFF;
    margin: 0 0 12px;
    font-size: 25px;
    line-height: 1.25;
}

.sci-legal-hero-card p {
    color: rgba(255, 255, 255, 0.78);
    margin: 0;
    font-size: 15px;
    line-height: 1.7;
}


/* =========================
   MAIN PAGE
========================= */

.sci-terms-page {
    background: #FFFFFF;
    padding: 80px 30px;
}

.sci-terms-layout {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 70px;
    align-items: start;
}


/* =========================
   SIDEBAR
========================= */

.sci-terms-sidebar {
    position: sticky;
    top: 40px;
}

.sci-terms-sidebar-inner {
    border-left: 3px solid #EB5523;
    padding-left: 22px;
}

.sci-terms-sidebar .sci-eyebrow {
    display: block;
    margin-bottom: 20px;
}

.sci-terms-nav {
    display: flex;
    flex-direction: column;
}

.sci-terms-nav a {
    display: block;
    padding: 10px 0;
    color: #667685;
    text-decoration: none;
    font-size: 14px;
    line-height: 1.4;
    transition: all 0.3s ease;
}

.sci-terms-nav a:hover {
    color: #EB5523;
    padding-left: 5px;
}


/* =========================
   CONTENT
========================= */

.sci-terms-content {
    min-width: 0;
}

.sci-terms-block {
    position: relative;
    padding: 0 0 55px;
    margin-bottom: 55px;
    border-bottom: 1px solid #DCE6EF;
    scroll-margin-top: 40px;
}

.sci-terms-block:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.sci-terms-number {
    display: inline-block;
    margin-bottom: 12px;
    color: #EB5523;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.5px;
}

.sci-terms-block h2 {
    margin: 0 0 20px;
    color: #17324D;
    font-size: clamp(28px, 3vw, 38px);
    line-height: 1.2;
    font-weight: 700;
}

.sci-terms-block p {
    max-width: 820px;
    margin: 0 0 18px;
    color: #334E68;
    font-size: 16px;
    line-height: 1.8;
}

.sci-terms-block p:last-child {
    margin-bottom: 0;
}


/* =========================
   HIGHLIGHT BOX
========================= */

.sci-terms-highlight {
    margin-top: 28px;
    padding: 25px 28px;
    background: #F1F7FC;
    border-left: 4px solid #468AC9;
    border-radius: 0 8px 8px 0;
}

.sci-terms-highlight strong {
    display: block;
    margin-bottom: 8px;
    color: #17324D;
    font-size: 16px;
}

.sci-terms-highlight p {
    margin: 0;
    color: #667685;
    font-size: 15px;
    line-height: 1.7;
}


/* =========================
   CONTACT
========================= */

.sci-terms-contact {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 30px;
}

.sci-contact-box {
    padding: 24px;
    background: #FAFAF7;
    border: 1px solid #DCE6EF;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.sci-contact-box:hover {
    transform: translateY(-4px);
    border-color: #468AC9;
    box-shadow: 0 10px 25px rgba(23, 50, 77, 0.08);
}

.sci-contact-label {
    display: block;
    margin-bottom: 10px;
    color: #EB5523;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.4px;
}

.sci-contact-box h3 {
    margin: 0;
    color: #17324D;
    font-size: 16px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}


/* =========================
   FINAL MESSAGE
========================= */

.sci-terms-final {
    margin-top: 35px;
    padding: 30px;
    background: #17324D;
    border-radius: 10px;
}

.sci-terms-final strong {
    display: block;
    margin-bottom: 10px;
    color: #F4B942;
    font-size: 18px;
}

.sci-terms-final p {
    margin: 0;
    color: rgba(255, 255, 255, 0.78);
    font-size: 15px;
    line-height: 1.7;
}


/* =========================
   TABLET
========================= */

@media (max-width: 991px) {

    .sci-legal-hero {
        padding: 70px 25px;
    }

    .sci-legal-hero-inner {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .sci-legal-hero-card {
        max-width: 600px;
    }

    .sci-terms-page {
        padding: 60px 25px;
    }

    .sci-terms-layout {
        grid-template-columns: 220px minmax(0, 1fr);
        gap: 45px;
    }

    .sci-terms-contact {
        grid-template-columns: 1fr;
    }

}


/* =========================
   MOBILE
========================= */

@media (max-width: 767px) {

    .sci-legal-hero {
        padding: 55px 20px;
    }

    .sci-legal-hero-content h1 {
        font-size: 42px;
        letter-spacing: -1px;
    }

    .sci-legal-hero-content > p {
        font-size: 16px;
        line-height: 1.7;
    }

    .sci-legal-hero-card {
        padding: 28px;
    }

    .sci-terms-page {
        padding: 50px 20px;
    }

    .sci-terms-layout {
        display: block;
    }

    .sci-terms-sidebar {
        position: static;
        margin-bottom: 45px;
    }

    .sci-terms-sidebar-inner {
        padding: 22px;
        border: 1px solid #DCE6EF;
        border-left: 4px solid #EB5523;
        border-radius: 0 8px 8px 0;
        background: #FAFAF7;
    }

    .sci-terms-nav {
        display: grid;
        grid-template-columns: 1fr;
    }

    .sci-terms-nav a {
        padding: 9px 0;
    }

    .sci-terms-block {
        padding-bottom: 40px;
        margin-bottom: 40px;
    }

    .sci-terms-block h2 {
        font-size: 28px;
    }

    .sci-terms-block p {
        font-size: 15px;
        line-height: 1.75;
    }

    .sci-terms-highlight {
        padding: 22px;
    }

    .sci-terms-contact {
        grid-template-columns: 1fr;
    }

    .sci-contact-box {
        padding: 20px;
    }

    .sci-terms-final {
        padding: 25px;
    }

}


/* =========================================================
   SCHOOL A CHILD INITIATIVE
   CHILDREN WE SUPPORT PAGE
   Scoped under .saci-children-page

   Brand palette:
   Primary   Orange     #EB5523
   Secondary Blue       #468AC9
   Accent    Warm Gold  #F4B942
   Bg        Soft White #FAFAF7
   Light     Pale Blue  #F1F7FC
   Text      Deep Navy  #17324D
   Muted     Slate      #667685
   ========================================================= */

.saci-children-page {
    --saci-primary: #EB5523;
    --saci-secondary: #468AC9;
    --saci-accent: #F4B942;
    --saci-bg-soft: #FAFAF7;
    --saci-bg-light: #F1F7FC;
    --saci-text: #17324D;
    --saci-muted: #667685;
    --saci-white: #FFFFFF;
    --saci-border: rgba(70, 138, 201, 0.18);
    --saci-shadow: 0 15px 40px rgba(23, 50, 77, 0.1);

    font-family: inherit;
    color: var(--saci-muted);
    line-height: 1.7;
    overflow: hidden;
}

/* =========================================================
   GLOBAL
   ========================================================= */

.saci-children-page *,
.saci-children-page *::before,
.saci-children-page *::after {
    box-sizing: border-box;
}

.saci-children-page h1,
.saci-children-page h2,
.saci-children-page h3,
.saci-children-page p {
    margin-top: 0;
}

.saci-children-page h1,
.saci-children-page h2,
.saci-children-page h3 {
    color: var(--saci-text);
    line-height: 1.2;
}

.saci-children-page a {
    text-decoration: none;
}

.saci-children-container {
    width: 90%;
    max-width: 1180px;
    margin: 0 auto;
}

/* =========================================================
   HERO
   ========================================================= */

.saci-children-hero {
    position: relative;
    background:
        radial-gradient(
            circle at 85% 20%,
            rgba(244, 185, 66, 0.18),
            transparent 34%
        ),
        radial-gradient(
            circle at 15% 85%,
            rgba(70, 138, 201, 0.18),
            transparent 38%
        ),
        var(--saci-text); /* Deep Navy */
    padding: 110px 0 120px;
    overflow: hidden;
}

.saci-children-hero::before,
.saci-children-hero::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.saci-children-hero::before {
    width: 330px;
    height: 330px;
    top: -170px;
    right: -80px;
    border: 1px solid rgba(244, 185, 66, 0.18); /* Warm Gold ring */
}

.saci-children-hero::after {
    width: 230px;
    height: 230px;
    bottom: -130px;
    left: -70px;
    border: 1px solid rgba(70, 138, 201, 0.28); /* Secondary Blue ring */
}

.saci-children-hero-inner {
    position: relative;
    z-index: 2;
    max-width: 850px;
}

.saci-children-hero h1 {
    color: var(--saci-bg-soft); /* Soft White */
    font-size: clamp(42px, 5vw, 68px);
    font-weight: 700;
    letter-spacing: -1.5px;
    margin-bottom: 26px;
}

.saci-children-hero p {
    max-width: 760px;
    color: rgba(250, 250, 247, 0.88);
    font-size: 19px;
    line-height: 1.8;
    margin-bottom: 0;
}

/* =========================================================
   INTRO
   ========================================================= */

.saci-children-intro {
    padding: 95px 0 70px;
    background: var(--saci-bg-soft); /* Soft White */
    text-align: center;
}

.saci-children-intro h2 {
    max-width: 760px;
    margin: 0 auto 20px;
    font-size: clamp(32px, 4vw, 48px);
    color: var(--saci-text);
}

.saci-children-intro p {
    max-width: 720px;
    margin: 0 auto;
    font-size: 17px;
    color: var(--saci-muted);
}

/* =========================================================
   CHILD STORY SECTIONS
   ========================================================= */

.saci-child-story {
    padding: 95px 0;
    background: var(--saci-bg-light); /* Pale Blue */
}

.saci-child-story:nth-of-type(even) {
    background: var(--saci-bg-soft); /* Soft White */
}

.saci-child-story-inner {
    display: grid;
    grid-template-columns: minmax(280px, 0.85fr) minmax(0, 1.15fr);
    gap: 75px;
    align-items: center;
}

.saci-child-story-reverse .saci-child-story-inner {
    grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
}

.saci-child-story-reverse .saci-child-story-content {
    order: 1;
}

.saci-child-story-reverse .saci-child-story-visual {
    order: 2;
}

/* =========================================================
   CHILD VISUAL
   ========================================================= */

.saci-child-story-visual {
    position: relative;
}

.saci-child-image-card {
    position: relative;
    min-height: 390px;
    border-radius: 28px;
    background: var(--saci-primary); /* Primary Orange */
    overflow: hidden;
    box-shadow: 0 15px 40px rgba(235, 85, 35, 0.28);
    display: flex;
    align-items: center;
    justify-content: center;
}

.saci-child-image-card::before,
.saci-child-image-card::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    background: var(--saci-accent); /* Warm Gold */
}

.saci-child-image-card::before {
    width: 190px;
    height: 190px;
    top: -80px;
    right: -55px;
    opacity: 0.22;
}

.saci-child-image-card::after {
    width: 140px;
    height: 140px;
    bottom: -65px;
    left: -45px;
    opacity: 0.16;
}

.saci-child-placeholder {
    position: relative;
    z-index: 2;
    width: 155px;
    height: 155px;
    border-radius: 50%;
    background: var(--saci-accent); /* Warm Gold */
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--saci-text); /* Deep Navy */
    font-size: 18px;
    font-weight: 700;
    text-align: center;
    padding: 20px;
}

.saci-child-number {
    position: absolute;
    z-index: 3;
    top: 25px;
    left: 25px;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: var(--saci-white);
    color: var(--saci-primary); /* Primary Orange */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 700;
    border: 2px solid var(--saci-accent);
}

/* =========================================================
   CHILD CONTENT
   ========================================================= */

.saci-child-story-content {
    max-width: 650px;
}

.saci-child-eyebrow {
    display: inline-block;
    margin-bottom: 15px;
    color: var(--saci-primary); /* Primary Orange */
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.saci-child-story-content h2 {
    font-size: clamp(32px, 4vw, 46px);
    margin-bottom: 25px;
    color: var(--saci-text); /* Deep Navy */
}

.saci-child-story-content p {
    font-size: 17px;
    margin-bottom: 18px;
    color: var(--saci-muted); /* Slate */
}

.saci-child-story-content p:last-of-type {
    margin-bottom: 30px;
}

/* =========================================================
   BUTTON
   ========================================================= */

.saci-children-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 54px;
    padding: 15px 32px;
    border-radius: 50px;
    background: var(--saci-primary); /* Primary Orange */
    border: 2px solid var(--saci-primary);
    color: var(--saci-white) !important;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    box-shadow: 0 8px 20px rgba(235, 85, 35, 0.32);
    transition: all 0.25s ease;
}

.saci-children-button:hover,
.saci-children-button:focus {
    background: var(--saci-accent); /* Warm Gold */
    border-color: var(--saci-accent);
    color: var(--saci-text) !important;
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(244, 185, 66, 0.4);
}

/* =========================================================
   FINAL CTA
   ========================================================= */

.saci-children-final {
    position: relative;
    background: var(--saci-text); /* Deep Navy */
    padding: 100px 0;
    text-align: center;
    overflow: hidden;
}

.saci-children-final::before {
    content: "";
    position: absolute;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: rgba(70, 138, 201, 0.22); /* Secondary Blue bubble */
    top: -160px;
    left: -80px;
}

.saci-children-final::after {
    content: "";
    position: absolute;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    background: rgba(244, 185, 66, 0.14); /* Warm Gold bubble */
    bottom: -130px;
    right: -60px;
}

.saci-children-final-inner {
    position: relative;
    z-index: 2;
    max-width: 760px;
    margin: 0 auto;
}

.saci-children-final h2 {
    color: var(--saci-bg-soft); /* Soft White */
    font-size: clamp(34px, 4vw, 50px);
    margin-bottom: 22px;
}

.saci-children-final p {
    max-width: 650px;
    margin: 0 auto 32px;
    color: rgba(250, 250, 247, 0.85);
    font-size: 17px;
}

/* Final CTA button — keeps same orange → gold pattern */
.saci-children-final .saci-children-button {
    background: var(--saci-primary);
    border-color: var(--saci-primary);
    color: var(--saci-white) !important;
}

.saci-children-final .saci-children-button:hover,
.saci-children-final .saci-children-button:focus {
    background: var(--saci-accent);
    border-color: var(--saci-accent);
    color: var(--saci-text) !important;
}

/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 980px) {

    .saci-children-hero {
        padding: 90px 0 100px;
    }

    .saci-child-story-inner,
    .saci-child-story-reverse .saci-child-story-inner {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .saci-child-story-reverse .saci-child-story-content,
    .saci-child-story-reverse .saci-child-story-visual {
        order: initial;
    }

    .saci-child-story-content {
        max-width: 100%;
    }

    .saci-child-image-card {
        min-height: 340px;
    }
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .saci-children-container {
        width: 88%;
    }

    .saci-children-hero {
        padding: 75px 0 85px;
    }

    .saci-children-hero h1 {
        font-size: 42px;
        letter-spacing: -1px;
    }

    .saci-children-hero p {
        font-size: 17px;
    }

    .saci-children-intro {
        padding: 70px 0 50px;
    }

    .saci-child-story {
        padding: 70px 0;
    }

    .saci-child-story-content h2 {
        font-size: 34px;
    }

    .saci-child-story-content p {
        font-size: 16px;
    }

    .saci-child-image-card {
        min-height: 300px;
        border-radius: 22px;
    }

    .saci-child-placeholder {
        width: 135px;
        height: 135px;
    }

    .saci-children-final {
        padding: 75px 0;
    }
}

/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

    .saci-children-container {
        width: 86%;
    }

    .saci-children-hero {
        padding: 65px 0 75px;
    }

    .saci-children-hero h1 {
        font-size: 36px;
    }

    .saci-children-hero p {
        font-size: 16px;
    }

    .saci-children-intro {
        padding: 60px 0 40px;
    }

    .saci-child-story {
        padding: 60px 0;
    }

    .saci-child-story-content h2 {
        font-size: 30px;
    }

    .saci-child-image-card {
        min-height: 250px;
    }

    .saci-child-number {
        top: 18px;
        left: 18px;
        width: 48px;
        height: 48px;
    }

    .saci-child-placeholder {
        width: 115px;
        height: 115px;
        font-size: 15px;
    }

    .saci-children-button {
        width: 100%;
        text-align: center;
    }

    .saci-children-final h2 {
        font-size: 32px;
    }
}


/* =========================================================
   SCHOOL A CHILD INITIATIVE
   PAGE 10: GET INVOLVED
   Scoped under .saci-get-involved-page

   Brand palette:
   Primary   Orange     #EB5523
   Secondary Blue       #468AC9
   Accent    Warm Gold  #F4B942
   Bg        Soft White #FAFAF7
   Light     Pale Blue  #F1F7FC
   Text      Deep Navy  #17324D
   Muted     Slate      #667685
   ========================================================= */

.saci-get-involved-page {
    --saci-primary: #EB5523;
    --saci-secondary: #468AC9;
    --saci-accent: #F4B942;
    --saci-bg-soft: #FAFAF7;
    --saci-bg-light: #F1F7FC;
    --saci-text: #17324D;
    --saci-muted: #667685;
    --saci-white: #FFFFFF;
    --saci-border: rgba(70, 138, 201, 0.18);
    --saci-shadow: 0 15px 40px rgba(23, 50, 77, 0.1);

    font-family: inherit;
    color: var(--saci-muted);
    line-height: 1.7;
    overflow: hidden;
}


/* =========================================================
   GLOBAL
   ========================================================= */

.saci-get-involved-page *,
.saci-get-involved-page *::before,
.saci-get-involved-page *::after {
    box-sizing: border-box;
}

.saci-get-involved-page h1,
.saci-get-involved-page h2,
.saci-get-involved-page h3,
.saci-get-involved-page p {
    margin-top: 0;
}

.saci-get-involved-page h1,
.saci-get-involved-page h2,
.saci-get-involved-page h3 {
    line-height: 1.2;
}

.saci-get-involved-page a {
    text-decoration: none;
}

.saci-get-involved-container {
    width: 90%;
    max-width: 1180px;
    margin: 0 auto;
}


/* =========================================================
   HERO
   ========================================================= */

.saci-get-involved-hero {
    position: relative;
    background:
        radial-gradient(
            circle at 85% 20%,
            rgba(244, 185, 66, 0.18),
            transparent 34%
        ),
        radial-gradient(
            circle at 15% 85%,
            rgba(70, 138, 201, 0.18),
            transparent 38%
        ),
        var(--saci-text); /* Deep Navy */
    padding: 110px 0 120px;
    overflow: hidden;
}

.saci-get-involved-hero::before,
.saci-get-involved-hero::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.saci-get-involved-hero::before {
    width: 350px;
    height: 350px;
    top: -180px;
    right: -90px;
    border: 1px solid rgba(244, 185, 66, 0.18); /* Warm Gold ring */
}

.saci-get-involved-hero::after {
    width: 230px;
    height: 230px;
    bottom: -125px;
    left: -70px;
    border: 1px solid rgba(70, 138, 201, 0.28); /* Secondary Blue ring */
}

.saci-get-involved-hero-inner {
    position: relative;
    z-index: 2;
    max-width: 850px;
}

.saci-get-involved-hero h1 {
    color: var(--saci-bg-soft); /* Soft White */
    font-size: clamp(42px, 5vw, 68px);
    font-weight: 700;
    letter-spacing: -1.5px;
    margin-bottom: 26px;
}

.saci-get-involved-hero p {
    max-width: 790px;
    color: rgba(250, 250, 247, 0.88);
    font-size: 19px;
    line-height: 1.8;
    margin-bottom: 0;
}


/* =========================================================
   ACTION SECTIONS
   ========================================================= */

.saci-involvement-section {
    padding: 100px 0;
    background: var(--saci-bg-soft); /* Soft White */
}

.saci-involvement-section:nth-child(odd) {
    background: var(--saci-bg-light); /* Pale Blue */
}

.saci-involvement-inner {
    display: grid;
    grid-template-columns: minmax(280px, 0.85fr) minmax(0, 1.15fr);
    gap: 75px;
    align-items: center;
}

.saci-involvement-section.saci-involvement-reverse
.saci-involvement-inner {
    grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
}

.saci-involvement-reverse .saci-involvement-content {
    order: 1;
}

.saci-involvement-reverse .saci-involvement-visual {
    order: 2;
}


/* =========================================================
   VISUAL BLOCKS
   ========================================================= */

.saci-involvement-visual {
    position: relative;
}

.saci-involvement-visual-box {
    position: relative;
    min-height: 350px;
    border-radius: 28px;
    background: var(--saci-primary); /* Primary Orange */
    padding: 45px;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    box-shadow: 0 15px 40px rgba(235, 85, 35, 0.28);
}

.saci-involvement-visual-box::before,
.saci-involvement-visual-box::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    background: var(--saci-accent); /* Warm Gold */
}

.saci-involvement-visual-box::before {
    width: 230px;
    height: 230px;
    top: -100px;
    right: -65px;
    opacity: 0.22;
}

.saci-involvement-visual-box::after {
    width: 170px;
    height: 170px;
    bottom: -90px;
    left: -55px;
    opacity: 0.16;
}

.saci-involvement-number {
    position: absolute;
    top: 25px;
    left: 25px;
    z-index: 2;

    width: 55px;
    height: 55px;
    border-radius: 50%;

    background: var(--saci-white);
    color: var(--saci-primary); /* Primary Orange */
    border: 2px solid var(--saci-accent); /* Warm Gold ring */

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 15px;
    font-weight: 700;
}

.saci-involvement-visual-content {
    position: relative;
    z-index: 2;
}

.saci-involvement-visual-content span {
    display: block;
    color: var(--saci-accent); /* Warm Gold */
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.saci-involvement-visual-content strong {
    display: block;
    color: var(--saci-bg-soft); /* Soft White */
    font-size: 28px;
    line-height: 1.25;
}


/* =========================================================
   CONTENT
   ========================================================= */

.saci-involvement-content {
    max-width: 650px;
}

.saci-involvement-eyebrow {
    display: inline-block;
    color: var(--saci-primary); /* Primary Orange */
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 15px;
}

.saci-involvement-content h2 {
    color: var(--saci-text); /* Deep Navy */
    font-size: clamp(34px, 4vw, 48px);
    margin-bottom: 25px;
}

.saci-involvement-content p {
    font-size: 17px;
    margin-bottom: 30px;
    color: var(--saci-muted); /* Slate */
}


/* =========================================================
   BUTTON
   ========================================================= */

.saci-involvement-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 54px;
    padding: 15px 32px;

    border-radius: 50px;

    background: var(--saci-primary); /* Primary Orange */
    border: 2px solid var(--saci-primary);
    color: var(--saci-white) !important;

    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;

    box-shadow: 0 8px 20px rgba(235, 85, 35, 0.32);

    transition: all 0.25s ease;
}

.saci-involvement-button:hover,
.saci-involvement-button:focus {
    background: var(--saci-accent); /* Warm Gold */
    border-color: var(--saci-accent);
    color: var(--saci-text) !important;
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(244, 185, 66, 0.4);
}


/* =========================================================
   FINAL CTA
   ========================================================= */

.saci-get-involved-final {
    position: relative;
    background: var(--saci-text); /* Deep Navy */
    padding: 105px 0;
    text-align: center;
    overflow: hidden;
}

.saci-get-involved-final::before,
.saci-get-involved-final::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.saci-get-involved-final::before {
    width: 310px;
    height: 310px;
    top: -165px;
    left: -85px;
    background: rgba(70, 138, 201, 0.22); /* Secondary Blue bubble */
}

.saci-get-involved-final::after {
    width: 250px;
    height: 250px;
    bottom: -135px;
    right: -65px;
    background: rgba(244, 185, 66, 0.14); /* Warm Gold bubble */
}

.saci-get-involved-final-inner {
    position: relative;
    z-index: 2;
    max-width: 760px;
    margin: 0 auto;
}

.saci-get-involved-final h2 {
    color: var(--saci-bg-soft); /* Soft White */
    font-size: clamp(36px, 4vw, 52px);
    margin-bottom: 22px;
}

.saci-get-involved-final p {
    max-width: 650px;
    margin: 0 auto 32px;
    color: rgba(250, 250, 247, 0.85);
    font-size: 17px;
}

/* Final CTA button — same orange → gold pattern */
.saci-get-involved-final .saci-involvement-button {
    background: var(--saci-primary);
    border-color: var(--saci-primary);
    color: var(--saci-white) !important;
}

.saci-get-involved-final .saci-involvement-button:hover,
.saci-get-involved-final .saci-involvement-button:focus {
    background: var(--saci-accent);
    border-color: var(--saci-accent);
    color: var(--saci-text) !important;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 980px) {

    .saci-get-involved-hero {
        padding: 90px 0 100px;
    }

    .saci-involvement-inner,
    .saci-involvement-section.saci-involvement-reverse
    .saci-involvement-inner {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .saci-involvement-reverse .saci-involvement-content,
    .saci-involvement-reverse .saci-involvement-visual {
        order: initial;
    }

    .saci-involvement-content {
        max-width: 100%;
    }

    .saci-involvement-visual-box {
        min-height: 320px;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .saci-get-involved-container {
        width: 88%;
    }

    .saci-get-involved-hero {
        padding: 75px 0 85px;
    }

    .saci-get-involved-hero h1 {
        font-size: 42px;
        letter-spacing: -1px;
    }

    .saci-get-involved-hero p {
        font-size: 17px;
    }

    .saci-involvement-section {
        padding: 70px 0;
    }

    .saci-involvement-content h2 {
        font-size: 34px;
    }

    .saci-involvement-content p {
        font-size: 16px;
    }

    .saci-involvement-visual-box {
        min-height: 290px;
        padding: 35px;
        border-radius: 22px;
    }

    .saci-involvement-visual-content strong {
        font-size: 25px;
    }

    .saci-get-involved-final {
        padding: 75px 0;
    }
}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

    .saci-get-involved-container {
        width: 86%;
    }

    .saci-get-involved-hero {
        padding: 65px 0 75px;
    }

    .saci-get-involved-hero h1 {
        font-size: 36px;
    }

    .saci-get-involved-hero p {
        font-size: 16px;
    }

    .saci-involvement-section {
        padding: 60px 0;
    }

    .saci-involvement-content h2 {
        font-size: 30px;
    }

    .saci-involvement-visual-box {
        min-height: 250px;
        padding: 28px;
    }

    .saci-involvement-number {
        top: 18px;
        left: 18px;
        width: 48px;
        height: 48px;
    }

    .saci-involvement-visual-content strong {
        font-size: 22px;
    }

    .saci-involvement-button {
        width: 100%;
        text-align: center;
    }

    .saci-get-involved-final h2 {
        font-size: 32px;
    }
}


/* =========================================================
   SPONSOR A CHILD - CONVERSION LANDING PAGE
   School a Child Initiative
   Scoped under .saci-sponsor-page

   Brand palette:
   Primary   Orange     #EB5523
   Secondary Blue       #468AC9
   Accent    Warm Gold  #F4B942
   Bg        Soft White #FAFAF7
   Light     Pale Blue  #F1F7FC
   Text      Deep Navy  #17324D
   Muted     Slate      #667685
========================================================= */

.saci-sponsor-page {
    --saci-primary: #EB5523;
    --saci-primary-dark: #D44A1C;
    --saci-secondary: #468AC9;
    --saci-accent: #F4B942;
    --saci-light: #F1F7FC;
    --saci-bg-soft: #FAFAF7;
    --saci-dark: #17324D;
    --saci-text: #667685;
    --saci-white: #FFFFFF;
    font-family: inherit;
    color: var(--saci-text);
    line-height: 1.7;
    overflow: hidden;
}

.saci-sponsor-page * {
    box-sizing: border-box;
}

/* =========================================================
   GLOBAL
========================================================= */

.saci-container {
    width: min(1120px, 90%);
    margin: 0 auto;
}

.saci-eyebrow {
    display: inline-block;
    margin-bottom: 14px;
    color: var(--saci-primary); /* Primary Orange */
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 2px;
    line-height: 1.3;
    text-transform: uppercase;
}

.saci-section-heading {
    max-width: 720px;
    margin: 0 auto 55px;
    text-align: center;
}

.saci-section-heading h2 {
    margin: 0 0 18px;
    color: var(--saci-dark); /* Deep Navy */
    font-size: clamp(32px, 4vw, 48px);
    font-weight: 800;
    line-height: 1.15;
}

.saci-section-heading p {
    margin: 0;
    font-size: 17px;
    color: var(--saci-text); /* Slate */
}

/* =========================================================
   HERO
========================================================= */

.saci-sponsor-hero {
    position: relative;
    padding: 110px 0 120px;
    background:
        radial-gradient(circle at 90% 20%, rgba(70,138,201,.12), transparent 28%),
        radial-gradient(circle at 10% 90%, rgba(244,185,66,.22), transparent 30%),
        var(--saci-bg-soft); /* Soft White base */
}

.saci-sponsor-hero:after {
    content: "";
    position: absolute;
    right: -120px;
    bottom: -180px;
    width: 430px;
    height: 430px;
    border: 70px solid rgba(235,85,35,.06); /* Primary Orange ring */
    border-radius: 50%;
    pointer-events: none;
}

.saci-hero-content {
    position: relative;
    z-index: 2;
    max-width: 820px;
    margin: 0 auto;
    text-align: center;
}

.saci-hero-content h1 {
    margin: 0 0 25px;
    color: var(--saci-dark); /* Deep Navy */
    font-size: clamp(42px, 6vw, 72px);
    font-weight: 850;
    letter-spacing: -1.5px;
    line-height: 1.05;
}

.saci-hero-content p {
    max-width: 720px;
    margin: 0 auto 35px;
    color: var(--saci-text); /* Slate */
    font-size: clamp(17px, 2vw, 20px);
    line-height: 1.8;
}

.saci-main-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 220px;
    padding: 16px 34px;
    border-radius: 50px;
    background: var(--saci-primary); /* Primary Orange */
    border: 2px solid var(--saci-primary);
    color: var(--saci-white) !important;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 1px;
    line-height: 1;
    text-decoration: none !important;
    text-transform: uppercase;
    transition: all .25s ease;
    box-shadow: 0 12px 30px rgba(235,85,35,.28);
}

.saci-main-button:hover,
.saci-main-button:focus {
    background: var(--saci-accent); /* Warm Gold */
    border-color: var(--saci-accent);
    color: var(--saci-dark) !important; /* Deep Navy text on gold */
    transform: translateY(-3px);
    box-shadow: 0 16px 35px rgba(244,185,66,.4);
}

/* =========================================================
   SECTION 2 - WHAT SPONSORSHIP SUPPORTS
========================================================= */

.saci-support-section {
    padding: 105px 0;
    background: var(--saci-bg-soft); /* Soft White */
}

.saci-support-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.saci-support-card {
    position: relative;
    min-height: 190px;
    padding: 30px;
    border: 1px solid rgba(70,138,201,.18);
    border-radius: 14px;
    background: var(--saci-white);
    box-shadow: 0 8px 30px rgba(23,50,77,.06);
    overflow: hidden;
    transition: all .25s ease;
}

.saci-support-card:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 5px;
    height: 100%;
    background: var(--saci-primary); /* Primary Orange */
}

.saci-support-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 35px rgba(23,50,77,.12);
    border-color: rgba(70,138,201,.35);
}

.saci-support-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin-bottom: 22px;
    border-radius: 50%;
    background: var(--saci-accent); /* Warm Gold fill */
    color: var(--saci-dark); /* Deep Navy number */
    font-size: 14px;
    font-weight: 800;
    border: 2px solid var(--saci-primary); /* Orange ring */
}

.saci-support-card h3 {
    margin: 0;
    color: var(--saci-dark); /* Deep Navy */
    font-size: 21px;
    font-weight: 800;
    line-height: 1.25;
}

/* =========================================================
   SECTION 3 - WHY SUPPORT MATTERS
========================================================= */

.saci-impact-section {
    position: relative;
    padding: 110px 0;
    background: var(--saci-dark); /* Deep Navy */
    color: var(--saci-white);
    overflow: hidden;
}

.saci-impact-section:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 40%;
    height: 100%;
    background: rgba(70,138,201,.12); /* Secondary Blue wash */
    clip-path: polygon(25% 0, 100% 0, 100% 100%, 0 100%);
}

.saci-impact-inner {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: .85fr 1.15fr;
    align-items: center;
    gap: 80px;
}

.saci-impact-label {
    color: var(--saci-accent); /* Warm Gold */
}

.saci-impact-title {
    margin: 0;
    color: var(--saci-bg-soft); /* Soft White */
    font-size: clamp(35px, 4.5vw, 54px);
    font-weight: 800;
    line-height: 1.12;
}

.saci-impact-copy {
    max-width: 650px;
    margin: 0;
    color: rgba(250,250,247,.88);
    font-size: 18px;
    line-height: 1.85;
}

/* =========================================================
   SECTION 4 - HOW SPONSORSHIP WORKS
========================================================= */

.saci-process-section {
    padding: 110px 0 120px;
    background: var(--saci-light); /* Pale Blue */
}

.saci-process-grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
}

.saci-process-grid:before {
    content: "";
    position: absolute;
    top: 32px;
    left: 12%;
    right: 12%;
    height: 2px;
    background: rgba(70,138,201,.28); /* Secondary Blue line */
}

.saci-process-step {
    position: relative;
    z-index: 2;
    text-align: center;
}

.saci-step-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 65px;
    height: 65px;
    margin: 0 auto 25px;
    border: 7px solid var(--saci-light); /* Pale Blue border — matches bg */
    border-radius: 50%;
    background: var(--saci-primary); /* Primary Orange */
    color: var(--saci-white);
    font-size: 19px;
    font-weight: 800;
    box-shadow: 0 0 0 2px var(--saci-primary);
}

.saci-process-step h3 {
    margin: 0 0 12px;
    color: var(--saci-dark); /* Deep Navy */
    font-size: 21px;
    font-weight: 800;
    line-height: 1.25;
}

.saci-process-step p {
    margin: 0 auto;
    max-width: 240px;
    font-size: 15px;
    line-height: 1.65;
    color: var(--saci-text); /* Slate */
}

/* =========================================================
   FINAL CTA
========================================================= */

.saci-final-cta {
    padding: 90px 0;
    background: var(--saci-bg-soft); /* Soft White */
    text-align: center;
}

.saci-final-cta h2 {
    max-width: 700px;
    margin: 0 auto 20px;
    color: var(--saci-dark); /* Deep Navy */
    font-size: clamp(32px, 4vw, 46px);
    font-weight: 800;
    line-height: 1.15;
}

.saci-final-cta p {
    max-width: 650px;
    margin: 0 auto 30px;
    font-size: 17px;
    color: var(--saci-text);
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 980px) {

    .saci-sponsor-hero {
        padding: 85px 0 90px;
    }

    .saci-support-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .saci-impact-inner {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .saci-process-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 45px 25px;
    }

    .saci-process-grid:before {
        display: none;
    }
}

@media (max-width: 600px) {

    .saci-container {
        width: 88%;
    }

    .saci-sponsor-hero {
        padding: 70px 0 75px;
    }

    .saci-hero-content h1 {
        font-size: 42px;
        letter-spacing: -1px;
    }

    .saci-hero-content p {
        font-size: 16px;
        line-height: 1.7;
    }

    .saci-main-button {
        width: 100%;
        max-width: 280px;
    }

    .saci-support-section,
    .saci-impact-section,
    .saci-process-section {
        padding: 75px 0;
    }

    .saci-section-heading {
        margin-bottom: 38px;
    }

    .saci-section-heading h2 {
        font-size: 34px;
    }

    .saci-support-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .saci-support-card {
        min-height: auto;
        padding: 25px;
    }

    .saci-impact-title {
        font-size: 36px;
    }

    .saci-impact-copy {
        font-size: 16px;
        line-height: 1.75;
    }

    .saci-process-grid {
        grid-template-columns: 1fr;
        gap: 35px;
    }

    .saci-process-step p {
        max-width: 310px;
    }

    .saci-final-cta {
        padding: 70px 0;
    }
}


/* =========================================================
   SCHOOL A CHILD INITIATIVE
   PAGE 14: PARTNER WITH US
   Scoped under .saci-partner-page

   Brand palette:
   Primary   Orange     #EB5523
   Secondary Blue       #468AC9
   Accent    Warm Gold  #F4B942
   Bg        Soft White #FAFAF7
   Light     Pale Blue  #F1F7FC
   Text      Deep Navy  #17324D
   Muted     Slate      #667685
========================================================= */

.saci-partner-page {
    --saci-primary: #EB5523;
    --saci-secondary: #468AC9;
    --saci-accent: #F4B942;
    --saci-bg-soft: #FAFAF7;
    --saci-bg-light: #F1F7FC;
    --saci-dark: #17324D;
    --saci-text: #667685;
    --saci-border: rgba(70, 138, 201, 0.18);
    --saci-white: #FFFFFF;
    --saci-shadow: 0 15px 40px rgba(23, 50, 77, 0.1);

    font-family: inherit;
    color: var(--saci-text);
    line-height: 1.7;
    overflow: hidden;
}


/* =========================================================
   GLOBAL
   ========================================================= */

.saci-partner-page *,
.saci-partner-page *::before,
.saci-partner-page *::after {
    box-sizing: border-box;
}

.saci-partner-page h1,
.saci-partner-page h2,
.saci-partner-page h3,
.saci-partner-page p {
    margin-top: 0;
}

.saci-partner-page h1,
.saci-partner-page h2,
.saci-partner-page h3 {
    line-height: 1.2;
}

.saci-partner-page a {
    text-decoration: none;
}

.saci-partner-container {
    width: 90%;
    max-width: 1180px;
    margin: 0 auto;
}


/* =========================================================
   HERO
   ========================================================= */

.saci-partner-hero {
    position: relative;
    background:
        radial-gradient(
            circle at 85% 20%,
            rgba(244, 185, 66, 0.18),
            transparent 34%
        ),
        radial-gradient(
            circle at 15% 85%,
            rgba(70, 138, 201, 0.18),
            transparent 38%
        ),
        var(--saci-dark); /* Deep Navy */
    padding: 110px 0 120px;
    overflow: hidden;
}

.saci-partner-hero::before,
.saci-partner-hero::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.saci-partner-hero::before {
    width: 350px;
    height: 350px;
    top: -180px;
    right: -90px;
    border: 1px solid rgba(244, 185, 66, 0.18); /* Warm Gold ring */
}

.saci-partner-hero::after {
    width: 230px;
    height: 230px;
    bottom: -125px;
    left: -70px;
    border: 1px solid rgba(70, 138, 201, 0.28); /* Secondary Blue ring */
}

.saci-partner-hero-inner {
    position: relative;
    z-index: 2;
    max-width: 850px;
}

.saci-partner-hero h1 {
    color: var(--saci-bg-soft); /* Soft White */
    font-size: clamp(42px, 5vw, 68px);
    font-weight: 700;
    letter-spacing: -1.5px;
    margin-bottom: 26px;
}

.saci-partner-hero p {
    max-width: 780px;
    color: rgba(250, 250, 247, 0.88);
    font-size: 19px;
    line-height: 1.8;
    margin-bottom: 0;
}


/* =========================================================
   SECTION 2: WHO CAN PARTNER
   ========================================================= */

.saci-partner-types {
    background: var(--saci-bg-soft); /* Soft White */
    padding: 100px 0;
}

.saci-partner-heading {
    max-width: 760px;
    margin: 0 auto 55px;
    text-align: center;
}

.saci-partner-heading h2 {
    color: var(--saci-dark); /* Deep Navy */
    font-size: clamp(34px, 4vw, 48px);
    margin-bottom: 18px;
}

.saci-partner-card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.saci-partner-card {
    position: relative;
    background: var(--saci-white);
    border: 1px solid var(--saci-border);
    border-radius: 20px;
    padding: 35px 30px;
    min-height: 190px;
    box-shadow: 0 8px 25px rgba(23, 50, 77, 0.05);
    transition: all 0.25s ease;
    border-top: 5px solid var(--saci-primary); /* Orange top bar */
}

.saci-partner-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--saci-shadow);
    border-color: rgba(70, 138, 201, 0.35);
    border-top-color: var(--saci-primary);
}

.saci-partner-card-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 46px;
    height: 46px;
    margin-bottom: 25px;

    border-radius: 50%;
    background: var(--saci-accent); /* Warm Gold fill */
    color: var(--saci-dark); /* Deep Navy number */
    border: 2px solid var(--saci-primary); /* Orange ring */

    font-size: 13px;
    font-weight: 700;
}

.saci-partner-card h3 {
    color: var(--saci-dark); /* Deep Navy */
    font-size: 23px;
    margin-bottom: 0;
}


/* =========================================================
   SECTION 3: WHAT PARTNERSHIP CAN LOOK LIKE
   ========================================================= */

.saci-partner-approach {
    background: var(--saci-bg-light); /* Pale Blue */
    padding: 100px 0;
}

.saci-partner-approach-inner {
    display: grid;
    grid-template-columns: minmax(280px, 0.8fr) minmax(0, 1.2fr);
    gap: 80px;
    align-items: center;
}

.saci-partner-approach-visual {
    position: relative;
}

.saci-partner-approach-box {
    position: relative;
    min-height: 370px;
    border-radius: 28px;
    background: var(--saci-primary); /* Primary Orange */
    padding: 45px;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    box-shadow: 0 15px 40px rgba(235, 85, 35, 0.28);
}

.saci-partner-approach-box::before,
.saci-partner-approach-box::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    background: var(--saci-accent); /* Warm Gold */
}

.saci-partner-approach-box::before {
    width: 250px;
    height: 250px;
    top: -110px;
    right: -70px;
    opacity: 0.22;
}

.saci-partner-approach-box::after {
    width: 175px;
    height: 175px;
    bottom: -90px;
    left: -55px;
    opacity: 0.16;
}

.saci-partner-approach-number {
    position: absolute;
    top: 25px;
    left: 25px;

    width: 55px;
    height: 55px;

    border-radius: 50%;
    background: var(--saci-white);
    color: var(--saci-primary); /* Orange number */
    border: 2px solid var(--saci-accent); /* Warm Gold ring */

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 15px;
    font-weight: 700;
}

.saci-partner-approach-message {
    position: relative;
    z-index: 2;
}

.saci-partner-approach-message span {
    display: block;
    color: var(--saci-accent); /* Warm Gold */
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.saci-partner-approach-message strong {
    display: block;
    color: var(--saci-bg-soft); /* Soft White */
    font-size: 30px;
    line-height: 1.25;
}

.saci-partner-approach-content {
    max-width: 650px;
}

.saci-partner-eyebrow {
    display: inline-block;
    color: var(--saci-primary); /* Primary Orange */
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 15px;
}

.saci-partner-approach-content h2 {
    color: var(--saci-dark); /* Deep Navy */
    font-size: clamp(34px, 4vw, 48px);
    margin-bottom: 25px;
}

.saci-partner-approach-content p {
    font-size: 17px;
    margin-bottom: 0;
    color: var(--saci-text);
}


/* =========================================================
   PARTNERSHIP CONTRIBUTIONS
   ========================================================= */

.saci-partner-contribution-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 30px;
}

.saci-partner-contribution {
    display: inline-flex;
    align-items: center;
    padding: 9px 16px;
    border-radius: 30px;
    background: var(--saci-white);
    border: 1px solid rgba(70, 138, 201, 0.28);
    color: var(--saci-dark);
    font-size: 13px;
    font-weight: 700;
    transition: all 0.2s ease;
}

.saci-partner-contribution:hover {
    border-color: var(--saci-primary);
    color: var(--saci-primary);
    background: rgba(235, 85, 35, 0.05);
}


/* =========================================================
   SECTION 4: BECOME A PARTNER
   ========================================================= */

.saci-partner-contact {
    position: relative;
    background: var(--saci-dark); /* Deep Navy */
    padding: 105px 0;
    text-align: center;
    overflow: hidden;
}

.saci-partner-contact::before,
.saci-partner-contact::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.saci-partner-contact::before {
    width: 320px;
    height: 320px;
    top: -170px;
    left: -90px;
    background: rgba(70, 138, 201, 0.22); /* Secondary Blue bubble */
}

.saci-partner-contact::after {
    width: 250px;
    height: 250px;
    bottom: -135px;
    right: -65px;
    background: rgba(244, 185, 66, 0.14); /* Warm Gold bubble */
}

.saci-partner-contact-inner {
    position: relative;
    z-index: 2;
    max-width: 780px;
    margin: 0 auto;
}

.saci-partner-contact h2 {
    color: var(--saci-bg-soft); /* Soft White */
    font-size: clamp(36px, 4vw, 52px);
    margin-bottom: 22px;
}

.saci-partner-contact p {
    max-width: 680px;
    margin: 0 auto 32px;
    color: rgba(250, 250, 247, 0.85);
    font-size: 17px;
}

.saci-partner-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 54px;
    padding: 15px 32px;

    border-radius: 50px;

    background: var(--saci-primary); /* Primary Orange */
    border: 2px solid var(--saci-primary);
    color: var(--saci-white) !important;

    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;

    box-shadow: 0 8px 20px rgba(235, 85, 35, 0.32);

    transition: all 0.25s ease;
}

.saci-partner-button:hover,
.saci-partner-button:focus {
    background: var(--saci-accent); /* Warm Gold */
    border-color: var(--saci-accent);
    color: var(--saci-dark) !important;
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(244, 185, 66, 0.4);
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 980px) {

    .saci-partner-hero {
        padding: 90px 0 100px;
    }

    .saci-partner-card-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .saci-partner-approach-inner {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .saci-partner-approach-content {
        max-width: 100%;
    }

    .saci-partner-approach-box {
        min-height: 320px;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .saci-partner-container {
        width: 88%;
    }

    .saci-partner-hero {
        padding: 75px 0 85px;
    }

    .saci-partner-hero h1 {
        font-size: 42px;
        letter-spacing: -1px;
    }

    .saci-partner-hero p {
        font-size: 17px;
    }

    .saci-partner-types,
    .saci-partner-approach {
        padding: 70px 0;
    }

    .saci-partner-heading {
        margin-bottom: 40px;
    }

    .saci-partner-card-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .saci-partner-card {
        min-height: auto;
        padding: 30px;
    }

    .saci-partner-approach-box {
        min-height: 290px;
        padding: 35px;
        border-radius: 22px;
    }

    .saci-partner-approach-message strong {
        font-size: 26px;
    }

    .saci-partner-approach-content h2 {
        font-size: 34px;
    }

    .saci-partner-approach-content p {
        font-size: 16px;
    }

    .saci-partner-contact {
        padding: 75px 0;
    }
}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

    .saci-partner-container {
        width: 86%;
    }

    .saci-partner-hero {
        padding: 65px 0 75px;
    }

    .saci-partner-hero h1 {
        font-size: 36px;
    }

    .saci-partner-hero p {
        font-size: 16px;
    }

    .saci-partner-heading h2 {
        font-size: 32px;
    }

    .saci-partner-card {
        padding: 26px;
    }

    .saci-partner-card h3 {
        font-size: 22px;
    }

    .saci-partner-approach-box {
        min-height: 250px;
        padding: 28px;
    }

    .saci-partner-approach-number {
        top: 18px;
        left: 18px;
        width: 48px;
        height: 48px;
    }

    .saci-partner-approach-message strong {
        font-size: 23px;
    }

    .saci-partner-contact h2 {
        font-size: 32px;
    }

    .saci-partner-button {
        width: 100%;
    }
}


/* =========================================================
   SCHOOL A CHILD INITIATIVE
   PAGE 16: CONTACT
   Scoped under .saci-contact-page

   Brand palette:
   Primary   Orange     #EB5523
   Secondary Blue       #468AC9
   Accent    Warm Gold  #F4B942
   Bg        Soft White #FAFAF7
   Light     Pale Blue  #F1F7FC
   Text      Deep Navy  #17324D
   Muted     Slate      #667685
========================================================= */

.saci-contact-page {
    --saci-primary: #EB5523;
    --saci-primary-dark: #D44A1C;
    --saci-secondary: #468AC9;
    --saci-accent: #F4B942;
    --saci-light: #F1F7FC;
    --saci-bg-soft: #FAFAF7;
    --saci-dark: #17324D;
    --saci-text: #667685;
    --saci-border: rgba(70, 138, 201, 0.18);
    --saci-white: #FFFFFF;

    font-family: inherit;
    color: var(--saci-text);
    line-height: 1.7;
    overflow: hidden;
}

.saci-contact-page * {
    box-sizing: border-box;
}

.saci-contact-container {
    width: min(1120px, 90%);
    margin: 0 auto;
}

.saci-contact-eyebrow {
    display: inline-block;
    margin-bottom: 14px;
    color: var(--saci-primary); /* Primary Orange */
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 2px;
    line-height: 1.3;
    text-transform: uppercase;
}


/* =========================================================
   HERO
========================================================= */

.saci-contact-hero {
    position: relative;
    padding: 115px 0 125px;
    background:
        radial-gradient(
            circle at 88% 20%,
            rgba(70, 138, 201, 0.14),
            transparent 30%
        ),
        radial-gradient(
            circle at 10% 90%,
            rgba(244, 185, 66, 0.22),
            transparent 32%
        ),
        var(--saci-bg-soft); /* Soft White */
}

.saci-contact-hero:after {
    content: "";
    position: absolute;
    right: -160px;
    bottom: -190px;
    width: 470px;
    height: 470px;
    border: 75px solid rgba(235, 85, 35, 0.06); /* Primary Orange ring */
    border-radius: 50%;
    pointer-events: none;
}

.saci-contact-hero-content {
    position: relative;
    z-index: 2;
    max-width: 850px;
    margin: 0 auto;
    text-align: center;
}

.saci-contact-hero-content h1 {
    margin: 0 0 25px;
    color: var(--saci-dark); /* Deep Navy */
    font-size: clamp(42px, 6vw, 70px);
    font-weight: 850;
    letter-spacing: -1.5px;
    line-height: 1.06;
}

.saci-contact-hero-content p {
    max-width: 760px;
    margin: 0 auto;
    color: var(--saci-text); /* Slate */
    font-size: clamp(17px, 2vw, 20px);
    line-height: 1.8;
}


/* =========================================================
   SECTION 2 — CONTACT DETAILS
========================================================= */

.saci-contact-details {
    padding: 105px 0;
    background: var(--saci-bg-soft); /* Soft White */
}

.saci-contact-details-header {
    max-width: 700px;
    margin: 0 auto 55px;
    text-align: center;
}

.saci-contact-details-header h2 {
    margin: 0 0 15px;
    color: var(--saci-dark); /* Deep Navy */
    font-size: clamp(32px, 4vw, 46px);
    font-weight: 800;
    line-height: 1.15;
}

.saci-contact-details-header p {
    margin: 0;
    font-size: 16px;
    color: var(--saci-text);
}

.saci-contact-details-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
}

.saci-contact-card {
    position: relative;
    padding: 35px 30px;
    border: 1px solid var(--saci-border);
    border-radius: 14px;
    background: var(--saci-white);
    text-align: center;
    box-shadow: 0 8px 30px rgba(23, 50, 77, 0.06);
    transition: all .25s ease;
    border-top: 5px solid var(--saci-primary); /* Orange top bar */
}

.saci-contact-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 35px rgba(23, 50, 77, 0.12);
    border-color: rgba(70, 138, 201, 0.35);
    border-top-color: var(--saci-primary);
}

.saci-contact-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    margin: 0 auto 22px;
    border-radius: 50%;
    background: var(--saci-accent); /* Warm Gold fill */
    color: var(--saci-dark); /* Deep Navy */
    font-size: 23px;
    border: 2px solid var(--saci-primary); /* Orange ring */
}

.saci-contact-card h3 {
    margin: 0 0 12px;
    color: var(--saci-dark); /* Deep Navy */
    font-size: 21px;
    font-weight: 800;
    line-height: 1.25;
}

.saci-contact-card p {
    margin: 0;
    font-size: 14px !important;
    line-height: 1.7;
    color: var(--saci-text);
}

.saci-contact-card .saci-unverified {
    color: var(--saci-text);
    font-size: 13px;
    font-style: italic;
}

.saci-social-links {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 15px;
}

.saci-social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 55px;
    padding: 9px 15px;
    border: 1px solid rgba(70, 138, 201, 0.28);
    border-radius: 8px;
    color: var(--saci-primary); /* Primary Orange */
    font-size: 16px;
    /*font-weight: 700;*/
    text-decoration: none !important;
    transition: all .2s ease;
}

.saci-social-link:hover,
.saci-social-link:focus {
    border-color: var(--saci-primary);
    background: var(--saci-primary);
    color: var(--saci-white) !important;
}


/* =========================================================
   SECTION 3 — CONTACT FORM
========================================================= */

.saci-contact-form-section {
    padding: 110px 0 120px;
    background: var(--saci-light); /* Pale Blue */
}

.saci-contact-form-wrapper {
    max-width: 850px;
    margin: 0 auto;
    padding: 55px;
    border-radius: 16px;
    background: var(--saci-white);
    box-shadow: 0 15px 55px rgba(23, 50, 77, 0.1);
    border: 1px solid var(--saci-border);
}

.saci-contact-form-header {
    margin-bottom: 38px;
    text-align: center;
}

.saci-contact-form-header h2 {
    margin: 0 0 12px;
    color: var(--saci-dark); /* Deep Navy */
    font-size: clamp(32px, 4vw, 45px);
    font-weight: 800;
    line-height: 1.15;
}

.saci-contact-form-header p {
    max-width: 650px;
    margin: 0 auto;
    font-size: 16px;
    color: var(--saci-text);
}

.saci-contact-form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
}

.saci-contact-field {
    display: flex;
    flex-direction: column;
}

.saci-contact-field.full-width {
    grid-column: 1 / -1;
}

.saci-contact-field label {
    margin-bottom: 8px;
    color: var(--saci-dark);
    font-size: 14px;
    font-weight: 700;
}

.saci-contact-field input,
.saci-contact-field textarea,
.saci-contact-field select {
    width: 100%;
    min-height: 52px;
    padding: 13px 15px;
    border: 1px solid rgba(70, 138, 201, 0.28);
    border-radius: 8px;
    outline: none;
    background: var(--saci-white);
    color: var(--saci-dark);
    font-family: inherit;
    font-size: 15px;
    transition:
        border-color .2s ease,
        box-shadow .2s ease;
}

.saci-contact-field textarea {
    min-height: 145px;
    resize: vertical;
}

.saci-contact-field input:focus,
.saci-contact-field textarea:focus,
.saci-contact-field select:focus {
    border-color: var(--saci-primary); /* Primary Orange */
    box-shadow: 0 0 0 3px rgba(235, 85, 35, 0.14);
}

.saci-contact-field input::placeholder,
.saci-contact-field textarea::placeholder {
    color: rgba(102, 118, 133, 0.65);
}

.saci-contact-submit {
    grid-column: 1 / -1;
    margin-top: 5px;
}

.saci-contact-submit button {
    width: 100%;
    min-height: 58px;
    padding: 15px 30px;
    border: 2px solid var(--saci-primary);
    border-radius: 50px;
    background: var(--saci-primary);
    color: var(--saci-white);
    cursor: pointer;
    font-family: inherit;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: all .25s ease;
    box-shadow: 0 12px 28px rgba(235, 85, 35, 0.28);
}

.saci-contact-submit button:hover,
.saci-contact-submit button:focus {
    background: var(--saci-accent); /* Warm Gold */
    border-color: var(--saci-accent);
    color: var(--saci-dark);
    transform: translateY(-2px);
    box-shadow: 0 16px 32px rgba(244, 185, 66, 0.4);
}


/* =========================================================
   SECTION 4 — FINAL CTA
========================================================= */

.saci-contact-final {
    position: relative;
    padding: 105px 0 115px;
    background: var(--saci-dark); /* Deep Navy */
    text-align: center;
    overflow: hidden;
}

.saci-contact-final:before {
    content: "";
    position: absolute;
    top: -180px;
    left: -130px;
    width: 400px;
    height: 400px;
    border: 65px solid rgba(70, 138, 201, 0.14); /* Secondary Blue ring */
    border-radius: 50%;
}

.saci-contact-final:after {
    content: "";
    position: absolute;
    bottom: -140px;
    right: -100px;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    background: rgba(244, 185, 66, 0.12); /* Warm Gold bubble */
}

.saci-contact-final-inner {
    position: relative;
    z-index: 2;
    max-width: 780px;
    margin: 0 auto;
}

.saci-contact-final .saci-contact-eyebrow {
    color: var(--saci-accent); /* Warm Gold */
}

.saci-contact-final h2 {
    margin: 0 0 20px;
    color: var(--saci-bg-soft); /* Soft White */
    font-size: clamp(35px, 4.5vw, 54px);
    font-weight: 800;
    line-height: 1.12;
}

.saci-contact-final p {
    max-width: 680px;
    margin: 0 auto 32px;
    color: rgba(250, 250, 247, 0.88);
    font-size: 18px;
    line-height: 1.8;
}

.saci-contact-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 230px;
    padding: 16px 34px;
    border-radius: 50px;
    background: var(--saci-primary); /* Primary Orange */
    border: 2px solid var(--saci-primary);
    color: var(--saci-white) !important;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 1px;
    line-height: 1;
    text-decoration: none !important;
    text-transform: uppercase;
    transition: all .25s ease;
    box-shadow: 0 8px 20px rgba(235, 85, 35, 0.32);
}

.saci-contact-cta:hover,
.saci-contact-cta:focus {
    background: var(--saci-accent); /* Warm Gold */
    border-color: var(--saci-accent);
    color: var(--saci-dark) !important;
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(244, 185, 66, 0.4);
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 980px) {

    .saci-contact-details-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .saci-contact-details-grid .saci-contact-card:last-child {
        grid-column: 1 / -1;
        max-width: calc(50% - 11px);
        width: 100%;
        margin: 0 auto;
    }
}


@media (max-width: 600px) {

    .saci-contact-container {
        width: 88%;
    }

    .saci-contact-hero {
        padding: 75px 0 80px;
    }

    .saci-contact-hero-content h1 {
        font-size: 42px;
        letter-spacing: -1px;
    }

    .saci-contact-hero-content p {
        font-size: 16px;
        line-height: 1.7;
    }

    .saci-contact-details,
    .saci-contact-form-section,
    .saci-contact-final {
        padding: 75px 0;
    }

    .saci-contact-details-header {
        margin-bottom: 38px;
    }

    .saci-contact-details-header h2 {
        font-size: 34px;
    }

    .saci-contact-details-grid {
        grid-template-columns: 1fr;
    }

    .saci-contact-details-grid .saci-contact-card:last-child {
        grid-column: auto;
        max-width: none;
    }

    .saci-contact-form-wrapper {
        padding: 30px 20px;
        border-radius: 12px;
    }

    .saci-contact-form-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .saci-contact-field.full-width,
    .saci-contact-submit {
        grid-column: auto;
    }

    .saci-contact-final h2 {
        font-size: 36px;
    }

    .saci-contact-final p {
        font-size: 16px;
        line-height: 1.7;
    }

    .saci-contact-cta {
        width: 100%;
        max-width: 280px;
    }

}


/* =========================================================
   GALLERY PAGE
   Brand palette:
   Primary   Orange     #EB5523
   Secondary Blue       #468AC9
   Accent    Warm Gold  #F4B942
   Bg        Soft White #FAFAF7
   Light     Pale Blue  #F1F7FC
   Text      Deep Navy  #17324D
   Muted     Slate      #667685
========================================================= */

.saci-gallery-page {
    --saci-primary: #EB5523;
    --saci-secondary: #468AC9;
    --saci-accent: #F4B942;
    --saci-bg-soft: #FAFAF7;
    --saci-bg-light: #F1F7FC;
    --saci-text: #17324D;
    --saci-muted: #667685;
    --saci-white: #FFFFFF;
    --saci-border: rgba(70, 138, 201, 0.18);
    --saci-shadow: 0 15px 40px rgba(23, 50, 77, 0.1);

    font-family: inherit;
    color: var(--saci-muted);
    line-height: 1.7;
    overflow: hidden;
}

.saci-gallery-page *,
.saci-gallery-page *::before,
.saci-gallery-page *::after {
    box-sizing: border-box;
}

.saci-gallery-page h1,
.saci-gallery-page h2,
.saci-gallery-page h3,
.saci-gallery-page p {
    margin-top: 0;
}

.saci-gallery-page a {
    text-decoration: none;
}

.saci-gallery-container {
    width: 90%;
    max-width: 1240px;
    margin: 0 auto;
}

.saci-gallery-eyebrow {
    display: inline-block;
    margin-bottom: 14px;
    color: var(--saci-primary);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 2px;
    line-height: 1.3;
    text-transform: uppercase;
}

/* =========================================================
   HERO
========================================================= */

.saci-gallery-hero {
    position: relative;
    background:
        radial-gradient(circle at 85% 20%, rgba(244, 185, 66, 0.18), transparent 34%),
        radial-gradient(circle at 15% 85%, rgba(70, 138, 201, 0.18), transparent 38%),
        var(--saci-text); /* Deep Navy */
    padding: 115px 0 125px;
    overflow: hidden;
}

.saci-gallery-hero::before {
    content: "";
    position: absolute;
    width: 360px;
    height: 360px;
    top: -190px;
    right: -95px;
    border: 1px solid rgba(244, 185, 66, 0.18);
    border-radius: 50%;
    pointer-events: none;
}

.saci-gallery-hero::after {
    content: "";
    position: absolute;
    width: 240px;
    height: 240px;
    bottom: -130px;
    left: -75px;
    border: 1px solid rgba(70, 138, 201, 0.28);
    border-radius: 50%;
    pointer-events: none;
}

.saci-gallery-hero-inner {
    position: relative;
    z-index: 2;
    max-width: 850px;
    margin: 0 auto;
    text-align: center;
}

.saci-gallery-hero h1 {
    color: var(--saci-bg-soft);
    font-size: clamp(42px, 5vw, 68px);
    font-weight: 800;
    letter-spacing: -1.5px;
    line-height: 1.06;
    margin-bottom: 26px;
}

.saci-gallery-hero p {
    max-width: 720px;
    margin: 0 auto;
    color: rgba(250, 250, 247, 0.88);
    font-size: 19px;
    line-height: 1.8;
}

/* =========================================================
   GALLERY SECTION
========================================================= */

.saci-gallery-section {
    background: var(--saci-bg-soft);
    padding: 100px 0 110px;
}

.saci-gallery-heading {
    max-width: 720px;
    margin: 0 auto 55px;
    text-align: center;
}

.saci-gallery-heading h2 {
    color: var(--saci-text);
    font-size: clamp(32px, 4vw, 48px);
    font-weight: 800;
    line-height: 1.15;
    margin-bottom: 18px;
}

.saci-gallery-heading p {
    margin: 0;
    font-size: 17px;
    color: var(--saci-muted);
}

/* =========================================================
   GALLERY GRID (Masonry — CSS columns)
========================================================= */

.saci-gallery-grid {
    column-count: 4;
    column-gap: 18px;
    margin: 0;
    padding: 0;
}

@media (max-width: 1100px) {
    .saci-gallery-grid { column-count: 3; }
}

@media (max-width: 767px) {
    .saci-gallery-grid { column-count: 2; column-gap: 14px; }
}

@media (max-width: 420px) {
    .saci-gallery-grid { column-count: 1; }
}

/* Tile */

.saci-gallery-tile {
    position: relative;
    display: block;
    width: 100%;
    margin: 0 0 18px;
    padding: 0;
    border: 0;
    border-radius: 16px;
    overflow: hidden;
    background: var(--saci-bg-light);
    cursor: zoom-in;
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    box-shadow: 0 8px 22px rgba(23, 50, 77, 0.06);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    line-height: 0;
    -webkit-tap-highlight-color: transparent;
}

.saci-gallery-tile:hover,
.saci-gallery-tile:focus-visible {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px rgba(23, 50, 77, 0.16);
    outline: none;
}

.saci-gallery-tile:focus-visible {
    box-shadow: 0 0 0 3px var(--saci-accent), 0 18px 40px rgba(23, 50, 77, 0.16);
}

.saci-gallery-tile img {
    display: block;
    width: 100%;
    height: auto;
    opacity: 0;
    transition: opacity 0.5s ease, transform 0.6s ease;
}

.saci-gallery-tile.is-loaded img {
    opacity: 1;
}

.saci-gallery-tile:hover img {
    transform: scale(1.04);
}

/* Loading skeleton */

.saci-gallery-tile::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        120deg,
        rgba(70, 138, 201, 0.08) 0%,
        rgba(70, 138, 201, 0.16) 50%,
        rgba(70, 138, 201, 0.08) 100%
    );
    background-size: 200% 100%;
    animation: saciGalleryShimmer 1.6s ease-in-out infinite;
    opacity: 1;
    transition: opacity 0.4s ease;
    pointer-events: none;
    z-index: 1;
}

.saci-gallery-tile.is-loaded::before {
    opacity: 0;
}

@keyframes saciGalleryShimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Hover overlay + label */

.saci-gallery-tile-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(23, 50, 77, 0.72) 0%,
        rgba(23, 50, 77, 0.15) 45%,
        rgba(23, 50, 77, 0) 70%
    );
    opacity: 0;
    transition: opacity 0.35s ease;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px;
    padding: 18px;
    pointer-events: none;
    z-index: 2;
    line-height: 1.4;
}

.saci-gallery-tile:hover .saci-gallery-tile-overlay,
.saci-gallery-tile:focus-visible .saci-gallery-tile-overlay {
    opacity: 1;
}

.saci-gallery-tile-label {
    color: var(--saci-bg-soft);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-align: left;
}

.saci-gallery-tile-zoom {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--saci-primary);
    color: var(--saci-white);
    box-shadow: 0 6px 16px rgba(235, 85, 35, 0.4);
}

.saci-gallery-tile-zoom svg {
    width: 16px;
    height: 16px;
    display: block;
}

/* =========================================================
   LIGHTBOX
========================================================= */

.saci-gallery-lightbox {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 4vmin;
    background: rgba(15, 25, 40, 0.92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    opacity: 0;
    transition: opacity 0.28s ease;
}

.saci-gallery-lightbox.is-open {
    display: flex;
    opacity: 1;
}

/* Image frame */

.saci-gallery-lightbox-figure {
    position: relative;
    max-width: min(1200px, 92vw);
    max-height: 86vh;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transform: scale(0.96);
    opacity: 0;
    transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.28s ease;
}

.saci-gallery-lightbox.is-open .saci-gallery-lightbox-figure {
    transform: scale(1);
    opacity: 1;
}

.saci-gallery-lightbox-figure img {
    display: block;
    max-width: 100%;
    max-height: 80vh;
    width: auto;
    height: auto;
    border-radius: 14px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
    background: #101a28;
    user-select: none;
    -webkit-user-drag: none;
}

.saci-gallery-lightbox-caption {
    margin-top: 16px;
    color: rgba(250, 250, 247, 0.85);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.4px;
    text-align: center;
    line-height: 1.5;
}

.saci-gallery-lightbox-counter {
    position: absolute;
    top: -44px;
    left: 50%;
    transform: translateX(-50%);
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(250, 250, 247, 0.12);
    color: rgba(250, 250, 247, 0.9);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    white-space: nowrap;
}

/* Nav buttons (prev / next / close) */

.saci-gallery-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 54px;
    height: 54px;
    border-radius: 50%;
    border: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(250, 250, 247, 0.12);
    color: var(--saci-bg-soft);
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    -webkit-tap-highlight-color: transparent;
}

.saci-gallery-nav:hover,
.saci-gallery-nav:focus-visible {
    background: var(--saci-primary);
    color: var(--saci-white);
    outline: none;
    transform: translateY(-50%) scale(1.06);
}

.saci-gallery-nav svg {
    width: 22px;
    height: 22px;
    display: block;
    pointer-events: none;
}

.saci-gallery-nav-prev { left: 3vmin; }
.saci-gallery-nav-next { right: 3vmin; }

.saci-gallery-close {
    position: absolute;
    top: 3vmin;
    right: 3vmin;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(250, 250, 247, 0.12);
    color: var(--saci-bg-soft);
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    -webkit-tap-highlight-color: transparent;
    z-index: 3;
}

.saci-gallery-close:hover,
.saci-gallery-close:focus-visible {
    background: var(--saci-primary);
    color: var(--saci-white);
    outline: none;
    transform: rotate(90deg);
}

.saci-gallery-close svg {
    width: 20px;
    height: 20px;
    display: block;
    pointer-events: none;
}

/* Body lock */

body.saci-gallery-no-scroll {
    overflow: hidden;
}

/* Responsive lightbox */

@media (max-width: 767px) {
    .saci-gallery-lightbox { padding: 2vmin; }

    .saci-gallery-nav {
        width: 46px;
        height: 46px;
    }
    .saci-gallery-nav-prev { left: 1.5vmin; }
    .saci-gallery-nav-next { right: 1.5vmin; }

    .saci-gallery-close {
        top: 2vmin;
        right: 2vmin;
        width: 42px;
        height: 42px;
    }

    .saci-gallery-lightbox-figure img { max-height: 70vh; border-radius: 10px; }
    .saci-gallery-lightbox-caption { font-size: 13px; margin-top: 12px; }
}

/* Reduced motion */

@media (prefers-reduced-motion: reduce) {
    .saci-gallery-page *,
    .saci-gallery-page *::before,
    .saci-gallery-page *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* =========================================================
   SECTION: WHAT WE SUPPORT
   Scoped under .saci-wws-section
   ========================================================= */

.saci-wws-section {
    --saci-primary: #EB5523;
    --saci-secondary: #468AC9;
    --saci-accent: #F4B942;
    --saci-bg-soft: #FAFAF7;
    --saci-bg-light: #F1F7FC;
    --saci-text: #17324D;
    --saci-muted: #667685;
    --saci-white: #FFFFFF;
    --saci-border: rgba(70, 138, 201, 0.18);
    --saci-shadow: 0 15px 40px rgba(23, 50, 77, 0.1);

    background: var(--saci-bg-light);
    padding: 100px 0;
    font-family: inherit;
    color: var(--saci-muted);
    line-height: 1.7;
    overflow: hidden;
}

.saci-wws-section *,
.saci-wws-section *::before,
.saci-wws-section *::after {
    box-sizing: border-box;
}

.saci-wws-container {
    width: 90%;
    max-width: 1180px;
    margin: 0 auto;
}

/* ===== HEADING ===== */

.saci-wws-heading {
    max-width: 720px;
    margin: 0 auto 55px;
    text-align: center;
}

.saci-wws-eyebrow {
    display: inline-block;
    margin-bottom: 14px;
    color: var(--saci-primary);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.saci-wws-heading h2 {
    margin: 0 0 18px;
    color: var(--saci-text);
    font-size: clamp(32px, 4vw, 48px);
    font-weight: 700;
    line-height: 1.15;
}

.saci-wws-heading p {
    margin: 0;
    font-size: 17px;
    color: var(--saci-muted);
}

/* ===== GRID ===== */

.saci-wws-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
}

/* ===== CARD ===== */

.saci-wws-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--saci-white);
    border: 1px solid var(--saci-border);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(23, 50, 77, 0.06);
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}

.saci-wws-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 42px rgba(23, 50, 77, 0.14);
    border-color: rgba(70, 138, 201, 0.35);
}

/* Top accent bar — Primary Orange */

.saci-wws-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: var(--saci-primary);
    z-index: 3;
}

/* ===== IMAGE ===== */

.saci-wws-card-image {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--saci-bg-light);
}

.saci-wws-card-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.saci-wws-card:hover .saci-wws-card-image img {
    transform: scale(1.07);
}

/* Soft gradient overlay on hover */

.saci-wws-card-image::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 55%;
    background: linear-gradient(
        to top,
        rgba(23, 50, 77, 0.35) 0%,
        rgba(23, 50, 77, 0) 100%
    );
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.saci-wws-card:hover .saci-wws-card-image::after {
    opacity: 1;
}

/* ===== BODY ===== */

.saci-wws-card-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 26px 28px 30px;
    flex: 1;
}

.saci-wws-card-body h3 {
    margin: 0;
    color: var(--saci-text);
    font-size: 21px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

.saci-wws-card-body p {
    margin: 0;
    font-size: 15px;
    line-height: 1.65;
    color: var(--saci-muted);
}

/* ===== RESPONSIVE ===== */

@media (max-width: 980px) {
    .saci-wws-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 22px;
    }
}

@media (max-width: 600px) {
    .saci-wws-section {
        padding: 75px 0;
    }

    .saci-wws-heading {
        margin-bottom: 40px;
    }

    .saci-wws-heading h2 {
        font-size: 34px;
    }

    .saci-wws-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .saci-wws-card-body {
        padding: 22px 22px 26px;
    }

    .saci-wws-card-body h3 {
        font-size: 19px;
    }
}


/* Image fills the orange card fully */
    .saci-children-page .saci-child-image-card .saci-child-image {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        display: block;
        border-radius: inherit;
        z-index: 1;
        transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    }

    /* Subtle zoom on hover */
    .saci-children-page .saci-child-image-card:hover .saci-child-image {
        transform: scale(1.05);
    }

    /* Keep the number badge above the image */
    .saci-children-page .saci-child-image-card .saci-child-number {
        z-index: 3;
    }

    /* Hide the old placeholder styles if any placeholder remains in cached HTML */
    .saci-children-page .saci-child-placeholder {
        display: none;
    }


     /* Image background with Deep Navy gradient overlay */
    .saci-get-involved-page .saci-involvement-visual-box {
        background-color: var(--saci-text); /* fallback while image loads */
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        position: relative;
        isolation: isolate;
    }

    /* Dark gradient so the gold label and white title stay readable */
    .saci-get-involved-page .saci-involvement-visual-box::after {
        content: "";
        position: absolute;
        inset: 0;
        background:
            linear-gradient(
                180deg,
                rgba(23, 50, 77, 0.15) 0%,
                rgba(23, 50, 77, 0.55) 55%,
                rgba(23, 50, 77, 0.85) 100%
            );
        z-index: 1;
        pointer-events: none;
        transition: opacity 0.35s ease;
    }

    /* Subtle darkening on hover */
    .saci-get-involved-page .saci-involvement-visual-box:hover::after {
        background:
            linear-gradient(
                180deg,
                rgba(23, 50, 77, 0.25) 0%,
                rgba(23, 50, 77, 0.65) 55%,
                rgba(23, 50, 77, 0.9) 100%
            );
    }

    /* Remove the old decorative gold circles — image is now the visual */
    .saci-get-involved-page .saci-involvement-visual-box::before {
        display: none;
    }

    /* Number badge above the gradient */
    .saci-get-involved-page .saci-involvement-visual-box .saci-involvement-number {
        z-index: 3;
    }

    /* Text content above the gradient */
    .saci-get-involved-page .saci-involvement-visual-box .saci-involvement-visual-content {
        z-index: 3;
    }

    /* Add a soft orange accent bar at the top to keep brand recognition */
    .saci-get-involved-page .saci-involvement-visual-box {
        border-top: 5px solid var(--saci-primary);
    }


     /* The privacy page uses a dark hero with white text. When the
       contact box below inherits any of those rules, its background
       can stay light while the text stays white → invisible.
       These rules force correct contrast no matter what. */

    .sci-privacy-contact .sci-contact-box {
        background: #F1F7FC;                 /* Pale Blue panel */
        border: 1px solid rgba(70, 138, 201, 0.18);
        border-radius: 16px;
        padding: 28px 30px;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 22px;
        margin-top: 24px;
        box-shadow: 0 8px 25px rgba(23, 50, 77, 0.06);
    }

    .sci-privacy-contact .sci-contact-box > div {
        display: flex;
        flex-direction: column;
        gap: 6px;
        min-width: 0;
    }

    /* Small uppercase label above each value */
    .sci-privacy-contact .sci-contact-box span {
        display: block;
        color: #667685;                      /* Slate */
        font-size: 11px;
        font-weight: 800;
        letter-spacing: 1.5px;
        text-transform: uppercase;
        line-height: 1.3;
    }

    /* The actual value underneath — dark and readable */
    .sci-privacy-contact .sci-contact-box strong {
        display: block;
        color: #17324D;                      /* Deep Navy */
        font-size: 16px;
        font-weight: 700;
        line-height: 1.5;
        word-break: break-word;              /* long emails wrap cleanly */
    }

    /* Email line — turn it into a proper clickable link */
    .sci-privacy-contact .sci-contact-box a {
        color: #EB5523;                      /* Primary Orange */
        text-decoration: none;
        font-weight: 700;
        word-break: break-word;
        transition: color 0.2s ease;
    }

    .sci-privacy-contact .sci-contact-box a:hover,
    .sci-privacy-contact .sci-contact-box a:focus {
        color: #D44A1C;
        text-decoration: underline;
    }

    /* Stack vertically on smaller screens */
    @media (max-width: 767px) {
        .sci-privacy-contact .sci-contact-box {
            grid-template-columns: 1fr;
            padding: 22px 20px;
            gap: 18px;
        }
    }


        /* ===== Grid layout ===== */
    .sci-terms-contact {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 18px;
        margin: 32px 0 40px;
    }

    /* ===== Individual card ===== */
    .sci-terms-contact .sci-contact-box {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding: 26px 24px 28px;
        background: #F1F7FC;                          /* Pale Blue */
        border: 1px solid rgba(70, 138, 201, 0.18);   /* soft blue */
        border-radius: 16px;
        border-top: 5px solid #EB5523;                 /* Primary Orange */
        box-shadow: 0 8px 22px rgba(23, 50, 77, 0.06);
        transition:
            transform 0.3s ease,
            box-shadow 0.3s ease,
            border-color 0.3s ease;
        min-width: 0;
    }

    .sci-terms-contact .sci-contact-box:hover {
        transform: translateY(-4px);
        box-shadow: 0 16px 36px rgba(23, 50, 77, 0.12);
        border-color: rgba(70, 138, 201, 0.35);
        border-top-color: #EB5523;
    }

    /* ===== Small uppercase label ===== */
    .sci-terms-contact .sci-contact-label {
        display: inline-block;
        color: #EB5523;                                /* Primary Orange */
        font-size: 11px;
        font-weight: 800;
        letter-spacing: 1.8px;
        line-height: 1.3;
        text-transform: uppercase;
    }

    /* ===== Value (h3) ===== */
    .sci-terms-contact .sci-contact-value {
        margin: 0;
        color: #17324D;                                /* Deep Navy */
        font-size: 16px;
        font-weight: 700;
        line-height: 1.5;
        letter-spacing: -0.01em;
        word-break: break-word;
        overflow-wrap: anywhere;
    }

    /* ===== Email link inside the card ===== */
    .sci-terms-contact .sci-contact-value a {
        color: #EB5523;                                /* Primary Orange */
        text-decoration: none;
        font-weight: 700;
        word-break: break-word;
        transition: color 0.2s ease;
    }

    .sci-terms-contact .sci-contact-value a:hover,
    .sci-terms-contact .sci-contact-value a:focus {
        color: #D44A1C;
        text-decoration: underline;
    }

    /* ===== Responsive ===== */
    @media (max-width: 980px) {
        .sci-terms-contact {
            grid-template-columns: repeat(2, 1fr);
        }
        /* Third card spans the remaining width for balance */
        .sci-terms-contact .sci-contact-box:nth-child(3) {
            grid-column: 1 / -1;
        }
    }

    @media (max-width: 600px) {
        .sci-terms-contact {
            grid-template-columns: 1fr;
            gap: 14px;
            margin: 26px 0 32px;
        }
        .sci-terms-contact .sci-contact-box {
            padding: 22px 20px 24px;
        }
        .sci-terms-contact .sci-contact-value {
            font-size: 15px;
        }
    }


    /* =========================================================
   SCHOOL A CHILD INITIATIVE
   UNDER CONSTRUCTION PAGE
========================================================= */

.sci-under-construction {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: #FAFAF7;
    padding: 60px 30px;
}

.sci-under-container {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1050px;
    margin: 0 auto;
}


/* =========================
   BACKGROUND SHAPES
========================= */

.sci-under-bg-circle {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.sci-under-circle-one {
    width: 520px;
    height: 520px;
    top: -250px;
    right: -170px;
    background: #F1F7FC;
}

.sci-under-circle-two {
    width: 380px;
    height: 380px;
    bottom: -230px;
    left: -170px;
    background: rgba(235, 85, 35, 0.06);
}


/* =========================
   BRAND
========================= */

.sci-under-brand {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 75px;
}

.sci-under-logo-mark {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #EB5523;
    border-radius: 10px;
    transform: rotate(-3deg);
}

.sci-under-logo-mark span {
    color: #FFFFFF;
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -0.5px;
    transform: rotate(3deg);
}

.sci-under-brand-name {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.sci-under-brand-name strong {
    color: #17324D;
    font-size: 19px;
    font-weight: 700;
}

.sci-under-brand-name span {
    color: #468AC9;
    font-size: 14px;
    font-weight: 600;
    margin-top: 4px;
}


/* =========================
   MAIN CONTENT
========================= */

.sci-under-content {
    max-width: 760px;
}

.sci-under-icon {
    width: 58px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    background: #F4B942;
    border-radius: 50%;
    box-shadow: 0 10px 25px rgba(244, 185, 66, 0.18);
}

.sci-under-icon span {
    font-size: 25px;
    line-height: 1;
}


.sci-under-content .sci-eyebrow {
    display: block;
    margin-bottom: 18px;
    color: #EB5523;
}


.sci-under-content h1 {
    max-width: 800px;
    margin: 0 0 25px;
    color: #17324D;
    font-size: clamp(44px, 6vw, 76px);
    line-height: 1.02;
    letter-spacing: -2px;
    font-weight: 700;
}

.sci-under-content h1 span {
    color: #EB5523;
}


.sci-under-intro {
    max-width: 700px;
    margin: 0 0 15px;
    color: #334E68;
    font-size: 20px;
    line-height: 1.65;
    font-weight: 500;
}


.sci-under-text {
    max-width: 680px;
    margin: 0 0 35px;
    color: #667685;
    font-size: 16px;
    line-height: 1.8;
}


/* =========================
   PROGRESS
========================= */

.sci-under-progress {
    max-width: 620px;
    margin-bottom: 35px;
}

.sci-under-progress-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-bottom: 10px;
}

.sci-under-progress-top span {
    color: #667685;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.4px;
}

.sci-under-progress-top strong {
    color: #468AC9;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
}

.sci-under-progress-bar {
    width: 100%;
    height: 7px;
    overflow: hidden;
    background: #DCE6EF;
    border-radius: 20px;
}

.sci-under-progress-bar span {
    display: block;
    width: 72%;
    height: 100%;
    background: #EB5523;
    border-radius: 20px;
}


/* =========================
   BUTTONS
========================= */

.sci-under-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.sci-under-buttons .sci-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-decoration: none;
}

.sci-under-buttons .sci-btn-arrow {
    transition: transform 0.3s ease;
}

.sci-under-buttons .sci-btn:hover .sci-btn-arrow {
    transform: translateX(4px);
}


/* =========================
   BOTTOM
========================= */

.sci-under-bottom {
    margin-top: 85px;
}

.sci-under-bottom-line {
    width: 100%;
    height: 1px;
    margin-bottom: 22px;
    background: #DCE6EF;
}

.sci-under-bottom p {
    display: inline;
    margin: 0;
    color: #667685;
    font-size: 14px;
    line-height: 1.7;
}

.sci-under-bottom p strong {
    color: #17324D;
}

.sci-under-location {
    float: right;
    color: #468AC9;
    font-size: 13px;
    font-weight: 600;
}


/* =========================
   TABLET
========================= */

@media (max-width: 991px) {

    .sci-under-construction {
        padding: 50px 25px;
    }

    .sci-under-brand {
        margin-bottom: 60px;
    }

    .sci-under-content h1 {
        font-size: clamp(42px, 7vw, 64px);
    }

    .sci-under-bottom {
        margin-top: 65px;
    }

}


/* =========================
   MOBILE
========================= */

@media (max-width: 767px) {

    .sci-under-construction {
        min-height: 100vh;
        padding: 35px 20px;
        align-items: flex-start;
    }

    .sci-under-container {
        padding-top: 10px;
    }

    .sci-under-brand {
        margin-bottom: 55px;
    }

    .sci-under-logo-mark {
        width: 46px;
        height: 46px;
    }

    .sci-under-brand-name strong {
        font-size: 17px;
    }

    .sci-under-brand-name span {
        font-size: 13px;
    }

    .sci-under-icon {
        width: 52px;
        height: 52px;
        margin-bottom: 20px;
    }

    .sci-under-icon span {
        font-size: 22px;
    }

    .sci-under-content h1 {
        font-size: 43px;
        line-height: 1.04;
        letter-spacing: -1px;
        margin-bottom: 20px;
    }

    .sci-under-intro {
        font-size: 17px;
        line-height: 1.6;
    }

    .sci-under-text {
        font-size: 15px;
        line-height: 1.75;
        margin-bottom: 28px;
    }

    .sci-under-progress {
        margin-bottom: 30px;
    }

    .sci-under-progress-top span,
    .sci-under-progress-top strong {
        font-size: 10px;
    }

    .sci-under-buttons {
        flex-direction: column;
        width: 100%;
    }

    .sci-under-buttons .sci-btn {
        width: 100%;
    }

    .sci-under-bottom {
        margin-top: 55px;
    }

    .sci-under-bottom p {
        display: block;
        font-size: 13px;
    }

    .sci-under-location {
        float: none;
        display: block;
        margin-top: 10px;
    }

    .sci-under-circle-one {
        width: 300px;
        height: 300px;
        top: -130px;
        right: -150px;
    }

    .sci-under-circle-two {
        width: 250px;
        height: 250px;
        bottom: -150px;
        left: -130px;
    }

}

/*contact page phone card*/

/* Phone contact links */
.saci-contact-phone {
    margin: 8px 0;
}

.saci-contact-phone a {
    color: #3479B7;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.2s ease;
    overflow-wrap: anywhere;
}

.saci-contact-phone a:hover {
    color: #EB5523;
}

.saci-contact-note {
    margin-top: 12px;
    font-size: 0.9rem;
    color: #667685;
}

/* contact page form messages*/

.saci-form-notice {
    padding: 15px 18px;
    margin: 0 0 24px;
    border-radius: 8px;
    font-size: 15px;
    line-height: 1.6;
}

.saci-form-success {
    color: #205C35;
    background: #EAF7EE;
    border: 1px solid #B7E2C3;
}

.saci-form-error {
    color: #922B21;
    background: #FDEDEC;
    border: 1px solid #F5C6CB;
}

/* Hide the spam-trap field without removing it from the form */
.saci-honeypot {
    position: absolute !important;
    left: -10000px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}

.faIcon{
    /*color: #EB5523 !important;*/
    color:#17324D !important;
}

/* donation section for paypal*/
/* =====================================================
   SACI PAYPAL DONATION SECTION
===================================================== */

.saci-donate-page .saci-paypal-section {
    padding: 60px 20px;
    background: #f7f9fc;
}

.saci-donate-page .saci-paypal-card {
    max-width: 900px;
    margin: 0 auto;
    padding: 45px 35px;
    background: #ffffff;
    border: 1px solid #e1e7ef;
    border-radius: 16px;
    box-shadow: 0 10px 35px rgba(28, 10, 14, 0.06);
    text-align: center;
}

.saci-donate-page .saci-paypal-content {
    max-width: 680px;
    margin: 0 auto;
}

.saci-donate-page .saci-paypal-card h2 {
    margin: 12px 0 16px;
    color: #17324D;
    font-size: clamp(26px, 4vw, 36px);
    line-height: 1.25;
}

.saci-donate-page .saci-paypal-card p {
    margin: 0 auto 18px;
    color: #5f6268;
    font-size: 16px;
    line-height: 1.8;
}

.saci-donate-page .saci-paypal-card .saci-paypal-note {
    font-size: 14px;
}

.saci-donate-page .saci-paypal-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 54px;
    margin-top: 12px;
    padding: 15px 28px;
    border: 2px solid #0070ba;
    border-radius: 8px;
    background: #0070ba;
    color: #ffffff;
    font-size: 16px;
    font-size:22px;
    font-weight: 700;
    line-height: 1.3;
    text-decoration: none;
    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;
}

.saci-donate-page .saci-paypal-button i {
    font-size: 22px;
}

.saci-donate-page .saci-paypal-button:hover {
    background: #005ea6;
    border-color: #005ea6;
    color: #ffffff;
    box-shadow: 0 6px 18px rgba(0, 94, 166, 0.2);
    transform: translateY(-2px);
}

.saci-donate-page .saci-paypal-button:focus-visible {
    outline: 3px solid rgba(0, 112, 186, 0.3);
    outline-offset: 4px;
}

.saci-donate-page .saci-paypal-currency {
    display: block;
    margin-top: 14px;
    color: #777777;
    font-size: 13px;
}

@media (max-width: 600px) {
    .saci-donate-page .saci-paypal-section {
        padding: 40px 16px;
    }

    .saci-donate-page .saci-paypal-card {
        padding: 32px 20px;
        border-radius: 12px;
    }

    .saci-donate-page .saci-paypal-card p {
        font-size: 15px;
    }

    .saci-donate-page .saci-paypal-button {
        width: 100%;
        box-sizing: border-box;
        padding: 14px 16px;
    }
}