/* ================================================================
   EDULYNK WEBSITE
   ÉTABLISSEMENTS
   ================================================================ */


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

.school-hero {
    position: relative;
    overflow: hidden;
    padding: 105px 0 115px;
    background: linear-gradient( 180deg, #ffffff 0%, #fbfcff 70%, #f7f9ff 100% );
}

.school-hero-row {
    position: relative;
    z-index: 3;
}

.school-hero-glow {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.school-glow-one {
    top: -270px;
    right: -180px;
    width: 730px;
    height: 730px;
    background: radial-gradient( circle, rgba(55, 103, 240, 0.13), rgba(55, 103, 240, 0) 68% );
}

.school-glow-two {
    bottom: -350px;
    left: -250px;
    width: 700px;
    height: 700px;
    background: radial-gradient( circle, rgba(19, 184, 166, 0.08), rgba(19, 184, 166, 0) 70% );
}


/* ----------------------------------------------------------------
   HERO TEXT
   ---------------------------------------------------------------- */

.school-hero-content {
    max-width: 720px;
    padding-right: 10px;
}

.school-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 25px;
    padding: 7px 14px 7px 8px;
    color: #3559c8;
    background: #f1f4ff;
    border: 1px solid #e0e7ff;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 650;
}

.school-eyebrow-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    color: #ffffff;
    background: var(--edulynk-primary);
    border-radius: 50%;
    font-size: 12px;
}

.school-hero h1 {
    margin: 0 0 28px;
    color: var(--edulynk-dark);
    font-size: clamp(50px, 4.45vw, 70px);
    font-weight: 780;
    line-height: 1.02;
    letter-spacing: -3.6px;
}

    .school-hero h1 span {
        color: var(--edulynk-primary);
    }

.school-hero-description {
    max-width: 640px;
    margin-bottom: 32px;
    color: var(--edulynk-muted);
    font-size: 18px;
    line-height: 1.75;
}

.school-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 28px;
}

.school-primary-button,
.school-secondary-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 53px;
    padding: 0 22px;
    border-radius: 13px;
    font-size: 14px;
    font-weight: 650;
    transition: all 0.2s ease;
}

.school-primary-button {
    color: #ffffff;
    background: linear-gradient( 135deg, var(--edulynk-primary), #4b78f4 );
    box-shadow: 0 12px 26px rgba(55, 103, 240, 0.24);
}

    .school-primary-button:hover {
        color: #ffffff;
        transform: translateY(-2px);
        box-shadow: 0 16px 32px rgba(55, 103, 240, 0.30);
    }

.school-secondary-button {
    color: var(--edulynk-dark);
    background: #ffffff;
    border: 1px solid var(--edulynk-border);
}

    .school-secondary-button:hover {
        color: var(--edulynk-primary);
        background: #fbfcff;
        border-color: #cfd9f6;
    }

.school-hero-points {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
}

    .school-hero-points div {
        display: flex;
        align-items: center;
        gap: 7px;
        color: var(--edulynk-muted);
        font-size: 12px;
    }

    .school-hero-points i {
        color: var(--edulynk-secondary);
    }


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

.school-hero-visual {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-height: 570px;
    padding-left: 30px;
}

.school-hero-image-wrapper {
    position: relative;
    width: 100%;
    max-width: 690px;
    overflow: hidden;
    background: #eef3ff;
    border: 1px solid rgba(218, 226, 242, 0.95);
    border-radius: 30px;
    box-shadow: 0 34px 80px rgba(27, 43, 87, 0.16);
    isolation: isolate;
}

    .school-hero-image-wrapper::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 2;
        pointer-events: none;
        border-radius: inherit;
        box-shadow: inset 0 0 0 1px rgba(255,255,255,0.30);
    }

.school-hero-image {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    object-position: center center;
    transition: transform 0.7s ease;
}

.school-hero-image-wrapper:hover .school-hero-image {
    transform: scale(1.015);
}


/* ================================================================
   INTRO
   ================================================================ */

.school-intro {
    padding: 120px 0;
    background: #ffffff;
}

