@font-face {
  font-family: 'Inter';
  src: url('fonts/Inter-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root{
  /* Swiss private-school palette: deep green + restrained gold */
  --dark-green:#083127;
  --deep-green:#0d3f33;
  --gold:#d6b56d;        /* light gold */
  --gold-2:#ead9b5;      /* very soft gold */
  --ink:#0b1220;
  --muted:#5f6b75;

  /* Canvas */
  --bg:#ffffff;
  --bg-soft:#fbfbf8;

  /* UI */
  --line: rgba(11,18,32,.10);
  --shadow: 0 10px 26px rgba(11,18,32,.06);
  --radius: 16px;
  --max: 1120px;

  /* Type */
  --font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI Variable",
               "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji",
               "Segoe UI Emoji";
  --font: 'Inter', var(--font-sans);
  --font-serif: ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
}

*{box-sizing:border-box}
html{font-size:16px}
body{
  margin:0;
  font-family: var(--font);
  background:
    radial-gradient(900px 520px at 10% 0%, rgba(214,181,109,.12), transparent 60%),
    radial-gradient(900px 520px at 90% 0%, rgba(13,63,51,.10), transparent 60%),
    linear-gradient(180deg, var(--bg-soft), var(--bg) 52%);
  color: var(--ink);
  line-height:1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
.wrap{max-width:var(--max); margin:auto; padding:0 20px;}

/* Header: slimmer, institutional */
header{
  background: rgba(8,49,39,.96);
  color: white;
  padding: 10px 0;
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.navbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  min-width: 240px;
  text-decoration:none;
  color:white;
}
/* .brand img{
  width:42px;height:42px;border-radius:50%;
  background:white; padding:4px;
}*/
.brand img {
  width: auto;
  height: 70px; /* Changed from 42px to maintain aspect ratio */
  border-radius: 0; /* This removes the circle shape */
  background: transparent; /* Removes the white background fill */
  padding: 0; /* Removes the extra space around the logo */
}
.brand strong{
  display:block;
  font-size:14px;
  letter-spacing:.18px;
  font-weight:750;
}
.brand span{
  display:block;
  font-size:12px;
  opacity:.86
}

/* Desktop menu */
.menu{
  display:flex;
  gap:4px;
  align-items:center;
  flex-wrap:wrap;
}
.menu a, .dropbtn{
  color:white;
  text-decoration:none;
  font-size:13px;
  padding: 9px 11px;
  border-radius: 999px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  cursor:pointer;
  user-select:none;
  letter-spacing: .12px;
  opacity: .94;
}
.menu a:hover, .drop:hover > .dropbtn{
  background: rgba(234,217,181,.14);
  text-decoration:none;
  opacity: 1;
}

.drop{position:relative;}
.drop::after{content:""; position:absolute; left:0; right:0; top:100%; height:12px;}
.dropdown{
  position:absolute;
  top:100%;
  left:0;
  min-width: 260px;
  background: white;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 8px;
  z-index: 1000;

  /* Stable hover: no flicker when moving into submenu */
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .16s ease, transform .16s ease, visibility 0s linear .16s;
  pointer-events: none;
}
.drop:hover > .dropdown,
.drop:focus-within > .dropdown{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s;
  pointer-events: auto;
}
.dropdown a{
  display:block;
  color: var(--ink);
  padding: 10px 10px;
  border-radius: 10px;
  font-size: 13px;
  letter-spacing: .10px;
}
.dropdown a:hover{background: rgba(8,49,39,.06);}

/* CTA: understated */
.cta{display:flex; gap:10px; align-items:center;}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 10px 15px;
  border-radius:999px;
  font-weight:700;
  text-decoration:none;
  font-size:13px;
  white-space:nowrap;
  letter-spacing:.12px;
}
.btn.primary{
  background: var(--gold);
  color:#111;
  box-shadow: 0 10px 22px rgba(214,181,109,.20);
}
.btn.primary:hover{filter: brightness(.985); text-decoration:none}
.btn.ghost{
  border:1px solid rgba(255,255,255,.40);
  color:white;
  background: rgba(255,255,255,.04);
}
.btn.ghost:hover{background: rgba(255,255,255,.10); text-decoration:none}

/* Hamburger */
.hamburger{
  display:none;
  width:44px;height:44px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.32);
  background: rgba(255,255,255,.05);
  color: white;
  cursor:pointer;
  align-items:center;
  justify-content:center;
}
.hamburger:focus{outline: 3px solid rgba(214,181,109,.55); outline-offset: 2px;}
.bars{width:18px;height:12px; position:relative;}
.bars span{position:absolute; left:0; right:0; height:2px; background:white; border-radius: 2px;}
.bars span:nth-child(1){top:0}
.bars span:nth-child(2){top:5px; opacity:.9}
.bars span:nth-child(3){bottom:0}

