/* v36: restore the original calligraphy photo and keep the image in a
   centered desktop frame. On phones the photo intentionally reaches both
   edges, with no cover or gradient layer sitting on top of it. */
.catch-band::before{
  display:none!important;
}

.catch-band>.catch-photo-clean{
  position:absolute!important;
  inset:0!important;
  z-index:0!important;
  display:block!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center!important;
  filter:saturate(.92)!important;
}

/* Desktop keeps enough vertical image area to show the BEVA sign at the top
   of the portrait school photo. Phones use the full image flow below. */
@media(min-width:561px){
  .catch-band{
    height:clamp(480px,68vh,720px)!important;
    min-height:480px!important;
  }
  .catch-band>.catch-photo-clean{
    object-position:center 20%!important;
  }
}

.catch-band>img:not(.catch-photo-clean){
  display:none!important;
}

/* Keep the photo as a single normal-flow image. The source HTML points at the
   clean photo directly; no CSS content replacement or overlay is needed. */
.band-calligraphy{
  height:auto!important;
  min-height:0!important;
  display:flex!important;
  justify-content:center!important;
  padding:48px 24px 72px!important;
  background:linear-gradient(180deg,#fff 0%,#f7f7f4 28%,#dce3ea 52%,#435773 78%,#0A1930 100%)!important;
  overflow:hidden!important;
}

@media(min-width:561px){
  .band-calligraphy{
    padding:40px 24px 56px!important;
  }
  .band-calligraphy>.band-img{
    max-width:min(100%,840px)!important;
    max-height:none!important;
  }
}

.band-calligraphy::before,
.band-calligraphy::after{
  content:none!important;
  display:none!important;
}

.band-calligraphy>.band-img{
  position:relative!important;
  inset:auto!important;
  display:block!important;
  width:auto!important;
  max-width:min(100%,720px)!important;
  height:auto!important;
  max-height:680px!important;
  object-fit:contain!important;
  object-position:center!important;
  filter:none!important;
  box-shadow:none!important;
}

.catch-band h2 .catch-title-line{
  display:block!important;
}

@media(max-width:560px){
  .catch-band{
    display:block!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    margin-left:0!important;
    background:#0A1930!important;
    overflow:hidden!important;
  }

  .catch-band>.catch-photo-clean{
    position:relative!important;
    inset:auto!important;
    width:100%!important;
    height:auto!important;
    object-fit:contain!important;
  }

  .catch-band>div[style*="background:linear-gradient"]{
    position:absolute!important;
    inset:0!important;
    z-index:1!important;
  }

  .catch-band>.in{
    position:absolute!important;
    inset:0!important;
    z-index:2!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    padding:0 24px!important;
  }

  .band-calligraphy{
    display:block!important;
    width:100%!important;
    margin-left:0!important;
    margin-right:0!important;
    padding:0!important;
    background:#0A1930!important;
  }

  .band-calligraphy>.band-img{
    width:100%!important;
    max-width:none!important;
    max-height:none!important;
    margin:0!important;
  }

  .catch-band h2{
    font-size:clamp(24px,7.4vw,32px)!important;
    line-height:1.55!important;
    letter-spacing:0!important;
    word-break:keep-all!important;
  }

  .catch-band h2 .catch-title-line{
    white-space:nowrap!important;
  }
}