.school-intro-heading {
    max-width: 900px;
    margin-bottom: 55px;
}

.school-benefits-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.school-benefit-card {
    padding: 32px;
    background: #ffffff;
    border: 1px solid var(--edulynk-border);
    border-radius: 21px;
    box-shadow: 0 8px 24px rgba(16, 24, 40, 0.045);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

    .school-benefit-card:hover {
        transform: translateY(-4px);
        border-color: #dce3f5;
        box-shadow: 0 18px 40px rgba(16, 24, 40, 0.08);
    }

.school-benefit-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    margin-bottom: 28px;
    color: var(--edulynk-primary);
    background: var(--edulynk-primary-light);
    border-radius: 14px;
    font-size: 20px;
}

    .school-benefit-icon.green {
        color: #079b89;
        background: #eaf9f6;
    }

    .school-benefit-icon.purple {
        color: #925bc8;
        background: #f5eefc;
    }

.school-benefit-card h3 {
    margin-bottom: 13px;
    color: var(--edulynk-dark);
    font-size: 21px;
    font-weight: 700;
}

.school-benefit-card p {
    margin: 0;
    color: var(--edulynk-muted);
    font-size: 14px;
    line-height: 1.75;
}


/* ================================================================
   MANAGEMENT
   ================================================================ */

.school-management {
    padding: 125px 0;
    background: #f8fafc;
}

.management-row {
    row-gap: 60px;
}

.management-dashboard {
    padding-right: 45px;
}

.management-window {
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #e3e8f0;
    border-radius: 22px;
    box-shadow: 0 30px 65px rgba(27, 42, 81, 0.12);
}

.management-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 58px;
    padding: 0 17px;
    border-bottom: 1px solid #edf0f4;
}

.management-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--edulynk-dark);
    font-size: 11px;
    font-weight: 700;
}

    .management-brand span {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 27px;
        height: 27px;
        color: #ffffff;
        background: var(--edulynk-primary);
        border-radius: 8px;
    }

.management-user {
    display: flex;
    align-items: center;
    gap: 10px;
}

    .management-user i {
        color: #8992a2;
        font-size: 11px;
    }

    .management-user div {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 27px;
        height: 27px;
        color: #ffffff;
        background: #748bcf;
        border-radius: 50%;
        font-size: 7px;
        font-weight: 700;
    }

.management-body {
    display: flex;
    min-height: 390px;
    background: #f8fafc;
}

.management-sidebar {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: 55px;
    padding-top: 18px;
    background: #ffffff;
    border-right: 1px solid #edf0f4;
}

    .management-sidebar span {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 31px;
        height: 31px;
        color: #a0a8b5;
        border-radius: 8px;
        font-size: 11px;
    }

        .management-sidebar span.active {
            color: var(--edulynk-primary);
            background: var(--edulynk-primary-light);
        }

.management-content {
    flex: 1;
    padding: 22px;
}

.management-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 17px;
}

    .management-heading small {
        display: block;
        color: #98a2b3;
        font-size: 7px;
    }

    .management-heading h4 {
        margin: 0;
        color: var(--edulynk-dark);
        font-size: 16px;
        font-weight: 700;
    }

.school-year {
    padding: 7px 10px;
    color: #667085;
    background: #ffffff;
    border: 1px solid #e8ebf0;
    border-radius: 8px;
    font-size: 7px;
}

.management-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 9px;
    margin-bottom: 11px;
}

.management-stat {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px;
    background: #ffffff;
    border: 1px solid #edf0f4;
    border-radius: 10px;
}

.management-stat-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    font-size: 12px;
}

    .management-stat-icon.blue {
        color: var(--edulynk-primary);
        background: var(--edulynk-primary-light);
    }

    .management-stat-icon.green {
        color: #079b89;
        background: #eaf9f6;
    }

    .management-stat-icon.orange {
        color: #e98a2b;
        background: #fff3e8;
    }

.management-stat small,
.management-stat strong {
    display: block;
}

.management-stat small {
    color: #98a2b3;
    font-size: 6px;
}

.management-stat strong {
    color: var(--edulynk-dark);
    font-size: 13px;
}