/* Mobile drawer: premium */
.drawer{display:none; position:fixed; inset: 0; z-index: 80;}
.drawer.open{display:block;}
.drawer-backdrop{position:absolute; inset:0; background: rgba(11,18,32,.55);}
.drawer-panel{
  position:absolute;
  top:0; right:0;
  width: min(92vw, 360px);
  height: 100%;
  background: rgba(8,49,39,.98);
  color:white;
  padding: 16px;
  overflow:auto;
  border-left: 1px solid rgba(255,255,255,.12);
}
.drawer-head{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding: 6px 0 14px;
  border-bottom: 1px solid rgba(255,255,255,.14);
}
.closebtn{
  width:42px;height:42px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.32);
  background: rgba(255,255,255,.05);
  color:white;
  cursor:pointer;
}
.drawer nav{padding: 12px 0}
.drawer a, .drawer .mb-dropbtn{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding: 12px 12px;
  border-radius: 14px;
  color:white;
  text-decoration:none;
  font-size: 14px;
  letter-spacing: .12px;
  opacity: .96;
}
.drawer a:hover, .drawer .mb-dropbtn:hover{background: rgba(234,217,181,.14);}
.mb-sub{display:none; margin: 6px 0 12px; padding-left: 6px;}
.mb-sub.open{display:block;}
.mb-sub a{font-size: 13px; opacity: .95; padding: 10px 12px;}
.chev{opacity:.85}

/* Hero: more editorial, less marketing */
.hero{
  position:relative;
  height: 500px;
  display:flex;
  align-items:flex-end;
  color:white;
}
.hero img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  filter: brightness(.35) contrast(1.02) saturate(1.05);
}
.hero:after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(8,49,39,.15), rgba(8,49,39,.62));
}
.hero .content{
  position:relative;
  z-index:2;
  max-width: 820px;
  padding: 0 20px 36px;
}
.hero h1{
  margin:0 0 12px;
  font-size: 46px;
  font-weight: 780;
  letter-spacing: -1.0px;
  line-height: 1.05;
}
.hero p{
  margin:0 0 18px;
  font-size: 17px;
  color: rgba(255,255,255,.92);
  max-width: 74ch;
}
.hero .btn{margin-right:10px}

/* Keep your existing desktop styles, then add this: */

