/*=====================================
ROOT VARIABLES
======================================*/

:root{

    /* School Brand Colours */

    --primary:#0B2E6B;
    --secondary:#F9A826;

    /* Neutral Colours */

    --white:#FFFFFF;
    --black:#222222;
    --text:#555555;
    --light:#F8FAFC;
    --border:#E5E7EB;

    /* Typography */

    --font-family:'Poppins',sans-serif;

    /*  Fluid type: clamp(minimum, preferred-that-scales-with-viewport, maximum).
        The sizes below are unchanged on a desktop but scale down smoothly on
        tablets and phones instead of jumping at breakpoints. */

    --font-xs:clamp(13px, 0.20vw + 12.3px, 14px);
    --font-sm:clamp(15px, 0.20vw + 14.3px, 16px);
    --font-md:clamp(16px, 0.40vw + 14.7px, 18px);
    --font-lg:clamp(19px, 0.60vw + 17.1px, 22px);
    --font-xl:clamp(24px, 1.60vw + 18.9px, 32px);
    --font-xxl:clamp(30px, 3.60vw + 18.5px, 48px);
    --font-hero:clamp(32px, 5.20vw + 15.4px, 58px);

    /* Font Weight */

    --fw-normal:400;
    --fw-medium:500;
    --fw-semibold:600;
    --fw-bold:700;

    /* Layout */

    --container:1200px;
    --radius:20px;

    /* Section Spacing */

    --space-xs:15px;
    --space-sm:25px;
    --space-md:45px;
    --space-lg:65px;
    --space-xl:90px;

    /* Shadows */

    --shadow-sm:0 5px 15px rgba(0,0,0,.08);
    --shadow-md:0 12px 30px rgba(0,0,0,.10);
    --shadow-lg:0 20px 45px rgba(0,0,0,.15);

    /* Animation */

    --transition:.35s ease;

}/*=====================================
RESET
======================================*/

*,
*::before,
*::after{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    margin:0;
    padding:0;

}

img{

    display:block;
    max-width:100%;
    height:auto;

}

a{

    text-decoration:none;
    color:inherit;

}

ul,
ol{

    list-style:none;

}

button,
input,
textarea,
select{

    font:inherit;
    border:none;
    outline:none;

}

button{

    cursor:pointer;
    background:none;

}

table{

    border-collapse:collapse;
    border-spacing:0;

}/*=====================================
LAYOUT
======================================*/

/* Body */

body{

    font-family:var(--font-family);
    font-size:var(--font-sm);
    font-weight:var(--fw-normal);
    line-height:1.7;

    color:var(--text);
    background:var(--white);

    overflow-x:hidden;

}

/* Main */

main{

    width:100%;

}

/* Container */

.container{

    width:min(90%, var(--container));
    margin:0 auto;

}

/* Sections */

section{

    padding:var(--space-lg) 0;
    position:relative;

}

/* Rows */

.row{

    /*  Bootstrap's default is align-items:stretch, which lets columns grow to
        equal height so cards in a grid line up. This was overridden to
        `center`, which made every card size to its own text and sit
        vertically offset from its neighbours. Restored to stretch.
        Rows that genuinely need centring opt in with .align-items-center. */
    align-items:stretch;

}

/* Responsive Images */

.img-fluid{

    width:100%;
    height:auto;
    display:block;

}

/* Default Page Background */

.page{

    background:var(--white);

}
/*=====================================
PAGE HERO
======================================*/

.page-hero{

    position:relative;
    height:400px;
    margin-top:95px;
    overflow:hidden;

}

/* Hero Background Image */

.page-hero img{

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

    width:100%;
    height:100%;

    object-fit:cover;
    /* See page-hero.css - bias the crop upward so faces stay in frame. */
    object-position:center 32%;

    z-index:1;

}

/* Hero Overlay */

.page-overlay{

    position:absolute;
    inset:0;

    background:linear-gradient(
        90deg,
        rgba(11,46,107,.75) 0%,
        rgba(11,46,107,.55) 50%,
        rgba(11,46,107,.25) 70%,
        rgba(11,46,107,.10) 100%
    );

    z-index:2;

}

/* Hero Container */

.page-hero .container{

    position:relative;

    z-index:3;

    height:100%;

    display:flex;
    align-items:center;

}

/* Hero Content */

