/* ============================================================
   Bench Ready - home page stylesheet
   Loaded ONLY by index.html, always AFTER global.css.

   The original index.html carried a slightly extended copy of the
   shared stylesheet. Rather than duplicate ~20 KB of identical CSS,
   global.css holds the shared baseline and this file holds exactly
   the rules that the home page adds or overrides. The computed
   result is identical to the original single-file index.html.
   ============================================================ */

/* ---------- hero: extra warm wash + the cut-out photograph ---------- */
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(760px 380px at 8% -10%,rgba(255,222,89,.17),transparent 66%),
    radial-gradient(560px 460px at 78% 58%,rgba(255,222,89,.09),transparent 68%),
    radial-gradient(620px 340px at 98% 108%,rgba(120,158,214,.16),transparent 70%),
    repeating-linear-gradient(90deg,transparent 0 78px,rgba(255,255,255,.024) 78px 79px);
}
.hero-mark{opacity:.11;z-index:0}
.hero .wrap{z-index:2}
.hero-photo{
  position:absolute;right:1.5%;bottom:0;z-index:1;
  height:min(88%,600px);width:auto;pointer-events:none;
  filter:drop-shadow(0 30px 54px rgba(0,0,0,.5));
  -webkit-mask-image:linear-gradient(180deg,#000 56%,rgba(0,0,0,.55) 84%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 56%,rgba(0,0,0,.55) 84%,transparent 100%);
}

/* ---------- programme cards: photo header ---------- */
.card:hover{transform:translateY(-5px);background:var(--bg-3);box-shadow:0 22px 48px rgba(0,0,0,.34)}
.card-media{
  position:relative;margin:-32px -28px 24px;height:252px;overflow:hidden;
  border-bottom:1px solid var(--line-soft);
  background:
    radial-gradient(130% 96% at 50% 104%,rgba(255,222,89,.20),transparent 60%),
    linear-gradient(180deg,#414C5B 0%,#39424F 52%,var(--bg-3) 100%);
}
.card-media img{
  position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  height:87%;width:auto;max-width:none;
  filter:drop-shadow(0 16px 26px rgba(0,0,0,.42));
  transition:transform .55s var(--ease);
}
.card:hover .card-media img{transform:translateX(-50%) scale(1.045)}
.card-media::after{content:"";position:absolute;left:0;right:0;bottom:0;height:64px;background:linear-gradient(180deg,transparent,var(--bg-3));pointer-events:none}
.card .card-fig{position:absolute;right:-18px;top:14px;width:150px;color:var(--gold);opacity:.16;pointer-events:none;transition:opacity .3s var(--ease),transform .4s var(--ease)}
.card:hover .card-fig{opacity:.26;transform:translateY(4px) rotate(-3deg)}

/* ---------- boarding-school scene ---------- */
.scene-frame{position:relative}

/* ---------- contact band: cut-out photograph ---------- */
#contact{position:relative;overflow:hidden}
#contact .wrap{position:relative;z-index:1}
.contact-photo{
  position:absolute;right:3%;bottom:0;z-index:0;
  height:min(102%,600px);width:auto;pointer-events:none;
  filter:drop-shadow(0 26px 44px rgba(0,0,0,.5));
  -webkit-mask-image:linear-gradient(180deg,#000 54%,rgba(0,0,0,.5) 82%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 54%,rgba(0,0,0,.5) 82%,transparent 100%);
}

/* ---------- responsive ---------- */
@media (max-width:1180px){
  .hero-photo{right:0;height:min(78%,500px);opacity:.92}
  .hero .hero-sub,.hero .hero-meta{max-width:600px}
  .contact-photo{display:none}
}
@media (max-width:980px){
  .hero-photo{display:none}
}
@media (min-width:1181px){
  #contact .contact-grid{max-width:740px}
  #contact .sec-head{max-width:56ch}
}
/* re-stated after global.css so the shared mobile rules still win on the
   two selectors this file overrides above */
@media (max-width:900px){
  .hero-mark{width:min(300px,56vw);opacity:.07;right:-16%}
}
@media (max-width:760px){
  .card .card-fig{width:118px}
  .card-media{height:224px}
}