@media (max-width: 768px) {
  .hero {
    /* 1. Remove the fixed height that causes the 'zoom' effect */
    height: auto !important;
    
    /* 2. Create a responsive box based on width. 
       16/9 is standard, but you can use 4/3 if your images are taller. */
    aspect-ratio: 16 / 9; 
    
    /* 3. Ensure the container doesn't get squashed too small for text */
    min-height: 240px; 
    
    /* 4. Keep text at the bottom */
    display: flex;
    align-items: flex-end;
  }

  .hero img {
    /* 5. 'contain' ensures the WHOLE image fits inside the box.
       'cover' fills the box but might crop 1-2% of edges. */
    object-fit: cover; 
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  /* 6. Shrink text so it doesn't cover the building or faces */
  .hero .content {
    padding: 0 15px 15px;
    z-index: 2;
  }

  .hero h1 {
    font-size: 22px !important;
    margin-bottom: 5px;
  }

  .hero p {
    font-size: 13px !important;
    line-height: 1.3;
  }
}




/* Sections: more whitespace, less shadow */
.section{padding: 68px 0;}
.section h2{
  margin:0 0 14px;
  color: var(--dark-green);
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.45px;
}
.lead{
  color: var(--muted);
  max-width: 80ch;
  margin: 0 0 26px;
  font-size: 15.5px;
}

.cards{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 22px;
}

.card{
  background:white;
  border: 1px solid rgba(11,18,32,.09);
  border-radius: var(--radius);
  padding: 26px;
  box-shadow: 0 8px 18px rgba(11,18,32,.05);
}
.card h3{
  margin:0 0 10px;
  color: var(--deep-green);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.2px;
}
.card p{margin:0; color: var(--muted); font-size: 14px;}

.note{
  background: rgba(234,217,181,.45);
  border: 1px solid rgba(11,18,32,.10);
  border-radius: var(--radius);
  padding: 18px 20px;
  color: rgba(11,18,32,.85);
}

/* Footer */
footer{
  background: rgba(8,49,39,.98);
  color:white;
  padding: 40px 0;
  text-align:center;
  margin-top: 44px;
  border-top: 1px solid rgba(255,255,255,.12);
}
.small{font-size: 13px; opacity: .86;}

/* Responsive */
@media (max-width: 980px){
  .hero{height: 440px;}
  .hero h1{font-size: 38px;}
}
@media (max-width: 860px){
  .menu, .cta{display:none;}
  .hamburger{display:inline-flex;}
  .navbar{flex-wrap:nowrap;}
}
@media (max-width: 520px){
  .hero{height: 410px;}
  .hero .content{padding-bottom: 28px;}
  .hero h1{font-size: 32px; letter-spacing: -0.7px;}
  .hero p{font-size: 15.5px;}
  .section{padding: 58px 0;}
  .section h2{font-size: 24px;}
}

/* Green hyperlinks (replace default blue) */
a {
  color: var(--deep-green);
  text-decoration: none;
  font-weight: 600;
}

a:hover {
  color: var(--gold);
  text-decoration: underline;
}

.dropdown a,
.drawer a {
  font-weight: 500;
}


/* Premium Campus Hero Refinement */
.hero {
  height: 540px;
}

.hero img {
  object-position: center 40%; /* better architectural crop */
  filter: brightness(.50) contrast(1.05) saturate(1.02);
}



.hero .established {
  margin-top: 18px;
  font-size: 13px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(255,255,255,.85);
  position: relative;
}

.hero .established:before {
  content: "";
  display: block;
  width: 60px;
  height: 2px;
  background: var(--gold);
  margin-bottom: 12px;
}
.hero .content{
  position:relative;
  z-index:2;
  max-width: 820px;
  padding: 0 20px 36px;
}
.hero h1{
  margin:0 0 12px;
  font-size: 46px;
  font-weight: 780;
  letter-spacing: -1.0px;
  line-height: 1.05;
}
.hero p{
  margin:0 0 18px;
  font-size: 17px;
  color: rgba(255,255,255,.92);
  max-width: 74ch;
}
.hero .btn{margin-right:10px}

/* Sections: more whitespace, less shadow */
.section{padding: 68px 0;}
.section h2{
  margin:0 0 14px;
  color: var(--dark-green);
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.45px;
}
.lead{
  color: var(--muted);
  max-width: 80ch;
  margin: 0 0 26px;
  font-size: 15.5px;
}

.cards{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 22px;
}

.card{
  background:white;
  border: 1px solid rgba(11,18,32,.09);
  border-radius: var(--radius);
  padding: 26px;
  box-shadow: 0 8px 18px rgba(11,18,32,.05);
}
.card h3{
  margin:0 0 10px;
  color: var(--deep-green);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.2px;
}
.card p{margin:0; color: var(--muted); font-size: 14px;}

.note{
  background: rgba(234,217,181,.45);
  border: 1px solid rgba(11,18,32,.10);
  border-radius: var(--radius);
  padding: 18px 20px;
  color: rgba(11,18,32,.85);
}

/* Footer */
footer{
  background: rgba(8,49,39,.98);
  color:white;
  padding: 40px 0;
  text-align:center;
  margin-top: 44px;
  border-top: 1px solid rgba(255,255,255,.12);
}
.small{font-size: 13px; opacity: .86;}

/* Responsive */
@media (max-width: 980px){
  .hero{height: 440px;}
  .hero h1{font-size: 38px;}
}
@media (max-width: 860px){
  .menu, .cta{display:none;}
  .hamburger{display:inline-flex;}
  .navbar{flex-wrap:nowrap;}
}
@media (max-width: 520px){
  .hero{height: 410px;}
  .hero .content{padding-bottom: 28px;}
  .hero h1{font-size: 32px; letter-spacing: -0.7px;}
  .hero p{font-size: 15.5px;}
  .section{padding: 58px 0;}
  .section h2{font-size: 24px;}
}

/* Green hyperlinks (replace default blue) */
a {
  color: var(--deep-green);
  text-decoration: none;
  font-weight: 600;
}

a:hover {
  color: var(--gold);
  text-decoration: underline;
}

.dropdown a,
.drawer a {
  font-weight: 500;
}


/* Premium Campus Hero Refinement */
.hero {
  height: 540px;
}

.hero img {
  object-position: center 40%; /* better architectural crop */
  /* filter: brightness(.50) contrast(1.05) saturate(1.02); */
  filter: brightness(0.5) contrast(1.02) saturate(0.9);
}



.hero .established {
  margin-top: 18px;
  font-size: 13px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(255,255,255,.85);
  position: relative;
}

.hero .established:before {
  content: "";
  display: block;
  width: 60px;
  height: 2px;
  background: var(--gold);
  margin-bottom: 12px;
}






.mv-container {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Creates two equal columns */
    gap: 20px;
    font-family: sans-serif;
    max-width: 1200px;
    /*margin: 20px auto; */
  }

  .mv-box {
    /*padding: 20px;
     border: 1px solid #ddd;
    border-radius: 8px;
    background-color: #f9f9f9;*/
  }

  .mv-box h2 {
    color: #2c3e50;
    margin-top: 0;
    /* border-bottom: 2px solid #3498db;
    display: inline-block;*/
  }
/* Target the Vision box specifically */
  .vision-box {
    
  }
  
  .mission-box {
    
  }
  /* Responsive: Stack columns on small screens */
  @media (max-width: 600px) {
    .mv-container {
      grid-template-columns: 1fr;
    }
  }
	
	/* MOBILE MAGIC: Swap the order */
  @media (max-width: 768px) {
    .vision-box {
      order: -1; /* This pushes Vision to the top */
    }
  }	


/* -------------------------------------------------- */

	
	/* Container setup */
.team-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 40px;
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
  font-family: sans-serif;
}

/* Individual card width */
.profile-card {
  flex: 1;
  min-width: 250px;
  max-width: 350px;
}

/* Circular Image Styling */
.image-wrapper {
  width: 200px;
  height: 200px;
  margin: 0 auto 20px;
  overflow: hidden;
  border-radius: 50%; /* Makes it a circle */
}

.image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Prevents stretching */
  filter: grayscale(100%); /* Matches the black & white look */
}

/* Text Styling */
.profile-card h3 {
  font-size: 1.1rem;
  color: #333;
  margin-bottom: 5px;
}

.profile-card p {
  font-size: 1rem;
  color: #777;
  font-style: italic;
  margin: 0;
}

/* Mobile Responsive adjustment */
@media (max-width: 768px) {
  .team-container {
    flex-direction: column;
    align-items: center;
  }
}