.page-hero-content{

    max-width:700px;

    color:var(--white);

}

/* Breadcrumb */

.breadcrumb{

    margin-bottom:20px;

    font-size:15px;

}

.breadcrumb a{

    color:var(--secondary);

    font-weight:600;

}

.breadcrumb span{

    margin:0 8px;

    color:var(--white);

}

/* Section Tag */

.section-tag{

    display:inline-block;

    margin-bottom:20px;

    color:var(--secondary);

    text-transform:none;

    letter-spacing:3px;

    font-size:14px;

    font-weight:var(--fw-bold);

}

/* Hero Heading */

.page-hero h1{

    margin-bottom:25px;

    color:var(--white);

}

/* Hero Description */

.page-hero p{

    max-width:620px;

    margin-bottom:0;

    color:rgba(255,255,255,.92);

}

/* Hero Content */

.page-hero-content{

    max-width:680px;

    color:var(--white);

}

/* Hero Tag */

.section-tag{

    display:inline-block;

    margin-bottom:20px;

    color:var(--secondary);

    text-transform:none;

    letter-spacing:3px;

    font-size:14px;

    font-weight:var(--fw-bold);

}

/* Gold Divider */

.gold-line{

    width:80px;

    height:4px;

    margin-bottom:30px;

    background:var(--secondary);

    border-radius:30px;

}

/* Hero Title */

.page-hero h1{

    margin-bottom:25px;

}

/* Hero Description */

.page-hero p{

    max-width:620px;

    margin-bottom:0;

    color:rgba(255,255,255,.92);

}

/* Hero Content */

.page-hero .container{

    position:relative;

    z-index:3;

    height:100%;

    display:flex;
    align-items:center;

}

.page-hero-content{

    max-width:700px;
    color:var(--white);

}

/* Section Tag */

.section-tag{

    display:inline-block;

    color:var(--secondary);

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

    letter-spacing:3px;

    text-transform:none;

    margin-bottom:18px;

}

/* Gold Line */

.gold-line{

    width:80px;
    height:4px;

    background:var(--secondary);

    border-radius:30px;

    margin-bottom:30px;

}

/* Heading */

.page-hero h1{

    font-size:var(--font-hero);

    font-weight:var(--fw-bold);

    line-height:1.15;

    margin-bottom:25px;

}

/* Paragraph */

.page-hero p{

    font-size:20px;

    line-height:1.8;

    color:#f2f2f2;

    max-width:650px;

}

/* Breadcrumb */

.breadcrumb{

    margin-bottom:25px;

    font-size:15px;

    color:#ffffff;

}

.breadcrumb a{

    color:var(--secondary);

    font-weight:600;

}

