:root{
    --ink:#152238;
    --navy:#0E2240;
    --navy-deep:#081527;
    --navy-soft:#E8ECF4;
    --cream:#F6F7FA;
    --paper:#FFFFFF;
    --slate:#34506F;
    --slate-soft:#E7ECF4;
    --sky:#4C6E93;
    --line:#DEE3EC;
    --muted:#444E60;
    --faint:#6D7584;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    background:var(--cream);
    color:var(--ink);
    font-family:'Manrope', sans-serif;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3{
    font-family:'Fraunces', serif;
    font-weight:600;
    letter-spacing:-0.01em;
    color:var(--navy-deep);
  }
  .eyebrow{
    font-size:0.74rem;
    font-weight:700;
    letter-spacing:0.12em;
    text-transform:uppercase;
    color:var(--slate);
  }
  a{color:inherit;}
  img,svg{max-width:100%; display:block;}
  .wrap{max-width:1140px; margin:0 auto; padding:0 28px;}

  /* ---------- signature: hand-stitched border motif ---------- */
  .stitch{
    height:10px;
    background:repeating-linear-gradient(90deg, var(--slate) 0 14px, transparent 14px 24px);
    opacity:0.9;
  }

  /* ---------- header ---------- */
  header{
    position:sticky; top:0; z-index:30;
    background:rgba(255,255,255,0.92);
    backdrop-filter:blur(8px);
    border-bottom:1px solid var(--line);
  }
  nav{
    display:flex; align-items:center; justify-content:space-between;
    padding:16px 28px; max-width:1140px; margin:0 auto;
  }
  .brand{display:flex; align-items:center; gap:12px;}
  .crest{
    width:40px; height:40px; border-radius:9px;
    object-fit:cover; flex-shrink:0;
  }
  .brand-name{font-family:'Fraunces', serif; font-weight:600; font-size:1.1rem; color:var(--navy-deep); line-height:1.2;}
  .brand-tag{font-size:0.7rem; letter-spacing:0.08em; color:var(--slate); text-transform:uppercase; font-weight:700;}
  .nav-links{display:none;}
  .nav-cta{
    background:var(--navy); color:#fff; padding:11px 20px; border-radius:999px;
    font-size:0.88rem; font-weight:700; text-decoration:none; white-space:nowrap;
    box-shadow:0 6px 16px rgba(14,34,64,0.28);
  }

  /* ---------- hero ---------- */
  .hero{padding:64px 0 40px; position:relative; overflow:hidden;}
  .hero::after{
    content:""; position:absolute; top:-120px; right:-140px; width:420px; height:420px;
    background:radial-gradient(circle, var(--slate-soft) 0%, transparent 70%);
    z-index:0;
  }
  .hero-inner{
    position:relative; z-index:1;
    display:grid; grid-template-columns:1fr 1fr; gap:50px; align-items:center;
  }
  .hero-ribbon{
    display:inline-flex; align-items:center; gap:8px;
    background:var(--slate-soft); color:var(--navy-deep);
    padding:8px 16px; border-radius:999px;
    font-size:0.78rem; font-weight:700; letter-spacing:0.03em;
    margin-bottom:24px;
  }
  .hero-ribbon::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--slate);}
  h1.headline{
    font-size:clamp(2.3rem, 4.2vw, 3.5rem);
    line-height:1.08;
    margin-bottom:20px;
  }
  h1.headline .accent{color:var(--slate);}
  .hero p.lede{
    font-size:1.08rem; line-height:1.65; color:var(--muted); max-width:44ch; margin-bottom:30px;
  }
  .hero-actions{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:36px;}
  .btn-primary{
    background:var(--navy); color:#fff; text-decoration:none;
    padding:15px 26px; border-radius:999px; font-weight:700; font-size:0.95rem;
    display:inline-block; box-shadow:0 8px 20px rgba(14,34,64,0.28);
  }
  .btn-ghost{
    text-decoration:none; color:var(--navy-deep); background:#fff; border:1.5px solid var(--line);
    padding:15px 26px; border-radius:999px; font-weight:700; font-size:0.95rem;
    display:inline-block;
  }
  .hero-stats{display:flex; gap:30px;}
  .hstat b{display:block; font-family:'Fraunces', serif; font-size:1.6rem; color:var(--navy-deep);}
  .hstat span{font-size:0.78rem; color:var(--faint); font-weight:600;}

  .hero-art{
    position:relative; border-radius:28px; overflow:hidden;
    background:linear-gradient(155deg, var(--navy) 0%, var(--navy-deep) 100%);
    aspect-ratio:6/5.4;
    box-shadow:0 24px 50px rgba(8,21,39,0.28);
  }
  .hero-art svg{position:absolute; inset:0; width:100%; height:100%;}
  .hero-art-badge{
    position:absolute; bottom:18px; left:18px; right:18px;
    background:rgba(255,255,255,0.94); backdrop-filter:blur(6px);
    border-radius:16px; padding:16px 18px;
    display:flex; align-items:center; gap:12px;
  }
  .hero-art-badge .dot{width:10px; height:10px; border-radius:50%; background:var(--slate); flex-shrink:0;}
  .hero-art-badge p{font-size:0.85rem; font-weight:600; color:var(--navy-deep); line-height:1.4;}

  /* ---------- stats band ---------- */
  .stats-band{
    background:linear-gradient(155deg, rgba(14,34,64,0.88) 0%, rgba(8,21,39,0.92) 100%), url('assets/bg-stats-band.jpg') center/cover no-repeat;
    padding:0;
  }
  .stats-grid{
    display:grid; grid-template-columns:repeat(4,1fr);
  }
  .stat-item{
    padding:40px 24px; text-align:center;
    border-right:1px solid rgba(255,255,255,0.12);
  }
  .stat-item:last-child{border-right:none;}
  .stat-item b{
    display:block; font-family:'Fraunces', serif; font-size:clamp(1.8rem,3vw,2.4rem);
    color:#fff; font-weight:600;
  }
  .stat-item span{
    display:block; margin-top:6px; font-size:0.78rem; font-weight:600;
    color:var(--slate-soft); text-transform:uppercase; letter-spacing:0.06em;
  }

  /* ---------- why us: value props ---------- */
  .why-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
  .why-card{padding:8px 4px;}
  .why-num{
    font-family:'Fraunces', serif; font-size:2.1rem; font-weight:600;
    color:var(--slate); margin-bottom:10px; line-height:1;
  }
  .why-card h3{font-size:1.1rem; margin-bottom:10px;}
  .why-card p{color:var(--muted); font-size:0.94rem; line-height:1.65;}

  /* ---------- repeating CTA strip ---------- */
  .cta-strip{
    background:var(--slate-soft);
    border-top:1px solid var(--line); border-bottom:1px solid var(--line);
    padding:26px 0;
  }
  .cta-strip .wrap{
    display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px;
  }
  .cta-strip p{
    font-family:'Fraunces', serif; font-weight:600; font-size:1.15rem; color:var(--navy-deep);
  }
  .cta-strip .btn-primary{padding:12px 22px; font-size:0.88rem;}

  /* ---------- section shell ---------- */
  section{padding:78px 0;}
  .section-head{margin-bottom:44px; max-width:60ch;}
  .section-head h2{font-size:clamp(1.7rem, 2.6vw, 2.3rem); margin-top:10px;}
  .section-head p{color:var(--muted); font-size:1rem; margin-top:12px; line-height:1.6;}

  /* ---------- mission / vision ---------- */
  .pillars{display:grid; grid-template-columns:1fr 1fr; gap:22px;}
  .pillar{
    background:var(--paper); border:1px solid var(--line); border-radius:20px;
    padding:36px 34px;
  }
  .pillar-icon{
    width:46px; height:46px; border-radius:12px; background:var(--navy-soft);
    display:flex; align-items:center; justify-content:center; margin-bottom:18px;
  }
  .pillar h3{font-size:1.25rem; margin-bottom:12px;}
  .pillar p{color:var(--muted); line-height:1.7; font-size:0.98rem;}

  /* ---------- academics ---------- */
  .subjects{display:grid; grid-template-columns:repeat(3, 1fr); gap:18px;}
  .subject-card{
    background:var(--paper); border:1px solid var(--line); border-radius:18px;
    padding:26px 24px; transition:transform .15s, box-shadow .15s;
  }
  .subject-card:hover{transform:translateY(-3px); box-shadow:0 14px 30px rgba(14,34,64,0.1);}
  .subject-swatch{width:34px; height:34px; border-radius:9px; margin-bottom:16px;}
  .subject-card h3{font-size:1.02rem; margin-bottom:8px; font-weight:600; font-family:'Manrope',sans-serif; color:var(--navy-deep);}
  .subject-card p{font-size:0.87rem; color:var(--muted); line-height:1.55;}

  /* ---------- activities, illustrated cards ---------- */
  .activities{
    display:grid; grid-template-columns:repeat(4, 1fr); gap:18px;
  }
  .activity-card{
    border-radius:20px; overflow:hidden; background:var(--paper); border:1px solid var(--line);
  }
  .activity-art{aspect-ratio:4/3; position:relative; overflow:hidden;}
  .activity-art svg{width:100%; height:100%;}
  .activity-art img{width:100%; height:100%; object-fit:cover; display:block;}
  .activity-body{padding:18px 20px 22px;}
  .activity-body h3{font-size:0.98rem; margin-bottom:6px; font-family:'Manrope',sans-serif; font-weight:700; color:var(--navy-deep);}
  .activity-body p{font-size:0.83rem; color:var(--muted); line-height:1.5;}

  /* ---------- campuses, full-bleed overlay cards ---------- */
  .campuses{display:grid; grid-template-columns:1fr 1fr; gap:24px;}
  .campus-card{
    position:relative; border-radius:22px; overflow:hidden;
    aspect-ratio:4/5; box-shadow:0 16px 34px rgba(8,21,39,0.16);
    transition:transform .2s;
  }
  .campus-card:hover{transform:translateY(-4px);}
  .campus-art{position:absolute; inset:0;}
  .campus-art svg{width:100%; height:100%; object-fit:cover;}
  .campus-scrim{
    position:absolute; inset:0;
    background:linear-gradient(to top, rgba(8,21,39,0.92) 0%, rgba(8,21,39,0.55) 32%, rgba(8,21,39,0.05) 60%);
  }
  .campus-body{
    position:absolute; left:0; right:0; bottom:0; padding:30px 28px;
  }
  .campus-body .eyebrow{margin-bottom:8px; display:block; color:var(--slate-soft);}
  .campus-body h3{font-size:1.5rem; margin-bottom:10px; color:#fff;}
  .campus-body p{font-size:0.92rem; color:rgba(255,255,255,0.85); line-height:1.6; margin-bottom:16px;}
  .badge{
    display:inline-block; font-size:0.75rem; font-weight:700; color:var(--navy-deep);
    background:var(--slate-soft); padding:6px 14px; border-radius:999px;
  }

  /* ---------- testimonial ---------- */
  .testimonial{
    background:linear-gradient(155deg, rgba(14,34,64,0.88) 0%, rgba(8,21,39,0.92) 100%), url('assets/bg-testimonial.jpg') center/cover no-repeat;
    color:#fff; padding:66px 0; position:relative; overflow:hidden;
  }
  .testimonial::before{
    content:""; position:absolute; top:-100px; left:-100px; width:320px; height:320px;
    background:radial-gradient(circle, rgba(214,163,30,0.18) 0%, transparent 70%);
  }
  .testimonial .wrap{text-align:center; max-width:660px; position:relative;}
  .testimonial blockquote{
    font-family:'Fraunces', serif; font-weight:500; font-style:italic; font-size:1.55rem; line-height:1.5;
  }
  .testimonial cite{
    display:block; margin-top:20px; font-style:normal; font-size:0.82rem; font-weight:700;
    letter-spacing:0.04em; color:var(--slate-soft); text-transform:uppercase;
  }

  /* ---------- contact ---------- */
  .cta-block{
    background:var(--paper); border:1px solid var(--line); border-radius:26px;
    padding:52px 50px;
    display:grid; grid-template-columns:1.3fr 1fr; gap:40px; align-items:center;
  }
  .cta-block h2{font-size:1.9rem; margin-bottom:14px;}
  .cta-block p{color:var(--muted); line-height:1.6; max-width:44ch;}
  .contact-lines{font-size:0.94rem; line-height:2.3; font-weight:600;}
  .contact-lines .k{color:var(--slate); margin-right:10px; font-weight:700;}
  .social-row{display:flex; gap:10px; margin-top:22px;}
  .social-btn{
    width:40px; height:40px; border-radius:50%;
    background:var(--navy); display:flex; align-items:center; justify-content:center;
    text-decoration:none; transition:background .15s, transform .15s;
  }
  .social-btn:hover{background:var(--navy-deep); transform:translateY(-2px);}
  .social-btn svg{width:18px; height:18px;}

  footer{padding:34px 0; border-top:1px solid var(--line); font-size:0.78rem; color:var(--faint);}
  footer .wrap{display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;}
  .footer-inner{align-items:center;}
  .footer-social{margin:0;}

  @media (max-width: 900px){
    .hero-inner{grid-template-columns:1fr;}
    .hero-art{aspect-ratio:16/10;}
    .pillars{grid-template-columns:1fr;}
    .why-grid{grid-template-columns:1fr; gap:30px;}
    .stats-grid{grid-template-columns:1fr 1fr;}
    .stat-item:nth-child(2){border-right:none;}
    .subjects{grid-template-columns:1fr 1fr;}
    .activities{grid-template-columns:1fr 1fr;}
    .campuses{grid-template-columns:1fr;}
    .cta-block{grid-template-columns:1fr; padding:36px 28px;}
    nav ul{display:none;}
  }


/* ---------- multi-page additions ---------- */
nav ul a.active{opacity:1; border-bottom:2px solid var(--slate); padding-bottom:4px;}

/* page header banner (for inner pages) */
.page-header{
  padding:150px 0 60px;
  background:linear-gradient(155deg, rgba(14,34,64,0.88) 0%, rgba(8,21,39,0.92) 100%), url('assets/bg-page-header.jpg') center/cover no-repeat;
  color:#fff;
}
.page-header .eyebrow{color:var(--slate-soft);}
.page-header h1{color:#fff; font-size:clamp(2rem,3.6vw,2.9rem); margin-top:10px;}
.page-header p{color:rgba(255,255,255,0.82); margin-top:14px; max-width:56ch; font-size:1.02rem; line-height:1.6;}

/* real photo hero */
.photo-hero{
  position:relative; border-radius:28px; overflow:hidden;
  aspect-ratio:6/5.4; box-shadow:0 24px 50px rgba(8,21,39,0.3);
}
.photo-hero img{width:100%; height:100%; object-fit:cover;}
.photo-hero .hero-art-badge{position:absolute; bottom:18px; left:18px; right:18px;}

/* photo gallery grid (real campus images) */
.gallery-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:18px;}
.gallery-item{border-radius:18px; overflow:hidden; aspect-ratio:4/3; border:1px solid var(--line);}
.gallery-item img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .3s;}
.gallery-item:hover img{transform:scale(1.04);}