.management-bottom-grid {
    display: grid;
    grid-template-columns: 1.25fr 1fr;
    gap: 10px;
}

.management-chart,
.management-activity {
    padding: 13px;
    background: #ffffff;
    border: 1px solid #edf0f4;
    border-radius: 11px;
}

.mini-panel-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 11px;
}

    .mini-panel-title span {
        color: #344054;
        font-size: 8px;
        font-weight: 650;
    }

    .mini-panel-title small {
        color: #98a2b3;
        font-size: 6px;
    }

.mini-bars {
    display: flex;
    align-items: flex-end;
    justify-content: space-around;
    height: 120px;
    padding: 0 13px 6px;
    border-bottom: 1px solid #edf0f4;
}

    .mini-bars i {
        display: block;
        width: 18px;
        background: linear-gradient( 180deg, #7291fa, #3d67e8 );
        border-radius: 4px 4px 2px 2px;
    }

.activity-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 0;
    border-bottom: 1px solid #f1f3f6;
}

    .activity-row:last-child {
        border-bottom: 0;
    }

.activity-dot {
    width: 7px;
    height: 7px;
    margin-top: 3px;
    border-radius: 50%;
}

    .activity-dot.blue {
        background: #4c72e8;
    }

    .activity-dot.green {
        background: #18aa99;
    }

    .activity-dot.orange {
        background: #efa04f;
    }

.activity-row strong,
.activity-row small {
    display: block;
}

.activity-row strong {
    color: #344054;
    font-size: 7px;
}

.activity-row small {
    color: #98a2b3;
    font-size: 6px;
}


/* ----------------------------------------------------------------
   MANAGEMENT TEXT
   ---------------------------------------------------------------- */

.management-content-text {
    max-width: 600px;
    margin-left: auto;
    padding-left: 35px;
}

    .management-content-text h2 {
        margin-bottom: 23px;
        color: var(--edulynk-dark);
        font-size: clamp(38px, 4vw, 56px);
        font-weight: 750;
        line-height: 1.08;
        letter-spacing: -2.2px;
    }

    .management-content-text > p {
        margin-bottom: 31px;
        color: var(--edulynk-muted);
        font-size: 17px;
        line-height: 1.72;
    }

.school-feature-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.school-feature-item {
    display: flex;
    gap: 13px;
}

    .school-feature-item > span {
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        width: 29px;
        height: 29px;
        color: #ffffff;
        background: var(--edulynk-primary);
        border-radius: 50%;
        font-size: 13px;
    }

    .school-feature-item strong {
        display: block;
        margin-bottom: 4px;
        color: var(--edulynk-dark);
        font-size: 14px;
    }

    .school-feature-item p {
        margin: 0;
        color: var(--edulynk-muted);
        font-size: 13px;
        line-height: 1.65;
    }


/* ================================================================
   COMMUNICATION
   ================================================================ */

.school-communication {
    padding: 125px 0;
    background: #ffffff;
}

.communication-row {
    row-gap: 60px;
}

.communication-content {
    max-width: 590px;
    padding-right: 35px;
}

    .communication-content h2 {
        margin-bottom: 24px;
        color: var(--edulynk-dark);
        font-size: clamp(39px, 4.1vw, 57px);
        font-weight: 750;
        line-height: 1.08;
        letter-spacing: -2.2px;
    }

    .communication-content > p {
        margin-bottom: 31px;
        color: var(--edulynk-muted);
        font-size: 17px;
        line-height: 1.7;
    }

.communication-points {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 13px;
}

    .communication-points div {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 14px;
        color: #344054;
        background: #f8fafc;
        border: 1px solid #edf0f4;
        border-radius: 12px;
        font-size: 12px;
        font-weight: 600;
    }

    .communication-points i {
        color: var(--edulynk-primary);
    }


/* ----------------------------------------------------------------
   COMMUNICATION VISUAL
   ---------------------------------------------------------------- */

.communication-visual {
    position: relative;
    max-width: 570px;
    margin-left: auto;
    padding: 30px 0 55px;
}

