/* ============================================================
SUNBEAM WORLD SCHOOL — HOME PAGE CSS (Layer 4, this page only)
Phase 1: hero · stat cards · trust bar · logo bar · enroll
============================================================ */
.site-main{
--sp-section:10px;
}
/* ---------- Hero (Navy Cinema) ---------- */
.hero{
position:relative;color:var(--w);overflow:hidden;
background:
radial-gradient(1100px 480px at 50% -18%,rgba(37,99,235,.32),transparent 60%),
linear-gradient(178deg,#131f38,var(--navy2) 70%);
}
.hero::before{
content:"";position:absolute;inset:0;pointer-events:none;
background-image:radial-gradient(rgba(255,255,255,.05) 1px,transparent 1px);
background-size:26px 26px;
}
.hero__inner{position:relative;text-align:center;padding-top:48px;padding-bottom:168px}
.hero__badges{
display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:12px;
font-family:var(--font-body);font-size:var(--fs-13);font-weight:600;
color:rgba(255,255,255,.65);margin-bottom:var(--sp-4);
}
.hero__dot{width:4px;height:4px;border-radius:50%;background:var(--gold);opacity:.9; display: none;}
.hero h1{
font-family:var(--font-head);color:var(--w);
font-size:clamp(36px,5.6vw,64px);line-height:1.05;letter-spacing:-2px;
max-width:940px;margin:0 auto var(--sp-3);
}
.hero h1 em{font-style:normal;color:#F5A623}
.hero__paren{font-size:.5em;font-weight:700;color:rgba(255,255,255,.6);letter-spacing:-.5px}
.hero__sub{font-family:var(--font-body);font-size:var(--fs-18);color:rgba(255,255,255,.82);margin-bottom:var(--sp-5)}
.hero__ctas{display:flex;gap:var(--sp-3);justify-content:center;flex-wrap:wrap;margin-bottom:var(--sp-6)}
.hero__curricula{
display:flex;align-items:center;justify-content:center;flex-wrap:wrap;
gap:10px;margin-top:var(--sp-5);
}
.hero__curlabel{
flex-basis:100%;text-align:center;margin-bottom:2px;
font-family:var(--font-body);font-size:var(--fs-12);font-weight:700;
letter-spacing:.16em;text-transform:uppercase;color:var(--amber);
}
.hc-chip{
display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 16px;
font-family:var(--font-head);font-size:var(--fs-13);font-weight:700;
color:var(--w);text-decoration:none;
background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.22);
border-radius:var(--r-pill);backdrop-filter:blur(6px);
transition:transform var(--t-fast) var(--ease),background var(--t-med),border-color var(--t-med);
}
.hc-chip i{width:8px;height:8px;border-radius:50%;flex:none}
.hc-chip--teal i{background:var(--teal)}
.hc-chip--blue i{background:#6aa2ff}
.hc-chip--gold i{background:var(--gold)}
.hc-chip--purple i{background:#c084fc}
.hc-chip--green i{background:var(--green)}
.hc-chip--orange i{background:#fb923c}
.hc-chip:hover{transform:translateY(-2px);background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.45)}
/* ---------- Hero stat cards (overlap strip) ---------- */
.hstats{position:relative;z-index:2;margin-top:-130px}
.hstats__row{
display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px;
max-width:1200px;margin:0 auto;padding:0 var(--gutter);
}
.hstats__card{
background:rgba(255,255,255,.97);backdrop-filter:blur(20px);
border:1px solid rgba(255,255,255,.9);border-radius:20px;
padding:22px 16px 18px;box-shadow:0 8px 40px rgba(0,0,0,.18);
display:flex;flex-direction:column;
transition:transform var(--t-med) var(--ease),box-shadow var(--t-med) var(--ease);
}
.hstats__card:hover{transform:translateY(-4px);box-shadow:0 20px 52px rgba(0,0,0,.22)}
.hstats__icon{
width:40px;height:40px;border-radius:10px;flex:none;
display:flex;align-items:center;justify-content:center;margin-bottom:12px;
}
.hstats__icon svg{width:20px;height:20px}
.hstats__icon--blue{background:var(--blue-lt);color:var(--blue)}
.hstats__icon--green{background:var(--green-bg);color:var(--green)}
.hstats__icon--gold{background:var(--gold-bg);color:#b45309}
.hstats__icon--purple{background:#f5f3ff;color:#7c3aed}
.hstats__icon--teal{background:var(--teal-bg);color:var(--teal)}
.hstats__num{
font-family:var(--font-head);font-size:clamp(22px,2vw,32px);font-weight:800;
color:var(--navy);line-height:1;margin-bottom:6px;letter-spacing:-1px;
}
.hstats__label{font-size:var(--fs-12);font-weight:500;color:var(--g500);line-height:1.5}
/* ---------- Trust bar ---------- */
.trustbar{padding:44px 0 var(--sp-6)}
.trustbar__g{font-family:var(--font-head);font-weight:800;font-size:26px;letter-spacing:-.5px}
.trustbar__g span:nth-child(1){color:#4285F4}
.trustbar__g span:nth-child(2){color:#EA4335}
.trustbar__g span:nth-child(3){color:#FBBC05}
.trustbar__g span:nth-child(4){color:#4285F4}
.trustbar__g span:nth-child(5){color:#34A853}
.trustbar__g span:nth-child(6){color:#EA4335}
/* ---------- Logo bar ---------- */
.logobar .sws-marquee{margin-top:var(--sp-4)}
/* ---------- Enroll ---------- */
.enroll__grid{display:grid;grid-template-columns:1.15fr .85fr;gap:var(--sp-7);align-items:start}
.enroll__info h3{margin-bottom:var(--sp-3)}
.enroll__info p{margin-bottom:var(--sp-3);font-size:var(--fs-15);color:var(--g600)}
.enroll__whohead{font-family:var(--font-head);font-size:var(--fs-18);color:var(--navy);margin:var(--sp-4) 0 var(--sp-3)}
.enroll__who{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3)}
.whocard{
display:flex;gap:10px;align-items:flex-start;
background:var(--g50);border:1px solid var(--g200);border-radius:var(--r-md);
padding:var(--sp-3) var(--sp-4);font-size:var(--fs-14);color:var(--g600);
}
.whocard__chk{
flex:none;width:20px;height:20px;border-radius:50%;margin-top:1px;
background:var(--green-bg);color:var(--green-dark);
display:flex;align-items:center;justify-content:center;
}
.whocard__chk svg{width:11px;height:11px}
/* ---------- Enroll form panel ---------- */
.enroll__panel{
background:var(--w);border:1px solid var(--g200);border-radius:var(--r-lg);
padding:var(--sp-5);box-shadow:var(--sh-md);
border-top:4px solid var(--gold);
}
.enroll__panel h3{font-size:var(--fs-18);margin-bottom:var(--sp-2)}
.enroll__live{display:flex;align-items:center;gap:8px;font-size:var(--fs-13);color:var(--green-dark);font-weight:600;margin-bottom:var(--sp-4)}
.enroll__dot{width:8px;height:8px;border-radius:50%;background:var(--green);animation:sws-pulse 1.6s infinite}
@keyframes sws-pulse{50%{opacity:.35}}
.enroll__usps{display:grid;gap:var(--sp-3);margin-top:var(--sp-4)}
.eusp{
display:flex;gap:12px;align-items:flex-start;
background:var(--w);border:1px solid var(--g200);border-radius:var(--r-md);
padding:var(--sp-3) var(--sp-4);font-size:var(--fs-13);color:var(--g500);
}
.eusp strong{font-size:var(--fs-14)}
.eusp__icon{width:36px;height:36px;border-radius:10px;flex:none;display:flex;align-items:center;justify-content:center}
.eusp__icon svg{width:18px;height:18px}
/* ---------- Responsive ---------- */
@media (max-width:1100px){
.hstats__row{grid-template-columns:repeat(4,1fr)}
.hstats{margin-top:-90px}
}
@media (max-width:1024px){
.enroll__grid{grid-template-columns:1fr;gap:var(--sp-6)}
.hero__inner{padding-top:40px;padding-bottom:180px}
}
@media (max-width:700px){
.hstats{margin-top:-160px}
.hstats__row{
display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
-webkit-overflow-scrolling:touch;gap:12px;padding:0 20px 4px;
scrollbar-width:none;
}
.hstats__row::-webkit-scrollbar{display:none}
.hstats__card{flex:0 0 78vw;max-width:300px;scroll-snap-align:start;padding:24px 22px}
.hstats__num{font-size:36px}
.hstats__label{font-size:var(--fs-13);line-height:1.55}
.hstats__icon{width:44px;height:44px}
}
@media (max-width:430px){
.hero__ctas{flex-direction:column;align-items:center}
.hero__ctas .btn-gold, .hero__ctas .btn-ghost-nav{width:100%;max-width:340px}
/* UX: one section reads as one screen — tighter vertical rhythm */
.hero__inner{padding-top:26px;padding-bottom:165px}
.hero__badges{gap:6px 10px;font-size:var(--fs-12)}
.hero__sub{font-size:var(--fs-16)}
.hero__curricula{gap:8px}
.hc-chip{min-height:36px;padding:0 12px;font-size:var(--fs-12)}
.hstats{margin-top:-140px}
.trustbar{padding:28px 0 20px}
.enroll__info p{font-size:var(--fs-14)}
.whocard{padding:10px 14px}
.enroll__panel{padding:var(--sp-4)}
}
/* ============ PHASE 2 PORTED COMPONENT STYLES ============ */
/* ---- oss ---- */
/* Sunbeam World School - Success Stories carousel (BEM) */
.oss{
--oss-navy:var(--head);--oss-blue:#2563eb;--oss-blue-dk:#1d4ed8;--oss-blue-lt:#eff4ff;
--oss-green:#22a861;--oss-gold:#f5a623;
--oss-w:#fff;--oss-off:#f4f7ff;--oss-g200:#e2e8f0;--oss-g400:#94a3b8;
--oss-g500:#64748b;--oss-g600:#475569;--oss-g700:#334155;--oss-g800:#1e293b;
--oss-ease:cubic-bezier(.4,0,.2,1);
font-family:'DM Sans',system-ui,-apple-system,sans-serif;
background:linear-gradient(180deg,var(--oss-off) 0%,var(--oss-blue-lt) 100%);
padding:clamp(48px,7vw,72px) 0 clamp(54px,8vw,80px);
color:var(--oss-g800);
}
.oss *, .oss *::before, .oss *::after{box-sizing:border-box;margin:0;padding:0;}
.oss__container{max-width:1140px;margin:0 auto;padding:0 clamp(16px,4vw,28px);}
/* Head */
.oss__head{text-align:center;margin-bottom:clamp(28px,4vw,44px);}
.oss__eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--oss-gold);margin-bottom:14px;}
.oss__eyebrow::before, .oss__eyebrow::after{content:'';display:block;width:clamp(18px,3vw,28px);height:2px;background:var(--oss-gold);border-radius:2px;opacity:.5;}
.oss__title{font-family:'Sora',system-ui,sans-serif;font-size:clamp(24px,4.5vw,42px);font-weight:800;color:var(--oss-navy);line-height:1.2;letter-spacing:-.5px;margin-bottom:12px;text-wrap:balance;text-align:center;}
.oss__title em{color:var(--oss-navy);font-style:normal;position:relative;display:inline-block;}
.oss__title em::after{content:"";position:absolute;left:0;right:0;bottom:6%;height:8%;background:var(--oss-gold);opacity:.35;border-radius:2px;z-index:-1;}
.oss__sub{font-size:clamp(14px,2.2vw,16px);color:var(--oss-g600);max-width:720px;margin:0 auto;line-height:1.6;text-wrap:pretty;}
/* Rotator */
.oss__rotator{position:relative;display:block;width:100%;text-align:center;height:1.25em;margin-top:6px;overflow:visible;}
.oss__word{position:absolute;left:0;right:0;top:0;color:#2563eb;opacity:0;animation:oss-rotate 30s linear infinite;transform:translateY(30%);white-space:normal;text-wrap:balance;padding:0 8px;}
.oss__word--1{animation-delay:0s;}
.oss__word--2{animation-delay:3s;}
.oss__word--3{animation-delay:6s;}
.oss__word--4{animation-delay:9s;}
.oss__word--5{animation-delay:12s;}
.oss__word--6{animation-delay:15s;}
.oss__word--7{animation-delay:18s;}
.oss__word--8{animation-delay:21s;}
.oss__word--9{animation-delay:24s;}
.oss__word--10{animation-delay:27s;}
@keyframes oss-rotate{0%,2%{opacity:0;transform:translateY(30%);}4%,9%{opacity:1;transform:translateY(0);}11%,100%{opacity:0;transform:translateY(-30%);}}
@media(prefers-reduced-motion:reduce){
.oss__rotator{height:auto;position:static;}
.oss__word{position:static;opacity:0;animation:none;transform:none;display:none;}
.oss__word--10{display:inline;opacity:1;}
}
/* Carousel: arrows flanking a horizontally scrolling grid at ALL screen sizes */
.oss__carousel{position:relative;display:flex;align-items:center;gap:12px;margin-bottom:20px;}
/* Arrow buttons */
.oss__arrow{flex:0 0 44px;width:44px;height:44px;border-radius:50%;border:1.5px solid var(--oss-g200);background:var(--oss-w);color:var(--oss-navy);box-shadow:0 4px 14px rgba(26,39,68,.1);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;transition:background .25s var(--oss-ease),border-color .25s var(--oss-ease),color .25s var(--oss-ease),box-shadow .25s var(--oss-ease),opacity .2s var(--oss-ease),transform .2s var(--oss-ease);z-index:2;font-family:inherit;}
.oss__arrow:hover{background:var(--oss-navy);border-color:var(--oss-navy);color:var(--oss-w);box-shadow:0 8px 20px rgba(26,39,68,.2);transform:translateY(-2px);}
.oss__arrow:focus-visible{outline:2px solid var(--oss-blue);outline-offset:2px;}
.oss__arrow svg{width:18px;height:18px;flex:0 0 18px;}
.oss__arrow[disabled]{opacity:.32;cursor:not-allowed;pointer-events:none;transform:none;box-shadow:none;}
/* Scrollable grid */
.oss__grid{flex:1 1 0;min-width:0;display:flex;gap:clamp(14px,2vw,22px);overflow-x:auto;overflow-y:visible;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none;padding:8px 4px 20px;scroll-behavior:smooth;}
.oss__grid::-webkit-scrollbar{display:none;}
.oss__grid:focus-visible{outline:2px solid var(--oss-blue);outline-offset:4px;border-radius:8px;}
/* Card */
.oss__card{flex:0 0 min(85vw,320px);scroll-snap-align:start;background:var(--oss-w);border-radius:18px;overflow:hidden;box-shadow:0 4px 18px rgba(26,39,68,.08);transition:transform .35s var(--oss-ease),box-shadow .35s var(--oss-ease);display:flex;flex-direction:column;}
@media(hover:hover){
.oss__card:hover{transform:translateY(-4px);box-shadow:0 12px 32px rgba(26,39,68,.12);}
.oss__card:hover .oss__image{transform:scale(1.03);}
}
/* Media (full illustration, no overlay) */
.oss__media{position:relative;aspect-ratio:4/3;overflow:hidden;background:linear-gradient(135deg,#dbeafe,#eff4ff);}
.oss__image{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s var(--oss-ease);}
/* Blue strip banner - between image and body */
.oss__badge{display:block;background:var(--oss-blue);color:var(--oss-w);padding:14px 20px;font-family:'Sora',system-ui,sans-serif;font-size:15px;font-weight:700;text-align:center;line-height:1.35;letter-spacing:.01em;margin:0;}
/* Body */
.oss__body{padding:22px 22px 22px;display:flex;flex-direction:column;gap:12px;flex:1;}
.oss__quote{font-family:'Sora',system-ui,sans-serif;font-size:17.5px;font-weight:800;color:var(--oss-navy);line-height:1.3;letter-spacing:-.01em;text-wrap:balance;}
.oss__text{font-size:14.5px;line-height:1.65;color:var(--oss-g600);text-wrap:pretty;}
.oss__text strong{color:var(--oss-navy);font-weight:600;}
/* Meta */
.oss__meta{margin-top:auto;padding-top:14px;border-top:1px solid var(--oss-g200);display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--oss-g500);font-weight:600;}
.oss__meta-icon{width:16px;height:16px;flex:0 0 16px;color:var(--oss-blue);}
/* Details disclosure */
.oss__detail{margin-top:-2px;}
.oss__detail-toggle{list-style:none;display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:999px;background:var(--oss-blue-lt);color:var(--oss-blue);font-family:'Sora',system-ui,sans-serif;font-size:12.5px;font-weight:700;letter-spacing:.01em;cursor:pointer;user-select:none;border:1.5px solid transparent;transition:background .2s var(--oss-ease),border-color .2s var(--oss-ease),color .2s var(--oss-ease);align-self:flex-start;}
.oss__detail-toggle::-webkit-details-marker{display:none;}
.oss__detail-toggle::marker{display:none;content:'';}
.oss__detail-toggle:hover{border-color:var(--oss-blue);}
.oss__detail-toggle:focus-visible{outline:2px solid var(--oss-blue);outline-offset:2px;}
.oss__detail[open] .oss__detail-toggle{background:var(--oss-blue);color:var(--oss-w);}
.oss__detail-chevron{width:12px;height:12px;transition:transform .3s var(--oss-ease);flex:0 0 12px;}
.oss__detail[open] .oss__detail-chevron{transform:rotate(180deg);}
.oss__detail-label{display:inline-block;}
.oss__detail-more{display:inline;}
.oss__detail-less{display:none;}
.oss__detail[open] .oss__detail-more{display:none;}
.oss__detail[open] .oss__detail-less{display:inline;}
.oss__detail .oss__text{margin-top:12px;}
/* Dots position indicator - always visible */
.oss__dots{display:flex;gap:8px;justify-content:center;margin:0 0 clamp(24px,3vw,36px);padding:0;}
.oss__dot{width:8px;height:8px;border-radius:50%;border:none;background:var(--oss-g200);cursor:pointer;padding:0;transition:background .3s var(--oss-ease),width .3s var(--oss-ease),transform .3s var(--oss-ease);font-family:inherit;}
.oss__dot:hover{background:var(--oss-g400);transform:scale(1.15);}
.oss__dot--active{background:var(--oss-blue);width:28px;border-radius:4px;transform:none;}
.oss__dot--active:hover{background:var(--oss-blue-dk);transform:none;}
.oss__dot:focus-visible{outline:2px solid var(--oss-blue);outline-offset:3px;}
/* Footer CTA */
.oss__foot{text-align:center;}
.oss__cta{display:inline-flex;align-items:center;gap:10px;padding:14px 28px;border-radius:999px;background:var(--oss-navy);color:var(--oss-w);font-family:'Sora',system-ui,sans-serif;font-size:15px;font-weight:700;text-decoration:none;transition:background .25s var(--oss-ease),transform .25s var(--oss-ease),box-shadow .25s var(--oss-ease);box-shadow:0 6px 18px rgba(26,39,68,.2);}
.oss__cta:hover{background:var(--oss-blue);transform:translateY(-2px);box-shadow:0 10px 28px rgba(37,99,235,.3);}
.oss__cta svg{flex:0 0 16px;width:16px;height:16px;}
/* Reduced motion */
@media(prefers-reduced-motion:reduce){
.oss *,.oss *::before,.oss *::after{transition:none!important;animation:none!important;scroll-behavior:auto!important;}
}
/* Tablet */
@media(max-width:1024px){
.oss__card{flex-basis:min(85vw,300px);}
}
/* Large phones */
@media(max-width:768px){
.oss__quote{font-size:16px;}
.oss__body{padding:20px 20px 22px;}
.oss__badge{padding:13px 16px;font-size:14px;}
}
/* Standard phones: hide arrows (swipe replaces them), extend to viewport edges */
@media(max-width:560px){
.oss__arrow{display:none;}
.oss__carousel{gap:0;margin-left:calc(-1 * clamp(16px,4vw,28px));margin-right:calc(-1 * clamp(16px,4vw,28px));}
.oss__grid{padding-left:clamp(16px,4vw,28px);padding-right:clamp(16px,4vw,28px);}
.oss__card{flex-basis:min(82vw,320px);}
}
/* Small phones */
@media(max-width:430px){
.oss__body{padding:18px 18px 20px;gap:10px;}
.oss__badge{padding:12px 14px;font-size:13.5px;}
.oss__quote{font-size:15.5px;}
.oss__text{font-size:14px;}
.oss__cta{padding:13px 22px;font-size:14.5px;}
.oss__dot--active{width:22px;}
}
/* Extra-small */
@media(max-width:375px){
.oss__card{flex-basis:min(80vw,300px);}
}
/* ---- osf ---- */
/* Sunbeam World School - Founder's Story (BEM) */
.osf{
--osf-navy:var(--head);--osf-navy2:#0f1a2e;--osf-blue:#2563eb;--osf-gold:#f5a623;
--osf-w:#fff;--osf-cream:#fdfbf7;
--osf-ease:cubic-bezier(.4,0,.2,1);
font-family:'DM Sans',system-ui,-apple-system,sans-serif;
background:linear-gradient(180deg,#fdfbf7 0%,#f4f7ff 100%);
padding:clamp(52px,7vw,88px) 0;color:#334155;overflow:hidden;
}
.osf *, .osf *::before, .osf *::after{box-sizing:border-box;margin:0;padding:0;}
.osf__container{max-width:1080px;margin:0 auto;padding:0 clamp(16px,4vw,28px);}
.osf__grid{display:grid;grid-template-columns:0.9fr 1.1fr;gap:clamp(30px,4.5vw,64px);align-items:center;}
/* Portrait */
.osf__figure{position:relative;margin:0;}
.osf__photo-wrap{position:relative;border-radius:20px 20px 20px 60px;overflow:hidden;box-shadow:0 22px 50px rgba(26,39,68,.2);aspect-ratio:4/5;background:linear-gradient(160deg,#e8eef9,#dbe4f5);}
.osf__photo{width:100%;height:100%;object-fit:cover;object-position:top center;display:block;}
.osf__figure::before{content:'';position:absolute;top:-18px;left:-18px;width:80px;height:80px;border-radius:14px;background:var(--osf-gold);opacity:.16;z-index:-1;}
.osf__figure::after{content:'';position:absolute;bottom:-20px;right:-16px;width:110px;height:110px;border-radius:50%;background:var(--osf-blue);opacity:.1;z-index:-1;}
.osf__signature{position:absolute;left:20px;bottom:22px;right:20px;color:var(--osf-w);text-shadow:0 2px 12px rgba(0,0,0,.5);}
.osf__signature-name{display:block;font-family:'Sora',system-ui,sans-serif;font-size:clamp(17px,2.3vw,21px);font-weight:800;line-height:1.2;}
.osf__signature-role{display:block;font-size:13px;font-weight:600;color:#f0f3fa;margin-top:3px;letter-spacing:.02em;}
/*.osf__photo-wrap::after{content:'';position:absolute;left:0;right:0;bottom:0;height:42%;background:linear-gradient(180deg,transparent,rgba(15,26,46,.72));pointer-events:none;}
*
/* Story content */
.osf__eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:12px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--osf-gold);margin-bottom:18px;}
.osf__eyebrow::before{content:'';display:block;width:30px;height:2px;background:var(--osf-gold);border-radius:2px;}
.osf__title{font-family:'Sora',system-ui,sans-serif;font-size:clamp(26px,3.6vw,40px);font-weight:800;color:var(--osf-navy);line-height:1.2;letter-spacing:-.5px;margin-bottom:22px;text-wrap:balance;}
.osf__title em{color:#2563eb;font-style:normal;position:relative;}
.osf__title em::after{content:'';position:absolute;left:0;right:0;bottom:4%;height:22%;background:var(--osf-gold);opacity:.28;z-index:-1;border-radius:2px;}
.osf__story{font-size:clamp(15px,1.8vw,16.5px);line-height:1.8;color:#475569;text-wrap:pretty;}
.osf__story p{margin-bottom:18px;}
.osf__story p:last-of-type{margin-bottom:0;}
.osf__story strong{color:var(--osf-navy);font-weight:700;}
.osf__lead::first-letter{float:left;font-family:'Sora',system-ui,sans-serif;font-size:3.2em;font-weight:800;line-height:.8;color:var(--osf-blue);padding:6px 12px 0 0;}
.osf__pull{margin:26px 0;padding:4px 0 4px 22px;border-left:4px solid var(--osf-gold);font-family:'Sora',system-ui,sans-serif;font-size:clamp(16px,2vw,19px);font-weight:700;line-height:1.4;color:var(--osf-navy);font-style:normal;text-wrap:balance;}
.osf__actions{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:30px;}
.osf__cta{display:inline-flex;align-items:center;gap:10px;padding:15px 28px;border-radius:999px;background:var(--osf-navy);color:var(--osf-w);font-family:'Sora',system-ui,sans-serif;font-size:15px;font-weight:800;text-decoration:none;transition:background .25s var(--osf-ease),transform .25s var(--osf-ease),box-shadow .25s var(--osf-ease);box-shadow:0 8px 22px rgba(26,39,68,.22);}
.osf__cta:hover{background:var(--osf-blue);transform:translateY(-2px);box-shadow:0 12px 30px rgba(37,99,235,.32);}
.osf__cta svg{flex:0 0 16px;width:16px;height:16px;}
.osf__link{display:inline-flex;align-items:center;gap:7px;color:var(--osf-blue);font-family:'Sora',system-ui,sans-serif;font-size:14.5px;font-weight:700;text-decoration:none;transition:gap .25s var(--osf-ease);}
.osf__link:hover{gap:11px;}
.osf__link svg{width:15px;height:15px;flex:0 0 15px;}
@media(prefers-reduced-motion:reduce){
.osf *, .osf *::before, .osf *::after{transition:none!important;animation:none!important;}
}
/* Tablet */
@media(max-width:900px){
.osf__grid{grid-template-columns:1fr;gap:36px;max-width:620px;margin:0 auto;}
.osf__figure{max-width:400px;margin:0 auto;width:100%;}
}
/* Phones */
@media(max-width:560px){
.osf__actions{gap:16px;}
.osf__cta{width:100%;justify-content:center;}
.osf__link{width:100%;justify-content:center;}
.osf__pull{margin:22px 0;padding-left:18px;}
}
@media(max-width:375px){
.osf__lead::first-letter{font-size:2.8em;}
}
/* ---- spotlight ---- */
@media(max-width:760px){
.spotlight-section .sp-eyebrow{ text-align:center;}
}
.tr-row{ display:flex; gap:20px; margin-bottom:20px; width:max-content; will-change:transform; }
.tr-row--fwd{ animation: trScrollFwd 38s linear infinite; }
.tr-row--rev{ animation: trScrollRev 44s linear infinite; }
.tr-row:hover{ animation-play-state:paused; }
@keyframes trScrollFwd { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
@keyframes trScrollRev { 0%{transform:translateX(-50%)} 100%{transform:translateX(0)} }
.spotlight-head .sp-eyebrow{
display:inline-flex; align-items:center; gap:10px;
font-size:12px; font-weight:700; letter-spacing:2px;
text-transform:uppercase; color:var(--green); margin-bottom:16px;
}
.spotlight-head .sp-eyebrow::before, .spotlight-head .sp-eyebrow::after{
content:''; display:block; width:24px; height:2px;
background:var(--green); border-radius:2px;
}
.sp-video-card{
background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1);
border-radius:20px; overflow:hidden;
}
.sp-video-info{ padding:24px 28px 28px; }
.sp-badge{
display:inline-flex; align-items:center; gap:6px;
font-size:12px; font-weight:800; letter-spacing:1.5px;
text-transform:uppercase; padding:4px 12px; border-radius:999px; margin-bottom:14px;
}
.sp-badge--gold{ background:rgba(245,166,35,.15); color:var(--gold); border:1px solid rgba(245,166,35,.25); }
.sp-badge--red{ background:rgba(239,68,68,.15); color:#f87171; border:1px solid rgba(239,68,68,.25); }
.sp-video-info h3{
font-family:'Sora',system-ui,sans-serif;
font-size:clamp(16px,1.8vw,22px); font-weight:800;
color:var(--w); margin-bottom:10px; line-height:1.3;
}
.sp-video-info p{ font-size:14px; color:rgba(255,255,255,.55); line-height:1.7; margin-bottom:16px; }
.sp-link{
display:inline-flex; align-items:center; gap:6px;
font-size:14px; font-weight:700; color:var(--green);
text-decoration:none; transition:gap .2s;
}
.sp-link:hover{ color:#4ade80; }
.sp-link svg{ width:14px; height:14px; }
.sp-right{ display:flex; flex-direction:column; gap:20px; }
.sp-feature-card{
background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1);
border-radius:20px; padding:28px; transition:border-color .2s;
}
.sp-feature-card:hover{ border-color:rgba(255,255,255,.2); }
.sp-feature-card h3{
font-family:'Sora',system-ui,sans-serif;
font-size:clamp(15px,1.6vw,20px); font-weight:800;
color:var(--w); margin-bottom:10px; line-height:1.35;
}
.sp-feature-card p{ font-size:14px; color:rgba(255,255,255,.5); line-height:1.7; margin-bottom:16px; }
.sp-inner-video{
position:relative; padding-bottom:56.25%; height:0; overflow:hidden;
border-radius:12px; margin-bottom:16px;
}
.sp-inner-video iframe{
position:absolute; top:0; left:0; width:100%; height:100%;
border:none; border-radius:12px;
}
.sp-quote-card{
background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1);
border-radius:20px; padding:24px 28px;
}
.sp-quote-person{ display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.sp-quote-avatar{
width:52px; height:52px; border-radius:50%;
object-fit:cover; object-position:top;
border:2px solid rgba(255,255,255,.15); flex-shrink:0;
background:var(--navy);
}
.sp-quote-name{ font-family:'Sora',system-ui,sans-serif; font-size:14px; font-weight:700; color:var(--w); }
.sp-quote-role{ font-size:12px; color:rgba(255,255,255,.45); margin-top:2px; }
.sp-quote-text{ font-size:14px; color:rgba(255,255,255,.65); line-height:1.75; font-style:italic; }
/* ══ Spotlight section CSS (sp-* classes) ══ */
.sp-line{ background:rgba(255,255,255,.3); }
.sp-title{
/*font-family:'Sora',system-ui,sans-serif;
font-size:clamp(26px,3vw,44px);font-weight:800;
color:#fff;*/text-align:center;margin-bottom:12px;line-height:1.2;
}
.sp-title em{ color:var(--gold);font-style:normal; }
.sp-sub{ color:rgba(255,255,255,.6);text-align:center;font-size:16px;margin-bottom:48px; }
.sp-grid{ display:grid;grid-template-columns:repeat(2,1fr);gap:28px;max-width:1100px;margin:0 auto; }
.sp-card{
border-radius:20px;padding:28px;display:flex;flex-direction:column;gap:16px;
}
.sp-card--dark{
background: #f1f1f1;
border: 1px solid #e0e0e0;
/* box-shadow: 0 8px 4px rgba(0, 0, 0, .18);
margin: 8px;
background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);*/
}
.sp-tag{
display:inline-block;font-size:12px;font-weight:700;
letter-spacing:.1em;text-transform:uppercase;
padding:5px 12px;border-radius:20px;width:fit-content;
}
.sp-tag--gold{ background:#fef3c7;color:#92400e; }
.sp-tag--red{ background:#fee2e2;color:#991b1b; }
.sp-card-title{
/* font-family:'Sora',system-ui,sans-serif;font-size:clamp(18px,1.8vw,24px);color:#fff;*/
font-weight:800;line-height:1.3;
}
.sp-card-body{ color:rgba(255,255,255,.7);font-size:14px;line-height:1.7; }
@media(prefers-reduced-motion:reduce){
.tr-row--fwd, .tr-row--rev{animation:none;}
}
.sp-iframe{
display:none;
position:absolute;
inset:0;
width:100%;
height:100%;
border:none;
}
.sp-eyebrow{
color:rgba(255,255,255,.55);
letter-spacing:.15em;
}
@media(max-width:430px){
.sp-grid{grid-template-columns: repeat(1, 1fr);}
}
.splight-marquee{
overflow: hidden;
position: relative;
width: 100%;
}
.splight-marquee .sp-track{
display: flex;
width: max-content;
}
.splight-marquee .sp-grid{
display: flex;
gap: 24px;
flex-shrink: 0;
}
/* Cards (optional width control) */
.splight-marquee .sp-card{
width: 380px;
flex-shrink: 0;
}
/* Animation */
.splight-marquee .tr-row--fwd{
animation: trScrollFwd2 18s linear infinite;
}
.splight-marquee .tr-row--rev{
animation: trScrollRev2 24s linear infinite;
}
.splight-marquee .tr-row:hover{
animation-play-state: paused;
}
/* Keyframes */
@keyframes trScrollFwd2{
0% { transform: translateX(0); }
100% { transform: translateX(-100%); }
}
@keyframes trScrollRev2 {
0% { transform: translateX(-100%); }
100% { transform: translateX(0); }
}
@media (max-width: 768px){
.splight-marquee .sp-track{
animation: none;
transform: none;
overflow-x: auto;
}
.splight-marquee{
overflow-x: auto;
}
}
/* ---- pubsl ---- */
/* ════════════════════════════════════════════════
SPOTLIGHT SLIDER — REAL HEADLINE + EXCERPT + DATE
════════════════════════════════════════════════ */
.pubsl-section{
/*background:#fffff0;*/
padding:40px 0;
position:relative;
overflow:hidden;
border-top: 1px solid #e0e0e0;
/*font-family:'DM Sans',system-ui,sans-serif;*/
}
.pubsl-inner{position:relative;z-index:1}
.pubsl-marquee{overflow:hidden;position:relative;width:100%}
.pubsl-track{
display:flex;gap:24px;width:max-content;
animation:pubslScroll 90s linear infinite;padding:8px 0;
}
.pubsl-track:hover{animation-play-state:paused}
@keyframes pubslScroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.pubsl-card{
flex-shrink:0;width:380px;
background:#f1f1f1;
border:1px solid #e1e1e1;
border-radius:20px;padding:24px;
display:flex;flex-direction:column;gap:14px;
text-decoration:none;color:inherit;
}
/* META ROW: Tag + Date side by side */
.pubsl-meta{
display:flex;align-items:center;justify-content:space-between;gap:10px;
flex-wrap:wrap;
}
.pubsl-tag{
display:inline-flex;align-items:center;
font-size:12px;font-weight:800;letter-spacing:1.3px;text-transform:uppercase;
padding:5px 11px;border-radius:999px;
}
.pubsl-tag--gold{background:rgba(245,166,35,.15);color:#f5a623;border:1px solid rgba(245,166,35,.25)}
.pubsl-tag--red{background:rgba(239,68,68,.15);color:#f87171;border:1px solid rgba(239,68,68,.25)}
.pubsl-tag--blue{background:rgba(59,130,246,.15);color:#60a5fa;border:1px solid rgba(59,130,246,.25)}
.pubsl-tag--green{background:rgba(34,168,97,.15);color:#4ade80;border:1px solid rgba(34,168,97,.25)}
.pubsl-date{
font-size:12px;font-weight:600;
color:rgba(255,255,255,.5);
letter-spacing:.04em;
display:inline-flex;align-items:center;gap:5px;
}
.pubsl-date svg{width:11px;height:11px;opacity:.7}
/* LOGO DISPLAY (16:9) */
.pubsl-visual{
position:relative;
aspect-ratio:16 / 9;
width:100%;
border-radius:12px;
overflow:hidden;
background:#fff;
display:flex;align-items:center;justify-content:center;
border:1px solid #afafaf;
}
.pubsl-visual::before{
content:'';position:absolute;inset:0;
background:linear-gradient(135deg,var(--bg-from,#f8fafc) 0%,var(--bg-to,#fff) 100%);
opacity:.4;
}
.pubsl-logo-real{
position:relative;z-index:2;
max-width:78%;max-height:72%;
object-fit:contain;
filter:drop-shadow(0 4px 14px rgba(0,0,0,.10));
}
.pubsl-favicon{
position:relative;z-index:2;
width:80px;height:80px;
object-fit:contain;
filter:drop-shadow(0 4px 12px rgba(0,0,0,.08));
}
.pubsl-wordmark{
position:relative;z-index:2;
display:flex;flex-direction:column;align-items:center;
gap:5px;padding:0 16px;
}
.pubsl-wordmark-text{
font-family:'Sora',system-ui,sans-serif;
font-weight:800;font-size:34px;
letter-spacing:-1.5px;line-height:1;
color:var(--mark-color,#1a2744);
}
.pubsl-wordmark-line{
width:42px;height:3px;border-radius:2px;
background:var(--mark-color,#1a2744);opacity:.35;
}
.pubsl-wordmark-sub{
font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
color:var(--mark-color,#1a2744);opacity:.55;
}
.pubsl-visual.has-logo .pubsl-wordmark, .pubsl-visual.has-icon .pubsl-wordmark{display:none}
.pubsl-card[data-c="wire"] .pubsl-visual{--bg-from:#fef3e6;--bg-to:#fff}
.pubsl-card[data-c="wire"] .pubsl-wordmark{--mark-color:#b45309}
.pubsl-card[data-c="earned"] .pubsl-visual{--bg-from:#fdecec;--bg-to:#fff}
.pubsl-card[data-c="earned"] .pubsl-wordmark{--mark-color:#b91c1c}
.pubsl-card[data-c="biz"] .pubsl-visual{--bg-from:#e6f0fa;--bg-to:#fff}
.pubsl-card[data-c="biz"] .pubsl-wordmark{--mark-color:#1e40af}
.pubsl-card[data-c="news"] .pubsl-visual{--bg-from:#e8f5ee;--bg-to:#fff}
.pubsl-card[data-c="news"] .pubsl-wordmark{--mark-color:#15803d}
/* TITLE — real press release headline */
.pubsl-title{
font-size:16px;
font-weight:500;
line-height:1.35;margin:0;
display:-webkit-box;
-webkit-line-clamp:4;
-webkit-box-orient:vertical;
overflow:hidden;
}
/* DESCRIPTION — real press release excerpt */
.pubsl-desc{
font-size:13px;
/*color:rgba(255,255,255,.6);*/
line-height:1.6;
margin:0;
display:-webkit-box;
-webkit-line-clamp:3;
-webkit-box-orient:vertical;
overflow:hidden;
min-height:62px;
}
/* CTA — names the specific publication */
.pubsl-cta{
display:inline-flex;align-items:center;gap:6px;
font-size:13.5px;font-weight:700;color:#22a861;
transition:gap .2s,color .2s;margin-top:auto;
padding-top:4px;
}
.pubsl-cta:hover{color:#4ade80;gap:10px}
.pubsl-cta svg{width:13px;height:13px}
@media(max-width:1024px){
.pubsl-card{width:340px;padding:22px}
.pubsl-favicon{width:72px;height:72px}
.pubsl-wordmark-text{font-size:30px}
.pubsl-title{font-size:16px}
}
@media(max-width:768px){
.pubsl-section{padding:64px 0}
.pubsl-card{width:300px;padding:20px;gap:12px}
.pubsl-favicon{width:64px;height:64px}
.pubsl-wordmark-text{font-size:26px}
.pubsl-title{font-size:15px}
.pubsl-desc{font-size:12.5px;min-height:56px}
.pubsl-track{animation-duration:65s}
.pubsl-marquee::before, .pubsl-marquee::after{width:60px}
}
@media(max-width:480px){
.pubsl-card{width:280px}
}
/* ============ PHASE 3 PORTED COMPONENT STYLES ============ */
.orangex-section2{background:var(--off)}
@media(max-width:768px){
.gr-stats{ max-width:100%; }
.gr-stat{ padding:14px 12px; }
.gr-panel.active, #gr-all.active{ grid-template-columns:repeat(3,1fr); gap:8px; }
.gr-country{ padding:10px 10px; font-size:13px; }
.gr-tabs{ gap:6px; }
.gr-tab{ padding:7px 13px; font-size:12px; }
}
@media(max-width:430px){
.gr-panel.active, #gr-all.active{ grid-template-columns:repeat(2,1fr); }
}
/* ══════════════════════════════════════
SECTION 4 — KG-12 / REACH (live site style)
══════════════════════════════════════ */
.reach-section{
/*background:#f0f4f0;*/
padding:40px 0 72px;
position:relative;overflow:hidden;
border-top:1px solid #e1e1e1;
}
.reach-inner{position:relative;z-index:1;}
.reach-cards{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:24px;
max-width:900px;
margin:0 auto;
}
.reach-card{
background:var(--w);
border-radius:160px 160px 24px 24px;
padding:56px 32px 40px;
text-align:center;
position:relative;
overflow:hidden;
transition:transform .2s, box-shadow .2s;
box-shadow:0 2px 16px rgba(0,0,0,.06);
}
.reach-card:hover{
transform:translateY(-4px);
box-shadow:0 12px 40px rgba(0,0,0,.1);
}
.reach-card:nth-child(1)::before{
content:'';position:absolute;
top:-40px;left:50%;transform:translateX(-50%);
width:200px;height:200px;border-radius:50%;
background:rgba(34,168,97,.08);pointer-events:none;
}
.reach-card:nth-child(2)::before{
content:'';position:absolute;
top:-40px;left:50%;transform:translateX(-50%);
width:200px;height:200px;border-radius:50%;
background:rgba(245,166,35,.08);pointer-events:none;
}
.reach-card:nth-child(3)::before{
content:'';position:absolute;
top:-40px;left:50%;transform:translateX(-50%);
width:200px;height:200px;border-radius:50%;
background:rgba(239,68,68,.08);pointer-events:none;
}
.r-tag{ display:none; }
.r-num{
font-family:'Sora',system-ui,sans-serif;
font-size:clamp(40px,5vw,60px);font-weight:800;
letter-spacing:-2px;line-height:1;
margin-bottom:14px;position:relative;z-index:1;
}
.reach-card:nth-child(1) .r-num{ color:var(--green); }
.reach-card:nth-child(2) .r-num{ color:var(--gold); }
.reach-card:nth-child(3) .r-num{ color:#ef4444; }
.r-desc{
font-size:15px;color:var(--g500);
line-height:1.65;position:relative;z-index:1;
}
/* ══════════════════════════════════════
SECTION 5 — WHY SUNBEAM / ACCREDITATION + ACCORDION
══════════════════════════════════════ */
.accordion{display:flex;flex-direction:column;gap:6px;}
.acc-item{
border:1.5px solid var(--g200);
border-radius:12px;
overflow:hidden;
margin-bottom:10px;
transition:border-color .2s, box-shadow .2s;
}
.acc-item.open{
border-color:var(--blue);
box-shadow:0 4px 20px rgba(37,99,235,.08);
}
.acc-btn{
width:100%;
display:flex;
justify-content:space-between;
align-items:center;
padding:16px 20px;
background:var(--w);
border:none;
cursor:pointer;
font-family:'DM Sans',system-ui,sans-serif;
font-size:15px;
font-weight:600;
color:var(--navy);
text-align:left;
gap:12px;
transition:background .2s;
}
.acc-btn:hover{ background:var(--g50); }
.acc-btn.open{
background:var(--blue-lt);
color:var(--blue);
}
.acc-icon{
width:26px;
height:26px;
border-radius:50%;
border:1.5px solid var(--g300);
display:flex;
align-items:center;
justify-content:center;
flex-shrink:0;
transition:transform .25s, background .2s, border-color .2s;
color:var(--g500);
}
.acc-icon svg{width:14px;height:14px;color:var(--g500);transition:color .2s;}
.acc-btn.open .acc-icon{
transform:rotate(45deg);
background:var(--blue);
border-color:var(--blue);
color:var(--w);
}
.acc-btn.open .acc-icon svg{color:var(--w);}
.acc-body{
display:none;
padding:0 20px 18px;
background:var(--w);
}
.acc-body.open{ display:block; }
.acc-body p{
font-size:14px;
color:var(--g600);
line-height:1.75;
}
/* ══════════════════════════════════════
SECTION 6 — CURRICULA CARDS
══════════════════════════════════════ */
.curricula-section{/*background:var(--off);*/padding:40px 0; border:1px solid #e1e1e1;}
.cur-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.cur-card{
background:var(--w);border:1.5px solid var(--g200);border-radius:20px;
padding:28px 24px 24px;display:flex;flex-direction:column;
transition:border-color .2s,box-shadow .25s,transform .2s;
}
.cur-card:hover{
border-color:var(--cc,var(--blue));
box-shadow:0 12px 40px rgba(0,0,0,.08);transform:translateY(-4px);
}
.cur-tag{
display:inline-flex;align-items:center;gap:6px;
font-size:12px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;
padding:4px 12px;border-radius:6px;margin-bottom:20px;width:fit-content;
background:var(--cc-lt,var(--blue-lt));color:var(--cc,var(--blue));
}
.cur-tag svg{width:11px;height:11px;}
.cur-icon-row{display:flex;align-items:flex-start;gap:14px;margin-bottom:16px;}
.cur-icon{
width:46px;height:46px;border-radius:12px;flex-shrink:0;
background:var(--cc-lt,var(--blue-lt));
display:flex;align-items:center;justify-content:center;
}
.cur-icon svg{width:22px;height:22px;color:var(--cc,var(--blue));}
.cur-meta{font-size:12px;color:var(--g400);line-height:1.55;padding-top:2px;}
.cur-meta strong{display:block;font-size:13px;font-weight:600;color:var(--g500);margin-bottom:2px;}
.cur-name{
font-family:'Sora',system-ui,sans-serif;
font-size:clamp(16px,1.7vw,19px);font-weight:800;
color:var(--navy);line-height:1.25;margin-bottom:16px;letter-spacing:-.2px;
}
.cur-name em{font-style:normal;color:var(--cc,var(--blue));}
.cur-feats{display:flex;flex-direction:column;gap:8px;margin-bottom:22px;flex:1;}
.cur-feats li{
display:flex;align-items:flex-start;gap:10px;
font-size:14px;color:var(--g700);line-height:1.5;
}
.fchk{
width:18px;height:18px;border-radius:5px;flex-shrink:0;margin-top:1px;
background:var(--cc-lt,var(--blue-lt));
display:flex;align-items:center;justify-content:center;
}
.fchk svg{width:10px;height:10px;color:var(--cc,var(--blue));}
.cur-cta{
display:flex;align-items:center;justify-content:center;gap:6px;
height:44px;border-radius:10px;
border:2px solid var(--g200);background:transparent;
font-size:14px;font-weight:600;color:var(--navy);cursor:pointer;
transition:border-color .2s,background .2s,color .2s;
}
.cur-cta svg{width:14px;height:14px;}
.cur-cta:hover{border-color:var(--cc,var(--blue));background:var(--cc-lt,var(--blue-lt));color:var(--cc,var(--blue));}
.c-blue{--cc:var(--blue);--cc-lt:var(--blue-lt);}
.c-teal{--cc:var(--teal);--cc-lt:var(--teal-bg);}
.c-amber{--cc:#b45309;--cc-lt:var(--gold-bg);}
.c-purple{--cc:var(--purple);--cc-lt:var(--purple-bg);}
.c-green{--cc:var(--green);--cc-lt:var(--green-bg);}
.c-orange{--cc:var(--orange);--cc-lt:var(--orange-bg);}
.cur-strip{
margin-top:44px;background:var(--navy);border-radius:20px;
padding:36px 44px;
display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap;
}
.cur-strip h3{
font-family:'Sora',system-ui,sans-serif;
font-size:clamp(16px,1.8vw,22px);font-weight:800;
color:var(--w);line-height:1.3;
}
.cur-strip h3 em{font-style:normal;color:var(--gold);}
.cur-strip p{font-size:14px;color:rgba(255,255,255,.5);margin-top:5px;line-height:1.6;}
.strip-btns{display:flex;gap:10px;flex-shrink:0;}
.pathway-card.yellow{background:linear-gradient(135deg,#fef9e7,#fef3c7);border:1.5px solid #f59e0b;}
.pathway-card.purple{background:linear-gradient(135deg,#f5f3ff,#ede9fe);border:1.5px solid var(--purple);}
.pathway-card.red{background:linear-gradient(135deg,var(--green-bg),#d1fae5);border:1.5px solid var(--green);}
.pathway-card.yellow h4{color:#92400e;}
.pathway-card.purple h4{color:var(--purple);}
.pathway-card.red h4{color:var(--green-dark);}
.pathway-card.yellow a{color:#92400e;}
.pathway-card.purple a{color:var(--purple);}
.pathway-card.red a{color:var(--green-dark);}
@media(max-width:520px){
.cur-grid{grid-template-columns:1fr;}
}
@media(max-width:425px){
.why-section{ padding:56px 0; }
}
/* ══ RESTORED: awards-section ══ */
.awards-section{
text-align:center; padding:72px 0; background:#fff; position:relative;
}
.awards-section .container{ position:relative; max-width:1250px; margin:0 auto; padding:0 24px; }
.modern-learning-awards-slider-container{position:relative;margin:auto;overflow:hidden;}
.modern-learning-awards-slider-container::before, .modern-learning-awards-slider-container::after{content:'';position:absolute;top:0;bottom:0;width:80px;z-index:2;pointer-events:none;}
.modern-learning-awards-slider-container::before{left:0;background:linear-gradient(90deg,var(--g50),transparent);}
.modern-learning-awards-slider-container::after{right:0;background:linear-gradient(270deg,var(--g50),transparent);}
.modern-learning-track-wrapper{overflow:hidden;width:100%;margin-top:40px;}
.modern-learning-track{display:flex;gap:20px;animation:awardsScroll 36s linear infinite;width:max-content;}
.modern-learning-track:hover{animation-play-state:paused;}
@keyframes awardsScroll{0%{transform:translateX(0);}100%{transform:translateX(-50%);}}
.modern-learning-card-inner{
flex-shrink:0;width:220px;
display:flex;flex-direction:column;align-items:center;text-align:center;
background:var(--w);border-radius:16px;
padding:12px 12px 16px;
box-shadow:0 2px 14px rgba(0,0,0,.07);
border:1.5px solid var(--g200);
transition:border-color .25s,box-shadow .25s,transform .25s;
}
.modern-learning-card-inner:hover{border-color:var(--gold);box-shadow:0 8px 28px rgba(245,166,35,.15);transform:translateY(-4px);}
.modern-learning-card-inner img{
width:196px;height:280px;
object-fit:cover;
object-position:top center;
border-radius:10px;display:block;flex-shrink:0;
}
.award-label{
font-size:12px;font-weight:600;color:var(--g700);
margin-top:12px;line-height:1.5;padding:0 4px;
display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
overflow:hidden;width:100%;text-align:center;
}
.modern-learning-dots-container{display:none;}
/* ══ WHY SECTION — rebuilt ══ */
.why-section{
/*background:var(--w);*/
padding:40px 0;
border-top:1px solid #e1e1e1;
}
.why-grid{
display:grid;
grid-template-columns:1fr 480px;
gap:48px;
align-items:start;
max-width:1200px;
margin:0 auto;
padding:0 24px;
}
.why-left{ display:flex; flex-direction:column; }
.why-right{
position:sticky;
top:80px;
}
.why-img-wrap{
border-radius:16px;
overflow:hidden;
aspect-ratio:10/7;
background:var(--g100);
}
.acc-btn.open:hover{ background:var(--blue-lt); }
.why-badge-row{
display:flex;
flex-wrap:wrap;
gap:8px;
margin-top:14px;
}
.why-badge{
background:#e8f5ee;
color:#09B451;
font-size:12px;
font-weight:600;
padding:5px 12px;
border-radius:20px;
border:1px solid #09B45133;
}
/* ══ CO-CURRICULAR ACTIVITIES ══ */
.cocurr-section{background:var(--navy2);padding:80px 0;overflow:hidden;position:relative;}
.cocurr-section::before{content:'';position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.025) 1px,transparent 1px);background-size:32px 32px;pointer-events:none;}
.cocurr-head{text-align:center;margin-bottom:48px;position:relative;z-index:1;padding:0 24px;}
.cocurr-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);background:rgba(245,166,35,.1);border:1px solid rgba(245,166,35,.2);padding:5px 16px;border-radius:20px;margin-bottom:16px;}
.cocurr-head h2{font-family:'Sora',system-ui,sans-serif;font-size:clamp(24px,3vw,40px);font-weight:800;color:var(--w);line-height:1.15;margin-bottom:12px;}
.cocurr-head h2 em{font-style:normal;color:#2563eb;}
.cocurr-head p{font-size:15px;color:rgba(255,255,255,.6);max-width:560px;margin:0 auto;line-height:1.7;}
.cocurr-track-wrap{position:relative;overflow:hidden;}
.cocurr-track-wrap::before, .cocurr-track-wrap::after{content:'';position:absolute;top:0;bottom:0;width:100px;z-index:2;pointer-events:none;}
.cocurr-track-wrap::before{left:0;background:linear-gradient(90deg,var(--navy2),transparent);}
.cocurr-track-wrap::after{right:0;background:linear-gradient(270deg,var(--navy2),transparent);}
.cocurr-row{display:flex;gap:16px;margin-bottom:16px;width:max-content;padding:6px 0;}
.cocurr-row--fwd{animation: trScrollFwd 40s linear infinite;} /*ccFwd*/
.cocurr-row--rev{animation:trScrollRev 44s linear infinite;}/*ccRev*/
.cocurr-row:hover{animation-play-state:paused;}
.cocurr-card{flex-shrink:0;width:240px;border-radius:16px;overflow:hidden;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);transition:transform .25s,border-color .25s,box-shadow .25s;}
.cocurr-card:hover{transform:translateY(-6px);border-color:rgba(245,166,35,.4);box-shadow:0 12px 32px rgba(0,0,0,.3);}
.cocurr-card-img{width:100%;height:170px;object-fit:cover;display:block;}
.cocurr-card-body{padding:14px 16px 16px;}
.cocurr-badge{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:3px 9px;border-radius:4px;margin-bottom:7px;}
.cb-art{background:rgba(245,166,35,.15);color:var(--gold);}
.cb-stem{background:rgba(37,99,235,.2);color:#93c5fd;}
.cb-wellness{background:rgba(34,168,97,.15);color:#6ee7b7;}
.cb-perform{background:rgba(123,31,162,.2);color:#d8b4fe;}
.cb-sport{background:rgba(230,81,0,.15);color:#fdba74;}
.cocurr-card-title{font-family:'Sora',system-ui,sans-serif;font-size:14px;font-weight:700;color:var(--w);line-height:1.35;}
.cocurr-card-sub{font-size:12px;color:rgba(255,255,255,.5);margin-top:4px;font-weight:500;}
.cocurr-stats-row{display:flex;justify-content:center;gap:48px;flex-wrap:wrap;margin-top:44px;position:relative;z-index:1;padding:0 24px;}
.cocurr-stat{text-align:center;}
.cocurr-stat strong{display:block;font-family:'Sora',system-ui,sans-serif;font-size:clamp(28px,3.5vw,42px);font-weight:800;color:var(--gold);line-height:1;}
.cocurr-stat span{font-size:13px;color:rgba(255,255,255,.55);font-weight:500;margin-top:5px;display:block;}
.cocurr-cta-row{text-align:center;margin-top:36px;position:relative;z-index:1;}
.compare-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--green);margin-bottom:14px;}
.compare-main-title{text-align:center;margin-bottom:16px;line-height:1;}
.compare-title-line1{display:block;font-family:'Sora',system-ui,sans-serif;font-size:clamp(20px,2.2vw,30px);font-weight:800;color:var(--navy);line-height:1.3;/*white-space:nowrap;*/}
.compare-title-line1 em{font-style:normal;color:var(--blue);}
.compare-country{display:block;font-family:'Sora',system-ui,sans-serif;font-size:clamp(36px,5vw,64px);font-weight:800;color:#F56F0F;line-height:1.1;margin-top:4px;transition:opacity .35s ease;}
.th-sws{background:#2563eb;color:#fff!important;font-size:15px!important;}
.th-other{color:rgba(255,255,255,.6)!important;}
.td-feature{padding:18px 22px;font-family:'Sora',system-ui,sans-serif;font-size:14px;font-weight:700;color:#fff;background:#1e3a5f;border-right:2px solid #2563eb;vertical-align:middle;}
.td-sws{padding:18px 22px;font-size:14px;font-weight:700;color:#16a34a;background:#eff6ff;text-align:center;border-right:1px solid #e8edf5;vertical-align:middle;line-height:1.45;}
.td-other{padding:18px 22px;font-size:13px;font-weight:500;color:#dc2626;text-align:center;border-right:1px solid #e8edf5;vertical-align:middle;line-height:1.45;background:#fafafa;}
.td-offline{padding:18px 22px;font-size:13px;font-weight:500;color:#dc2626;text-align:center;vertical-align:middle;line-height:1.45;background:#fafafa;}
.fchk{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;background:#22a861;color:#fff;font-size:12px;font-weight:700;flex-shrink:0;}
@media(max-width:768px){
.reach-cards{
display:flex;
overflow-x:auto;
scroll-snap-type:x mandatory;
-webkit-overflow-scrolling:touch;
gap:12px;
padding:0 20px 4px;
-ms-overflow-style:none;
scrollbar-width:none;
}
.reach-cards::-webkit-scrollbar{display:none;}
.reach-card{
/* Show ~1.2 cards so user knows it's swipeable */
flex:0 0 78vw;
max-width:300px;
scroll-snap-align:start;
/* Taller padding for better UX — number + label breathes */
padding:24px 22px 24px;
}
}
/* ══ Global Reach — Continent tabs design ══ */
.global-reach-section{
background: var(--w);
padding: 80px 0 72px;
overflow: hidden;
position: relative;
}
.global-reach-section::before{
content:''; position:absolute; inset:0;
background: radial-gradient(ellipse 80% 40% at 50% 100%, rgba(37,99,235,.04) 0%, transparent 70%);
pointer-events:none;
}
.gr-stats{
display:flex; justify-content:center; gap:0;
border:1.5px solid var(--g200); border-radius:16px;
background:#fff; overflow:hidden;
max-width:600px; margin:0 auto 44px;
box-shadow:0 2px 16px rgba(26,39,68,.05);
}
.gr-stat{
flex:1; padding:18px 20px; text-align:center;
border-right:1px solid var(--g200);
}
.gr-stat:last-child{ border-right:none; }
.gr-stat-num{
font-family:'Sora',system-ui,sans-serif;
font-size:clamp(22px,2.5vw,32px); font-weight:800;
color:var(--navy); line-height:1; display:block; margin-bottom:4px;
}
.gr-stat-num em{ font-style:normal; color:var(--blue); }
.gr-stat-label{ font-size:12px; color:var(--g500); font-weight:500; }
.gr-tabs{
display:flex; gap:8px; justify-content:center;
flex-wrap:wrap; margin-bottom:32px;
}
.gr-tab{
display:inline-flex; align-items:center; gap:6px;
padding:8px 18px; border-radius:999px;
border:1.5px solid var(--g200); background:#fff;
font-size:13px; font-weight:600; color:var(--g600);
cursor:pointer; transition:all .2s; min-height:44px;
}
.gr-tab:hover{ border-color:var(--blue); color:var(--blue); background:var(--blue-lt); }
.gr-tab.active{ background:var(--navy); color:#fff; border-color:var(--navy); }
.gr-tab .gr-tab-dot{ width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.gr-panel{ display:none; }
.gr-panel.active{ display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:10px; }
.gr-country{
display:flex; align-items:center; gap:10px;
padding:12px 14px; background:#fff;
border:1.5px solid var(--g200); border-radius:12px;
font-size:14px; font-weight:500; color:var(--g700);
transition:all .2s; cursor:default;
}
.gr-country:hover{
border-color:var(--blue); color:var(--navy);
box-shadow:0 4px 12px rgba(37,99,235,.08);
transform:translateY(-2px);
}
.gr-country img{ flex-shrink:0; }
.gr-country a{ color:inherit; text-decoration:none; display:flex; align-items:center; gap:10px; width:100%; }
/* ============ PHASE 4 PORTED COMPONENT STYLES ============ */
/* ---- phase-4 section shells (live-theme classes, defined here) ---- */
/*.parent-video-section, .student-video-section, .grow_leading, .collaborations-tieups, .modern_learning, .online-school-guide{padding:var(--sp-section) 0}*/
.applynow{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-head);
font-weight:700;font-size:var(--fs-15);background:var(--gold);color:var(--navy);
border-radius:10px;min-height:52px;padding:0 32px;text-decoration:none;
transition:transform var(--t-fast) var(--ease),box-shadow var(--t-med)}
.applynow:hover{transform:translateY(-2px);box-shadow:var(--sh-gold)}
/* ══ TESTIMONIALS — rebuilt with photo+text card layout ══ */
.testimonial_wrapper{ background:#f7f9fc; padding:80px 0 72px; }
.testimonial_wrapper .container{ max-width:1250px; margin:0 auto; padding:0 24px; }
.trating-strip{
display:flex; align-items:center; gap:12px;
justify-content:center; margin-bottom:36px;
}
.trating-stars{ color:#f59e0b; font-size:18px; letter-spacing:2px; }
.trating-text{ font-size:14px; color:var(--g600); }
.trating-text strong{ color:var(--navy); }
/* ══════════════════════════════════════════════════
TESTIMONIALS — Modern Masonry Marquee Design
══════════════════════════════════════════════════ */
.testimonial_wrapper::before{
content:'';
position:absolute; inset:0;
background: radial-gradient(ellipse 70% 50% at 50% 0%, rgba(37,99,235,.06) 0%, transparent 70%);
pointer-events:none;
}
.tr-marquee-wrap{
position:relative;
margin: 0 -24px;
overflow:hidden;
}
.tr-marquee-wrap::before, .tr-marquee-wrap::after{
content:''; position:absolute; top:0; bottom:0; width:120px; z-index:2; pointer-events:none;
}
.tr-marquee-wrap::before{ left:0; background:linear-gradient(90deg,#f0f4ff,transparent); }
.tr-marquee-wrap::after{ right:0; background:linear-gradient(270deg,#f0f4ff 10%,transparent); }
.tr-row{ display:flex; gap:20px; margin-bottom:20px; width:max-content; will-change:transform; }
.tr-row--fwd{ animation: trScrollFwd 38s linear infinite; }
.tr-row--rev{ animation: trScrollRev 44s linear infinite; }
.tr-row:hover{ animation-play-state:paused; }
@keyframes trScrollFwd { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
@keyframes trScrollRev { 0%{transform:translateX(-50%)} 100%{transform:translateX(0)} }
.tr-stars{ color:#f59e0b; font-size:14px; letter-spacing:1.5px; line-height:1; }
.testimonial_wrapper .tcards-grid{ display:none; }
.testimonial_wrapper .tcards-pager{ display:none; }
.tvid-section{ margin-bottom:40px; }
@keyframes trFwd { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.sp-track.tr-row--fwd { display: flex; width: max-content; animation: trFwd 40s linear infinite; }
.sp-card { flex: 0 0 auto; }
/* ══════════════════════════════════════
SS3 — LEARNING PLANS (redesigned)
══════════════════════════════════════ */
.lp-section{
background: #f0f6ff;
padding: 80px 0;
}
.lp-section .lp-head{
text-align: center;
margin-bottom: 52px;
}
.lp-section .lp-head h2{
font-family:'Sora',system-ui,sans-serif;
font-size: clamp(24px,2.8vw,38px);
font-weight: 800;
color: var(--blue);
margin-bottom: 12px;
line-height: 1.2;
}
.lp-section .lp-head p{
font-size: 16px;
color: #575757;
max-width: 560px;
margin: 0 auto;
line-height: 1.7;
}
.lp-grid{
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 28px;
max-width: 1100px;
margin: 0 auto;
}
.lp-card{
background: #fff;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 4px 24px rgba(26,39,68,.08);
border: 1.5px solid var(--g200);
display: flex;
flex-direction: column;
transition: transform .2s, box-shadow .2s, border-color .2s;
}
.lp-card:hover{
transform: translateY(-4px);
box-shadow: 0 14px 44px rgba(26,39,68,.13);
border-color: var(--blue);
}
.lp-card-img{
width: 100%;
height: 210px;
object-fit: cover!important;
display: block;
}
.lp-card-body{
padding: 28px 28px 26px;
flex: 1;
display: flex;
flex-direction: column;
}
.lp-card-title{
font-family:'Sora',system-ui,sans-serif;
font-size: clamp(18px,1.8vw,22px);
font-weight: 800;
color: var(--navy);
margin-bottom: 12px;
text-align: center;
}
.lp-badge-row{
display: flex;
justify-content: center;
margin-bottom: 16px;
}
.lp-badge{
display: inline-flex;
align-items: center;
gap: 10px;
background: var(--navy);
color: #fff;
font-size: 13px;
font-weight: 700;
padding: 6px 22px;
border-radius: 999px;
letter-spacing: .2px;
}
.lp-badge .lp-sep{
display: inline-block;
width: 1px;
height: 14px;
background: rgba(255,255,255,.35);
}
.lp-desc{
font-size: 14px;
color: var(--g600);
line-height: 1.75;
margin-bottom: 18px;
}
.lp-features{
display: flex;
flex-direction: column;
gap: 8px;
margin-bottom: 28px;
flex: 1;
padding: 0;
list-style: none;
}
.lp-feat{
display: flex;
align-items: center;
gap: 10px;
font-size: 13.5px;
color: var(--g700);
line-height: 1.45;
}
.lp-feat-icon{
flex-shrink: 0;
width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
}
.lp-card--group .lp-feat-icon svg{ color: var(--blue); }
.lp-card--oto .lp-feat-icon svg{ color: var(--green); }
.lp-card--self .lp-feat-icon svg{ color: var(--gold); }
.lp-card--splus .lp-feat-icon svg{ color: var(--purple); }
.lp-card--sped .lp-feat-icon svg{ color: #e65100; }
.lp-card--lang .lp-feat-icon svg{ color: var(--teal); }
.lp-card--group .lp-card-title{ color: var(--blue); }
.lp-card--oto .lp-card-title{ color: var(--green-dark); }
.lp-card--self .lp-card-title{ color: #92400e; }
.lp-card--splus .lp-card-title{ color: var(--purple); }
.lp-card--sped .lp-card-title{ color: var(--orange); }
.lp-card--lang .lp-card-title{ color: var(--teal); }
.lp-card--group .lp-badge{ background: var(--blue); }
.lp-card--oto .lp-badge{ background: var(--green); }
.lp-card--self .lp-badge{ background: #92400e; }
.lp-card--splus .lp-badge{ background: var(--purple); }
.lp-card--sped .lp-badge{ background: var(--orange); }
.lp-card--lang .lp-badge{ background: var(--teal); }
.lp-card--group:hover{ border-color: var(--blue); }
.lp-card--oto:hover{ border-color: var(--green); }
.lp-card--sped:hover{ border-color: var(--orange); }
.lp-card--lang:hover{ border-color: var(--teal); }
.lp-enroll-btn{
display: block;
text-align: center;
border: 2px solid var(--navy);
color: var(--navy);
font-family:'Sora',system-ui,sans-serif;
font-size: 13px;
font-weight: 800;
letter-spacing: .6px;
padding: 12px 0;
border-radius: 10px;
text-decoration: none;
text-transform: uppercase;
transition: background .2s, color .2s, border-color .2s;
margin-top: auto;
}
.lp-card--group .lp-enroll-btn{ border-color:var(--blue); color:var(--blue); }
.lp-card--oto .lp-enroll-btn{ border-color:var(--green); color:var(--green); }
.lp-card--self .lp-enroll-btn{ border-color:#b45309; color:#b45309; }
.lp-card--splus .lp-enroll-btn{ border-color:var(--purple); color:var(--purple); }
.lp-card--sped .lp-enroll-btn{ border-color:var(--orange); color:var(--orange); }
.lp-card--lang .lp-enroll-btn{ border-color:var(--teal); color:var(--teal); }
.lp-card--group .lp-enroll-btn:hover{ background:var(--blue); color:#fff; }
.lp-card--oto .lp-enroll-btn:hover{ background:var(--green); color:#fff; }
.lp-card--self .lp-enroll-btn:hover{ background:#b45309; color:#fff; }
.lp-card--splus .lp-enroll-btn:hover{ background:var(--purple); color:#fff; }
.lp-card--sped .lp-enroll-btn:hover{ background:var(--orange); color:#fff; }
.lp-card--lang .lp-enroll-btn:hover{ background:var(--teal); color:#fff; }
.lp-tags{
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 18px;
}
.lp-tag{
font-size: 12px;
font-weight: 600;
padding: 4px 12px;
border-radius: 20px;
border: 1px solid;
}
.lp-card--group .lp-tag{ background:var(--blue-lt); color:var(--blue); border-color:#2563eb33; }
.lp-card--oto .lp-tag{ background:var(--green-bg); color:var(--green); border-color:#22a86133; }
.lp-card--self .lp-tag{ background:var(--gold-bg); color:#b45309; border-color:#f5a62333; }
.lp-card--splus .lp-tag{ background:var(--purple-bg); color:var(--purple); border-color:#7b1fa233; }
.lp-card--sped .lp-tag{ background:var(--orange-bg); color:var(--orange); border-color:#e6510033; }
.lp-card--lang .lp-tag{ background:var(--teal-bg); color:var(--teal); border-color:#0d948833; }
.lp-extra-label{
grid-column: 1 / -1;
text-align: center;
margin: 12px 0 4px;
}
.lp-extra-label span{
display: inline-block;
font-size: 12px;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
color: #F56F0F;
background: var(--off);
border: 1px solid var(--g200);
border-radius: 999px;
padding: 5px 18px;
}
@media(max-width: 768px){
.lp-grid{ grid-template-columns: 1fr; gap: 20px; }
.lp-card-img{ height: 180px; }
.lp-section{ padding: 56px 0; }
}
.blog-head{text-align:center;margin-bottom:44px;}
.blog-eyebrow{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#F56F0F;margin-bottom:10px;}
.blog-title{font-family:'Sora',system-ui,sans-serif;font-size:clamp(24px,3vw,36px);font-weight:800;color:var(--navy);margin-bottom:10px;line-height:1.2;}
.blog-title em{font-style:normal;color:var(--blue);}
.blog-sub{font-size:15px;color:var(--g500);line-height:1.6;}
/* ══ FIX 1: Spotlight nocookie iframes ══ */
/* ══ FIX 2: Why section — image swap + badge row ══ */
/* ══ FIX 5: Award labels ══ */
/* ══ FIX 6: Franchise redesign ══ */
.franchise-redesign{ background:var(--navy); padding:80px 0; overflow:hidden; }
.franchise-inner{ max-width:1250px; margin:0 auto; padding:0 24px; display:flex; gap:60px; align-items:center; }
.franchise-left{ flex:1; }
.franchise-eyebrow{ font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:#F56F0F; margin-bottom:12px; }
.franchise-title{ font-family:'Sora',system-ui,sans-serif; font-size:clamp(28px,3vw,42px); font-weight:800; color:#fff; line-height:1.2; margin-bottom:12px; }
.franchise-title em{ color:#2563eb; font-style:normal; }
.franchise-sub{ color:rgba(255,255,255,.7); font-size:16px; margin-bottom:28px; }
.franchise-stats{ display:flex; gap:32px; margin-bottom:28px; }
.fstat strong{ display:block; font-size:28px; font-weight:800; color:#fff; }
.fstat span{ font-size:13px; color:rgba(255,255,255,.6); }
.franchise-perks{ list-style:none; padding:0; margin:0 0 32px; display:flex; flex-direction:column; gap:10px; }
.franchise-perks li{ display:flex; align-items:center; gap:10px; color:rgba(255,255,255,.85); font-size:15px; }
.franchise-perks svg{ flex-shrink:0; color:var(--green); }
.franchise-cta{ display:inline-block; background:var(--green); color:#fff; font-weight:700; padding:14px 32px; border-radius:8px; text-decoration:none; transition:background .2s; font-size:16px; }
.franchise-cta:hover{ background:var(--green-dark); color:#fff; }
.franchise-right{ flex:0 0 min(480px,100%); max-width:480px; overflow:hidden; }
.franchise-img-wrap{ position:relative; }
.franchise-img-wrap img{ width:100%; height:auto; max-height:420px; border-radius:16px; display:block; object-fit:contain; object-position:center; background:rgba(255,255,255,.04); }
.franchise-badge{ position:absolute; background:#fff; border-radius:12px; padding:12px 16px; box-shadow:0 8px 24px rgba(0,0,0,.18); }
.franchise-badge--rating{ bottom:-20px; left:-20px; min-width:180px; }
.franchise-badge--award{ top:-16px; right:-16px; display:flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color:var(--navy); }
.fb-stars{ color:#f5a623; font-size:18px; }
.fb-stars span{ color:#ddd; }
.fb-score{ font-size:24px; font-weight:800; color:var(--blue); }
.fb-sub{ font-size:12px; color:#666; margin-top:2px; }
/* ══ FIX 7: Collaborations redesign ══ */
.collab-redesign{ background:#fff; padding:64px 0; }
.collab-logos{ display:flex; justify-content:center; align-items:center; gap:32px; flex-wrap:wrap; }
.collab-logo-card{ background:#f9fafb; border-radius:12px; padding:24px 32px; border:1px solid #e5e7eb; display:flex; align-items:center; justify-content:center; }
.modern-photo-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:36px; }
.mpg-item img{ width:100%; height:220px; object-fit:cover; border-radius:12px; display:block; transition:transform .3s; }
.mpg-item:hover img{ transform:scale(1.03); }
.mpg-item--tall img{ height:100%; }
.modern-values{ display:flex; flex-wrap:wrap; justify-content:center; gap:24px; }
.mval{ display:flex; align-items:center; gap:10px; font-size:15px; font-weight:500; color:var(--navy); }
/* ══ Restored: modern-redesign + golive-redesign section wrappers ══ */
.modern-redesign{ background:#fffbf0; padding:72px 0; }
/* ══ RESTORED: testimonial_wrapper (our redesigned version) ══ */
.testimonial_wrapper .pagetitle{ text-align:center; }
@media(prefers-reduced-motion:reduce){
.tr-row--fwd, .tr-row--rev{animation:none;}
}
/* Animation */
.splight-marquee .tr-row--fwd{
animation: trFwd 18s linear infinite; /*trScrollFwd2*/
}
.splight-marquee .tr-row--rev{
animation: trScrollRev2 24s linear infinite; /*trScrollRev2*/
}
.splight-marquee .tr-row:hover{
animation-play-state: paused;
}
@keyframes trScrollRev2 {
0% { transform: translateX(-100%); }
100% { transform: translateX(0); }
}
/* Sunbeam World School - Online Schooling Guide (BEM) */
.osg{
--osg-navy:var(--head);--osg-blue:#2563eb;--osg-blue-lt:#eff4ff;
--osg-green:#22a861;--osg-gold:#f5a623;
--osg-w:#fff;--osg-off:#f7f9fc;--osg-g100:#f1f5f9;--osg-g200:#e2e8f0;
--osg-g400:#94a3b8;--osg-g500:#64748b;--osg-g600:#475569;--osg-g800:#1e293b;
--osg-ease:cubic-bezier(.4,0,.2,1);
font-family:'DM Sans',system-ui,-apple-system,sans-serif;
background:linear-gradient(180deg,var(--osg-w) 0%,var(--osg-off) 100%);
padding:clamp(48px,7vw,72px) 0 clamp(54px,8vw,80px);
color:var(--osg-g800);
}
.osg *, .osg *::before, .osg *::after{box-sizing:border-box;margin:0;padding:0;}
.osg__container{max-width:960px;margin:0 auto;padding:0 clamp(16px,4vw,28px);}
/* Head */
.osg__head{text-align:center;margin-bottom:clamp(24px,4vw,38px);}
.osg__eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--osg-gold);margin-bottom:14px;}
.osg__eyebrow::before, .osg__eyebrow::after{content:'';display:block;width:clamp(18px,3vw,28px);height:2px;background:var(--osg-gold);border-radius:2px;opacity:.5;}
.osg__title{font-family:'Sora',system-ui,sans-serif;font-size:clamp(24px,4.5vw,44px);font-weight:800;color:var(--osg-navy);line-height:1.18;letter-spacing:-.5px;margin-bottom:12px;text-wrap:balance;}
.osg__title em{color:#2563eb;font-style:normal;}
.osg__sub{font-size:clamp(14px,2.2vw,16px);color:var(--osg-g500);max-width:640px;margin:0 auto;line-height:1.6;text-wrap:pretty;}
/* List */
.osg__list{display:flex;flex-direction:column;gap:14px;scroll-margin-top:80px;}
/* Panel */
.osg__panel{border-radius:14px;background:var(--osg-w);border:1.5px solid transparent;background-image:linear-gradient(var(--osg-w),var(--osg-w)),linear-gradient(100deg,var(--osg-blue),var(--osg-gold));background-origin:border-box;background-clip:padding-box,border-box;box-shadow:0 3px 14px rgba(26,39,68,.06);overflow:hidden;transition:box-shadow .3s var(--osg-ease);scroll-margin-top:80px;}
.osg__panel[open]{box-shadow:0 10px 30px rgba(26,39,68,.12);}
/* Question (summary) */
.osg__q{list-style:none;display:flex;align-items:center;gap:14px;padding:17px 20px;cursor:pointer;user-select:none;}
.osg__q::-webkit-details-marker{display:none;}
.osg__q-icon{flex:0 0 26px;width:26px;height:26px;}
.osg__q-label{flex:1;min-width:0;}
.osg__q-title{display:block;font-family:'Sora',system-ui,sans-serif;font-size:16.5px;font-weight:700;color:var(--osg-navy);line-height:1.35;transition:color .25s var(--osg-ease);text-wrap:balance;}
.osg__q:hover .osg__q-title, .osg__panel[open] .osg__q-title{color:var(--osg-blue);}
.osg__q-teaser{display:block;font-size:12.5px;color:var(--osg-g500);margin-top:3px;line-height:1.45;}
.osg__q-chevron{flex:0 0 22px;width:22px;height:22px;color:var(--osg-g400);transition:transform .3s var(--osg-ease),color .3s var(--osg-ease);}
.osg__panel[open] .osg__q-chevron{transform:rotate(180deg);color:var(--osg-blue);}
.osg__q:focus-visible{outline:2px solid var(--osg-blue);outline-offset:-2px;border-radius:12px;}
.osg__list:has(.osg__panel[open]) .osg__panel:not([open]) .osg__q-title{color:var(--osg-g500);}
.osg__list:has(.osg__panel[open]) .osg__panel:not([open]):hover .osg__q-title{color:var(--osg-blue);}
/* Answer */
.osg__a{padding:16px 4px 22px;margin:0 20px;border-top:1px solid var(--osg-g200);}
.osg__a > p{font-size:14.5px;line-height:1.7;color:var(--osg-g600);margin-bottom:14px;}
.osg__a strong{color:var(--osg-navy);font-weight:700;}
.osg__h{display:flex;align-items:center;gap:9px;font-family:'Sora',system-ui,sans-serif;font-size:15px;font-weight:700;color:var(--osg-navy);margin:18px 0 10px;text-wrap:balance;}
.osg__h::before{content:'';flex:0 0 4px;width:4px;height:16px;border-radius:2px;background:linear-gradient(180deg,var(--osg-blue),var(--osg-gold));}
.osg__ul{list-style:none;margin-bottom:14px;}
.osg__ul li{position:relative;padding-left:20px;font-size:14.5px;line-height:1.65;color:var(--osg-g600);margin-bottom:9px;}
.osg__ul li:last-child{margin-bottom:0;}
.osg__ul li::before{content:'';position:absolute;left:0;top:9px;width:7px;height:7px;border-radius:50%;background:linear-gradient(120deg,var(--osg-blue),var(--osg-gold));}
.osg__read{display:inline-flex;align-items:center;gap:8px;margin-top:6px;padding:9px 16px;border-radius:999px;background:var(--osg-blue-lt);color:var(--osg-blue);font-size:13.5px;font-weight:700;text-decoration:none;transition:background .25s var(--osg-ease),transform .25s var(--osg-ease);}
.osg__read:hover{background:#dbeafe;transform:translateX(2px);}
.osg__read svg{flex:0 0 15px;width:15px;height:15px;}
.swsfaq{padding:80px 0;background:#f9fafb;position:relative;}
.swsfaq .swsfaq-container{position:relative;max-width:1250px;margin:auto;padding:0 24px;}
.swsfaq .swsfaq-globe{position:absolute;right:0;top:-45px;width:105px;}
.swsfaq .swsfaq-title{text-align:center;margin:0 0 40px;font-family:var(--font-head);color:var(--head);font-size:34px;font-weight:700;line-height:1.4;}
.swsfaq .swsfaq-title span{color:#2563eb;}
.swsfaq .swsfaq-list{display:flex;flex-direction:column;gap:14px;}
.swsfaq .swsfaq-item{background:#fff;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden;transition:box-shadow .2s;}
.swsfaq .swsfaq-item:hover{box-shadow:0 4px 18px rgba(26,39,68,.06);}
.swsfaq .swsfaq-head{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:22px 28px;cursor:pointer;background:#fff;transition:background .2s;user-select:none;}
.swsfaq .swsfaq-head:hover{background:#fffdf4;}
.swsfaq .swsfaq-item.is-open .swsfaq-head{background:#FBE38B;}
.swsfaq .swsfaq-q{margin:0;font-family:var(--font-head);font-size:17px;font-weight:700;color:#1a2744;line-height:1.5;flex:1;}
.swsfaq .swsfaq-sym{font-size:24px;font-weight:400;color:#09B451;flex-shrink:0;width:24px;text-align:center;line-height:1;}
.swsfaq .swsfaq-item.is-open .swsfaq-sym{color:#1a2744;}
.swsfaq .swsfaq-body{display:none;padding:24px 28px 26px;background:#fff;}
.swsfaq .swsfaq-item.is-open .swsfaq-body{display:block;}
.swsfaq .swsfaq-body p{font-family:var(--font-body);font-size:15px;font-weight:400;color:#4b5563;line-height:1.8;margin:0;}
.swsfaq .swsfaq-lead{font-weight:600;color:#1a2744;margin:0 0 6px;}
.swsfaq .swsfaq-close{margin-top:14px;}
.swsfaq .swsfaq-body ul{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:9px;}
.swsfaq .swsfaq-body ul li{position:relative;padding-left:22px;font-family:var(--font-body);font-size:15px;font-weight:400;color:#4b5563;line-height:1.7;}
.swsfaq .swsfaq-body ul li::before{content:'';position:absolute;left:2px;top:10px;width:7px;height:7px;border-radius:50%;background:#09B451;}
@media(max-width:600px){
.swsfaq{padding:56px 0;}
.swsfaq .swsfaq-title{font-size:26px;}
.swsfaq .swsfaq-head{padding:18px 20px;}
.swsfaq .swsfaq-q{font-size:15px;}
.swsfaq .swsfaq-body{padding:20px;}
.swsfaq .swsfaq-globe{display:none;}
}
/* ---- QA FIXES ---- */
/* FAQ answers looked bold: they used Sora (only 700/800 loaded). Body font restored. */
.swsfaq-body p, .swsfaq-body ul li, .swsfaq-body ol li{font-family:var(--font-body);font-weight:400}
.swsfaq-lead{font-family:var(--font-body)}
/* osg guide same issue guard */
.osg__panel p, .osg__panel li{font-family:var(--font-body);font-weight:400}
/* Compare rotating country visible by default */
.compare-country{opacity:1}
/* ---- Franchise (redesigned, crisp) ---- */
.fr2{background:linear-gradient(135deg,var(--navy),var(--navy2));color:var(--w);padding:56px 0}
.fr2__grid{display:grid;grid-template-columns:1.25fr .75fr;gap:var(--sp-7);align-items:center}
.fr2__title{color:var(--w);font-size:clamp(22px,2.6vw,32px);margin:var(--sp-3) 0 var(--sp-2)}
.fr2__title em{font-style:normal;color:var(--amber)}
.fr2__sub{color:var(--g300);margin-bottom:var(--sp-4)}
.fr2__ticks{display:grid;grid-template-columns:1fr 1fr;gap:10px 22px;font-size:var(--fs-14);color:rgba(255,255,255,.88)}
.fr2__ticks li{position:relative;padding-left:26px}
.fr2__ticks li::before{
content:"";position:absolute;left:0;top:3px;width:16px;height:16px;border-radius:50%;
background:var(--green);
-webkit-mask:url('data:image/svg+xml,') center/12px no-repeat,linear-gradient(#000,#000);
mask:url('data:image/svg+xml,') center/12px no-repeat,linear-gradient(#000,#000);
mask-composite:exclude;-webkit-mask-composite:xor;
background:radial-gradient(circle,var(--green) 60%,transparent 61%);
}
.fr2__ticks li::before{background:var(--green);-webkit-mask:none;mask:none;border-radius:50%}
.fr2__ticks li::after{
content:"";position:absolute;left:4px;top:7.5px;width:8px;height:5px;
border-left:2px solid var(--navy2);border-bottom:2px solid var(--navy2);transform:rotate(-45deg);
}
.fr2__side{display:flex;flex-direction:column;gap:var(--sp-4);align-items:stretch}
.fr2__stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.fr2__stats div{
background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);
border-radius:var(--r-md);padding:14px 10px;text-align:center;
}
.fr2__stats strong{display:block;font-family:var(--font-head);font-size:22px;color:var(--amber)}
.fr2__stats span{font-size:var(--fs-12);color:var(--g300)}
.fr2__cta{width:100%}
/* ---- Collaborations (redesigned, crisp) ---- */
.cl2__row{display:flex;justify-content:center;gap:var(--sp-5);flex-wrap:wrap}
.cl2__card{
display:flex;flex-direction:column;align-items:center;gap:6px;
background:var(--w);border:1px solid var(--g200);border-radius:var(--r-lg);
padding:var(--sp-5) var(--sp-7);box-shadow:var(--sh-sm);min-width:240px;
transition:transform var(--t-med),box-shadow var(--t-med);
}
.cl2__card:hover{transform:translateY(-4px);box-shadow:var(--sh-md)}
.cl2__card img{width:88px;height:88px;object-fit:contain}
.cl2__card strong{font-family:var(--font-head);color:var(--head);font-size:var(--fs-16);margin-top:6px}
.cl2__card span{font-size:var(--fs-13);color:var(--g500)}
@media (max-width:900px){
.fr2__grid{grid-template-columns:1fr;gap:var(--sp-5)}
.fr2__ticks{grid-template-columns:1fr}
}
/* ---- FAQ filter chips ---- */
.swsfaq-filters{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin:0 0 var(--sp-5)}
.swsfaq-chip{
font-family:var(--font-head);font-weight:700;font-size:var(--fs-13);
color:var(--g600);background:var(--w);border:1.5px solid var(--g300);
border-radius:var(--r-pill);min-height:38px;padding:0 16px;
transition:all var(--t-med);
}
.swsfaq-chip:hover{border-color:var(--head-accent);color:var(--head-accent)}
.swsfaq-chip.active{background:var(--head-accent);border-color:var(--head-accent);color:var(--w)}
.swsfaq-item[data-hidden], .osg__panel[data-hidden]{display:none}
/* ---- osg guide compact ---- */
.osg__list.collapsed .osg__panel:nth-of-type(n+7){display:none}
.osg-morebtn{display:flex;margin:var(--sp-4) auto 0}
/* ---- Hero cinema window (canonical) ---- */
.hero__window{
max-width:560px;margin:0 auto;border-radius:16px;overflow:hidden;
background:#0b1424;border:1px solid rgba(255,255,255,.14);
box-shadow:0 30px 80px rgba(0,0,0,.5);
}
.hero__bar{display:flex;align-items:center;gap:7px;padding:10px 14px;background:rgba(255,255,255,.06)}
.hero__bar span{width:10px;height:10px;border-radius:50%}
.hero__bar span:nth-child(1){background:#ff5f57}
.hero__bar span:nth-child(2){background:#febc2e}
.hero__bar span:nth-child(3){background:#28c840}
.hero__live{
margin-left:auto;display:flex;align-items:center;gap:6px;
font-family:var(--font-body);font-style:normal;font-weight:700;font-size:var(--fs-12);
letter-spacing:.1em;color:#34d27b;
}
.hero__live i{width:7px;height:7px;border-radius:50%;background:#34d27b;animation:hero-pulse 1.4s infinite}
@keyframes hero-pulse{50%{opacity:.3}}
.hero__window img{width:100%;height:auto;display:block}
@keyframes hero-rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
/*.hero h1,*/
.hero__badges,.hero__sub,.hero__ctas{opacity:0;animation:hero-rise .55s var(--ease) .1s forwards}
.hero__window,.hero__curricula{opacity:0;animation:hero-rise .6s var(--ease) .3s forwards}
@media (prefers-reduced-motion:reduce){
/*.hero h1,*/
.hero__badges,.hero__sub,.hero__ctas,.hero__window,.hero__curricula{opacity:1;animation:none}
}
@media (max-width:1024px){.hero__window{max-width:520px}}
@media (max-width:430px){.hero__window{max-width:100%}}
/* ══════════════════════════════════════
SECTION RHYTHM NORMALIZATION
One vertical rhythm for every top-level section.
--sp-section = clamp(48px,7vw,88px) from tokens.
══════════════════════════════════════ */
.steps-section,
.cocurr-section,
.compare-section,
.testimonial_wrapper,
.parent-video-section,
.student-video-section,
.blog-section,
.collab-redesign,
.modern-redesign,
.lp-section,
.global-reach-section,
.online-school-guide,
.final-cta{
padding-top:var(--sp-section);
padding-bottom:var(--sp-section);
}
.tvid-section{margin-bottom:0}
/* ---------- Mobile QA fixes ---------- */
@media(max-width:768px){
.modern-photo-grid{grid-template-columns:repeat(2,1fr);gap:12px}
}
@media(max-width:640px){
.fr2__stats{gap:8px}
.fr2__stats strong{font-size:18px}
}
/* ---------- Utilities (extracted from former inline styles) ---------- */
.u-fs-26{font-size:26px}
.u-w-23{width:23%}
.u-w-26{width:26%}
.u-w-28{width:28%}
.u-center-mt36{text-align:center;margin-top:36px}
.u-flex-center{display:flex;justify-content:center}
.u-badge-row{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.u-minibadge{font-size:12px;font-weight:700;background:var(--blue-lt);color:var(--blue);padding:3px 10px;border-radius:20px}
.u-imgpad-green{object-fit:contain;background:linear-gradient(135deg,#f0faf5,#fff);padding:16px}
.u-imgpad-blue{object-fit:contain;background:linear-gradient(135deg,#f0f4ff,#fff);padding:16px}
.u-dot-blue{background:var(--blue)}
.u-dot-green{background:var(--green)}
.u-dot-gold{background:var(--gold)}
.u-dot-purple{background:var(--purple)}
.u-dot-orange{background:var(--orange)}
.u-dot-teal{background:var(--teal)}
/* ---- Accreditation logo grid (v4 markup, styles were missing) ---- */
.sws-logogrid{
display:flex;flex-wrap:wrap;justify-content:center;gap:var(--sp-4);
max-width:1140px;margin:var(--sp-5) auto 0;padding:0 var(--gutter);
}
.sws-logogrid__item{
display:flex;flex-direction:column;align-items:center;gap:8px;
background:var(--w);border:1px solid var(--g200);border-radius:var(--r-md);
padding:var(--sp-4) var(--sp-5);min-width:150px;box-shadow:var(--sh-sm);
transition:transform var(--t-med) var(--ease),box-shadow var(--t-med);
}
.sws-logogrid__item:hover{transform:translateY(-3px);box-shadow:var(--sh-md)}
.sws-logogrid__item img{height:56px;width:auto;max-width:120px;object-fit:contain}
.sws-logogrid__name{
font-family:var(--font-body);font-size:var(--fs-12);font-weight:700;
color:var(--g500);text-align:center;letter-spacing:.04em;
}
@media (max-width:768px){
.sws-logogrid{gap:10px}
.sws-logogrid__item{min-width:calc(50% - 10px);padding:var(--sp-3)}
}
/* ---- live-parity headings ---- */
.cta-h3{font-family:var(--font-head);font-size:var(--fs-16);font-weight:700;color:var(--amber);margin:6px 0 var(--sp-3)}
.enrollform__thanks{font-family:var(--font-head);font-size:var(--fs-18);color:var(--green-dark);margin-top:var(--sp-3)}
@media (max-width: 430px) {
.modern-photo-grid { max-width: unset; grid-template-columns: 1fr; gap: 12px; }
}