/* campus card using real photo */
.campus-card .campus-art img{width:100%; height:100%; object-fit:cover; display:block;}

/* blog */
.blog-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
.blog-card{background:var(--paper); border:1px solid var(--line); border-radius:18px; overflow:hidden; text-decoration:none; display:block; transition:transform .15s, box-shadow .15s;}
.blog-card:hover{transform:translateY(-3px); box-shadow:0 14px 30px rgba(14,34,64,0.1);}
.blog-thumb{aspect-ratio:16/10; background:var(--navy-soft); position:relative; overflow:hidden;}
.blog-thumb img{width:100%; height:100%; object-fit:cover;}
.blog-tag{
  position:absolute; top:14px; left:14px; background:var(--navy-deep); color:#fff;
  font-size:0.68rem; font-weight:700; letter-spacing:0.06em; text-transform:uppercase;
  padding:5px 12px; border-radius:999px;
}
.blog-body{padding:22px 22px 26px;}
.blog-date{font-size:0.76rem; color:var(--slate); font-weight:700; letter-spacing:0.04em; text-transform:uppercase;}
.blog-body h3{font-size:1.08rem; margin:10px 0 10px; line-height:1.35; color:var(--navy-deep);}
.blog-body p{font-size:0.88rem; color:var(--muted); line-height:1.6;}
.blog-read{margin-top:14px; font-size:0.84rem; font-weight:700; color:var(--navy);}

