/* =========================================================
   Trupti Agarwal – Portfolio
   ========================================================= */

:root {
  --brown-900: #2a1915;
  --brown-800: #33201b;
  --brown-glow: rgba(140, 80, 50, 0.35);
  --cream: #faf5ef;
  --cream-border: #ecd9c6;
  --gold: #e3b98a;
  --peach: #dba68e;
  --accent: #e0662c;
  --text-light: #f3ebe4;
  --text-muted-light: #cfc2b8;
  --text-dark: #1d1715;

  --font-serif: "Libre Baskerville", Georgia, serif;
  --font-sans: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-brand: "Yatra One", var(--font-serif);
  --font-deva: "Palanquin", sans-serif;
}

html { scroll-behavior: smooth; }

/* Desktop scales proportionally with the viewport, like the design:
   1rem = 1rem at 76.875rem wide, growing/shrinking with the window. */
@media (min-width: 1200px) {
  html { font-size: min(1.3008vw, 26px); }
  .container {
    max-width: none;
    padding-left: 4rem;
    padding-right: 4rem;
  }
}

body {
  font-family: var(--font-sans);
  color: var(--text-dark);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

/* ---------------- Header ---------------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 1030;
  padding: .85rem 0;
  transition: background-color .35s ease, padding .35s ease, box-shadow .35s ease;
}
.site-header.scrolled {
  background: rgba(42, 25, 21, .96);
  padding: .5rem 0;
  box-shadow: 0 0.375rem 1.5rem rgba(0,0,0,.25);
}

.brand-logo {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 1.75rem;
  line-height: 1;
  color: #fff !important;
  letter-spacing: 0;
  padding: .35rem 0;
}
.brand-logo span { color: var(--gold); }

.site-header .nav-link {
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--text-light) !important;
  padding: .5rem .625rem !important;
  position: relative;
}
.site-header .nav-link::after {
  content: "";
  position: absolute;
  left: .625rem; right: .625rem; bottom: .2rem;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s ease;
}
.site-header .nav-link:hover::after,
.site-header .nav-link.active::after { transform: scaleX(1); }

.btn-touch {
  border-radius: 0;
  border-color: rgba(255,255,255,.65);
  font-weight: 700;
  font-size: .875rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .45rem 1.2rem;
}
.btn-touch:hover { background: var(--gold); border-color: var(--gold); color: var(--brown-900); }

.navbar-toggler { border-color: rgba(255,255,255,.4); }
.navbar-toggler:focus { box-shadow: none; }

@media (max-width: 991.98px) {
  .site-header .navbar-collapse {
    background: var(--brown-900);
    margin-top: .75rem;
    padding: 1rem;
  }
  .btn-touch { margin-top: .75rem; }
}

/* ---------------- Hero ---------------- */
.hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 0% 0%, rgba(150, 90, 55, .45), transparent 22%),
    radial-gradient(circle at 42% 78%, var(--brown-glow), transparent 18%),
    var(--brown-900);
  color: var(--text-light);
  padding: 8.5rem 0 3.2rem;
}

.hero-eyebrow {
  font-size: .875rem;
  font-weight: 500;
  letter-spacing: .235em;
  text-transform: uppercase;
  line-height: 1.65;
  max-width: 34rem;
  margin-bottom: .8rem;
}

.hero-title {
  font-family: var(--font-serif);
  font-size: clamp(2.4rem, 5vw, 3.75rem);
  font-weight: 700;
  line-height: 1.2;
  color: #fff;
  margin-bottom: .5rem;
}
/* orange dot over the "i" in "in" */
.dot-i { position: relative; }
.dot-i::before {
  content: "";
  position: absolute;
  top: .08em;
  left: 50%;
  width: .17em;
  height: .17em;
  border-radius: 50%;
  background: var(--accent);
  transform: translateX(-50%);
}

.hero-tagline {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.4rem, 2.7vw, 2.08rem);
  line-height: 1.25;
  color: var(--gold);
  margin-bottom: 2.05rem;
}

.hero-sign { display: flex; gap: 1rem; align-items: flex-start; }
.sign-line {
  display: inline-block;
  width: 1.75rem;
  height: 1px;
  background: var(--gold);
  margin-top: 1.65rem;
  flex-shrink: 0;
}
.sign-name {
  font-family: var(--font-serif);
  font-size: 1.125rem;
  color: #fff;
  margin: 0;
}
.sign-role { color: var(--gold); font-size: 1rem; margin: 0; }