.breadcrumb span{

    margin:0 10px;

    color:#ffffff;

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

/* Base Button */

.btn{

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

    padding:14px 34px;

    border-radius:50px;

    font-size:16px;
    font-weight:var(--fw-semibold);

    transition:var(--transition);

    cursor:pointer;

}

/* Primary Button */

.btn-primary{

    background:var(--secondary);
    color:var(--primary);

}

.btn-primary:hover{

    background:#e89b15;

    transform:translateY(-2px);

}

/* Secondary Button */

.btn-secondary{

    background:var(--primary);
    color:var(--white);

}

.btn-secondary:hover{

    background:#14418f;

    transform:translateY(-2px);

}

/* Outline Button */

.btn-outline{

    background:transparent;

    color:var(--white);

    border:2px solid var(--white);

}

.btn-outline:hover{

    background:var(--white);

    color:var(--primary);

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

/* Base Card */

.card{

    background:var(--white);

    border:none;

    border-radius:var(--radius);

    padding:35px;

    box-shadow:var(--shadow-md);

    transition:var(--transition);

    height:100%;

}

/* Card Hover */

.card:hover{

    transform:translateY(-8px);

    box-shadow:var(--shadow-lg);

}

/* Card Image */

.card img{

    width:100%;

    border-radius:15px;

    margin-bottom:25px;

}

/* Card Icon */

.card i{

    font-size:48px;

    color:var(--secondary);

    margin-bottom:20px;

}

/* Card Title */

.card h3{

    margin-bottom:18px;

    color:var(--primary);

}

/* Card Text */

.card p{

    margin-bottom:0;

}/*=====================================
FORMS
======================================*/

/* Form Group */

.form-group{

    margin-bottom:25px;

}

/* Labels */

label{

    display:block;

    margin-bottom:10px;

    font-weight:var(--fw-semibold);

    color:var(--primary);

}

/* Inputs */

.form-control{

    width:100%;

    height:55px;

    padding:0 18px;

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

    border-radius:12px;

    background:var(--white);

    color:var(--text);

    transition:var(--transition);

}

/* Textarea */

textarea.form-control{

    height:160px;

    padding:18px;

    resize:vertical;

}

/* Focus */

.form-control:focus{

    border-color:var(--primary);

    box-shadow:0 0 0 4px rgba(11,46,107,.10);

}

/* Placeholder */

.form-control::placeholder{

    color:#9CA3AF;

}

/* Select */

select.form-control{

    cursor:pointer;

}

/* Disabled */

.form-control:disabled{

    background:#F3F4F6;

    cursor:not-allowed;

}
/*=====================================
FOOTER
======================================*/

.footer{

    background:var(--primary);

    color:var(--white);

    padding:70px 0 0;

}

/* Footer Titles */

.footer h4{

    color:var(--white);

    margin-bottom:25px;

    font-weight:var(--fw-bold);

}

/* Footer Paragraphs */

.footer p{

    color:rgba(255,255,255,.85);

    margin-bottom:15px;

    line-height:1.8;

}

/* Footer Links */

.footer a{

    display:block;

    color:rgba(255,255,255,.85);

    margin-bottom:12px;

    transition:var(--transition);

}

.footer a:hover{

    color:var(--secondary);

    padding-left:6px;

}

/* Footer List */

.footer ul{

    padding:0;
    margin:0;

}

.footer li{

    margin-bottom:12px;

}

/* Social Icons */

.footer-social{

    display:flex;

    gap:15px;

    margin-top:20px;

}

.footer-social a{

    width:42px;

    height:42px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:rgba(255,255,255,.12);

    color:var(--white);

    transition:var(--transition);

}

.footer-social a:hover{

    background:var(--secondary);

    color:var(--primary);

    transform:translateY(-3px);

}

/* Bottom Bar */

.footer-bottom{

    margin-top:50px;

    padding:20px 0;

    border-top:1px solid rgba(255,255,255,.15);

    text-align:center;

    font-size:14px;

    color:rgba(255,255,255,.75);

}
/*=====================================
HOME HERO
======================================*/

.hero{

    margin-top:0;
    position:relative;

}

#heroSlider{

    height:430px;

}

#heroSlider .carousel-inner{

    height:100%;

}

#heroSlider .carousel-item{

    position:relative;
    height:100%;
	overflow:hidden;

}

.hero-image{

    width:100%;
    height:100%;

    object-fit:cover;
    /* See page-hero.css - bias the crop upward so faces stay in frame. */
    object-position:center 32%;

    display:block;

}
/*=====================================
TYPOGRAPHY
======================================*/

h1,
h2,
h3,
h4,
h5,
h6{

    color:var(--primary);

    font-weight:700;

    line-height:1.2;

    letter-spacing:0;

    text-transform:none;

    margin-bottom:20px;

}

p{

    color:var(--text);

    line-height:1.8;

    margin-bottom:20px;

}

.lead{

    font-size:18px;

    font-weight:400;

    color:var(--text);

    line-height:1.9;

}
/*=====================================
GOOGLE TRANSLATE
======================================*/

/*  The picker now lives in the dark top bar beside the location, so it is
    styled as a compact inline control rather than a large white pill. */

#google_translate_element{

    margin-left:18px;
    display:inline-block;
    line-height:1;

}

.goog-te-gadget{

    font-family:inherit !important;
    font-size:13px !important;
    line-height:1 !important;
    color:transparent !important;

}

.goog-te-gadget-simple{

    background:rgba(255,255,255,.12) !important;
    border:1px solid rgba(255,255,255,.35) !important;
    border-radius:20px !important;
    padding:4px 12px !important;
    line-height:1 !important;
    cursor:pointer;

    /*  Google renders the label and the little arrow as separate inline
        elements, which wrap onto two lines inside a narrow pill.
        inline-flex + nowrap keeps them on one line. */
    display:inline-flex !important;
    align-items:center !important;
    gap:6px;
    white-space:nowrap !important;

}

