/* styles.css */

:root{

/* Light theme */

--bg: #ffffff;

--panel: #ffffff;

--panel2:#f8fafc;

--text: #111827; /* Black-ish text */

--muted:#475569; /* Slate-600 for muted */

--hover:#1e3a8a; /* Dark blue hover highlight */

--accent:#16a34a; /* success */

--danger:#ef4444; /* danger */

--border:#e5e7eb; /* light border */

--ring: rgba(30,58,138,0.25);

--shadow: 0 6px 24px rgba(0,0,0,0.08);

--radius: 14px;

/* Controls offset for desktop arrows (outside the card) */

--outside-offset: 28px;

}

*{box-sizing:border-box}

html,body{height:100%}

body{

margin:0;

font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji", "Segoe UI Symbol";

background: var(--bg);

color: var(--text);

-webkit-font-smoothing: antialiased;

-moz-osx-font-smoothing: grayscale;

}

/* Utility */

.sr-only{

position:absolute !important;

width:1px !important; height:1px !important;

padding:0 !important; margin:-1px !important;

overflow:hidden !important; clip:rect(0,0,0,0) !important;

white-space:nowrap !important; border:0 !important;

}

/* Make the page wider on desktop */

.container{width: min(1400px, 95%); margin: 0 auto;}

.btn{

display:inline-flex; align-items:center; justify-content:center;

gap:.55rem; border-radius: 12px; padding:.9rem 1.1rem; font-weight:700; letter-spacing:.2px; cursor:pointer; border:1px solid transparent; text-decoration:none; color:var(--text);

transition: all .2s ease;

}

.btn.small{padding:.6rem .8rem; font-size:.9rem}

/* Neutral solid button (black) */

.btn.solid{

background: #111827;

color:#ffffff;

box-shadow: var(--shadow);

border-color:#111827;

}

.btn.solid:hover{transform: translateY(-1px); filter: brightness(1.02);}

/* Neutral ghost button with subtle hover blue tint */

.btn.ghost{

background: transparent;

border-color: #cbd5e1;

color: var(--text);

}

.btn.ghost:hover{

border-color:#94a3b8;

background:#f1f5f9;

color: var(--hover);

}

.muted{color: var(--muted)}

/* Header */

.site-header{

position: sticky; top:0; z-index:50;

background: rgba(255,255,255,.85);

backdrop-filter: blur(10px);

border-bottom: 1px solid var(--border);

}

.header-inner{display:flex; align-items:center; justify-content:space-between; padding: .9rem 0;}

.brand{display:flex; align-items:center; gap:.7rem; text-decoration:none; color:var(--text)}

.brand-mark{display:inline-flex; width:50px; height:50px}

.brand-mark img{width:100%; height:100%; object-fit:contain}

.brand-text{font-family:"Plus Jakarta Sans", Inter, system-ui; font-weight:800; font-size:1.05rem; letter-spacing:.4px; color:var(--text)}

.brand-tagline{color:var(--muted); font-size:.8rem; margin-left:.35rem}

.main-nav{display:flex; align-items:center; gap:1.2rem}

.main-nav ul{display:flex; list-style:none; gap:1rem; padding:0; margin:0}

