:root{
  --ccc-red:#d71920;
  --ccc-red-dark:#b51218;
  --ccc-navy:#0f2547;
  --ccc-text:#4a5568;
  --ccc-border:#d9e0ea;
  --ccc-sky:#eaf2fb;
}
body{font-family:'Inter',sans-serif;color:var(--ccc-text);background:#fff;}
h1,h2,h3,.brand-name{font-family:'Playfair Display',serif;color:var(--ccc-navy);font-weight:700;}
.text-red{color:var(--ccc-red)!important;}

/* ---------- Navbar ---------- */
.ccc-nav{background:#fff;box-shadow:0 2px 12px rgba(15,37,71,.06);padding:.7rem 0;}
.brand-logo{width:48px;height:48px;border-radius:50%;border:2px solid #c9d2e0;display:inline-flex;align-items:center;justify-content:center;font-size:1.5rem;color:var(--ccc-red);background:#fff;}
.brand-name{font-size:1.2rem;margin-left:.6rem;}
.ccc-nav .nav-link{color:var(--ccc-navy);font-size:.88rem;font-weight:500;padding:.4rem .8rem;border-bottom:2px solid transparent;}
.ccc-nav .nav-link.active,.ccc-nav .nav-link:hover{color:var(--ccc-red);border-bottom-color:var(--ccc-red);}
.btn-ccc{background:var(--ccc-red);color:#fff;border:0;font-weight:600;border-radius:6px;}
.btn-ccc:hover,.btn-ccc:focus{background:var(--ccc-red-dark);color:#fff;}
.btn-enrol{padding:.55rem 1.2rem;font-size:.85rem;}

/* ---------- Hero / page background ---------- */
.auth-hero{
  position:relative;min-height:calc(100vh - 80px);padding:3.5rem 0;
  background:
    linear-gradient(180deg,rgba(234,242,251,.95) 0%,rgba(255,255,255,.55) 55%,rgba(255,255,255,0) 100%),
    url('images/toronto-bg.jpg') center bottom/cover no-repeat,
    linear-gradient(180deg,#eaf2fb,#cfe0f2);   /* fallback if image missing */
}
.tagline{color:var(--ccc-red);font-size:.75rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;}
.hero-title{font-size:clamp(2rem,4vw,3rem);line-height:1.15;}
.hero-text{font-size:1.02rem;line-height:1.7;max-width:420px;}
.check-list{list-style:none;padding:0;margin:1.5rem 0 0;}
.check-list li{display:flex;align-items:center;gap:.7rem;margin-bottom:.8rem;font-size:.92rem;color:var(--ccc-navy);}
.check-list i{color:var(--ccc-red);font-size:1.25rem;}

/* ---------- Auth card ---------- */
.auth-card{background:#fff;border-radius:10px;padding:2rem;box-shadow:0 12px 40px rgba(15,37,71,.12);max-width:480px;margin-left:auto;}
.auth-card h2{font-size:1.7rem;margin-bottom:.3rem;}
.auth-card .sub{font-size:.9rem;margin-bottom:1.5rem;}
.form-label{font-weight:500;font-size:.88rem;color:var(--ccc-navy);margin-bottom:.35rem;}
.form-label .req{color:var(--ccc-red);}
.input-group-text{background:#fff;border-color:var(--ccc-border);color:var(--ccc-navy);border-right:0;}
.input-group .form-control,.input-group .form-select{border-color:var(--ccc-border);border-left:0;font-size:.88rem;padding:.7rem .75rem;}
.input-group .form-control::placeholder{color:#9aa5b5;}
.input-group .toggle-pass{background:#fff;border:1px solid var(--ccc-border);border-left:0;color:var(--ccc-navy);}
.input-group:focus-within .input-group-text,
.input-group:focus-within .form-control,
.input-group:focus-within .form-select,
.input-group:focus-within .toggle-pass{border-color:var(--ccc-red);}
.form-control:focus,.form-select:focus{box-shadow:none;}
.input-group:focus-within{box-shadow:0 0 0 .2rem rgba(215,25,32,.15);border-radius:6px;}
.form-check-input:checked{background-color:var(--ccc-red);border-color:var(--ccc-red);}
.form-check-input:focus{box-shadow:0 0 0 .2rem rgba(215,25,32,.2);border-color:var(--ccc-red);}
.small-link{color:var(--ccc-red);font-weight:600;text-decoration:none;font-size:.85rem;}
.small-link:hover{text-decoration:underline;}
.btn-main{width:100%;padding:.85rem;font-size:1rem;}
.divider{display:flex;align-items:center;gap:1rem;font-size:.75rem;color:#8a95a5;margin:1.2rem 0;}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--ccc-border);}
.btn-google{width:100%;padding:.8rem;background:#fff;border:1px solid var(--ccc-border);color:var(--ccc-navy);font-weight:500;font-size:.92rem;border-radius:6px;display:flex;align-items:center;justify-content:center;gap:.6rem;}
.btn-google:hover{background:#f6f8fb;border-color:var(--ccc-navy);}
.switch-text{text-align:center;font-size:.85rem;margin:1.2rem 0 0;}

/* ---------- Footer ---------- */
.ccc-footer{background:#fff;border-top:1px solid #eef1f6;padding:1.5rem 0 1rem;}
.ccc-footer a{color:var(--ccc-navy);text-decoration:none;font-size:.8rem;}
.ccc-footer a:hover{color:var(--ccc-red);}
.footer-links a{margin:0 .8rem;}
.social a{font-size:1.2rem;margin-left:.9rem;}
.copy{font-size:.75rem;border-top:1px solid #eef1f6;margin-top:1rem;padding-top:.9rem;}

@media (max-width:991.98px){
  .auth-card{margin:2rem auto 0;}
  .hero-text{max-width:100%;}
}