/* ── RESET & BASE ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --gold: #CAB78C;
  --gold-dark: #a8935f;
  --gold-light: #e8dbc0;
  --gold-pale: #f7f2e8;
  --gold-dim: rgba(202,183,140,0.12);
  --ink: #16120d;
  --charcoal: #2a2520;
  --warm: #4a3e30;
  --muted: #7a6e5e;
  --cream: #faf6ef;
  --parch: #f2ebe0;
  --white: #ffffff;
  --border: rgba(202,183,140,0.22);
  --border-mid: rgba(202,183,140,0.38);
  --green: #2d6a4f;
  --green-dim: rgba(45,106,79,0.08);
  --green-border: rgba(45,106,79,0.2);
  --red: #c0392b;
  --red-dim: rgba(192,57,43,0.08);
  --red-border: rgba(192,57,43,0.22);
}
html { scroll-behavior: smooth; }
body { font-family: 'Jost', sans-serif; background: var(--cream); color: var(--ink); font-size: 18px; line-height: 1.85; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
h1,h2,h3,h4 { font-family: 'Cormorant Garamond', serif; font-weight: 400; line-height: 1.15; }
h1 { font-size: clamp(2.6rem,5.5vw,4.8rem); }
h2 { font-size: clamp(1.9rem,3.5vw,3rem); }
h3 { font-size: 1.6rem; }
p { color: #4a3e30; font-weight: 400; }

/* ── EYEBROW ── */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 1.1rem; font-weight: 700; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--gold-dark); font-family: 'Jost', sans-serif;
}
.eyebrow::before { content:''; display:block; width:16px; height:1px; background:var(--gold-dark); }

/* ── NAV ── */
#nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  background: #ffffff;
  border-bottom: 1px solid rgba(202,183,140,0.2);
  height: 86px;
  display: grid;
  /* logo auto-width | links centered | buttons fixed */
  grid-template-columns: auto 1fr auto;
  align-items: center;
  padding: 0 2rem;
  /* isolation:isolate ensures mix-blend-mode works correctly */
  isolation: isolate;
}

/* LOGO */
.nav-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  padding-right: 2rem;
  padding-left: 3.5rem;
}
.nav-logo img {
  height: 54px;
  width: auto;
  display: block;
  /* mix-blend-mode multiply: on white (#fff), black pixels = invisible.
     The black PNG background becomes white-nav-coloured.
     Only the gold letterforms remain visible. */
  transition: opacity 0.2s;
}
.nav-logo img:hover { opacity: 0.7; }

/* LINKS — perfectly centered in the middle column */
.nav-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3rem;
}
.nav-links a {
  font-family: 'Jost', sans-serif;
  font-size: 1.05rem;
  font-weight: 400;
  color: #5c5040;
  text-decoration: none;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
  padding-bottom: 3px;
  border-bottom: 1.5px solid transparent;
  transition: color 0.18s;
}
.nav-links a:hover { color: #16120d; }
.nav-links a.active {
  color: #16120d;
  border-bottom-color: #CAB78C;
}

/* BUTTONS — right aligned */
.nav-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
}
.nav-signin {
  font-family: 'Jost', sans-serif;
  font-size: 1rem;
  font-weight: 400;
  color: #5c5040;
  padding: 9px 18px;
  border: 1px solid rgba(180,160,120,0.5);
  background: transparent;
  text-decoration: none;
  transition: all 0.18s;
  white-space: nowrap;
  display: inline-block;
}
.nav-signin:hover { border-color: #a8935f; color: #16120d; }
.nav-join {
  font-family: 'Jost', sans-serif;
  font-size: 1rem;
  font-weight: 500;
  color: #ffffff;
  background: #CAB78C;
  padding: 10px 26px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.18s;
  display: inline-block;
  white-space: nowrap;
}
.nav-join:hover { background: #a8935f; }
.nav-cta {
  font-family: 'Jost', sans-serif !important;
  font-size: 1.1rem !important; font-weight: 500 !important;
  color: #ffffff !important; background: #CAB78C !important;
  padding: 7px 20px !important; border: none !important;
  text-decoration: none !important; display: inline-block !important;
  transition: background 0.18s !important;
}
.nav-cta:hover { background: #a8935f !important; }

/* ── MOBILE NAV ── */
/* Hamburger button — hidden on desktop */
.nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  background: none;
  border: 1px solid rgba(202,183,140,0.45);
  cursor: pointer;
  padding: 9px;
  flex-shrink: 0;
  transition: border-color 0.2s;
}
.nav-hamburger:hover { border-color: #a8935f; }
.nav-hamburger span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: #5c5040;
  transition: all 0.28s ease;
  transform-origin: center;
}
/* Animate into X when open */
.nav-hamburger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); background: #a8935f; }
.nav-hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); background: #a8935f; }

