/* --------- Design Tokens - Harmonious Cream Theme --------- */
:root{
  --bg:#f4ede4;           /* Warm cream background */
  --panel:#fdfaf7;        /* Soft cream panels */
  --panel-2:#f9f4ee;      /* Light cream */
  --glass: rgba(251, 247, 242, 0.75); /* Glassmorphism base */
  --text:#4a3f36;         /* Warm dark brown text */
  --muted:#8b7c6f;        /* Soft muted brown */
  --red:#c26b5c;          /* Terracotta red */
  --accent:#b8765f;       /* Warm terracotta accent */
  --accent-2:#cd8e78;     /* Soft coral */
  --accent-3:#daa59a;     /* Light peach */
  --ok:#7c9885;           /* Sage green */
  --shadow: 0 10px 30px rgba(74, 63, 54, .06), 0 4px 12px rgba(74, 63, 54, .04);
  --glass-shadow: 0 8px 32px rgba(74, 63, 54, .08);
  --radius: 16px;
}

/* --------- Reset --------- */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:'Playfair Display', 'Crimson Text', Georgia, serif;
  color:var(--text);
  background:
    radial-gradient(circle at 20% 30%, rgba(184, 118, 95, .08), transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(205, 142, 120, .06), transparent 50%),
    radial-gradient(circle at 50% 50%, rgba(251, 247, 242, .4), transparent 70%),
    linear-gradient(135deg, #f4ede4 0%, #f8f2ea 50%, #f0e8de 100%);
  scroll-behavior:smooth;
  font-weight: 400;
  letter-spacing: 0.02em;
}
img{max-width:100%;display:block}

/* Containers */
.container{width:min(1200px, 92%); margin-inline:auto}

/* --------- Header with Glassmorphism --------- */
.site-header{
  position:sticky; top:0; z-index:30;
  background: var(--glass);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  border-bottom:1px solid rgba(184, 118, 95, .1);
  box-shadow: 0 2px 20px rgba(74, 63, 54, .05);
}
.header-inner{
  display:flex; align-items:center; gap:16px; padding:16px 0;
}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none; color:inherit}
.brand-mark{
  width:40px; height:40px; border-radius:12px; object-fit:cover; 
  background: linear-gradient(135deg, rgba(255,255,255,.9), rgba(255,255,255,.6));
  backdrop-filter: blur(10px);
  border: 1px solid rgba(184, 118, 95, .15);
  box-shadow: 0 4px 12px rgba(74, 63, 54, .08);
}
.brand-title{font-weight:700; letter-spacing:.02em; font-size: 18px;}
.brand-sub{font-size:12px; color:var(--muted); font-style: italic;}

.nav{margin-left:auto; display:flex; align-items:center; gap:18px}
.nav-list{display:flex; list-style:none; gap:18px; margin:0; padding:0}
.nav-list a{
  color:var(--text); text-decoration:none; padding:10px 14px; 
  border-radius:12px; transition:all .3s ease;
  font-weight: 500;
  position: relative;
}
.nav-list a:hover{
  background: rgba(184, 118, 95, .08); 
  transform:translateY(-1px);
}

.nav-toggle{display:none; background:none; border:0; padding:8px; cursor:pointer}
.nav-toggle span{display:block; width:24px; height:2px; background:var(--text); margin:5px 0; border-radius: 2px;}

/* Header socials with glass effect */
.header-socials{display:flex; gap:10px}
.social{
  display:inline-flex; align-items:center; justify-content:center; 
  width:36px; height:36px; border-radius:12px; 
  background: rgba(255,255,255,.5);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(184, 118, 95, .1);
  color:var(--text); text-decoration:none; 
  transition:all .3s ease;
}
.social:hover{
  transform:translateY(-2px) scale(1.05); 
  background: rgba(184, 118, 95, .1);
  box-shadow: 0 6px 20px rgba(74, 63, 54, .1);
}
.social.big{width:44px;height:44px;border-radius:14px;font-size:20px}

