
:root{
  --navy:#0b1e3f;
  --gold:#c6a664;
  --slate:#556070;
  --bg:#f8fafc;
  --text:#1f2937;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Helvetica,Arial,sans-serif;color:var(--text);background:var(--bg);line-height:1.6}
a{color:var(--navy);text-decoration:none}
a.button{display:inline-block;padding:12px 18px;border-radius:999px;border:1px solid var(--navy)}
a.button.primary{background:var(--navy);color:#fff;border-color:var(--navy)}
a.button.ghost{background:transparent;color:var(--navy);border-color:var(--navy)}
.container{max-width:1100px;margin:0 auto;padding:20px}
.nav{background:var(--navy);color:#fff}
.nav .container{display:flex;align-items:center;justify-content:space-between}
.brand{font-weight:700;letter-spacing:.3px}
.brand small{font-weight:400;opacity:.85}
.nav a{color:#fff;margin-left:18px}
.hero{padding:64px 20px;background:linear-gradient(180deg,#fff, #eef2f7)}
.hero h1{font-size:40px;margin:8px 0 10px 0;color:var(--navy)}
.hero p.lead{font-size:18px;color:var(--slate);max-width:800px}
.badges{display:flex;gap:42px;flex-wrap:wrap;margin:18px 0 0}
.badge{background:#fff;border:1px solid #e5e7eb;color:var(--slate);padding:6px 10px;border-radius:999px;font-size:14px}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:42px}
.card{background:#fff;border:1px solid #e5e7eb;border-radius:16px;padding:18px}
.card h3{margin:4px 0 8px 0;color:var(--navy)}
footer{background:#0f1f3b;color:#cdd7e3;margin-top:40px}
footer .container{display:grid;grid-template-columns:1fr;gap:42px;padding:24px 20px}
.kv{border-radius:16px;border:1px solid #e5e7eb;background:#fff;display:flex;gap:42px;align-items:center;padding:18px}
.kv img{width:140px;height:140px;object-fit:cover;border-radius:12px;border:1px solid #e5e7eb}
.section{padding:28px 20px}
h2{color:var(--navy);margin:6px 0 14px 0}
table{border-collapse:collapse;width:100%}
td,th{border:1px solid #e5e7eb;padding:10px;text-align:left}
.small{font-size:14px;color:#6b7280}
.form{background:#fff;border:1px solid #e5e7eb;border-radius:16px;padding:18px}
label{display:block;margin:10px 0 6px 0;font-weight:600}
input,select,textarea{width:100%;padding:10px;border:1px solid #d1d5db;border-radius:10px;font:inherit}
textarea{min-height:120px}
.cta{display:flex;gap:42px;margin-top:16px;flex-wrap:wrap}
hr{border:0;border-top:1px solid #e5e7eb;margin:24px 0}
@media (max-width:900px){.grid{grid-template-columns:1fr 1fr}.kv{flex-direction:column;align-items:flex-start}.kv img{width:100%;height:auto}}
@media (max-width:640px){.grid{grid-template-columns:1fr}}

.nav img{display:block;height:46px}

.nav .container{gap:42px}
.nav img{height:56px}

/* YC Logo enlargement */
img[src*="logo-yc-body-stacked"],
.site-logo, .navbar-brand img, .header-logo img, img.logo {
  height: 120px !important;
  width: auto !important;
  object-fit: contain;
}
@media (max-width: 768px) {
  img[src*="logo-yc-body-stacked"],
  .site-logo, .navbar-brand img, .header-logo img, img.logo {
    height: 90px !important;
  }
}

/* YC aesthetic alignment — banner + nav palette */
header, .site-header, .navbar, .header, .nav, .topbar, .menu, .navigation {
  background-color: #f4ede7 !important;
}

.nav a, .navbar a, .navigation a, .nav-item a, .menu a, .header a {
  color: #4a4a46 !important;
}

.nav a:hover, .navbar a:hover, .navigation a:hover, .menu a:hover {
  color: #2f2f2c !important;
}

/* Institutional footer logos */
.footer-institutional {
  background:#f4ede7; /* match top banner */
  padding: 24px 0 16px;
  border-top: 1px solid #d6d6d6; /* subtle divider */
  text-align:center;
}
.footer-institutional .logo-row {
  display:flex; align-items:center; justify-content:center;
  gap: 42px; flex-wrap: wrap;
}
.footer-institutional .logo-row img {
  height: 95px; vertical-align: middle; width:auto; display:inline-block;
  filter: none;
}
@media (max-width: 640px){
  .footer-institutional .logo-row { gap:42px; }
  .footer-institutional .logo-row img { height:95px; }
}

/* Balance RCPSC width presence slightly */


/* Added by assistant: about photo style */

.about-photo {
  border-radius: 50%;
  max-width: 260px;
  height: auto;
  border: 4px solid #bfa44e;
  box-shadow: 0 4px 15px rgba(0,0,0,0.15);
}



/* Added by assistant: hero portrait */
.hero-portrait img { 
  width: 240px; 
  height: auto; 
  border-radius: 50%; 
  border: 4px solid #bfa44e; 
  box-shadow: 0 4px 15px rgba(0,0,0,0.15);
}
@media (min-width: 800px) {
  /* make hero text and image sit side by side if container supports flex */
  .hero-portrait { margin-left: 24px; }
}
@media (max-width: 799px) {
  .hero-portrait img { width: 200px; }
  .hero-portrait { display: block; margin: 16px auto 0; text-align: center; }
}
