/* ===========================
   ROOT VARS & BASE
=========================== */
:root {
  --black: #0a0a0a;
  --silver: #838996;
  --silver-dark: #838996;
  --white: #f5f7fa;            /* cool white */
  --primary: var(--black);
  --accent: var(--silver);
  --dark: var(--black);
}

/* Accessibility: Screen reader only content */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Security: Hide honeypot field from spam bots */
.honeypot-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Poppins', sans-serif;
  color: var(--primary);
  background: var(--white);
  line-height: 1.6;
}
img { max-width: 100%; display: block; height: auto; }
a  { color: inherit; text-decoration: none; }
.container { width: 90%; max-width: 1200px; margin: 0 auto; }

/* ===========================
   HEADER / NAV
=========================== */
.site-header {
  position: fixed; top: 0; width: 100%; z-index: 1000;
  backdrop-filter: blur(8px);
  background: rgba(245,247,250,0.7);
  border-bottom: 1px solid rgba(0,0,0,0.08);
  padding: 0.5rem 0;
  transition: padding .3s ease, backdrop-filter .3s ease;
}
.window-scrolled .site-header { padding: 0.3rem 0; backdrop-filter: blur(12px); }

.nav {
  display: flex; align-items: center; justify-content: space-between; gap: 3rem;
}
.logo img { height: 48px; transition: transform .3s ease; }
.logo:hover img { transform: scale(1.1); }

.nav-scroll-wrapper { overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }
.nav-scroll-wrapper::-webkit-scrollbar { display: none; }

.nav__menu {
  list-style: none; display: flex; gap: 1.5rem; white-space: nowrap; padding: 0.5rem 0;
}
.nav__menu a {
  position: relative; padding: 0.25rem 0; font-weight: 600; transition: color .3s ease;
}
.nav__menu a::after {
  content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 2px;
  background: var(--accent); transition: width .3s ease;
}
.nav__menu a:hover { color: var(--accent); }
.nav__menu a:hover::after { width: 100%; }

/* ===========================
   HERO (VIDEO BG)
=========================== */
.hero {
  position: relative;
  margin-top: 70px;
  height: calc(100vh - 70px);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; color: var(--white);
}
.hero-bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
}
.hero-overlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.5);
  mix-blend-mode: multiply; z-index: 1;
}
.hero-content {
  position: relative; z-index: 2;
  text-align: center; max-width: 800px; padding: 0 1rem;
}
.hero-content h1 {
  font-size: clamp(2.4rem, 6vw, 4rem);
  line-height: 1.1; margin-bottom: 0.75rem;
  background: linear-gradient(90deg, var(--white), var(--accent), var(--white));
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradient-shift 5s ease infinite, text-reveal 1.2s ease-out forwards;
}
@keyframes gradient-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes text-reveal {
  0% { clip-path: inset(0 100% 0 0); }
  100% { clip-path: inset(0 0 0 0); }
}
.hero-subtitle {
  font-weight: 500; font-size: 1rem; text-transform: uppercase;
  letter-spacing: 2px; color: rgba(245,247,250,0.9);
  margin-bottom: 2.5rem; position: relative; display: inline-block;
}
.hero-subtitle::after {
  content: ''; position: absolute; bottom: -0.5rem; left: 50%;
  transform: translateX(-50%); width: 40px; height: 3px;
  background: var(--accent); border-radius: 2px; opacity: .9;
}
.scroll-down { margin-top: 2rem; display: flex; justify-content: center; z-index: 2; }
.scroll-down .arrow {
  width: 24px; height: 24px;
  border-bottom: 3px solid var(--white); border-right: 3px solid var(--white);
  transform: rotate(45deg); animation: arrow-bounce 1.5s infinite;
}
@keyframes arrow-bounce {
  0% { transform: rotate(45deg) translate(0,0); opacity: 1; }
  50% { transform: rotate(45deg) translate(0,8px); opacity: .6; }
  100% { transform: rotate(45deg) translate(0,0); opacity: 1; }
}