/* devotion page */
.verse-card{
  background:linear-gradient(155deg, rgba(14,34,64,0.88) 0%, rgba(8,21,39,0.92) 100%), url('assets/bg-page-header.jpg') center/cover no-repeat;
  border-radius:24px; padding:52px 48px; color:#fff; text-align:center;
  box-shadow:0 20px 44px rgba(8,21,39,0.25);
}
.verse-card .eyebrow{color:var(--slate-soft);}
.verse-card blockquote{
  font-family:'Fraunces', serif; font-style:italic; font-weight:500;
  font-size:clamp(1.3rem,2.4vw,1.7rem); line-height:1.5; margin:18px 0 16px;
}
.verse-card cite{font-style:normal; font-size:0.85rem; font-weight:700; letter-spacing:0.05em; color:var(--slate-soft);}
.devotion-body{
  background:var(--paper); border:1px solid var(--line); border-radius:20px;
  padding:40px 44px; margin-top:28px;
}
.devotion-body h3{font-size:1.2rem; margin-bottom:14px;}
.devotion-body p{color:var(--muted); line-height:1.75; font-size:1rem; margin-bottom:16px;}
.devotion-body p:last-child{margin-bottom:0;}
.devotion-archive{display:grid; grid-template-columns:1fr; gap:14px; margin-top:16px;}
.devotion-archive-item{
  display:flex; justify-content:space-between; align-items:center;
  background:var(--paper); border:1px solid var(--line); border-radius:14px;
  padding:18px 22px; text-decoration:none;
}
.devotion-archive-item:hover{border-color:var(--navy);}
.devotion-archive-item .d-title{font-weight:700; color:var(--navy-deep); font-size:0.95rem;}
.devotion-archive-item .d-date{font-size:0.78rem; color:var(--faint); font-weight:600;}

