SUNBEAM WORLD SCHOOL — BASE (Layer 2)
   Reset · typography · container · buttons · spv2 section
   headers · utilities · accessibility. Loads after tokens.
   ============================================================ */

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
img,svg,video,iframe{max-width:100%;display:block}
img{height:auto}
ul[class],ol[class]{list-style:none}
button{font:inherit;cursor:pointer;background:none;border:none}
a{color:var(--blue)}

/* ---------- Typography ---------- */
body{
  font-family:var(--font-body);
  font-size:var(--fs-16);
  line-height:var(--lh-body);
  color:var(--g700);
  background:var(--w);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{
  font-family:var(--font-head);
  color:var(--head);
  line-height:var(--lh-tight);
  font-weight:800;
}
h1{font-size:var(--fs-h1)}
h2{font-size:var(--fs-h2)}
h3{font-size:var(--fs-h3);font-weight:700}
h1 em,h2 em,h3 em{font-style:normal;color:var(--head-accent)}
p{margin:0}
strong{color:var(--navy)}

/* ---------- Layout ---------- */
.container{max-width:var(--container);margin:0 auto;padding:0 var(--gutter)}
.container--wide{max-width:var(--container-wide)}
.sws-section{padding:var(--sp-section) 0}
.sws-section--off{background:var(--off)}
.sws-section--navy{background:var(--navy)}
.sws-section--navy h2,.sws-section--navy h3,.sws-section--navy p{color:var(--w)}
.sws-section--cream{background:var(--cream)}

/* ---------- spv2 section header (canonical) ---------- */
.spv2-header{text-align:center;max-width:820px;margin:0 auto var(--sp-6);display:block;}
.spv2-eyebrow{
  display:inline-block;
  font-family:var(--font-head);
  font-size:var(--fs-12);
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--gold);
  background:var(--gold-bg);
  padding:6px 16px;
  border-radius:var(--r-pill);
  margin-bottom:var(--sp-3);
}
.spv2-title{
  display:block;margin-bottom:var(--sp-3);
  font-family:var(--font-head);font-size:var(--fs-h2);font-weight:800;
  color:var(--head);line-height:var(--lh-tight);
}
.spv2-title em{font-style:normal;color:var(--head-accent)}
.spv2-sub{font-size:var(--fs-16);color:var(--g500);max-width:720px;margin:0 auto}
.spv2-header--left{text-align:left;margin-left:0}
.spv2-header--left .spv2-sub{margin-left:0}
.spv2-cta{margin-top:var(--sp-4)}
.spv2-btn{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-head);font-weight:700;font-size:var(--fs-14);
  color:var(--head-accent);background:var(--blue-lt);
  border:1px solid var(--blue-md);border-radius:var(--r-pill);
  min-height:44px;padding:0 22px;text-decoration:none;
  transition:background var(--t-med),color var(--t-med);
}
.spv2-btn:hover{background:var(--head-accent);color:var(--w)}
.spv2-btn svg{width:16px;height:16px;flex:none}

/* ---------- Buttons ---------- */
.btn-gold,.btn-primary-lg,.btn-primary-gl,.btn-ghost-nav,.sws-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--font-head);font-weight:700;font-size:var(--fs-15);
  text-decoration:none;border-radius:10px;height:52px;padding:0 32px;
  transition:transform var(--t-fast) var(--ease),box-shadow var(--t-med) var(--ease),background var(--t-med),filter var(--t-med),border-color var(--t-med);
}
.btn-gold{background:var(--gold);color:var(--navy)}
.btn-gold:hover{filter:brightness(1.08);transform:translateY(-2px);box-shadow:var(--sh-gold)}
.btn-primary-lg{background:var(--blue);color:var(--w)}
.btn-primary-lg:hover{background:var(--blue-dark);transform:translateY(-2px);box-shadow:var(--sh-blue)}
.btn-primary-gl{background:var(--green);color:var(--w)}
.btn-primary-gl:hover{background:var(--green-dark);transform:translateY(-2px)}
.btn-ghost-nav{background:transparent;color:var(--w);border:1.5px solid rgba(255,255,255,.35)}
.btn-ghost-nav:hover{border-color:rgba(255,255,255,.6);color:var(--w)}
.sws-btn--sm{height:44px;padding:0 22px;font-size:var(--fs-14)}