#google_translate_element .goog-te-gadget-simple *,
#google_translate_element .goog-te-menu-value,
#google_translate_element .goog-te-menu-value span{

    white-space:nowrap !important;
    display:inline !important;
    vertical-align:middle;

}

#google_translate_element .goog-te-menu-value{

    display:inline-flex !important;
    align-items:center !important;
    gap:6px;
    margin:0 !important;

}

.goog-te-gadget-simple:hover{

    background:rgba(255,255,255,.2) !important;

}

.goog-te-gadget img{

    display:none;

}

.goog-te-gadget-simple span{

    color:#fff !important;
    font-weight:600;
    font-size:13px !important;
    border:0 !important;

}
/*=====================================
VISION & MISSION MODAL
======================================*/

.stanne-modal-header{

    background:linear-gradient(135deg,#0B2E6B,#163E87);

    color:#fff;

    text-align:center;

    padding:40px;

    position:relative;

}

.modal-close{

    position:absolute;

    top:20px;

    right:20px;

}

.modal-logo{

    width:260px;

    max-width:100%;

    height:auto;

    display:block;

    margin:0 auto 25px;

}

.stanne-modal-header h2{

    color:#fff;

    font-size:42px;

    font-weight:700;

    margin:15px 0 10px;

}

.stanne-modal-header p{

    color:#E5E5E5;

    margin:0;

    letter-spacing:2px;

}

.vision-box,
.mission-box{

    background:#fff;

    border-radius:18px;

    padding:35px;

    height:100%;

    box-shadow:0 12px 30px rgba(0,0,0,.08);

}

.vision-box i,
.mission-box i{

    font-size:40px;

    color:#F9A826;

    margin-bottom:20px;

}

.vision-box h3,
.mission-box h3{

    color:#0B2E6B;

    margin-bottom:15px;

}

.modal-footer{

    background:#0B2E6B;

    color:#fff;

    border:none;

}
.story-highlights{
    display:flex;
    justify-content:center;
    gap:60px;
    text-align:center;
}

.highlight-box{
    flex:0 0 auto;
}

.highlight-box h2{
    color:#0b3b8c;
    font-weight:700;
    margin-bottom:5px;
}
/* ==========================================
   OUR EVOLUTION
========================================== */

.evolution{
    background:#f8f9fc;
}

.journey-card{

    background:#fff;
    border-radius:15px;
    padding:35px 25px;
    text-align:center;
    height:100%;
    box-shadow:0 10px 25px rgba(0,0,0,.08);
    transition:.3s;
    border-top:5px solid #f4b400;

}

.journey-card:hover{

    transform:translateY(-8px);

}

.journey-year{

    width:85px;
    height:85px;
    margin:0 auto 20px;
    border-radius:50%;
    background:#0b3b8c;
    color:#fff;

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

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

}

.journey-card h4{

    color:#0b3b8c;
    margin-bottom:15px;
    font-weight:700;

}

.journey-card p{

    color:#555;
    line-height:1.7;

}
.transport-cta .btn-success{

    background:#25D366;
    border-color:#25D366;
    color:#fff;

}

.transport-cta .btn-success:hover{

    background:#1EBE5B;
    border-color:#1EBE5B;

}
.cta-buttons{
    display:flex;
    justify-content:center;
    align-items:center;
    flex-wrap:wrap;
    gap:20px;
}
.developer-link{

    color:#FFD54A;
    text-decoration:none;
    font-weight:600;

}

.developer-link:hover{

    color:#fff;
    text-decoration:underline;

}
.developer-credit{
    text-align:center;
    margin-top:0;
    padding-top:0;
    border-top:0;
}

.developer-credit small{
    color:#0B3B8C;      /* School blue */
    font-size:.9rem;
    letter-spacing:.5px;
}

.developer-credit strong{
    color:#0B3B8C;
    font-weight:700;
}
/*=====================================
SITE FOOTER
Content is driven by admin > School Settings.
======================================*/

.site-footer{

    background:#0B2E6B;
    color:rgba(255,255,255,.82);
    padding:64px 0 0;
    margin-top:0;
    font-size:15px;
    line-height:1.75;

}

.site-footer .container{

    max-width:1200px;

}

.footer-grid{

    display:grid;
    grid-template-columns:1.7fr 1fr 1fr 1.25fr;
    gap:40px;
    padding-bottom:34px;
    align-items:start;

}

.site-footer h4{

    color:#fff;
    font-size:20px;
    font-weight:700;
    margin:0 0 12px;

}

.site-footer h5{

    color:#fff;
    font-size:15px;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
    margin:0 0 18px;

}

.site-footer p{

    margin:0 0 18px;
    color:rgba(255,255,255,.72);

}

.site-footer ul{

    list-style:none;
    margin:0;
    padding:0;

}

.site-footer ul li{

    margin-bottom:10px;

}

.site-footer a{

    color:rgba(255,255,255,.78);
    text-decoration:none;
    transition:.25s ease;

}

.site-footer a:hover{

    color:#F5A623;

}

/* contact column */

.footer-contact li{

    display:flex;
    align-items:flex-start;
    gap:10px;

}

.footer-contact i{

    color:#F5A623;
    margin-top:6px;
    width:16px;
    flex:0 0 16px;

}

/* social icons */

.footer-social{

    display:flex;
    gap:10px;
    margin-top:6px;

}

.footer-social a{

    width:38px;
    height:38px;
    border-radius:50%;
    background:rgba(255,255,255,.1);
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;

}

.footer-social a:hover{

    background:#F5A623;
    color:#0B2E6B;

}

/* apply button */

.footer-apply{

    display:inline-block;
    margin-top:14px;
    background:#F5A623;
    color:#0B2E6B !important;
    font-weight:700;
    padding:10px 26px;
    border-radius:30px;

}

.footer-apply:hover{

    background:#fff;

}

/* bottom strip */

.footer-bottom{

    border-top:1px solid rgba(255,255,255,.14);
    padding:22px 0 26px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px 26px;
    flex-wrap:wrap;
    font-size:14px;

}

/*  Developer credit used to sit on a white strip above the footer.
    It belongs in the bottom bar, quieter than the copyright. */

.footer-bottom .developer-credit{

    width:100%;
    text-align:center;
    font-size:13px;
    color:rgba(255,255,255,.5);
    margin-top:6px;

}

.footer-bottom .developer-credit a{

    color:#F5A623;
    font-weight:600;

}

/*  The about column is short, so pull the grid tighter and stop the
    first column stretching into empty space. */

.footer-col{

    align-self:start;

}

.footer-bottom p{

    margin:0;

}

.footer-bottom span{

    opacity:.4;
    margin:0 8px;

}

@media (max-width:991px){

    .footer-grid{

        grid-template-columns:1fr 1fr;
        gap:32px;

    }

}

@media (max-width:575px){

    .site-footer{ padding-top:48px; }

    .footer-grid{

        grid-template-columns:1fr;
        gap:28px;

    }

    .footer-bottom{

        flex-direction:column;
        text-align:center;

    }

}


/*=====================================
EQUAL-HEIGHT FEATURE CARDS
Cards in a row had different heights because each
only grew to fit its own text.
======================================*/

.why-card,
.feature-card,
.boarding-card,
.service-card,
.process-card{

    height:100%;
    display:flex;
    flex-direction:column;

}

.why-card p,
.feature-card p,
.boarding-card p,
.service-card p,
.process-card p{

    margin-bottom:0;

}


/*=====================================
RESPONSIVE TYPOGRAPHY
Headings that were set in fixed pixels are given fluid
equivalents so nothing overflows on small screens.
======================================*/

h1{ font-size:clamp(30px, 4.2vw + 17px, 48px); }
h2{ font-size:clamp(24px, 2.6vw + 15px, 36px); }
h3{ font-size:clamp(20px, 1.4vw + 15px, 26px); }
h4{ font-size:clamp(17px, 0.8vw + 14px, 20px); }

p, li{

    font-size:clamp(15px, 0.35vw + 14px, 17px);
    line-height:1.75;

}

.lead{

    font-size:clamp(16px, 0.7vw + 14px, 19px);

}

/*  Long words and links must not force a horizontal scrollbar
    on narrow screens. */

h1, h2, h3, h4, p, li, a{

    overflow-wrap:break-word;

}

/*  Footer logo sits above the school name. The shipped logo art is dark
    on transparent, so it gets a light plate to stay visible on navy. */

.footer-logo{

    display:inline-block;
    background:#fff;
    padding:10px 14px;
    border-radius:8px;
    margin-bottom:16px;

}

.footer-logo img{

    height:54px;
    width:auto;
    display:block;

}

@media (max-width:575px){

    .footer-logo img{ height:46px; }

}

/*=====================================
PROGRAMME CARDS
These had no CSS at all - their stylesheet
(academics.css) was referenced but never existed,
so images rendered at natural size and the row
did not line up.
======================================*/

.academic-programmes .row{

    align-items:stretch;

}

.programme-card{

    background:#fff;
    border:1px solid #e8ecf2;
    border-radius:14px;
    overflow:hidden;
    height:100%;
    display:flex;
    flex-direction:column;
    box-shadow:0 2px 14px rgba(11,46,107,.06);
    transition:transform .25s ease, box-shadow .25s ease;

}

.programme-card:hover{

    transform:translateY(-4px);
    box-shadow:0 10px 28px rgba(11,46,107,.12);

}

/*  Fixed ratio so every card's image is the same
    height and the titles align across the row. */

.programme-image{

    position:relative;
    aspect-ratio:4 / 3;
    overflow:hidden;
    background:#eef2f7;

}

.programme-image img{

    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transition:transform .4s ease;

}

.programme-card:hover .programme-image img{

    transform:scale(1.04);

}

.programme-content{

    padding:26px 24px 24px;
    display:flex;
    flex-direction:column;
    flex:1 1 auto;
    position:relative;

}

.programme-icon{

    position:absolute;
    top:-26px;
    left:24px;
    width:52px;
    height:52px;
    border-radius:50%;
    background:#0B2E6B;
    color:#F5A623;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:21px;
    box-shadow:0 4px 14px rgba(11,46,107,.25);

}

.programme-content h3{

    margin:14px 0 10px;
    color:#0B2E6B;

}

.programme-content p{

    color:#5a6474;
    margin-bottom:18px;

}

/*  Push the link to the bottom so it sits on the same
    line in every card regardless of text length. */

.programme-content a{

    margin-top:auto;
    display:inline-flex;
    align-items:center;
    gap:8px;
    color:#0B2E6B;
    font-weight:600;
    text-decoration:none;

}

.programme-content a:hover{

    color:#F5A623;

}

.programme-content a i{

    transition:transform .25s ease;

}

.programme-content a:hover i{

    transform:translateX(4px);

}

/*=====================================
HEAD TEACHER'S MESSAGE
The portrait card carries the attribution, so the
letter does not repeat the name and title.
======================================*/

.head-teacher-section{

    padding:var(--space-lg) 0;

}

.head-teacher-grid{

    display:grid;
    grid-template-columns:320px 1fr;
    gap:56px;
    align-items:start;

}

/* portrait */

.head-teacher-profile{

    position:sticky;
    top:110px;

}

.head-teacher-profile img{

    width:100%;
    aspect-ratio:4 / 5;
    object-fit:cover;
    border-radius:14px;
    display:block;
    box-shadow:0 10px 30px rgba(11,46,107,.16);

}

.head-teacher-name{

    margin-top:20px;
    padding-left:16px;
    border-left:3px solid #F5A623;

}

.head-teacher-name h2{

    margin:0;
    color:#0B2E6B;
    font-size:clamp(19px, 1.2vw + 15px, 23px);

}

.head-teacher-name span{

    display:block;
    margin-top:2px;
    color:#6b7280;
    font-size:14px;
    letter-spacing:.06em;
    text-transform:uppercase;

}

/* letter */

.head-teacher-message h3{

    color:#0B2E6B;
    margin:0 0 22px;

}

.head-teacher-message .salutation{

    font-weight:600;
    color:#0B2E6B;

}

.head-teacher-message p{

    max-width:68ch;
    margin-bottom:18px;

}

.head-teacher-actions{

    display:flex;
    align-items:center;
    gap:22px;
    flex-wrap:wrap;
    margin-top:34px;
    padding-top:26px;
    border-top:1px solid #e8ecf2;

}

.head-teacher-actions .btn-link{

    color:#0B2E6B;
    font-weight:600;
    text-decoration:none;

}

.head-teacher-actions .btn-link:hover{

    color:#F5A623;

}

@media (max-width:991px){

    .head-teacher-grid{

        grid-template-columns:1fr;
        gap:34px;

    }

    .head-teacher-profile{

        position:static;
        max-width:320px;

    }

}