* { margin: 0; padding: 0; box-sizing: border-box }

:root {
    --bg: #f7f6f2;
    --text: #182018;
    --muted: #686b65;
    --line: #d9d8d2;
    --accent: #9b7650;
    --dark: #182018;
    --white: #fff
}

html { scroll-behavior: smooth }

body {
    background: var(--bg);
    color: var(--text);
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.6
}

a { color: inherit; text-decoration: none }
img { max-width: 100% }
button { font: inherit }

/* ===== Header ===== */
.site-header {
    position: sticky; top: 0; z-index: 1000;
    background: var(--bg);
    border-bottom: 1px solid var(--line)
}

.nav-container {
    width: min(1400px, 92%); min-height: 90px; margin: auto;
    display: flex; align-items: center; justify-content: space-between; gap: 30px
}

.brand { display: flex; align-items: center; gap: 12px; flex-shrink: 0 }
.brand img { width: 62px; height: 62px; object-fit: contain }
.brand-text { display: flex; flex-direction: column; line-height: 1 }
.brand-name { font-size: 18px; font-weight: 700; letter-spacing: 2px }
.brand-subtitle { margin-top: 5px; font-size: 9px; letter-spacing: 3px; color: var(--muted) }

.desktop-nav { display: flex; align-items: center; gap: 30px; margin-left: auto }
.nav-item { position: relative }
.nav-item > a {
    display: block; padding: 10px 0;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px; font-weight: 700;
    letter-spacing: normal; transition: opacity .25s
}
.nav-item > a:hover, .nav-item.active > a { opacity: .55 }
.nav-item > a:after {
    content: ""; position: absolute; left: 0; bottom: 3px;
    width: 0; height: 2px; background: var(--text); transition: width .25s
}
.nav-item > a:hover:after, .nav-item.active > a:after { width: 100% }

.header-actions { display: flex; align-items: center; gap: 12px }

.fee-button {
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--dark); color: #fff; font-size: 12px; letter-spacing: .8px;
    min-height: 42px; padding: 0 22px
}

.menu-button {
    display: none; width: 44px; height: 44px; padding: 0; margin: 0;
    border: 1px solid var(--dark); border-radius: 4px; background: var(--dark);
    cursor: pointer; align-items: center; justify-content: center; flex-direction: column; gap: 5px;
    position: relative; z-index: 1002; appearance: none; -webkit-appearance: none
}

.menu-button span {
    display: block; width: 23px; height: 2px; margin: 0; background: #fff;
    border-radius: 2px; transition: transform .3s ease, opacity .3s ease
}

.menu-button.active span:nth-child(1) { transform: translateY(7px) rotate(45deg) }
.menu-button.active span:nth-child(2) { opacity: 0 }
.menu-button.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg) }

.mobile-nav { display: none }
.mobile-nav.open { display: flex }

/* ===== Hero ===== */
.facilities-hero {
    position: relative; min-height: 62vh; padding: 100px 8% 90px;
    display: flex; align-items: center; overflow: hidden;
    border-bottom: 1px solid var(--line);
    background-image: linear-gradient(rgba(0,0,0,.45), rgba(0,0,0,.45)),
        url("../Assets/Images/School infra.jpg");
    background-size: cover; background-position: center; background-repeat: no-repeat
}

.facilities-hero:after {
    content: "GBPS"; position: absolute; right: -25px; bottom: -90px;
    font-size: clamp(150px, 25vw, 380px); font-weight: 700; line-height: 1;
    color: rgba(24, 32, 24, .035); pointer-events: none
}

.facilities-hero-content { position: relative; z-index: 2; max-width: 850px }