/* Overlay behind sidebar */
.nav-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(22,18,13,0.45);
  z-index: 1001;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.nav-overlay.open {
  opacity: 1;
  pointer-events: all;
}

/* Right-side sliding sidebar */
.nav-sidebar {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  width: 280px;
  height: 100vh;
  background: #ffffff;
  z-index: 1002;
  transform: translateX(100%);
  transition: transform 0.32s cubic-bezier(0.4,0,0.2,1);
  overflow-y: auto;
  box-shadow: -4px 0 32px rgba(22,18,13,0.12);
  pointer-events: none;
}
.nav-sidebar.open {
  transform: translateX(0);
  pointer-events: all;
}
.nav-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid rgba(202,183,140,0.2);
}
.nav-sidebar-header img {
  height: 32px;
  width: auto;
}
.nav-sidebar-close {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.4rem;
  color: #9c8f7e;
  line-height: 1;
  padding: 4px 8px;
  transition: color 0.15s;
}
.nav-sidebar-close:hover { color: #16120d; }
.nav-sidebar-links {
  padding: 0.75rem 0;
}
.nav-sidebar-links a {
  display: block;
  padding: 1rem 1.5rem;
  font-family: 'Jost', sans-serif;
  font-size: 1.05rem;
  font-weight: 400;
  color: #5c5040;
  text-decoration: none;
  border-bottom: 1px solid rgba(202,183,140,0.1);
  transition: background 0.15s, color 0.15s, padding-left 0.15s;
  position: relative;
}
.nav-sidebar-links a:last-child { border-bottom: none; }
.nav-sidebar-links a:hover { background: #f7f2e8; color: #16120d; padding-left: 1.875rem; }
.nav-sidebar-links a.active {
  color: #a8935f;
  font-weight: 500;
  padding-left: 1.875rem;
}
.nav-sidebar-links a.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: #CAB78C;
}
.nav-sidebar-footer {
  padding: 1.25rem 1.5rem;
  border-top: 1px solid rgba(202,183,140,0.18);
  margin-top: 0.5rem;
}
.nav-sidebar-footer a {
  display: block;
  text-align: center;
  background: #CAB78C;
  color: #fff;
  padding: 12px;
  font-family: 'Jost', sans-serif;
  font-size: 0.92rem;
  font-weight: 500;
  text-decoration: none;
  margin-bottom: 0.625rem;
  transition: background 0.18s;
}
.nav-sidebar-footer a:hover { background: #a8935f; }
.nav-sidebar-footer a.signin-link {
  background: transparent;
  color: #5c5040;
  border: 1px solid rgba(180,160,120,0.5);
  margin-bottom: 0;
}
.nav-sidebar-footer a.signin-link:hover { border-color: #a8935f; color: #16120d; background: transparent; }

@media(max-width:900px) {
  #nav {
    grid-template-columns: auto 1fr auto auto;
    padding: 0 1.25rem;
    height: 64px;
  }
  .nav-links  { display: none !important; }
  .nav-signin { display: none !important; }
  .nav-join   { grid-column: 3; font-size: 0.85rem font-weight:500; !important; padding: 7px 16px !important; }
  .nav-logo   { padding-left: 0; grid-column: 1; }
  .nav-hamburger { display: flex !important; grid-column: 4; margin-left: 0.5rem; }
  .nav-sidebar   { display: block; }
  .nav-overlay   { display: block; }
}

@media(min-width:901px) {
  .nav-hamburger { display: none !important; }
  .nav-sidebar   { display: none !important; }
  .nav-overlay   { display: none !important; }
}


/* ── READABILITY — white-background body text ── */
#about-content p,
#programs-content p,
#enroll-content p,
#faq-content p,
#content p {
  line-height: 1.95;
  font-size: 1rem;
  color: #4a3e30;
}
#about-content li,
#programs-content li,
#content li,
#faq-content li {
  line-height: 1.9;
  color: #4a3e30;
}