/* ---------- fee table ---------- */
.fee-table-wrap{background:var(--paper); border:1px solid var(--line); border-radius:18px; padding:8px; margin-bottom:22px;}
.fee-table-wrap h3{padding:20px 24px 4px; font-size:1.1rem; color:var(--navy-deep);}
table.fee-table{width:100%; border-collapse:collapse;}
table.fee-table th, table.fee-table td{text-align:left; padding:14px 24px; font-size:0.92rem;}
table.fee-table th{color:var(--slate); text-transform:uppercase; font-size:0.72rem; letter-spacing:0.05em; font-weight:700; border-bottom:1px solid var(--line);}
table.fee-table td{border-bottom:1px solid var(--line); color:var(--muted);}
table.fee-table tr:last-child td{border-bottom:none;}
.fallback-note{
  display:none; background:var(--slate-soft); color:var(--navy-deep); font-size:0.85rem;
  padding:12px 18px; border-radius:12px; margin-bottom:20px;
}

/* ---------- admissions steps ---------- */
.steps-list{display:flex; flex-direction:column; gap:0;}
.step-row{display:flex; gap:20px; padding:22px 0; border-bottom:1px solid var(--line);}
.step-row:last-child{border-bottom:none;}
.step-num{
  width:36px; height:36px; border-radius:50%; background:var(--navy); color:#fff;
  display:flex; align-items:center; justify-content:center; font-family:'Fraunces',serif;
  font-weight:600; flex-shrink:0;
}
.step-row h3{font-size:1.02rem; margin-bottom:6px; color:var(--navy-deep);}
.step-row p{font-size:0.9rem; color:var(--muted); line-height:1.6;}
.doc-list{list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.doc-list li{
  background:var(--paper); border:1px solid var(--line); border-radius:12px;
  padding:14px 18px; font-size:0.9rem; color:var(--navy-deep); font-weight:600;
}

/* ---------- FAQ accordion ---------- */
.faq-item{background:var(--paper); border:1px solid var(--line); border-radius:14px; margin-bottom:12px; overflow:hidden;}
.faq-question{
  width:100%; text-align:left; background:none; border:none; cursor:pointer;
  padding:20px 22px; display:flex; justify-content:space-between; align-items:center;
  font-family:'Manrope',sans-serif; font-size:0.98rem; font-weight:700; color:var(--navy-deep);
}
.faq-icon{
  width:24px; height:24px; border-radius:50%; background:var(--navy-soft); color:var(--navy);
  display:flex; align-items:center; justify-content:center; font-size:1rem; flex-shrink:0;
  transition:transform .2s;
}
.faq-question.open .faq-icon{transform:rotate(45deg); background:var(--navy); color:#fff;}
.faq-answer{max-height:0; overflow:hidden; transition:max-height .25s ease;}
.faq-answer.open{max-height:300px;}
.faq-answer p{padding:0 22px 20px; font-size:0.9rem; color:var(--muted); line-height:1.65;}

/* ---------- careers ---------- */
.job-card{
  background:var(--paper); border:1px solid var(--line); border-radius:18px;
  padding:26px 28px; margin-bottom:16px;
}
.job-card-top{display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap;}
.job-card h3{font-size:1.12rem; color:var(--navy-deep);}
.job-type{
  background:var(--navy-soft); color:var(--navy); font-size:0.72rem; font-weight:700;
  text-transform:uppercase; letter-spacing:0.05em; padding:5px 12px; border-radius:999px; flex-shrink:0;
}
.job-meta{font-size:0.8rem; color:var(--slate); font-weight:600; margin:8px 0 12px;}
.job-card p{font-size:0.92rem; color:var(--muted); line-height:1.6; margin-bottom:18px;}

/* ---------- showcase gallery ---------- */
.gallery-filters{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:28px;}
.filter-pill{
  background:var(--paper); border:1px solid var(--line); color:var(--navy-deep);
  padding:9px 18px; border-radius:999px; font-size:0.84rem; font-weight:600; cursor:pointer;
}
.filter-pill.active{background:var(--navy); border-color:var(--navy); color:#fff;}
.showcase-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px;}
.showcase-item{border-radius:16px; overflow:hidden; border:1px solid var(--line); background:var(--paper); position:relative;}
.showcase-item img{width:100%; aspect-ratio:4/3; object-fit:cover; display:block;}
.showcase-caption{padding:16px 18px 18px;}
.showcase-tag{
  display:inline-block; background:var(--navy-soft); color:var(--navy); font-size:0.68rem;
  font-weight:700; text-transform:uppercase; letter-spacing:0.05em; padding:4px 10px; border-radius:999px; margin-bottom:8px;
}
.showcase-caption h3{font-size:0.95rem; color:var(--navy-deep); margin-bottom:6px;}
.showcase-caption p{font-size:0.82rem; color:var(--muted); line-height:1.5;}

/* ---------- meet the team ---------- */
.team-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:22px; max-width:760px; margin:0 auto;}
.team-card{background:var(--paper); border:1px solid var(--line); border-radius:18px; padding:26px 22px; text-align:center;}
.team-avatar{width:96px; height:96px; margin:0 auto 16px; border-radius:50%; overflow:hidden;}
.team-avatar img{width:100%; height:100%; object-fit:cover; display:block;}
.team-initials{
  width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  color:#fff; font-family:'Fraunces',serif; font-weight:600; font-size:1.4rem;
}
.team-card h3{font-size:1.05rem; color:var(--navy-deep); margin-bottom:4px;}
.team-role{display:block; font-size:0.76rem; color:var(--slate); font-weight:700; text-transform:uppercase; letter-spacing:0.04em; margin-bottom:12px;}
.team-card p{font-size:0.85rem; color:var(--muted); line-height:1.6;}
.team-social.social-row{justify-content:center; margin-top:0; margin-bottom:14px;}
.team-readmore-btn{
  background:none; border:none; cursor:pointer; padding:0;
  font-family:'Manrope',sans-serif; font-size:0.82rem; font-weight:700;
  color:var(--navy); text-decoration:underline; text-underline-offset:3px;
}
.team-bio{margin-top:12px; text-align:left;}

@media (max-width: 900px){
  .showcase-grid{grid-template-columns:1fr 1fr;}
  .team-grid{grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));}
}

