/* ==========================================================================
   Marcaz Shuban Academy — shared stylesheet
   ========================================================================== */

:root{
  --ivory:#F6F1E3;
  --ivory-2:#EFE7D2;
  --emerald:#123832;
  --emerald-deep:#0A2420;
  --emerald-mid:#1B4B43;
  --gold:#C79A46;
  --gold-light:#E7CE8E;
  --ink:#1C2B27;
  --moss:#5C6E64;
  --line: rgba(18,56,50,0.14);
  --radius: 2px;

  --star-mask: url('data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><polygon points=%2250,3 61,30 90,26 70,50 90,74 61,70 50,97 39,70 10,74 30,50 10,26 39,30%22/></svg>');
  --star-svg: url('data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><polygon fill=%22%23C79A46%22 points=%2250,3 61,30 90,26 70,50 90,74 61,70 50,97 39,70 10,74 30,50 10,26 39,30%22/></svg>');
  --star-tile: url('data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%22140%22 height=%22140%22 viewBox=%220 0 140 140%22><g fill=%22none%22 stroke=%22%23E7CE8E%22 stroke-width=%220.7%22><polygon points=%2270,20 82,50 113,45 91,70 113,95 82,90 70,120 58,90 27,95 49,70 27,45 58,50%22/></g></svg>');
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--ivory);
  color:var(--ink);
  font-family:'Work Sans', sans-serif;
  font-weight:400;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{
  font-family:'Amiri', serif;
  margin:0;
  color:var(--emerald-deep);
  font-weight:700;
}
.eyebrow{
  font-family:'Reem Kufi', sans-serif;
  letter-spacing:0.14em;
  text-transform:uppercase;
  font-size:0.78rem;
  color:var(--gold);
  display:flex;
  align-items:center;
  gap:0.6rem;
}
.eyebrow::before{
  content:"";
  width:16px;height:16px;
  background: var(--star-svg);
  display:inline-block;
}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
.wrap{max-width:1120px;margin:0 auto;padding:0 28px;}
@media (max-width:640px){.wrap{padding:0 20px;}}

.star{
  display:inline-block;width:1em;height:1em;
  background:currentColor;
  -webkit-mask: var(--star-mask) center/contain no-repeat;
  mask: var(--star-mask) center/contain no-repeat;
}

/* ---------- header ---------- */
header{
  position:sticky;top:0;z-index:50;
  background:rgba(246,241,227,0.92);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
}
.nav{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 28px;max-width:1120px;margin:0 auto;
}
.brand{display:flex;align-items:center;gap:12px;}
.brand-mark{
  width:48px;height:48px;border-radius:50%;
  background:var(--ivory);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
  padding:4px;
  overflow:hidden;
  border:1px solid var(--line);
}
.brand-mark img{width:100%;height:100%;object-fit:contain;}
footer .brand-mark{border-color:rgba(246,241,227,0.25);}
.brand-text{font-family:'Amiri',serif;font-weight:700;font-size:1.05rem;color:var(--emerald-deep);line-height:1.15;}
.brand-text span{display:block;font-family:'Reem Kufi',sans-serif;font-weight:400;font-size:0.62rem;letter-spacing:0.12em;color:var(--moss);text-transform:uppercase;margin-top:2px;}
nav.links{display:flex;gap:26px;align-items:center;}
nav.links a{font-size:0.88rem;font-weight:500;color:var(--emerald);position:relative;padding:4px 0;}
nav.links a:hover{color:var(--gold);}
nav.links a.active{color:var(--gold);}
nav.links a.active::after{
  content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;background:var(--gold);
}
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:11px 22px;border-radius:var(--radius);
  font-size:0.86rem;font-weight:600;letter-spacing:0.02em;
  border:1px solid var(--emerald);
  transition:all .2s ease;
  white-space:nowrap;
}
.btn-solid{background:var(--emerald);color:var(--ivory);}
.btn-solid:hover{background:var(--emerald-deep);}
.btn-outline{border-color:var(--emerald);color:var(--emerald);}
.btn-outline:hover{background:var(--emerald);color:var(--ivory);}
.btn-gold{background:var(--gold);border-color:var(--gold);color:var(--emerald-deep);}
.btn-gold:hover{background:var(--gold-light);border-color:var(--gold-light);}
.menu-toggle{display:none;background:none;border:none;font-size:1.6rem;color:var(--emerald);cursor:pointer;}
@media (max-width:900px){
  nav.links{position:fixed;top:73px;left:0;right:0;background:var(--ivory);flex-direction:column;align-items:flex-start;padding:20px 28px 28px;gap:16px;border-bottom:1px solid var(--line);transform:translateY(-130%);opacity:0;transition:all .25s ease;max-height:80vh;overflow-y:auto;}
  nav.links.open{transform:translateY(0);opacity:1;}
  .menu-toggle{display:block;}
}

