/* Sri Sarguru Matriculation School — styles.css */

:root{
  --navy:#1c2a63; --navy-deep:#141f4b; --ivory:#faf6ea; --ivory-dim:#f0eada;
  --red:#b93a2b; --gold:#c9a24b; --ink:#242838; --muted:#5b6079; --line:#e8e1cc;
  --s-pad:110px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:90px}
body{font-family:Inter,system-ui,-apple-system,sans-serif;font-size:18px;line-height:1.7;
  color:var(--ink);background:var(--ivory);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:Poppins,system-ui,sans-serif;line-height:1.15;font-weight:600}
.tamil{font-family:'Noto Sans Tamil',Inter,sans-serif}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px}
section{padding:var(--s-pad) 0}
.tint{background:var(--ivory-dim)}
img{display:block;max-width:100%}
a{color:inherit}
.skip{position:absolute;left:-9999px;top:0;background:var(--navy);color:#fff;padding:12px 20px;z-index:200}
.skip:focus{left:0}

/* ---------- Nav ---------- */
nav{position:sticky;top:0;z-index:50;background:rgba(250,246,234,.94);
  backdrop-filter:blur(10px);transition:box-shadow .25s}
nav.scrolled{box-shadow:0 2px 24px rgba(28,42,99,.12)}
.nav-in{display:flex;align-items:center;gap:20px;padding:14px 24px;max-width:1320px;margin:0 auto}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;flex-shrink:0}
.brand img{width:54px;height:54px;border-radius:50%}
.brand span{font-family:Poppins;font-weight:600;font-size:15px;line-height:1.25;color:var(--navy)}
.menu{display:flex;align-items:center;gap:22px;margin-left:auto}
.menu>a{text-decoration:none;font-size:15px;font-weight:500;color:var(--navy);position:relative;
  padding:4px 0;white-space:nowrap}
