:root{
  --bg:#000; --muted:#ccc; --accent:#ff6b35; --white:#fff; --container:1100px;
  --logo-line-width:20px;
  --logo-line-gap:8px; /* approximate single space gap */
  --logo-line-width-mobile:12px;
  --logo-line-gap-mobile:6px;
}
*{box-sizing:border-box}
body{font-family:Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; margin:0; background:var(--bg); color:var(--white); line-height:1.5}
.container{max-width:var(--container); margin:0 auto; padding:28px}
.site-header{background:#111; border-bottom:1px solid #333}
.site-header .container{display:flex; align-items:center; justify-content:space-between}
.logo{height:156px; width:auto; max-width:650px; object-fit:contain; display:block; background:transparent; background-color:transparent; border:0; padding:0;}
.logo-text{margin-left:12px; display:flex; flex-direction:column; align-items:center}
.logo-text .logo-name{font-family: Georgia, 'Times New Roman', Times, serif; font-size:2.6rem; font-weight:700; line-height:1; display:block}
.logo-text .logo-stone{color:#4a4a4a}
.logo-text .logo-sky{color:#1f4f78}
.logo-text .amp{color:#1f4f78; margin:0 8px}
.logo-text .logo-sub{display:inline-block; font-size:.85rem; letter-spacing:6px; text-transform:uppercase; color:#8b8b8b; margin-top:6px; position:relative; padding:0 var(--logo-line-gap)}
.logo-text .logo-sub::before,
.logo-text .logo-sub::after{content:""; position:absolute; top:50%; transform:translateY(-50%); height:2px; width:var(--logo-line-width); background:#8b8b8b; opacity:.95}
.logo-text .logo-sub::before{left:calc(-1 * (var(--logo-line-width) + var(--logo-line-gap)))}
.logo-text .logo-sub::after{right:calc(-1 * (var(--logo-line-width) + var(--logo-line-gap)))}

/* Header alignment for logo + text */
h1{display:flex; align-items:center; gap:12px; margin:0}
nav a{margin-left:18px; color:var(--muted); text-decoration:none}
nav a.cta{background:var(--accent); color:var(--white); padding:8px 12px; border-radius:8px}
.hero{padding:80px 0; text-align:center; position:relative; background-image:linear-gradient(rgba(0,0,0,0.45), rgba(0,0,0,0.45)), url('https://source.unsplash.com/featured/?students,study'); background-size:cover; background-position:center; color:var(--white); min-height:320px; display:flex; align-items:center}
.hero .container{position:relative; z-index:1}
.hero h2{font-size:3rem; margin:0 0 8px; font-weight: bold}
.lead{color:var(--muted); max-width:780px; margin:0 auto 18px}
.btn{display:inline-block; padding:10px 16px; border-radius:8px; background:#eef2ff; color:var(--accent); text-decoration:none}
.btn.primary{background:var(--accent); color:var(--white)}
.grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:18px; margin-top:18px}
.stats{text-align:center; padding:40px 0}
.stats .grid{display:flex; gap:28px; justify-content:center; align-items:center}
.stat{font-size:2rem; font-weight:bold; margin:0; display:flex; align-items:center; gap:12px; background:transparent; padding:8px 12px}
.stat img{width:56px; height:56px; object-fit:contain; display:block}
.stats-note{margin-top:18px;color:var(--muted); text-align:center}
.card{background:#111; padding:18px; border-radius:10px; box-shadow:0 1px 4px rgba(255,255,255,.1)}
.event-card{background:#111; padding:18px; border-radius:8px}

/* Offering card images */
.card img{width:100%; height:160px; object-fit:cover; border-radius:8px; display:block; margin-bottom:12px}
.booking{display:block}
.booking-actions a{margin-right:12px}
.faq .accordion{margin-top:10px}
.acc-item{width:100%; text-align:left; background:#111; border:0; padding:14px 16px; margin-bottom:6px; border-radius:8px; display:flex; justify-content:space-between; align-items:center; cursor:pointer; color:var(--accent)}
.acc-panel{display:none; padding:10px 14px 18px; color:var(--white); background:#222; border-radius:8px; margin-top:6px}
.testimonials blockquote{background:#111; padding:14px; border-radius:8px; margin:10px 0}
.testimonials .testimonial{display:flex; align-items:flex-start; gap:12px; background:#111; padding:14px; border-radius:8px; margin:10px 0}
.testimonials .testimonial img{width:64px; height:64px; border-radius:50%; object-fit:cover; flex:0 0 64px}
.testimonials .testimonial blockquote{background:transparent; padding:0; margin:0; color:var(--white)}
.testimonials .testimonial cite{display:block; margin-top:8px; color:var(--muted); font-size:.9rem}
.site-footer{background:#1f4f78; padding:22px 0; text-align:center; color:var(--white)}
.site-footer a{color:var(--white)}
.site-footer{border-top:1px solid rgba(255,255,255,0.04)}

/* Contact section - match footer background for consistency */
.contact{background:#1f4f78; color:var(--white); padding:22px; border-radius:8px; margin-top:18px}
.contact p, .contact h3{color:var(--white)}
.contact a{color:var(--white); text-decoration:underline}

@media (max-width:720px){
  .contact{padding:16px}
}

/* Chat widget */
.chat-widget{position:fixed; right:18px; bottom:18px; z-index:999}
.chat-open{background:var(--accent); color:var(--white); border:0; padding:10px 14px; border-radius:999px}
.chat-box{width:320px; max-width:90vw; height:420px; background:#111; border-radius:10px; box-shadow:0 8px 28px rgba(255,255,255,.12); flex-direction:column; overflow:hidden; margin-top:10px; display:none}
.chat-header{padding:12px; background:#222; border-bottom:1px solid #333; display:flex; justify-content:space-between; align-items:center}
.chat-log{padding:12px; overflow:auto; flex:1; font-size:.95rem}
.chat-form{display:flex; padding:8px; border-top:1px solid #f1f5f9}
.chat-form input{flex:1; padding:8px; border-radius:8px; border:1px solid #e6eef6}
.chat-form button{margin-left:8px; background:var(--accent); color:white; border:0; padding:8px 12px; border-radius:8px}

@media (max-width:720px){
  .site-header .container{padding:12px; flex-direction:column; align-items:center}
  .hero h2{font-size:2rem}
  .stat{font-size:1.5rem}
  .logo-text{font-size:1.5rem}
  .logo-name{font-size:1.25rem}
  .logo-sub{font-size:.72rem; letter-spacing:4px}
  .logo-sub::before{width:var(--logo-line-width-mobile); left:calc(-1 * (var(--logo-line-width-mobile) + var(--logo-line-gap-mobile)));}
  .logo-sub::after{width:var(--logo-line-width-mobile); right:calc(-1 * (var(--logo-line-width-mobile) + var(--logo-line-gap-mobile)));}
  .logo{height:104px; max-width:286px}
  h1{display:flex; flex-direction:column; align-items:center; margin:0}
  .stats .grid{flex-direction:column; gap:12px}
  .stats-note{margin-top:10px; font-size:.95rem}
  nav{display:flex; justify-content:center; margin-top:10px}
  nav a{margin:0 10px}
}