@media (max-width: 900px){
  .doc-list{grid-template-columns:1fr;}
}

@media (max-width: 900px){
  #enquiry-form{grid-template-columns:1fr !important;}
  .gallery-grid{grid-template-columns:1fr;}
  .blog-grid{grid-template-columns:1fr;}
  .verse-card{padding:38px 26px;}
  .devotion-body{padding:30px 26px;}
}

/* ---------- compact nav: hamburger + sidebar drawer ---------- */
nav{display:flex; align-items:center; justify-content:space-between; padding:16px 28px; max-width:1140px; margin:0 auto;}
.nav-right{display:flex; align-items:center; gap:14px;}
.nav-link-tests{
  font-size:0.88rem; font-weight:700; color:var(--navy); text-decoration:none;
  white-space:nowrap;
}
.nav-link-tests:hover{text-decoration:underline;}
@media (max-width: 720px){
  .nav-link-tests{display:none;}
}

.nav-toggle{
  width:44px; height:44px; border-radius:12px; border:1px solid var(--line); background:#fff;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
  cursor:pointer; flex-shrink:0;
}
.nav-toggle span{width:20px; height:2px; background:var(--navy-deep); border-radius:2px; transition:transform .2s, opacity .2s;}
.nav-toggle:hover{border-color:var(--navy);}

.sidebar-overlay{
  position:fixed; inset:0; background:transparent;
  opacity:0; visibility:hidden; transition:visibility .18s; z-index:40;
}
.sidebar-overlay.open{opacity:1; visibility:visible;}