.message-panel {
    overflow: hidden;
    padding: 22px;
    background: #ffffff;
    border: 1px solid #e5e9f0;
    border-radius: 22px;
    box-shadow: 0 27px 60px rgba(26, 40, 77, 0.12);
}

.message-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 18px;
    border-bottom: 1px solid #edf0f4;
}

    .message-panel-header small,
    .message-panel-header strong {
        display: block;
    }

    .message-panel-header small {
        color: #98a2b3;
        font-size: 9px;
    }

    .message-panel-header strong {
        color: var(--edulynk-dark);
        font-size: 14px;
    }

    .message-panel-header > span {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        color: var(--edulynk-primary);
        background: var(--edulynk-primary-light);
        border-radius: 10px;
    }

.message-row {
    display: flex;
    gap: 12px;
    padding: 16px 12px;
    margin-top: 9px;
    border-radius: 12px;
}

    .message-row.active {
        background: #f7f9ff;
    }

.message-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    font-size: 10px;
    font-weight: 700;
}

    .message-avatar.blue {
        color: #365ac9;
        background: #e8edff;
    }

    .message-avatar.green {
        color: #078d80;
        background: #e7f8f5;
    }

    .message-avatar.purple {
        color: #925cc4;
        background: #f4ecfb;
    }

.message-content {
    flex: 1;
}

    .message-content > div {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .message-content strong {
        color: #344054;
        font-size: 12px;
    }

    .message-content small {
        color: #98a2b3;
        font-size: 8px;
    }

    .message-content p {
        margin: 4px 0 0;
        color: #667085;
        font-size: 10px;
    }

.notification-card {
    position: absolute;
    right: -20px;
    bottom: 0;
    display: flex;
    align-items: center;
    gap: 11px;
    width: 270px;
    padding: 14px;
    background: rgba(255,255,255,0.98);
    border: 1px solid #e8ecf3;
    border-radius: 15px;
    box-shadow: 0 20px 45px rgba(24, 38, 72, 0.17);
}

    .notification-card > div {
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        width: 40px;
        height: 40px;
        color: #079b89;
        background: #eaf9f6;
        border-radius: 11px;
    }

    .notification-card small,
    .notification-card strong,
    .notification-card p {
        display: block;
    }

    .notification-card small {
        color: #98a2b3;
        font-size: 7px;
    }

    .notification-card strong {
        color: #344054;
        font-size: 10px;
    }

    .notification-card p {
        margin: 2px 0 0;
        color: #667085;
        font-size: 8px;
    }


/* ================================================================
   ROLES
   ================================================================ */

.school-roles {
    padding: 120px 0;
    background: #f8fafc;
}

.roles-heading {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    align-items: end;
    gap: 90px;
    margin-bottom: 58px;
}

    .roles-heading .section-title {
        margin-bottom: 0;
    }

.roles-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
}

.role-card {
    min-height: 240px;
    padding: 25px;
    background: #ffffff;
    border: 1px solid #e8ebf0;
    border-radius: 18px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

    .role-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 15px 35px rgba(16, 24, 40, 0.07);
    }

.role-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    margin-bottom: 28px;
    color: var(--edulynk-primary);
    background: var(--edulynk-primary-light);
    border-radius: 13px;
    font-size: 18px;
}

    .role-icon.green {
        color: #079b89;
        background: #eaf9f6;
    }

    .role-icon.orange {
        color: #e68c32;
        background: #fff2e6;
    }

    .role-icon.purple {
        color: #935bc9;
        background: #f4edfb;
    }

    .role-icon.cyan {
        color: #168da9;
        background: #e8f7fa;
    }

.role-card h3 {
    margin-bottom: 10px;
    color: var(--edulynk-dark);
    font-size: 17px;
    font-weight: 700;
}

.role-card p {
    margin: 0;
    color: var(--edulynk-muted);
    font-size: 13px;
    line-height: 1.65;
}


/* ================================================================
   SECURITY
   ================================================================ */

.school-security {
    padding: 100px 0;
    background: #ffffff;
}