/* ---------- hero (home) ---------- */
.hero{
  position:relative;overflow:hidden;
  background:var(--emerald-deep);
  color:var(--ivory);
  padding:110px 0 90px;
}
.hero-pattern{
  position:absolute;inset:0;
  opacity:0.16;
  background-image: var(--star-tile);
  background-size:140px 140px;
  mix-blend-mode:screen;
}
.hero-glow{
  position:absolute;right:-180px;top:-180px;width:520px;height:520px;
  background:radial-gradient(circle, rgba(199,154,70,0.35), transparent 70%);
}
.hero-inner{position:relative;display:grid;grid-template-columns:1.15fr 0.85fr;gap:56px;align-items:center;}
@media (max-width:900px){.hero-inner{grid-template-columns:1fr;}}
.hero h1{
  color:var(--ivory);
  font-size:clamp(2.4rem,5vw,3.6rem);
  line-height:1.1;
  margin:18px 0 20px;
}
.hero h1 em{color:var(--gold-light);font-style:normal;}
.hero p.lead{
  color:rgba(246,241,227,0.82);
  font-size:1.08rem;
  max-width:46ch;
  margin-bottom:34px;
}
.hero .cta-row{display:flex;gap:14px;flex-wrap:wrap;}
.hero .eyebrow{color:var(--gold-light);}
.hero .eyebrow::before{background:var(--gold-light);}

.hero-figure{
  position:relative;
  border:1px solid rgba(231,206,142,0.35);
  aspect-ratio:4/5;
  overflow:hidden;
  background:var(--emerald-mid);
}
.hero-figure img{width:100%;height:100%;object-fit:cover;object-position:center 20%;}
.hero-figure .tag{
  position:absolute;bottom:16px;left:16px;
  background:rgba(10,36,32,0.82);color:var(--gold-light);
  font-family:'Reem Kufi',sans-serif;font-size:0.68rem;letter-spacing:0.08em;
  padding:8px 14px;text-transform:uppercase;border:1px solid rgba(231,206,142,0.35);
}

.draw-star path, .draw-star polygon{
  stroke:var(--gold-light);
  stroke-width:1.1;
  fill:none;
  stroke-dasharray:900;
  stroke-dashoffset:900;
  animation:draw 2.6s ease forwards;
}
@keyframes draw{to{stroke-dashoffset:0;}}
@media (prefers-reduced-motion: reduce){
  .draw-star path, .draw-star polygon{animation:none;stroke-dashoffset:0;}
}

/* ---------- page hero (interior pages) ---------- */
.page-hero{
  position:relative;overflow:hidden;
  background:var(--emerald-deep);color:var(--ivory);
  padding:64px 0 54px;
}
.page-hero .hero-pattern{opacity:0.14;}
.page-hero .wrap{position:relative;}
.page-hero .eyebrow{color:var(--gold-light);margin-bottom:14px;}
.page-hero .eyebrow::before{background:var(--gold-light);}
.page-hero h1{color:var(--ivory);font-size:clamp(2rem,4vw,2.7rem);}
.page-hero p{color:rgba(246,241,227,0.78);max-width:60ch;margin-top:14px;font-size:1.02rem;}
.breadcrumb{font-size:0.8rem;color:rgba(246,241,227,0.55);margin-bottom:10px;}
.breadcrumb a{color:var(--gold-light);}
.breadcrumb a:hover{text-decoration:underline;}

/* ---------- section shell ---------- */
section{padding:88px 0;}
.section-head{max-width:640px;margin-bottom:48px;}
.section-head h2{font-size:clamp(1.7rem,3vw,2.3rem);margin-top:14px;}
.section-head p{color:var(--moss);margin-top:14px;font-size:1.02rem;}
.divider{
  height:1px;
  background:linear-gradient(90deg, var(--gold) 0, var(--line) 120px, var(--line) 100%);
}