/* Buttons */
.btn {
  position: relative; display: inline-block;
  padding: 0.75rem 2rem; font-size: 1rem; font-weight: 700; letter-spacing: .5px;
  color: var(--black);
  background: linear-gradient(45deg, var(--silver) 0%, var(--silver-dark) 100%);
  border: none; border-radius: 50px;
  box-shadow: 0 8px 20px rgba(0,0,0,.3);
  overflow: hidden; transition: transform .3s ease, box-shadow .3s ease;
  z-index: 1; cursor: pointer;
}
.btn.small { padding: 0.5rem 1.25rem; font-size: .9rem; }
.btn::before {
  content: ''; position: absolute; top: -50%; left: -50%;
  width: 200%; height: 200%;
  background: radial-gradient(circle at center, rgba(255,255,255,0.35) 0%, transparent 60%);
  transform: translate(-100%, -100%) rotate(45deg); transition: transform .5s ease; z-index: -1;
}
.btn:hover { transform: translateY(-4px); box-shadow: 0 12px 30px rgba(0,0,0,.4); }
.btn:hover::before { transform: translate(0,0) rotate(45deg); }
.btn:active { transform: translateY(-2px) scale(.98); box-shadow: 0 6px 15px rgba(0,0,0,.3); }

/* ===========================
   SECTION GENERICS
=========================== */
.section-title {
  text-align: center; font-size: 2.5rem; font-weight: 700;
  margin-bottom: 3rem; position: relative; color: var(--primary);
}
.section-title::after {
  content: ''; display: block; width: 80px; height: 4px;
  background: var(--accent); margin: 0.5rem auto 0; border-radius: 2px;
}

/* ===========================
   FOUNDER / PROFILE
=========================== */
.profile {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  align-items: center; gap: 2rem; padding: 4rem 0;
}
.profile-image img { border-radius: 8px; }
.profile-text h2 {
  color: var(--accent); text-transform: uppercase;
  margin-bottom: .5rem; font-size: 1.5rem;
}
.profile-text p { margin-bottom: 1rem; }

/* ===========================
   MISSION
=========================== */
#mission { padding: 6rem 2rem; background: var(--white); color: var(--primary); }
.mission-copy { max-width: 800px; margin: 0 auto; text-align: center; font-size: 1.05rem; }

