/* Inter webfont import removed: the site now uses Arial/Helvetica to match the original.
   Leaving the import would keep fetching a face nothing renders. */

:root{
  --bg:#ffffff;
  --bg-2:#f6f9fc;
  --panel:#ffffff;
  --panel-2:#f4f7fa;
  --line:#e3e8ef;
  --line-soft:#eef1f6;
  --ink:#172033;
  --ink-soft:#475063;
  --ink-mut:#8b94a6;
  /* spark palette sampled from logo */
  --cyan:#40b0e0;
  --blue:#3090c0;
  --lime:#7fc62b;
  --orange:#f0a030;
  --yellow:#e8b526;
  /* subject color assignments */
  --math:#40b0e0;
  --science:#7fc62b;
  --la:#f0a030;
  --social:#e8b526;
  --special:#9b59b6;
  --radius:18px;
  --shadow:0 14px 38px rgba(26,46,80,.09);
  --shadow-sm:0 4px 16px rgba(26,46,80,.06);
  --head:#15212e;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;padding:0}
body{
  background:
    radial-gradient(1200px 560px at 88% -14%, rgba(64,176,224,.08), transparent 60%),
    radial-gradient(1000px 520px at -8% 108%, rgba(127,198,43,.08), transparent 60%),
    var(--bg);
  color:var(--ink);
  font-family:Arial,Helvetica,sans-serif;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
.wrap{max-width:1160px;margin:0 auto;padding:0 22px}
h1,h2,h3{font-family:Arial,Helvetica,sans-serif;letter-spacing:.01em}

/* ---------- top bar ---------- */
.topbar{
  position:sticky;top:0;z-index:60;
  background:linear-gradient(120deg,#15212e,#1d3140 58%,#1a2c3a);
  border-bottom:1px solid rgba(255,255,255,.06);
  box-shadow:0 6px 24px rgba(20,40,60,.18);
}
.topbar-inner{display:flex;flex-direction:column;padding:14px 0 12px}
.topbar-row1{display:flex;align-items:center;gap:16px}
.topbar-row2{display:flex;align-items:center;justify-content:flex-end;margin-top:10px;padding-top:10px;border-top:1px solid rgba(255,255,255,.07)}
.brand{display:flex;align-items:center;gap:13px}
.brand img{height:52px;width:auto;display:block}
.brand .bt{display:flex;flex-direction:column;line-height:1.05}
.brand .bt .b1{font-family:Arial,Helvetica,sans-serif;font-weight:700;letter-spacing:.08em;font-size:22px;color:#fff}
.brand .bt .b2{font-size:10px;color:var(--cyan);letter-spacing:.16em;text-transform:uppercase;margin-top:2px}
.spacer{flex:1}

.nav{display:flex;align-items:center;gap:2px;flex-wrap:nowrap}
.nav a{
  color:rgba(255,255,255,.78);font-weight:600;font-size:13px;
  padding:8px 11px;border-radius:10px;transition:.16s;white-space:nowrap;
}
.nav a:hover{color:#fff;background:rgba(255,255,255,.08)}
.nav a.active{color:#15212e;background:linear-gradient(135deg,var(--cyan),var(--lime));box-shadow:0 4px 14px rgba(64,176,224,.35)}

.portal{display:flex;gap:9px;align-items:center}
.portal a{
  font-size:12px;font-weight:700;color:rgba(255,255,255,.72);
  border:1px solid rgba(255,255,255,.2);border-radius:999px;padding:7px 16px;transition:.16s;
  display:inline-flex;align-items:center;gap:6px;cursor:pointer;
}
.portal a:hover{color:#fff;border-color:rgba(255,255,255,.4);background:rgba(255,255,255,.08)}
.portal a .soon{font-size:8.5px;letter-spacing:.08em;background:rgba(232,181,38,.22);color:#f0c860;padding:2px 6px;border-radius:999px;text-transform:uppercase}

.menu-btn{display:none;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);color:#fff;
  border-radius:10px;width:44px;height:42px;font-size:20px;cursor:pointer;align-items:center;justify-content:center}

/* ---------- generic page ---------- */
.page{padding:48px 0 70px;animation:fade .4s ease}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.eyebrow{color:var(--cyan);font-weight:800;letter-spacing:.14em;text-transform:uppercase;font-size:12px;font-family:Arial,Helvetica,sans-serif}
/* round 3 (Tonia): she wants NONE of the blue mini sub-header eyebrow labels anywhere.
   Elements are also deleted from each page; this is the belt-and-braces safety net. */
.eyebrow{display:none!important}
.page h1{font-size:40px;margin:8px 0 6px;font-weight:700}
.lead{color:var(--ink-soft);font-size:17px;max-width:760px;margin:0 0 8px}
.section-head{margin:46px 0 18px}
.section-head h2{font-size:26px;margin:0}
.placeholder{
  border:2px dashed var(--cyan);border-radius:14px;background:rgba(64,176,224,.05);
  padding:18px 22px;color:var(--ink-soft);font-size:14.5px;margin:18px 0;
}
.placeholder b{color:var(--blue)}

/* spark flourish */
.sparkline{display:flex;align-items:center;gap:7px;margin:18px 0}
.sparkline .s{width:9px;height:9px;border-radius:50%}
.sparkline .ln{flex:1;height:2px;background:linear-gradient(90deg,var(--line),transparent)}

/* ---------- HERO ---------- */
.hero{position:relative;overflow:hidden;border-radius:26px;
  background:linear-gradient(135deg,#15212e,#1d3346 62%,#16384a);
  color:#fff;padding:62px 52px;margin-top:8px;box-shadow:var(--shadow)}
.hero .stars{position:absolute;inset:0;pointer-events:none;opacity:.9}
.hero .stars i{position:absolute;border-radius:50%;animation:tw 3.6s ease-in-out infinite}
@keyframes tw{0%,100%{opacity:.35;transform:scale(.8)}50%{opacity:1;transform:scale(1.15)}}
.hero-in{position:relative;z-index:1;max-width:720px}
.hero .tag{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.16);border-radius:999px;padding:7px 15px;font-size:12.5px;font-weight:600;letter-spacing:.04em;margin-bottom:18px}
.hero h1{font-size:48px;line-height:1.08;margin:0 0 14px;color:#fff}
.hero h1 .grad{background:linear-gradient(120deg,var(--cyan),var(--lime),var(--yellow));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{font-size:18px;color:rgba(255,255,255,.86);max-width:600px;margin:0 0 26px}
.hero .cta{display:flex;gap:13px;flex-wrap:wrap}
.hero-logo-corner{position:absolute;bottom:24px;right:32px;z-index:1}
.btn{display:inline-flex;align-items:center;gap:9px;font-weight:700;font-size:15px;padding:14px 26px;border-radius:14px;transition:.18s;cursor:pointer;border:0;font-family:Arial,Helvetica,sans-serif}
.btn.primary{background:linear-gradient(135deg,var(--cyan),var(--lime));color:#15212e;box-shadow:0 8px 22px rgba(64,176,224,.35)}
.btn.primary:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(64,176,224,.45)}
.btn.ghost{background:rgba(255,255,255,.08);color:#fff;border:1px solid rgba(255,255,255,.2)}
.btn.ghost:hover{background:rgba(255,255,255,.16)}

/* ---------- stat strip ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:30px 0}
.stat{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:22px;text-align:center;box-shadow:var(--shadow-sm);position:relative;overflow:hidden}
.stat .bar{position:absolute;left:0;right:0;top:0;height:4px}
.stat .n{font-family:Arial,Helvetica,sans-serif;font-size:32px;font-weight:700;color:var(--ink)}
.stat .l{font-size:13px;color:var(--ink-soft);margin-top:2px}

/* ---------- cards / grids ---------- */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.cardbox{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:26px 28px;box-shadow:var(--shadow-sm);position:relative;overflow:hidden}
.cardbox h3{font-size:20px;margin:0 0 8px}
.cardbox p{color:var(--ink-soft);margin:0;font-size:14.5px}

/* mission block */
.mission{background:linear-gradient(135deg,rgba(64,176,224,.08),rgba(127,198,43,.08));
  border:1px solid var(--line);border-radius:22px;padding:38px 40px;text-align:center;margin:14px 0;box-shadow:var(--shadow-sm)}
.mission .icon{font-size:34px}
.mission h2{font-size:24px;margin:10px 0 8px}
.mission p{font-size:17px;color:var(--ink-soft);max-width:760px;margin:0 auto;line-height:1.65}

/* ---------- subject pages ---------- */
.subj-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);transition:.18s}
.subj-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.subj-card .top{padding:22px 26px;color:#fff;position:relative;overflow:hidden}
.subj-card .top .ic{font-size:30px}
.subj-card .top h3{margin:6px 0 4px;font-size:23px;color:#fff}
.subj-card .top .sub{font-size:13px;color:rgba(255,255,255,.88)}
.subj-card .body{padding:22px 26px}
.subj-card .tags{display:flex;flex-wrap:wrap;gap:8px}
.subj-card .tags span{font-size:12px;font-weight:600;background:var(--panel-2);border:1px solid var(--line);border-radius:999px;padding:6px 12px;color:var(--ink-soft)}
.subj-card .more{margin-top:16px;font-weight:700;font-size:13.5px;display:inline-flex;align-items:center;gap:6px}

.scope{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:6px}
/* item14 (round 2): scope columns are plain text, not boxed cards — no border/shadow/radius. */
.scope .col{background:transparent;border:0;border-radius:0;padding:6px 4px 6px 0;box-shadow:none}
.scope .col h4{font-family:Arial,Helvetica,sans-serif;font-size:16px;margin:0 0 12px;display:flex;align-items:center;gap:9px}
.scope .col h4 .dot{width:11px;height:11px;border-radius:50%}
.scope .col ul{margin:0;padding:0;list-style:none}
.scope .col li{font-size:14px;color:var(--ink-soft);padding:6px 0 6px 22px;position:relative;border-bottom:1px solid var(--line-soft)}
.scope .col li:last-child{border-bottom:0}
.scope .col li:before{content:'';position:absolute;left:4px;top:13px;width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.45}

/* ---------- staff ---------- */
.staff-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.staff{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:0 0 24px;box-shadow:var(--shadow-sm);overflow:hidden;transition:.18s}
.staff:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.staff .ph{background:linear-gradient(135deg,var(--cyan),var(--lime));display:flex;align-items:center;gap:16px;padding:20px 24px}
.staff .ph-name{color:#fff;font-family:Arial,Helvetica,sans-serif;font-size:20px;font-weight:700;line-height:1.2}
.staff .in{padding:16px 24px 0}
.staff h3{font-size:19px;margin:0 0 2px}
.staff .role{color:var(--cyan);font-weight:700;font-size:13px;margin-bottom:12px}
.staff .bio{font-size:13.5px;color:var(--ink-soft);line-height:1.6}

/* ---------- testimonials ---------- */
.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.testi{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:24px 26px;box-shadow:var(--shadow-sm);position:relative}
.testi .q{font-size:42px;font-family:Arial,Helvetica,sans-serif;color:var(--cyan);line-height:.6;opacity:.5}
.testi p{font-size:14px;color:var(--ink-soft);margin:6px 0 16px}
.testi .who{font-weight:700;font-size:13.5px}
.testi .who span{color:var(--ink-mut);font-weight:500}

/* ---------- info rows / policies ---------- */
.info-block{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:26px 30px;margin-bottom:18px;box-shadow:var(--shadow-sm)}
.info-block .hd{display:flex;align-items:center;gap:13px;margin-bottom:6px}
.info-block .hd .pin{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;font-size:20px;flex:none}
.info-block h3{margin:0;font-size:19px}
.info-block .tagline{color:var(--cyan);font-weight:700;font-size:13px}
.info-block ul{margin:12px 0 0;padding-left:20px;color:var(--ink-soft);font-size:14.5px}
.info-block ul li{margin:7px 0}
.info-block p{color:var(--ink-soft);font-size:14.5px;margin:8px 0}

.fee-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:6px}
.fee{background:linear-gradient(135deg,rgba(64,176,224,.07),rgba(127,198,43,.07));border:1px solid var(--line);border-radius:16px;padding:26px;text-align:center}
.fee .amt{font-family:Arial,Helvetica,sans-serif;font-size:38px;font-weight:700;color:var(--ink)}
.fee .lbl{color:var(--ink-soft);font-size:14px;margin-top:4px}
.fee .sub{color:var(--ink-mut);font-size:12.5px;margin-top:6px}

.forms-list{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:6px}
.form-link{display:flex;align-items:center;gap:14px;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px 18px;box-shadow:var(--shadow-sm);transition:.16s}
.form-link:hover{border-color:var(--cyan);transform:translateY(-2px)}
.form-link .fi{width:40px;height:40px;border-radius:11px;background:rgba(64,176,224,.12);color:var(--blue);display:grid;place-items:center;font-size:18px;flex:none}
.form-link .ft{font-weight:600;font-size:14px}
.form-link .fm{font-size:12px;color:var(--ink-mut)}

/* ---------- blog ---------- */
.post-list{display:flex;flex-direction:column;gap:16px}
.post{display:flex;gap:20px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:22px 26px;box-shadow:var(--shadow-sm);transition:.16s;align-items:center;text-decoration:none;color:inherit}
.post:hover{border-color:var(--cyan);transform:translateY(-2px)}
.post .thumb{width:64px;height:64px;border-radius:16px;display:grid;place-items:center;font-size:26px;flex:none;color:#fff}
.post .pc h3{margin:0 0 4px;font-size:17px}
.post .pc .meta{font-size:12.5px;color:var(--ink-mut)}
.post .pc p{margin:6px 0 0;font-size:14px;color:var(--ink-soft)}

/* ---------- contact ---------- */
.contact-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:24px;align-items:start}
.field{margin-bottom:14px}
.field label{display:block;font-size:13px;font-weight:600;color:var(--ink-soft);margin-bottom:6px}
.field input,.field textarea,.field select{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:11px;font-size:14px;font-family:inherit;background:var(--panel-2);color:var(--ink)}
.field input:focus,.field textarea:focus,.field select:focus{outline:0;border-color:var(--cyan);background:#fff}
.contact-card{background:linear-gradient(135deg,#15212e,#1d3346);color:#fff;border-radius:var(--radius);padding:30px;box-shadow:var(--shadow)}
.contact-card h3{color:#fff;font-size:20px;margin:0 0 16px}
.contact-card .ci{display:flex;gap:13px;align-items:flex-start;margin-bottom:16px}
.contact-card .ci .ic{width:38px;height:38px;border-radius:11px;background:rgba(255,255,255,.1);display:grid;place-items:center;font-size:17px;flex:none}
.contact-card .ci .t{font-size:11px;color:rgba(255,255,255,.6);text-transform:uppercase;letter-spacing:.08em}
.contact-card .ci .v{font-size:14.5px;color:#fff;font-weight:600}
.note-box{background:rgba(127,198,43,.08);border:1px solid var(--line);border-radius:14px;padding:18px 22px;margin-top:18px;font-size:14px;color:var(--ink-soft)}
.note-box a{color:var(--blue);font-weight:600}

/* ---------- footer ---------- */
.footer{background:linear-gradient(120deg,#15212e,#1a2c3a);color:rgba(255,255,255,.8);margin-top:50px;padding:48px 0 30px}
.footer-in{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:36px}
.footer .fbrand{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.footer .fbrand img{height:42px}
.footer .fbrand .b1{font-family:Arial,Helvetica,sans-serif;font-weight:700;font-size:18px;color:#fff}
.footer p{font-size:13.5px;color:rgba(255,255,255,.65);max-width:300px}
.footer h4{font-family:Arial,Helvetica,sans-serif;color:#fff;font-size:15px;margin:0 0 14px}
.footer ul{list-style:none;padding:0;margin:0}
.footer ul li{margin:9px 0}
.footer ul a{color:rgba(255,255,255,.7);font-size:13.5px;transition:.14s}
.footer ul a:hover{color:var(--cyan)}
.footer .copy{border-top:1px solid rgba(255,255,255,.1);margin-top:34px;padding-top:22px;text-align:center;font-size:12.5px;color:rgba(255,255,255,.5)}

/* ---------- responsive ---------- */
/* mobile nav portal links — hidden on desktop */
.nav-portal-mobile{display:none}

@media(max-width:1200px){
  .nav{display:none;position:absolute;top:100%;left:0;right:0;background:#1a2c3a;flex-direction:column;align-items:stretch;padding:12px;gap:4px;border-bottom:1px solid rgba(255,255,255,.1);z-index:55}
  .nav.open{display:flex}
  .nav a{padding:12px 14px}
  .topbar-row2{display:none}
  .menu-btn{display:flex}
  .stats,.grid-3,.scope,.staff-grid,.testi-grid{grid-template-columns:1fr 1fr}
  .footer-in{grid-template-columns:1fr 1fr}
  /* show login buttons inside hamburger */
  .nav.open .nav-portal-mobile{display:flex;flex-direction:column;gap:6px;padding:8px 14px 4px;border-top:1px solid rgba(255,255,255,.1);margin-top:4px}
  .nav.open .nav-portal-mobile a{font-size:13px;font-weight:700;color:rgba(255,255,255,.8);padding:10px 0;border-bottom:1px solid rgba(255,255,255,.07)}
  .nav.open .nav-portal-mobile a:last-child{border-bottom:0}
}
@media(max-width:640px){
  .page h1{font-size:30px}
  /* hero: stack text + logo vertically */
  .hero{padding:36px 22px}
  /* body-row (flex container with paragraph + logo) stacks on mobile */
  .hero-in > div{flex-direction:column !important;gap:16px !important}
  /* hide logo column — topbar already has the logo */
  .hero-in > div > div:last-child{display:none !important}
  .hero-logo-corner{display:none}
  .hero h1{font-size:28px !important;line-height:1.15;white-space:normal !important}
  .hero p{font-size:15px;margin-bottom:20px}
  .hero .cta{flex-direction:column;gap:10px}
  .hero .cta .btn{width:100%;justify-content:center}
  /* sections */
  .grid-2,.grid-3,.stats,.scope,.staff-grid,.testi-grid,.fee-grid,.forms-list,.contact-grid,.footer-in{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr 1fr}
  .post{flex-direction:column;align-items:flex-start;text-align:left}
  .topbar-inner{padding:10px 0 8px}
  .topbar-row2{display:none}
  .brand img{height:42px}
  .brand .bt .b1{font-size:18px}
  /* section padding */
  .page{padding:32px 0 48px}
  .mission{padding:28px 24px}
  .section-head{margin:32px 0 14px}
  /* staff cards stack nicely already via grid-template-columns:1fr */
  .staff .ph{gap:12px;padding:16px 18px}
  .staff .ph-name{font-size:17px}
  .staff .in{padding:12px 18px 0}
  /* campus photo full width — already 100% */
  .cardbox{padding:20px 22px}
}

/* ---------- ORIGINAL-SITE LOOK ALIGNMENT ----------------------------------
   2026-08-24, SPARK client via Tonia: "make it as absolutely identical to the
   original (sparkofswfl.com) as possible" while keeping the new features.
   Values sampled from the live original with a headless browser:
     body/headings  Arial, Helvetica (Wix served Arial + helvetica-w01-bold)
     heading colour rgb(52,63,100) = #343f64
     ground         plain white, no tinted gradients
     section titles full-width cyan->blue band, centered, uppercase, letterspaced
   Appended as one block so the whole alignment can be lifted in one edit if the
   client prefers the newer styling. -------------------------------------- */
body{
  background:var(--bg);
  font-family:Arial,Helvetica,sans-serif;
}
h1,h2,h3,h4{font-family:Arial,Helvetica,sans-serif;letter-spacing:0;font-weight:700}
h2,h3{color:#343f64}
.section-head{text-align:center;margin:48px 0 20px}
.section-head .eyebrow{display:block;margin-bottom:10px}
.section-head h2{
  width:100vw;position:relative;left:50%;margin-left:-50vw;
  background:linear-gradient(90deg,#00c9f2 0%,#00a6e8 45%,#0069d2 100%);
  color:#0a1b2c;
  text-transform:uppercase;
  letter-spacing:.2em;
  font-size:clamp(18px,2.4vw,30px);
  padding:24px 16px;
}

/* ---- pass 2 (2026-08-24): the ORIGINAL is light, not dark. Tonia's client: the section
   "still looks way different." Pass 1 only changed type + section bands and left the navy
   skin, which was the dominant difference. Converting header + hero to the original's
   white ground with dark text. Features are untouched — this is skin only. ---- */
.topbar{background:#fff;border-bottom:1px solid #e6e6e6;box-shadow:0 1px 0 rgba(0,0,0,.05)}
.topbar,.topbar a,.topbar .b1,.topbar .b2,.topbar .bt{color:#12263a}
.topbar-row2{border-top-color:#ededed}
.hero{background:#fff;color:#111;box-shadow:none;border-radius:0;padding:26px 0 6px;text-align:center}
.hero h1{color:#12263a !important;white-space:normal !important}
.hero p,.hero .lead{color:#333 !important}
.hero .tag{background:#eaf5fb;border:1px solid #cfe6f5;color:#12263a}
.hero canvas,.hero .stars,.hero-logo-corner{display:none !important}
.hero-in{max-width:820px;margin:0 auto}
.hero .cta{justify-content:center}

/* student testimonial block, mirroring the original's photo mosaic + quote column */
.student-say{display:grid;grid-template-columns:1.15fr 1fr;gap:34px;align-items:start;margin-top:26px}
.student-say img{width:100%;height:auto;display:block;border-radius:4px}
.student-say h3{font-family:Arial,Helvetica,sans-serif;font-size:23px;color:#12263a;margin:0 0 16px;text-align:left}
.student-say h3 span{color:#2bb3e8}
.student-say ul{list-style:none;margin:0;padding:0}
.student-say li{font-size:14.5px;color:#333;margin:0 0 14px;line-height:1.55}
@media(max-width:860px){.student-say{grid-template-columns:1fr}}
/* pass-2 corrections: the ghost button was white-on-white once the hero went light,
   and the first-day countdown was the last dark block fighting the new ground. */
.hero .btn.ghost{background:#fff;color:#12263a;border:1px solid #c9d6e2}
.hero .btn.ghost:hover{background:#f2f7fb}
#fdBanner{background:linear-gradient(120deg,#eaf6fd,#dceffa 60%,#e8f4fc) !important;
  border:1px solid #cfe6f5 !important;box-shadow:none !important}
#fdBanner div{color:#12263a !important}
#fdBanner .fd-wiggle span{color:#1c7fb8 !important}

/* ---- pass 3 (2026-08-25): Tonia — "forget the picture. make everything else less
   awkward and more intuitive." Her hard rule is match-by-default, deviate where matching
   looks wrong. Changes: hero image leads the page (as the original does); the duplicate
   eyebrow+band headings collapse to the original's one-word bands; subject cards carry the
   original's real curriculum lists instead of emoji + a run-on line; testimonials run in
   full instead of being cut with an ellipsis; a Contact section exists at all. ---- */

/* The countdown is an announcement strip now, not a hero. Its inline colours were authored
   for the old dark ground — on the light ground white-on-pale is invisible, so the palette
   is pinned HERE rather than left to whichever declaration happens to win. */
#fdBanner{padding:10px 18px !important;border-radius:12px !important;margin:14px 0 6px !important}
#fdBanner span{color:#12263a !important}
#fdBanner #fdCount{color:#4a6076 !important}
#fdBanner .fd-spark{color:#e8b526 !important;font-size:14px}

/* Hero image, full-bleed under the header — the original's opening move. */
.hero-band{width:100vw;position:relative;left:50%;margin-left:-50vw;margin-top:10px}
.hero-band img{width:100%;height:clamp(240px,30vw,420px);object-fit:cover;display:block}
.hero{padding:30px 0 4px !important}
.hero h1{font-size:clamp(24px,3vw,40px) !important;text-wrap:balance;margin:0 0 14px}
.hero p{font-size:16.5px}

.section-lede{text-align:center;max-width:760px;margin:18px auto 26px;color:#475063;font-size:15.5px}
.stats-3{grid-template-columns:repeat(3,1fr)}

/* Subject cards mirror the original's four columns: colour rule, heading, label, list. */
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;align-items:start}
.subjects .cardbox{padding:24px 22px 22px;display:flex;flex-direction:column;height:100%}
.subjects .bar{position:absolute;left:0;right:0;top:0;height:4px}
.subjects h3{font-size:17.5px;margin:6px 0 10px;color:#12263a;line-height:1.25}
.subjects ul{list-style:disc;margin:0 0 18px;padding-left:19px;flex:1}
.subjects li{font-size:14px;color:#475063;margin:0 0 6px;line-height:1.45}
.lbl{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:#8b94a6;font-weight:700;margin:0 0 8px}
.btn.small{padding:9px 18px;font-size:13.5px;background:#fff;color:#12263a;border:1px solid #c9d6e2;align-self:flex-start}
.btn.small:hover{background:#f2f7fb;border-color:var(--cyan)}

/* Testimonials run at full length, so the three columns need room to breathe. */
.testi{padding:26px 26px 28px}
.testi .who{font-size:16px;color:#1c7fb8;font-weight:700;margin:0 0 12px;font-family:Arial,Helvetica,sans-serif}
.testi .who span{color:#1c7fb8;font-weight:400;font-style:italic}
.testi p{font-size:13.5px;line-height:1.62;color:#333;margin:0}

/* Contact — the original closes here; ours points at contact.html rather than a 2nd form. */
.contact-2{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:start}
.contact-2 .cardbox{display:flex;flex-direction:column;height:100%}
.contact-2 h3{font-size:18px;margin:0 0 14px;color:#12263a}
.cinfo{list-style:none;margin:0 0 18px;padding:0}
.cinfo li{font-size:14.5px;color:#475063;margin:0 0 7px}
.cinfo a{color:#1c7fb8}
.cinfo a:hover{text-decoration:underline}
.cnote{font-size:13.5px;color:#8b94a6;margin:0 0 18px;line-height:1.5}
.contact-2 .btn{align-self:flex-start;margin-top:auto}

@media(max-width:1000px){.grid-4{grid-template-columns:1fr 1fr}}
@media(max-width:860px){
  .contact-2{grid-template-columns:1fr}
  .stats-3{grid-template-columns:1fr 1fr 1fr}
  .hero-band img{height:220px}
}
@media(max-width:560px){.grid-4{grid-template-columns:1fr}.stats-3{grid-template-columns:1fr}}

/* pass-3 corrections, found by rendering rather than by reading the diff:
   (a) .btn.ghost is white-on-transparent by default and only overridden INSIDE .hero, so
       the Sparkles button was invisible — the same white-on-white ghost that bit pass 2;
   (b) the hero photo is 2282x760 (3.00:1) and a fixed 420px box cropped the SPARK sign in
       half, so the band now honours the real aspect and only crops on narrow screens. */
.contact-2 .btn.ghost{background:#fff;color:#12263a;border:1px solid #c9d6e2}
.contact-2 .btn.ghost:hover{background:#f2f7fb;border-color:var(--cyan)}
.hero-band img{height:auto;aspect-ratio:2282/760;object-fit:cover}
@media(max-width:860px){.hero-band img{height:210px;aspect-ratio:auto;object-position:30% center}}

/* pass-3, found by INTERACTION rather than by reading the page source. Pass 2 converted the
   header to a white ground but three more-specific rules kept their dark-ground colours, so
   each was still painting for a background that no longer exists:
     1. `.brand .bt .b1` (0,3,0) beat `.topbar .b1` (0,2,0) — the SPARK wordmark was white on
        white, a 179x23 invisible box where the school's own name should be;
     2. the mobile dropdown panel stayed #1a2c3a while its links went dark, so opening the
        hamburger on a phone gave near-black text on navy — unreadable;
     3. `.nav a:hover` set white text, so hovering a desktop nav link erased it.
   Same shape as the pass-2 ghost button: a colour is only correct relative to the ground
   under it, and changing the ground silently invalidates every colour that assumed it. */
.brand .bt .b1{color:#12263a}
.nav a:hover{color:#12263a;background:#eef4f9}
/* 980px, matching the breakpoint where .nav actually becomes a dropdown (line 250).
   At 1024 this would have drawn a white box around the still-horizontal desktop nav. */
@media(max-width:1200px){
  .nav{background:#fff;border:1px solid #e6e6e6;border-top:0;box-shadow:0 10px 24px rgba(26,46,80,.10)}
  .nav a{color:#12263a}
  .nav.open .nav-portal-mobile{border-top:1px solid #e6e6e6}
  .nav.open .nav-portal-mobile a{color:#475063;border-bottom:1px solid #eef1f6}
}

/* ---- pass 4 (2026-08-25), Darlene via Tonia ----
   "She does not want the words SPARK or SPARK Hybrid Education Center next to anything that
   also has the logo. She says it feels repetitive. She prefers the logo instead and wants it
   larger to serve as a greater focal point all across the website."
   Done in CSS rather than by hand: the wordmark markup appears on 14 pages and the footer
   lockup on 11. Twenty-five hand edits is how a closing tag goes missing. ---- */
.brand .bt{display:none}
.footer .fbrand .b1{display:none}
.brand img{height:74px}
.fbrand img{height:56px}
.topbar-row1{min-height:86px}
@media(max-width:640px){.brand img{height:56px}.topbar-row1{min-height:68px}}

/* Font now matches the original: Arial dominant, Helvetica where available.
   The section bands stay uppercase and tracked, which is the closest we get to the
   original's Lulo Clean without licensing it. */
body,.nav,.btn,.section-head h2{font-family:Arial,Helvetica,sans-serif}

/* Staff photos, Darlene's request: "larger, more of a focal point, like on the old website."
   Measured on sparkofswfl.com/staff — the originals render around 400x659, a full portrait
   per person, not a thumbnail beside a name. Ours are 474x562 source images that were being
   drawn as 80px circles, throwing away most of the picture. The photo now leads the card and
   the name sits under it on the brand band. */
.staff .ph{flex-direction:column;align-items:stretch;gap:0;padding:0}
.staff .ph img{width:100%;height:auto;aspect-ratio:474/562;object-fit:cover;object-position:center top;display:block;border-radius:0}
.staff .ph-name{padding:16px 22px 17px;font-size:19px}
@media(max-width:980px){.staff .ph img{aspect-ratio:474/500}}

/* Darlene's history page reads as her own writing, so it should not wear the homepage's
   full-bleed uppercase section band. Plain heading, her capitalisation. */
/* round 6 (Darlene): "What is SPARK?" matches the "SPARK History" title size */
.plain-head{font-size:40px;margin:42px 0 14px;color:var(--head);font-weight:700}
@media(max-width:640px){.plain-head{font-size:30px}}

/* Logo larger again, Tonia 2026-08-25: "make the logo on the header/menu larger on all pages."
   Header min-height grows with it so the bar does not crush the nav. Phone value raised too —
   per her standing rule the phone gets checked and fixed in the same pass, not afterwards. */
.brand img{height:96px}
.topbar-row1{min-height:108px}
@media(max-width:980px){.brand img{height:76px}.topbar-row1{min-height:88px}}
@media(max-width:640px){.brand img{height:64px}.topbar-row1{min-height:76px}}

/* ---- header layout fix, Tonia 2026-08-25: "it almost looks like the logo is touching /
   overlapping the menu."
   Root cause was not spacing. `.topbar-inner{flex-direction:column}` was introduced for the
   homepage's two-row header, but 93 of the 94 pages use the ORIGINAL single-row header
   (brand | spacer | nav | menu-btn). In a column, the `.spacer` that was meant to push the nav
   to the right became a dead element, `.brand` stretched the full 1160px, and the nav dropped
   onto a second line hard against the logo. Every interior page has looked like that.
   So: row is the default again, and the column applies only where the row wrappers exist. ---- */
.topbar-inner{flex-direction:row;align-items:center;gap:24px;padding:12px 0}
.topbar-inner:has(.topbar-row1){flex-direction:column;align-items:stretch;gap:0;padding:14px 0 12px}
.topbar-inner > .brand{flex:none}
.topbar-inner > .nav{flex:0 1 auto}
/* Fallback for engines without :has() — the homepage rows still need to stack. */
@supports not selector(:has(*)){ .topbar-inner{flex-direction:column;align-items:stretch;gap:0} }

/* Homework: colour the subject cards by LEVEL, not by subject (Tonia 2026-08-25) — Darlene
   identifies the two groups by colour, so Green Level and Blue Level need to be distinguishable
   at a glance. Specificity is deliberately 0,3,1 so these beat the per-subject rules cleanly
   rather than relying on source order. */
.grade-section.lvl-lower .subj-card::before{background:linear-gradient(90deg,#7fc62b,#4a8a10)}
.grade-section.lvl-upper .subj-card::before{background:linear-gradient(90deg,#40b0e0,#1e6ea0)}
.grade-section.lvl-lower .subj-name{color:#3a7010}
.grade-section.lvl-upper .subj-name{color:#1e6ea0}
.grade-section.lvl-lower .subj-card{border-color:rgba(127,198,43,.30);background:linear-gradient(180deg,rgba(127,198,43,.05),#fff 70%)}
.grade-section.lvl-upper .subj-card{border-color:rgba(64,176,224,.30);background:linear-gradient(180deg,rgba(64,176,224,.05),#fff 70%)}
.grade-section.lvl-lower .grade-badge{background:linear-gradient(135deg,#7fc62b,#4a8a10);color:#fff}
.grade-section.lvl-upper .grade-badge{background:linear-gradient(135deg,#40b0e0,#1e6ea0);color:#fff}
.grade-section{margin-bottom:34px}

/* Contact: the Sparkles programme is a second school in the same building, not a footnote.
   Tonia 2026-08-25: "we need the whole section about sparkles program to stand out more."
   Phone number added from sparkofswfl.com's own contact page — it was missing here. */
.sparkles-card{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--shadow);margin-top:20px;background:var(--panel)}
.sp-band{background:linear-gradient(135deg,var(--cyan),var(--lime));padding:20px 26px;color:#0f2233}
.sp-kicker{display:block;font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;opacity:.8}
.sp-band h3{margin:4px 0 0;font-size:22px;color:#0f2233}
.sp-body{padding:22px 26px 26px}
.sp-body p{margin:0 0 16px;color:var(--ink-soft);font-size:15px;line-height:1.65}
.sp-info{list-style:none;margin:0 0 20px;padding:0}
.sp-info li{font-size:14.5px;color:var(--ink-soft);margin:0 0 7px}
.sp-info a{color:var(--blue)}
.sp-info a:hover{text-decoration:underline}
/* item21: gradient CTA matching the Sparkles band, so the button stands out like the reference. */
.sp-cta{background:linear-gradient(135deg,var(--cyan),var(--lime));color:#0f2233;border:0;font-weight:700}
.sp-cta:hover{filter:brightness(.96)}

/* History: Tonia asked for something so the page is not plain black and white. Brand accent
   only — the page is Darlene's own writing and should not get dressed up beyond a colour cue. */
.hist-card{border-top:4px solid var(--cyan)}
.hist-card.alt{border-top-color:var(--lime)}
.sparkline .s{width:9px;height:9px;border-radius:50%}

/* Phone-only tap targets. Audited at 390px and 360px: the menu is fine (45px rows), but phone
   numbers, email links and the footer nav sat at 15-16px — and on a phone a phone number is a
   primary control, not decorative text. Padding only, so nothing moves visually on desktop. */
@media(max-width:640px){
  .footer ul li a{display:inline-block;padding:14px 0;line-height:1.2}
  .footer ul li{margin-bottom:2px}
  a[href^="tel:"], a[href^="mailto:"]{display:inline-block;padding:13px 0;line-height:1.3}
  .cinfo a, .sp-info a{display:inline-block;padding:13px 0}
}
@media(max-width:640px){.more{display:inline-block;padding:12px 0;line-height:1.3}}

/* SPARK header (addendum 2): wordmark removed, logo enlarged AND centered.
   Logo sits centered on its own row; the nav centers beneath it. This final block
   supersedes the earlier left-aligned single-row header. Mobile keeps the hamburger
   pinned top-right and the logo centered. */
.topbar-inner{flex-direction:column;align-items:center;gap:12px;padding:16px 0;position:relative}
.topbar-inner .spacer{display:none}
.brand{justify-content:center;flex:none}
.brand img{height:140px}
.nav{justify-content:center;flex-wrap:wrap}
.menu-btn{position:absolute;right:20px;top:22px;color:#12263a;background:#eaf5fb;border:1px solid #cfe6f5}
@media(max-width:980px){.brand img{height:112px}}
@media(max-width:640px){.brand img{height:88px}}

/* item10 / item16: intro lead text spans the full content width instead of the
   narrow 760px measure. */
.lead.wide{max-width:none}

/* item5: center the hero intro paragraph block under the centered heading. */
.hero p{margin-left:auto;margin-right:auto}

/* item8: the student-voices mosaic runs edge-to-edge (full-bleed) like the
   original site, image flush to the left edge, quotes padded on the right. */
.student-say.edge{width:100vw;position:relative;left:50%;margin-left:-50vw;
  padding-left:0;padding-right:clamp(20px,5vw,72px);border-radius:0}
@media(max-width:860px){.student-say.edge{padding:0 18px}}

/* Home hero photo carousel (round 9, Darlene): one large photo at a time,
   auto-advancing with clickable dots; pauses on hover, honors reduced-motion. */
.gallery-solo{max-width:900px;margin:20px auto 0}
.gs-viewport{overflow:hidden;border-radius:18px;box-shadow:var(--shadow-sm)}
.gs-track{display:flex;transition:transform .6s ease;will-change:transform}
.gs-track img{flex:0 0 100%;width:100%;height:clamp(280px,44vw,470px);object-fit:cover;display:block}
.gs-dots{display:flex;justify-content:center;gap:9px;margin-top:12px}
.gs-dots button{width:11px;height:11px;padding:0;border-radius:50%;border:1px solid #b7c3cd;background:#d3dde5;cursor:pointer;transition:background .2s}
.gs-dots button.on{background:#0069d2;border-color:#0069d2}
@media(prefers-reduced-motion:reduce){.gs-track{transition:none}}
@media(max-width:640px){.gs-track img{height:230px}}

/* round 9: acronym on ONE line (sized to fit, never wraps); rest centered in ~two lines */
body.home .hero-in{max-width:1000px}
body.home .hero p.spark-lead{white-space:nowrap;font-size:clamp(8px,2.3vw,20px)!important;max-width:none;margin:0 auto 8px}
body.home .hero p.spark-rest{max-width:940px;margin:0 auto;text-wrap:balance}

/* round 7 (Darlene): uniform home section heading size + larger description text.
   Home-scoped (body.home) so shared section bands on other pages are untouched. */
body.home .hero h1, body.home .section-head h2, body.home .mission h2{font-size:32px!important;line-height:1.18}
body.home .hero p{font-size:18px!important}
body.home .mission p{font-size:19px!important}
body.home .section-lede{font-size:17px!important}
@media(max-width:640px){
  body.home .hero h1, body.home .section-head h2, body.home .mission h2{font-size:24px!important}
  body.home .hero p{font-size:16px!important}
  body.home .mission p{font-size:16.5px!important}
  body.home .section-lede{font-size:15.5px!important}
}