/* ── BUTTONS ── */
.btn-gold {
  display:inline-block; background:var(--gold-dark); color:var(--white);
  padding:13px 28px; font-size:1.1rem; font-weight:600;
  letter-spacing:0.14em; text-transform:uppercase;
  border:none; cursor:pointer; font-family:'Jost',sans-serif;
  transition:background 0.2s;
}
.btn-gold:hover { background:var(--ink); }
.btn-outline {
  display:inline-block; background:transparent; color:var(--gold-dark);
  padding:12px 28px; font-size:1.1rem; font-weight:600;
  letter-spacing:0.14em; text-transform:uppercase;
  border:1px solid var(--gold); cursor:pointer; font-family:'Jost',sans-serif;
  transition:all 0.2s;
}
.btn-outline:hover { background:var(--gold-dark); color:var(--white); }

/* ── FOOTER ── */
#footer {
  background:var(--ink); padding:6rem 2.5rem 3rem;
  border-top:1px solid rgba(202,183,140,0.1);
}
.footer-inner { max-width:1100px; margin:0 auto; }
.footer-top {
  display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:5rem;
  padding-bottom:4rem; border-bottom:1px solid rgba(202,183,140,0.1); margin-bottom:2.5rem;
}
.footer-brand h3 { font-family:'Cormorant Garamond',serif; font-size:1.5rem; color:var(--cream); font-weight:300; margin-bottom:0.5rem; }
.footer-brand .ar { font-size:1rem; color:var(--gold); direction:rtl; display:block; margin-bottom:1rem; }
.footer-brand p { font-size:1.1rem; color:rgba(202,183,140,0.55); line-height:1.9; font-weight:400; max-width:280px; }
.footer-brand img {
  height: 52px; width: auto; display: block; margin-bottom: 1.25rem;
  /* screen blend: on dark background, black becomes invisible,
     only the gold calligraphy shows — seamless with the footer */
  
}
.footer-col h4 { font-size:1.1rem; font-weight:700; letter-spacing:0.18em; text-transform:uppercase; color:var(--gold-dark); margin-bottom:1rem; }
.footer-col a { display:block; font-size:1.1rem; font-weight:400; color:rgba(202,183,140,0.55); margin-bottom:0.55rem; transition:color 0.2s; }
.footer-col a:hover { color:var(--gold-light); }
.footer-bottom { display:flex; justify-content:space-between; align-items:center; }
.footer-copy { font-size:1.1rem; font-weight:500; color:rgba(202,183,140,0.25); }
.footer-links { display:flex; gap:1.5rem; }
.footer-links a { font-size:1.08rem; font-weight:500; color:rgba(202,183,140,0.3); transition:color 0.2s; }
.footer-links a:hover { color:var(--gold); }

/* ── DIVIDER ── */
.divider { height:1px; background:var(--border); margin:1.5rem 0; }

/* ── REVEAL ── */
.reveal { opacity:0; transform:translateY(20px); transition:opacity 0.65s ease,transform 0.65s ease; }
.reveal.visible { opacity:1; transform:none; }
.d1 { transition-delay:0.1s; }
.d2 { transition-delay:0.2s; }
.d3 { transition-delay:0.3s; }
.d4 { transition-delay:0.4s; }

/* ── MODAL ── */
.modal-bg { display:none; position:fixed; inset:0; background:rgba(22,18,13,0.72); z-index:2000; align-items:center; justify-content:center; padding:2rem; }
.modal-bg.open { display:flex; }
.modal-box { background:var(--white); max-width:480px; width:100%; padding:2.5rem; position:relative; max-height:90vh; overflow-y:auto; border:1px solid var(--border); }
.modal-close { position:absolute; top:1rem; right:1rem; background:none; border:none; font-size:1.2rem; cursor:pointer; color:var(--muted); }
.modal-label { display:block; font-size:1.1rem; font-weight:700; letter-spacing:0.15em; text-transform:uppercase; color:var(--warm); margin-bottom:0.3rem; }
.modal-input { width:100%; padding:10px 13px; border:1px solid var(--border-mid); font-family:'Jost',sans-serif; font-size:1.1rem; font-weight:500; color:var(--ink); outline:none; background:var(--white); margin-bottom:0.875rem; transition:border-color 0.2s; }
.modal-input:focus { border-color:var(--gold); }
.modal-success { display:none; background:var(--green-dim); border:1px solid var(--green-border); padding:1rem; text-align:center; font-size:1.1rem; color:var(--green); font-weight:500; }
.modal-success.show { display:block; }