/* ===========================
   ROSTER GRID
=========================== */
#roster { padding: 6rem 2rem; background: var(--white); }
.roster-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 2rem;
}
.roster-card {
  background: var(--white);
  border-radius: 12px; overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
  transition: transform .3s ease, box-shadow .3s ease;
  position: relative;
}
.roster-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,.12); }
.roster-img img { width: 100%; height: 220px; object-fit: cover; }
.roster-card h3 { font-size: 1.2rem; margin: 1rem 1rem 0.25rem; font-weight: 700; }
.roster-tag { font-size: .9rem; color: #666; margin: 0 1rem 1rem; }
.roster-toggle {
  margin: 0 1rem 1rem;
  background: var(--accent); color: var(--black);
  border: none; padding: 0.5rem 1rem; border-radius: 6px;
  cursor: pointer; font-weight: 600;
}
.roster-expand {
  height: 0; overflow: hidden; transition: height .35s ease;
  padding: 0 1rem;
}
.roster-card.open .roster-expand { height: auto; padding-bottom: 1rem; }
.roster-expand p { margin: 0.5rem 0 1rem; font-size: .95rem; color: #444; }

/* ===========================
   OFFERINGS
=========================== */
#offerings { padding: 6rem 2rem; background: var(--white); text-align: center; }
.offerings-intro { max-width: 800px; margin: 0 auto 3rem; font-size: 1.05rem; }
.offerings-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem; max-width: 1200px; margin: 0 auto;
}
.offering-card {
  background: var(--white); border-radius: 12px; padding: 2rem;
  transition: .3s ease; box-shadow: 0 2px 10px rgba(0,0,0,.05);
}
.offering-card:hover { transform: translateY(-5px); box-shadow: 0 4px 20px rgba(0,0,0,.1); }
.offering-card i { font-size: 2.5rem; color: var(--accent); margin-bottom: 1rem; }
.offering-card h3 { font-size: 1.25rem; font-weight: 700; margin-bottom: 0.5rem; }
.offering-card p { font-size: 1rem; color: #444; line-height: 1.6; }
.section-cta { text-align: center; margin-top: 2rem; }

/* ===========================
   CONTACT / BOOK FORM
=========================== */
#book { padding: 6rem 2rem; }
.contact-title {
  text-align: center; font-size: 2rem; font-weight: 700;
  margin-bottom: 1rem; position: relative;
}
.contact-title::after {
  content: ''; display: block; width: 60px; height: 4px; background: var(--accent);
  margin: 0.5rem auto 0; border-radius: 2px;
}
.contact-blurb { text-align: center; max-width: 700px; margin: 0 auto 2rem; color: #444; }

.contact-wrapper {
  display: flex; flex-wrap: wrap; gap: 3rem; align-items: center;
  justify-content: center; margin-top: 2rem;
}
.contact-form {
  max-width: 500px; flex: 1 1 350px;
  display: flex; flex-direction: column; gap: 1rem;
}
.contact-form input,
.contact-form select,
.contact-form textarea {
  padding: 0.75rem 1rem; border: 1px solid #ddd;
  border-radius: 8px; font-size: 1rem; font-family: inherit;
  background-color: #fff;
}
.contact-form textarea { resize: vertical; }
.checkbox { font-size: .9rem; color: #555; display: flex; gap: .5rem; align-items: flex-start; }
.contact-form .btn.cta {
  padding: 1rem; background: linear-gradient(45deg, var(--silver) 0%, var(--silver-dark) 100%);
  color: var(--black); font-weight: 600; border: none; border-radius: 8px;
  cursor: pointer; transition: background .3s ease; font-size: 1.1rem;
  box-shadow: 0 6px 20px rgba(0,0,0,.1);
}
.contact-form .btn.cta:hover { filter: brightness(1.05); }

/* ===========================
   GALLERY
=========================== */
#gallery { padding: 6rem 2rem; background: var(--white); text-align: center; }
.gallery-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem; max-width: 1200px; margin: 0 auto;
}
.gallery-grid img {
  width: 100%; border-radius: 12px; box-shadow: 0 6px 20px rgba(0,0,0,.1);
  transition: transform .3s ease, box-shadow .3s ease;
  background: var(--white);
}
.gallery-grid img:hover {
  transform: scale(1.05); box-shadow: 0 10px 25px rgba(0,0,0,.15);
}

/* Optional modal */
.modal { display: none; position: fixed; z-index: 1000; padding-top: 80px;
  inset: 0; overflow: auto; background-color: rgba(0,0,0,0.85); }
.modal-content {
  display: block; margin: auto; max-width: 90%; max-height: 80vh; border-radius: 10px;
}
.modal-close {
  position: absolute; top: 30px; right: 40px; color: #fff;
  font-size: 40px; font-weight: bold; cursor: pointer; transition: .3s;
}
.modal-close:hover { color: var(--accent); }

/* ===========================
   FOOTER
=========================== */
.site-footer {
  background-color: var(--dark); color: #fff;
  padding: 2.5rem 0; text-align: center; margin-top: 4rem;
}
.site-footer .footer-content { max-width: 1200px; margin: 0 auto; padding: 0 1rem; }
.footer-logo { height: 50px; margin: 0 auto 1rem; }
.socials { margin: 1rem 0; display: flex; justify-content: center; gap: 1rem; font-size: 1.4rem; }
.newsletter-form {
  max-width: 360px; margin: 1.5rem auto;
  display: flex; gap: 0.5rem;
}
.newsletter-form input {
  flex: 1; padding: 0.65rem 0.9rem; border-radius: 6px; border: 1px solid #444;
  background: #222; color: #fff;
}
.newsletter-form button.btn.small { padding: 0.6rem 1.2rem; border-radius: 6px; }
.legal { margin-top: 1rem; font-size: 0.85rem; color: #bbb; }
.highlight { color: var(--accent); font-weight: 600; }

/* ===========================
   UTILITIES
=========================== */
.typewriter {
  display: inline-block; overflow: hidden; white-space: nowrap;
  border-right: 0.12em solid var(--white);
  animation: typing 2s steps(30,end) forwards, blink-caret .75s step-end infinite;
}
@keyframes typing { from { width: 0; } to { width: 100%; } }
@keyframes blink-caret { from, to { border-color: transparent; } 50% { border-color: var(--white); } }

.stat { display: inline-block; padding: 1rem; border-radius: 8px; transition: box-shadow .3s ease, transform .3s ease; }
.stat:hover { transform: translateY(-4px) scale(1.02); box-shadow: 0 8px 20px rgba(0,0,0,.15); }
.stat-number { font-size: 2.25rem; font-weight: 700; color: var(--accent); display: inline-block; transition: color .3s ease; }

/* ===========================
   RESPONSIVE
=========================== */
@media (max-width: 768px) {
  .nav__menu { gap: 1rem; font-size: .9rem; }
  .profile { display: flex; flex-direction: column-reverse; padding: 2rem 0; }
  .hero-content h1 { font-size: 2.3rem; }
  .hero-subtitle { font-size: 0.9rem; letter-spacing: 1.5px; margin-bottom: 2rem; }
  .hero-subtitle::after { width: 30px; height: 2px; bottom: -0.4rem; }
}
/* ==== 1) Subtle grain + diagonal lines on light sections ==== */
body::before{
  content:"";
  position:fixed; inset:0; pointer-events:none; z-index:-1;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.04) 0 12px, rgba(0,0,0,.04) 12px 24px),
    radial-gradient(circle at 20% 20%, rgba(255,255,255,.06), transparent 60%),
    radial-gradient(circle at 80% 0%, rgba(0,0,0,.07), transparent 65%);
  mix-blend-mode:overlay;
}

/* ==== 2) Section split bars (angled) ==== */
.section-title{
  position:relative;
}
.section-title::before{
  content:"";
  position:absolute; left:50%; top:-28px; transform:translateX(-50%) skewX(-18deg);
  width:160px; height:6px;
  background:linear-gradient(90deg,var(--silver-dark),var(--silver),var(--white));
  border-radius:3px;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.25));
  animation:barShift 6s linear infinite;
}
@keyframes barShift{
  0%{background-position:0% 50%;}
  50%{background-position:100% 50%;}
  100%{background-position:0% 50%;}
}