/* ---------------- Photo frames ---------------- */
.photo-frame {
  position: relative;
  padding: 0.875rem;
  max-width: 26.75rem;
}
.photo-frame img {
  display: block;
  width: 100%;
  aspect-ratio: 400 / 501;
  object-fit: cover;
}
.photo-frame--dark { border: 1px solid rgba(227, 185, 138, .55); }
.photo-frame--dark img { background: #4a332b; }

.photo-frame--light {
  border: 1px solid var(--cream-border);
  padding: 0.625rem;
  max-width: 20.5rem;
}
.photo-frame--light img { aspect-ratio: 307 / 384; background: #eadccd; }

/* Placeholder state when an image file is missing */
.img-missing { background: #eadccd; }

/* ---------------- About ---------------- */
.about {
  position: relative;
  padding: 4rem 0 2.25rem;
  background: var(--cream);
}

.about-drishti {
  position: absolute;
  top: -3.0625rem;
  right: 2.25rem;
  width: clamp(7.5rem, 16.7vw, 12.8125rem);
  height: auto;
  pointer-events: none;
  user-select: none;
  z-index: 1;
}

.section-title {
  font-family: var(--font-serif);
  font-size: clamp(1.9rem, 3vw, 2.3rem);
  font-weight: 700;
  line-height: 1.3;
  color: var(--text-dark);
  margin: -.3rem 0 1.15rem;
  position: relative;
  z-index: 2;
}

.about-copy p {
  font-size: .83rem;
  line-height: 1.32;
  margin-bottom: 1rem;
}
@media (min-width: 992px) {
  .about-text { padding-left: 2.2rem; }
  .hero .photo-frame { margin-right: 0.75rem; }
}

.school-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 1.5rem 2.4rem;
  margin-top: 1.75rem;
  margin-bottom: 0;
}
.school-logos li { flex: 0 0 auto; }
.school-logos img {
  display: block;
  height: 6.875rem;
  width: auto;
}
@media (max-width: 575.98px) {
  .school-logos { gap: 1rem; flex-wrap: nowrap; justify-content: space-between; }
  .school-logos img { height: 4.4rem; }
}

/* ================= Motion system ================= */
:root {
  --ease-out: cubic-bezier(.22, 1, .36, 1);     /* soft, premium deceleration */
  --ease-io: cubic-bezier(.65, 0, .35, 1);
}

/* Lenis smooth scrolling */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* Generic reveal: fade + rise (stagger delay set from JS via --d) */
.js .reveal {
  opacity: 0;
  transform: translate3d(0, 2.5rem, 0);
  transition:
    opacity 1.1s var(--ease-out) var(--d, 0s),
    transform 1.2s var(--ease-out) var(--d, 0s);
}
.js .reveal.is-visible { opacity: 1; transform: none; }

/* Photos: frame fades in, picture unveils upward and settles from a slight zoom */
.js .photo-frame.reveal { transform: translate3d(0, 1.5rem, 0); }
.js .photo-frame.reveal.is-visible { transform: none; }
.js .photo-frame.reveal img,
.js .hero .photo-frame img {
  clip-path: inset(100% 0 0 0);
  transform: scale(1.14);
  transition:
    clip-path 1.4s var(--ease-io) calc(var(--d, 0s) + .15s),
    transform 1.8s var(--ease-out) calc(var(--d, 0s) + .15s);
}
.js .photo-frame.reveal.is-visible img,
.js.is-loaded .hero .photo-frame img { clip-path: inset(0 0 0 0); transform: scale(1); }

/* School cards: picture unveils (no zoom, so the hover zoom still works) */
.js .school-card.reveal .school-card__img img {
  clip-path: inset(100% 0 0 0);
  transition: clip-path 1.3s var(--ease-io) calc(var(--d, 0s) + .2s), transform .6s ease;
}
.js .school-card.reveal.is-visible .school-card__img img { clip-path: inset(0 0 0 0); }

/* Lists and stat groups: the group stays put, its items rise one after another */
.js .feature-points.reveal,
.js .school-logos.reveal { opacity: 1; transform: none; }
.js .feature-points.reveal > li,
.js .school-logos.reveal > li,
.js .stats-band.reveal .row > div,
.js .seva-band.reveal .row > div {
  opacity: 0;
  transform: translate3d(0, 1.25rem, 0);
  transition: opacity .9s var(--ease-out), transform 1s var(--ease-out);
  transition-delay: calc(var(--d, 0s) + .15s + var(--i, 0) * 110ms);
}
.js .feature-points.reveal.is-visible > li,
.js .school-logos.reveal.is-visible > li,
.js .stats-band.reveal.is-visible .row > div,
.js .seva-band.reveal.is-visible .row > div { opacity: 1; transform: none; }
:is(.feature-points, .school-logos, .stats-band .row, .seva-band .row) > :nth-child(2) { --i: 1; }
:is(.feature-points, .school-logos, .stats-band .row, .seva-band .row) > :nth-child(3) { --i: 2; }
:is(.feature-points, .school-logos, .stats-band .row, .seva-band .row) > :nth-child(4) { --i: 3; }

/* Devanagari artwork: drifts in softly; JS adds a gentle parallax via `translate` */
.js .deva-art, .js .about-drishti {
  opacity: 0;
  transition: opacity 1.4s var(--ease-out), scale 1.6s var(--ease-out);
}
.js .deva-art.is-visible, .js .about-drishti.is-visible { opacity: 1; }

/* Hero entrance on page load */
.js .hero-eyebrow,
.js .hero-title,
.js .hero-tagline,
.js .hero-sign,
.js .hero .photo-frame {
  opacity: 0;
  transform: translate3d(0, 1.75rem, 0);
  transition: opacity 1.2s var(--ease-out), transform 1.3s var(--ease-out);
}
.js .hero .photo-frame { transform: translate3d(0, 1rem, 0) scale(.985); }
.js.is-loaded .hero-eyebrow  { transition-delay: .15s; }
.js.is-loaded .hero-title    { transition-delay: .3s; }
.js.is-loaded .hero-tagline  { transition-delay: .5s; }
.js.is-loaded .hero-sign     { transition-delay: .68s; }
.js.is-loaded .hero .photo-frame { transition-delay: .2s; }
.js.is-loaded .hero-eyebrow,
.js.is-loaded .hero-title,
.js.is-loaded .hero-tagline,
.js.is-loaded .hero-sign,
.js.is-loaded .hero .photo-frame { opacity: 1; transform: none; }
.js .site-header { transform: translateY(-100%); opacity: 0; }
.js.is-loaded .site-header {
  transform: none;
  opacity: 1;
  transition: transform 1s var(--ease-out) .1s, opacity 1s var(--ease-out) .1s,
              background-color .35s ease, padding .35s ease, box-shadow .35s ease;
}

/* Thin progress line along the top while scrolling */
.scroll-progress {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 1031;
  height: 2px;
  background: linear-gradient(90deg, #c9a27a, #e96c37);
  transform: scaleX(0);
  transform-origin: 0 50%;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal, .js .reveal *, .js .deva-art, .js .about-drishti,
  .js .hero-eyebrow, .js .hero-title, .js .hero-tagline, .js .hero-sign,
  .js .hero .photo-frame, .js .hero .photo-frame img, .js .site-header,
  .js .feature-points.reveal > li, .js .school-logos.reveal > li,
  .js .stats-band.reveal .row > div, .js .seva-band.reveal .row > div {
    opacity: 1 !important; transform: none !important; clip-path: none !important;
    scale: 1 !important; translate: none !important; transition: none !important;
  }
  .scroll-progress { display: none; }
}

@media (max-width: 991.98px) {
  .hero { padding-top: 7.5rem; }
  .photo-frame { margin-inline: auto; }
  .about-drishti { top: -30px; right: 1rem; }
}

/* ---------------- Stats band ---------------- */
.stats-wrap {
  background: var(--cream);
  padding: 0 0 4rem;
}
.stats-band {
  background: var(--brown-900);
  color: var(--text-light);
  padding: 1.65rem 1.5rem 1.56rem;
}
@media (min-width: 992px) {
  .stats-band { padding-left: 3.44rem; padding-right: 3.44rem; }
}
.stat-number {
  font-family: var(--font-serif);
  font-size: clamp(2.2rem, 4vw, 2.94rem);
  line-height: 1;
  color: #fff;
  margin: 0 0 .4rem;
}
.stat-label {
  display: table;
  margin-inline: auto !important;
  font-size: .75rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 .64rem;
  padding-bottom: .6rem;
  position: relative;
}
.stat-label::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 10rem;
  height: 2px;
  background: #b0602f;
  transform: translateX(-50%);
}
.stat-caption {
  max-width: 11.5rem;
  margin: 0 auto;
  font-size: .75rem;
  line-height: 1.375;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--text-muted-light);
}

/* ---------------- Schools ---------------- */
.schools-title {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(1.7rem, 3vw, 2.29rem);
  line-height: 1.2;
  color: var(--text-dark);
  margin: 2.96rem 0 1.32rem;
}
.schools-grid { --bs-gutter-x: 1.69rem; --bs-gutter-y: 1.69rem; }
.school-card {
  height: 100%;
  background: var(--cream);
  border: 1px solid #ecc3a6;
  transition: box-shadow .3s ease, transform .3s ease;
}
.school-card:hover { box-shadow: 0 .75rem 1.75rem rgba(42, 25, 21, .12); transform: translateY(-3px); }
.school-card__img { overflow: hidden; }
.school-card__img img {
  display: block;
  width: 100%;
  aspect-ratio: 2000 / 1883;
  object-fit: cover;
  transition: transform .6s ease;
}
.school-card:hover .school-card__img img { transform: scale(1.04); }
.school-card__body { padding: .7rem 1.45rem .65rem; }
.school-card__board {
  font-size: .8125rem;
  line-height: 1.2;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--orange);
  margin: 0 0 .7rem;
}
.school-card__name {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: .96rem;
  line-height: 1.25;
  color: var(--text-dark);
  margin: 0 0 .55rem;
}
.school-card__sub {
  font-size: .75rem;
  line-height: 1.3;
  letter-spacing: .08em;
  color: var(--orange);
  margin: 0;
}
@media (prefers-reduced-motion: reduce) {
  .school-card, .school-card__img img { transition: none; }
  .school-card:hover, .school-card:hover .school-card__img img { transform: none; }
}