/* ════════════════════════════════════════
   MOBILE — ≤ 900px
   ════════════════════════════════════════ */
@media(max-width:900px) {

  /* ── Typography ── */
  h1 { font-size: clamp(2rem, 9vw, 3rem); }
  h2 { font-size: clamp(1.5rem, 7vw, 2.2rem); }
  h3 { font-size: 1.3rem; }

  /* ── Nav (handled in hamburger block above, just safeguards) ── */
  .nav-links  { display: none !important; }
  .nav-logo   { padding-left: 0 !important; }

  /* ── Hero ── */
  #hero {
    padding: 100px 1.25rem 4rem;
    text-align: center;
  }
  .hero-btns { flex-direction: column; align-items: center; gap: 0.75rem; }
  .hero-quote { padding: 1.5rem 1.25rem; }

  /* ── Page heroes (About / Programs / Enroll / Calendar / Legal) ── */
  .page-hero {
    padding: 100px 1.25rem 3rem;
  }

  /* ── Sections — side padding ── */
  #about-content,
  #programs-content,
  #enroll-content,
  #cal-content,
  #tuition-summary,
  #faq-content,
  #content { padding-left: 1.25rem !important; padding-right: 1.25rem !important; }

  /* Pillars section */
  #pillars { padding: 4rem 1.25rem; }
  .pillars-grid {
    grid-template-columns: 1fr !important;
    gap: 2rem;
  }
  .pillar { flex-direction: column; }

  /* Tracks dark section */
  #tracks { padding: 4rem 1.25rem; }
  .tracks-grid {
    grid-template-columns: 1fr !important;
    gap: 1px;
  }
  .tracks-header { text-align: center; margin-bottom: 2rem; }

  /* CTA */
  #cta { padding: 4rem 1.25rem; text-align: center; }
  .cta-inner { max-width: 100%; }
  .cta-btns { justify-content: center; }

  /* ── About page ── */
  .about-block {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
    padding-bottom: 3rem !important;
    margin-bottom: 3rem !important;
  }
  .pillars-dark-grid { grid-template-columns: 1fr !important; }

  /* ── Programs / Curriculum ── */
  #programs-content { padding-top: 3rem !important; padding-bottom: 3rem !important; }
  .prog-section-head { flex-wrap: wrap; gap: 0.5rem; }
  .prog-section-head span { margin-left: 0 !important; }
  .prog-grid { grid-template-columns: 1fr !important; }
  .prog-bundle-top { flex-direction: column; gap: 0.5rem; }
  .prog-bundle-courses { white-space: normal !important; }
  .tui-inner { padding: 0; }
  .tui-table { font-size: 0.75rem; font-weight:500; }
  .tui-table th, .tui-table td { padding: 0.625rem 0.5rem; }
  /* Hide least important table column on very small screens */
  @media(max-width:480px) {
    .tui-table td:nth-child(3),
    .tui-table th:nth-child(3) { display: none; }
  }

  /* ── Enroll page ── */
  .enr-inner {
    grid-template-columns: 1fr !important;
    gap: 2.5rem !important;
  }
  .enr-form-box { position: static !important; padding: 1.5rem !important; }
  .enr-steps h2 { font-size: 1.6rem; }

  /* ── Calendar page ── */
  .cal-inner {
    grid-template-columns: 1fr !important;
    gap: 2.5rem !important;
  }
  .cal-sidebar { position: static !important; }
  .cal-day { min-height: 56px; padding: 0.375rem; }
  .cal-event-dot { font-size: 0.5rem; font-weight:500; }
  .month-nav h2 { font-size: 1.2rem; }

  /* ── FAQ ── */
  .faq-q { font-size: 0.86rem; font-weight:500; }
  .faq-a { font-size: 0.83rem; font-weight:500; }

  /* ── Footer ── */
  #footer { padding: 3.5rem 1.25rem 2rem; }
  .footer-top {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }
  .footer-bottom {
    flex-direction: column;
    gap: 0.75rem;
    align-items: flex-start;
  }
  .footer-brand p { max-width: 100%; }

  /* ── Decorative SVGs — hide on mobile to avoid overflow ── */
  /* Only hide absolute-positioned decorations, not inline ones */
  #hero    > svg[style*="position:absolute"],
  #pillars > svg[style*="position:absolute"],
  #tracks  > svg[style*="position:absolute"],
  #cta     > svg[style*="position:absolute"],
  .page-hero   > svg[style*="position:absolute"],
  #about-content > svg[style*="position:absolute"],
  #programs-content > svg[style*="position:absolute"],
  #tuition-summary  > svg[style*="position:absolute"],
  #enroll-content   > svg[style*="position:absolute"],
  #cal-content      > svg[style*="position:absolute"] {
    display: none !important;
  }

  /* ── Portal login ── */
  #login-screen {
    padding: 1.5rem 1.25rem !important;
    align-items: flex-start !important;
    padding-top: 100px !important;
  }
  .login-box { width: 100% !important; }
  #login-screen > svg { display: none !important; }

  /* ── Modals — full-width on mobile ── */
  .modal-box { padding: 1.5rem !important; margin: 0 !important; }

  /* ── Teachers section ── */
  #teachers { padding: 4rem 1.25rem !important; }
  #teachers > div { padding: 0 !important; }
  #teachers [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  .teacher-card { margin-bottom: 1rem; }

}

