/* Ethos page specifics: hero, card grid, lists */

/* ===== Hero (white titles) ===== */
.ethos-hero{
  position:relative; isolation:isolate; overflow:hidden;
  padding: clamp(4rem, 12vw, 9rem) 0;
  background:
    radial-gradient(1000px 500px at 15% 10%, rgba(122,62,240,.25), transparent 60%),
    radial-gradient(900px 500px at 80% 0%, rgba(255,43,179,.20), transparent 60%),
    var(--gradient-brand);
  color:#fff; /* base text on hero */
}
.ethos-hero-overlay{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.06), rgba(0,0,0,0)); pointer-events:none; }
.ethos-hero-inner{ position:relative; z-index:1; text-align:center; }
.ethos-hero-title{ color:#ffffff; font-size: clamp(2rem, 4.5vw, 3.2rem); text-shadow:0 10px 30px rgba(0,0,0,.25); }
.ethos-hero-subtitle{ color:#f5f7ff; margin-top:.6rem; font-size: clamp(1rem, 2.2vw, 1.2rem); opacity:.95; }

/* ===== Content ===== */
.ethos-content{ background:
  radial-gradient(900px 500px at 20% 20%, #f5f1ff 0%, transparent 70%),
  radial-gradient(900px 500px at 80% 0%, #ffe9f7 0%, transparent 60%);
}
.ethos-grid{
  display:grid; grid-template-columns: repeat(2, 1fr); gap:1.1rem;
}
.ethos-card{
  background:#fff; border:1px solid #eef; border-radius:var(--radius-xl);
  padding: clamp(1rem, 3vw, 1.4rem); box-shadow: var(--shadow);
  animation: fadeUp .6s ease both .02s;
}
.ethos-heading{ color:var(--oxblood); margin:.1rem 0 .45rem; }
.ethos-list{ margin:.35rem 0 0 1.1rem; padding:0; }
.ethos-list li{ margin:.25rem 0; }

/* Holistic grid inside a card */
.holistic-grid{ display:grid; grid-template-columns: repeat(2, 1fr); gap:.8rem; margin-top:.4rem; }
.holistic-item{
  background:#fbf9ff; border:1px solid #eee7ff; border-radius:14px; padding:.65rem .7rem;
}
.holistic-item h3{ margin:.1rem 0 .2rem; font-size:1.02rem; color:var(--navy-900); }
.holistic-item p{ margin:0; color:var(--muted); }

/* ===== Responsive ===== */
@media (max-width: 1024px){
  .ethos-grid{ grid-template-columns: 1fr; }
}
@media (max-width: 560px){
  .holistic-grid{ grid-template-columns: 1fr; }
}
