/* =====================================================================
   HOMEPAGE REBUILD — SUPPLEMENTARY STYLES
   Append this file's contents to main.css, or link it after main.css/
   green.css in stylesheets.php. Uses existing brand green (#00693e from
   green.css) and existing Bootstrap 3 grid — no new framework introduced.
   ===================================================================== */

/* ---------- Global: respect reduced motion + JS-failure fallback ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}
/* If animation JS fails to load, .blind elements must not stay invisible */
.no-js .blind,
.blind.js-fallback-visible {
    opacity: 1 !important;
}

/* ---------- SECTION 1: HERO ---------- */
.hero-section .main-header {
    padding: 30px 20px 40px;
    text-align: center;
}

.hero-section h1 {
    font-size: clamp(24px, 4.5vw, 46px);
    line-height: 1.3;
    margin: 10px 0 20px;
    font-weight: 400;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    color: #363636;
}
.hero-section h1 span {
    color: #00693e;
}

.hero-section > .container > .row > .col-md-12 > .main-header > p {
    font-size: clamp(15px, 2vw, 18px);
    line-height: 1.6;
    max-width: 640px;
    margin: 0 auto 25px;
    color: #5d5d5d;
}

.hero-ctas {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
    margin: 20px auto;
    max-width: 500px;
}
.hero-ctas .buton-large {
    flex: 1 1 auto;
    min-width: 220px;
    text-align: center;
    padding: 16px 20px !important;
    font-size: 15px !important;
}

.hero-trust-strip {
    list-style: none;
    margin: 20px auto 10px;
    padding: 0 15px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0;
}
.hero-trust-strip li {
    display: inline-block;
    font-size: 13px;
    color: #6e6e6e;
    padding: 4px 14px;
    border-right: 1px solid #d8d8d8;
    white-space: nowrap;
}
.hero-trust-strip li:last-child { border-right: 0; }

.banner-mobile-static { width: 100%; overflow: hidden; }
.hero-static-img { width: 100%; height: auto; }

@media (max-width: 767px) {
    .hero-section .main-header { padding: 20px 15px 30px; }
    .hero-section h1 { font-size: clamp(22px, 6.5vw, 30px); line-height: 1.25; margin-bottom: 14px; }
    .hero-section > .container > .row > .col-md-12 > .main-header > p { font-size: 15px; margin-bottom: 20px; }

    .hero-ctas { flex-direction: column; max-width: 100%; gap: 12px; }
    .hero-ctas .buton-large { width: 100%; }

    .hero-trust-strip {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        justify-content: flex-start;
        padding-bottom: 6px;
    }
    .hero-trust-strip li { flex: 0 0 auto; }
}

/* ---------- SECTION 2: CREDIBILITY BAND ---------- */
.credibility-band { padding: 40px 0 30px; }

.credibility-label {
    text-align: center;
    font-size: 13px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #9a9a9a;
    margin-bottom: 15px;
}

.credibility-logos {
    text-align: center;
    margin: 0 0 25px;
    padding: 0;
}
.credibility-logos li {
    display: inline-block;
    margin: 0 20px 15px;
    vertical-align: middle;
    filter: grayscale(15%);
    opacity: 0.9;
    transition: all 0.3s ease-out;
}
.credibility-logos li:hover {
    filter: grayscale(0%);
    opacity: 1;
}
.credibility-logos img { max-height: 70px; width: auto; margin: 0 auto; }

.credibility-institutions {
    text-align: center;
    margin: 0 0 10px;
    padding: 0;
}
.credibility-institutions li {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: #676767;
    border: 1px solid #e3e3e3;
    border-radius: 4px;
    padding: 6px 14px;
    margin: 0 6px 10px;
}