.school-security-card {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 30px;
    padding: 48px 50px;
    background: linear-gradient( 135deg, #f7fbfa, #f9fbff );
    border: 1px solid #e5eeec;
    border-radius: 25px;
}

.school-security-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 67px;
    height: 67px;
    color: #079b89;
    background: #e5f7f3;
    border-radius: 18px;
    font-size: 29px;
}

.school-security-content {
    max-width: 700px;
}

    .school-security-content .section-eyebrow {
        margin-bottom: 7px;
    }

    .school-security-content h2 {
        margin-bottom: 8px;
        color: var(--edulynk-dark);
        font-size: 27px;
        font-weight: 720;
        line-height: 1.25;
        letter-spacing: -0.8px;
    }

    .school-security-content p {
        margin: 0;
        color: var(--edulynk-muted);
        font-size: 14px;
        line-height: 1.65;
    }

.school-security-points {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

    .school-security-points div {
        display: flex;
        align-items: center;
        gap: 8px;
        white-space: nowrap;
        color: #475467;
        font-size: 12px;
    }

    .school-security-points i {
        color: #11a390;
    }


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

.school-cta {
    padding: 20px 0 110px;
    background: #ffffff;
}

.school-cta-card {
    position: relative;
    overflow: hidden;
    padding: 85px 65px;
    text-align: center;
    color: #ffffff;
    background: linear-gradient( 135deg, #204bd0, #416fee 65%, #557ff3 );
    border-radius: 32px;
    box-shadow: 0 30px 70px rgba(49, 88, 201, 0.24);
}

.school-cta-glow {
    position: absolute;
    top: -240px;
    left: 50%;
    width: 700px;
    height: 550px;
    background: radial-gradient( circle, rgba(255,255,255,0.17), rgba(255,255,255,0) 68% );
    transform: translateX(-50%);
}

.school-cta-content {
    position: relative;
    z-index: 2;
    max-width: 820px;
    margin: 0 auto;
}

    .school-cta-content > span {
        display: block;
        margin-bottom: 16px;
        color: rgba(255,255,255,0.75);
        font-size: 12px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 1.2px;
    }

    .school-cta-content h2 {
        margin-bottom: 20px;
        color: #ffffff;
        font-size: clamp(39px, 4.4vw, 61px);
        font-weight: 750;
        line-height: 1.08;
        letter-spacing: -2.4px;
    }

    .school-cta-content p {
        max-width: 620px;
        margin: 0 auto 30px;
        color: rgba(255,255,255,0.80);
        font-size: 17px;
        line-height: 1.7;
    }

.school-cta-actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 11px;
}

.school-cta-primary,
.school-cta-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 51px;
    padding: 0 21px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 650;
    transition: all 0.2s ease;
}

.school-cta-primary {
    color: #2751c3;
    background: #ffffff;
}

    .school-cta-primary:hover {
        color: #2751c3;
        transform: translateY(-1px);
    }

.school-cta-secondary {
    color: #ffffff;
    background: rgba(255,255,255,0.09);
    border: 1px solid rgba(255,255,255,0.18);
}

    .school-cta-secondary:hover {
        color: #ffffff;
        background: rgba(255,255,255,0.14);
    }


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


/* ----------------------------------------------------------------
   LARGE LAPTOP
   ---------------------------------------------------------------- */

@media (max-width: 1399.98px) {

    .school-hero h1 {
        font-size: clamp(49px, 4.2vw, 65px);
        letter-spacing: -3.2px;
    }

    .school-hero-content {
        max-width: 670px;
    }

    .school-hero-image-wrapper {
        max-width: 650px;
    }
}


/* ----------------------------------------------------------------
   LAPTOP
   ---------------------------------------------------------------- */

@media (max-width: 1199.98px) {

    .school-hero {
        padding: 90px 0 100px;
    }

        .school-hero h1 {
            font-size: 57px;
            letter-spacing: -3px;
        }

    .school-hero-visual {
        min-height: 500px;
        padding-left: 20px;
    }

    .management-dashboard {
        padding-right: 20px;
    }

    .management-content-text {
        padding-left: 15px;
    }

    .roles-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}


