/* Base: Montserrat; subtle diagonal backdrop; masculine minimal */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;800&display=swap');

:root{
  --ink:#111315;
  --muted:#5a5a5a;
  --navy:#1D274C;
  --accent:#C4172C; /* Ben Meer red */
  --bg:#ffffff;
  --soft:#eef2f6; /* match-toned panel behind logo to hide matte if any */
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Montserrat,system-ui,-apple-system,Segoe UI,Roboto,'Helvetica Neue',Arial,sans-serif;
  color:var(--ink);
  background: var(--bg);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* Top diagonal similar to TYATY */
.page{
  min-height:100%;
  display:flex;
  flex-direction:column;
  background:
    linear-gradient(135deg, rgba(29,39,76,0.055) 0%, rgba(29,39,76,0.055) 35%, transparent 35%) top right/65% 18% no-repeat,
    linear-gradient(180deg, rgba(0,0,0,0.02), rgba(0,0,0,0)) no-repeat;
}

.hero{
  text-align:center;
  padding:64px 20px 16px;
}

.logo-wrap{
  width:140px;
  height:auto;
  margin:0 auto 12px;
  position:relative;
}
/* Matte-matching pad behind the image to visually dissolve boxed backgrounds */
.logo-wrap::before{
  content:"";
  position:absolute;
  inset:4px 4px 10px 4px;
  background:var(--soft);
  border-radius:12px;
  filter:blur(0.3px);
  opacity:.9;
}
.logo{
  position:relative;
  display:block;
  width:140px;
  height:auto;
  margin:0 auto;
  image-rendering:auto;
  mix-blend-mode:multiply; /* if the PNG has a matte, reduce box visibility */
}

/* shrink on mobile; slight decrease per feedback */
@media (max-width:640px){
  .logo-wrap{ width:118px }
  .logo{ width:118px }
}

h1{
  font-weight:800;
  letter-spacing:.02em;
  font-size:28px;
  margin:6px auto 6px;
}
h1 .em{ color:var(--navy) }
.sub{
  margin:2px 0 12px;
  color:var(--muted);
  font-size:14px;
}
.sub a{ color:var(--navy); text-decoration:none; border-bottom:1px dotted rgba(0,0,0,.25) }
.sub a:hover{ color:var(--accent) }

.tagline{
  margin:6px auto 24px;
  font-size:14px;
  color:#2c7b7b;
  opacity:.92;
  max-width:800px;
}

/* Content */
.content{
  width:min(920px, 92vw);
  margin:0 auto;
  padding: 8px 0 40px;
}
.content h2{
  font-size:18px;
  margin:18px 0 6px;
  color:var(--navy);
  letter-spacing:.02em;
}
.content p{ margin:8px 0; color:#2a2f36; }
.activities{ padding-left:16px; margin:6px 0 2px }
.activities li{ margin:6px 0 }

.badge{
  display:inline-block;
  border:1px solid #ced6e0;
  border-radius:6px;
  padding:3px 7px;
  font-weight:600;
  font-size:12px;
  color:#1f2d3d;
  background:#f7f9fc;
  margin:0 6px 6px 0;
}
.badge .sym{
  font-weight:800;
  color:var(--navy);
  margin-right:6px;
}
.badge .descr{ color:#3f4854; font-weight:500 }

/* Accent separators */
.hr{
  height:1px; background:linear-gradient(90deg, transparent, rgba(196,23,44,.45), transparent);
  border:0; margin:18px 0;
}

.contact{
  margin-top:10px;
  color:#2a2f36;
}
.contact a{ color:var(--navy); text-decoration:none; }
.contact a:hover{ color:var(--accent); }

.motto{ text-align:center; color:#263145; margin:14px 0 0; font-weight:600; }

footer{
  margin-top:auto;
  text-align:center;
  font-size:13px;
  color:#6b7683;
  padding:22px 20px 36px;
  border-top:1px solid rgba(0,0,0,.06);
}