/* =============================================================
   shared.css — Mind School by Shashank Ayur
   Common variables, base styles, nav, and footer CSS
   Used by all pages — edit once, applies everywhere.
   ============================================================= */

/* ── Google Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&family=DM+Sans:wght@300;400;500&display=swap');

/* ── CSS Variables ── */
:root {
  --black:     #0f0f0f;
  --white:     #fafaf8;
  --cream:     #f4f1eb;
  --sage:      #8a9a7e;
  --warm-gray: #b8b0a4;
  --text:      #1a1a1a;
  --muted:     #6b6560;
  --accent:    #c4a882;
  --gold:      #D4772A;
  --gold-soft: #b8966e;
  --border:    #e8e3db;
  --warm:      #b8b0a4;
}

/* ── Base Reset ── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body {
  font-family: 'DM Sans', sans-serif;
  background: var(--white);
  color: var(--text);
  overflow-x: hidden;
  padding-top: 64px !important;
}

/* =============================================================
   NAV — .msn
   ============================================================= */
.msn {
  position: fixed; top: 0; left: 0; right: 0; z-index: 9000;
  height: 64px;
  background: rgba(250,250,248,.98);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid #e8e3db;
  display: flex; align-items: center;
  padding: 0 40px;
  font-family: 'DM Sans', sans-serif;
}
.msn-logo {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.15rem; font-weight: 500; letter-spacing: .04em;
  color: #1a1a1a; text-decoration: none;
  margin-right: 18px; flex-shrink: 0;
}
.msn-logo span { color: #D4772A; }
.msn-browse {
  display: flex; align-items: center; gap: 6px;
  height: 34px; padding: 0 14px;
  background: transparent; border: 1.5px solid #e8e3db;
  font-family: 'DM Sans', sans-serif; font-size: .76rem; color: #1a1a1a;
  cursor: pointer; transition: border-color .2s; flex-shrink: 0;
}
.msn-browse:hover { border-color: #D4772A; background: #f4f1eb; }
.msn-browse .chv { transition: transform .25s; }
.msn-sp { flex: 1; }
.msn-right { display: flex; align-items: center; gap: 18px; }
.msn-login {
  font-size: .74rem; color: #6b6560; text-decoration: none;
  transition: color .2s; font-weight: 300; white-space: nowrap;
}
.msn-login:hover { color: #1a1a1a; }
.msn-cta {
  background: #1a1a1a; color: #fafaf8 !important;
  padding: 9px 20px; font-size: .72rem; letter-spacing: .1em;
  text-transform: uppercase; text-decoration: none;
  transition: background .2s; white-space: nowrap;
}
.msn-cta:hover { background: #D4772A; }
.msn-ham {
  display: none; flex-direction: column; gap: 5px;
  background: none; border: none; cursor: pointer;
  padding: 6px; margin-left: 10px; flex-shrink: 0;
}
.msn-ham span { display: block; width: 22px; height: 1.5px; background: #1a1a1a; transition: all .25s; }
.msn-open .msn-ham span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.msn-open .msn-ham span:nth-child(2) { opacity: 0; }
.msn-open .msn-ham span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Desktop dropdown */
.msn-drop {
  visibility: hidden; opacity: 0;
  position: fixed; top: 64px; left: 0; right: 0;
  background: #fafaf8; border-bottom: 2px solid #e8e3db;
  box-shadow: 0 20px 60px rgba(0,0,0,.1);
  z-index: 8999; padding: 40px 40px 48px;
  transition: opacity .22s, visibility .22s, transform .22s;
  transform: translateY(-8px);
}
.msn-drop-open { visibility: visible; opacity: 1; transform: translateY(0); }
.msn-drop-inner { max-width: 900px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 52px; }
.msn-col-label {
  font-size: .58rem; letter-spacing: .22em; text-transform: uppercase;
  color: #b8b0a4; margin-bottom: 12px; padding-bottom: 10px;
  border-bottom: 1px solid #e8e3db;
}
.msn-col-links { display: flex; flex-direction: column; gap: 1px; margin-bottom: 20px; }
.ndl { display: flex; align-items: center; gap: 13px; padding: 10px 12px; text-decoration: none; color: #1a1a1a; transition: background .15s; }
.ndl:hover { background: #f4f1eb; }
.ndl.nda { background: rgba(212,119,42,.06); }
.ndl.nda .ndn { color: #D4772A; }
.ndi { width: 42px; height: 42px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: .58rem; font-weight: 600; color: rgba(255,255,255,.9); letter-spacing: .04em; }
.ndt { display: flex; flex-direction: column; flex: 1; }
.ndn { font-size: .84rem; font-weight: 400; color: #1a1a1a; line-height: 1.3; }
.nds { font-size: .68rem; color: #6b6560; font-weight: 300; margin-top: 1px; }
.ndb { margin-left: auto; font-size: .54rem; letter-spacing: .1em; text-transform: uppercase; background: rgba(212,119,42,.1); color: #D4772A; padding: 2px 7px; border: 1px solid rgba(212,119,42,.25); flex-shrink: 0; white-space: nowrap; }
.ndb.live { background: rgba(212,119,42,.2); border-color: rgba(212,119,42,.5); }
.msn-drop-cta { margin-top: 20px; padding-top: 20px; border-top: 1px solid #e8e3db; }
.msn-drop-cta a { display: inline-block; background: #1a1a1a; color: #fafaf8 !important; padding: 10px 22px; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; transition: background .2s; }
.msn-drop-cta a:hover { background: #D4772A; }
.msn-drop-cta p { font-size: .68rem; color: #6b6560; font-weight: 300; margin-top: 8px; font-family: 'Cormorant Garamond', serif; font-style: italic; }

/* Overlay */
.msn-overlay { display: none; position: fixed; inset: 0; top: 64px; z-index: 8998; background: rgba(0,0,0,.25); }
.msn-overlay-show { display: block; }

/* Mobile drawer */
.msn-mob {
  display: none; position: fixed; top: 64px; left: 0; right: 0;
  background: #fafaf8; border-bottom: 1px solid #e8e3db;
  z-index: 8999; box-shadow: 0 12px 32px rgba(0,0,0,.1);
  max-height: calc(100vh - 64px); overflow-y: auto;
}
.msn-mob-open { display: block; }
.msn-mob-label { font-size: .58rem; letter-spacing: .2em; text-transform: uppercase; color: #b8b0a4; padding: 16px 16px 8px; }
.msn-mob-bottom { padding: 16px 16px 8px; border-top: 1px solid #e8e3db; margin-top: 8px; display: flex; flex-direction: column; gap: 10px; }
.msn-mob-login { font-size: .8rem; color: #6b6560; text-decoration: none; padding: 10px 0; text-align: center; }
.msn-mob-join { display: block; background: #1a1a1a; color: #fafaf8 !important; padding: 13px 20px; font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; text-align: center; transition: background .2s; }
.msn-mob-join:hover { background: #D4772A; }

@media (max-width: 860px) {
  .msn { padding: 0 18px; }
  .msn-browse { display: none; }
  .msn-right { display: none; }
  .msn-ham { display: flex; }
}

/* =============================================================
   FOOTER — .ms-footer
   ============================================================= */
footer, .ms-footer {
  background: #080808;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.ms-footer { background: #080808; padding: 56px 60px 0; }
.ms-f-social { display: flex; gap: 12px; margin-top: 16px; }
.ms-f-social-link { width: 34px; height: 34px; border: 1px solid rgba(255,255,255,.1); display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.3); text-decoration: none; transition: border-color .2s, color .2s; }
.ms-f-social-link:hover { border-color: #D4772A; color: #D4772A; }
.ms-footer-3col { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 52px; padding-bottom: 48px; border-bottom: 1px solid rgba(255,255,255,.07); }
@media (max-width: 860px) { .ms-footer-3col { grid-template-columns: 1fr 1fr; gap: 28px; } }
@media (max-width: 500px) { .ms-footer-3col { grid-template-columns: 1fr; gap: 24px; } }
.ms-f-brand { font-family: 'Cormorant Garamond', serif; font-size: 1.1rem; color: rgba(255,255,255,.35); font-weight: 300; text-decoration: none; margin-bottom: 8px; display: block; }
.ms-f-brand span { color: #D4772A; }
.ms-f-tagline { font-size: .75rem; color: rgba(255,255,255,.18); font-weight: 300; line-height: 1.75; max-width: 280px; margin-top: 8px; }
.ms-f-col-title { font-size: .58rem; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.2); margin-bottom: 16px; }
.ms-f-link { display: block; font-size: .78rem; color: rgba(255,255,255,.28); text-decoration: none; font-weight: 300; margin-bottom: 10px; transition: color .2s; }
.ms-f-link:hover { color: #D4772A; }
.ms-f-bottom { display: flex; justify-content: space-between; align-items: center; padding: 18px 0; }
.ms-f-copy { font-size: .66rem; color: rgba(255,255,255,.14); }
.ms-f-email { font-size: .72rem; color: rgba(255,255,255,.22); text-decoration: none; transition: color .2s; }
.ms-f-email:hover { color: #D4772A; }
@media (max-width: 860px) {
  .ms-footer { padding: 48px 24px 0; }
  .ms-f-bottom { flex-direction: column; gap: 8px; text-align: center; padding: 20px 0; }
}

/* =============================================================
   SHARED UTILITY CLASSES
   Used across multiple pages
   ============================================================= */
.section-label {
  font-size: .68rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 16px; font-weight: 400;
}
.section-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(2.2rem, 3.5vw, 3.4rem);
  font-weight: 300; line-height: 1.15;
  color: var(--text); margin-bottom: 24px;
}
.section-title em { font-style: italic; color: var(--gold); }

.btn-dark {
  background: var(--text); color: var(--white) !important;
  padding: 16px 40px; font-size: .82rem; letter-spacing: .1em;
  text-transform: uppercase; text-decoration: none;
  display: inline-block; transition: background .25s;
  font-family: 'DM Sans', sans-serif;
}
.btn-dark:hover { background: var(--gold); }

.btn-gold {
  background: var(--gold); color: var(--white) !important;
  padding: 16px 40px; font-size: .82rem; letter-spacing: .1em;
  text-transform: uppercase; text-decoration: none;
  display: inline-block; transition: background .25s;
  font-family: 'DM Sans', sans-serif;
}
.btn-gold:hover { background: #b86020; }


.video-modal{
   z-index: 10000 !important; 
}
#introVideoModal .video-modal-inner {
    position: relative;
    width: 90%;
    max-width: 720px;
    aspect-ratio: 16/9;
    background: #000;
}

#msVideoContent,#videoModalContent, #introVideoContent, #skinIntroContent,#relIntroContent{
    width: 100%;
    height: 100%;
}