/* ---------- Utilities ---------- */
.spv2-visually-hidden,.sws-vh{
  position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;padding:0;margin:-1px;
}
.sws-icon{width:1em;height:1em;flex:none;fill:currentColor}
.rev{opacity:0;transform:translateY(22px);transition:opacity var(--t-slow) var(--ease),transform var(--t-slow) var(--ease)}
.rev.in{opacity:1;transform:none}
.d1{transition-delay:.06s}.d2{transition-delay:.12s}.d3{transition-delay:.18s}
.d4{transition-delay:.24s}.d5{transition-delay:.3s}.d6{transition-delay:.36s}


/* Guard: inline SVGs inside links/buttons never explode if a size rule is missing */
a svg:not([width]),button svg:not([width]){max-width:24px;max-height:24px}

/* ---------- Accessibility ---------- */
:focus-visible{outline:3px solid var(--blue);outline-offset:2px;border-radius:4px}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  .rev{opacity:1;transform:none}
}

/* ---------- Responsive ---------- */
@media (max-width:1024px){
  :root{--gutter:24px}
}
@media (max-width:768px){
  :root{--gutter:20px}
  .btn-gold,.btn-primary-lg,.btn-primary-gl,.btn-ghost-nav,.sws-btn{height:48px;padding:0 24px}
}
@media (max-width:430px){
  :root{--gutter:16px;--sp-section:40px}
  .spv2-header{margin-bottom:var(--sp-4)}
  .spv2-sub{font-size:var(--fs-14)}
}

/* ============================================================
   SUNBEAM WORLD SCHOOL — COMPONENTS (Layer 3)
   Reusable blocks for every page: cards, accordion, carousel,
   video facade, badges, CTA strip, trust row, grids.
   BEM: .sws-block__element --modifier
   ============================================================ */

/* ---------- Card ---------- */
.sws-card{
  background:var(--w);border:1px solid var(--g200);border-radius:var(--r-lg);
  padding:var(--sp-5);box-shadow:var(--sh-sm);
  transition:transform var(--t-med) var(--ease),box-shadow var(--t-med) var(--ease),border-color var(--t-med);
}
.sws-card:hover{transform:translateY(-4px);box-shadow:var(--sh-md);border-color:var(--g300)}
.sws-card__title{margin-bottom:var(--sp-2)}
.sws-card__text{font-size:var(--fs-15);color:var(--g600)}
.sws-card--gold{border-top:4px solid var(--gold)}
.sws-card--blue{border-top:4px solid var(--blue)}
.sws-card--green{border-top:4px solid var(--green)}
.sws-card--purple{border-top:4px solid var(--purple)}
.sws-card--teal{border-top:4px solid var(--teal)}
.sws-card--orange{border-top:4px solid var(--orange)}

