:root{--navy:#0B1F4D;--blue:#1E5EF7;--orange:#F07A24;--ink:#172033;--muted:#667085;--line:#E4E9F2;--soft:#F6F8FC;--white:#fff;--r:22px;--shadow:0 22px 60px rgba(11,31,77,.10);font-family:Inter,Segoe UI,Arial,sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);background:#fff;line-height:1.6}a{text-decoration:none;color:inherit}img{max-width:100%;display:block}.container{width:min(1180px,calc(100% - 40px));margin:auto}.header{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.96);border-bottom:1px solid var(--line);backdrop-filter:blur(14px)}.nav{min-height:78px;display:flex;align-items:center;justify-content:space-between;gap:20px}.logo img{height:48px;max-width:210px;object-fit:contain}.links{display:flex;align-items:center;gap:22px;font-size:14px;font-weight:750;color:#344054}.links a:hover{color:var(--blue)}.menu{display:none;border:1px solid var(--line);background:#fff;border-radius:12px;padding:9px 12px}.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 22px;border-radius:14px;font-weight:800;border:1px solid transparent}.primary{background:var(--blue);color:#fff}.secondary{background:#fff;color:var(--navy);border-color:var(--line)}.orange{background:var(--orange);color:#fff}.hero{padding:86px 0 70px;background:linear-gradient(180deg,#fff,#F7F9FD)}.hero-grid,.product-grid{display:grid;grid-template-columns:1.04fr .96fr;gap:54px;align-items:center}.kicker{display:inline-block;padding:8px 12px;border-radius:999px;background:#EAF0FF;color:var(--blue);font-size:12px;font-weight:900;letter-spacing:.09em;text-transform:uppercase}h1,h2,h3{margin:0;color:var(--navy);line-height:1.08;letter-spacing:-.035em}h1{font-size:clamp(44px,6vw,76px);margin-top:18px}h2{font-size:clamp(34px,4vw,52px)}h3{font-size:24px}.lead{font-size:clamp(18px,2vw,22px);color:var(--muted);margin:24px 0 0}.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}.proofs{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:32px}.proof{padding:14px;border:1px solid var(--line);border-radius:16px;background:#fff}.proof strong{display:block;color:var(--navy)}.proof span{font-size:13px;color:var(--muted)}.photo{aspect-ratio:4/3;border-radius:30px;overflow:hidden;background:#DDE5F5;box-shadow:var(--shadow)}.photo img{width:100%;height:100%;object-fit:cover}.section{padding:92px 0}.alt{background:var(--soft)}.head{display:flex;justify-content:space-between;align-items:end;gap:28px;margin-bottom:34px}.head p{max-width:650px;margin:0;color:var(--muted);font-size:18px}.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.card{border:1px solid var(--line);border-radius:var(--r);padding:28px;background:#fff;box-shadow:0 10px 30px rgba(11,31,77,.05)}.brand-card{display:flex;flex-direction:column;min-height:410px}.brand-logo{height:105px;display:flex;align-items:center;border-bottom:1px solid var(--line);margin-bottom:24px}.brand-logo img{max-height:72px;max-width:220px}.brand-card p{color:var(--muted);flex:1}.brand-card ul{padding-left:18px}.brand-link{margin-top:14px;color:var(--blue);font-weight:850}.flow{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:12px;align-items:center}.flow-box{padding:24px;border:1px solid var(--line);border-radius:18px;background:#fff;text-align:center}.flow-box span{display:block;color:var(--muted);font-size:13px}.arrow{color:var(--blue);font-weight:900}.features{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.feature{padding:24px;border:1px solid var(--line);border-radius:18px;background:#fff}.feature p{color:var(--muted);margin-bottom:0}.impact{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.impact div{padding:26px;border-radius:18px;background:var(--navy);color:#fff}.impact strong{display:block;font-size:38px}.impact span{color:#D6E2FF}.case{display:grid;grid-template-columns:1.2fr .8fr;gap:24px}.case .photo{min-height:420px}.case-panel{padding:32px;border:1px solid var(--line);border-radius:24px;background:#fff}.cta{padding:82px 0;background:var(--navy);color:#fff}.cta h2{color:#fff}.cta p{color:#D6E2FF}.cta-row{display:flex;align-items:center;justify-content:space-between;gap:28px}.footer{padding:52px 0 24px;background:#071633;color:#C7D2E8}.footer-grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:34px}.footer h4{color:#fff}.footer a{display:block;margin:7px 0}.footer small{display:block;border-top:1px solid rgba(255,255,255,.12);margin-top:32px;padding-top:18px}.product-hero{padding:84px 0;background:var(--soft)}.product-logo{min-height:280px;border:1px solid var(--line);border-radius:26px;background:#fff;display:flex;align-items:center;justify-content:center;padding:42px}.product-logo img{max-height:160px;max-width:320px}.points{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.point{padding:20px;border:1px solid var(--line);border-radius:16px}.point p{color:var(--muted);margin-bottom:0}@media(max-width:900px){.menu{display:block}.links{display:none;position:absolute;top:72px;left:20px;right:20px;flex-direction:column;align-items:flex-start;padding:18px;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow)}.links.open{display:flex}.hero-grid,.product-grid,.case,.cta-row,.footer-grid{grid-template-columns:1fr}.grid3,.features,.impact{grid-template-columns:1fr 1fr}.flow{grid-template-columns:1fr}.arrow{transform:rotate(90deg);text-align:center}}@media(max-width:620px){.container{width:min(100% - 24px,1180px)}.grid3,.features,.impact,.proofs,.points{grid-template-columns:1fr}.head{display:block}.section{padding:70px 0}h1{font-size:44px}}

/* Brand asset correction v2.1 */
.logo img{height:58px;width:auto;max-width:245px;object-fit:contain}
.brand-logo{height:150px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.brand-logo img{width:100%;height:100%;max-width:255px;object-fit:contain}
.product-logo{min-height:380px}
.product-logo img{width:100%;height:100%;max-width:440px;max-height:320px;object-fit:contain}
.footer img[alt="School in a Box"]{width:240px!important;max-width:100%!important;height:auto;object-fit:contain}
@media(max-width:700px){
  .logo img{height:46px;max-width:190px}
  .brand-logo{height:125px}
  .product-logo{min-height:280px}
}



/* School in a Box logo sizing correction v2.2 */

/* Header: make the company logo and its tagline clearly readable. */
.site-header .nav{
  min-height:108px;
}
.site-header .brand-lockup{
  flex:0 0 auto;
}
.site-header .brand-lockup img{
  width:auto;
  height:82px;
  max-width:310px;
  object-fit:contain;
}

/* Ecosystem cards: use the full marked logo area. */
.brand-card .logo-box{
  height:220px;
  min-height:220px;
  padding:10px 12px 18px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.brand-card .logo-box img{
  width:94%;
  height:94%;
  max-width:none;
  max-height:none;
  object-fit:contain;
}

/* Product pages should also display the large, readable logo. */
.product-logo{
  min-height:400px;
  padding:28px;
}
.product-logo img{
  width:94%;
  height:94%;
  max-width:none;
  max-height:340px;
  object-fit:contain;
}

/* Footer company mark. */
.footer img[alt="School in a Box"]{
  width:270px !important;
  max-width:100% !important;
  height:auto !important;
}

/* Keep navigation balanced with the larger logo. */
@media (max-width:1100px){
  .site-header .brand-lockup img{
    height:70px;
    max-width:250px;
  }
  .nav-links{
    gap:16px;
  }
}
@media (max-width:900px){
  .site-header .nav{
    min-height:88px;
  }
  .site-header .brand-lockup img{
    height:64px;
    max-width:230px;
  }
}
@media (max-width:620px){
  .site-header .brand-lockup img{
    height:56px;
    max-width:205px;
  }
  .brand-card .logo-box{
    height:190px;
    min-height:190px;
  }
}




/* School in a Box logo display correction v2.3
   Uses the actual class names in the live static website. */

/* Company logo in the sticky header */
.header .nav{
  min-height:116px !important;
}
.header .logo{
  display:flex !important;
  align-items:center !important;
  flex:0 0 auto !important;
}
.header .logo img{
  width:330px !important;
  height:auto !important;
  max-width:330px !important;
  max-height:96px !important;
  object-fit:contain !important;
}

/* Product cards: use the marked empty area for the logos */
.grid3 .brand-card .brand-logo{
  width:100% !important;
  height:245px !important;
  min-height:245px !important;
  margin:0 0 24px !important;
  padding:8px 12px 22px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  border-bottom:1px solid var(--line) !important;
  overflow:visible !important;
}
.grid3 .brand-card .brand-logo img{
  display:block !important;
  width:auto !important;
  height:auto !important;
  max-width:94% !important;
  max-height:215px !important;
  object-fit:contain !important;
  transform:none !important;
}

/* Give the cards enough vertical room for the enlarged logos */
.grid3 .brand-card{
  min-height:550px !important;
}

/* Product detail pages */
.product-logo{
  min-height:430px !important;
  padding:24px !important;
}
.product-logo img{
  width:auto !important;
  height:auto !important;
  max-width:94% !important;
  max-height:370px !important;
  object-fit:contain !important;
}

/* Footer logo */
.footer img[alt="School in a Box"]{
  width:300px !important;
  max-width:100% !important;
  height:auto !important;
}

/* Maintain balance at narrower desktop sizes */
@media(max-width:1180px){
  .header .logo img{
    width:270px !important;
    max-width:270px !important;
    max-height:84px !important;
  }
  .links{
    gap:14px !important;
  }
}

/* Tablet and mobile */
@media(max-width:900px){
  .header .nav{
    min-height:96px !important;
  }
  .header .logo img{
    width:245px !important;
    max-width:245px !important;
    max-height:76px !important;
  }
  .grid3 .brand-card .brand-logo{
    height:225px !important;
    min-height:225px !important;
  }
  .grid3 .brand-card .brand-logo img{
    max-height:195px !important;
  }
}
@media(max-width:620px){
  .header .logo img{
    width:205px !important;
    max-width:205px !important;
    max-height:66px !important;
  }
  .grid3 .brand-card .brand-logo{
    height:210px !important;
    min-height:210px !important;
  }
  .grid3 .brand-card .brand-logo img{
    max-width:96% !important;
    max-height:185px !important;
  }
}




/* School in a Box above-the-fold hero correction v2.4
   Keeps the complete marketing hero visible in one desktop viewport. */

@media (min-width: 901px) {
  /* Slightly reduce the header height while keeping the logo readable. */
  .header .nav {
    min-height: 92px !important;
  }

  .header .logo img {
    width: 270px !important;
    max-width: 270px !important;
    max-height: 76px !important;
  }

  /* Fit the full hero into the remaining viewport. */
  .hero {
    min-height: calc(100vh - 93px) !important;
    padding: clamp(28px, 4vh, 48px) 0 24px !important;
    display: flex !important;
    align-items: center !important;
  }

  .hero-grid {
    width: 100% !important;
    gap: clamp(28px, 3vw, 48px) !important;
    align-items: center !important;
  }

  .hero h1 {
    font-size: clamp(48px, 5.1vw, 76px) !important;
    line-height: .98 !important;
    margin-top: 14px !important;
    margin-bottom: 0 !important;
  }

  .hero .lead {
    font-size: clamp(17px, 1.42vw, 21px) !important;
    line-height: 1.55 !important;
    margin-top: 18px !important;
  }

  .hero-actions {
    margin-top: 20px !important;
    gap: 10px !important;
  }

  .hero-actions .btn {
    min-height: 46px !important;
    padding: 0 20px !important;
  }

  .hero-proof {
    margin-top: 20px !important;
    gap: 10px !important;
  }

  .proof {
    padding: 11px 13px !important;
    border-radius: 14px !important;
  }

  .proof strong {
    font-size: 16px !important;
  }

  .proof span {
    font-size: 12px !important;
  }

  .hero-photo {
    max-height: calc(100vh - 190px) !important;
    min-height: 410px !important;
    aspect-ratio: 4 / 3 !important;
  }

  .hero-card {
    bottom: 16px !important;
  }
}

/* Tighter desktop/laptop screens such as 1366×768 and 1600×900. */
@media (min-width: 901px) and (max-height: 900px) {
  .header .nav {
    min-height: 84px !important;
  }

  .header .logo img {
    width: 245px !important;
    max-width: 245px !important;
    max-height: 68px !important;
  }

  .hero {
    min-height: calc(100vh - 85px) !important;
    padding: 20px 0 18px !important;
  }

  .hero h1 {
    font-size: clamp(44px, 4.65vw, 66px) !important;
  }

  .hero .lead {
    font-size: clamp(16px, 1.25vw, 19px) !important;
    margin-top: 14px !important;
  }

  .hero-actions {
    margin-top: 16px !important;
  }

  .hero-proof {
    margin-top: 16px !important;
  }

  .hero-photo {
    min-height: 360px !important;
    max-height: calc(100vh - 155px) !important;
  }

  .kicker {
    padding: 7px 11px !important;
    font-size: 12px !important;
  }
}

/* Very short laptop screens: prioritise all marketing actions over oversized imagery. */
@media (min-width: 901px) and (max-height: 760px) {
  .header .nav {
    min-height: 76px !important;
  }

  .header .logo img {
    width: 220px !important;
    max-width: 220px !important;
    max-height: 60px !important;
  }

  .hero {
    min-height: calc(100vh - 77px) !important;
    padding: 14px 0 12px !important;
  }

  .hero h1 {
    font-size: clamp(40px, 4.1vw, 58px) !important;
  }

  .hero .lead {
    font-size: 16px !important;
    line-height: 1.42 !important;
    margin-top: 10px !important;
  }

  .hero-actions {
    margin-top: 12px !important;
  }

  .hero-proof {
    margin-top: 12px !important;
  }

  .proof {
    padding: 8px 10px !important;
  }

  .hero-photo {
    min-height: 320px !important;
    max-height: calc(100vh - 125px) !important;
  }
}

/* Mobile keeps normal document flow and scrolling. */
@media (max-width: 900px) {
  .hero {
    min-height: auto !important;
  }
}




/* School in a Box hero alignment correction v2.5
   Refines spacing and typography to a cleaner enterprise homepage layout. */

@media (min-width: 901px) {
  /* Keep the header compact, but make the company logo slightly more readable. */
  .header .nav {
    min-height: 82px !important;
  }

  .header .logo img {
    width: 255px !important;
    max-width: 255px !important;
    max-height: 70px !important;
    height: auto !important;
    object-fit: contain !important;
  }

  /* Add comfortable page margins and align hero content with the header logo. */
  .hero .container {
    width: min(1480px, calc(100% - 96px)) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .hero-grid {
    gap: clamp(36px, 4vw, 64px) !important;
  }

  /* Reduce the headline to a more restrained enterprise scale. */
  .hero h1 {
    font-size: clamp(46px, 4.25vw, 66px) !important;
    line-height: 1.02 !important;
    letter-spacing: -0.025em !important;
    max-width: 760px !important;
  }

  .hero .lead {
    font-size: clamp(17px, 1.2vw, 20px) !important;
    line-height: 1.55 !important;
    max-width: 760px !important;
  }
}

/* Standard laptop screens */
@media (min-width: 901px) and (max-width: 1440px) {
  .hero .container {
    width: min(1320px, calc(100% - 80px)) !important;
  }

  .hero h1 {
    font-size: clamp(44px, 4vw, 60px) !important;
  }

  .header .logo img {
    width: 245px !important;
    max-width: 245px !important;
  }
}

/* Shorter laptop viewports */
@media (min-width: 901px) and (max-height: 820px) {
  .header .nav {
    min-height: 78px !important;
  }

  .header .logo img {
    width: 238px !important;
    max-width: 238px !important;
    max-height: 64px !important;
  }

  .hero h1 {
    font-size: clamp(42px, 3.8vw, 56px) !important;
  }

  .hero .lead {
    font-size: 17px !important;
  }
}

/* Tablet and mobile retain the existing responsive flow. */
@media (max-width: 900px) {
  .hero .container {
    width: min(100% - 28px, 1180px) !important;
  }

  .header .logo img {
    width: 215px !important;
    max-width: 215px !important;
    max-height: 62px !important;
  }
}