:root{
  --bg:#ffffff;
  --ink:#202124;
  --muted:#5f6368;
  --line:#e7e7e7;
  --brand:#222222;
  --accent:#2b2b2b;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font:16px/1.6 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
}
a{color:var(--ink); text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%; display:block}

.site-header{
  position:sticky; top:0; z-index:10;
  display:flex; align-items:center; justify-content:space-between;
  padding:22px clamp(16px,4vw,48px);
  background:rgba(255,255,255,0.96);
  border-bottom:1px solid var(--line);
  backdrop-filter:saturate(180%) blur(6px);
  transition:padding .2s ease;
}
.scrolled .site-header{padding:12px clamp(16px,4vw,48px)}

.brand {
  display: flex;
  align-items: center;
  justify-content: center;
}

.brand img {
  width: 180px;           /* increase logo size */
  height: 180px;
  object-fit: contain;
  filter: none;          /* optional: remove grayscale for true logo colors */
}

.brand span{font-size:18px}

.nav{display:flex; gap:22px; align-items:center}
.nav a{font-weight:500; color:var(--muted)}
.nav a:hover{color:var(--ink)}
.nav .cta{padding:.55rem .9rem; border:1px solid var(--line); border-radius:999px; color:var(--ink)}
.nav .cta:hover{border-color:#c9c9c9; text-decoration:none}

.hero {
  min-height:72vh;
  display:grid;
  place-items:center;
  background:#ffffff;
}

.hero-inner{max-width:960px; padding:64px clamp(16px,4vw,48px); text-align:center}
.hero h1{font-size: clamp(32px, 5vw, 60px); line-height:1.1; letter-spacing:-.5px; margin:0 0 16px}
.lede{color:var(--muted); font-size: clamp(16px, 2.2vw, 20px)}
.narrow{max-width:860px; margin-inline:auto}

.hero-cta{margin-top:28px; display:flex; gap:12px; justify-content:center; flex-wrap:wrap}
.button{display:inline-block; padding:.9rem 1.2rem; border-radius:999px; background:var(--ink); color:#fff; border:1px solid var(--ink)}
.button:hover{filter:brightness(0.95); text-decoration:none}
.button.ghost{background:transparent; color:var(--ink); border-color:var(--line)}

.strips{display:grid; grid-template-columns: repeat(3, 1fr); gap:1px; background:var(--line); margin:40px 0}
.strip{background:#fafafa; padding:32px}
.strip h3{margin:0 0 8px}
.strip p{color:var(--muted)}

.cred{padding:24px 0 64px}
.cred-inner{max-width:1100px; margin:0 auto; padding:0 clamp(16px,4vw,48px); display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.card{border:1px solid var(--line); padding:24px; border-radius:12px; background:white}
.card h4{margin:0 0 8px}

.page-hero{padding:72px clamp(16px,4vw,48px) 32px}
.page-hero h1{font-size: clamp(28px,4.8vw,44px); margin:0 0 10px}
.page-hero .lede{max-width:960px}

.team{padding:16px clamp(16px,4vw,48px) 72px}
.team h2{margin:0 0 18px}
.team-grid{display:grid; grid-template-columns:1fr; gap:28px; max-width:1000px}
.member{display:grid; grid-template-columns:160px 1fr; gap:20px; align-items:start; padding:22px 0; border-top:1px solid var(--line)}
.member img{width:160px; height:160px; object-fit:cover; border-radius:12px; filter:grayscale(20%)}
.member-meta h3{margin:0}
.role{color:var(--muted); margin:6px 0 6px}
.contact{font-size:15px; color:var(--muted)}
.bio{margin-top:8px}

.values{padding:16px 0 72px; background:#fafafa; border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.values-inner{max-width:1000px; margin:0 auto; padding:0 clamp(16px,4vw,48px); display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.values h4{margin:.2rem 0}

.contact-wrap{max-width:1000px; margin:0 auto 90px; padding:0 clamp(16px,4vw,48px); display:grid; grid-template-columns:420px 1fr; gap:24px}
.contact-card{border:1px solid var(--line); border-radius:12px; padding:24px; background:white}
.contact-form{border:1px dashed var(--line); border-radius:12px; padding:24px; background:#fcfcfc}
.contact-form label{display:block; font-weight:600; font-size:14px; margin:10px 0}
.contact-form input,.contact-form textarea{width:100%; padding:12px 14px; margin-top:6px; border:1px solid var(--line); border-radius:10px; font:inherit}
.contact-form input:focus,.contact-form textarea:focus{outline:none; border-color:#c9c9c9}

.site-footer{border-top:1px solid var(--line); background:#fff}
.footer-inner{max-width:1100px; margin:0 auto; padding:28px clamp(16px,4vw,48px)}
.footer-brand{display:flex; align-items:center; gap:10px; font-weight:700}
.footer-brand img{width:28px; height:28px; filter:grayscale(100%)}
.footer-cols{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:14px}
.footer-cols h4{margin:.2rem 0}
.footer-cols p{color:var(--muted); margin:.2rem 0}
.legal{border-top:1px solid var(--line); text-align:center; color:var(--muted); font-size:14px; padding:14px}

@media (max-width: 900px){
  .strips{grid-template-columns:1fr}
  .cred-inner{grid-template-columns:1fr}
  .values-inner{grid-template-columns:1fr}
  .contact-wrap{grid-template-columns:1fr}
  .member{grid-template-columns:120px 1fr}
}

.footer-brand img {
  display: none;   /* hides the logo */
}



/* --- Image heroes with overlay --- */
.hero.has-bg, .page-hero.has-bg{
  position: relative;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 360px;
  color: var(--ink);
}
.hero.has-bg::before, .page-hero.has-bg::before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(255,255,255,.75), rgba(255,255,255,.92));
}
.hero .hero-inner, .page-hero .hero-inner, .page-hero .lede, .page-hero .title-wrap{
  position: relative; /* above overlay */
  z-index: 1;
}
/* Optional decorative section image */
.section-visual{
  margin: 28px auto 0;
  max-width: var(--container);
  padding: 0 clamp(16px,4vw,48px);
}
.section-visual img{
  width:100%; height: 360px; object-fit: cover; border-radius: 14px;
  box-shadow: 0 12px 28px rgba(0,0,0,.08);
}


/* --- Image interaction and refinement --- */
.section-visual img,
.hero.has-bg,
.page-hero.has-bg{
  transition: filter 0.8s ease, transform 0.4s ease;
  filter: grayscale(30%) brightness(0.98);
}
.section-visual img:hover,
.hero.has-bg:hover,
.page-hero.has-bg:hover{
  filter: grayscale(0%) brightness(1);
  transform: scale(1.01);
}