/* ==== 3) Metallic shimmer on buttons ==== */
.btn{
  position:relative; overflow:hidden;
}
.btn::after{
  content:"";
  position:absolute; top:0; left:-120%;
  width:120%; height:100%;
  background:linear-gradient(120deg, transparent 0%, rgba(255,255,255,.6) 50%, transparent 100%);
  transform:skewX(-20deg);
  animation:none;
}
.btn:hover::after{
  animation:shine 0.9s forwards;
}
@keyframes shine{
  0%{left:-120%;}
  100%{left:120%;}
}

/* ==== 4) Roster cards: grayscale → color, glow border ==== */
.roster-img img{
  filter:none;
  transition:transform .35s ease;
}
.roster-card:hover .roster-img img{
  transform:scale(1.03);
}

.roster-card::before{
  content:"";
  position:absolute; inset:0;
  border-radius:12px;
  padding:1px;
  background:linear-gradient(135deg, var(--silver-dark), var(--white), var(--accent));
  -webkit-mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity:.35; transition:opacity .35s ease;
}
.roster-card:hover::before{ opacity:.8; }
.roster-card:hover .roster-img img{ filter:grayscale(0%); }

/* ==== 5) Glassy offering cards with inner shine ==== */
.offering-card{
  background:rgba(255,255,255,0.55);
  backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.25);
  position:relative;
}
.offering-card::after{
  content:\"\"; position:absolute; inset:0;
  background:linear-gradient(145deg, rgba(255,255,255,.18), rgba(0,0,0,.08));
  mix-blend-mode:overlay; pointer-events:none; border-radius:12px;
}

