*{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  font-family:'Work Sans', sans-serif;
  color:var(--ink);
  background:var(--cream);
  overflow-x:hidden;
}

h1,h2,h3,.display-font{
  font-family:'Fredoka', sans-serif;
  font-weight:600;
  letter-spacing:-0.01em;
}

h1 { font-size: calc(clamp(2.3rem, 4.6vw, 3.6rem) * var(--heading-scale)) !important; line-height:1.06; }
h2 { font-size: calc(clamp(1.9rem, 3.6vw, 2.8rem) * var(--heading-scale)) !important; }
h3 { font-size: calc(1.5rem * var(--heading-scale)) !important; }

.eyebrow{
  font-family:'Work Sans', sans-serif;
  font-weight:700;
  letter-spacing:0.18em;
  text-transform:uppercase;
  font-size:0.75rem;
}

a{ text-decoration:none; }

/* ---------- Buttons ---------- */
.btn{
  font-family:'Work Sans', sans-serif;
  font-weight:600;
  border-radius:50px;
  padding:0.75rem 1.75rem;
  border:2px solid transparent;
  transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease;
}
.btn:hover{ transform:translateY(-2px); }
.btn:focus-visible{ outline:3px solid var(--ink); outline-offset:2px; }

.btn-gold{ background:var(--gold); color:var(--ink); }
.btn-gold:hover{ background:var(--gold-dark); color:var(--ink); box-shadow:0 8px 20px rgba(217,166,27,.4); }

.btn-maroon{ background:var(--maroon); color:var(--paper); }
.btn-maroon:hover{ background:var(--maroon-dark); color:var(--paper); box-shadow:0 8px 20px rgba(62,18,32,.35); }

.btn-outline-cream{ border-color:rgba(251,247,237,.6); color:var(--paper); background:transparent; }
.btn-outline-cream:hover{ background:rgba(251,247,237,.12); color:var(--paper); }

.btn-outline-ink{ border-color:var(--ink); color:var(--ink); background:transparent; }
.btn-outline-ink:hover{ background:var(--ink); color:var(--cream); }

/* ---------- Navbar ---------- */
.site-nav{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  padding:1.1rem 0;
  transition:background-color .25s ease, padding .25s ease, box-shadow .25s ease;
}
.site-nav.scrolled{
  background:var(--paper);
  padding:0.65rem 0;
  box-shadow:0 4px 24px rgba(35,23,16,.08);
}
.site-nav .nav-link{
  font-weight:600; color:var(--ink); margin:0 0.6rem; font-size:0.95rem;
  position:relative;
}
.site-nav .nav-link::after{
  content:''; position:absolute; left:0; bottom:-4px; width:0; height:2px;
  background:var(--maroon); transition:width .2s ease;
}
.site-nav .nav-link:hover::after{ width:100%; }

.brand-mark{
  display:flex; align-items:center; gap:0.6rem;
  font-family:'Fredoka', sans-serif; font-weight:600; font-size:1.15rem; color:var(--ink);
}
.brand-crest{
  width:42px; height:42px; border-radius:12px;
  background:var(--maroon); color:var(--gold);
  display:flex; align-items:center; justify-content:center;
  font-family:'Fredoka', sans-serif; font-weight:700; font-size:1.05rem;
  flex-shrink:0;
}
.brand-logo-img {
    height: 42px; width: auto; max-width: 160px; border-radius: 8px; object-fit: contain;
}

/* ---------- Hero ---------- */
.hero{
  padding:9.5rem 0 0;
  background:var(--cream);
  position:relative;
}
.hero .lede{ color:var(--ink-soft); font-size:1.08rem; max-width:32rem; }

.stripe-row{ display:flex; height:14px; }
.stripe-row div{ flex:1 1 0; }

/* ---------- Badge signature shape ---------- */
.badge-wrap{ position:relative; display:flex; align-items:center; justify-content:center; overflow:visible; }
.badge-shape{ position:absolute; inset:0; width:100%; height:100%; }
.badge-icon{ position:relative; z-index:2; }
.badge-icon i{ line-height:1; }

.hero-badge-frame{
  width:min(360px, 80vw); aspect-ratio:1/1; margin:0 auto;
}

/* ---------- Section paddings ---------- */
.sec{ padding:6rem 0; }
.sec-sm{ padding:4rem 0; }

.bg-maroon-dark{ background:var(--maroon-dark); color:var(--paper); }
.bg-maroon{ background:var(--maroon); color:var(--paper); }
.bg-teal{ background:var(--teal); color:var(--ink); }
.bg-teal-dark{ background:var(--teal-dark); color:var(--paper); }
.bg-gold{ background:var(--gold); color:var(--ink); }
.bg-paper{ background:var(--paper); color:var(--ink); }
.bg-ink{ background:var(--ink); color:var(--paper); }

/* ---------- Principles / philosophy pillars ---------- */
.pillar-grid{ display:flex; flex-wrap:wrap; justify-content:center; gap:2rem; margin-top:3.5rem; }
.pillar{ text-align:center; flex: 1 1 200px; max-width: 260px; }
.pillar .badge-wrap{ width:104px; height:104px; margin:0 auto 1rem; }
.pillar .badge-icon i{ font-size:2rem; }
.pillar-label{ font-weight:600; font-size:0.95rem; }

