:root{--navy:#0b3d91;--blue:#1467b8;--blue-light:#eaf3ff;--ink:#172033;--muted:#64748b;--bg:#ffffff;--white:#fff;--line:#dbe7f5;--shadow:0 18px 50px rgba(11,61,145,.12)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,Arial,sans-serif;color:var(--ink);background:var(--bg);line-height:1.7}a{text-decoration:none;color:inherit}.top{background:var(--blue);color:#fff;font-size:13px}.top .wrap{display:flex;justify-content:space-between;gap:20px;padding:9px 0}.wrap{width:min(1180px,92%);margin:auto}.header{background:#fff;position:sticky;top:0;z-index:50;box-shadow:0 3px 20px rgba(0,0,0,.06)}.nav{display:flex;align-items:center;justify-content:space-between;padding:13px 0}.brand{display:flex;align-items:center;gap:12px}.brand img{width:58px;height:58px;border-radius:50%;object-fit:cover;border:2px solid var(--blue)}.brand b{display:block;color:var(--navy);font-size:17px;line-height:1.2}.brand small{color:var(--muted)}.links{display:flex;align-items:center;gap:4px}.links>a,.drop>button{padding:12px 10px;font-weight:700;color:#334155;background:none;border:0;font-size:14px;cursor:pointer}.drop{position:relative}.menu{display:none;position:absolute;right:0;top:44px;background:#fff;min-width:230px;border-radius:12px;box-shadow:var(--shadow);padding:8px;border:1px solid var(--line)}.menu a{display:block;padding:9px 11px;border-radius:8px;font-size:14px}.menu a:hover{background:#fff4d6;color:var(--blue)}.drop:hover .menu{display:block}.cta{background:var(--blue)!important;color:#fff!important;border-radius:7px}.hamb{display:none;background:var(--blue);color:#fff;border:0;border-radius:8px;padding:9px 12px;font-size:20px}.hero{position:relative;min-height:510px;display:flex;align-items:center;background:linear-gradient(90deg,rgba(11,61,145,.93),rgba(214,40,40,.55)),url('../assets/gallery/school-building-main.jpg') center/cover}.hero .wrap{color:#fff}.eyebrow{color:var(--blue);font-weight:800;text-transform:uppercase;letter-spacing:1.6px;font-size:13px}.hero h1{font-size:clamp(38px,6vw,70px);line-height:1.04;max-width:800px;margin:15px 0}.hero p{max-width:700px;font-size:18px;color:#e5edf5}.buttons{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}.btn{display:inline-block;padding:12px 19px;border-radius:7px;font-weight:800}.primary{background:var(--blue);color:#0b3d91}.outline{border:1px solid #fff;color:#fff}.section{padding:78px 0}.head{text-align:center;max-width:760px;margin:0 auto 38px}.head .eyebrow{color:var(--blue)}.head h2{font-size:38px;line-height:1.15;margin:9px 0 12px;color:var(--navy)}.head p{color:var(--muted)}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.grid4{grid-template-columns:repeat(4,1fr)}.card{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:0 8px 28px rgba(15,35,60,.05)}.card img{width:100%;height:190px;object-fit:cover}.card .pad{padding:20px}.card h3{margin:0 0 8px;color:var(--navy)}.muted{color:var(--muted)}.about{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}.about img{width:100%;border-radius:16px;box-shadow:var(--shadow)}.stats{background:var(--blue);color:#fff}.statgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}.stat{text-align:center;padding:28px}.stat b{font-size:36px;color:#ffffff;display:block}.list{display:grid;gap:10px}.list div{background:#fff;border:1px solid var(--line);padding:14px 16px;border-radius:10px}.banner{background:linear-gradient(110deg,var(--blue),var(--blue));color:#fff;border-radius:18px;padding:42px}.banner h2{margin-top:0}.gallery{columns:4 220px;column-gap:15px}.gallery figure{margin:0 0 15px;break-inside:avoid;background:#fff;border-radius:10px;overflow:hidden;border:1px solid var(--line)}.gallery img{width:100%;display:block}.gallery figcaption{padding:10px 12px;font-weight:700}.table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden}.table th,.table td{padding:13px;border-bottom:1px solid var(--line);text-align:left}.table th{background:#eff6ff;color:var(--navy)}.footer{background:#0c1c2e;color:#d8e3ee;padding:55px 0 20px}.footgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:30px}.footer h3{color:#fff}.footer a{display:block;margin:7px 0;color:#c8d6e5}.copy{border-top:1px solid rgba(255,255,255,.12);margin-top:30px;padding-top:18px;font-size:13px}.mobile{display:none}.pagehero{background:linear-gradient(90deg,rgba(11,61,145,.94),rgba(214,40,40,.66)),url('../assets/gallery/campus-front.jpg') center/cover;padding:90px 0;color:#fff}.pagehero h1{font-size:52px;margin:6px 0}.notice{background:#fff8df;border-left:4px solid var(--blue);padding:16px 18px;border-radius:8px}.icon{font-size:30px;color:var(--blue)}
@media(max-width:1000px){.links{display:none}.hamb{display:block}.mobile.open{display:block;background:#fff;border-top:1px solid var(--line);padding:10px 4%}.mobile a{display:block;padding:11px 0;font-weight:700}.grid,.grid4{grid-template-columns:repeat(2,1fr)}.about{grid-template-columns:1fr}.statgrid{grid-template-columns:repeat(2,1fr)}.footgrid{grid-template-columns:repeat(2,1fr)}}@media(max-width:600px){.top .wrap{flex-direction:column;gap:2px}.hero{min-height:580px}.hero h1{font-size:43px}.section{padding:58px 0}.grid,.grid4,.statgrid,.footgrid{grid-template-columns:1fr}.brand b{font-size:14px}.brand small{font-size:11px}.pagehero h1{font-size:38px}}

.red-accent{color:var(--blue)} .yellow-accent{color:var(--blue)} .red-btn{background:var(--blue);color:#fff} .yellow-strip{border-top:5px solid var(--blue)}

.two-col{display:grid;grid-template-columns:1fr 1fr;gap:35px;align-items:start}.illustration{width:100%;border-radius:16px;border:1px solid var(--line);box-shadow:var(--shadow);background:#fff}.pill{display:inline-block;padding:6px 11px;border-radius:999px;background:#eef5fb;color:var(--navy);font-weight:800;font-size:12px}.accent-line{height:5px;background:linear-gradient(90deg,var(--blue) 0 55%,var(--blue) 55% 78%,var(--blue) 78%);border-radius:4px;margin:12px 0 22px}@media(max-width:700px){.two-col{grid-template-columns:1fr}}

/* VCS reconstruction: white + blue visual system */
body{background:#fff;color:#172033}
.top{background:#0b3d91}
.header{background:#fff;border-bottom:1px solid #dbe7f5}
.links a,.links button{color:#0b3d91}
.links .cta,.btn.primary{background:#1467b8;color:#fff}
.btn.outline{border-color:#1467b8;color:#1467b8}
.pagehero{background:linear-gradient(135deg,#f7fbff,#eaf3ff);border-bottom:1px solid #dbe7f5}
.card,.banner{border-color:#dbe7f5}
.banner{background:#eaf3ff}
.stats{background:#0b3d91}
.footer{background:#082b66}
.footer a:hover{color:#fff}
.footer-branding{display:flex;align-items:center;gap:14px;margin-top:18px}
.footer-qr{width:108px;height:108px;background:#fff;padding:6px;border-radius:8px;object-fit:contain}
.designed-by{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:12px;font-size:12px}
.designed-by img{width:62px;height:auto;background:#fff;border-radius:4px;padding:2px}
.home-feature-icon{width:58px;height:58px;border-radius:14px;background:#eaf3ff;color:#0b3d91;display:grid;place-items:center;font-size:28px;font-weight:800}
@media(max-width:900px){.footer-branding{align-items:flex-start}.footer-qr{width:90px;height:90px}}
.home-hero{padding:70px 0;background:#fff}.home-hero .wrap{display:grid;grid-template-columns:1fr 1.08fr;gap:42px;align-items:center}.hero-copy h1{font-size:clamp(42px,5vw,68px);line-height:1.08;margin:10px 0 18px;color:#0b3d91}.hero-copy p{font-size:18px;max-width:650px}.hero-image img{display:block;width:100%;height:460px;object-fit:cover;border-radius:20px;box-shadow:0 18px 50px rgba(11,61,145,.15)}.section-soft{background:#f5f9ff}.grid.three{grid-template-columns:repeat(3,1fr)}@media(max-width:900px){.home-hero .wrap{grid-template-columns:1fr}.hero-image{order:-1}.hero-image img{height:300px}.grid.three{grid-template-columns:1fr}}


/* VCS SHEMFORD — Hero text colour update: navy blue */
.hero,
.hero-section,
.hero-banner,
.page-hero,
.inner-hero,
.banner,
.banner-section,
.hero-content,
.hero-overlay {
  --hero-text-color: #0b3d91;
}

.hero h1, .hero h2, .hero h3, .hero p, .hero .eyebrow,
.hero-section h1, .hero-section h2, .hero-section h3, .hero-section p, .hero-section .eyebrow,
.hero-banner h1, .hero-banner h2, .hero-banner h3, .hero-banner p, .hero-banner .eyebrow,
.page-hero h1, .page-hero h2, .page-hero h3, .page-hero p, .page-hero .eyebrow,
.inner-hero h1, .inner-hero h2, .inner-hero h3, .inner-hero p, .inner-hero .eyebrow,
.banner h1, .banner h2, .banner h3, .banner p, .banner .eyebrow,
.banner-section h1, .banner-section h2, .banner-section h3, .banner-section p, .banner-section .eyebrow,
.hero-content h1, .hero-content h2, .hero-content h3, .hero-content p, .hero-content .eyebrow {
  color: #0b3d91 !important;
}


/* Final VCS SHEMFORD hero text update: all hero copy is navy blue */
.pagehero, .pagehero * { color: #0b3d91 !important; }
.pagehero .btn, .pagehero a.btn { color: #fff !important; }

/* Admission Enquiry header button — compact single-line layout */
.links > .cta,
.links a.cta {
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px !important;
  line-height: 1.2;
  padding: 9px 12px !important;
  min-height: 38px;
  width: auto;
}

@media (max-width: 1100px) and (min-width: 901px) {
  .links { gap: 1px; }
  .links > a, .drop > button { padding: 10px 7px; font-size: 12px; }
  .links > .cta, .links a.cta { font-size: 11px !important; padding: 8px 10px !important; }
}

/* Management committee image */
.management-photo-wrap{width:100%;display:flex;justify-content:center;align-items:center;margin:0 0 32px;}
.management-photo{display:block;width:100%;max-width:1100px;height:auto;border-radius:16px;box-shadow:0 12px 35px rgba(8,45,104,.16);background:#fff;}
@media(max-width:700px){.management-photo-wrap{margin-bottom:24px}.management-photo{border-radius:10px;}}

/* Uploaded VCS photo hero system */
.pagehero{position:relative;min-height:330px;background-position:center;background-size:cover;background-repeat:no-repeat;display:flex;align-items:center;overflow:hidden;}
.pagehero::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.94) 0%,rgba(255,255,255,.78) 42%,rgba(255,255,255,.38) 100%);z-index:0;}
.pagehero>.wrap{position:relative;z-index:1;}
.pagehero h1,.pagehero p,.pagehero .eyebrow{position:relative;}
.pagehero h1{max-width:900px;}
@media(max-width:600px){.pagehero{min-height:270px;padding:58px 0;background-position:center;} .pagehero::before{background:rgba(255,255,255,.88);}}


/* =========================================================
   FINAL HERO IMAGE FIT & RESPONSIVE FRAMING
   ========================================================= */
.pagehero{
  position:relative;
  min-height:380px;
  display:flex;
  align-items:center;
  background-size:cover !important;
  background-repeat:no-repeat !important;
  background-position:center center !important;
  overflow:hidden;
}
.pagehero .wrap{position:relative;z-index:2;width:min(1180px,92%)}
.pagehero::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(8,43,102,.82),rgba(8,43,102,.34));
  z-index:1;
  pointer-events:none;
}
.pagehero h1,.pagehero h2,.pagehero h3,.pagehero p,.pagehero .eyebrow{position:relative;z-index:2}

/* Home: one campus image only, used as the hero background. */
.home-hero{
  position:relative;
  min-height:520px;
  padding:70px 0;
  display:flex;
  align-items:center;
  background-size:cover !important;
  background-repeat:no-repeat !important;
  background-position:center center !important;
  overflow:hidden;
}
.home-hero .wrap{display:block;position:relative;z-index:2}
.home-hero .hero-image{display:none !important}
.home-hero .hero-copy{max-width:760px}
.home-hero .hero-copy .eyebrow,
.home-hero .hero-copy h1,
.home-hero .hero-copy p{color:#fff !important;text-shadow:0 2px 5px rgba(0,0,0,.42)}
.home-hero .hero-copy h1{color:#fff !important}
.home-hero .hero-copy p{color:#fff !important}
.home-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(4,28,70,.86) 0%,rgba(4,28,70,.58) 43%,rgba(4,28,70,.12) 100%);
  z-index:1;
  pointer-events:none;
}

@media(max-width:900px){
  .pagehero{
    min-height:340px;
    background-position:center center !important;
  }
  .home-hero{
    min-height:500px;
    padding:58px 0;
    background-position:center center !important;
  }
  .home-hero .hero-copy{max-width:100%}
}
@media(max-width:600px){
  .pagehero{
    min-height:320px;
    padding:62px 0;
    background-position:center center !important;
  }
  .pagehero h1{font-size:36px;line-height:1.1}
  .pagehero p{font-size:15px;line-height:1.55}
  .home-hero{
    min-height:560px;
    padding:62px 0;
    background-position:center center !important;
  }
  .home-hero .hero-copy h1{font-size:43px;line-height:1.08}
  .home-hero .hero-copy p{font-size:16px;line-height:1.55}
}

/* FINAL HERO TEXT COLOUR: WHITE ON ALL PAGES */
.hero h1, .hero h2, .hero h3, .hero p, .hero .eyebrow,
.hero-section h1, .hero-section h2, .hero-section h3, .hero-section p, .hero-section .eyebrow,
.hero-banner h1, .hero-banner h2, .hero-banner h3, .hero-banner p, .hero-banner .eyebrow,
.page-hero h1, .page-hero h2, .page-hero h3, .page-hero p, .page-hero .eyebrow,
.inner-hero h1, .inner-hero h2, .inner-hero h3, .inner-hero p, .inner-hero .eyebrow,
.hero-content h1, .hero-content h2, .hero-content h3, .hero-content p, .hero-content .eyebrow,
.hero-overlay h1, .hero-overlay h2, .hero-overlay h3, .hero-overlay p, .hero-overlay .eyebrow,
.pagehero h1, .pagehero h2, .pagehero h3, .pagehero p, .pagehero .eyebrow,
.home-hero .hero-copy h1, .home-hero .hero-copy h2, .home-hero .hero-copy h3,
.home-hero .hero-copy p, .home-hero .hero-copy .eyebrow {
  color: #ffffff !important;
  text-shadow: 0 2px 5px rgba(0,0,0,.42);
}

/* Keep action-button text readable and unchanged */
.hero .btn, .hero-section .btn, .hero-banner .btn, .page-hero .btn,
.inner-hero .btn, .hero-content .btn, .hero-overlay .btn, .pagehero .btn,
.home-hero .btn { color: #fff !important; text-shadow: none; }

/* HERO IMAGE FULL-VIEW UPDATE: preserve complete source image without cropping */
.pagehero{
  min-height:clamp(360px,32.5vw,520px);
  height:auto;
  padding:90px 0;
  background-size:100% auto !important;
  background-position:center top !important;
  background-repeat:no-repeat !important;
  background-color:#082b66 !important;
}
.pagehero::before{
  background:linear-gradient(90deg,rgba(8,43,102,.76) 0%,rgba(8,43,102,.34) 48%,rgba(8,43,102,.10) 100%);
}

/* Home hero uses the full campus image at its natural aspect ratio. */
.home-hero{
  min-height:clamp(420px,45vw,720px);
  height:auto;
  background-size:100% auto !important;
  background-position:center top !important;
  background-repeat:no-repeat !important;
  background-color:#082b66 !important;
}

@media (max-width:900px){
  .pagehero{
    min-height:340px;
    padding:75px 0;
    background-size:100% auto !important;
    background-position:center top !important;
  }
  .home-hero{
    min-height:500px;
    padding:70px 0;
    background-size:100% auto !important;
    background-position:center top !important;
  }
}

@media (max-width:600px){
  /* Mobile: show the complete wide hero image first, then place the copy below it.
     This avoids destructive center-cropping of faces, buildings and other subjects. */
  .pagehero{
    min-height:0;
    padding:155px 0 42px;
    background-size:100% auto !important;
    background-position:center top !important;
    background-color:#082b66 !important;
  }
  .pagehero::before{
    background:linear-gradient(to bottom,rgba(8,43,102,.08) 0%,rgba(8,43,102,.18) 34%,rgba(8,43,102,.96) 52%,rgba(8,43,102,.99) 100%);
  }
  .pagehero .wrap{width:min(1180px,90%)}
  .pagehero h1{font-size:34px;line-height:1.1;margin:7px 0 10px}
  .pagehero p{font-size:15px;line-height:1.5;margin:0}

  .home-hero{
    min-height:0;
    padding:190px 0 55px;
    background-size:100% auto !important;
    background-position:center top !important;
  }
  .home-hero::before{
    background:linear-gradient(to bottom,rgba(4,28,70,.08) 0%,rgba(4,28,70,.18) 30%,rgba(4,28,70,.90) 48%,rgba(4,28,70,.98) 100%);
  }
}


/* Reference-style footer redesign — scoped to footer only */
.footer-reference{background:#104f98;color:#fff;padding:34px 0 0;font-size:15px;line-height:1.7}
.footer-reference-grid{display:grid;grid-template-columns:1.55fr 1fr .9fr 1.35fr;gap:42px;align-items:start}
.footer-reference h3{margin:0 0 16px;color:#fff;font-size:21px;line-height:1.2;font-weight:800}
.footer-reference p{margin:0 0 11px;color:#fff}
.footer-reference a{color:#fff}
.footer-reference a:hover{color:#ffd54a}
.footer-about p{max-width:390px}
.footer-social{display:flex;gap:10px;margin-top:18px}
.social-icon{width:40px;height:40px;border:1.5px solid rgba(255,255,255,.95);border-radius:50%;display:inline-flex!important;align-items:center;justify-content:center;color:#fff;transition:.2s ease}
.social-icon svg{width:19px;height:19px;display:block}
.social-icon:hover{background:#fff;color:#104f98;transform:translateY(-2px)}
.footer-links a{display:block;margin:0 0 10px;font-size:15px}
.footer-qr-column{text-align:center}
.footer-qr-link{display:inline-block;background:#fff;padding:8px;line-height:0}
.footer-qr-large{display:block;width:178px;height:178px;object-fit:contain}
.footer-qr-caption{font-size:12px!important;opacity:.9;margin:10px auto 0!important;max-width:190px}
.footer-contact p{margin-bottom:10px}
.footer-contact strong{font-weight:800}
.footer-bottom{border-top:1px solid rgba(255,255,255,.22);margin-top:28px;padding:12px 0 14px;display:flex;align-items:center;justify-content:center;gap:22px;position:relative;min-height:64px}
.footer-copy{font-size:13px;text-align:center}
.footer-designer{display:flex;align-items:center;gap:7px;font-size:12px;white-space:nowrap}
.footer-designer img{width:74px;height:38px;object-fit:contain;background:#fff;border-radius:4px;padding:2px}
.footer-designer strong{color:#ffd54a;font-size:12px}
.back-top{position:absolute!important;right:0;bottom:14px;font-size:11px!important;font-weight:800;writing-mode:vertical-rl;transform:rotate(180deg);opacity:.9}
@media(max-width:1000px){.footer-reference-grid{grid-template-columns:1.3fr 1fr;gap:30px}.footer-qr-column{text-align:left}.footer-qr-caption{margin-left:0!important}}
@media(max-width:600px){.footer-reference{padding-top:30px}.footer-reference-grid{grid-template-columns:1fr;gap:26px}.footer-qr-column{text-align:left}.footer-qr-large{width:150px;height:150px}.footer-bottom{flex-direction:column;gap:8px;padding-right:0}.footer-designer{justify-content:center;flex-wrap:wrap}.back-top{position:static!important;writing-mode:initial;transform:none;font-size:11px!important;margin-top:3px}}