/* ==== 6) Cool white gradient backgrounds ==== */
#roster, #offerings, #gallery, #mission{
  background:linear-gradient(180deg, var(--white) 0%, #e7ecf2 100%);
}

/* ==== 7) Title stroke option (apply .stroke-title on any h1/h2) ==== */
.stroke-title{
  color:transparent;
  -webkit-text-stroke: 1px var(--silver);
  text-shadow:0 0 20px rgba(255,255,255,.4);
}

/* ==== 8) Animated underline for nav current section ==== */
.nav__menu a.active::after{
  width:100%;
  animation:activePulse 2s infinite;
}
@keyframes activePulse{
  0%,100%{background:var(--accent);}
  50%{background:var(--white);}
}

/* ==== 9) Stat counters pop ==== */
.stat{
  background:rgba(0,0,0,.035);
  border:1px solid rgba(0,0,0,.08);
}
.stat-number{
  text-shadow:0 2px 8px rgba(0,0,0,.25);
}
.learn-btn{
  display:block;
  margin:0 1rem 1.25rem;
  text-align:center;
}
.learn-btn{
  display:block;
  width:calc(100% - 2rem);
  margin:0 1rem 1.25rem;
  text-align:center;
  border-radius:40px;
}

.roster-card .btn.small{
  background:linear-gradient(45deg,var(--silver) 0%, var(--silver-dark) 100%);
  color:var(--black);
  box-shadow:0 6px 18px rgba(0,0,0,.15);
}
.roster-card .btn.small:hover{
  filter:brightness(1.05);
}
/* remove old grayscale effect */
.roster-img img { filter: none; transition: transform .35s ease; }
.roster-card:hover .roster-img img { transform: scale(1.03); }

/* make all learn buttons identical */
.learn-btn{
  display: block;
  width: calc(100% - 2rem);
  margin: 0 1rem 1.25rem;
  text-align: center;
  border-radius: 40px;
}
.roster-card .btn.small{
  background: linear-gradient(45deg, var(--silver) 0%, var(--silver-dark) 100%);
  color: var(--black);
  box-shadow: 0 6px 18px rgba(0,0,0,.15);
}
.roster-card .btn.small:hover{ filter: brightness(1.05); }
/* Roster: kill extra white space & align buttons */
.roster-card{
  display:flex;
  flex-direction:column;
}
.roster-img{ flex:0 0 auto; }
.roster-card h3{ margin:1rem 1rem 0.35rem; }
.roster-tag{ margin:0 1rem 0.75rem; line-height:1.4; }

.learn-btn{
  margin: auto 1rem 1.25rem;      /* auto top margin eats the leftover space */
  width: calc(100% - 2rem);
  text-align:center;
  border-radius:40px;
}
/* --- Gallery slider --- */
.gallery-slider{
  position:relative; max-width:1000px; margin:0 auto; overflow:hidden;
  border-radius:16px; box-shadow:0 8px 30px rgba(0,0,0,.12); background:var(--white);
}
/* was .6s */
.gal-track{
  display:flex;
  transition: transform .35s cubic-bezier(.4,0,.2,1);
}

.gal-slide{ min-width:100%; user-select:none; }
.gal-slide img{ width:100%; height:560px; object-fit:cover; display:block; }

.gal-btn{
  position:absolute; top:50%; transform:translateY(-50%);
  background:rgba(0,0,0,.45); color:#fff; border:none;
  width:46px; height:46px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:background .25s; z-index:3;
}
.gal-btn:hover{ background:rgba(0,0,0,.65); }
.gal-prev{ left:14px; } .gal-next{ right:14px; }