/* ---------- School sections / curriculum band ---------- */
.info-card-icon{ width:64px; height:64px; }
.check-list{ list-style:none; padding:0; margin:0; }
.check-list li{ display:flex; gap:0.65rem; padding:0.4rem 0; align-items:flex-start; }
.check-list li i{ color:var(--gold); flex-shrink:0; margin-top:0.28rem; }
.check-list.dark li i{ color:var(--gold); }
.check-list.light li i{ color:var(--maroon); }

/* ---------- Offer list ---------- */
.offer-list li i{ color:var(--maroon-dark); }

/* ---------- Stats ---------- */
.stat-num{ font-family:'Fredoka', sans-serif; font-weight:700; font-size:clamp(2rem,4vw,2.75rem); }
.stat-label{ font-weight:600; font-size:0.9rem; }

/* ---------- Program pills ---------- */
.prog-pill{
  display:inline-flex; align-items:center; padding:0.5rem 1.2rem; border-radius:50px;
  border:1.5px solid rgba(251,247,237,.5); font-weight:600; font-size:0.9rem; margin:0.3rem;
}

/* ---------- Footer ---------- */
.footer-heading{ font-family:'Fredoka', sans-serif; font-weight:600; color:var(--gold); font-size:0.95rem; letter-spacing:.03em; }
.footer-link, .footer-text{ color:rgba(251,247,237,.78); }
.social-btn{
  width:38px; height:38px; border-radius:50%; background:rgba(251,247,237,.1);
  display:flex; align-items:center; justify-content:center; color:var(--paper);
  transition:background .2s ease;
}
.social-btn:hover{ background:var(--gold); color:var(--ink); }
hr.footer-rule{ border-color:rgba(251,247,237,.15); }

/* ---------- Reveal animation ---------- */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s ease; }
.reveal.is-visible{ opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  html{ scroll-behavior:auto; }
}

.curve-divider{ line-height:0; }

/* Admin Sidebar Styles */
.admin-sidebar {
  position: fixed; right: -360px; top: 0; width: 360px; height: 100vh;
  background: var(--ink); color: var(--paper); z-index: 10000;
  padding: 20px; overflow-y: auto; transition: right 0.3s ease;
  box-shadow: -5px 0 15px rgba(0,0,0,0.2);
}
.admin-sidebar.open { right: 0; }
.admin-sidebar h4 { color: var(--gold); }
.admin-sidebar label { font-size: 0.9rem; font-weight: 600; margin-bottom: 5px; display:block; color:white; }
.admin-sidebar hr { border-color: rgba(255,255,255,0.2); }
.admin-toggle-btn {
  position: fixed; right: 20px; bottom: 20px; z-index: 9999;
  background: var(--maroon); color: white; border-radius: 50%;
  width: 60px; height: 60px; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3); border: none; font-size: 1.5rem; cursor: pointer;
}
.sec-setting {
  display: flex; flex-direction: column; justify-content: center;
  background: rgba(255,255,255,0.05); padding: 10px; border-radius: 6px; margin-bottom: 10px;
}

/* Color Swatches */
.color-swatch-container { display: flex; flex-wrap: wrap; gap: 8px; }
.color-swatch { width: 26px; height: 26px; border-radius: 50%; cursor: pointer; border: 2px solid transparent; transition: transform 0.1s; }
.color-swatch:hover { transform: scale(1.15); }
.color-swatch.active { border-color: white; outline: 2px solid rgba(255,255,255,0.4); }

/* Icon Picker */
.icon-picker-modal { position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); background:white; padding:20px; border-radius:12px; z-index:10001; display:none; box-shadow:0 10px 40px rgba(0,0,0,0.5); width:340px; }
.icon-picker-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.6); z-index:10000; display:none; }
.icon-grid { display:grid; grid-template-columns:repeat(5, 1fr); gap:10px; margin-top:15px; }
.icon-option { font-size:1.5rem; color:var(--ink); text-align:center; cursor:pointer; padding:10px; border-radius:8px; transition:background 0.2s; }
.icon-option:hover { background:var(--cream); }

/* Lists */
.editable-list-item { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 8px; }
.remove-item-btn { background: transparent; border: none; color: #ff6b6b; cursor: pointer; padding: 0; font-size: 1.1rem; line-height: 1; }
.add-item-btn { font-size: 0.85rem; padding: 4px 12px; background: rgba(0,0,0,0.1); border: 1px dashed rgba(0,0,0,0.3); border-radius: 4px; cursor: pointer; display: inline-block; margin-top: 5px; font-weight: 600; }
.add-item-btn:hover { background: rgba(0,0,0,0.2); }
[contenteditable="true"] { outline: none; transition: background 0.2s; }
[contenteditable="true"]:hover { background: rgba(0,0,0,0.05); }
[contenteditable="true"]:focus { background: rgba(255,255,255,0.1); border-color: var(--gold) !important; }
.clickable-icon { cursor:pointer; transition:transform 0.2s; }
.clickable-icon:hover { transform: scale(1.1); }