/* ============================================================
   JNissi Schools — concept landing page
   Identity: cream canvas, leaf green, warm orange, serif
   display type — pastoral, bright, organic. "Godly Seeds."
   Mobile-first, zero external assets.
   ============================================================ */

:root{
  --green:      #2e7d32;
  --green-deep: #1b5e20;
  --green-soft: #e7f2e7;
  --orange:     #f57c00;
  --orange-deep:#e65100;
  --orange-soft:#fff1dd;
  --maroon:     #7b1f2b;
  --cream:      #fdf9f0;
  --cream-deep: #f7f0e0;
  --white:      #ffffff;
  --ink:        #24291f;
  --muted:      #6d705f;
  --line:       #e8e2d0;
  --shadow:    0 10px 28px rgba(27,60,27,.10);
  --shadow-lg: 0 18px 44px rgba(27,60,27,.16);
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --serif: Georgia, "Times New Roman", serif;
  --r: 14px;
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  font-family:var(--sans);
  font-size:16px; line-height:1.6;
  color:var(--ink); background:var(--cream);
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul,ol{ list-style:none; }
section{ scroll-margin-top:76px; }

.wrap{ width:100%; max-width:1120px; margin:0 auto; padding:0 20px; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font:700 15px/1.2 var(--sans); letter-spacing:.01em;
  padding:14px 24px; border-radius:999px; border:2px solid transparent;
  cursor:pointer; transition:transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
  white-space:nowrap;
}
.btn svg{ width:19px; height:19px; fill:currentColor; flex:none; }
.btn:active{ transform:translateY(1px); }
.btn-orange{ background:var(--orange); color:#fff; box-shadow:0 6px 18px rgba(230,81,0,.30); }
.btn-orange:hover{ background:var(--orange-deep); transform:translateY(-1px); }
.btn-green{ background:var(--green); color:#fff; box-shadow:0 6px 18px rgba(46,125,50,.30); }
.btn-green:hover{ background:var(--green-deep); transform:translateY(-1px); }
.btn-ghost{ background:transparent; color:var(--green-deep); border-color:var(--green); }
.btn-ghost:hover{ background:var(--green); color:#fff; }
.btn-big{ padding:17px 30px; font-size:16px; }
.btn-block{ width:100%; }

/* ---------- highlight ---------- */
.hl{
  background:linear-gradient(180deg, transparent 56%, #ffd28a 56%, #ffbe60 94%, transparent 94%);
  padding:0 .14em; border-radius:3px;
}

/* ================= UTILITY BAR ================= */
.utilbar{ background:var(--green-deep); color:#d9ecd9; font-size:12.5px; }
.utilbar-in{ display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:38px; }
.utilbar-note{ display:inline-flex; align-items:center; gap:8px; }
.utilbar-note .dot{
  width:7px; height:7px; border-radius:50%; background:var(--orange);
  animation:pulse 2s ease-in-out infinite;
}
@keyframes pulse{ 0%,100%{ opacity:1; transform:scale(1);} 50%{ opacity:.45; transform:scale(.8);} }
.utilbar-tel{ display:inline-flex; align-items:center; gap:7px; color:#fff; font-weight:600; white-space:nowrap; }
.utilbar-tel svg{ width:14px; height:14px; fill:var(--orange); }
.utilbar-tel:hover{ color:#ffd28a; }

/* ================= HEADER ================= */
.site-head{
  position:sticky; top:0; z-index:60;
  background:rgba(253,249,240,.96); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
  transition:box-shadow .2s ease;
}
.site-head.scrolled{ box-shadow:0 6px 22px rgba(27,60,27,.10); }
.head-in{ display:flex; align-items:center; justify-content:space-between; gap:14px; min-height:66px; position:relative; }
.brand{ display:inline-flex; align-items:center; gap:9px; }
.crest{ width:42px; height:42px; flex:none; }
.brand-txt{ display:flex; flex-direction:column; line-height:1.05; }
.brand-name{ font-family:var(--serif); font-size:21px; font-weight:700; color:var(--green-deep); letter-spacing:.01em; }
.brand-name em{ font-style:normal; color:var(--orange); }
.brand-sub{ font-size:8.5px; font-weight:700; letter-spacing:.30em; text-transform:uppercase; color:var(--muted); margin-top:3px; }

/* school switcher */
.switch{ display:none; }
.mainnav{ display:none; }
.mainnav a{ font-weight:600; font-size:15px; color:var(--green-deep); padding:6px 2px; position:relative; }
.mainnav a:not(.btn)::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:2px;
  background:var(--orange); transition:right .2s ease;
}
.mainnav a:not(.btn):hover::after{ right:0; }
.nav-cta{ margin-left:6px; padding:11px 20px; }

.burger{
  display:inline-flex; flex-direction:column; gap:5px;
  background:none; border:0; padding:10px; cursor:pointer;
}
.burger span{ width:22px; height:2.5px; border-radius:2px; background:var(--green-deep); transition:transform .2s ease, opacity .2s ease; }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7.5px) rotate(-45deg); }

/* ================= HERO ================= */
.hero{ padding:56px 0 60px; background:
  radial-gradient(800px 400px at 90% -10%, rgba(245,124,0,.07), transparent 60%),
  radial-gradient(700px 400px at -10% 110%, rgba(46,125,50,.08), transparent 60%),
  var(--cream);
}
.hero-in{ display:flex; flex-direction:column; gap:36px; }
.hero-kicker{
  display:inline-flex; align-items:center; gap:10px; flex-wrap:wrap;
  font-weight:700; font-size:13.5px; color:var(--green-deep); margin-bottom:18px;
}
.hero-kicker .tag{
  background:var(--orange-soft); color:var(--orange-deep);
  font-weight:800; font-size:11.5px; letter-spacing:.06em; text-transform:uppercase;
  padding:6px 12px; border-radius:6px;
}
.hero h1{
  font-family:var(--serif);
  font-size:38px; line-height:1.12; font-weight:700; color:var(--green-deep);
  letter-spacing:-.01em; max-width:20ch;
}
.hero-sub{ margin-top:18px; font-size:17px; color:var(--muted); max-width:54ch; }
.hero-sub strong{ color:var(--ink); }
.hero-cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }
.hero-verse{
  margin-top:30px; display:flex; gap:12px; align-items:flex-start;
  max-width:56ch; padding:14px 18px;
  border-left:4px solid var(--orange); background:var(--white);
  border-radius:0 12px 12px 0; box-shadow:var(--shadow);
}
.hero-verse p{ font-family:var(--serif); font-style:italic; font-size:15px; color:var(--ink); }
.hero-verse span{ display:block; margin-top:4px; font-family:var(--sans); font-style:normal; font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--orange-deep); }

/* hero crest illustration */
.hero-crest{ display:none; }
.crest-stage{
  position:relative; width:min(340px, 80vw); aspect-ratio:1/1; margin:0 auto;
}
.crest-stage .ring{
  position:absolute; inset:0; border-radius:50%;
  background:radial-gradient(circle at 30% 25%, #fff, var(--green-soft));
  border:3px solid var(--green);
  box-shadow:var(--shadow-lg);
}
.crest-stage .ring::after{
  content:""; position:absolute; inset:10px; border-radius:50%;
  border:2px dashed rgba(46,125,50,.35);
}
.crest-stage svg.big{ position:absolute; inset:0; margin:auto; width:62%; height:62%; }
.crest-cap{
  position:absolute; left:50%; bottom:-14px; transform:translateX(-50%);
  background:var(--white); border:2px solid var(--orange); border-radius:999px;
  padding:8px 16px; font-size:12.5px; font-weight:700; color:var(--green-deep);
  box-shadow:var(--shadow); white-space:nowrap;
}
.crest-cap em{ font-style:normal; color:var(--orange-deep); }

/* ================= 7 HABITS BAND ================= */
.habitsband{ background:var(--green-deep); border-top:2px solid var(--orange); border-bottom:2px solid var(--orange); overflow:hidden; padding:12px 0; }
.habits-track{ display:flex; align-items:center; gap:30px; width:max-content; animation:hz-scroll 42s linear infinite; }
.habitsband:hover .habits-track{ animation-play-state:paused; }
.habit{ white-space:nowrap; font-size:13px; font-weight:700; letter-spacing:.04em; color:#eaf5ea; }
.habit b{ color:var(--orange); font-weight:800; margin-right:6px; }
.habits-track i{ font-style:normal; color:var(--orange); font-size:11px; }
@keyframes hz-scroll{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }

/* ================= SECTIONS ================= */
.section{ padding:64px 0; }
.section-white{ background:var(--white); }
.section-soft{ background:var(--cream-deep); }
.sec-head{ max-width:660px; margin-bottom:36px; }
.sec-kicker{
  display:inline-block; font-size:12px; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
  color:var(--orange-deep); margin-bottom:10px;
}
.sec-kicker::before{ content:"❧ "; color:var(--green); }
.sec-head h2{
  font-family:var(--serif); font-size:30px; line-height:1.16; font-weight:700;
  color:var(--green-deep); letter-spacing:-.01em;
}
.sec-sub{ margin-top:12px; font-size:15.5px; color:var(--muted); }
.sec-head.light h2{ color:#fff; }
.sec-head.light .sec-sub{ color:#cfe4cf; }
.sec-head.light .sec-kicker{ color:#ffd28a; }
.sec-head.light .sec-kicker::before{ color:var(--orange); }

/* ================= HERITAGE TIMELINE ================= */
.timeline{ display:grid; grid-template-columns:1fr; gap:14px; }
.tl-item{
  position:relative; background:var(--white); border:1px solid var(--line);
  border-radius:var(--r); padding:22px 22px 20px; box-shadow:var(--shadow);
}
.tl-year{
  display:inline-block; font-family:var(--serif); font-size:24px; font-weight:700;
  color:var(--orange-deep); margin-bottom:8px;
}
.tl-item h3{ font-size:16.5px; font-weight:700; color:var(--green-deep); margin-bottom:6px; }
.tl-item p{ font-size:14px; color:var(--muted); }
.founder-quote{
  margin-top:14px; background:var(--green-deep); color:#eaf5ea;
  border-radius:16px; padding:26px 24px; position:relative;
}
.founder-quote p{ font-family:var(--serif); font-style:italic; font-size:16.5px; line-height:1.55; }
.founder-quote cite{ display:block; margin-top:14px; font-style:normal; font-size:13px; font-weight:700; color:#ffd28a; }
.founder-quote::before{
  content:"\201C"; position:absolute; top:6px; left:16px;
  font-family:var(--serif); font-size:64px; color:rgba(255,255,255,.16);
}

/* ================= TWO SCHOOLS ================= */
.schools{ display:grid; grid-template-columns:1fr; gap:18px; }
.school-card{
  background:var(--white); border:1.5px solid var(--line); border-radius:18px;
  padding:28px 24px; box-shadow:var(--shadow); position:relative; overflow:hidden;
  transition:transform .15s ease, box-shadow .15s ease;
}
.school-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lg); }
.school-card::before{
  content:""; position:absolute; top:0; left:0; right:0; height:6px;
  background:var(--green);
}
.school-card.jn::before{ background:var(--orange); }
.school-tag{
  display:inline-block; font-size:11px; font-weight:800; letter-spacing:.10em; text-transform:uppercase;
  color:var(--green-deep); background:var(--green-soft);
  padding:5px 11px; border-radius:999px; margin-bottom:14px;
}
.school-card.jn .school-tag{ color:var(--orange-deep); background:var(--orange-soft); }
.school-card h3{ font-family:var(--serif); font-size:22px; font-weight:700; color:var(--green-deep); margin-bottom:6px; }
.school-card .range{ font-size:13.5px; font-weight:700; color:var(--orange-deep); margin-bottom:12px; }
.school-card p{ font-size:14px; color:var(--muted); }
.school-card ul{ margin-top:14px; display:grid; gap:8px; }
.school-card li{ position:relative; padding-left:24px; font-size:13.5px; color:var(--ink); }
.school-card li::before{
  content:"✓"; position:absolute; left:0; top:2px;
  width:16px; height:16px; border-radius:50%;
  background:var(--green-soft); color:var(--green-deep);
  font-size:10px; font-weight:800; line-height:16px; text-align:center;
}
.school-card .btn{ margin-top:20px; }

/* ================= CO-CURRICULAR ================= */
.coco{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.coco-chip{
  background:var(--white); border:1.5px solid var(--line); border-radius:12px;
  padding:14px 16px; font-weight:700; font-size:14px; color:var(--green-deep);
  display:flex; align-items:center; gap:10px;
  transition:transform .15s ease, border-color .15s ease;
}
.coco-chip:hover{ transform:translateY(-2px); border-color:var(--green); }
.coco-chip .ic{
  width:34px; height:34px; flex:none; border-radius:9px;
  background:var(--orange-soft); display:flex; align-items:center; justify-content:center;
  font-size:16px;
}

/* ================= AWARDS ================= */
.awards{ display:grid; grid-template-columns:1fr; gap:12px; }
.award{
  display:flex; gap:14px; align-items:flex-start;
  background:var(--white); border:1px solid var(--line); border-radius:var(--r);
  padding:18px 20px;
}
.award .laurel{
  width:44px; height:44px; flex:none; border-radius:50%;
  background:var(--orange-soft); display:flex; align-items:center; justify-content:center;
  font-size:20px;
}
.award h3{ font-size:15px; font-weight:700; color:var(--green-deep); margin-bottom:3px; }
.award p{ font-size:13px; color:var(--muted); }

/* ================= E-LEARNING (dark) ================= */
.section-dark{
  background:linear-gradient(180deg, var(--green-deep) 0%, #123f15 100%);
  color:#fff;
}
.elab-grid{ display:grid; grid-template-columns:1fr; gap:14px; }
.elab{
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.16);
  border-radius:16px; padding:24px 22px;
}
.elab h3{ font-size:16.5px; font-weight:700; margin-bottom:8px; color:#fff; }
.elab p{ font-size:14px; color:#cfe4cf; line-height:1.6; }
.elab .tag{
  display:inline-block; margin-bottom:10px; font-size:11px; font-weight:800;
  letter-spacing:.08em; text-transform:uppercase;
  color:var(--green-deep); background:var(--orange); padding:4px 10px; border-radius:999px;
}
.diaspora{
  margin-top:16px; background:rgba(255,255,255,.09); border:1px dashed rgba(255,210,138,.5);
  border-radius:16px; padding:24px 22px;
}
.diaspora h3{ font-size:17px; color:#ffd28a; margin-bottom:8px; }
.diaspora p{ font-size:14px; color:#e4f0e4; }

/* ================= ADMISSIONS ================= */
.steps{ display:grid; grid-template-columns:1fr; gap:12px; margin-bottom:40px; }
.step{
  background:var(--white); border:1px solid var(--line); border-radius:var(--r);
  padding:20px; position:relative;
}
.step .num{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:50%;
  background:var(--green); color:#fff; font-weight:800; font-size:15px;
  margin-bottom:12px;
}
.step h3{ font-size:15.5px; font-weight:700; color:var(--green-deep); margin-bottom:5px; }
.step p{ font-size:13.5px; color:var(--muted); }

.adm-cols{ display:grid; grid-template-columns:1fr; gap:28px; }
.form-card{
  background:var(--white); border:1px solid var(--line); border-radius:18px;
  padding:26px 22px; box-shadow:var(--shadow);
}
.form-card h3{ font-family:var(--serif); font-size:20px; font-weight:700; color:var(--green-deep); }
.form-note{ margin-top:6px; font-size:13px; color:var(--muted); margin-bottom:18px; }
.f-row{ margin-bottom:15px; }
.f-row-2{ display:grid; grid-template-columns:1fr; gap:15px; }
.f-row label{ display:block; font-size:11.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--green-deep); margin-bottom:6px; }
.f-row input, .f-row select{
  width:100%; font:500 15px/1.3 var(--sans); color:var(--ink);
  padding:12px 14px; border:1.5px solid #ddd6c2; border-radius:10px;
  background:#fff; appearance:none;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.f-row select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%231b5e20' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; padding-right:38px;
}
.f-row input::placeholder{ color:#a8a695; }
.f-row input:focus, .f-row select:focus{
  outline:none; border-color:var(--green);
  box-shadow:0 0 0 3px rgba(46,125,50,.13);
}
.f-row input.invalid{ border-color:#d8232f; box-shadow:0 0 0 3px rgba(216,35,47,.10); }
.f-err{ display:none; margin-top:5px; font-size:12px; font-weight:600; color:#d8232f; }
.f-err.show{ display:block; }
.success-card{
  display:none; background:var(--green-soft); border:1.5px solid var(--green);
  border-radius:14px; padding:20px; margin-top:6px;
}
.success-card.show{ display:block; }
.success-card h4{ font-size:16px; font-weight:800; color:var(--green-deep); margin-bottom:8px; }
.success-card p{ font-size:13.5px; color:var(--ink); margin-bottom:6px; }
.success-card .refline{
  display:flex; gap:8px; flex-wrap:wrap; margin-top:10px;
}
.success-card .refbox{
  background:var(--white); border:1.5px dashed var(--green); border-radius:10px;
  padding:8px 14px; font-size:13px;
}
.success-card .refbox b{ display:block; font-size:15px; color:var(--green-deep); font-family:var(--serif); }
.sync-line{ margin-top:10px; font-size:12.5px !important; color:var(--muted) !important; font-style:italic; }

/* result checker */
.check-card{
  background:var(--white); border:1px solid var(--line); border-radius:18px;
  padding:26px 22px; box-shadow:var(--shadow);
}
.check-card h3{ font-family:var(--serif); font-size:20px; font-weight:700; color:var(--green-deep); margin-bottom:6px; }
.check-card .hint{ font-size:13px; color:var(--muted); margin-bottom:16px; }
.check-card .hint b{ color:var(--green-deep); }
.check-row{ display:grid; grid-template-columns:1fr; gap:10px; }
.check-row input{
  font:600 15px/1.3 var(--sans); padding:12px 14px;
  border:1.5px solid #ddd6c2; border-radius:10px; background:#fff; color:var(--ink);
}
.check-row input:focus{ outline:none; border-color:var(--green); box-shadow:0 0 0 3px rgba(46,125,50,.13); }
.result-box{
  display:none; margin-top:16px; border-radius:14px; padding:18px;
  background:var(--green-soft); border:1.5px solid var(--green);
}
.result-box.show{ display:block; }
.result-box.bad{ background:#fdeeec; border-color:#d8232f; }
.result-box h4{ font-size:15px; font-weight:800; color:var(--green-deep); margin-bottom:8px; }
.result-box.bad h4{ color:#d8232f; }
.result-box table{ width:100%; border-collapse:collapse; font-size:13px; }
.result-box td{ padding:6px 4px; border-bottom:1px solid rgba(27,94,32,.15); }
.result-box td:last-child{ text-align:right; font-weight:700; }
.result-box .sum{ margin-top:8px; font-size:13px; font-weight:700; color:var(--green-deep); }

/* ================= NEWS ================= */
.news{ display:grid; grid-template-columns:1fr; gap:14px; }
.news-card{
  background:var(--white); border:1px solid var(--line); border-radius:var(--r);
  padding:22px; display:flex; flex-direction:column; gap:8px;
  transition:transform .15s ease, box-shadow .15s ease;
}
.news-card:hover{ transform:translateY(-2px); box-shadow:var(--shadow); }
.news-tag{
  align-self:flex-start; font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:var(--orange-deep); background:var(--orange-soft); padding:4px 10px; border-radius:999px;
}
.news-card h3{ font-size:16px; font-weight:700; color:var(--green-deep); line-height:1.35; }
.news-card p{ font-size:13.5px; color:var(--muted); }
.news-date{ font-size:12px; color:var(--muted); }

/* ================= GALLERY ================= */
.gallery{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.g-tile{
  border-radius:12px; overflow:hidden; aspect-ratio:4/3; position:relative;
  display:flex; align-items:flex-end;
}
.g-tile svg{ position:absolute; inset:0; width:100%; height:100%; }
.g-tile span{
  position:relative; z-index:1; width:100%;
  padding:10px 12px; font-size:12.5px; font-weight:700; color:#fff;
  background:linear-gradient(transparent, rgba(20,30,15,.75));
}

/* ================= CONTACT ================= */
.contact-grid{ display:grid; grid-template-columns:1fr; gap:16px; }
.contact-card{
  background:var(--white); border:1px solid var(--line); border-radius:var(--r);
  padding:24px;
}
.contact-card h3{ font-size:15px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--green-deep); margin-bottom:10px; }
.contact-card p{ font-size:14px; color:var(--ink); margin-bottom:6px; }
.contact-card a{ font-weight:700; color:var(--orange-deep); }
.map-card{ background:var(--green-deep); border-radius:var(--r); overflow:hidden; min-height:200px; position:relative; }
.map-card svg{ width:100%; height:100%; display:block; }

/* ================= FOOTER ================= */
.site-foot{ background:#12240f; color:#b9cdb4; }
.foot-in{ display:grid; grid-template-columns:1fr; gap:34px; padding-top:52px; padding-bottom:44px; }
.foot-brand{ display:flex; gap:14px; align-items:flex-start; max-width:340px; }
.crest-sm{ width:46px; height:46px; flex:none; }
.foot-name{ font-family:var(--serif); font-size:19px; font-weight:700; color:#fff; line-height:1.1; }
.foot-name em{ font-style:normal; color:var(--orange); }
.foot-name span{ display:block; font-family:var(--sans); font-size:8.5px; font-weight:700; letter-spacing:.30em; text-transform:uppercase; margin-top:3px; color:#b9cdb4; }
.foot-motto{ margin-top:10px; font-family:var(--serif); font-style:italic; font-size:13.5px; color:var(--orange); }
.foot-line{ margin-top:8px; font-size:13px; line-height:1.55; }
.foot-col{ display:grid; gap:9px; align-content:start; }
.foot-col h4{ font-size:12px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--orange); margin-bottom:6px; }
.foot-col a{ font-size:14px; width:fit-content; position:relative; }
.foot-col a::after{
  content:""; position:absolute; left:0; right:100%; bottom:-2px; height:1.5px;
  background:var(--orange); transition:right .2s ease;
}
.foot-col a:hover{ color:#fff; }
.foot-col a:hover::after{ right:0; }
.foot-base{ border-top:1px solid rgba(255,255,255,.12); padding:16px 0; font-size:12px; }
.foot-base-in{ display:flex; flex-direction:column; gap:6px; }
.concept{ color:#8fa889; }
.concept strong{ color:var(--orange); font-weight:700; }

/* ================= POPUP ================= */
.popup-backdrop{
  position:fixed; inset:0; z-index:90;
  background:rgba(18,30,12,.55); backdrop-filter:blur(3px);
  display:none; align-items:center; justify-content:center; padding:20px;
}
.popup-backdrop.show{ display:flex; }
.popup{
  background:var(--white); border-radius:18px; max-width:420px; width:100%;
  padding:30px 26px 26px; position:relative; box-shadow:var(--shadow-lg);
  border-top:6px solid var(--orange);
  animation:pop-in .3s ease;
}
@keyframes pop-in{ from{ opacity:0; transform:translateY(14px) scale(.98);} to{ opacity:1; transform:none;} }
.popup .x{
  position:absolute; top:12px; right:14px; width:30px; height:30px;
  border:0; background:var(--cream-deep); border-radius:50%; cursor:pointer;
  font-size:15px; color:var(--muted); line-height:1;
}
.popup h3{ font-family:var(--serif); font-size:22px; font-weight:700; color:var(--green-deep); margin-bottom:8px; }
.popup p{ font-size:14px; color:var(--muted); }
.popup .btn{ margin-top:20px; width:100%; }
.popup .later{
  display:block; margin:14px auto 0; background:none; border:0; cursor:pointer;
  font-size:13px; font-weight:600; color:var(--muted); text-decoration:underline;
}

/* ================= SYNC TOAST ================= */
.sync-toast{
  position:fixed; left:50%; bottom:18px; transform:translateX(-50%) translateY(80px);
  z-index:95; background:var(--green-deep); color:#fff;
  border-radius:999px; padding:10px 20px; font-size:13px; font-weight:600;
  box-shadow:var(--shadow-lg); opacity:0; transition:transform .3s ease, opacity .3s ease;
  max-width:90vw; text-align:center;
}
.sync-toast.show{ transform:translateX(-50%); opacity:1; }

/* ================= RESPONSIVE ================= */
@media (min-width:520px){
  .check-row{ grid-template-columns:1fr 1fr auto; }
  .f-row-2{ grid-template-columns:1fr 1fr; }
  .gallery{ grid-template-columns:1fr 1fr 1fr; }
  .awards{ grid-template-columns:1fr 1fr; }
  .foot-base-in{ flex-direction:row; justify-content:space-between; align-items:center; }
}
@media (min-width:640px){
  .hero{ padding:72px 0 80px; }
  .hero h1{ font-size:50px; }
  .section{ padding:80px 0; }
  .sec-head h2{ font-size:34px; }
  .timeline{ grid-template-columns:1fr 1fr; }
  .founder-quote{ grid-column:1 / -1; }
  .schools{ grid-template-columns:1fr 1fr; }
  .steps{ grid-template-columns:1fr 1fr; }
  .news{ grid-template-columns:1fr 1fr; }
  .elab-grid{ grid-template-columns:1fr 1fr; }
  .coco{ grid-template-columns:1fr 1fr 1fr; }
  .gallery{ grid-template-columns:1fr 1fr 1fr 1fr; }
}
@media (min-width:900px){
  .head-in{ min-height:72px; }
  .mainnav{ display:flex; align-items:center; gap:24px; }
  .burger{ display:none; }
  .switch{ display:inline-flex; }

  .hero-in{ flex-direction:row; align-items:center; gap:48px; }
  .hero-copy{ flex:1.15; }
  .hero-crest{ flex:.85; display:block; }
  .hero h1{ font-size:56px; }

  .timeline{ grid-template-columns:1fr 1fr 1fr; }
  .founder-quote{ grid-column:1 / -1; }
  .steps{ grid-template-columns:1fr 1fr 1fr 1fr; }
  .news{ grid-template-columns:1fr 1fr 1fr; }
  .elab-grid{ grid-template-columns:1fr 1fr 1fr; }
  .coco{ grid-template-columns:1fr 1fr 1fr 1fr; }
  .awards{ grid-template-columns:1fr 1fr 1fr; }
  .adm-cols{ grid-template-columns:1.1fr 1fr; align-items:flex-start; }
  .contact-grid{ grid-template-columns:1fr 1fr 1fr; }
  .foot-in{ grid-template-columns:1.5fr 1fr 1fr 1.3fr; gap:40px; }
}

/* school switcher (desktop) */
.switch{
  gap:0; background:var(--cream-deep); border-radius:999px; padding:4px;
  border:1px solid var(--line);
}
.switch button{
  border:0; background:transparent; cursor:pointer;
  font:700 12.5px var(--sans); color:var(--muted);
  padding:8px 14px; border-radius:999px; transition:all .15s ease;
  white-space:nowrap;
}
.switch button.active{ background:var(--green); color:#fff; box-shadow:0 3px 8px rgba(46,125,50,.30); }

/* mobile switcher in hero */
.switch-mobile{ display:flex; gap:0; background:var(--white); border-radius:999px; padding:4px; border:1px solid var(--line); margin-bottom:22px; width:fit-content; }
.switch-mobile button{
  border:0; background:transparent; cursor:pointer;
  font:700 12.5px var(--sans); color:var(--muted);
  padding:8px 14px; border-radius:999px; transition:all .15s ease; white-space:nowrap;
}
.switch-mobile button.active{ background:var(--green); color:#fff; }
@media (min-width:900px){ .switch-mobile{ display:none; } }

/* mobile nav panel */
@media (max-width:899px){
  .mainnav{
    position:absolute; top:100%; left:0; right:0;
    background:var(--cream); border-bottom:1px solid var(--line);
    box-shadow:0 18px 30px rgba(27,60,27,.14);
    display:none; flex-direction:column; align-items:stretch; gap:0;
    padding:10px 20px 20px;
  }
  .mainnav.open{ display:flex; }
  .mainnav a:not(.btn){ padding:13px 4px; border-bottom:1px solid var(--cream-deep); font-size:16px; }
  .mainnav a:not(.btn)::after{ display:none; }
  .nav-cta{ margin:14px 0 0; }
}

/* reduced motion */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .habits-track{ animation:none; }
  .utilbar-note .dot{ animation:none; }
  *{ transition:none !important; }
}