/* ----------------------------------------------------------------
   TABLET
   ---------------------------------------------------------------- */

@media (max-width: 991.98px) {

    .school-hero {
        padding: 80px 0 95px;
    }

    .school-hero-content {
        max-width: 720px;
        padding-right: 0;
    }

    .school-hero h1 {
        max-width: 700px;
        font-size: 60px;
    }

    .school-hero-visual {
        max-width: 760px;
        min-height: auto;
        margin: 65px auto 0;
        padding-left: 0;
    }

    .school-hero-image-wrapper {
        max-width: 720px;
        margin: auto;
    }

    .school-benefits-grid {
        grid-template-columns: 1fr;
    }

    .management-dashboard {
        max-width: 720px;
        margin: auto;
        padding-right: 0;
    }

    .management-content-text {
        max-width: 720px;
        margin: auto;
        padding-left: 0;
    }

    .communication-content {
        max-width: 720px;
        padding-right: 0;
    }

    .communication-visual {
        max-width: 650px;
        margin: auto;
    }

    .roles-heading {
        grid-template-columns: 1fr;
        gap: 15px;
    }

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

    .school-security-card {
        grid-template-columns: auto 1fr;
    }

    .school-security-points {
        grid-column: 2;
    }
}


/* ----------------------------------------------------------------
   MOBILE
   ---------------------------------------------------------------- */

@media (max-width: 767.98px) {

    .school-hero {
        padding: 60px 0 75px;
    }

        .school-hero h1 {
            max-width: none;
            font-size: clamp(43px, 12vw, 58px);
            line-height: 1.02;
            letter-spacing: -2.8px;
        }

    .school-hero-description {
        font-size: 16px;
    }

    .school-hero-actions {
        flex-direction: column;
    }

    .school-primary-button,
    .school-secondary-button {
        width: 100%;
    }

    .school-hero-points {
        gap: 10px 16px;
    }

    .school-hero-visual {
        margin-top: 50px;
    }

    .school-hero-image-wrapper {
        border-radius: 22px;
        box-shadow: 0 22px 50px rgba(27, 43, 87, 0.14);
    }

    .school-intro,
    .school-management,
    .school-communication,
    .school-roles {
        padding: 80px 0;
    }

    .management-content-text h2,
    .communication-content h2 {
        font-size: 40px;
        letter-spacing: -1.7px;
    }

    .management-bottom-grid {
        grid-template-columns: 1fr;
    }

    .communication-points {
        grid-template-columns: 1fr;
    }

    .roles-grid {
        grid-template-columns: 1fr;
    }

    .role-card {
        min-height: auto;
    }

    .school-security-card {
        display: block;
        padding: 30px;
    }

    .school-security-icon {
        margin-bottom: 22px;
    }

    .school-security-points {
        margin-top: 23px;
    }

    .school-cta-card {
        padding: 60px 25px;
        border-radius: 24px;
    }
}


/* ----------------------------------------------------------------
   SMALL MOBILE
   ---------------------------------------------------------------- */

@media (max-width: 575.98px) {

    .school-hero {
        padding-top: 50px;
    }

        .school-hero h1 {
            font-size: clamp(40px, 12vw, 52px);
            letter-spacing: -2.4px;
        }

    .school-hero-visual {
        margin-top: 42px;
    }

    .school-hero-image-wrapper {
        border-radius: 18px;
    }

    .school-hero-image {
        aspect-ratio: 4 / 3;
        object-position: center center;
    }

    .management-window {
        transform: scale(0.95);
        transform-origin: top center;
    }

    .management-stats {
        grid-template-columns: 1fr;
    }

    .management-body {
        min-height: auto;
    }

    .notification-card {
        right: 0;
        width: 240px;
    }
}


/* ----------------------------------------------------------------
   VERY SMALL MOBILE
   ---------------------------------------------------------------- */

@media (max-width: 420px) {

    .school-hero h1 {
        font-size: 42px;
        letter-spacing: -2px;
    }

    .school-eyebrow {
        font-size: 11px;
    }

    .school-hero-points {
        flex-direction: column;
        align-items: flex-start;
    }
}