.menu>a::after{content:'';position:absolute;left:0;right:100%;bottom:0;height:2px;background:var(--gold);transition:right .25s}
.menu>a:hover::after,.menu>a.active::after{right:0}
.socials-nav{display:flex;gap:9px;margin-left:20px;padding-left:20px;border-left:1px solid #ddd4bc;flex-shrink:0}
.socials-nav a{width:34px;height:34px;border-radius:50%;background:var(--navy);display:flex;
  align-items:center;justify-content:center;transition:background .2s,transform .2s}
.socials-nav a:hover{background:var(--red);transform:translateY(-2px)}
.socials-nav svg{width:16px;height:16px;fill:#fff}
.menu-toggle{display:none;background:none;border:0;font-size:26px;color:var(--navy);cursor:pointer;margin-left:auto}
/* .menu>a outranks .btn on specificity, which was stripping the header CTA of
   its white text, padding and weight. Restore them at matching specificity so
   it is the same button as the one in the hero. */
.menu>a.nav-cta{margin-left:16px;flex-shrink:0;white-space:nowrap;color:#fff;font-weight:600;
  padding:13px 24px;border-radius:4px;font-size:15px}
.menu>a.nav-cta::after{display:none}

.btn{display:inline-block;background:var(--red);color:#fff;text-decoration:none;font-weight:600;
  font-size:15px;padding:13px 26px;border-radius:4px;border:0;cursor:pointer;font-family:Inter;
  transition:background .2s,transform .2s}
.btn:hover{background:#a13023;transform:translateY(-1px)}
.btn.ghost{background:transparent;border:1.5px solid #fff;color:#fff}
.btn.ghost:hover{background:rgba(255,255,255,.14)}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:88vh;display:flex;align-items:center;color:#fff;overflow:hidden}
.hero-bg{position:absolute;inset:0;background-size:cover;background-position:center 35%;z-index:-2}
.hero::after{content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,rgba(20,31,75,.9) 0%,rgba(20,31,75,.66) 55%,rgba(20,31,75,.38) 100%)}
.hero-in{max-width:760px;padding:60px 24px}
.tag{display:inline-block;font-size:13px;letter-spacing:.09em;text-transform:uppercase;
  border:1px solid rgba(255,255,255,.4);padding:7px 15px;border-radius:3px;margin-bottom:26px}
.hero h1{font-size:clamp(38px,5.4vw,64px);margin-bottom:20px;letter-spacing:-.02em}
.hero .lede{font-size:19px;opacity:.93;margin-bottom:34px;max-width:60ch}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap}

/* ---------- Stats ---------- */
.stats{background:var(--navy);color:#fff;padding:44px 0}
.stats-in{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;text-align:center}
.stat b{display:block;font-family:Poppins;font-size:clamp(26px,3.4vw,36px);color:var(--gold);margin-bottom:5px}
.stat span{font-size:15px;opacity:.86}

/* ---------- Section heads ---------- */
.sec-head{text-align:center;max-width:680px;margin:0 auto 58px}
.eyebrow{font-size:13px;letter-spacing:.13em;text-transform:uppercase;color:var(--red);font-weight:600;margin-bottom:12px}
h2{font-size:clamp(30px,4vw,42px);color:var(--navy);margin-bottom:16px;letter-spacing:-.015em}
.sec-head p{color:var(--muted)}

/* ---------- Why parents choose ---------- */
.why{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.wcard{background:#fff;border:1px solid var(--line);border-radius:8px;padding:34px 26px;
  transition:border-color .2s,background .2s}
.wcard:hover{border-color:var(--gold);background:#fffdf6}
.wcard svg{width:44px;height:44px;fill:none;stroke:var(--red);stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;margin-bottom:18px}
.wcard h3{font-size:19px;color:var(--navy);margin-bottom:9px}
.wcard p{font-size:15.5px;color:var(--muted);line-height:1.6}

/* ---------- Split ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.split.rev>*:first-child{order:2}
.framed{border-radius:10px;overflow:hidden;aspect-ratio:2/3;max-height:600px;
  box-shadow:0 18px 44px rgba(20,31,75,.13)}
.framed>img{width:100%;height:100%;object-fit:cover;object-position:center 22%;display:block}
.framed.wide{aspect-ratio:3/2}
.framed.plain{box-shadow:none;border-radius:0;aspect-ratio:auto;max-height:none}
.framed.plain>img{height:auto;object-fit:contain}
.split-txt h2{margin-bottom:18px}
.split-txt p{color:var(--muted);margin-bottom:16px}
.split-txt .btn{margin-top:12px}
.suits-list{list-style:none;margin-top:8px}
.suits-list li{padding:13px 0 13px 32px;border-bottom:1px solid #e5ddc6;position:relative;font-size:16.5px}
.suits-list li::before{content:'';position:absolute;left:4px;top:20px;width:9px;height:9px;
  background:var(--gold);border-radius:50%}

/* ---------- Bold quote band ---------- */
/* Flex without a direction laid the Tamil line out beside the quote instead of
   under it, which is what made this band look lopsided. */
.quote-band{position:relative;min-height:460px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  text-align:center;color:#fff;padding:100px 24px;overflow:hidden}
.quote-band .bg{position:absolute;inset:0;background-size:cover;background-position:center 32%;z-index:-2}
.quote-band::after{content:'';position:absolute;inset:0;background:rgba(16,24,58,.76);z-index:-1}
.quote-band blockquote{max-width:900px;font-family:Poppins;font-size:clamp(24px,3.6vw,40px);
  line-height:1.32;font-weight:500;letter-spacing:-.01em}
.quote-band .attrib{margin-top:26px;font-size:14px;letter-spacing:.13em;text-transform:uppercase;opacity:.82}

/* ---------- Continuous photo strip ---------- */
.strip-sec{padding:0;background:var(--navy-deep)}
.strip-head{text-align:center;padding:52px 24px 30px;color:#fff}
.strip-head .eyebrow{color:var(--gold)}
.strip-head h2{color:#fff;margin:0}
.marquee{overflow:hidden;padding-bottom:56px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.marquee-track{display:flex;gap:18px;width:max-content;animation:slide 68s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee img{height:270px;width:auto;border-radius:6px;flex-shrink:0}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- Chips + moment tiles ---------- */
.chips{display:flex;flex-wrap:wrap;gap:11px;justify-content:center;margin-bottom:64px}
.chip{background:#fff;border:1px solid #e2d9bf;border-radius:100px;padding:9px 20px;
  font-size:14.5px;font-weight:500;color:var(--navy)}
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.tile{position:relative;min-height:270px;border-radius:8px;overflow:hidden;isolation:isolate;
  border:0;padding:0;background:var(--navy-deep);color:#fff;cursor:pointer;text-align:left;
  font-family:inherit;transition:transform .25s}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%;
  z-index:-1;transition:transform .5s}
.tile::after{content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top,rgba(16,24,58,.9) 0%,rgba(16,24,58,.15) 60%)}
.tile:hover{transform:translateY(-4px)}
.tile:hover img{transform:scale(1.06)}
.ttxt{position:absolute;bottom:0;padding:22px 20px}
.ttxt h3{font-size:19px;margin-bottom:3px}
.ttxt span{font-size:13.5px;opacity:.85}

/* ---------- Achievements ---------- */
.ach{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.acard{background:#fff;border:1px solid var(--line);border-radius:8px;overflow:hidden;transition:border-color .2s}
.acard:hover{border-color:var(--gold)}
.acard img{width:100%;height:210px;object-fit:cover;object-position:center 30%}
.acard .body{padding:26px 24px}
.acard h3{font-size:19px;color:var(--navy);margin-bottom:8px}
.acard p{font-size:15.5px;color:var(--muted);line-height:1.6}

/* ---------- Facilities ---------- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.card{background:#fff;border:1px solid var(--line);border-left:3px solid transparent;border-radius:6px;
  padding:30px 28px;transition:border-color .2s,background .2s}
.card:hover{border-left-color:var(--gold);background:#fffdf6}
.card svg{width:34px;height:34px;fill:none;stroke:var(--navy);stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;margin-bottom:16px}
.card h3{font-size:18px;color:var(--navy);margin-bottom:7px}
.card p{font-size:15.5px;color:var(--muted);line-height:1.6}

/* ---------- Videos ---------- */
.vids{display:grid;grid-template-columns:1.6fr 1fr;gap:24px;align-items:start}
.vframe{border-radius:8px;overflow:hidden;background:var(--navy-deep);position:relative}
.vframe.wide{aspect-ratio:16/9}
.vframe.tall{aspect-ratio:9/16;max-height:560px;margin:0 auto;width:100%}
.vframe iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ---------- Admissions ---------- */
.admit{background:var(--navy);color:#fff}
.admit h2{color:#fff}
.admit .eyebrow{color:var(--gold)}
.admit-in{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.admit p{opacity:.9;margin-bottom:22px}
.steps{list-style:none;counter-reset:s}
.steps li{counter-increment:s;padding:12px 0 12px 46px;position:relative;
  border-bottom:1px solid rgba(255,255,255,.14);font-size:16px}
.steps li::before{content:counter(s);position:absolute;left:0;top:12px;width:30px;height:30px;
  border-radius:50%;background:var(--gold);color:var(--navy-deep);display:flex;align-items:center;
  justify-content:center;font-weight:700;font-size:14px;font-family:Poppins}
.form-card{background:#fff;border-radius:8px;padding:14px;color:var(--ink);overflow:hidden}

/* ---------- Contact ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:36px}
.contact-card{background:#fff;border:1px solid var(--line);border-radius:8px;padding:34px}
.contact-card h3{color:var(--navy);margin-bottom:20px;font-size:21px}
.crow{display:flex;gap:14px;padding:12px 0;border-bottom:1px solid #f0eada;font-size:16px;align-items:flex-start}
.crow svg{width:20px;height:20px;fill:none;stroke:var(--red);stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;margin-top:3px}
.crow a{color:var(--navy);font-weight:500}
.map{border-radius:8px;overflow:hidden;min-height:380px;border:1px solid var(--line)}
.map iframe{width:100%;height:100%;min-height:380px;border:0;display:block}

/* ---------- Page hero (About) ---------- */
.page-hero{position:relative;color:#fff;padding:132px 0 104px;overflow:hidden;min-height:400px;
  display:flex;align-items:center}
.page-hero .bg{position:absolute;inset:0;background-size:cover;background-position:center 24%;z-index:-2}
.page-hero::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(20,31,75,.62) 0%,rgba(20,31,75,.80) 100%);z-index:-1}
.page-hero h1{font-size:clamp(34px,5vw,54px);margin-bottom:12px}
.page-hero p{opacity:.9}
.back-link{display:inline-block;margin-bottom:34px;color:var(--red);text-decoration:none;font-weight:600;font-size:15px}
.back-link:hover{text-decoration:underline}
.prose{max-width:760px}
.prose h3{font-size:24px;color:var(--navy);margin:34px 0 12px}
.prose p{color:var(--muted);margin-bottom:16px}
.gallery2{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.gallery2 img{border-radius:10px;width:100%;height:340px;object-fit:cover;object-position:center 28%}

/* ---------- Footer ---------- */
footer{background:var(--navy-deep);color:#fff;padding:70px 0 26px}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:48px;margin-bottom:44px}
.foot-brand{display:flex;align-items:center;gap:13px;margin-bottom:18px}
.foot-brand img{width:56px;height:56px;border-radius:50%}
.foot-brand b{font-family:Poppins;font-size:16px;line-height:1.25}
footer p,footer li{font-size:14.5px;opacity:.84;line-height:1.85}
footer h4{font-size:15px;margin-bottom:16px;color:var(--gold);font-family:Poppins}
footer ul{list-style:none}
footer a{text-decoration:none}
footer a:hover{color:var(--gold)}
.foot-code{margin-top:12px;opacity:.6;font-size:13px}
.foot-bottom{border-top:1px solid rgba(255,255,255,.14);padding-top:22px;display:flex;
  justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:13.5px;opacity:.72}

/* ---------- Overlay + gallery ---------- */
.overlay{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:20px}
.overlay[hidden]{display:none}
.ov-back{position:absolute;inset:0;background:rgba(12,18,44,.8);backdrop-filter:blur(4px)}
.ov-box{position:relative;background:var(--ivory);border-radius:10px;max-width:860px;width:100%;
  max-height:88vh;overflow-y:auto;box-shadow:0 30px 90px rgba(0,0,0,.5)}
.ov-close{position:absolute;top:14px;right:14px;z-index:2;width:40px;height:40px;border-radius:50%;
  border:0;background:rgba(20,31,75,.75);color:#fff;font-size:24px;cursor:pointer}
.ov-close:hover{background:var(--red)}
.ov-body{padding:34px}
.ov-body h3{font-size:clamp(24px,3vw,32px);color:var(--navy);margin-bottom:12px;padding-right:46px}
.ov-body>p{color:var(--muted);margin-bottom:24px}
.gal{position:relative;border-radius:10px;overflow:hidden;background:var(--ivory-dim)}
.track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none}
.track::-webkit-scrollbar{display:none}
.track img{flex:0 0 100%;width:100%;aspect-ratio:3/2;height:auto;object-fit:cover;
  object-position:center 30%;scroll-snap-align:center;display:block}
.dots{position:absolute;left:0;right:0;bottom:14px;display:flex;gap:8px;justify-content:center;
  padding:8px 0;background:linear-gradient(transparent,rgba(16,24,58,.42))}
.dot{width:9px;height:9px;border-radius:50%;border:1px solid rgba(255,255,255,.95);background:transparent;
  padding:0;cursor:pointer;box-shadow:0 1px 3px rgba(0,0,0,.45)}
.dot[aria-selected=true]{background:#fff}
.gnav{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;
  border:0;background:rgba(16,24,58,.74);color:#fff;font-size:22px;cursor:pointer;opacity:0;
  transition:opacity .2s,background .2s;box-shadow:0 2px 10px rgba(0,0,0,.3)}
.gnav:hover{background:rgba(16,24,58,.92)}
.gal:hover .gnav,.gnav:focus-visible{opacity:1}
.gnav.p{left:10px}.gnav.n{right:10px}
.gal.single .gnav,.gal.single .dots{display:none}
.moment-src{display:none}

/* ---------- WhatsApp float ---------- */
.wa-float{position:fixed;right:20px;bottom:20px;z-index:60;width:56px;height:56px;border-radius:50%;
  background:#25d366;display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 24px rgba(0,0,0,.26);transition:transform .2s}
.wa-float:hover{transform:scale(1.07)}
.wa-float svg{width:30px;height:30px;fill:#fff}

/* ---------- Reveal ---------- */
.rise{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
.rise.in{opacity:1;transform:none}

/* ---------- Responsive ---------- */
@media(max-width:1000px){
  .why,.tiles{grid-template-columns:repeat(2,1fr)}
  .ach,.cards{grid-template-columns:1fr 1fr}
  .vids{grid-template-columns:1fr}
  .vframe.tall{max-width:330px}
}
/* The desktop bar runs out of room well before the old 860px hamburger
   breakpoint, which is what made it wrap. Collapse the nav on its own. */
@media(max-width:1120px){
  .menu{display:none;position:absolute;top:100%;left:0;right:0;background:var(--ivory);
    flex-direction:column;align-items:flex-start;gap:0;padding:14px 24px;
    box-shadow:0 12px 30px rgba(0,0,0,.14)}
  .menu.open{display:flex}
  .menu>a{padding:12px 0;width:100%}
  .socials-nav{margin:12px 0 0;padding:14px 0 0;border-left:0;border-top:1px solid #ddd4bc;width:100%}
  .nav-cta{margin:14px 0 0;align-self:flex-start}
  .menu-toggle{display:block}
}

@media(max-width:860px){
  :root{--s-pad:74px}
  body{font-size:17px}
  .split,.admit-in,.contact-grid,.gallery2{grid-template-columns:1fr;gap:36px}
  .split.rev>*:first-child{order:0}
  /* The credentials panel needs its heading first on a narrow screen,
     otherwise two logos arrive with no context. */
  .split.rev>.suits-marks{order:2}
  /* 2:3 is too tall on a phone, but a landscape frame would gut the portrait
     photos, so these sit at 4:5 on narrow screens. */
  .framed{aspect-ratio:4/5;max-height:none}
  .framed.wide{aspect-ratio:3/2}
  .suits-marks{padding:34px 22px}
  .stats-in{grid-template-columns:1fr;gap:22px}
  .ach,.cards,.why,.tiles{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr;gap:32px}
  .gnav{opacity:1}
  .marquee img{height:190px}
  .gallery2 img{height:260px}
  .ov-body{padding:24px 20px 30px}
  .page-hero{min-height:320px;padding:100px 0 76px}
}

/* ---------- SUITS credentials panel ---------- */
.suits-marks{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;
  background:var(--ivory);border:1px solid #e7dfc7;border-radius:12px;padding:44px 34px;
  box-shadow:0 18px 44px rgba(20,31,75,.09)}
.suits-marks img.mark{width:min(320px,80%);height:auto;display:block}
.suits-marks .rule{width:64%;height:1px;background:#e2d9bf}
.suits-uni{display:flex;align-items:center;gap:16px}
.suits-uni img{width:76px;height:76px;flex-shrink:0}
.suits-uni b{display:block;font-family:Poppins;font-size:17px;color:var(--navy);line-height:1.3}
.suits-uni span{font-size:14px;color:var(--muted)}

/* ---------- Video facade: one player at a time ---------- */
.vfacade{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;cursor:pointer;
  background:var(--navy-deep);display:block;overflow:hidden}
.vfacade img{width:100%;height:100%;object-fit:cover;display:block;opacity:.82;transition:opacity .25s,transform .4s}
/* If YouTube's poster never arrives the navy panel and play button still read
   as a video, so the section degrades cleanly instead of showing a broken icon. */
.vfacade img:not([src]),.vfacade img[src=""]{display:none}
.vfacade:hover img{opacity:1;transform:scale(1.03)}
.vplay{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:70px;height:70px;
  border-radius:50%;background:rgba(185,58,43,.94);display:flex;align-items:center;justify-content:center;
  transition:transform .25s,background .2s;pointer-events:none}
.vfacade:hover .vplay{transform:translate(-50%,-50%) scale(1.09);background:var(--red)}
.vplay svg{width:26px;height:26px;fill:#fff;margin-left:4px}
.vlabel{position:absolute;left:0;right:0;bottom:0;padding:44px 20px 16px;color:#fff;font-size:14.5px;
  background:linear-gradient(transparent,rgba(16,24,58,.86));text-align:left;pointer-events:none}

/* ---------- Marquee fallback when motion is reduced ---------- */
@media(prefers-reduced-motion:reduce){
  .marquee{overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
  .marquee::-webkit-scrollbar{display:none}
  .marquee-track{animation:none;width:max-content;flex-wrap:nowrap;justify-content:flex-start;padding:0 24px}
  .marquee-track img{scroll-snap-align:center}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rise{opacity:1;transform:none;transition:none}
  .track{scroll-behavior:auto}
  .tile,.tile img{transition:none}
}