/* Full logo artwork bounds in the original 3375 × 4219 PNG:
   (586,1008)–(2789,3211). Map a square with 50px clear padding around
   that artwork. Only transparent source padding extends outside the wrapper. */
.logo-stage{isolation:isolate;overflow:visible}
.logo-window{position:absolute;inset:0;overflow:visible;mask:none}
.logo-window img{width:146.548%;height:183.196%;left:-23.274%;top:-41.598%;object-fit:contain;transform:none;mask:none}
.decorative-ring{inset:-6%;width:112%;height:112%;overflow:visible;z-index:-1}

@media(min-width:701px){
  .hero{--hero-height:clamp(660px,calc(100svh - 96px),900px);height:var(--hero-height);min-height:var(--hero-height);max-height:none}
  .hero-stage{grid-template-columns:1fr 1.65fr 1fr;position:static}
  .hero-centre{grid-column:2;transform:translateX(clamp(100px,calc(300px - 13vw),155px))}
  .logo-stage{width:min(26vw,calc(var(--hero-height) * .47),380px);margin-top:12px;margin-bottom:25px}
  .ritesh{grid-column:3}
  .devendra{position:absolute;left:30px;bottom:0;height:80%;width:auto;aspect-ratio:619 / 670;margin:0;z-index:1}
  .devendra .portrait-crop{height:100%;width:100%;max-height:none;aspect-ratio:auto;overflow:hidden;mask-image:linear-gradient(to bottom,#000 0%,#000 85%,transparent 100%)}
  .devendra .portrait-crop img{width:100%;height:auto;object-fit:contain;object-position:center top}
  .devendra figcaption{position:absolute;bottom:17px;left:24px;margin:0;font:13px/1.4 var(--sans);color:var(--ivory);padding:5px 9px;background:#2d102570;text-shadow:0 1px 4px #210719}
}

/* At tablet/laptop widths, reserve three non-overlapping visual regions.
   The portrait still meets the hero floor; its size yields to available width. */
@media(min-width:701px) and (max-width:1100px){
  .devendra{left:24px;height:75%}
  .hero-centre{transform:translateX(130px)}
  .logo-stage{width:min(24vw,270px)}
}
@media(min-width:701px) and (max-width:900px){
  .devendra{height:67%;left:20px}
  .hero-centre{transform:translateX(100px)}
  .logo-stage{width:23vw}
  .hero-subtitle{font-size:16px}
  .hero-subtitle em{font-size:18px}
  .hero-date{font-size:22px}
  .hero-centre .button{padding:15px 20px;gap:20px}
  .hero-note{max-width:200px;margin:16px auto 0}
}
@media(min-width:701px) and (max-height:820px){
  .hero-kicker{padding-top:26px}
  .logo-stage{width:min(26vw,calc(var(--hero-height) * .43),380px);margin-top:10px}
}
@media(min-width:701px) and (max-width:1100px) and (max-height:820px){
  .logo-stage{width:min(24vw,calc(var(--hero-height) * .43),270px)}
}
@media(max-width:700px){
  /* The portrait is a sibling of the content grid so desktop absolute
     positioning is always relative to .hero. On phones use an explicit
     two-column portrait row after the central content instead. */
  .hero{display:grid;grid-template-columns:1fr 1fr;padding-bottom:65px}
  .hero-kicker{grid-column:1 / -1;grid-row:1;padding-inline:80px;line-height:1.8}
  .hero-stage{display:contents}
  .hero-centre{grid-column:1 / -1;grid-row:2;padding:30px 25px 0;transform:none}
  .logo-stage{width:min(72vw,350px);margin-bottom:25px}
  .devendra{position:relative;grid-column:1;grid-row:3;margin:30px 0 0 25px;align-self:end;left:auto;bottom:auto;height:auto;width:auto;aspect-ratio:auto}
  .devendra .portrait-crop{aspect-ratio:619 / 670;height:auto;max-height:none;mask-image:linear-gradient(#000 80%,transparent)}
  .devendra .portrait-crop img{width:100%;height:auto;object-fit:contain;object-position:center top}
  .devendra figcaption{position:static;font-size:11px;margin:8px 0 0;text-align:center}
  .ritesh{grid-column:2;grid-row:3;margin:30px 25px 0 15px}
}