:root{
  /* Stone & Sky light palette */
  --bg:#ffffff; /* page background */
  --surface:#ffffff; /* cards, panels */
  --muted:#6b7280; /* subdued text */
  --accent:#0A73FF; /* sky blue accent (CTA) */
  --stone:#BDB9B3; /* stone neutral */
  --stone-dark:#2b2b2b; /* charcoal for "Stone" */
  --text:#0f1724; /* primary text */
  --sky-deep:#0A4EA8; /* deep blue for "Sky" */
  --card-border:#e6eef7;
  --white:#ffffff;
  --container:1100px;
  --logo-line-width:20px;
  --logo-line-gap:6px;
  --logo-line-width-mobile:12px;
  --logo-line-gap-mobile:3px;
}
*, *::before, *::after { 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(--text); line-height:1.5}
.container{max-width:var(--container); margin:0 auto; padding:14px 12px}
.site-header{
  /* subtle stone -> sky gradient */
  background: linear-gradient(270deg,#f2efec 0%, #dfe8ef 50%, #eaf6ff 100%);
  border-bottom:1px solid var(--card-border);
}

.site-header .container{display:flex; align-items:center; justify-content:space-between; padding:0}
.logo{height:220px; width:auto; max-width:420px; object-fit:contain; display:block; background:transparent; border:0; padding:0;}
.logo-text{margin-left:12px; display:flex; flex-direction:column; align-items:center}
.logo-text .logo-name{font-family: 'Merriweather', Georgia, 'Times New Roman', Times, serif; font-size:2.6rem; font-weight:700; line-height:1; display:block; text-align:center}
.logo-text .logo-stone{color:var(--stone-dark)}
.logo-text .logo-sky{color:var(--sky-deep)}
.logo-text .amp{color:var(--sky-deep); margin:0 8px; font-style:italic}
.logo-text .logo-sub{display:inline-block; font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif; font-size:.82rem; letter-spacing:6px; font-weight:500; text-transform:uppercase; color:var(--muted); margin-top:6px; position:relative; padding:0 18px; text-align:center}
.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:var(--stone); opacity:0.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:2.5rem 0; text-align:center; position:relative; background-image:linear-gradient(180deg, rgba(255,255,255,0.6), rgba(255,255,255,0.6)), url('https://source.unsplash.com/featured/?students,study'); background-size:cover; background-position:center; color:var(--text); min-height:360px; display:flex; align-items:center}
.hero .container{position:relative; z-index:1}
.hero h2{font-size:2.25rem; margin:0 0 8px; font-weight:700}
.lead{color:var(--muted); max-width:780px; margin:0 auto 18px}
.btn{display:inline-block; padding:10px 16px; border-radius:8px; background:var(--white); color:var(--accent); text-decoration:none; border:1px solid var(--card-border)}
.btn.primary{background:var(--accent); color:var(--white); border:0}
.grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:18px; margin-top:18px}
.stats{text-align:center; padding:0px 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:1px;color:var(--muted); text-align:center}
.card{background:var(--surface); padding:18px; border-radius:10px; box-shadow:0 4px 12px rgba(15,23,36,0.04); border:1px solid var(--card-border)}
.event-card{background:var(--surface); 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:var(--surface); border:1px solid var(--card-border); padding:14px 16px; margin-bottom:6px; border-radius:8px; display:flex; justify-content:space-between; align-items:center; cursor:pointer; color:var(--text)}
.acc-panel{display:none; padding:10px 14px 18px; color:var(--text); background:var(--surface); border-radius:8px; margin-top:6px}
.testimonials blockquote{background:var(--surface); padding:14px; border-radius:8px; margin:10px 0; border:1px solid var(--card-border)}
.testimonials .testimonial{display:flex; align-items:flex-start; gap:12px; background:var(--surface); padding:14px; border-radius:8px; margin:10px 0; border:1px solid var(--card-border)}
.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(--text)}
.testimonials .testimonial cite{display:block; margin-top:8px; color:var(--muted); font-size:.9rem}
.site-footer{background:#f5f8fb; padding:22px 0; text-align:center; color:var(--text)}
.site-footer a{color:var(--accent)}
.site-footer{border-top:1px solid var(--card-border)}

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

/* Scrolling testimonials (right-to-left marquee) */
.testimonials{overflow:hidden; position:relative; padding:1rem 0}
.testimonials .testimonial-track{display:flex; gap:20px; align-items:flex-start; will-change:transform}
.testimonials .testimonial{flex:0 0 360px; display:flex; gap:12px; align-items:flex-start; background:var(--surface); border:1px solid var(--card-border); padding:12px; border-radius:8px}
.testimonials .testimonial img{width:72px; height:72px; flex:0 0 72px; border-radius:8px}
.testimonials .testimonial blockquote{margin:0; color:var(--text)}

@keyframes testimonials-scroll {
  from{transform:translateX(0)}
  to{transform:translateX(var(--scroll-end, -100%))}
}
.testimonials .testimonial-track{animation: testimonials-scroll var(--scroll-duration, 30s) linear infinite}

/* Pause animation on hover for accessibility */
.testimonials .testimonial-track:hover{animation-play-state:paused}

@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:var(--surface); border-radius:10px; box-shadow:0 8px 28px rgba(15,23,36,0.06); flex-direction:column; overflow:hidden; margin-top:10px; display:none}
.chat-header{padding:12px; background:#fff; border-bottom:1px solid var(--card-border); display:flex; justify-content:space-between; align-items:center}
.chat-log{padding:12px; overflow:auto; flex:1; font-size:.95rem; color:var(--text)}
.chat-form{display:flex; padding:8px; border-top:1px solid var(--card-border)}
.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:0; 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}
}

/* Laptop layout: show offerings in 3 columns (two rows for six items) */
@media (min-width:900px) and (max-width:1400px) {
  #offerings .grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }
}

/* Larger desktops: keep three columns but allow wider gaps */
@media (min-width:1400px) {
  #offerings .grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
  }
}