.sidebar-drawer{
  position:fixed; top:80px; right:24px; width:280px; max-width:88vw; max-height:calc(100vh - 110px);
  background:#fff; z-index:50; border-radius:18px; border:1px solid var(--line);
  box-shadow:0 24px 54px rgba(8,21,39,0.2);
  opacity:0; visibility:hidden; transform:translateY(-10px);
  transition:opacity .18s ease, transform .18s ease, visibility .18s;
  padding:18px; overflow-y:auto;
  display:flex; flex-direction:column;
}
.sidebar-drawer.open{opacity:1; visibility:visible; transform:translateY(0);}
.sidebar-drawer-top{display:flex; justify-content:space-between; align-items:center; margin-bottom:14px;}
.sidebar-wordmark{font-family:'Fraunces',serif; font-weight:700; font-size:0.95rem; color:var(--navy-deep);}
.sidebar-close{
  width:32px; height:32px; border-radius:9px; border:1px solid var(--line); background:#fff;
  font-size:1.15rem; line-height:1; cursor:pointer; color:var(--navy-deep);
}
.sidebar-close:hover{border-color:var(--navy);}
.sidebar-drawer ul{list-style:none; display:flex; flex-direction:column; gap:2px; margin-bottom:14px;}
.sidebar-drawer ul a{
  display:block; padding:11px 12px; border-radius:9px; text-decoration:none;
  color:var(--ink); font-weight:600; font-size:0.9rem; transition:background .15s;
}
.sidebar-drawer ul a:hover{background:var(--cream);}
.sidebar-drawer ul a.active{background:var(--navy-soft); color:var(--navy);}
.sidebar-drawer .nav-cta{display:block; text-align:center; margin-top:auto;}



/* ---------- public form fields (shared) ---------- */
.field{margin-bottom:14px; text-align:left;}
.field label{display:block; font-size:0.82rem; font-weight:700; color:var(--navy-deep); margin-bottom:6px;}
.field input, .field select, .field textarea{
  width:100%; padding:12px 14px; border:1px solid var(--line); border-radius:8px;
  font-family:'Manrope',sans-serif; font-size:0.92rem; background:#fff;
}

/* ---------- spelling game ---------- */
.game-gate{
  display:none; text-align:center; background:var(--paper); border:1px solid var(--line);
  border-radius:20px; padding:56px 32px; max-width:560px; margin:0 auto;
}
.game-gate .gate-icon{font-size:2.4rem; margin-bottom:16px;}
.game-gate h2{font-size:1.4rem; margin-bottom:12px;}
.game-gate p{color:var(--muted); line-height:1.7; max-width:44ch; margin:0 auto;}