/* ---------- about ---------- */
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;}
@media (max-width:860px){.about-grid{grid-template-columns:1fr;gap:36px;}}
.about-photo{
  position:relative;border:1px solid var(--line);padding:14px;
  background:var(--ivory-2);
}
.about-photo img{filter:sepia(8%) saturate(105%);}
.about-photo .tag{
  position:absolute;bottom:-16px;left:-16px;
  background:var(--emerald);color:var(--gold-light);
  font-family:'Reem Kufi',sans-serif;font-size:0.72rem;letter-spacing:0.08em;
  padding:10px 16px;text-transform:uppercase;
}
.about-copy p{margin:0 0 16px;color:var(--ink);}
.about-copy p.muted{color:var(--moss);}

.values-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--line);border:1px solid var(--line);margin-top:64px;}
@media (max-width:820px){.values-grid{grid-template-columns:1fr;}}
.value-card{background:var(--ivory);padding:34px 30px;}
.value-card .mark{
  width:34px;height:34px;background:var(--gold);margin-bottom:18px;
  -webkit-mask:var(--star-mask) center/contain no-repeat;mask:var(--star-mask) center/contain no-repeat;
}
.value-card h3{font-size:1.08rem;margin-bottom:8px;}
.value-card p{color:var(--moss);font-size:0.92rem;margin:0;}

.stats{
  margin-top:64px;
  display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
@media (max-width:760px){.stats{grid-template-columns:repeat(2,1fr);}}
.stat{padding:30px 20px;border-right:1px solid var(--line);}
.stat:last-child{border-right:none;}
@media (max-width:760px){.stat:nth-child(2n){border-right:none;}.stat{border-bottom:1px solid var(--line);}}
.stat .num{font-family:'Amiri',serif;font-size:2.1rem;color:var(--emerald);font-weight:700;}
.stat .label{font-size:0.82rem;color:var(--moss);margin-top:4px;}
.stats-note{font-size:0.78rem;color:var(--moss);margin-top:12px;font-style:italic;}

/* ---------- teaser cards (home) ---------- */
.teaser-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--line);border:1px solid var(--line);}
@media (max-width:860px){.teaser-grid{grid-template-columns:1fr;}}
.teaser-card{background:var(--ivory);padding:36px 30px;display:flex;flex-direction:column;}
.teaser-card .mark{
  width:36px;height:36px;background:var(--gold);margin-bottom:18px;
  -webkit-mask:var(--star-mask) center/contain no-repeat;mask:var(--star-mask) center/contain no-repeat;
}
.teaser-card h3{font-size:1.15rem;margin-bottom:10px;}
.teaser-card p{color:var(--moss);font-size:0.92rem;margin:0 0 20px;flex-grow:1;}
.teaser-card a{font-size:0.85rem;font-weight:600;color:var(--emerald);}
.teaser-card a:hover{color:var(--gold);}

/* ---------- academics ---------- */
.programs{
  background:var(--emerald-deep);color:var(--ivory);
  position:relative;
}
.programs .section-head p{color:rgba(246,241,227,0.72);}
.programs .section-head .eyebrow{color:var(--gold-light);}
.programs .section-head .eyebrow::before{background:var(--gold-light);}
.programs h2{color:var(--ivory);}
.program-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(246,241,227,0.14);}
@media (max-width:880px){.program-grid{grid-template-columns:1fr;}}
.program-card{background:var(--emerald-deep);padding:34px 30px;}
.program-card .mark{
  width:38px;height:38px;
  -webkit-mask:var(--star-mask) center/contain no-repeat;
  mask:var(--star-mask) center/contain no-repeat;
  background:var(--gold);
  margin-bottom:20px;
}
.program-card h3{color:var(--ivory);font-size:1.15rem;margin-bottom:10px;}
.program-card p{color:rgba(246,241,227,0.68);font-size:0.94rem;margin:0;}
.program-card ul{margin:14px 0 0;padding-left:18px;color:rgba(246,241,227,0.68);font-size:0.9rem;}
.program-card li{margin-bottom:6px;}