/* --------- Hero --------- */
.hero{position:relative; min-height:72vh; display:grid; align-items:center}
.hero-media{position:absolute; inset:0; overflow:hidden; z-index:-1}
.hero-img{width:100%; height:100%; object-fit:cover; filter:brightness(1.05) contrast(0.95) saturate(0.9); transform:scale(1.03)}
.hero-overlay{
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse at top left, rgba(184, 118, 95, .12), transparent 40%),
    radial-gradient(ellipse at bottom right, rgba(205, 142, 120, .10), transparent 45%),
    linear-gradient(180deg, rgba(244, 237, 228, .88) 0%, rgba(249, 244, 238, .75) 50%, rgba(244, 237, 228, .92) 100%);
}
.hero-content{padding:96px 0 72px}
.hero h1{
  font-size:clamp(36px, 4.5vw + 8px, 64px); 
  line-height:1.1; margin:0 0 16px; 
  font-weight: 700;
  text-shadow: 0 2px 8px rgba(74, 63, 54, .08);
}
.hero p{
  max-width:720px; color:var(--muted); font-size:19px; 
  line-height: 1.7; font-weight: 400;
}
.hero-cta{display:flex; gap:14px; margin-top:24px}
.badge{
  display:inline-block; padding:10px 14px; 
  background: rgba(255,255,255,.4);
  backdrop-filter: blur(8px);
  border:1px solid rgba(184, 118, 95, .12); 
  border-radius:999px; font-size:13px;
  font-weight: 500;
}
.hero-badges{display:flex; gap:10px; margin-top:18px}

/* Buttons with glass effects */
.btn{
  display:inline-block; padding:14px 24px; border-radius:14px; 
  text-decoration:none; font-weight:600; 
  border:1px solid transparent; 
  transition:all .3s cubic-bezier(0.4, 0, 0.2, 1);
  font-size: 15px;
  letter-spacing: 0.02em;
}
.btn-primary{
  background:linear-gradient(135deg, var(--accent), var(--accent-2)); 
  box-shadow: 0 10px 30px rgba(184, 118, 95, .2), inset 0 1px 0 rgba(255,255,255,.2); 
  color:#fff;
  border: 1px solid rgba(255,255,255,.1);
}
.btn-primary:hover{
  transform:translateY(-2px) scale(1.02); 
  box-shadow: 0 14px 35px rgba(184, 118, 95, .25), inset 0 1px 0 rgba(255,255,255,.3);
}
.btn-ghost{
  background: rgba(255,255,255,.3);
  backdrop-filter: blur(10px);
  color:var(--text); 
  border:1px solid rgba(184, 118, 95, .15);
}
.btn-ghost:hover{
  background: rgba(255,255,255,.5);
  transform:translateY(-1px);
}

/* Sections */
.section{padding:80px 0}
.section.alt{
  background: linear-gradient(135deg, rgba(255,255,255,.3) 0%, rgba(251, 247, 242,.2) 100%);
  backdrop-filter: blur(2px);
}
.section-head{margin-bottom:32px}
.section h2{
  font-size:36px; margin:0 0 8px; 
  font-weight: 600; letter-spacing: -0.01em;
}
.section-head p{color:var(--muted); font-size: 17px; line-height: 1.6;}

/* Cards with glass morphism */
.cards{display:grid; grid-template-columns:repeat(3, 1fr); gap:20px}
.card{
  background: linear-gradient(135deg, rgba(253, 250, 247, .85), rgba(255, 255, 255, .75));
  backdrop-filter: blur(10px) saturate(180%);
  border:1px solid rgba(184, 118, 95, .08); 
  border-radius:var(--radius); 
  overflow:hidden; 
  box-shadow: var(--glass-shadow);
  display:flex; flex-direction:column;
  transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
}
.card:hover{
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(74, 63, 54, .12);
  background: linear-gradient(135deg, rgba(255, 255, 255, .95), rgba(253, 250, 247, .85));
}
.card img{
  aspect-ratio: 4/3; object-fit:cover; 
  filter:brightness(1.02) contrast(0.98) saturate(0.95);
}
.card-body{padding:20px}
.card h3{
  margin:0 0 8px; font-size:22px; 
  font-weight: 600; letter-spacing: -0.01em;
}
.card p{color:var(--muted); margin:0; line-height: 1.6;}