.main-nav a{color:#334155; text-decoration:none; font-weight:600}

.main-nav a:hover{color:var(--hover)}

.nav-cta{display:flex; gap:.6rem}

.nav-toggle{display:none; background:none; border:0; width:44px; height:44px; border-radius:10px; color:var(--text); cursor:pointer}

.nav-toggle span{display:block; height:2px; background:#111827; margin:7px 8px}

@media (max-width: 900px){

.nav-toggle{display:inline-block}

.main-nav{

position: fixed; inset:64px 0 auto 0;

background:rgba(255,255,255,.98);

border-bottom:1px solid var(--border);

padding:1rem; transform: translateY(-120%); transition: transform .25s ease;

flex-direction:column; align-items:stretch; gap:1rem

}

.main-nav.open{transform: translateY(0)}

.main-nav ul{flex-direction:column}

.nav-cta{flex-direction:column}

}

/* HERO with right video fade */

.hero{

position: relative;

overflow: hidden;

min-height: 560px;

padding: 3.5rem 0 2rem;

background: radial-gradient(1000px 400px at 20% -40%, #f1f5f9, rgba(255,255,255,0) 65%);

}

.hero-inner{

position: relative;

z-index: 2;

display: flex;

align-items: center;

min-height: clamp(560px, 72vh, 820px);

}

.hero-copy{max-width: 820px}

.hero h1{font-size: clamp(2rem, 3.4vw, 3.2rem); margin:0 0 .6rem; line-height:1.1}

.hero p{color:#334155; max-width: 64ch}

.hero-cta{display:flex; gap:.8rem; margin-top:1rem}

/* Video layer anchored to right, fading into the white background on the left */

.hero-media{

position:absolute; inset:0;

z-index: 1;

pointer-events: none;

}

.hero-video{

position:absolute;

top:0; right:0; bottom:0;

width: 62vw;

min-width: 600px;

height: 100%;

object-fit: cover;

object-position: center;

filter: saturate(1.05) contrast(1.02);

}

.hero-media::after{

content:"";

position:absolute; inset:0;

pointer-events:none;

background: linear-gradient(90deg, var(--bg) 0%, var(--bg) 40%, rgba(255,255,255,0) 62%);

}

@media (max-width: 1100px){

.hero-video{width: 58vw; min-width: 520px}

.hero-media::after{background: linear-gradient(90deg, var(--bg) 0%, var(--bg) 45%, rgba(255,255,255,0) 70%)}

}

@media (min-width: 1200px){
.hero-copy{
max-width: 40%;
flex-basis: 40%;
}
}

/* Mobile inline hero video (hidden by default, shown on small screens) */

.hero-mobile-video{display:none}

.hero-mobile-video .mobile-video{

width: 100%;

display: block;

aspect-ratio: 16 / 9;

object-fit: cover;

border-radius: var(--radius);

box-shadow: var(--shadow);

filter: saturate(1.05) contrast(1.02);

}

@media (max-width: 900px){

.hero{min-height: auto; padding: 2.5rem 0 1.5rem}

.hero-media{display:none}

.hero-inner{min-height: auto;}

.hero-copy{ text-align: center; margin-left:auto; margin-right:auto;}

.hero p{margin-left:auto; margin-right:auto;}

.hero-cta{justify-content:center; flex-wrap:wrap}

.hero-mobile-video{display:block; margin:.9rem 0 0}

.badges{justify-content:center}

}

/* Badges and icons */

.badges{ display:flex; gap:.6rem; flex-wrap:wrap; margin-top:.9rem }

.badge{

display:flex; align-items:center; gap:.5rem;

background:#f8fafc; border:1px solid var(--border);

padding:.45rem .6rem; border-radius:999px; color:#0f172a

}

.badge svg{width:20px; height:20px; display:inline-block}

.badge svg *, .ribbon-icon svg *{stroke: currentColor}

/* Rotator mode */

.badges.rotator-enabled{

position: relative; display: inline-block; width: fit-content; min-height: 0;

}

.badges.rotator-enabled .badge{

position:absolute; left:0; top:0; opacity:0; transform: translateY(6px);

pointer-events:none; transition: opacity .35s ease, transform .35s ease; white-space: nowrap;

}

.badges.rotator-enabled .badge.active{ position:relative; opacity:1; transform: none; pointer-events:auto; }

/* Ribbon */

.ribbon{ border-top:1px solid var(--border); border-bottom:1px solid var(--border); background:#f8fafc }

.ribbon-inner{display:flex; align-items:center; justify-content:center; gap:.6rem; padding:.9rem 0; text-align:center; flex-direction:column}

.ribbon-icon{display:flex; align-items:center; justify-content:center; color:#0f172a}

.ribbon-icon svg{width:22px; height:22px}

/* Sections */

.section-head h2{margin:.2rem 0}

.section-head p{color:#334155}

/* Why (carousel) */

.why{padding:2.2rem 0}

.why-carousel{ position:relative; }

.why-track{ position:relative; min-height: 320px; }

.why-text{

display:flex;

flex-direction:column;

justify-content:center; /* vertical centering */

}

/* Main card */

.why-slide{

position:relative;

display:grid;

grid-template-columns: minmax(0,1.1fr) minmax(0,1fr);

gap: clamp(.75rem, 2vw, 1.25rem);

align-items:stretch; /* stretch children to same height */

background:var(--panel);

border:1px solid var(--border);

border-radius:14px;

padding:1rem;

box-shadow: var(--shadow);

margin-top:1rem;

min-height: clamp(240px, 28vw, 360px); /* keeps a stable height on desktop */

overflow: hidden; /* enforce content stays inside card */

}

.why-slide:nth-child(even){

grid-template-columns: minmax(0,1fr) minmax(0,1.1fr);

}

.why-slide:nth-child(even) .why-media{order:2}

.why-media{

align-self:stretch;

display:flex;

align-items:center;

justify-content:center;

}

.why-media .media-illustration{

width:100%;

height:100%;

min-height: 200px;

border-radius:12px;

border:1px solid #e2e8f0;

box-shadow: var(--shadow);

overflow:hidden;

display:flex;

align-items:center;

justify-content:center;

color:#0f172a;

}

/* Image fields to replace icons */

.why-img{

width:100%;

height:100%;

object-fit: cover;

display:block;

}

/* Soft gradient "image" backgrounds (kept as fallback/backdrop) */

.il-accredited{background: linear-gradient(135deg, #e0f2fe, #e0e7ff)}

.il-flexible{background: linear-gradient(135deg, #dcfce7, #ccfbf1)}

.il-stackable{background: linear-gradient(135deg, #fef3c7, #e9d5ff)}

.il-pricing{background: linear-gradient(135deg, #fee2e2, #fde68a)}

/* Controls and dots */

.why-controls, .why-dots{display:none}

.why-controls{

position:absolute; inset:0; pointer-events:none; overflow:visible;

}

.why-controls button{

position:absolute; top:50%; transform: translateY(-50%);

pointer-events:auto;

width:40px; height:40px; border-radius:999px;

border:1px solid #cbd5e1; background:#ffffff; color:#0f172a;

display:flex; align-items:center; justify-content:center;

box-shadow: var(--shadow);

}

/* Move arrows OUTSIDE the card on desktop */

@media (min-width: 901px){

.why-prev{left: calc(-1 * var(--outside-offset));}

.why-next{right: calc(-1 * var(--outside-offset));}

}

.why-controls button:hover{background:#f8fafc; border-color:#94a3b8}

.why-dots{ display:flex; gap:.4rem; justify-content:center; margin-top:.9rem; }

.why-dots button{

width:9px; height:9px; border-radius:999px; border:0;

background:#cbd5e1; cursor:pointer;

}

.why-dots button[aria-selected="true"]{background:#111827; width:22px; border-radius:999px}

/* JS-enhanced fade carousel */

.why-carousel.js-enabled .why-controls{display:block}

.why-carousel.js-enabled .why-dots{display:flex}

.why-carousel.js-enabled .why-slide{

position:absolute; inset:0; margin:0;

opacity:0; transform: translateY(8px);

transition: opacity .5s ease, transform .5s ease;

pointer-events:none; /* hide interactions for inactive slides */

}

.why-carousel.js-enabled .why-slide.active{

opacity:1; transform:none; position:absolute; pointer-events:auto;

}

@media (max-width: 900px){

.why-slide, .why-slide:nth-child(even){ grid-template-columns: 1fr; }

.why-slide:nth-child(even) .why-media{order:0}

/* Let slide grow to fit content on mobile to avoid overlap */

.why-slide{ min-height: auto; }

/* Hide arrows on mobile (swipe + auto-scroll stays active) */

.why-controls{ display:none !important; }

/* Ensure media renders first; already done above */

.why-media{ order: -1; }

.why-text{ order: 0; }

}

/* Explore tiles */

.explore{

padding:2.2rem 0;

background: radial-gradient(900px 240px at 20% 0%, #f1f5f9, rgba(255,255,255,0))

}

.explore .section-head{margin-bottom:.8rem}

.explore-inner{display:grid; grid-template-columns: repeat(3, 1fr); gap:1rem}

@media (max-width: 1024px){.explore-inner{grid-template-columns: repeat(2, 1fr)}}

@media (max-width: 640px){.explore-inner{grid-template-columns: 1fr}}

.explore-card{

background: var(--panel);

border:1px solid var(--border);

border-radius:14px;

padding:1rem;

}

.explore-card .pill{

display:inline-block; padding:.25rem .5rem;

border:1px solid #e2e8f0;

border-radius:999px;

color:#0f172a;

margin-bottom:.5rem;

background:#ffffff;

}

.explore-card h3{margin:.2rem 0 .3rem}

/* Vertical timeline (How to get started) */

.admissions{padding:2.2rem 0}

.timeline{

position: relative;

list-style: none;

margin: 1rem 0 0;

padding: .5rem 0;

}

.timeline::before{

content:"";

position:absolute;

top:0; bottom:0; left:50%;

width:2px; background: var(--border);

}

.timeline-item{

position:relative;

margin: 1rem 0 1.4rem;

min-height: 72px;

}

.timeline-item .num{

position:absolute; left:50%; top:.35rem;

transform: translateX(-50%);

display:inline-flex; width:32px; height:32px;

align-items:center; justify-content:center;

border-radius:999px; background:#111827; color:#ffffff; font-weight:800;

border:2px solid #ffffff; box-shadow: var(--shadow);

}

.timeline-item:nth-child(1) .num{background:#ef4444}
.timeline-item:nth-child(2) .num{background:#facc15; color:#111827}
.timeline-item:nth-child(3) .num{background:#22c55e}
.timeline-item:nth-child(4) .num{background:#3b82f6}

/* Cards */

.timeline-item .content{

position:relative;

background:var(--panel);

border:1px solid var(--border);

border-radius:14px;

padding:1rem;

width: calc(50% - 60px);

box-shadow: var(--shadow);

}
.timeline-item:nth-child(1) .content{
background:#fee2e2;
border-color:#fecaca;
}
.timeline-item:nth-child(2) .content{
background:#fef3c7;
border-color:#fde68a;
}
.timeline-item:nth-child(3) .content{
background:#dcfce7;
border-color:#bbf7d0;
}
.timeline-item:nth-child(4) .content{
background:#dbeafe;
border-color:#bfdbfe;
}

.timeline-item:nth-child(odd) .content{

margin-right:auto; text-align:right; padding-right:1rem;

}

.timeline-item:nth-child(odd) .content::after{

content:""; position:absolute; top:22px; right:-32px; width:32px; height:2px; background:#cbd5e1;

}

.timeline-item:nth-child(even) .content{

margin-left:auto; text-align:left; padding-left:1rem;

}

.timeline-item:nth-child(even) .content::after{

content:""; position:absolute; top:22px; left:-32px; width:32px; height:2px; background:#cbd5e1;

}

.timeline-item .content h4{margin:.1rem 0 .35rem}

/* Mobile layout for timeline */

@media (max-width: 800px){

.timeline::before{left:20px}

.timeline-item .num{left:20px; transform:none}

.timeline-item .content{

width: 100%;

margin-left: 60px;

margin-right: 0;

text-align:left;

}

.timeline-item:nth-child(odd) .content,

.timeline-item:nth-child(even) .content{margin-left:60px}

.timeline-item .content::after{display:none}

}

/* CTA band */

.cta-band{ padding:2rem 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); background:#f8fafc }

.cta-inner{display:flex; align-items:center; justify-content:space-between; gap:1rem}

.cta-actions{display:flex; gap:.6rem}

@media (max-width: 800px){

.cta-inner{flex-direction:column; align-items:flex-start}

}

/* Quick start dropdown in CTA */

.start-form{

display:flex; align-items:center; gap:.6rem;

margin-left:auto; /* keep on the right on desktop */

}

.start-label{

font-weight:700; color:#0f172a;

}

.start-controls{

display:flex; align-items:center; gap:.6rem;

}

.start-form select{

min-width: 240px;

border:1px solid #cbd5e1;

border-radius:12px;

padding:.75rem .9rem;

background:#ffffff;

color:var(--text);

font-weight:600;

box-shadow: var(--shadow);

outline:none;

}

.start-form select:focus{

border-color:#94a3b8;

box-shadow: 0 0 0 4px var(--ring);

}

.start-go svg{width:18px; height:18px}

@media (max-width: 800px){

.start-form{width:100%; flex-wrap:wrap; margin-left:0}

.start-label{width:100%}

.start-controls{width:100%}

.start-controls select{flex:1}

}

/* Footer */

.site-footer{ border-top:1px solid var(--border); padding:2rem 0; background:#ffffff }

.footer-inner{display:grid; grid-template-columns: 1.2fr 1fr 1fr 1.2fr; gap:1rem}

@media (max-width: 1024px){.footer-inner{grid-template-columns: 1fr 1fr}}

@media (max-width: 640px){.footer-inner{grid-template-columns: 1fr}}

.footer-col h5{margin:.2rem 0 .6rem}

.footer-col ul{list-style:none; padding:0; margin:0}

.footer-col a{color:#1f2937; text-decoration:none; font-weight:600}

.footer-col a:hover{color:var(--hover)}

.footer-col form label{display:block; margin-bottom:.5rem}

.footer-col input, .footer-col textarea{

width:100%; background:#ffffff; border:1px solid #cbd5e1; color:var(--text);

border-radius:12px; padding:.6rem .8rem; outline:none;

}

.footer-col input:focus, .footer-col textarea:focus{ border-color:#94a3b8; box-shadow: 0 0 0 4px var(--ring) }

/* Accessibility: respect reduced motion */

@media (prefers-reduced-motion: reduce){

.hero-video,.mobile-video{animation: none; transition: none}

.why-carousel.js-enabled .why-slide{transition: none}

}

/* Generic link hover highlight */

a:hover{color: var(--hover)}

@media (max-width: 800px){

/* Force left-aligned text for all timeline items on small screens */

.timeline-item:nth-child(odd) .content,

.timeline-item:nth-child(even) .content{

text-align: left;

}

.timeline-item .content{

/* Prevent right-side clipping by accounting for the 60px left offset */

width: calc(100% - 60px);

margin-left: 60px;

margin-right: 0;

text-align: left; /* keep left aligned on mobile */

}

}