:root{
      --school-maroon:#0B3022;
      --glass-white:rgba(255,255,255,0.9);
      --accent-gold:#b08d57;

      /* Brand Variables Added */
      --brand-maroon:#0B3022;
      --brand-maroon-light:#0B3022;
      --brand-cream:#e5dfcc;
      --brand-gold:#c5a059;
      --glass-white-2:rgba(255,255,255,0.4);
      --text-main:#0B3022;
      --ease-out:cubic-bezier(0.16,1,0.3,1);

      /* Layout helpers */
      --page-x-pad: clamp(1rem, 4vw, 3.5rem);
      --section-y-pad: clamp(3rem, 8vw, 6.25rem);
      --radius-lg: clamp(1rem, 3vw, 1.5rem);
    }

    *{ box-sizing:border-box; }
    html{ scroll-behavior:smooth; }

    body{
      margin:0;
      text-align:center;
      font-family:'Poppins','Inter',sans-serif;
      min-height:200vh;
      overflow-x:hidden;

      background:linear-gradient(
        180deg,
        rgba(144,238,144,0.7) 0%,
        rgba(100,200,120,0.75) 30%,
        rgba(60,160,80,0.85) 60%,
        rgba(34,139,34,0.089) 100%
      );
      color:#111;
    }

    img{ max-width:100%; height:auto; display:block; }
    a{ color:inherit; }

    /* ================= BACKGROUND LAYERS ================= */
    .bg-slider{
      position:fixed;
      top:0; left:0;
      width:100%;
      height:100vh;
      z-index:-1;
      overflow:hidden;
    }
    .bg-slide{
      position:absolute;
      top:0; left:0;
      width:100%;
      height:100%;
      background-size:cover;
      background-position:center;
      opacity:0;
      transition:opacity 1.5s ease-in-out;
    }
    .bg-slide.active{ opacity:1; }

    .bg-overlay{
      position:fixed;
      top:0; left:0;
      width:100%;
      height:100vh;
      z-index:-1;
      background-color:#020d08;
      background-image:
        radial-gradient(at 0% 0%, hsla(145,63%,12%,1) 0, transparent 50%),
        radial-gradient(at 80% 0%, hsla(160,84%,15%,0.4) 0, transparent 50%),
        radial-gradient(at 50% 100%, hsla(152,57%,8%,1) 0, transparent 50%),
        radial-gradient(at 100% 100%, hsla(145,40%,20%,0.2) 0, transparent 50%);
      background-size:180% 180%;
      animation:emeraldDrift 12s ease-in-out infinite alternate;
      overflow:hidden;
    }

    @keyframes emeraldDrift{
      0%{ background-position:0% 0%; }
      100%{ background-position:100% 100%; }
    }

    .bg-overlay::before{
      content:"";
      position:absolute;
      inset:0;
      background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
      opacity:0.03;
      pointer-events:none;
    }

    .bg-overlay::after{
      content:"";
      position:absolute;
      inset:0;
      background:radial-gradient(circle, transparent 30%, rgba(0,0,0,0.5) 100%);
      pointer-events:none;
    }

    /* ================= NAV (RESPONSIVE) ================= */
    .nav-container{
      position:fixed;
      top: 0.95rem;
      left:50%;
      transform:translateX(-50%);
      width: min(90%, 1200px);
      height: 5rem;
      background: linear-gradient(
        105deg,
        rgba(8,32,20,0.97) 0%, rgba(11,48,34,0.97) 40%,
        rgba(14,56,38,0.97) 70%, rgba(9,36,24,0.97) 100%
      );
      backdrop-filter: blur(10px);
      border-radius: 999px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      padding: 0 clamp(0.75rem, 3vw, 1.875rem);
      box-shadow:0 10px 30px rgba(0,0,0,0.1);
      border:1px solid rgba(255,255,255,0.3);
      z-index:1000;
      transition:all 0.4s var(--ease-out);
    }

    .logo-wrapper{
      display:flex;
      align-items:center;
      gap:0.9rem;
      cursor:pointer;
      min-width:10rem;
    }

    

    .logo-shield img {
  width: clamp(3.2rem, 8.5vw, 5rem);
  object-fit: contain;
  /* This makes the logo react to the background color automatically */
  mix-blend-mode: difference;
  filter: invert(1); 
}

    .logo-wrapper:hover .logo-shield{ transform: scale(1.07) rotate(-5deg); }

    .brand-text h1{
      font-size: clamp(1rem, 2.4vw, 1.1rem);
      margin:0;
      color:goldenrod;
      text-transform:uppercase;
      letter-spacing:1px;
      font-weight:700;
      min-height:1.2rem;
      display:inline-block;
      line-height:1.15;
      word-break: break-word;
    }

    #typing-text::after{
      content:'|';
      animation:blink 0.8s infinite;
      color:var(--accent-gold);
      margin-left: 0.125rem;
    }

    .typing-done::after{ display:none !important; }

    @keyframes blink{
      0%,100%{ opacity:1; }
      50%{ opacity:0; }
    }

    .sub-text{
      font-size: clamp(0.55rem, 1.6vw, 0.65rem);
      font-style:italic;
      color:#777;
      margin-top:-2px;
      opacity:0;
      transition:opacity 1.5s ease;
      letter-spacing:2px;
      font-weight:400;
      white-space: nowrap;
    }

    .nav-divider{
      width:2px;
      height:40px;
      background:linear-gradient(180deg, transparent, rgba(197,160,89,0.6), transparent);
      margin:0 0.95rem;
      opacity:0;
      transform:scaleY(0);
      transition:all 0.8s var(--ease-out);
      flex:0 0 auto;
    }
    .divider-visible{ opacity:1; transform:scaleY(1); }

    .nav-links{
      display:flex;
      gap: 0.35rem;
      flex: 1;
      justify-content:center;
      align-items:center;
      margin:0 1rem;
    }

    .nav-links a{
      text-decoration:none;
      color:var(--brand-gold);
      font-size: 0.9rem;
      font-weight:600;
      padding: 0.65rem 1.1rem;
      border-radius: 999px;
      position:relative;
      transition: color 0.3s ease;
      white-space:nowrap;
    }

    .nav-links a:hover{ color:#1B4D3E; }

    .cta-btn{
      background:#004225;
      color:white;
      border:none;
      padding: 0.75rem 1.35rem;
      border-radius: 999px;
      font-weight:600;
      font-size:0.85rem;
      cursor:pointer;
      box-shadow:0 4px 15px rgba(61,26,22,0.3);
      transition:all 0.3s ease;
      white-space:nowrap;
      flex:0 0 auto;
      text-decoration:none;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-height: 2.3rem;
    }

    .nav-shrink{
      height: 3.75rem;
      top: 0.55rem;
      width: min(92%, 1200px);
      background: rgba(255,255,255,0.95);
    }

    /* Hamburger button (hidden on desktop) */
    .nav-toggle{
      display:none;
      background: rgba(255,255,255,0.9);
      border: 1px solid rgba(255,255,255,0.35);
      width: 2.6rem;
      height: 2.6rem;
      border-radius: 999px;
      cursor:pointer;
      align-items:center;
      justify-content:center;
    }

    .nav-toggle .bar{
      width: 1.2rem;
      height: 2px;
      background:#0B3022;
      position:relative;
      border-radius: 2px;
    }
    .nav-toggle .bar::before,
    .nav-toggle .bar::after{
      content:"";
      position:absolute;
      left:0;
      width:100%;
      height:2px;
      background:#0B3022;
      border-radius: 2px;
    }
    .nav-toggle .bar::before{ top:-6px; }
    .nav-toggle .bar::after{ top:6px; }

    /* Mobile menu panel */
    .mobile-menu{
      display:none;
      position: fixed;
      z-index: 999;
      top: calc(0.95rem + 5rem + 0.75rem);
      left: 50%;
      transform: translateX(-50%);
      width: min(92vw, 680px);
      background: rgba(255,255,255,0.92);
      border: 1px solid rgba(255,255,255,0.35);
      border-radius: 18px;
      backdrop-filter: blur(14px);
      box-shadow: 0 20px 50px rgba(0,0,0,0.25);
      padding: 0.75rem;
    }

    .mobile-menu a{
      display:block;
      text-decoration:none;
      font-weight:700;
      color:#1a1a1a;
      padding: 0.85rem 0.85rem;
      border-radius: 12px;
      transition: background 0.2s ease;
      white-space: nowrap;
      overflow:hidden;
      text-overflow: ellipsis;
    }

    .mobile-menu a:hover{ background: rgba(0,0,0,0.06); }

    /* ================= HERO ================= */
    .hero{
      height: 100vh;
      display:flex;
      flex-direction:column;
      justify-content:center;
      align-items:center;
      text-align:center;
      padding: 0 var(--page-x-pad);
      padding-top: calc(5rem + 2vh); /* under fixed nav */
    }

    .hero h1{
      font-family:'Playfair Display',serif;
      font-size: clamp(2.4rem, 8vw, 6.5rem);
      line-height:1.05;
      margin: 0 0 1.5rem;
      background: linear-gradient(to bottom, #ffffff 30%, #a1a1a1 100%);
      background-clip:text;
      -webkit-background-clip:text;
      -webkit-text-fill-color:transparent;
      font-weight:700;
      word-break: break-word;
    }

    /* ================= MAIN BODY SECTION ================= */
    .my-body{
      background-color: var(--brand-cream);
      padding: clamp(2.5rem, 6vw, 3.2rem) 0;
      position:relative;
      z-index:1;
      -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 1) 65%, rgba(0,0,0,0) 100%);
      mask-image: linear-gradient(to top, rgba(0, 0, 0, 1) 65%, rgba(0,0,0,0) 100%);
    }

    .section-container{ padding: var(--section-y-pad) var(--page-x-pad); }

    /* ================= SECTION TITLES ================= */
    h1,h2{ font-family:'Playfair Display',serif; color:var(--brand-maroon); }

    .section-title{
      font-size: clamp(1.6rem, 4vw, 2rem);
      line-height:1.05;
      margin: 2.5rem auto 1.2rem;
      width: min(1100px, 100%);
      padding: 0 var(--page-x-pad);
      background: linear-gradient(to bottom, #ffffff 30%, #a1a1a1 100%);
      background-clip:text;
      -webkit-background-clip:text;
      -webkit-text-fill-color:transparent;
      font-weight:700;
      text-align:center;
    }

    .section-subtitle{
      color:#999;
      margin: -0.75rem auto 1.5rem;
      width: min(1100px, 100%);
      padding: 0 var(--page-x-pad);
      text-align:center;
      font-size: 0.98rem;
    }

    /* ================= STAFF & GALLERY STYLES ================= */
    .staff-wrapper{
      position:relative;
      width:100%;
      max-width: 1400px;
      overflow:hidden;
      margin-bottom: clamp(2.5rem, 6vw, 3.75rem);
      padding: 0 var(--page-x-pad);
    }

    .staff-container{
      display:flex;
      gap: clamp(0.9rem, 2.5vw, 1.875rem);
      overflow-x:auto;
      scroll-behavior:smooth;
      padding: clamp(1.25rem, 3.5vw, 2.5rem);
      scrollbar-width:none;
      scroll-snap-type:x proximity;
    }

    .staff-container::-webkit-scrollbar{ display:none; }

    .staff-item{
      flex: 0 0 min(55%, 720px);
      background:white;
      border-radius: var(--radius-lg);
      overflow:hidden;
      box-shadow:0 10px 25px rgba(0,0,0,0.1);
      scroll-snap-align:start;

      /* keeps layout stable */
      display:flex;
      flex-direction:column;
    }

    /* ====== FIX: STAFF images not long on mobile + click shows full image ====== */
    .staff-item img{
      width:100%;
      /* Force a consistent cropped preview area */
      aspect-ratio: 4 / 3;
      height:auto;
      object-fit: cover;     /* prevents tall/long images from stretching card */
      object-position: center; /* keeps subject centered */
      display:block;
      cursor: zoom-in;
      user-select:none;
      -webkit-user-drag:none;
    }

    /* even safer on very small phones */
    @media (max-width: 420px){
      .staff-item img{
        aspect-ratio: 1 / 1; /* square preview to avoid long portrait crops */
      }
    }

    .staff-info{
      padding: 0.95rem 0.85rem 1.1rem;
      text-align:center;
      flex: 1 1 auto;
      display:flex;
      flex-direction:column;
      justify-content:flex-start;
      gap:0.35rem;
    }

    .staff-name{ font-weight:700; font-size: 12px; }
    .staff-role{ font-size: 0.95rem; color:#777; line-height: 1.4; }

    .staff-btn{
      position:absolute;
      top: 50%;
      transform: translateY(-50%);
      background: rgba(255,255,255,0.95);
      border: none;
      width: clamp(2.3rem, 7vw, 3.2rem);
      height: clamp(2.3rem, 7vw, 3.2rem);
      border-radius: 50%;
      cursor:pointer;
      z-index:100;
      font-size: clamp(1.1rem, 4vw, 1.25rem);
      box-shadow:0 4px 12px rgba(0,0,0,0.1);
      display:flex;
      align-items:center;
      justify-content:center;
    }

    .staff-prev{ left: 0.6rem; }
    .staff-next{ right: 0.6rem; }

    .gallery-wrapper{
      position:relative;
      width:100%;
      max-width: 1300px;
      display:flex;
      align-items:center;
      overflow:visible;
      margin-bottom: clamp(2.5rem, 6vw, 3.75rem);
      padding: 0 var(--page-x-pad);
    }

    .gallery-wrapper::after{
      content:"";
      position:absolute;
      bottom: 1.5rem;
      left: 50%;
      transform: translateX(-50%);
      width: clamp(14rem, 30vw, 18.75rem);
      height: clamp(1.5rem, 4vw, 2.5rem);
      background: radial-gradient(ellipse at center, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0) 70%);
      border-radius: 50%;
      z-index: 1;
      pointer-events:none;
    }

    .gallery-container{
      display:flex;
      gap: clamp(0.9rem, 2.2vw, 1.6rem);
      overflow-x:auto;
      scroll-behavior:smooth;
      padding: clamp(3.2rem, 6vw, 4.5rem) 18vw;
      align-items:center;
      scroll-snap-type:x mandatory;
      -ms-overflow-style:none;
      scrollbar-width:none;
      position:relative;
      z-index:2;
      border-radius: 0.5rem;
    }

    .gallery-container::-webkit-scrollbar{ display:none; }

    .gallery-item{
      flex: 0 0 clamp(16rem, 28vw, 20rem);
      background:white;
      padding: 0.75rem;
      border-radius: var(--radius-lg);
      box-shadow:0 4px 10px rgba(0,0,0,0.05);
      text-align:center;
      cursor: zoom-in;
      scroll-snap-align: center;
      transition: all 0.5s cubic-bezier(0.22,1,0.36,1);
      transform: scale(0.9);
      opacity:0.8;
    }

    .gallery-item.is-focused{
      transform: scale(1.06) translateY(-0.5rem);
      opacity:1;
      box-shadow: 0 20px 40px rgba(0,0,0,0.12);
      z-index:10;
    }

    .gallery-item img{
      width:100%;
      height: clamp(10rem, 20vw, 13.75rem);
      object-fit: cover;
      border-radius: 0.9rem;
      display:block;
      cursor: zoom-in;
    }

    .item-title{ font-weight:700; margin: 0.75rem 0 0.35rem; color:#333; padding: 0 0.1rem; }
    .item-text{ font-size: 0.9rem; color:#888; margin-bottom: 0.5rem; padding: 0 0.1rem; line-height:1.35; }

    .nav-btn{
      position:absolute;
      top: 50%;
      transform: translateY(-50%);
      background: rgba(255,255,255,0.95);
      border: none;
      width: clamp(2.25rem, 6.8vw, 2.9rem);
      height: clamp(2.25rem, 6.8vw, 2.9rem);
      border-radius: 50%;
      cursor:pointer;
      z-index:100;
      font-size: clamp(1.05rem, 3.8vw, 1.2rem);
      box-shadow:0 4px 12px rgba(0,0,0,0.1);
      display:flex;
      align-items:center;
      justify-content:center;
    }

    .btn-prev{ left: 0.6rem; }
    .btn-next{ right: 0.6rem; }

    .modal{
      display:none;
      position:fixed;
      z-index:2000;
      top:0; left:0;
      width:100%; height:100%;
      background: rgba(0,0,0,0.95);
      justify-content:center;
      align-items:center;
      padding: 1rem;
    }

    .modal-content{
      max-width: 90vw;
      max-height: 80vh;
      border-radius: 0.75rem;
      width: auto;
      height: auto;
      object-fit: contain;
      display:block;
    }

    /* Staff modal should show full image (no cropping) */
    #staffImageModal .modal-content{
      object-fit: contain;
      max-height: 85vh;
      width: auto;
    }

    /* ================= FOOTER ================= */
    .location-footer-section{
      background: linear-gradient(180deg, rgba(2,48,32,0.779), rgba(1,31,21,0.929));
      padding: var(--section-y-pad) var(--page-x-pad) 2.5rem;
      color:white;
      position:relative;
      z-index:1;
    }

    .map-wrapper{
      text-align:center;
      margin-bottom: clamp(2.5rem, 6vw, 4.25rem);
    }

    .map-header h2{
      font-size: clamp(1.7rem, 4.5vw, 2.4rem);
      color: var(--brand-cream);
      margin-bottom: 0.625rem;
    }

    .map-header p{
      color: rgba(255,255,255,0.85);
      font-size: 1rem;
      margin-bottom: 1.5rem;
    }

    .map-glass{
      width:100%;
      height: min(430px, 55vh);
      border-radius: 25px;
      overflow:hidden;
      border: 1px solid rgba(255,255,255,0.25);
      box-shadow: 0 25px 70px rgba(0,0,0,0.6);
      background: rgba(255,255,255,0.05);
    }
    .map-glass iframe{ width:100%; height:100%; border:0; }

    .site-footer{
      margin-top: clamp(3.5rem, 7vw, 5rem);
      padding-top: clamp(2.5rem, 6vw, 3.75rem);
      border-top: 1px solid rgba(255,255,255,0.15);
    }

    .footer-grid{
      display:grid;
      grid-template-columns: 1fr;
      gap: clamp(1.25rem, 4vw, 2.5rem);
      align-items:start;
      text-align:left;
    }

    .footer-col h3,
    .footer-col h4{
      color: var(--brand-cream);
      margin-bottom: 0.9rem;
      text-align:left;
    }

    .footer-col p,
    .footer-col a{
      color: rgba(255,255,255,0.85);
      font-size: 0.98rem;
      line-height: 1.6;
      text-decoration:none;
      display:block;
      margin-bottom: 0.55rem;
    }

    .footer-col a:hover{ color: var(--brand-gold); }

    .footer-badge{
      margin-top: 0.8rem;
      display:inline-block;
      padding: 0.5rem 0.9rem;
      background: rgba(197,160,89,0.15);
      border: 1px solid rgba(197,160,89,0.35);
      border-radius: 999px;
      font-size: 0.92rem;
    }

    .scroll-to-top{
      margin-top: 0.25rem;
      background: var(--brand-gold);
      border:none;
      border-radius:50%;
      width: clamp(2.6rem, 7vw, 3.1rem);
      height: clamp(2.6rem, 7vw, 3.1rem);
      cursor:pointer;
      font-size: 1.45rem;
      font-weight:800;
      color: var(--text-main);
      display:flex;
      align-items:center;
      justify-content:center;
      transition: all 0.3s ease;
      margin-left:auto;
      margin-right:auto;
      text-decoration:none;
    }

    .scroll-to-top:hover{
      background: var(--accent-gold);
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(197,160,89,0.4);
    }

    .footer-bottom{
      text-align:center;
      margin-top: 3rem;
      color: rgba(255,255,255,0.6);
      font-size: 0.9rem;
    }

    /* ================= MEDIA QUERIES ================= */
    @media (min-width: 768px){
      .footer-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .staff-item{ flex: 0 0 52%; }
      .hero{ padding-top: calc(5rem + 4vh); }
      .mobile-menu{ width: min(92vw, 720px); }
    }

    @media (min-width: 1024px){
      .footer-grid{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
      .staff-item img{
        aspect-ratio: 4 / 3;
      }
      .staff-btn{ width: 50px; height: 50px; font-size: 20px; }
      .nav-btn{ width: 45px; height: 45px; font-size: 18px; }
      .gallery-item img{
        height: 220px;
      }
      .gallery-item{
        flex: 0 0 320px;
      }
      .gallery-container{
        padding: 80px 40%;
      }
      .gallery-wrapper::after{
        bottom: 30px;
        width: 300px;
        height: 40px;
      }
    }

    /* Mobile-first navigation switch */
    @media (max-width: 820px){
      .nav-divider{ display:none; }
      .nav-links{ display:none; }
      .nav-toggle{ display:flex; }
      .cta-btn{ font-size: 0.8rem; padding: 0.7rem 1rem; }
      .sub-text{ letter-spacing: 1.5px; }
    }

    @media (max-width: 420px){
      .hero{ height: 92vh; padding-top: calc(5rem + 2vh); }
      .cta-btn{ display:none; }
    }

    @media (prefers-reduced-motion: reduce){
      .bg-slide, .bg-overlay, .nav-container, .staff-item, .gallery-item{ transition:none !important; animation:none !important; }
      *{ scroll-behavior:auto; }
    }

    /* Reveal styles preserved (were referenced by JS) */
    .reveal{ opacity:0; transform: translateY(50px); transition: all 1s var(--ease-out); }
    .reveal.active{ opacity:1; transform: translateY(0); }

    @keyframes fadeIn{
      from{ opacity:0; transform: translateY(20px); }
      to{ opacity:1; transform: translateY(0); }
    }