/* Schedule */
.schedule .legend{
  display:flex; gap:16px; align-items:center; 
  margin-bottom:16px; color:var(--muted); font-size:14px;
  padding: 12px 16px;
  background: rgba(255,255,255,.3);
  backdrop-filter: blur(8px);
  border-radius: 12px;
  border: 1px solid rgba(184, 118, 95, .06);
}
.dot{display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:8px; transform:translateY(1px)}
.dot-kids{background:#7c9885}.dot-teens{background:#6b8fa3}.dot-sd{background:#d4a574}.dot-private{background:#9b7e91}

.table-wrap{
  background: linear-gradient(135deg, rgba(253, 250, 247, .9), rgba(255, 255, 255, .8));
  backdrop-filter: blur(10px);
  border:1px solid rgba(184, 118, 95, .08); 
  border-radius:var(--radius); 
  overflow:auto; 
  box-shadow: var(--glass-shadow);
}
.table{width:100%; border-collapse:collapse; min-width:720px}
.table th,.table td{
  padding:16px 18px; 
  border-bottom:1px solid rgba(184, 118, 95, .06); 
  text-align:left;
  font-weight: 400;
}
.table thead th{
  position:sticky; top:0; 
  background: linear-gradient(135deg, rgba(249, 244, 238, .98), rgba(253, 250, 247, .95));
  backdrop-filter: blur(8px);
  z-index:1; 
  border-bottom:2px solid rgba(184, 118, 95, .12);
  font-weight: 600;
  color: var(--text);
}
.table tbody tr{transition: all .2s ease;}
.table tbody tr:hover{
  background: rgba(184, 118, 95, .03);
}
.table td.kids{color:#7c9885}.table td.teens{color:#6b8fa3}.table td.sd{color:#d4a574}.table td.private{color:#9b7e91}.table td.adults{color:#7a8ba7}

/* Trial */
.trial{
  display:grid; grid-template-columns:1.1fr .9fr; gap:24px; align-items:center; 
  background: linear-gradient(135deg, rgba(184, 118, 95, .06), rgba(255,255,255,.4));
  backdrop-filter: blur(8px);
  padding:28px; 
  border-radius:var(--radius); 
  border:1px solid rgba(184, 118, 95, .08);
  box-shadow: var(--glass-shadow);
}
.trial .price{color:var(--accent); font-size: 24px; font-weight: 600;}
.checks{list-style:none; padding:0; margin:16px 0 20px; display:grid; gap:10px}
.checks li{display:flex; gap:10px; align-items:center}
.checks i{color:var(--ok)}

/* Contact */
.contact-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:24px}
.contact-form{
  background: linear-gradient(135deg, rgba(253, 250, 247, .9), rgba(255, 255, 255, .8));
  backdrop-filter: blur(10px);
  border:1px solid rgba(184, 118, 95, .08); 
  padding:24px; 
  border-radius:var(--radius); 
  box-shadow: var(--glass-shadow);
}
.field{display:grid; gap:10px; margin-bottom:14px}
input, textarea{
  background: rgba(255,255,255,.6);
  backdrop-filter: blur(5px);
  border:1px solid rgba(184, 118, 95, .1); 
  border-radius:12px; 
  padding:14px 16px; 
  color:var(--text); 
  outline:none;
  transition: all .3s ease;
  font-family: inherit;
  font-size: 15px;
}
input:focus, textarea:focus{
  border-color: var(--accent-2);
  background: rgba(255,255,255,.8);
  box-shadow: 0 0 0 4px rgba(184, 118, 95, .05);
}
.tiny{color:var(--muted); font-size:13px; font-style: italic;}
.link{color:var(--accent); text-decoration:underline dotted}
.contact-info{display:grid; gap:18px}
.info-block{
  background: linear-gradient(135deg, rgba(253, 250, 247, .85), rgba(255, 255, 255, .75));
  backdrop-filter: blur(8px);
  border:1px solid rgba(184, 118, 95, .08); 
  padding:20px; 
  border-radius:var(--radius);
  box-shadow: 0 4px 16px rgba(74, 63, 54, .05);
}
.map .map-placeholder{
  height:210px; 
  background: linear-gradient(135deg, rgba(184, 118, 95, .04), rgba(255,255,255,.3));
  backdrop-filter: blur(5px);
  border:1px dashed rgba(184, 118, 95, .15); 
  border-radius:12px; 
  display:grid; place-items:center; 
  color:var(--muted)
}

/* Footer */
.site-footer{
  padding:28px 0; 
  border-top:1px solid rgba(184, 118, 95, .08); 
  background: linear-gradient(135deg, rgba(249, 244, 238, .6), rgba(255,255,255,.3));
  backdrop-filter: blur(8px);
}
.footer-inner{display:flex; align-items:center; justify-content:space-between; gap:12px}
.site-footer nav{display:flex; gap:16px}
.site-footer a{color:var(--muted); text-decoration:none; transition: all .2s ease;}
.site-footer a:hover{color:var(--text); transform: translateX(2px);}

/* Responsive */
@media (max-width: 1000px){
  .cards{grid-template-columns:repeat(2, 1fr)}
  .trial{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
}
@media (max-width: 720px){
  .nav-toggle{display:block}
  .nav-list{
    position:fixed; 
    inset:60px 16px auto 16px; 
    background: linear-gradient(135deg, rgba(253, 250, 247, .95), rgba(255, 255, 255, .9));
    backdrop-filter: blur(12px);
    border:1px solid rgba(184, 118, 95, .08); 
    border-radius:14px; 
    padding:10px; 
    display:none; 
    flex-direction:column; 
    box-shadow: var(--glass-shadow);
  }
  .nav-list.show{display:flex}
  .header-socials{display:none}
  .cards{grid-template-columns:1fr}
  .hero-content{padding-top:80px}
}


.programs-highlight {
  background: linear-gradient(135deg, rgba(255,255,255,.5), rgba(249, 244, 238, .3));
  backdrop-filter: blur(3px);
  padding: 40px 0;
  text-align: center;
  border-top: 1px solid rgba(184, 118, 95, .08);
  border-bottom: 1px solid rgba(184, 118, 95, .08);
}

.programs-highlight h3 {
  margin: 0 0 12px;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.programs-highlight p {
  margin: 0;
  font-size: 16px;
  color: var(--muted);
  line-height: 1.6;
}

/* About Grandmaster layout */
.about-leader{
  display:grid; grid-template-columns: .9fr 1.1fr; gap:28px; align-items:center;
  padding: 40px;
  background: linear-gradient(135deg, rgba(253, 250, 247, .85), rgba(255, 255, 255, .75));
  backdrop-filter: blur(8px);
  border-radius: var(--radius);
  border: 1px solid rgba(184, 118, 95, .08);
  box-shadow: var(--glass-shadow);
}
.leader-photo img{
  width:100%; 
  border-radius:16px; 
  box-shadow: 0 12px 30px rgba(74, 63, 54, .1); 
  object-fit:cover;
  filter: brightness(1.02) contrast(0.98) saturate(0.95);
}
.leader-copy h2{
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 16px;
}
.leader-copy p{
  color:var(--muted); 
  margin:12px 0 0;
  line-height: 1.7;
}
.leader-copy .checks{
  list-style:none; 
  padding:0; 
  margin:20px 0; 
  display:grid; 
  gap:10px;
}
.leader-copy .checks li{
  display:flex; 
  gap:10px; 
  align-items:center;
  color: var(--text);
}
.leader-copy .checks i{
  color:var(--ok);
}
@media (max-width: 900px){
  .about-leader{
    grid-template-columns:1fr;
    padding: 24px;
  }
}

/* Tidy contact grid with no form */
.contact-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:22px}
@media (max-width: 1000px){
  .contact-grid{grid-template-columns:1fr}
}

/* Make logo larger and more banner-like */
.brand-logo {
  height: 60px;   /* adjust to taste, e.g., 70–80px if you want a real banner feel */
  width: auto;
  display: block;
  filter: brightness(1.05) contrast(0.98);
}

/* Align logo nicely with nav */
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between; /* logo left, nav center, socials right */
  gap: 16px;
  padding: 16px 0;
}

/* Optional: center nav and put logo truly in middle */
.site-header.centered .header-inner {
  justify-content: center;
}
.site-header.centered .brand-logo {
  margin: 0 auto;
}

/* ===== Schedule: layout with proper tab functionality ===== */
.sched-tabs{
  display:flex; gap:12px; margin:8px 0 16px;
  flex-wrap:wrap;
}
.sched-tab{
  padding:12px 18px;
  border-radius:12px;
  background: rgba(255,255,255,.3);
  backdrop-filter: blur(8px);
  border:1px solid rgba(184, 118, 95, .08);
  cursor:pointer;
  font-weight:600;
  color:var(--muted);
  transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
}
.sched-tab:hover{
  background: rgba(255,255,255,.5);
  transform:translateY(-2px);
  box-shadow: 0 6px 20px rgba(74, 63, 54, .08);
}
.sched-tab.is-active, .sched-tab.active{
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color:#fff;
  border-color:transparent;
  box-shadow: 0 10px 30px rgba(184, 118, 95, .2);
}

/* Legend styling */
.sched-legend{
  display:flex; gap:16px; align-items:center; 
  margin-bottom:16px; color:var(--muted); font-size:14px;
  padding: 12px 16px;
  background: rgba(255,255,255,.3);
  backdrop-filter: blur(8px);
  border-radius: 12px;
  border: 1px solid rgba(184, 118, 95, .06);
}
.lgd{display:flex; align-items:center;}

/* Schedule card wrapper */
.sched-card{
  background: transparent;
  border-radius: var(--radius);
  overflow: visible;
}

/* Panes container (tabs content) */
.sched-panes{ margin-top:20px; }
.sched-pane{ 
  display:none; 
  animation: fadeIn 0.3s ease-in-out;
}
.sched-pane.is-active, .sched-pane.active{ 
  display:block; 
}
.sched-pane[hidden] {
  display: none !important;
}

/* Animation for tab switch */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Note styling */
.note {
  margin-top: 20px;
  padding: 12px 16px;
  background: rgba(255,255,255,.2);
  backdrop-filter: blur(5px);
  border-radius: 10px;
  border: 1px solid rgba(184, 118, 95, .06);
  color: var(--muted);
  font-size: 14px;
  font-style: italic;
}

.tiny.muted {
  color: var(--muted);
  font-size: 12px;
  font-style: italic;
}

/* ===== BBC Classes Grid ===== */
.bbc-pane h3{
  font-size:30px; margin:0 0 18px; font-weight:600; letter-spacing:-0.01em;
}
.bbc-pane .bbc-grid{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:20px;
}

.bbc-card{
  background: linear-gradient(135deg, rgba(253, 250, 247, .85), rgba(255, 255, 255, .75));
  backdrop-filter: blur(10px) saturate(180%);
  border:1px solid rgba(184, 118, 95, .08);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow: var(--glass-shadow);
  transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
}
.bbc-card:hover{
  transform:translateY(-3px);
  box-shadow: 0 14px 35px rgba(74, 63, 54, .1);
  background: linear-gradient(135deg, rgba(255, 255, 255, .95), rgba(253, 250, 247, .85));
}

.bbc-card-head{
  padding:16px 18px;
  background: linear-gradient(135deg, rgba(184, 118, 95, .08), rgba(205, 142, 120, .05));
  border-bottom:1px solid rgba(184, 118, 95, .1);
}
.bbc-card-head .bbc-day{
  font-weight:700; text-transform:uppercase;
  letter-spacing:.08em; font-size:12px;
  color:var(--muted);
}
.bbc-card-head .bbc-title{
  font-size:19px; font-weight:600; margin:6px 0 2px;
  color:var(--text);
}

.bbc-card-body{
  padding:16px 18px;
}

.bbc-time{
  font-size:22px; font-weight:700; letter-spacing:.02em;
  color:var(--text); margin-bottom:6px;
}

.bbc-details{
  list-style:none; padding:0; margin:10px 0;
  display:grid; gap:8px;
  font-size:14px; color:var(--muted);
}
.bbc-details li{
  display:flex; align-items:center; gap:8px;
}
.bbc-details i{
  color:var(--accent);
}

/* Footer badge area */
.bbc-card-foot{
  padding:12px 18px;
  border-top:1px solid rgba(184, 118, 95, .06);
  background: rgba(255,255,255,.3);
  display:flex; gap:8px; align-items:center;
}
.bbc-card-foot .badge{
  font-size:12px;
  background: rgba(184, 118, 95, .06);
  color:var(--text);
  border: 1px solid rgba(184, 118, 95, .1);
  box-shadow: none;
  padding: 6px 12px;
  font-weight: 500;
}
@media (max-width: 1100px){
  .bbc-pane .bbc-grid{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px){
  .bbc-pane .bbc-grid{ grid-template-columns: 1fr; }
}
/* Extra badges for the second calendar */
.badge.bb{
  background: rgba(99, 102, 241, .08);
  color: #6366f1;
  border: 1px solid rgba(99, 102, 241, .2);
}
.badge.gup{
  background: rgba(214, 54, 56, .08);
  color: var(--accent-2);
  border: 1px solid rgba(214, 54, 56, .2);
}

/* === Boxed Column Schedule (shared by both tabs) === */
.sched-columns{
  display:grid;
  grid-template-columns: repeat(6, 1fr);
  gap:20px;
}

.day-col{
  background: linear-gradient(135deg, rgba(253, 250, 247, .9), rgba(255, 255, 255, .8));
  backdrop-filter: blur(10px);
  border:1px solid rgba(184, 118, 95, .08);
  border-radius: var(--radius);
  box-shadow: var(--glass-shadow);
  overflow:hidden;
  color: var(--text);
  transition: all .3s ease;
}
.day-col:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(74, 63, 54, .1);
}
.day-head{
  background: linear-gradient(135deg, rgba(184, 118, 95, .1), rgba(205, 142, 120, .08));
  color:var(--text);
  border-bottom:1px solid rgba(184, 118, 95, .12);
  padding:12px 14px;
  text-align:center;
  font-weight:700;
  letter-spacing:.12em;
  font-size:13px;
}
.day-body{
  padding:16px;
  display:flex;
  flex-direction:column;
  gap:14px;
  min-height:180px;
}

/* Time blocks */
.slot{
  background: rgba(255, 255, 255, .5);
  backdrop-filter: blur(5px);
  border:2px solid rgba(184, 118, 95, .15);
  border-radius:14px;
  padding:18px 14px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .8),
    0 6px 18px rgba(74, 63, 54, .06);
  transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
}
.slot:hover{
  border-color: rgba(184, 118, 95, .25);
  transform: translateY(-2px);
  background: rgba(255, 255, 255, .7);
}
.slot .time{
  font-size:21px; font-weight:700; letter-spacing:.02em;
  color: var(--text);
}
.slot .label{
  margin-top:6px; font-weight:600; letter-spacing:.08em; color:var(--muted);
}

