.loe-purpose__visual {
  background:
    linear-gradient(90deg, transparent 65%, #0c0c0b),
    url("assets/brochure/about-photo.png") center / cover;
}

.loe-about .loe-split > div:first-child {
  position: relative;
  isolation: isolate;
}

.loe-about .loe-split > div:first-child > * {
  position: relative;
  z-index: 1;
}

.loe-about .loe-split > div:first-child::after {
  content: "";
  position: absolute;
  width: min(25vw, 280px);
  aspect-ratio: 973 / 1107;
  left: 50%;
  top: 175px;
  right: auto;
  bottom: auto;
  transform: translateX(-50%);
  z-index: 0;
  opacity: .15;
  background: url("assets/loe-logo.png") center / contain no-repeat;
  pointer-events: none;
}

.loe-vision__image {
  height: clamp(360px, 46vw, 580px);
  min-height: 0;
  background:
    linear-gradient(90deg, rgba(12, 12, 11, .04), rgba(12, 12, 11, .18) 48%, #0c0c0b 100%),
    url("assets/vision-wide.png") 32% center / cover;
}

.loe-mission__image {
  background:
    linear-gradient(90deg, transparent 67%, #11110f),
    url("assets/brochure/mission-photo.png") center / cover;
}

/* Hero fills the visible viewport without relying on a fixed desktop height. */
.loe-hero {
  height: 100vh;
  height: 100svh;
  min-height: 0;
}

.loe-hero__content {
  padding-top: clamp(145px, 28svh, 260px);
}

.loe-hero__content h1 {
  max-width: min(700px, 46vw);
  font-size: clamp(3.9rem, 5.5vw, 6.4rem);
  line-height: .85;
}

.loe-hero__image {
  /* Preserve the original banner image while keeping its full composition visible. */
  background-size: auto 100%;
  background-position: right 5vw center;
  opacity: 1;
  filter: brightness(1.2) saturate(.95) contrast(1.01);
}

.loe-hero__veil {
  background:
    linear-gradient(0deg, rgba(13, 13, 11, .68), transparent 46%),
    linear-gradient(90deg, rgba(13, 13, 11, .72) 0%, rgba(13, 13, 11, .26) 56%, transparent 78%);
}

/* Desktop hero framing follows the supplied reference composition. */
@media (min-width: 801px) {
  .loe-hero__image {
    background-size: cover;
    background-position: 49% 35%;
    opacity: .72;
    filter: saturate(.83);
  }
  .loe-hero__veil {
    background:
      linear-gradient(0deg, #0d0d0b, transparent 35%),
      linear-gradient(90deg, #0d0d0bbb 0%, transparent 68%);
  }
  .loe-hero__content h1 {
    max-width: none;
    font-size: clamp(4.4rem, 8.5vw, 8.6rem);
    line-height: .8;
  }
}

/* Prevent horizontal drift and keep visual panels stable across browsers. */
html, body { max-width: 100%; overflow-x: clip; }
.loe-site *, .loe-site *::before, .loe-site *::after { box-sizing: border-box; }
.loe-nav { width: 100%; max-width: 100%; }
.loe-hero, .loe-purpose, .loe-mission, .loe-vision, .loe-events, .loe-team, .loe-contact { overflow: hidden; }
.loe-purpose__visual, .loe-vision__image, .loe-mission__image,
.loe-event, .loe-avatar { background-repeat: no-repeat; background-size: cover; }

@media (max-width: 1100px) {
  .loe-nav { gap: 18px; }
  .loe-links { gap: 16px; }
  .loe-cta--nav { padding: 12px 14px; }
}

@media (max-width: 800px) {
  .loe-hero {
    height: 100vh;
    height: 100svh;
    min-height: 0;
  }

  .loe-hero__content {
    padding-top: clamp(115px, 22svh, 180px);
  }

  .loe-hero__content h1 { max-width: 100%; }

  .loe-hero__content > p:not(.loe-kicker) {
    margin: clamp(15px, 3svh, 27px) 0;
  }

  .loe-hero__line {
    bottom: max(16px, env(safe-area-inset-bottom));
  }
  .loe-hero__image {
    background-size: auto 100%;
    background-position: left center;
  }
  .loe-about .loe-split > div:first-child::after {
    width: 190px;
    left: 50%;
    top: 158px;
    right: auto;
    bottom: auto;
    opacity: .13;
  }
  .loe-purpose__visual, .loe-vision__image, .loe-mission__image {
    min-height: 320px;
    background-position: center;
  }
  .loe-vision__image {
    height: clamp(280px, 68vw, 380px);
    min-height: 0;
    background-position: 36% center;
  }
  .loe-event { background-position: center; }
}

/* Events: editorial card layout, with all event copy rendered as live HTML. */
.loe-events {
  background: #020916;
  color: #f7f5ee;
}

.loe-events .loe-kicker { color: #e6c247; }
.loe-events h2 { font-family: Montserrat, Arial, sans-serif; font-size: clamp(2rem, 4.1vw, 3.35rem); letter-spacing: .015em; line-height: 1; }
.loe-events h2 em { color: #e6c247; font-style: normal; }
.loe-events .loe-gold-rule { width: 175px; height: 1px; background: #b89431; margin-top: 28px; }
.loe-events__intro { max-width: 680px; color: #aeb5c2; font-size: 16px; line-height: 1.6; letter-spacing: 0; margin: 28px 0 62px; }

.loe-event-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border: 1px solid rgba(213, 173, 58, .42);
}

.loe-event {
  display: block;
  height: auto;
  min-width: 0;
  padding: 0;
  overflow: hidden;
  color: #f7f5ee;
  background: #091a42;
  border-right: 1px solid rgba(213, 173, 58, .25);
}

.loe-event:last-child { border-right: 0; }
.loe-event:before { display: none; }
.loe-event__image { height: 250px; background: center / cover no-repeat; }
.loe-event--awards .loe-event__image { background-image: url("assets/event-awards.png"); }
.loe-event--cricket .loe-event__image { background-image: url("assets/event-cricket.png"); }
.loe-event--fashion .loe-event__image { background-image: url("assets/event-fashion.png"); }

.loe-event__body { min-height: 322px; padding: 29px 30px 27px; }
.loe-event__type { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; color: #e6c247; font: 700 10px/1 Montserrat, Arial, sans-serif; letter-spacing: .18em; }
.loe-event__type b { display: inline-grid; width: 35px; height: 35px; place-items: center; border: 1px solid rgba(229, 194, 71, .46); font-size: 17px; font-weight: 400; letter-spacing: 0; }
.loe-event h3 { margin: 0 0 8px; color: #f7f5ee; font: 500 24px/1.08 Montserrat, Arial, sans-serif; letter-spacing: -.04em; }
.loe-event h4 { min-height: 24px; margin: 0; color: #d2ac35; font: 700 10px/1.35 Montserrat, Arial, sans-serif; letter-spacing: .07em; }
.loe-event__rule { width: 55px; height: 2px; margin: 17px 0 15px; background: #be9631; }
.loe-event__body > p:not(.loe-event__type) { min-height: 52px; margin: 0; color: #b8c0cd; font-size: 12px; line-height: 1.5; }
.loe-event ul { display: grid; gap: 8px; margin: 20px 0 0; padding: 0; list-style: none; color: #99a3b4; font-size: 11px; }
.loe-event li { padding-left: 19px; position: relative; }
.loe-event li::before { position: absolute; left: 0; color: #d2ac35; content: "◇"; }

@media (max-width: 800px) {
  .loe-events__intro { margin-bottom: 38px; font-size: 14px; }
  .loe-event-grid { grid-template-columns: 1fr; }
  .loe-event { border-right: 0; border-bottom: 1px solid rgba(213, 173, 58, .25); }
  .loe-event:last-child { border-bottom: 0; }
  .loe-event__image { height: clamp(190px, 55vw, 270px); }
  .loe-event__body { min-height: 0; padding: 25px 24px 28px; }
  .loe-event__body > p:not(.loe-event__type) { min-height: 0; }
}

/* Individual team portraits remain separate from the brochure collage. */
.loe-avatar--one {
  background-image: url("assets/team-sivaprasad.png");
  background-position: center center;
}

.loe-avatar--two {
  background-image: url("assets/team-nishan.png");
  background-position: center center;
}

.loe-avatar--three {
  background-image: url("assets/team-abhildev.png");
  background-position: center center;
}

.loe-avatar--four {
  background-image: url("assets/team-ragesh.png");
  background-position: center center;
}

/* Vision, philosophy, and mission now share one cohesive section. */
.loe-vision__grid { align-items: stretch; }
.loe-vision__image {
  height: auto;
  min-height: 680px;
}
.loe-vision__content { display: grid; align-content: center; }
.loe-vision__content .loe-panel { margin: 9px 0; }
.loe-panel--mission h3 {
  margin: 0 0 15px;
  color: #f7f5ee;
  font: 500 clamp(1.7rem, 2.7vw, 2.35rem)/.95 "Cormorant Garamond", Georgia, serif;
}
.loe-panel--mission h3 em { color: var(--loe-gold); font-style: italic; }
.loe-panel--mission ul { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.loe-panel--mission li { position: relative; padding-left: 14px; color: #d4d2ca; font-size: 11px; line-height: 1.38; }
.loe-panel--mission li::before { content: "•"; position: absolute; left: 0; color: var(--loe-gold); }

@media (max-width: 800px) {
  .loe-vision__image { height: clamp(280px, 68vw, 380px); min-height: 0; }
  .loe-vision__content .loe-panel { margin: 10px 0; }
}

/* Keep split sections readable on tablets instead of compressing two columns. */
.loe-purpose {
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
}
.loe-purpose__visual { min-height: clamp(460px, 48vw, 660px); }
.loe-purpose__content {
  padding: clamp(52px, 6.5vw, 100px) clamp(28px, 7vw, 130px) clamp(52px, 6.5vw, 100px) clamp(28px, 5vw, 92px);
  font-size: clamp(13px, 1.05vw, 15px);
}

@media (max-width: 1024px) {
  .loe-wrap { width: min(1120px, calc(100% - 48px)); }
  .loe-purpose { grid-template-columns: 1fr; }
  .loe-purpose__visual { min-height: clamp(310px, 58vw, 480px); background-position: center; }
  .loe-purpose__content { padding: clamp(44px, 7vw, 72px) max(24px, 8vw); }
  .loe-split { gap: clamp(38px, 7vw, 72px); }
  .loe-vision__grid { gap: clamp(34px, 6vw, 60px); }
}

@media (max-width: 560px) {
  .loe-wrap { width: min(1120px, calc(100% - 36px)); }
  .loe-hero__content { padding-top: clamp(132px, 19svh, 164px); }
  .loe-hero__content h1 {
    max-width: 100%;
    font-size: clamp(2.3rem, 10.6vw, 3.15rem);
    line-height: .86;
    letter-spacing: -.048em;
  }
  .loe-hero__content > p:not(.loe-kicker) { font-size: 10px; line-height: 1.6; letter-spacing: .1em; }
  .loe-purpose__visual { min-height: 280px; }
  .loe-purpose__content { padding: 42px 24px; }
  .loe-purpose__content p { margin-bottom: 19px; }
}

/* A consistent type scale keeps every section heading readable on narrow screens. */
.loe-site h1, .loe-site h2, .loe-site h3 { text-wrap: balance; }

@media (max-width: 800px) {
  .loe-site h1 {
    font-size: clamp(3.05rem, 8vw, 4.35rem);
    line-height: .84;
  }
  .loe-site h2 {
    font-size: clamp(2.65rem, 7.4vw, 3.8rem);
    line-height: .88;
  }
  .loe-panel h2 { font-size: clamp(2.4rem, 7vw, 3.2rem); }
  .loe-panel--mission h3 { font-size: clamp(1.7rem, 5.3vw, 2.15rem); }
}

@media (max-width: 560px) {
  .loe-site h1 { font-size: clamp(2.3rem, 10.6vw, 3.15rem); }
  .loe-site h2 { font-size: clamp(2.2rem, 9.3vw, 2.85rem); }
  .loe-panel h2 { font-size: clamp(2.1rem, 9vw, 2.55rem); }
  .loe-panel--mission h3 { font-size: clamp(1.55rem, 7vw, 1.9rem); }
  .loe-events h2 { font-size: clamp(2rem, 9.2vw, 2.45rem); }
}

/* Refined motion: entrance reveals, depth in the hero, and tactile cards. */
.motion-ready .loe-hero__content > * {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .75s ease, transform .75s cubic-bezier(.2,.7,.2,1);
}
.motion-ready .loe-hero__content.is-animated > * { opacity: 1; transform: translateY(0); }
.motion-ready .loe-hero__content > :nth-child(1) { transition-delay: 80ms; }
.motion-ready .loe-hero__content > :nth-child(2) { transition-delay: 170ms; }
.motion-ready .loe-hero__content > :nth-child(3) { transition-delay: 270ms; }
.motion-ready .loe-hero__content > :nth-child(4) { transition-delay: 370ms; }

.loe-hero__image { animation: loe-hero-drift 16s ease-in-out infinite alternate; }
@keyframes loe-hero-drift { from { transform: scale(1); } to { transform: scale(1.025); } }

.loe-hero::after {
  content: "";
  position: absolute;
  inset: -30%;
  z-index: 0;
  pointer-events: none;
  opacity: .28;
  background: radial-gradient(ellipse at center, rgba(242, 205, 83, .2), transparent 36%);
  animation: loe-hero-light 12s ease-in-out infinite alternate;
}
@keyframes loe-hero-light {
  from { transform: translate3d(-18%, -7%, 0) scale(.85); }
  to { transform: translate3d(18%, 9%, 0) scale(1.18); }
}

.loe-hero__content h1 em {
  animation: loe-gold-glow 4.5s ease-in-out infinite;
}
@keyframes loe-gold-glow {
  0%, 100% { text-shadow: 0 0 0 rgba(243, 221, 89, 0); }
  50% { text-shadow: 0 0 24px rgba(243, 221, 89, .25); }
}

.loe-hero .loe-cta { animation: loe-cta-breathe 3.2s ease-in-out infinite 1.1s; }
@keyframes loe-cta-breathe {
  0%, 100% { box-shadow: 0 0 0 rgba(243, 221, 89, 0); }
  50% { box-shadow: 0 0 22px rgba(243, 221, 89, .22); }
}

.loe-hero__line { animation: loe-line-glow 5s ease-in-out infinite; }
@keyframes loe-line-glow { 50% { color: #f3dd59; opacity: .78; } }

.motion-ready .loe-reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .7s ease var(--reveal-delay, 0ms), transform .7s cubic-bezier(.2,.7,.2,1) var(--reveal-delay, 0ms);
}
.motion-ready .loe-reveal.is-visible { opacity: 1; transform: translateY(0); }

.loe-value-grid article, .loe-panel, .loe-event, .loe-team__people article, .loe-cta { transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease; }
@media (hover: hover) {
  .loe-value-grid article:hover, .loe-panel:hover, .loe-event:hover, .loe-team__people article:hover { transform: translateY(-7px); }
  .loe-panel:hover { border-color: rgba(233, 196, 76, .72); box-shadow: 0 16px 45px rgba(0, 0, 0, .2); }
  .loe-event:hover { box-shadow: 0 18px 40px rgba(0, 0, 0, .28); }
  .loe-event:hover .loe-event__image { transform: scale(1.045); }
  .loe-cta:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(226, 191, 55, .2); }
}
.loe-event__image { transition: transform .55s ease; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}

/* Vision panels use one consistent editorial type system. */
.loe-vision .loe-panel { font-family: Montserrat, Arial, sans-serif; }
.loe-vision .loe-panel .loe-kicker {
  margin-bottom: 15px;
  font-family: Montserrat, Arial, sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .2em;
}
.loe-vision .loe-panel h2,
.loe-vision .loe-panel--mission h3 {
  margin-bottom: 18px;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 500;
  letter-spacing: -.04em;
}
.loe-vision .loe-panel > p:not(.loe-kicker),
.loe-vision .loe-panel--mission li {
  color: #d4d2ca;
  font-family: Montserrat, Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.65;
}
.loe-vision .loe-panel .loe-panel__quote {
  margin: 0 0 18px;
  color: #f0eee7;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(1.35rem, 2.2vw, 1.7rem);
  font-weight: 500;
  line-height: 1.2;
}
.loe-vision .loe-panel--mission ul { gap: 9px; }
.loe-vision .loe-panel--mission li { padding-left: 16px; }

@media (max-width: 560px) {
  .loe-vision .loe-panel { padding: 26px 24px; }
  .loe-vision .loe-panel h2,
  .loe-vision .loe-panel--mission h3 { margin-bottom: 16px; }
  .loe-vision .loe-panel > p:not(.loe-kicker),
  .loe-vision .loe-panel--mission li { font-size: 14px; line-height: 1.6; }
  .loe-vision .loe-panel .loe-panel__quote { font-size: 1.45rem; line-height: 1.2; }
}