/* ════════════════════════════════════════════════════════════════
   PREMIUM LAYER — typographic + interaction refinement (sitewide)
   ════════════════════════════════════════════════════════════════ */
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
body { font-feature-settings: "kern" 1, "liga" 1, "calt" 1; }
h1, h2, h3 { letter-spacing: -0.018em; text-wrap: balance; }
p { text-wrap: pretty; }
::selection { background: var(--gold); color: #16120d; }
*:focus-visible { outline: 2px solid var(--gold-dark); outline-offset: 3px; border-radius: 3px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } }

/* Buttons — quiet depth + a confident lift on hover */
.nav-join, .nav-cta, .btn-gold, .btn-primary, a.btn-gold {
  box-shadow: 0 1px 2px rgba(138,115,56,.16), 0 7px 20px -10px rgba(138,115,56,.5);
  transition: transform .2s cubic-bezier(.4,0,.2,1), box-shadow .2s, background .2s, color .2s !important;
}
.nav-join:hover, .nav-cta:hover, .btn-gold:hover, .btn-primary:hover, a.btn-gold:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 4px rgba(138,115,56,.22), 0 14px 32px -12px rgba(138,115,56,.6);
}
.nav-join:active, .nav-cta:active, .btn-gold:active, .btn-primary:active { transform: translateY(0); }

/* Nav links — animated hairline underline on hover */
.nav-links a {
  background-image: linear-gradient(var(--gold-dark), var(--gold-dark));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1.5px;
  transition: color .18s, background-size .3s cubic-bezier(.4,0,.2,1);
}
.nav-links a:hover:not(.active) { background-size: 100% 1.5px; }

/* Cards — soft, intentional depth and lift */
[class*="-card"] { transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
[class*="-card"]:hover { transform: translateY(-4px); box-shadow: 0 20px 44px -24px rgba(60,45,20,.42); }

/* Imagery — gentle rounding + lift, premium feel */
.nav-logo img { transition: opacity .2s, transform .2s; }
.nav-logo img:hover { transform: scale(1.03); }

/* Crisper hairline dividers */
hr, .divider { border: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-light), transparent); }

/* Smooth, premium scrollbar */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-thumb { background: var(--gold-light); border-radius: 7px; border: 3px solid var(--cream); }
::-webkit-scrollbar-thumb:hover { background: var(--gold); }
::-webkit-scrollbar-track { background: transparent; }

/* Mobile/tablet: hide absolutely-positioned decorative calligraphy.
   Rotated decorations near the right edge can bleed a few px past the
   viewport on phones/tablets; they're purely ornamental (pointer-events:none),
   so hiding them on small screens removes the sideways-scroll without any
   loss of content. Inline icon SVGs (not position:absolute) are unaffected. */
@media (max-width: 860px) {
  svg[style*="position:absolute"] { display: none !important; }
}