.sg-home{
      --navy:#17344f;
      --navy-2:#102a42;
      --blue:#2b6f9f;
      --blue-soft:#eaf3f9;
      --yellow:#f4c84a;
      --ink:#182532;
      --muted:#61717f;
      --line:#dce5eb;
      --paper:#ffffff;
      --wash:#f4f7f9;
      --bio:#4e9d45;
      --chem:#b84d4d;
      --phys:#3477b7;
      --shadow:0 12px 32px rgba(20,52,79,.10);
      --radius:18px;
    }
    .sg-hero{
      background:
        radial-gradient(circle at 92% 10%,rgba(244,200,74,.20),transparent 23rem),
        linear-gradient(135deg,var(--navy-2),var(--blue));
      color:#fff;
      padding:50px 16px 88px;
    }
    .sg-hero-inner{
      width:min(1160px,100%);
      margin:auto;
      text-align:center;
    }
    .sg-eyebrow{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:7px 11px;
      border-radius:999px;
      background:rgba(255,255,255,.12);
      border:1px solid rgba(255,255,255,.20);
      font-size:.78rem;
      font-weight:900;
      letter-spacing:.08em;
      text-transform:uppercase;
    }
    .sg-eyebrow::before{
      content:"";
      width:8px;
      height:8px;
      background:var(--yellow);
      border-radius:50%;
      box-shadow:0 0 0 4px rgba(244,200,74,.16);
    }
    .sg-hero h1{
      max-width:900px;
      margin:18px auto 12px;
      font-size:clamp(2.15rem,6vw,4.2rem);
      line-height:1.02;
      letter-spacing:-.055em;
    }
    .sg-hero p{
      max-width:760px;
      margin:0 auto;
      color:#e9f1f6;
      font-size:clamp(1rem,2.3vw,1.2rem);
    }

    .sg-main{
      width:min(1160px,calc(100% - 32px));
      margin:-54px auto 56px;
    }
    .sg-priority-grid{
      display:grid;
      grid-template-columns:repeat(2,minmax(0,1fr));
      gap:18px;
    }
    .sg-priority-card{
      position:relative;
      overflow:hidden;
      min-height:310px;
      display:flex;
      flex-direction:column;
      background:var(--paper);
      border:1px solid var(--line);
      border-radius:var(--radius);
      box-shadow:var(--shadow);
      padding:26px;
    }
    .sg-priority-card::after{
      content:"";
      position:absolute;
      right:-52px;
      bottom:-62px;
      width:180px;
      height:180px;
      border-radius:50%;
      background:var(--blue-soft);
      z-index:0;
    }
    .sg-priority-card > *{position:relative;z-index:1}
    .sg-card-top{
      display:flex;
      gap:16px;
      align-items:flex-start;
    }
    .sg-icon{
      flex:0 0 52px;
      width:52px;
      height:52px;
      border-radius:15px;
      display:grid;
      place-items:center;
      background:var(--navy);
      color:#fff;
      box-shadow:0 8px 18px rgba(23,52,79,.18);
    }
    .sg-icon svg{width:27px;height:27px}
    .sg-card-kicker{
      margin:0 0 3px;
      color:var(--blue);
      font-size:.76rem;
      font-weight:950;
      letter-spacing:.07em;
      text-transform:uppercase;
    }
    .sg-priority-card h2{
      margin:0;
      font-size:clamp(1.38rem,2.6vw,1.9rem);
      line-height:1.1;
      letter-spacing:-.035em;
    }
    .sg-card-copy{
      margin:17px 0 18px;
      color:var(--muted);
      font-size:.98rem;
    }
    .sg-feature-list{
      margin:0 0 20px;
      padding:0;
      list-style:none;
      display:grid;
      gap:8px;
      color:#384a58;
      font-size:.92rem;
    }
    .sg-feature-list li{
      display:flex;
      align-items:flex-start;
      gap:8px;
    }
    .sg-feature-list li::before{
      content:"✓";
      color:#397e33;
      font-weight:950;
    }
    .sg-card-actions{
      margin-top:auto;
      display:flex;
      flex-wrap:wrap;
      gap:9px;
    }
    .sg-primary-btn,
    .sg-secondary-btn{
      min-height:46px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:8px;
      padding:10px 15px;
      border-radius:11px;
      text-decoration:none;
      font-weight:900;
      transition:transform .15s ease,box-shadow .15s ease;
    }
    .sg-primary-btn{
      background:var(--navy);
      color:#fff;
      border:1px solid var(--navy);
      box-shadow:0 7px 17px rgba(23,52,79,.18);
    }
    .sg-secondary-btn{
      background:#fff;
      color:var(--navy);
      border:1px solid #bdcbd4;
    }
    .sg-primary-btn:hover,
    .sg-secondary-btn:hover{transform:translateY(-1px)}
    .sg-primary-btn:focus-visible,
    .sg-secondary-btn:focus-visible{outline:3px solid rgba(244,200,74,.75);outline-offset:3px}

    .sg-direct-links{
      display:flex;
      flex-wrap:wrap;
      gap:7px;
      margin-top:14px;
    }
    .sg-direct-links a{
      min-height:44px;
      display:inline-flex;
      align-items:center;
      text-decoration:none;
      color:var(--navy);
      background:#eef4f7;
      border:1px solid #d9e4ea;
      border-radius:999px;
      padding:7px 10px;
      font-size:.79rem;
      font-weight:850;
    }

    .sg-more{
      margin-top:18px;
      padding:18px;
      display:grid;
      grid-template-columns:1fr auto;
      gap:18px;
      align-items:center;
      background:#fff;
      border:1px solid var(--line);
      border-radius:15px;
      box-shadow:0 7px 22px rgba(20,52,79,.06);
    }
    .sg-more h2{
      margin:0 0 4px;
      font-size:1.08rem;
      letter-spacing:-.02em;
    }
    .sg-more p{
      margin:0;
      color:var(--muted);
      font-size:.89rem;
    }
    .sg-more-links{
      display:flex;
      flex-wrap:wrap;
      justify-content:flex-end;
      gap:8px;
    }
    .sg-more-links a{
      min-height:44px;
      display:inline-flex;
      align-items:center;
      padding:8px 12px;
      border-radius:10px;
      background:#eef4f7;
      color:var(--navy);
      text-decoration:none;
      font-weight:850;
      font-size:.86rem;
    }

    @media (max-width:820px){
      .sg-navlinks{display:none}
      .sg-priority-grid{grid-template-columns:1fr}
      .sg-priority-card{min-height:0}
      .sg-more{grid-template-columns:1fr}
      .sg-more-links{justify-content:flex-start}
    }
    @media (max-width:640px){
      .sg-hero{padding-top:35px;padding-bottom:76px}
      .sg-main{width:min(100% - 20px,1160px);margin-top:-45px}
      .sg-priority-card{padding:20px}
      .sg-card-top{gap:12px}
      .sg-icon{width:46px;height:46px;flex-basis:46px}
      .sg-card-actions{display:grid;grid-template-columns:1fr}
      .sg-primary-btn,.sg-secondary-btn{width:100%}
      .sg-more-links{display:grid;grid-template-columns:1fr 1fr;width:100%}
      .sg-more-links a{justify-content:center;text-align:center}
    }
  