.credibility-stats { border-top: 1px solid #f0f0f0; padding-top: 30px; margin-top: 10px; text-align: center; }
.credibility-stats .timer-wrap { margin-bottom: 20px; }
.credibility-stats h3 { font-size: 14px; color: #9a9a9a; margin: 0 0 8px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
.credibility-stats .timer { font-size: 34px; font-weight: 900; color: #00693e; }
.credibility-stats .timer-icon { background: #f4f4f4; color: #00693e; }
.credibility-subnote { font-size: 12px; color: #9a9a9a; margin: 2px 0 0; }

@media (max-width: 767px) {
    .credibility-logos li { margin: 0 10px 12px; }
    .credibility-logos img { max-height: 50px; }
    .credibility-stats .timer { font-size: 26px; }
}

/* ---------- SECTION 3: SUBJECTS — swipeable on mobile ---------- */
.subjects-scroll-row {
    display: flex;
    flex-wrap: wrap;
}
.subject-card .services-1 { height: 100%; }
.subject-card .buton-mini { margin: 4px 4px 0 0; }

@media (max-width: 767px) {
    .subjects-scroll-row {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        margin: 0 -15px;
        padding: 0 15px 10px;
    }
    .subject-card {
        flex: 0 0 82%;
        scroll-snap-align: start;
        width: 82%;
        padding-right: 10px;
    }
}

/* ---------- SECTION 4: OUTCOMES (placeholder styling) ---------- */
.outcomes-section { padding: 50px 0; }
.outcomes-takeaway {
    font-size: 20px;
    line-height: 1.6;
    color: #393939;
    max-width: 780px;
    margin: 0 auto 20px;
}
.outcomes-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 25px;
}
.outcome-placeholder-card {
    border: 2px dashed #d8d8d8;
    border-radius: 6px;
    padding: 30px 20px;
    text-align: center;
    background: #fbfbfb;
}
.outcome-figure { color: #9a9a9a; font-style: italic; font-size: 14px; margin: 0; }

@media (max-width: 767px) {
    .outcomes-grid { grid-template-columns: 1fr; }
}

/* ---------- SECTION 5: TESTIMONIALS (placeholder styling) ---------- */
.testimonials-section { padding: 50px 0; }
.testimonial-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 25px;
}
.testimonial-card {
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 6px;
    padding: 25px 20px;
}
.testimonial-card.placeholder {
    border: 2px dashed #d8d8d8;
    background: #fbfbfb;
}
.testimonial-quote { color: #9a9a9a; font-style: italic; font-size: 14px; margin-bottom: 10px; }
.testimonial-meta { color: #b3b3b3; font-size: 12px; margin: 0; }

@media (max-width: 767px) {
    .testimonial-grid { grid-template-columns: 1fr; }
}

/* ---------- SECTION 10: LOCATION & SCHEDULING CLARITY ---------- */
.location-clarity-section { padding: 45px 0; }
.location-col {
    color: #fff;
    padding: 20px 25px;
    text-align: center;
}
.location-col h3 { color: #fff; margin-top: 0; font-size: 24px; }
.location-col p { color: #e8f3ef; font-size: 15px; margin-bottom: 18px; }
.location-col-international { border-right: 1px solid rgba(255,255,255,0.25); }
.location-address-preview {
    font-size: 13px;
    color: #cfe8de;
    margin-top: 14px;
}
.location-address-preview i { margin-right: 6px; }

@media (max-width: 767px) {
    .location-col-international { border-right: 0; border-bottom: 1px solid rgba(255,255,255,0.25); padding-bottom: 25px; margin-bottom: 15px; }
}

/* ---------- SECTION 9: CLIENT SLIDER — static grid fallback on mobile ---------- */
@media (max-width: 767px) {
    .clientslider-grid-fallback .slides {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        transform: none !important;
    }
    .clientslider-grid-fallback .slides li {
        width: 45%;
        margin: 10px 2.5%;
        float: none;
        -webkit-filter: none;
    }
}

/* ---------- Secondary/dusty button used for WhatsApp + Home Tuition CTAs ---------- */
/* .b_dusty already exists in main.css (#676767) — reused intentionally, no redefinition needed. */