.eyebrow { margin-bottom: 25px; font-size: 11px; font-weight: 700; letter-spacing: 3px; color: #fff }

.facilities-hero h1 {
    font-size: clamp(60px, 9vw, 125px); font-weight: 500;
    line-height: .9; letter-spacing: -5px; color: #fff
}

.facilities-hero h1 em, .section-heading h2 em, .facility-copy h2 em, .more-heading em {
    color: var(--accent); font-family: Georgia, "Times New Roman", serif; font-weight: 400
}

.hero-description {
    max-width: 520px; margin-top: 35px; font-size: 17px;
    line-height: 1.8; color: rgba(255, 255, 255, .9)
}

.hero-number { position: absolute; right: 8%; top: 50%; font-size: 13px; letter-spacing: 2px; color: var(--muted) }

/* ===== Sections ===== */
.section { width: min(1200px, 90%); margin: auto; padding: 110px 0 }

.section-label {
    display: inline-block; margin-bottom: 28px; font-size: 11px;
    font-weight: 700; letter-spacing: 2.5px; color: var(--muted)
}

p { color: var(--muted) }

.intro-grid { display: grid; grid-template-columns: 42% 58%; gap: 70px }

.section-heading h2 {
    max-width: 470px; font-size: clamp(42px, 5vw, 72px); font-weight: 500;
    line-height: 1.02; letter-spacing: -2px
}

.vertical-line { display: block; width: 1px; height: 80px; margin-top: 45px; background: var(--line) }

.intro-copy { padding-top: 8px }
.intro-copy p { max-width: 720px; margin-bottom: 25px; font-size: 17px; line-height: 1.9 }
.intro-copy strong { color: var(--text) }

/* ===== Facility rows ===== */
.facility-rows { border-top: 1px solid var(--line) }

.facility-row {
    display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center;
    padding: 70px 0; border-bottom: 1px solid var(--line)
}

.facility-row:last-child { border-bottom: 0 }

.facility-row.reverse .facility-image { order: 2 }
.facility-row.reverse .facility-copy { order: 1 }

.facility-image { position: relative }
.facility-image img { width: 100%; height: 420px; object-fit: cover; display: block }
.facility-image span {
    position: absolute; top: -14px; left: -14px;
    background: var(--dark); color: #fff; font-size: 11px;
    letter-spacing: 2px; padding: 6px 12px
}

.facility-copy .kicker {
    font-size: 11px; font-weight: 700; letter-spacing: 2.5px;
    color: var(--muted); margin-bottom: 20px
}

.facility-copy h2 {
    font-size: clamp(34px, 4vw, 55px); font-weight: 500;
    line-height: 1.05; letter-spacing: -2px; margin-bottom: 25px
}

.facility-copy p { font-size: 16px; line-height: 1.9; max-width: 520px; margin-bottom: 25px }

/* ===== More facilities (bullet points) ===== */
.facility-more { background: #eceae3; width: 100%; padding-left: 5%; padding-right: 5% }

.facility-more .section-label, .facility-more .more-heading, .facility-more .bullet-list {
    max-width: 1250px; margin-left: auto; margin-right: auto
}

.more-heading {
    font-size: clamp(42px, 5vw, 72px); font-weight: 500; line-height: 1.02;
    letter-spacing: -2px; margin-bottom: 50px
}

.bullet-list {
    list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 18px 60px;
    padding-bottom: 20px
}

.bullet-list li {
    position: relative; padding-left: 28px; font-size: 16px; line-height: 1.7; color: #4e554e
}

.bullet-list li:before {
    content: ""; position: absolute; left: 0; top: 12px;
    width: 8px; height: 8px; background: var(--accent)
}

/* ===== Footer ===== */
.site-footer { background: var(--dark); color: #fff }

.footer-main {
    width: min(1200px, 90%); margin: auto; padding: 80px 0;
    display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 50px
}

.footer-brand img { width: 70px; height: 70px; object-fit: contain; margin-bottom: 18px }
.footer-brand h3 { font-size: 18px; line-height: 1.25; letter-spacing: 2px }
.footer-brand p { margin-top: 15px; color: rgba(255,255,255,.55) }

.footer-column h4 { margin-bottom: 25px; font-size: 11px; letter-spacing: 2px; text-transform: uppercase }
.footer-column p { margin-top: 14px; font-size: 13px; line-height: 1.7; color: rgba(255,255,255,.55) }
.footer-column a { display: inline-block; font-size: 13px; color: rgba(255,255,255,.82) }
.footer-column ul { list-style-type: disc; padding-left: 20px; margin: 0; line-height: 1.5 }
.footer-column li { margin-bottom: 12px }

.footer-bottom {
    width: min(1200px, 90%); margin: auto; padding: 22px 0;
    display: flex; justify-content: space-between;
    border-top: 1px solid rgba(255,255,255,.12);
    font-size: 11px; color: rgba(255,255,255,.45)
}

/* ===== Responsive ===== */
@media(max-width:1000px) {
    .desktop-nav, .fee-button { display: none }
    .menu-button { display: flex }
    .nav-container { width: 94%; min-height: 76px; gap: 12px }
    .brand { min-width: 0; gap: 8px }
    .header-actions { margin-left: auto }
    .mobile-nav {
        flex-direction: column; width: 100%; padding: 15px 5%;
        background: var(--bg); border-top: 1px solid var(--line);
        position: relative; z-index: 1001
    }
    .mobile-nav a { padding: 15px 0; border-bottom: 1px solid var(--line); font-family: Arial, Helvetica, sans-serif; font-size: 15px; font-weight: 600; letter-spacing: normal }
    .mobile-nav .mobile-fee {
        margin-top: 10px; padding: 15px 18px; background: var(--dark);
        color: #fff; text-align: center
    }
    .facilities-hero { min-height: 55vh }
    .facility-row { grid-template-columns: 1fr; gap: 35px }
    .facility-row.reverse .facility-image { order: 1 }
    .facility-row.reverse .facility-copy { order: 2 }
    .footer-main { grid-template-columns: repeat(2, 1fr) }
}

@media(max-width:650px) {
    .nav-container { min-height: 72px }
    .brand img { width: 50px; height: 50px; flex: 0 0 50px }
    .brand-name { font-size: 15px; letter-spacing: 1.5px; white-space: nowrap }
    .brand-subtitle { font-size: 8px; letter-spacing: 2px }
    .menu-button { width: 42px; height: 42px; flex: 0 0 42px }
    .section, .facility-more { padding: 75px 7% }
    .facilities-hero { min-height: 58vh; padding: 75px 7%; align-items: flex-end }
    .facilities-hero h1 { font-size: clamp(54px, 17vw, 82px); letter-spacing: -3px }
    .hero-description { margin-top: 25px; font-size: 15px }
    .hero-number { right: 7%; top: 30px }
    .intro-grid { grid-template-columns: 1fr; gap: 35px }
    .section-heading h2, .more-heading { font-size: 48px }
    .vertical-line { display: none }
    .intro-copy p { font-size: 15px; line-height: 1.8 }
    .facility-row { padding: 50px 0; gap: 25px }
    .facility-image img { height: 300px }
    .facility-copy h2 { font-size: 34px }
    .facility-copy p { font-size: 15px; line-height: 1.8 }
    .bullet-list { grid-template-columns: 1fr }
    .footer-main { width: 90%; padding: 60px 0; grid-template-columns: 1fr; gap: 40px }
    .footer-bottom { width: 90%; flex-direction: column; gap: 8px }
}

@media(max-width:400px) {
    .nav-container { min-height: 68px }
    .brand { gap: 7px }
    .brand img { width: 42px; height: 42px; flex-basis: 42px }
    .brand-name { font-size: 12px; letter-spacing: 1px }
    .brand-subtitle { font-size: 7px; letter-spacing: 1.5px }
    .menu-button { width: 40px; height: 40px; flex-basis: 40px }
    .facilities-hero h1 { font-size: 50px }
    .section-heading h2, .more-heading { font-size: 42px }
}