.game-auth{background:var(--paper); border:1px solid var(--line); border-radius:20px; padding:36px; max-width:460px; margin:0 auto;}
.auth-tabs{display:flex; gap:8px; margin-bottom:24px; background:var(--cream); border-radius:12px; padding:4px;}
.auth-tab{
  flex:1; text-align:center; padding:10px; border-radius:9px; border:none; background:none;
  font-weight:700; font-size:0.9rem; color:var(--muted); cursor:pointer;
}
.auth-tab.active{background:var(--navy); color:#fff;}
#login-error{color:#B33A3A; font-size:0.85rem; margin-top:8px;}

.code-reveal{
  display:none; text-align:center; background:var(--paper); border:1px solid var(--line);
  border-radius:20px; padding:40px 32px; max-width:460px; margin:0 auto;
}
.code-reveal p{color:var(--muted); margin-bottom:18px; line-height:1.6;}
.code-box{
  font-family:'Fraunces',serif; font-size:2.2rem; font-weight:700; letter-spacing:0.15em;
  background:var(--navy-soft); color:var(--navy-deep); padding:20px; border-radius:14px;
  margin-bottom:20px;
}

.game-section{display:none; max-width:560px; margin:0 auto;}
.game-player-bar{display:flex; justify-content:space-between; align-items:center; margin-bottom:18px;}
.game-player-bar strong{display:block; font-size:1rem; color:var(--navy-deep);}
.game-player-bar span{font-size:0.82rem; color:var(--muted);}
.game-stats-row{display:flex; gap:14px;}
.game-stat-pill{
  background:var(--navy-soft); color:var(--navy); font-weight:700; font-size:0.85rem;
  padding:8px 16px; border-radius:999px;
}
.game-board{
  background:var(--paper); border:1px solid var(--line); border-radius:20px; padding:36px 30px; text-align:center;
}
.timer-track{height:6px; background:var(--line); border-radius:999px; overflow:hidden; margin-bottom:24px;}
.timer-fill{height:100%; width:100%; background:var(--slate); transition:width 1s linear;}
.scrambled-word{
  font-family:'Fraunces',serif; font-size:2rem; font-weight:600; letter-spacing:0.08em;
  color:var(--navy-deep); margin-bottom:24px;
}
#answer-form{display:flex; gap:10px; margin-bottom:14px;}
#answer-input{flex:1; text-align:center; font-size:1.1rem; text-transform:lowercase;}
.game-feedback{min-height:24px; font-weight:700; font-size:0.92rem;}
.game-feedback.correct{color:var(--navy);}
.game-feedback.incorrect{color:#B33A3A;}
.logout-link{display:inline-block; margin-top:20px; font-size:0.85rem; color:var(--muted); cursor:pointer; text-decoration:underline; background:none; border:none;}

.leaderboard-list{display:flex; flex-direction:column; gap:10px;}
.leaderboard-item{
  display:flex; align-items:center; gap:16px; background:var(--paper); border:1px solid var(--line);
  border-radius:14px; padding:14px 20px;
}
.leaderboard-rank{
  font-family:'Fraunces',serif; font-weight:700; font-size:1.1rem; color:var(--slate); width:32px; flex-shrink:0;
}
.leaderboard-info{flex:1; display:flex; flex-direction:column;}
.leaderboard-info strong{color:var(--navy-deep); font-size:0.95rem;}
.leaderboard-info span{font-size:0.78rem; color:var(--muted);}
.leaderboard-score{font-weight:700; color:var(--navy); font-size:0.95rem;}

@media (max-width: 600px){
  .game-player-bar{flex-direction:column; align-items:flex-start; gap:10px;}
  .exam-card{padding:24px 20px;}
  .exam-time-bar-wrap{margin:-24px -20px 20px; padding:14px 20px; top:70px;}
}

/* ---------- spelling challenge: instructions, session, level progress ---------- */
.how-to-play{
  background:var(--navy-soft); border-radius:16px; padding:24px 26px; margin-bottom:24px;
}
.how-to-play h3{font-size:1rem; color:var(--navy-deep); margin-bottom:12px;}
.how-to-play ol{margin:0; padding-left:20px; display:flex; flex-direction:column; gap:8px;}
.how-to-play li{font-size:0.88rem; color:var(--muted); line-height:1.55;}

.session-track{margin-bottom:18px;}
.session-track-top{display:flex; justify-content:space-between; font-size:0.8rem; color:var(--muted); font-weight:600; margin-bottom:6px;}
#session-time{color:var(--navy); font-weight:700;}

.level-progress{font-size:0.8rem; color:var(--muted); font-weight:600; margin-bottom:14px;}

/* ---------- countdown overlay + form error ---------- */
.countdown-overlay{
  display:none; text-align:center; padding:60px 0;
  background:var(--paper); border:1px solid var(--line); border-radius:20px; margin-bottom:0;
}
.countdown-number{
  font-family:'Fraunces',serif; font-weight:700; font-size:3rem; color:var(--navy-deep);
}
.form-error{color:#B33A3A; font-size:0.85rem; margin-top:10px; line-height:1.5;}

/* ---------- past papers: listing ---------- */
.paper-card{
  background:var(--paper); border:1px solid var(--line); border-radius:18px;
  padding:24px 26px; margin-bottom:16px; display:flex; justify-content:space-between;
  align-items:center; gap:20px; flex-wrap:wrap;
}
.paper-tag{font-size:0.72rem; font-weight:700; color:var(--slate); text-transform:uppercase; letter-spacing:0.05em;}
.paper-card h3{font-size:1.08rem; color:var(--navy-deep); margin:8px 0 6px;}
.paper-card p{font-size:0.86rem; color:var(--muted); line-height:1.5; max-width:46ch;}
.paper-actions{display:flex; gap:10px; flex-shrink:0;}

/* ---------- past papers: view-only reader ---------- */
.paper-protected{
  background:var(--paper); border:1px solid var(--line); border-radius:20px; padding:36px 40px;
}
.paper-watermark{
  text-align:center; font-size:0.72rem; color:#B7C4D6; text-transform:uppercase; letter-spacing:0.08em;
  margin-bottom:20px; font-weight:700;
}
.paper-question{padding:18px 0; border-bottom:1px solid var(--line);}
.paper-question:last-child{border-bottom:none;}
.paper-question-text{font-size:0.96rem; color:var(--ink); line-height:1.6; margin-bottom:10px;}
.paper-options{list-style:none; padding-left:22px; display:flex; flex-direction:column; gap:6px;}
.paper-options li{font-size:0.9rem; color:var(--muted);}

/* ---------- past papers: exam ---------- */
.exam-card{background:var(--paper); border:1px solid var(--line); border-radius:20px; padding:36px 40px;}
.exam-time-bar-wrap{
  position:sticky; top:78px; z-index:20;
  background:var(--paper); padding:16px 40px; margin:-36px -40px 24px;
  border-radius:20px 20px 14px 14px; box-shadow:0 6px 18px rgba(8,21,39,0.1);
}
.exam-time-top{display:flex; justify-content:space-between; font-size:0.85rem; font-weight:700; color:var(--navy-deep); margin-bottom:6px;}
.exam-question{padding:20px 0; border-bottom:1px solid var(--line);}
.exam-question-text, .exam-options{user-select:none; -webkit-user-select:none;}
.exam-question:last-child{border-bottom:none;}
.exam-question-text{font-size:0.96rem; color:var(--ink); line-height:1.6; margin-bottom:12px;}
.exam-options{display:flex; flex-direction:column; gap:8px;}
.exam-option{
  display:flex; align-items:center; gap:10px; padding:11px 14px; border:1px solid var(--line);
  border-radius:10px; cursor:pointer; font-size:0.9rem; color:var(--muted);
}
.exam-option:hover{border-color:var(--navy);}
.exam-short-input{
  width:100%; padding:11px 14px; border:1px solid var(--line); border-radius:10px; font-size:0.92rem;
  font-family:'Manrope',sans-serif;
}
.exam-result-item{padding:18px 0; border-bottom:1px solid var(--line);}
.exam-result-item:last-child{border-bottom:none;}
.exam-result-line{font-size:0.88rem; margin-bottom:4px;}
.exam-result-item.correct .exam-result-line strong{color:var(--navy);}
.exam-result-item.incorrect .exam-result-line strong{color:#B33A3A;}
.exam-explanation{
  font-size:0.85rem; color:var(--muted); background:var(--cream); padding:10px 14px;
  border-radius:10px; margin-top:8px; line-height:1.55;
}
#exam-score{
  font-family:'Fraunces',serif; font-weight:700; font-size:1.6rem; color:var(--navy-deep);
  text-align:center; margin-bottom:24px;
}

/* ---------- past papers: image viewer + answer sheet ---------- */
.paper-image-viewer{
  text-align:center; background:var(--cream); border-radius:14px; padding:12px;
  margin-bottom:14px; min-height:200px;
}
.paper-image-viewer img{max-width:100%; border-radius:6px; display:inline-block; pointer-events:none;}
.paper-nav{display:flex; justify-content:space-between; align-items:center; gap:12px;}

.exam-answer-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(90px, 1fr)); gap:10px;
}
.exam-answer-row{display:flex; flex-direction:column; gap:4px;}
.exam-answer-row label{font-size:0.76rem; font-weight:700; color:var(--navy-deep);}
.exam-answer-row input{
  padding:9px 10px; border:1px solid var(--line); border-radius:8px; font-size:0.9rem;
  font-family:'Manrope',sans-serif; text-align:center;
}

/* ---------- past papers: test calendar ---------- */
.calendar-group{margin-bottom:26px;}
.calendar-date-heading{
  font-family:'Fraunces',serif; font-weight:600; font-size:1.02rem; color:var(--navy-deep);
  margin-bottom:10px; padding-bottom:8px; border-bottom:2px solid var(--navy-soft);
}
.calendar-row{
  display:flex; align-items:center; gap:16px; background:var(--paper); border:1px solid var(--line);
  border-radius:14px; padding:14px 18px; margin-bottom:8px;
}
.calendar-row-time{
  font-family:'Fraunces',serif; font-weight:700; font-size:0.92rem; color:var(--slate);
  min-width:80px; flex-shrink:0;
}
.calendar-row-info{flex:1; display:flex; flex-direction:column;}
.calendar-row-info strong{color:var(--navy-deep); font-size:0.95rem;}
.calendar-row-info span{font-size:0.78rem; color:var(--muted); margin-top:2px;}
.calendar-row-status{
  font-size:0.76rem; font-weight:700; color:var(--slate); background:var(--slate-soft);
  padding:6px 12px; border-radius:999px; flex-shrink:0;
}

/* ---------- idle reminder banner ---------- */
.idle-reminder{
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(20px);
  background:var(--navy-deep); color:#fff; padding:14px 24px; border-radius:999px;
  font-size:0.88rem; font-weight:600; box-shadow:0 10px 30px rgba(8,21,39,0.3);
  opacity:0; visibility:hidden; transition:opacity .25s ease, transform .25s ease, visibility .25s;
  z-index:60; max-width:90vw; text-align:center;
}
.idle-reminder.show{opacity:1; visibility:visible; transform:translateX(-50%) translateY(0);}

/* ---------- generic popup modal ---------- */
.modal-overlay{
  position:fixed; inset:0; background:rgba(8,21,39,0.55); z-index:100;
  display:flex; align-items:center; justify-content:center; padding:20px;
}
.modal-card{
  background:var(--paper); border-radius:20px; padding:32px 30px; max-width:400px; width:100%;
  text-align:center; box-shadow:0 20px 50px rgba(8,21,39,0.35);
}
.modal-card h3{font-family:'Fraunces',serif; font-weight:700; font-size:1.25rem; color:var(--navy-deep); margin-bottom:10px;}
.modal-card p{color:var(--muted); font-size:0.92rem; line-height:1.6;}

/* ---------- reviews page ---------- */
.reviews-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:18px; margin-top:8px;}
.review-card{
  background:var(--paper); border:1px solid var(--line); border-radius:18px;
  padding:26px 28px;
}
.review-card blockquote{
  font-family:'Fraunces', serif; font-style:italic; font-weight:500;
  font-size:1.02rem; line-height:1.6; margin:0 0 12px; color:var(--navy-deep);
}
.review-card cite{font-style:normal; font-size:0.82rem; font-weight:700; letter-spacing:0.03em; color:var(--slate);}
.review-honeypot{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;}
@media (max-width:760px){
  .reviews-grid{grid-template-columns:1fr;}
}

/* ---------- lessons page ---------- */
.lessons-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:20px; margin-top:8px;}
.lesson-card{
  background:var(--paper); border:1px solid var(--line); border-radius:18px;
  padding:24px 26px;
}
.lesson-card-head{display:flex; align-items:center; gap:10px; margin-bottom:8px;}
.lesson-grade-badge{
  background:var(--navy-soft); color:var(--navy-deep); font-size:0.7rem; font-weight:700;
  letter-spacing:0.04em; text-transform:uppercase; padding:4px 10px; border-radius:999px;
}
.lesson-subject{font-size:0.78rem; color:var(--slate); font-weight:700; text-transform:uppercase; letter-spacing:0.03em;}
.lesson-card h3{font-size:1.08rem; margin:6px 0 12px; color:var(--navy-deep);}
.lesson-video{position:relative; width:100%; padding-top:56.25%; border-radius:12px; overflow:hidden; margin-bottom:14px;}
.lesson-video iframe{position:absolute; top:0; left:0; width:100%; height:100%; border:0;}
.lesson-notes{font-size:0.88rem; color:var(--muted); line-height:1.7;}
@media (max-width:760px){
  .lessons-grid{grid-template-columns:1fr;}
}