/* ---------------- Feature sections ---------------- */
.feature {
  position: relative;
  padding: 3.125rem 0;
}
#philosophy { padding: 3.625rem 0; }
.feature--dark {
  background: var(--brown-900);
  color: var(--text-light);
}
.feature--light {
  background:
    radial-gradient(circle at 100% 15%, rgba(232, 190, 160, .45), transparent 28%),
    radial-gradient(circle at 0% 95%, rgba(232, 190, 160, .35), transparent 22%),
    var(--cream);
  color: var(--text-dark);
}

.feature-title {
  font-family: var(--font-serif);
  font-size: clamp(1.8rem, 3vw, 2.22rem);
  font-weight: 400;
  line-height: 1.2;
  margin-bottom: 2.1rem;
}
.feature--dark .feature-title { color: #fff; }

.feature-text,
.feature-text p {
  font-size: .795rem;
  line-height: 1.61;
}
.feature-text p:last-child { margin-bottom: 0; }
div.feature-text p { margin-bottom: 1.25rem; }
.feature--dark .feature-text { color: var(--text-light); }

.feature-points {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem 1.6rem;
  margin: 2.6rem 0 0;
}
.feature-points li {
  display: flex;
  align-items: center;
  gap: .75rem;
  font-weight: 700;
  font-size: .96rem;
  line-height: 1;
}
@media (min-width: 992px) {
  .feature-points li span { white-space: nowrap; }
}
.feature-points i {
  width: 1.875rem;
  text-align: center;
  font-size: 1.875rem;
  line-height: 1;
  color: #c0672f;
  flex-shrink: 0;
}
.feature--dark .feature-points li { color: #fff; }

.photo-frame--sm { max-width: 20.375rem; padding: .625rem; }
.photo-frame--sm img { aspect-ratio: 305 / 381; }

/* Hand-drawn Devanagari artwork (SVG) straddling a section's top edge */
.deva-art {
  position: absolute;
  height: auto;
  pointer-events: none;
  user-select: none;
  z-index: 2;
}
.deva-art--jigyasa { width: 26.125rem; left: 23.56rem; top: -3.125rem; }
.deva-art--udaan   { width: 20.5625rem; left: 51.06rem; top: 0; }
.deva-art--shakti  { width: 17.86rem; left: 26.375rem; top: -3.1875rem; }
.deva-art--sah     { width: 12rem; left: 59.125rem; top: -.16rem; }   /* top bar flush on the edge */
.deva-art--mool    { width: 13.36rem; left: 39.94rem; top: 0; }
.feature--roots .feature-title { font-weight: 700; font-size: clamp(1.8rem, 3vw, 2.175rem); }
.feature--hearts .feature-title { font-weight: 700; }

@media (min-width: 992px) {
  /* Text column sits a touch above centre and is inset when it leads the row */
  .feature .row > .col-lg-8 { position: relative; top: -.45rem; }
  .feature .row > .col-lg-8:first-child { padding-left: 2.25rem; padding-right: 1rem; }
  #initiatives .row > .col-lg-8 { padding-left: .8rem; }
  #initiatives .feature-points { column-gap: 3rem; }
  .feature--hearts .row > .col-lg-8 { padding-left: 1.6rem; padding-right: 1.95rem; }
  .feature--hearts .feature-points { column-gap: 2.8rem; }
  .feature.feature--roots .row > .col-lg-8:first-child { padding-left: 1.5rem; }
  .feature--roots .feature-points { column-gap: 1.9rem; }
  .feature.feature--roots .row > .col-lg-4:last-child .photo-frame--sm { margin-right: 0; }
  /* Photo frames bleed ~10px past the content edge, as in the design */
  .feature .row > .col-lg-4:last-child .photo-frame--sm { margin-right: -.6875rem; }
  .feature .row > .col-lg-4:first-child .photo-frame--sm { margin-left: -.625rem; }
}

/* Large Devanagari words straddling the top edge */
.deva-word {
  position: absolute;
  top: 0;
  transform: translateY(-50%);
  font-family: var(--font-deva);
  font-weight: 500;
  font-size: clamp(4.5rem, 11vw, 8.5rem);
  line-height: 1;
  pointer-events: none;
  user-select: none;
  z-index: 2;
  white-space: nowrap;
}
.deva-word--jigyasa { left: 32%; color: #8a5a43; }
.deva-word--udaan   { right: 6%; color: var(--peach); }
.deva-word--shakti  { left: 34%; color: #7a4f3b; }

/* Reveal: stats band count-up handled in JS */

@media (max-width: 991.98px) {
  .feature { padding: 5rem 0 4rem; }
  .deva-word--jigyasa,
  .deva-word--shakti { left: 50%; transform: translate(-50%, -50%); }
  .deva-word--udaan  { right: 1rem; }
  .photo-frame--sm { margin-inline: auto; }
  .deva-art--jigyasa { width: min(26.125rem, 72vw); left: 50%; top: 0; transform: translate(-50%, -50%); }
  .deva-art--udaan   { width: min(20.5625rem, 60vw); left: auto; right: 1rem; top: 0; transform: translateY(-50%); }
  .deva-art--shakti  { width: min(17.86rem, 56vw); left: 50%; top: 0; transform: translate(-50%, -50%); }
  .deva-art--sah     { width: min(12rem, 40vw); left: auto; right: 1rem; top: 0; transform: none; }
  .deva-art--mool    { width: min(13.36rem, 45vw); left: 50%; top: .5rem; transform: translateX(-50%); }
  .feature-text, .feature-text p { font-size: .95rem; line-height: 1.65; }
}
@media (max-width: 767.98px) {
}

/* ---------------- Shared accent ---------------- */
:root { --orange: #c4693c; }
.accent-dot { color: var(--accent); }

/* ---------------- Quote band ---------------- */
.quote-band {
  background: var(--orange);
  color: var(--brown-900);
  padding: 2.5rem 0 2.75rem;
}
.quote-eyebrow {
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  margin-bottom: .75rem;
}
.quote-sanskrit {
  font-family: var(--font-deva);
  font-weight: 500;
  font-size: clamp(2rem, 4.6vw, 3.4rem);
  line-height: 1.2;
  color: #f2c7a4;
  margin-bottom: .25rem;
}
.quote-text {
  font-family: var(--font-serif);
  font-size: clamp(1.4rem, 2.8vw, 2.1rem);
  line-height: 1.3;
  max-width: 48rem;
  margin: 0 auto 1.75rem;
}
.quote-source {
  font-family: var(--font-serif);
  font-size: .9rem;
  margin: 0;
}

/* ---------------- Open Hearts / Deep Roots ---------------- */
.feature--glow {
  background:
    radial-gradient(circle at 0% 0%, rgba(150, 90, 55, .35), transparent 25%),
    radial-gradient(circle at 100% 100%, rgba(150, 90, 55, .3), transparent 25%),
    var(--brown-900);
}
.photo-frame--land img { aspect-ratio: 240 / 300; }

.deva-word--sah  { right: 8%; color: #6e4636; }
.deva-word--mool { left: 46%; color: #dfa98d; }

.feature--roots {
  background:
    radial-gradient(circle at 100% 5%, rgba(232, 190, 160, .45), transparent 22%),
    radial-gradient(circle at 0% 100%, rgba(232, 190, 160, .4), transparent 22%),
    var(--cream);
  padding-bottom: 3.6rem;
}

/* ---------------- Seva stats band ---------------- */
.seva-band {
  background: var(--orange);
  color: #fff;
  margin-top: 2.375rem;
  padding: 1.5rem 2.25rem 1.78rem;
}
@media (min-width: 992px) {
  .seva-band { padding-left: 2.75rem; padding-right: 1rem; }
  .seva-band > .row {
    display: grid;
    grid-template-columns: 23.65rem 23.65rem 1fr;
    margin: 0;
  }
  .seva-band > .row > * { width: auto; padding: 0; margin: 0; }
}
.seva-stat {
  display: flex;
  align-items: flex-start;
  gap: 1.75rem;
}
.seva-stat i {
  font-size: 2.3rem;
  line-height: 1;
  margin-top: .15rem;
}
.seva-number {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 3.3vw, 2.54rem);
  line-height: 1;
  margin: 0 0 .7rem;
  padding-bottom: .8rem;
  border-bottom: 1px solid rgba(255,255,255,.75);
  display: inline-block;
  min-width: 10rem;
}
.seva-label {
  font-size: .75rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin: 0;
}

@media (max-width: 991.98px) {
  .deva-word--sah  { right: 1rem; }
  .deva-word--mool { left: 50%; transform: translate(-50%, -50%); }
}


/* ---------------- The Person ---------------- */
.feature.feature--person { padding: 5.05rem 0; }
.feature--person .feature-title { font-weight: 700; font-size: clamp(1.8rem, 3vw, 2.185rem); }
.feature--person .feature-text p { line-height: 1.68; }
.deva-art--swaroop { width: 20.375rem; left: 22.98rem; top: 0; }
.person-intro {
  font-family: var(--font-serif);
  font-size: .8rem;
  line-height: 1.3;
  margin-bottom: .5rem;
}
.person-loves {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(1.2rem, 2vw, 1.515rem);
  line-height: 1.3;
  color: var(--orange);
  margin-bottom: 1.78rem;
}
@media (min-width: 992px) {
  .feature.feature--person .row > .col-lg-8 { padding-left: 1.6rem; top: -.25rem; }
}

/* ---------------- Ideas ---------------- */
.ideas {
  position: relative;
  background: var(--cream);
  padding: 3.125rem 0 3.25rem;
}
.ideas .feature-title { font-weight: 700; font-size: clamp(1.8rem, 3vw, 2.17rem); margin-bottom: 0; }
.deva-art--vichar { width: 19.92rem; left: 52.97rem; top: -4.125rem; }
.ideas-quote {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(1.4rem, 3.2vw, 2.5rem);
  line-height: 1.62;
  color: var(--text-dark);
  margin: 3.65rem auto 1.16rem;
}
.ideas-quote em { color: var(--orange); }
.q-mark {
  position: relative;
  font-size: 1.9em;
  line-height: 0;
  color: #d39a7a;
}
.q-open  { top: -.12em; margin-right: .02em; }
.q-close { top: .02em; margin-left: .04em; }
.btn-dark-brown {
  background: linear-gradient(90deg, #5d3a2b 0%, #2a1915 100%);
  color: #fff;
  border-radius: 0;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .55rem 1.47rem;
}
.btn-dark-brown:hover { background: var(--orange); color: #fff; }

/* ---------------- Recognition ---------------- */
.recognition {
  position: relative;
  background:
    radial-gradient(circle at 0% 8%, rgba(150, 90, 55, .4), transparent 18%),
    radial-gradient(circle at 35% 30%, rgba(150, 90, 55, .25), transparent 14%),
    radial-gradient(circle at 100% 95%, rgba(150, 90, 55, .4), transparent 20%),
    var(--brown-900);
  color: var(--text-light);
  padding: 3.875rem 0 4.5rem;
}
.recognition .feature-title { font-weight: 700; font-size: clamp(1.8rem, 3vw, 2.18rem); margin-bottom: 0; }
.deva-art--samman { width: 23.375rem; left: 50.22rem; top: 0; }

.award-slider { margin-top: 3.6rem; }
.award-track {
  display: flex;
  gap: 1.5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding: 0;
  margin: 0;
}
.award-track::-webkit-scrollbar { display: none; }
.award {
  flex: 0 0 auto;
  width: 17.5rem;
  scroll-snap-align: center;
  text-align: center;
}
.laurel {
  position: relative;
  width: 13.56rem;
  height: 11.875rem;
  margin: 0 auto 1.05rem;
}
.laurel-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.laurel img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8.4rem;
  height: 5rem;
  object-fit: contain;
  transform: translate(-50%, -55%);
}
.laurel img.img-missing { background: transparent; opacity: .6; }
.award p {
  max-width: 12.25rem;
  margin-inline: auto !important;
  font-size: .98rem;
  font-weight: 600;
  line-height: 1.28;
  color: #fff;
  margin: 0;
}
.slider-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: .1875rem;
  margin-top: 2.4rem;
}
.slider-dots button {
  position: relative;
  width: .375rem;
  height: .375rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #e2bd96;
  transition: background .3s, width .3s, height .3s;
}
.slider-dots button::before {          /* larger invisible tap target */
  content: "";
  position: absolute;
  inset: -.5rem -.25rem;
}
.slider-dots button.active { width: .5625rem; height: .5625rem; background: #e96c37; }
.slider-dots button:focus-visible { outline: 2px solid #e2bd96; outline-offset: 3px; }

/* ---------------- Moments ---------------- */
.moments {
  --mw: 17.5rem;            /* side item size  */
  --mh: 10.625rem;
  --aw: 25.625rem;            /* active item size */
  --ah: 20rem;
  --gap: 2.5rem;
  position: relative;
  height: calc(var(--ah) + 5rem);
  overflow: hidden;
  margin-top: 2rem;
  touch-action: pan-y;
}
.moments-track {
  display: flex;
  align-items: center;
  gap: var(--gap);
  height: 100%;
  transition: transform .6s cubic-bezier(.22,.61,.36,1);
  will-change: transform;
}
.moment {
  position: relative;
  flex: 0 0 auto;
  width: var(--mw);
  height: var(--mh);
  margin: 0;
  cursor: pointer;
  transition: width .6s ease, height .6s ease, opacity .6s ease;
  opacity: .9;
}
.moment.active { width: var(--aw); height: var(--ah); opacity: 1; cursor: default; }
.moment img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #4a332b;
}
.play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2.875rem;
  height: 2.875rem;
  transform: translate(-50%, -50%);
  border: 2px solid #fff;
  border-radius: 50%;
  background: rgba(0,0,0,.25);
  color: #fff;
  font-size: 1.6rem;
  display: grid;
  place-items: center;
  padding: 0 0 0 0.1875rem;
  transition: background .3s, transform .3s;
}
.play-btn:hover { background: var(--accent); transform: translate(-50%, -50%) scale(1.08); }

/* Gold corner brackets: proportional to the active photo, as in the design
   (offset ≈ 2.8% of its width, arms ≈ 12.5% of its width) */
.moments {
  --c-off: calc(var(--aw) * .028);
  --c-len: calc(var(--aw) * .125);
  --c-w: max(1.5px, .1rem);
}
.corner {
  position: absolute;
  width: var(--c-len);
  height: var(--c-len);
  border-color: #c9a27a;
  border-style: solid;
  border-width: 0;
  pointer-events: none;
}
.corner.tl { top: calc(50% - var(--ah)/2 - var(--c-off)); left: calc(50% - var(--aw)/2 - var(--c-off)); border-top-width: var(--c-w); border-left-width: var(--c-w); }
.corner.tr { top: calc(50% - var(--ah)/2 - var(--c-off)); right: calc(50% - var(--aw)/2 - var(--c-off)); border-top-width: var(--c-w); border-right-width: var(--c-w); }
.corner.bl { bottom: calc(50% - var(--ah)/2 - var(--c-off)); left: calc(50% - var(--aw)/2 - var(--c-off)); border-bottom-width: var(--c-w); border-left-width: var(--c-w); }
.corner.br { bottom: calc(50% - var(--ah)/2 - var(--c-off)); right: calc(50% - var(--aw)/2 - var(--c-off)); border-bottom-width: var(--c-w); border-right-width: var(--c-w); }

@media (max-width: 767.98px) {
  .moments { --mw: 10rem; --mh: 7.5rem; --aw: 16.25rem; --ah: 12.5rem; --gap: 1.25rem; }
}

/* ---------------- Footer ---------------- */
.site-footer {
  background: var(--cream);
  padding: 3rem 0 1.5rem;
  color: var(--text-dark);
}
.footer-name {
  font-family: var(--font-serif);
  font-size: 1.6rem;
  font-weight: 700;
  margin-bottom: .6rem;
}
.footer-bio { font-size: .8rem; line-height: 1.5; max-width: 19rem; }
.footer-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem 1rem;
  margin: .9rem 0 0;
}
.footer-nav a {
  font-size: .74rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-dark);
  text-decoration: none;
}
.footer-nav a:hover { color: var(--orange); }
.footer-contact { display: flex; flex-direction: column; align-items: flex-end; gap: .75rem; padding-top: .75rem; }
.footer-mail { color: var(--text-dark); text-decoration: none; font-size: .9rem; }
.footer-mail i { margin-right: .4rem; }
.footer-mail:hover { color: var(--orange); }
.social { display: flex; gap: .5rem; margin: 0; }
.social a {
  width: 1.625rem;
  height: 1.625rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: .8rem;
  color: #fff;
  text-decoration: none;
  transition: transform .2s;
}
.social a:hover { transform: translateY(-2px); }
.s-ig { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285aeb 90%); }
.s-in { background: #0a66c2; }
.s-yt { background: #ff0000; }
.s-fb { background: #1877f2; }
.s-x  { background: #fff; color: #000 !important; border: 1px solid #ddd; }
.footer-copy {
  font-size: .75rem;
  color: #7a6b63;
  text-align: center;
  margin: 2.5rem 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--cream-border);
}

@media (max-width: 991.98px) {
  .deva-word--swaroop { left: 50%; transform: translate(-50%, -50%); }
  .deva-word--vichar, .deva-word--samman { right: 1rem; }
  .footer-nav { justify-content: flex-start; margin-top: 0; }
  .footer-contact { align-items: flex-start; padding-top: 0; }
}

/* Mobile/tablet placement for artwork whose desktop rules appear above */
@media (max-width: 991.98px) {
  .deva-art--swaroop { width: min(20.375rem, 60vw); left: 50%; top: 0; transform: translate(-50%, -50%); }
  .deva-art--vichar  { width: min(19.92rem, 50vw); left: auto; right: 1rem; top: 0; transform: translateY(-50%); }
  .deva-art--samman  { width: min(23.375rem, 60vw); left: auto; right: 1rem; top: .5rem; }
}
@media (max-width: 575.98px) {
  .ideas-quote { font-size: 1.12rem; line-height: 1.6; }
}

/* ---------------- Moments: loop + navigation ---------------- */
.moments.no-anim .moments-track,
.moments.no-anim .moment { transition: none !important; }
.moments:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
.moments-nav {
  position: absolute;
  top: 50%;
  z-index: 3;
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid #c9a27a;
  border-radius: 50%;
  background: rgba(42, 25, 21, .7);
  color: #f3e4d4;
  font-size: 1.1rem;
  transform: translate(-50%, -50%);
  transition: background .25s, color .25s, border-color .25s;
}
.moments-nav:hover,
.moments-nav:focus-visible { background: var(--orange); border-color: var(--orange); color: #fff; outline: none; }
/* sit in the gap between the active slide and its neighbours */
.moments-prev { left: calc(50% - var(--aw) / 2 - var(--gap) / 2); }
.moments-next { left: calc(50% + var(--aw) / 2 + var(--gap) / 2); }
@media (max-width: 767.98px) {
  .moments-nav { width: 2.25rem; height: 2.25rem; font-size: .95rem; }
}
@media (max-width: 575.98px) {
  .stat-label::after { width: 7.5rem; }
  .stats-band { padding-left: 1rem; padding-right: 1rem; }
}
@media (max-width: 1199.98px) {
  .schools-grid { --bs-gutter-x: 1.5rem; }
}

/* ---------------- Award tiles (laurel + logo + name in one SVG) ---------------- */
.award-track { gap: 2.5rem; align-items: flex-start; }
.award { width: 16.5rem; }
.award img { display: block; width: 100%; height: auto; }
@media (max-width: 575.98px) {
  .award-track { gap: 1.25rem; }
  .award { width: 13.5rem; }
}

/* ---------------- Back to top ---------------- */
.to-top {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  z-index: 1020;
  width: 2.875rem;
  height: 2.875rem;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid #c9a27a;
  border-radius: 50%;
  background: var(--brown-900);
  color: #f3e4d4;
  font-size: 1.15rem;
  box-shadow: 0 .5rem 1.25rem rgba(42, 25, 21, .25);
  opacity: 0;
  visibility: hidden;
  transform: translateY(.75rem);
  transition: opacity .3s ease, transform .3s ease, visibility .3s, background .25s, border-color .25s;
}
.to-top.show { opacity: 1; visibility: visible; transform: none; }
.to-top:hover,
.to-top:focus-visible { background: var(--orange); border-color: var(--orange); color: #fff; outline: none; }
.to-top:focus-visible { box-shadow: 0 0 0 3px rgba(233, 108, 55, .35); }
@media (max-width: 575.98px) {
  .to-top { right: 1rem; bottom: 1rem; width: 2.5rem; height: 2.5rem; font-size: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .to-top { transition: none; transform: none; }
}

/* Custom point icons (SVG files) – same slot as the icon-font ones */
.feature-points .point-icon {
  width: 1.875rem;
  height: 1.875rem;
  flex-shrink: 0;
  object-fit: contain;
}

/* ---------------- Swipe hint + drag-to-scroll ---------------- */
.award-slider { position: relative; }
.award-track { cursor: grab; }
.award-track.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.award img { -webkit-user-drag: none; user-select: none; }

.swipe-hint {
  position: absolute;
  left: 50%;
  top: 6.25rem;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem 1rem .5rem .85rem;
  border: 1px solid #c9a27a;
  border-radius: 999px;
  background: rgba(42, 25, 21, .82);
  color: #f3e4d4;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, .5rem);
  transition: opacity .4s ease, transform .4s ease;
}
.moments .swipe-hint { top: 50%; transform: translate(-50%, calc(-50% + .5rem)); }
.swipe-hint.show { opacity: 1; transform: translate(-50%, 0); }
.moments .swipe-hint.show { transform: translate(-50%, -50%); }
.swipe-hint i {
  font-size: 1.25rem;
  line-height: 1;
  color: #e96c37;
  animation: swipe-hand 1.6s ease-in-out infinite;
}
@keyframes swipe-hand {
  0%   { transform: translateX(.45rem) rotate(-8deg); }
  50%  { transform: translateX(-.45rem) rotate(8deg); }
  100% { transform: translateX(.45rem) rotate(-8deg); }
}
@media (prefers-reduced-motion: reduce) {
  .swipe-hint i { animation: none; }
}


/* Phones/tablets: leave room under the Devanagari artwork so it never sits on headings or photos */
@media (max-width: 991.98px) {
  .about { padding-top: 6.5rem; }
  #philosophy { padding-top: 4.75rem; }
  .feature--hearts { padding-top: 6.75rem; }
  .feature--roots { padding-top: 7.75rem; }
  .ideas { padding-top: 4.25rem; }
  .recognition { padding-top: 5.5rem; }
}

/* Phones/tablets: जिज्ञासा sits like desktop – its top bar on the section edge,
   only the loop above it (desktop top/width ratio ≈ -0.12) */
@media (max-width: 991.98px) {
  .deva-art--jigyasa {
    --jw: min(26.125rem, 72vw);
    width: var(--jw);
    top: calc(var(--jw) * -0.1196);
    transform: translateX(-50%);
  }
  #philosophy { padding-top: 5.75rem; }
}

/* Phones/tablets: every Devanagari artwork sits like its desktop version –
   same vertical relationship to the section edge, scaled to the mobile width */
@media (max-width: 991.98px) {
  .deva-art--udaan   { top: 0; transform: none; }                       /* desktop: top bar on the edge */
  .deva-art--shakti  { --w: min(17.86rem, 56vw); width: var(--w); top: calc(var(--w) * -0.1785); transform: translateX(-50%); }
  .deva-art--sah     { top: 0; transform: none; }
  .deva-art--mool    { top: 0; transform: translateX(-50%); }
  .deva-art--swaroop { top: 0; transform: translateX(-50%); }
  .deva-art--vichar  { --w: min(19.92rem, 50vw); width: var(--w); top: calc(var(--w) * -0.2071); transform: none; }
  .deva-art--samman  { top: 0; }

  /* room so the heading / photo starts clear of the artwork */
  #initiatives { padding-top: 6rem; }
  #initiatives + .feature { padding-top: 5.5rem; }
  .feature.feature--person { padding-top: 5.5rem; }
  .recognition { padding-top: 4.75rem; }
}

/* Seva stats: custom SVG icons in the same slot as the old icon font */
.seva-stat .seva-icon {
  width: 2.5rem;
  height: 2.5rem;
  flex-shrink: 0;
  margin-top: .1rem;
}

/* Gita verse as hand-lettered artwork */
.quote-sanskrit img {
  display: block;
  width: min(100%, 57.6rem);
  height: auto;
  margin: .35rem auto .9rem;
}

/* Phones/tablets: सह top bar flush on the section edge too (file has ~2% empty space above the bar) */
@media (max-width: 991.98px) {
  .deva-art--sah { top: calc(min(12rem, 40vw) * -0.0134); }
}

/* Phones/tablets: clear space between a section's photo and its text when they stack */
@media (max-width: 991.98px) {
  .about .row, .feature .row { --bs-gutter-y: 2.25rem; }
  .about .section-title { margin-top: 0; }
}

/* School cards link to each school's website */
.school-card__name a {
  color: inherit;
  text-decoration: none;
}
.school-card__name a i {
  display: inline-block;
  margin-left: .35rem;
  font-size: .8em;
  color: var(--orange);
  opacity: .55;
  transform: translate(-2px, 2px);
  transition: opacity .3s ease, transform .3s ease;
}
.school-card:hover .school-card__name a i,
.school-card:focus-within .school-card__name a i { opacity: 1; transform: none; }
.school-card:hover .school-card__name a { color: var(--orange); }
.school-card__name a:focus-visible { outline: none; }
.school-card:focus-within { outline: 2px solid var(--orange); outline-offset: 3px; }


/* Small laptops / tablet landscape (992–1199px): keep the longer
   "Dr Trupti Agarwal." logo, menu and button on one tidy row */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .brand-logo { font-size: 1.45rem; }
  .site-header .nav-link { padding: .5rem .5rem !important; letter-spacing: .12em; }
  .site-header .nav-link::after { left: .5rem; right: .5rem; }
  .btn-touch { padding: .45rem .9rem; font-size: .8rem; white-space: nowrap; }
}