.gal-dots{
  position:absolute; bottom:14px; left:50%; transform:translateX(-50%);
  display:flex; gap:8px; z-index:3;
}
.gal-dots button{
  width:10px; height:10px; border-radius:50%; border:none;
  background:rgba(255,255,255,.55); cursor:pointer; padding:0;
  transition:background .25s, transform .25s;
}
.gal-dots button.active{ background:var(--accent); transform:scale(1.25); }

@media(max-width:768px){
  .gal-slide img{ height:320px; }
  .gal-btn{ width:38px; height:38px; }
}
.gal-track{ will-change: transform; }
.gal-slide img{ width:100%; height:auto; object-fit:cover; }

/* ===========================
   MOBILE NAV
=========================== */
.nav-toggle{display:none;}
@media (max-width: 820px){
  .nav{gap:1rem;}
  .nav-toggle{display:flex; flex-direction:column; justify-content:center; gap:5px; width:44px; height:44px; background:rgba(0,0,0,.05); border:1px solid rgba(0,0,0,.15); border-radius:10px; cursor:pointer; position:relative; transition:background .3s, border-color .3s; -webkit-tap-highlight-color:transparent;}
  .nav-toggle:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
  .nav-toggle .bar{display:block; width:22px; height:2.5px; margin:0 auto; background:var(--black); border-radius:2px; transition:transform .4s cubic-bezier(.68,-0.55,.27,1.55), opacity .25s, width .25s;}
  .nav-toggle[aria-expanded="true"]{background:rgba(0,0,0,.08);}
  .nav-toggle[aria-expanded="true"] .bar:nth-child(1){transform:translateY(7.5px) rotate(45deg); width:24px;}
  .nav-toggle[aria-expanded="true"] .bar:nth-child(2){opacity:0;}
  .nav-toggle[aria-expanded="true"] .bar:nth-child(3){transform:translateY(-7.5px) rotate(-45deg); width:24px;}
  .nav-scroll-wrapper{position:fixed; inset:0 0 0 40%; translate:100% 0; display:flex; justify-content:flex-end; background:rgba(0,0,0,.25); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); padding:0; transition:translate .55s cubic-bezier(.22,.9,.3,1), background .35s; z-index:900;}
  .nav-scroll-wrapper.open{translate:0 0;}
  .nav-scroll-wrapper nav{background:var(--white); width:100%; max-width:320px; padding:5rem 2rem 3rem; box-shadow:-4px 0 18px rgba(0,0,0,.12); position:relative; overflow-y:auto; -webkit-overflow-scrolling:touch;}
  .nav__menu{flex-direction:column; align-items:flex-start; gap:1.25rem; padding:0; margin:0;}
  .nav__menu li{width:100%;}
  .nav__menu a{font-size:1.05rem; font-weight:600; display:inline-block; padding:.35rem 0;}
  .nav__menu a::after{bottom:-6px; height:3px;}
  body.menu-open{overflow:hidden;}
  /* Ensure menu panel does not block toggle when closed */
  .nav-toggle { z-index: 1100; }
  .nav-scroll-wrapper { pointer-events: none; }
  .nav-scroll-wrapper.open { pointer-events: auto; z-index: 1200; }
  @supports (translate: 0){.nav-scroll-wrapper{left:unset;}}
}
@media (max-width:560px){
  .nav-scroll-wrapper{inset:0 0 0 30%;}
  .nav-scroll-wrapper nav{max-width:300px; padding:4.5rem 1.75rem 2.5rem;}
}
@media (prefers-reduced-motion: reduce){
  .nav-toggle .bar, .nav-scroll-wrapper{transition:none !important;}
}

/* ===========================
   MOBILE BALANCE & NAV PANEL REFINEMENTS
=========================== */
html, body { overflow-x: hidden; }