/* Color variants with harmonious palette */
.slot.kids{   border-color: rgba(124, 152, 133, .3);  box-shadow:0 6px 18px rgba(124, 152, 133, .08); }
.slot.kids .time{ color:#7c9885; }
.slot.teens{  border-color: rgba(107, 143, 163, .3); box-shadow:0 6px 18px rgba(107, 143, 163, .08); }
.slot.teens .time{ color:#6b8fa3; }
.slot.all{    border-color: rgba(212, 165, 116, .3); box-shadow:0 6px 18px rgba(212, 165, 116, .08); }
.slot.all .time{ color:#d4a574; }
/* BBC extras */
.slot.bb{     border-color: rgba(155, 126, 145, .3); box-shadow:0 6px 18px rgba(155, 126, 145, .08); }
.slot.bb .time{ color:#9b7e91; }
.slot.gup{    border-color: rgba(184, 118, 95, .3);  box-shadow:0 6px 18px rgba(184, 118, 95, .08); }
.slot.gup .time{ color:var(--accent); }

/* Responsive columns */
@media (max-width: 1100px){ .sched-columns{ grid-template-columns: repeat(3, 1fr);} }
@media (max-width: 640px){  .sched-columns{ grid-template-columns: 1fr; } }

/* ===== Head Instructor (theme-matched) ===== */
.instructor{
  position: relative;
  padding: 80px 0;
  background:
    radial-gradient(ellipse at 20% 30%, rgba(184, 118, 95, .08), transparent 45%),
    radial-gradient(ellipse at 80% 70%, rgba(205, 142, 120, .06), transparent 45%),
    linear-gradient(135deg, rgba(249, 244, 238, .6) 0%, rgba(253, 250, 247, .8) 100%);
  overflow: hidden;
}

.instructor::before,
.instructor::after{
  content:"";
  position:absolute; pointer-events:none; filter:blur(30px); opacity:.5;
}
.instructor::before{
  top:-80px; left:-100px; width:360px; height:360px; border-radius:50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  transform: rotate(15deg);
  opacity: .06;
}
.instructor::after{
  bottom:-90px; right:-90px; width:380px; height:240px; border-radius:50%;
  background: linear-gradient(135deg, rgba(255,255,255,.6), rgba(184, 118, 95, .1));
  border:1px solid rgba(184, 118, 95, .08);
  opacity:.3;
}

.instructor-wrap{
  display:grid;
  grid-template-columns: .95fr 1.05fr;
  gap: 32px;
  align-items: center;
}

.instructor-photo{
  display:grid; place-items:center;
}
.instructor-photo img{
  width: 100%;
  max-width: 420px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 50%;
  box-shadow: 
    0 20px 40px rgba(74, 63, 54, .12),
    0 0 0 12px rgba(255, 255, 255, .4),
    0 0 0 13px rgba(184, 118, 95, .08);
  filter: brightness(1.02) contrast(0.98) saturate(0.95);
}

/* Title + highlight */
.instructor-title{
  margin:0;
  font-size: clamp(32px, 3.8vw, 58px);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.1;
}
.instructor-title .hl{
  position: relative;
  z-index: 0;
  display:inline-block;
  padding: 0 .2em;
  color: #fff;
}
.instructor-title .hl::before{
  content:"";
  position:absolute; inset:.4em 0 -.2em 0; z-index:-1;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  opacity:.95;
  box-shadow: 0 8px 24px rgba(184, 118, 95, .25);
}

.instructor .subtitle{
  margin:.4rem 0 1.2rem 0;
  font-weight:600; color: var(--muted); 
  letter-spacing:.02em;
  font-size: 17px;
}

.instructor .lead{
  color: var(--text);
  font-size: 19px;
  line-height: 1.7;
  margin: 0 0 12px;
  font-weight: 400;
}

.instructor-copy p{
  color: var(--muted);
  margin: 10px 0 0;
  line-height: 1.6;
}

/* Contact line */
.instructor-contact{
  margin-top: 20px;
  display:flex; align-items:center; gap:12px;
  background: rgba(255,255,255,.4);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(184, 118, 95, .1);
  padding: 12px 16px; 
  border-radius: 14px; 
  width:max-content;
  box-shadow: 0 4px 12px rgba(74, 63, 54, .05);
}
.instructor-contact a{
  color:var(--accent); 
  text-decoration: none;
  font-weight: 500;
}
.instructor-contact a:hover{ 
  text-decoration: underline; 
}

/* Responsive */
@media (max-width: 980px){
  .instructor-wrap{ grid-template-columns: 1fr; }
  .instructor-photo img{ max-width: 360px; margin-inline:auto; }
  .instructor-title{ text-align:left; }
}

.hero-media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: -1;
}

.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Overlay to control opacity/darkness */
.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.25); /* Light overlay for better text readability on beige */
}
/* Header readability above busy hero */
.site-header {
  background: rgba(255,255,255,0.9);
  backdrop-filter: saturate(120%) blur(6px);
  -webkit-backdrop-filter: saturate(120%) blur(6px);
}

/* Hero base */
.hero{
  position: relative;
  min-height: clamp(520px, 75vh, 820px);
  display: grid;
  align-items: center;
  overflow: hidden;
}
.hero-media{position: absolute; inset:0;}
.hero-img{
  width:100%; height:100%; object-fit: cover;
  filter: contrast(0.9) saturate(0.95) brightness(0.85);
}
.hero-overlay-strong{
  position:absolute; inset:0;
  /* Dark, angled gradient with a little vignette */
  background:
    radial-gradient(120% 80% at 50% 100%, rgba(0,0,0,.55) 0%, rgba(0,0,0,.72) 70%, rgba(0,0,0,.78) 100%),
    linear-gradient(20deg, rgba(0,0,0,.65), rgba(0,0,0,.35) 55%, rgba(0,0,0,.55));
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

/* Content container */
.hero-content{
  position: relative; z-index: 2;
  display: grid; place-items: start;
}

/* Frosted card behind text */
.hero-card{
  max-width: 980px;
  padding: clamp(20px, 3.5vw, 36px);
  border-radius: 16px;
  background: rgba(16,16,16,0.28);
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 18px 60px rgba(0,0,0,.35);
  backdrop-filter: blur(8px) saturate(115%);
  -webkit-backdrop-filter: blur(8px) saturate(115%);
  color: #fff;
}

/* Headline & tagline */
.hero-card h1{
  color:#fff;
  font-weight: 800;
  font-size: clamp(2.2rem, 4.8vw, 4.4rem);
  line-height: 1.05;
  letter-spacing: .2px;
  text-shadow: 0 2px 12px rgba(0,0,0,.45);
  margin: 0 0 .6rem;
}
.hero-card p{
  color: #f2f2f2;
  font-size: clamp(1.05rem, 1.2vw + .6rem, 1.35rem);
  line-height: 1.55;
  font-weight: 600;
  margin: 0 0 1.2rem;
  text-shadow: 0 1px 8px rgba(0,0,0,.35);
}

/* Buttons – higher contrast on dark */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding: .85rem 1.15rem; border-radius: 12px; font-weight:700;
  border: 1px solid transparent; transition: transform .06s ease, opacity .2s ease;
}
.btn-primary{
  background: #f2a38f; /* warm accent that reads on dark */
  color:#231a16;
  border-color: rgba(0,0,0,.2);
}
.btn-primary:hover{ transform: translateY(-1px); }
.btn-ghost{
  background: rgba(255,255,255,.12);
  color:#fff; border-color: rgba(255,255,255,.28);
}
.btn-ghost:hover{ background: rgba(255,255,255,.18); transform: translateY(-1px); }

.hero-cta{ display:flex; gap:.75rem; margin: .6rem 0 1rem; flex-wrap: wrap; }

/* Badges on dark */
.hero-badges{ display:flex; gap:.5rem; flex-wrap: wrap; }
.badge{
  background: rgba(255,255,255,.14);
  color:#fff; border:1px solid rgba(255,255,255,.22);
  padding:.45rem .7rem; border-radius: 999px; font-weight:600; font-size:.9rem;
}

/* Keep big logo without crowding */
.brand-logo{height:72px; max-height:72px}
@media (max-width: 768px){
  .brand-logo{height:56px; max-height:56px}
  .hero-card{ padding: 18px; }
}

/* Slightly compress hero on very small screens so content stays in view */
@media (max-width:520px){
  .hero{ min-height: 68vh; }
  .hero-card h1{ font-size: clamp(1.9rem, 8vw, 2.6rem); }
}
/* Move the frosted hero card left a bit */
.hero-card{
  /* gentle, responsive nudge left; adjust the max (-72px) to taste */
  margin-left: clamp(-8px, -3.5vw, -72px);
}

/* Keep it centered on small screens for readability */
@media (max-width: 720px){
.hero-card{ margin-left: 0; }
}
.header-inner {
  display: flex;
  align-items: center;   /* vertical centering */
  justify-content: space-between;
}

/* Map section styling */
.map-section {
  grid-column: 1 / -1;
}
.visit-address {
  margin: 0 0 12px;
  font-size: 14px;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 8px;
}
.visit-address i {
  color: var(--accent);
}

/* Secondary button - visible alternative to ghost */
.btn-secondary {
  background: var(--text);
  color: #fff;
  border: 1px solid var(--text);
}
.btn-secondary:hover {
  background: #3a332b;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(74, 63, 54, .2);
}

/* Contact section layout */
.contact-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: start;
}

.contact-form-wrap .contact-form {
  background: linear-gradient(135deg, rgba(253, 250, 247, .95), rgba(255, 255, 255, .9));
  backdrop-filter: blur(10px);
  border: 1px solid rgba(184, 118, 95, .08);
  padding: 28px;
  border-radius: var(--radius);
  box-shadow: var(--glass-shadow);
}

.contact-form label {
  font-weight: 600;
  font-size: 14px;
  color: var(--text);
  margin-bottom: 6px;
  display: block;
}

.contact-info-side {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.map-section-side {
  margin-top: 8px;
}

@media (max-width: 900px) {
  .contact-layout {
    grid-template-columns: 1fr;
  }
  .contact-info-side {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }
  .map-section-side {
    grid-column: 1 / -1;
  }
}

@media (max-width: 640px) {
  .contact-info-side {
    grid-template-columns: 1fr;
  }
}