/* RAMSC v2 — styles.css (patched)
   Changes:
   - Reveal sections visible by default; JS-only animation via `html.js` gate.
   - Absolute cover only for video.hero-video; static img.hero-video stays in flow.
   - Safer reduced-motion block.
*/

:root{ --brand-1:#2ED3E6; --brand-2:#FFD166; --bg:#ffffff; --text:#0f172a; --muted:#475569; --accent:#7C3AED; --surface:#f8fafc; --radius:16px; --shadow:0 10px 30px rgba(2,6,23,.1); }
*{box-sizing:border-box} 
html{scroll-behavior:smooth}
body{margin:0;font-family:'Montserrat',system-ui,-apple-system,Segoe UI,Roboto,Arial,'Noto Sans Thai',sans-serif;color:var(--text);background:var(--bg);line-height:1.6}
img{max-width:100%;display:block;height:auto} 
a{color:inherit;text-decoration:none}
.container{width:min(1100px,92vw);margin-inline:auto} 
.section{padding:clamp(2rem,4vw,4rem) 0}
.section-header{max-width:60ch;margin:0 auto 1.6rem;text-align:center}
.skip-link{position:absolute;top:-40px;left:0;background:#000;color:#fff;padding:.5rem 1rem;z-index:1000}
.skip-link:focus{top:0}

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 9999;
  background:#1c005c; 
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  color: #e5e7eb;
}

.site-header.scrolled {
  box-shadow: 0 12px 20px rgba(0, 0, 0, 0.2); 
}
.nav-wrap{display:flex;align-items:center;justify-content:space-between;padding:.8rem 0}
.logo{font-weight:700;letter-spacing:.04em} 
.site-nav ul{display:flex;gap:1.2rem;list-style:none;padding:0;margin:0}
.nav-toggle{display:none;background:none;border:0;padding:.25rem}
.nav-toggle .bar{display:block;width:24px;height:2px;background:var(--text);margin:5px 0}

@media(max-width:768px){ 
  .nav-toggle{display:block} 
  .site-nav{position:fixed;inset:64px 0 auto 0;background:var(--bg);transform:translateY(-120%);transition:transform .25s ease;border-bottom:1px solid #e5e7eb}
  .site-nav.open{transform:translateY(0)} 
  .site-nav ul{flex-direction:column;padding:1rem} 
}

/* Hero */
.hero{position:relative;min-height:100vh}
.video-wrap{position:relative;min-height:100vh;overflow:hidden;border-radius:0 0 var(--radius) var(--radius)}
/* Important: only video fills cover */
video.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;aspect-ratio:16/9}
/* Static image version stays in flow */
.hero img.hero-video{position:static;width:100%;height:auto;display:block}
.hero-overlay{
  position:relative;z-index:2;display:grid;place-items:center;min-height:100vh;
  padding:clamp(2rem,6vw,8rem) 1rem;
  background:linear-gradient(to bottom, rgba(0,0,0,.30), rgba(0,0,0,.15), transparent 60%);
  color:#fff;text-align:center
}
.hero-title{font-size:clamp(2rem,6vw,3.6rem);margin:0 0 .5rem}
.hero-cta{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap}

/* Buttons */
.btn{display:inline-block;padding:.8rem 1.1rem;border-radius:999px;border:1px solid transparent;cursor:pointer}
.btn-primary{background:var(--brand-1);color:#003;font-weight:600} 
.btn-secondary{background:var(--brand-2);color:#332;font-weight:600}

/* Chips & Cards */
.chip{display:inline-block;font-size:.75rem;padding:.15rem .5rem;border-radius:999px;background:color-mix(in oklab, var(--accent) 16%, #fff);color:color-mix(in oklab, var(--accent) 70%, #000)}
.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:clamp(1rem,3vw,1.5rem)}
.card{background:rgb(224, 224, 224);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);transition:transform .15s ease, box-shadow .2s ease}
.card:hover{transform:translateY(-4px);box-shadow:0 14px 40px rgba(2,6,23,.12)}
.card-link{display:block;color:inherit;text-decoration:none;height:100%}
.card-link img{display:block;width:100%;height:auto}
.card-body{padding:1rem}
.card-text{font-size: 20px;font-weight: 450;color: #003;text-align: center;}
.card-titles{font-size: 25px;font-weight: 600;color: #1c005c;text-align: center;}
.card-date{font-size: 14px;color: #555;text-align: center;margin-top: .25rem;}

/* Org */
.org-grid{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center}
.org-chip{padding:.5rem .8rem;border-radius:999px;background:var(--surface);box-shadow:var(--shadow)}

/* Values, timeline, gallery */
.values-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1rem;list-style:none;padding:0;margin:1rem 0 0}
.timeline{display:grid;gap:1rem} 
.tl-item{display:grid;grid-template-columns:24px 1fr;gap:.8rem}
.tl-dot{width:12px;height:12px;border-radius:50%;background:var(--accent);margin-top:.6rem;box-shadow:0 0 0 4px color-mix(in oklab, var(--accent) 30%, #fff)}
.tl-content{background:var(--surface);border-radius:var(--radius);padding:1rem;box-shadow:var(--shadow)}
.gallery-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem}
.gallery-item img{border-radius:var(--radius);box-shadow:var(--shadow)}
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.75);display:grid;place-items:center;opacity:0;visibility:hidden;transition:opacity .2s ease;z-index:9999}
.lightbox.open{opacity:1;visibility:visible} 
.lightbox-img{max-width:90vw;max-height:80vh;border-radius:var(--radius);box-shadow:var(--shadow)}
.lightbox-close{position:absolute;top:1rem;right:1rem;font-size:2rem;border:0;background:transparent;color:#fff;cursor:pointer}

/* Depts */
.dept-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem}
.dept-card{background:var(--surface);border-radius:var(--radius);padding:1rem;box-shadow:var(--shadow)}

/* Members */
.filters{display:flex;gap:.6rem;flex-wrap:wrap;margin-bottom:1rem}
.filters input,.filters select{padding:.6rem .8rem;border-radius:.7rem;border:1px solid #e5e7eb;font:inherit}
.member-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem}
.member-card{background:var(--bg);border-radius:var(--radius);padding:1rem;box-shadow:var(--shadow)}
.avatar img{width:72px;height:72px;border-radius:50%;object-fit:cover;margin-bottom:.5rem}
.member-role{color:var(--muted)}

/* FAQs */
.faq-list details{background:var(--surface);border-radius:var(--radius);padding:1rem;margin:.6rem 0;box-shadow:var(--shadow)}
.faq-list summary{cursor:pointer;font-weight:600}

/* Contact */
.contact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1rem}
.contact-form label{display:block;margin:.4rem 0}
.contact-form input,.contact-form textarea{width:100%;padding:.6rem .8rem;border:1px solid #e5e7eb;border-radius:.6rem;font:inherit}

/* Footer */
.site-footer{background:#1c005c;padding:2rem ;margin-top:0rem;}
.footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem}
.unstyled{list-style:none;padding:0;margin:0} 
.smallprint{border-top:1px solid #7b7b7b;padding-top:1rem;margin-top:1rem;color:#e5e7eb;font-size:.9rem;text-align: center;}
.footers{margin-top:  150px; width: 100%; padding :50px;background: rgb(250, 255, 198);color:#1c005c;display: flex;gap:2rem;}
.footers div{text-align: left;}
.col-3, .col-2 , .col-4 {
  flex-grow: 1;       
  flex-basis: 0;      
}
.col-1{ flex-grow: 2;flex-basis: 0;}
.col-1 a{display:flex;text-decoration: none;color: #1c005c;margin-bottom: 10px;}
.social-icons {
  display: flex;       
  gap: 10px;           
  margin-top: 10px;    
}

.footimg {
  width: 40px;
  height: 40px;
}
.col-2 a{display: block;text-decoration: none;color: #1c005c;margin-bottom: 8px;}
.col-3 a{display: block;text-decoration: none;color: #1c005c;margin-bottom: 8px;}
.btnfoot{font-weight:400;}
.btnfoot:hover{font-weight:600;color: #400abe;}
/* Reveal on scroll — progressive enhancement 
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal.in-view {
  opacity: 1;
  transform: none;
}
 Animate only when JS is confirmed 
html.js .reveal{
  opacity:0;
  transform:translateY(24px);

  transform:translateY(20px);
}
html.js .reveal.in-view{
  opacity:1;
  transform:translateY(0);
}*/
.reveal{}
/* A11y & type */
:focus-visible{outline:2px solid var(--brand-1);outline-offset:2px}
h1{font-size:clamp(1.8rem,2vw + 1.2rem,2.6rem)} 
h2{font-size:clamp(1.4rem,1.6vw + 1rem,2rem)} 
h3{font-size:clamp(1.1rem,1vw + .8rem,1.4rem)}

/* Motion preferences */
@media (prefers-reduced-motion: reduce){
  .reveal{transition:none;transform:none;opacity:1}
  video.hero-video{animation:none}
}
.btnsite{font-weight: 450; color:#ffffff}
.btnsite:hover{font-weight: 600; color:#4169c9}

.Htext{font-weight: 500;}
.imglogo{width: 40px;height: 40px;}