@media (max-width: 820px) {
  .site-header { padding: .4rem 0; }
  .hero { margin-top: 56px; min-height: calc(100vh - 56px); }
  #roster, #offerings, #mission, #gallery, #contact { padding: 3.5rem 1.25rem; }
  .offerings-grid, .roster-grid { gap: 1.25rem; }
  .section-title { font-size: 2rem; margin-bottom: 2rem; }
  .btn.cta { width: 100%; max-width: 360px; }
  /* Override previous translate usage with transform for broader Safari support */
  .nav-scroll-wrapper { inset:0; width:100%; transform: translateX(100%); translate: unset; }
  .nav-scroll-wrapper.open { transform: translateX(0); }
  .nav-scroll-wrapper nav { max-width:100%; padding:5rem 2rem 3rem; }
  .gal-slide img { height: 240px; }
}
@media (max-width: 480px) {
  .section-title { font-size: 1.85rem; }
  #roster, #offerings, #mission, #gallery, #contact { padding: 3.25rem 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .nav-scroll-wrapper, .nav-scroll-wrapper.open { transition: none !important; }
}
@media (max-width: 820px) {
  /* Upgrade existing nav-toggle styles */
  .nav-toggle { z-index:1500; pointer-events:auto; }
  /* Off‑canvas panel: fully non-interactive + hidden when closed */
  .nav-scroll-wrapper { 
    visibility:hidden; opacity:0; pointer-events:none;
    transition: transform .55s cubic-bezier(.22,.9,.3,1), opacity .3s ease, background .35s ease;
  }
  .nav-scroll-wrapper.open { 
    visibility:visible; opacity:1; pointer-events:auto; 
  }
}

/* ===== FINAL MOBILE NAV OVERRIDES (cleanup conflicting earlier rules) ===== */
@media (max-width:820px){
  :root .nav-scroll-wrapper{position:fixed; inset:0; display:flex; justify-content:flex-end; background:rgba(0,0,0,.35); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); transform:translateX(100%) !important; translate:none !important; visibility:hidden; opacity:0; pointer-events:none; transition:transform .5s cubic-bezier(.22,.9,.3,1), opacity .3s ease; z-index:1200;}
  :root .nav-scroll-wrapper.open{transform:translateX(0) !important; visibility:visible; opacity:1; pointer-events:auto;}
  :root .nav-scroll-wrapper nav{background:var(--white); width:82%; max-width:320px; padding:4.75rem 2rem 2.75rem; box-shadow:-4px 0 18px rgba(0,0,0,.15); overflow-y:auto; -webkit-overflow-scrolling:touch;}
  body.menu-open{overflow:hidden;}
}
@media (max-width:560px){
  :root .nav-scroll-wrapper nav{width:88%;}
}
/* ===== END FINAL OVERRIDES ===== */

/* ===== ABSOLUTE FINAL NAV OVERRIDES (force working state) ===== */
@media (max-width:820px){
  .nav-toggle{display:flex !important; position:relative; z-index:3000 !important; background:rgba(255,255,255,.85);}
  /* Wipe earlier off‑canvas styles and re-define cleanly */
  .nav-scroll-wrapper{position:fixed !important; top:0 !important; right:0 !important; bottom:0 !important; left:0 !important; margin:0 !important; padding:0 !important; display:flex !important; justify-content:flex-end !important; background:rgba(0,0,0,.42) !important; backdrop-filter:blur(6px) !important; -webkit-backdrop-filter:blur(6px) !important; transform:translateX(100%) !important; visibility:hidden !important; opacity:0 !important; pointer-events:none !important; overflow:visible !important; z-index:2500 !important;}
  .nav-scroll-wrapper.open{transform:translateX(0) !important; visibility:visible !important; opacity:1 !important; pointer-events:auto !important;}
  .nav-scroll-wrapper nav{background:var(--white) !important; width:78% !important; max-width:320px !important; height:100% !important; padding:4.5rem 2rem 2.5rem !important; box-shadow:-4px 0 18px rgba(0,0,0,.15) !important; overflow-y:auto !important;}
  .nav__menu{flex-direction:column !important; gap:1.35rem !important;}
  body.menu-open{overflow:hidden !important;}
}
@media (max-width:560px){
  .nav-scroll-wrapper nav{width:86% !important;}
}
/* ===== END FINAL NAV OVERRIDES ===== */