/* ---------- Grid helpers ---------- */
.sws-grid{display:grid;gap:var(--sp-5)}
.sws-grid--2{grid-template-columns:repeat(2,1fr)}
.sws-grid--3{grid-template-columns:repeat(3,1fr)}
.sws-grid--4{grid-template-columns:repeat(4,1fr)}
@media (max-width:1024px){
  .sws-grid--4{grid-template-columns:repeat(2,1fr)}
  .sws-grid--3{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:768px){
  .sws-grid--2,.sws-grid--3,.sws-grid--4{grid-template-columns:1fr}
}

/* ---------- Badge / pill ---------- */
.sws-badge{
  display:inline-block;font-size:var(--fs-12);font-weight:700;
  padding:4px 12px;border-radius:var(--r-pill);
  background:var(--blue-lt);color:var(--blue);
}
.sws-badge--gold{background:var(--gold-bg);color:#b45309}
.sws-badge--green{background:var(--green-bg);color:var(--green-dark)}

/* ---------- Accordion ---------- */
.sws-acc__item{border:1px solid var(--g200);border-radius:var(--r-md);background:var(--w);margin-bottom:var(--sp-3);overflow:hidden}
.sws-acc__btn{
  width:100%;display:flex;justify-content:space-between;align-items:center;gap:var(--sp-3);
  padding:var(--sp-4) var(--sp-5);text-align:left;
  font-family:var(--font-head);font-weight:700;font-size:var(--fs-16);color:var(--navy);
}
.sws-acc__icon{flex:none;width:22px;height:22px;color:var(--blue);transition:transform var(--t-med) var(--ease)}
.sws-acc__item.open .sws-acc__icon{transform:rotate(45deg)}
.sws-acc__body{
  max-height:0;overflow:hidden;
  transition:max-height var(--t-slow) var(--ease);
}
.sws-acc__body-inner{padding:0 var(--sp-5) var(--sp-4);font-size:var(--fs-15);color:var(--g600)}
.sws-acc__item.open{border-color:var(--blue-md);box-shadow:var(--sh-sm)}

/* ---------- Carousel ---------- */
.sws-carousel{position:relative}
.sws-carousel__track{
  display:flex;gap:var(--sp-4);overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-bottom:var(--sp-2);
}
.sws-carousel__track::-webkit-scrollbar{display:none}
.sws-carousel__slide{flex:0 0 auto;scroll-snap-align:start}
.sws-carousel__nav{
  display:flex;gap:var(--sp-2);justify-content:center;margin-top:var(--sp-4);
}
.sws-carousel__btn{
  width:44px;height:44px;border-radius:50%;background:var(--w);
  border:1px solid var(--g300);display:inline-flex;align-items:center;justify-content:center;
  color:var(--navy);transition:background var(--t-med),color var(--t-med),border-color var(--t-med);
}
.sws-carousel__btn:hover{background:var(--navy);color:var(--w);border-color:var(--navy)}
.sws-carousel__btn svg{width:18px;height:18px}
.sws-carousel__dots{display:flex;gap:8px;justify-content:center;margin-top:var(--sp-3)}
.sws-carousel__dot{width:8px;height:8px;border-radius:50%;background:var(--g300);transition:background var(--t-med),transform var(--t-med)}
.sws-carousel__dot.active{background:var(--gold);transform:scale(1.3)}

/* ---------- Video facade (click-to-play YouTube) ---------- */
.sws-yt{
  position:relative;aspect-ratio:16/9;border-radius:var(--r-md);overflow:hidden;
  background:var(--navy2);cursor:pointer;width:100%;
}
.sws-yt img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sws-yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.sws-yt__play{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:64px;height:64px;border-radius:50%;
  background:var(--gold);color:var(--navy);
  display:flex;align-items:center;justify-content:center;
  box-shadow:var(--sh-gold);
  transition:transform var(--t-med) var(--ease);
}
.sws-yt:hover .sws-yt__play{transform:translate(-50%,-50%) scale(1.1)}
.sws-yt__play svg{width:26px;height:26px;margin-left:3px}
.sws-yt__label{
  position:absolute;left:0;right:0;bottom:0;
  padding:28px var(--sp-4) var(--sp-3);
  background:linear-gradient(transparent,rgba(15,26,46,.85));
  color:var(--w);font-size:var(--fs-14);font-weight:600;
}

/* ---------- CTA strip ---------- */
.sws-cta-strip{
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-5);
  background:var(--navy);border-radius:var(--r-lg);
  padding:var(--sp-6);flex-wrap:wrap;
}
.sws-cta-strip h3,.sws-cta-strip p{color:var(--w)}
.sws-cta-strip p{color:var(--g300);font-size:var(--fs-15)}
.sws-cta-strip__btns{display:flex;gap:var(--sp-3);flex-wrap:wrap}

/* ---------- Trust / stat row ---------- */
.sws-trust{display:flex;align-items:center;justify-content:center;gap:var(--sp-4);flex-wrap:wrap}
.sws-trust__sep{width:1px;height:34px;background:var(--g300)}
.sws-trust__stars{color:var(--gold);letter-spacing:2px;font-size:var(--fs-18)}
.sws-trust__copy{font-size:var(--fs-15);color:var(--g600)}
.sws-trust__copy .hi{color:var(--green);font-weight:700}

/* ---------- Logo marquee ---------- */
.sws-marquee{overflow:hidden;position:relative}
.sws-marquee__track{display:flex;gap:var(--sp-7);width:max-content;animation:sws-scroll 34s linear infinite}
.sws-marquee:hover .sws-marquee__track{animation-play-state:paused}
.sws-marquee__item img{height:64px;width:auto;filter:grayscale(1);opacity:.75;transition:filter var(--t-med),opacity var(--t-med),transform var(--t-med)}
.sws-marquee__item:hover img{filter:grayscale(0);opacity:1;transform:scale(1.06)}
@keyframes sws-scroll{to{transform:translateX(-50%)}}

/* ---------- Steps ---------- */
.sws-step{border-radius:var(--r-lg);padding:var(--sp-5);border:1px solid var(--g200)}
.sws-step--gold{background:var(--gold-bg)}
.sws-step--purple{background:var(--purple-bg)}
.sws-step--green{background:var(--green-bg)}
.sws-step h3{margin-bottom:var(--sp-2);font-size:var(--fs-18)}
.sws-step p{font-size:var(--fs-15);color:var(--g600)}

@media (max-width:768px){
  .sws-cta-strip{flex-direction:column;text-align:center;justify-content:center}
  .sws-yt__play{width:54px;height:54px}
}

/* ============================================================

/* Prevent stray horizontal scroll on mobile from full-bleed marquees */
html,body{overflow-x:clip}