/* ---------- activities ---------- */
.activities-list{display:grid;grid-template-columns:repeat(2,1fr);gap:2px;background:var(--line);border:1px solid var(--line);}
@media (max-width:760px){.activities-list{grid-template-columns:1fr;}}
.activity{background:var(--ivory);padding:32px;display:flex;gap:18px;}
.activity .idx{font-family:'Amiri',serif;font-size:1.6rem;color:var(--gold);flex-shrink:0;}
.activity h3{font-size:1.08rem;margin-bottom:8px;}
.activity p{color:var(--moss);font-size:0.94rem;margin:0;}

/* ---------- administration / alumni ---------- */
.admin-grid{display:grid;grid-template-columns:1.1fr 0.9fr;gap:2px;background:var(--line);border:1px solid var(--line);}
@media (max-width:860px){.admin-grid{grid-template-columns:1fr;}}
.admin-panel{background:var(--ivory);padding:44px;}
.admin-panel.dark{background:var(--emerald);color:var(--ivory);}
.admin-panel.dark h3{color:var(--ivory);}
.admin-panel.dark p{color:rgba(246,241,227,0.78);}
.admin-panel h3{margin-bottom:14px;font-size:1.3rem;}
.admin-panel p{color:var(--moss);}
.admin-panel .btn{margin-top:20px;}

.people-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--line);border:1px solid var(--line);margin-top:2px;}
@media (max-width:820px){.people-grid{grid-template-columns:1fr;}}
.person-card{background:var(--ivory);padding:30px;}
.person-card .initial{
  width:52px;height:52px;border-radius:50%;background:var(--emerald);color:var(--gold-light);
  display:flex;align-items:center;justify-content:center;font-family:'Amiri',serif;font-size:1.3rem;margin-bottom:16px;
}
.person-card h4{font-family:'Amiri',serif;color:var(--emerald-deep);margin:0 0 4px;font-size:1.05rem;}
.person-card .role{font-size:0.8rem;color:var(--gold);font-weight:600;text-transform:uppercase;letter-spacing:0.05em;margin-bottom:10px;}
.person-card p{color:var(--moss);font-size:0.9rem;margin:0;}

/* ---------- alumni quote / grid ---------- */
.alumni-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:2px;background:var(--line);border:1px solid var(--line);}
@media (max-width:820px){.alumni-grid{grid-template-columns:1fr;}}
.alumni-card{background:var(--ivory);padding:34px;}
.alumni-card .quote-mark{font-family:'Amiri',serif;font-size:2.4rem;color:var(--gold);line-height:1;display:block;margin-bottom:10px;}
.alumni-card p{color:var(--ink);font-size:0.98rem;margin:0 0 14px;}
.alumni-card .who{font-size:0.85rem;color:var(--moss);font-weight:600;}

/* ---------- contact ---------- */
.contact{background:var(--ivory-2);}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;}
@media (max-width:860px){.contact-grid{grid-template-columns:1fr;gap:40px;}}
.contact-item{display:flex;gap:16px;margin-bottom:26px;}
.contact-item .ic{
  width:42px;height:42px;flex-shrink:0;border-radius:50%;
  background:var(--emerald);color:var(--gold-light);
  display:flex;align-items:center;justify-content:center;font-size:1.1rem;
}
.contact-item h4{margin:0 0 4px;font-family:'Amiri',serif;font-size:1.05rem;color:var(--emerald-deep);}
.contact-item p{margin:0;color:var(--moss);font-size:0.94rem;}
.contact-item a{color:var(--emerald);font-weight:600;}
.social-row{display:flex;gap:12px;margin-top:8px;}
.social-row a{
  width:42px;height:42px;border:1px solid var(--emerald);border-radius:50%;
  display:flex;align-items:center;justify-content:center;color:var(--emerald);font-size:1.1rem;
  transition:all .2s;
}
.social-row a:hover{background:var(--emerald);color:var(--ivory);}
.whatsapp-card{
  background:var(--emerald-deep);color:var(--ivory);padding:38px;
  position:relative;overflow:hidden;
}
.whatsapp-card::after{
  content:"";position:absolute;inset:0;
  background-image:var(--star-tile);background-size:110px 110px;opacity:0.1;
}
.whatsapp-card h3{color:var(--gold-light);position:relative;margin-bottom:12px;}
.whatsapp-card p{color:rgba(246,241,227,0.82);position:relative;margin-bottom:22px;}