/* === CLEAN MOBILE MENU OVERRIDE (FINAL) === */
@media (max-width:880px){
  .nav-toggle{display:flex !important; position:fixed !important; top:10px !important; right:12px !important; width:48px !important; height:48px !important; background:rgba(255,255,255,.9) !important; border:1px solid rgba(0,0,0,.15) !important; border-radius:12px !important; z-index:5000 !important; box-shadow:0 4px 14px rgba(0,0,0,.15) !important;}
  .nav-toggle .bar{background:var(--black) !important;}
  .site-header{padding:.45rem 0 !important;}
  .nav-scroll-wrapper{position:fixed !important; inset:0 !important; margin:0 !important; padding:0 !important; display:flex !important; justify-content:flex-end !important; background:rgba(0,0,0,.45) !important; backdrop-filter:blur(6px) !important; -webkit-backdrop-filter:blur(6px) !important; transform:translateX(100%) !important; transition:transform .38s cubic-bezier(.4,0,.2,1) !important; opacity:1 !important; visibility:visible !important; pointer-events:none !important; z-index:4000 !important;}
  .nav-scroll-wrapper.open{transform:translateX(0) !important; pointer-events:auto !important;}
  .nav-scroll-wrapper nav{background:#fff !important; width:285px !important; max-width:80% !important; height:100% !important; padding:5rem 1.75rem 2.5rem !important; overflow-y:auto !important; box-shadow:-4px 0 18px rgba(0,0,0,.18) !important;}
  .nav__menu{flex-direction:column !important; gap:1.4rem !important;}
  body.menu-open{overflow:hidden !important;}
}
/* === END CLEAN MOBILE MENU OVERRIDE === */

/* === SIMPLE MOBILE NAV (fallback styles) === */
@media (max-width:880px){
  .site-header .container.nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 16px;
    position: relative;
  }
  .logo {
    position: relative;
    z-index: 5000;
    margin-left: 0;
    display: block;
  }
  .logo img {
    height: 42px;
  }
  .nav-toggle {
    position: absolute;
    top: 5px;
    right: 16px;
    width: 48px;
    height: 48px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    background: rgba(255,255,255,0.9);
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: 8px;
    z-index: 5000;
    cursor: pointer;
  }
  .nav-toggle .bar {
    width: 22px;
    height: 2px;
    background-color: var(--black);
    transition: transform 0.3s, opacity 0.3s;
  }
  .nav-toggle[aria-expanded="true"] .bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  .nav-toggle[aria-expanded="true"] .bar:nth-child(2) {
    opacity: 0;
  }
  .nav-toggle[aria-expanded="true"] .bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }
  .nav-scroll-wrapper{position: relative;}
  .nav__menu{
    position: fixed;
    top: 60px;
    right: 12px;
    left: 12px;
    display: none;
    flex-direction: column;
    background: #fff;
    padding: 1.25rem 1.25rem 1.5rem;
    border: 1px solid rgba(0,0,0,.1);
    border-radius: 14px;
    box-shadow: 0 14px 40px -5px rgba(0,0,0,.25);
    max-height: 70vh;
    overflow: auto;
    z-index: 4500;
  }
  .nav__menu.is-open{display: flex; animation: fadeSlide .28s ease;}
  @keyframes fadeSlide{0%{opacity:0; transform:translateY(-8px);}100%{opacity:1; transform:translateY(0);}}
  .nav__menu a{font-size:1.05rem; padding:.4rem 0;}
  body.menu-open{overflow:hidden;}
}
/* === END SIMPLE MOBILE NAV === */