/* The approved priority layout lives only on the KS4 landing view. */
.school-main{flex:1}
.school-main>.course-view{padding-block:38px 48px}
.ks4-home.sg-home{max-width:none;margin:0;font-size:16px;line-height:1.5}
html[data-school-navigation] .topbar{background:#17344f;border-bottom:0;box-shadow:0 3px 18px #0000001f}
html[data-school-navigation] .header-inner{width:min(1160px,calc(100% - 32px));min-height:64px;gap:20px}
html[data-school-navigation] .brand{display:inline-flex;align-items:center;min-height:44px;font-weight:950;font-size:1.22rem;letter-spacing:-.035em}
html[data-school-navigation] .brand span{color:#f4c84a}
.header-links{display:flex;align-items:center;justify-content:flex-end;gap:14px}
.sg-navlinks{display:flex;align-items:center;gap:6px}
.sg-navlinks a{display:inline-flex;align-items:center;min-height:44px;padding:9px 11px;border-radius:9px;text-decoration:none;font-size:.9rem;font-weight:800}
.sg-navlinks a:hover{background:#ffffff21}
.sg-navlinks a:focus-visible{outline:3px solid #f4c84a;outline-offset:2px}
.sg-courses{margin-top:30px}
.sg-courses>h2{font-size:1.45rem;letter-spacing:-.025em;margin:0 0 18px}
.sg-home .course-choices{gap:18px}
.sg-home .subject-choice{background:var(--navy);border-color:var(--navy)}
.sg-home .subject-choice:hover{background:var(--navy-2);border-color:var(--navy-2)}
.sg-home .subject-initial{color:#fff;background:var(--subject);border-color:transparent}
@media(max-width:1040px){.sg-navlinks{display:none}.header-links{gap:0}}
@media(max-width:650px){.school-main>.course-view{padding-block:25px 30px}}
@media(max-width:360px){html[data-school-navigation] .header-inner{width:calc(100% - 24px);gap:8px}html[data-school-navigation] .brand{font-size:18px}.sg-more{padding:14px}.sg-more-links a{padding-inline:8px}}
@media(max-width:320px){.sg-more-links{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.sg-home *{transition:none!important}}