/* contact form */
.form-card{background:var(--ivory);border:1px solid var(--line);padding:36px;}
.form-row{margin-bottom:18px;}
.form-row label{display:block;font-size:0.82rem;font-weight:600;color:var(--emerald-deep);margin-bottom:6px;}
.form-row input, .form-row textarea{
  width:100%;padding:12px 14px;border:1px solid var(--line);background:var(--ivory);
  font-family:'Work Sans',sans-serif;font-size:0.94rem;color:var(--ink);border-radius:var(--radius);
}
.form-row input:focus, .form-row textarea:focus{outline:2px solid var(--gold);outline-offset:1px;}
.form-row textarea{resize:vertical;min-height:120px;}
.form-note{font-size:0.78rem;color:var(--moss);margin-top:14px;}

/* ---------- testimonials ---------- */
.testimonials{background:var(--ivory-2);}
.testimonials-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
@media (max-width:980px){.testimonials-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:620px){.testimonials-grid{grid-template-columns:1fr;}}
.testimonial-card{
  background:var(--ivory);border:1px solid var(--line);
  padding:30px 26px 28px;text-align:center;
  display:flex;flex-direction:column;align-items:center;
}
.testimonial-card p.quote{color:var(--ink);font-size:0.94rem;margin:0 0 18px;}
.stars{display:flex;gap:3px;margin-bottom:20px;}
.stars .star{width:16px;height:16px;background:var(--gold);}
.avatar-circle{
  width:64px;height:64px;border-radius:50%;
  background:var(--emerald);color:var(--gold-light);
  display:flex;align-items:center;justify-content:center;
  font-family:'Amiri',serif;font-weight:700;font-size:1.3rem;
  margin-bottom:14px;border:2px solid var(--gold-light);
}
.t-name{font-family:'Amiri',serif;font-weight:700;color:var(--emerald-deep);font-size:1rem;}
.t-role{font-size:0.8rem;color:var(--moss);margin-top:2px;}

/* ---------- skills gallery ---------- */
.skills-block{margin-bottom:80px;}
.skills-block:last-child{margin-bottom:0;}
.skills-block-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:26px;flex-wrap:wrap;}
.skills-block-head h3{font-size:1.5rem;color:var(--emerald-deep);}
.skills-block-head p{color:var(--moss);font-size:0.94rem;margin-top:8px;max-width:56ch;}
.skills-block-num{font-family:'Amiri',serif;font-size:2.4rem;color:var(--gold);line-height:1;flex-shrink:0;}
.skills-photo-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:12px;}
.skills-photo-grid.single{grid-template-columns:1fr;}
.skills-photo-grid.triple{grid-template-columns:1.2fr 1fr 1fr;}
@media (max-width:760px){.skills-photo-grid, .skills-photo-grid.triple{grid-template-columns:1fr;}}
.skills-photo{position:relative;overflow:hidden;border:1px solid var(--line);background:var(--ivory-2);aspect-ratio:4/3;}
.skills-photo img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;}
.skills-photo:hover img{transform:scale(1.04);}
.skills-photo-grid .skills-photo:first-child{aspect-ratio:auto;}
@media (max-width:760px){.skills-photo-grid .skills-photo:first-child{aspect-ratio:4/3;}}

/* ---------- CTA banner ---------- */
.cta-banner{
  background:var(--emerald);color:var(--ivory);position:relative;overflow:hidden;
  padding:64px 0;
}
.cta-banner::before{content:"";position:absolute;inset:0;background-image:var(--star-tile);background-size:130px 130px;opacity:0.08;}
.cta-banner .wrap{position:relative;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:24px;}
.cta-banner h2{color:var(--ivory);font-size:1.8rem;}
.cta-banner p{color:rgba(246,241,227,0.78);margin-top:8px;}

/* ---------- footer ---------- */
footer{background:var(--emerald-deep);color:rgba(246,241,227,0.7);padding:44px 0 26px;}
.foot-grid{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:20px;padding-bottom:26px;border-bottom:1px solid rgba(246,241,227,0.14);}
.foot-brand{display:flex;align-items:center;gap:12px;}
.foot-links{display:flex;gap:22px;flex-wrap:wrap;font-size:0.86rem;}
.foot-links a:hover{color:var(--gold-light);}
.foot-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;padding-top:22px;font-size:0.78rem;}

.fade-up{opacity:0;transform:translateY(16px);transition:opacity .7s ease, transform .7s ease;}
.fade-up.in{opacity:1;transform:translateY(0);}